:root {
    --bg: #f4efe6;
    --bg-accent: #e8dcc6;
    --surface: rgba(255, 252, 247, 0.9);
    --surface-strong: #fff9f1;
    --surface-muted: rgba(240, 231, 218, 0.82);
    --border: rgba(77, 57, 34, 0.18);
    --border-strong: rgba(77, 57, 34, 0.28);
    --text: #2f2418;
    --muted: #6c5a47;
    --primary: #a64b1a;
    --primary-dark: #80360f;
    --success: #1e7a59;
    --success-soft: rgba(30, 122, 89, 0.12);
    --danger: #a32929;
    --danger-soft: rgba(163, 41, 41, 0.1);
    --warning: #8d5a0a;
    --warning-soft: rgba(141, 90, 10, 0.12);
    --shadow: 0 16px 40px rgba(56, 37, 18, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at top right, rgba(166, 75, 26, 0.16), transparent 28%),
        radial-gradient(circle at left center, rgba(66, 104, 91, 0.12), transparent 24%),
        linear-gradient(180deg, var(--bg) 0%, #efe7da 100%);
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

.shell {
    width: min(1320px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 32px 0 48px;
}

.app-shell {
    padding-top: 24px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    padding: 24px;
}

.app-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
}

.app-view-shell {
    margin-top: 18px;
    display: grid;
    gap: 16px;
}

.app-view-shell-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.app-view-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.breadcrumb-trail {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    color: var(--muted);
    font-size: 14px;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(77, 57, 34, 0.08);
}

.breadcrumb-item.current {
    background: rgba(166, 75, 26, 0.12);
    color: var(--primary);
    font-weight: 700;
}

.breadcrumb-separator {
    color: rgba(77, 57, 34, 0.4);
}

.header-actions,
.panel-head,
.inline-form,
.button-row,
.entity-top,
.entity-actions,
.pill-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.header-actions {
    justify-content: flex-end;
}

body[data-demo-shell-mode="lite"] .header-full-only,
body[data-demo-shell-mode="pro"] .header-full-only,
body.free-only-site .header-full-only,
body.free-only-site .demo-mode-link {
    display: none;
}

body.free-only-site .app-view-shell {
    margin-top: 12px;
}

body.free-only-site .app-view-nav {
    display: none;
}

body[data-demo-shell-mode="lite"] .demo-mode-link-lite,
body[data-demo-shell-mode="pro"] .demo-mode-link-pro,
body[data-demo-shell-mode="full"] .demo-mode-link-full {
    display: none;
}

body.focused-demo-shell .app-header {
    align-items: flex-start;
}

body.focused-demo-shell .app-view-shell {
    margin-top: 12px;
}

.panel-head {
    justify-content: space-between;
    margin-bottom: 16px;
}

.compact-head {
    margin-bottom: 12px;
}

.entity-actions {
    justify-content: flex-end;
}

.entity-top {
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.eyebrow {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    color: var(--primary);
    font-weight: 700;
}

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

h1,
h2,
h3 {
    font-family: "IBM Plex Serif", Georgia, serif;
}

h1 {
    font-size: clamp(32px, 4vw, 54px);
    margin-bottom: 12px;
}

h2 {
    font-size: 24px;
    margin-bottom: 0;
}

h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.lead {
    color: var(--muted);
    max-width: 72ch;
    line-height: 1.6;
}

.hero-sale {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.95fr);
    gap: 24px;
    align-items: stretch;
}

.hero-copy {
    display: grid;
    gap: 18px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.quick-demo-nav {
    margin: 18px 0 22px;
}

.demo-rehearsal {
    margin: 18px 0 0;
}

.demo-rehearsal-shell {
    display: grid;
    gap: 18px;
}

.demo-rehearsal-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.demo-rehearsal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.demo-value-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.demo-value-card {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(77, 57, 34, 0.12);
    border-radius: 18px;
    padding: 16px;
    display: grid;
    gap: 8px;
}

.demo-value-card strong {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.demo-value-card span {
    line-height: 1.5;
    color: var(--text);
}

.demo-value-card.success {
    border-color: rgba(30, 122, 89, 0.2);
    background: rgba(244, 252, 247, 0.94);
}

.demo-value-card.warning {
    border-color: rgba(141, 90, 10, 0.2);
    background: rgba(255, 249, 240, 0.94);
}

.demo-value-card.muted {
    background: rgba(255, 252, 247, 0.92);
}

.demo-scenario-card {
    display: grid;
    gap: 16px;
    border: 1px solid rgba(77, 57, 34, 0.14);
    border-radius: 22px;
    background: rgba(255, 252, 247, 0.94);
    padding: 18px;
}

.demo-scenario-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.demo-scenario-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.demo-scenario-panel {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(77, 57, 34, 0.1);
    border-radius: 18px;
    padding: 16px;
}

.messenger-demo-list {
    display: grid;
    gap: 14px;
}

.messenger-demo-card {
    border: 1px solid rgba(77, 57, 34, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    padding: 16px;
    display: grid;
    gap: 12px;
}

.messenger-live-block {
    display: grid;
    gap: 12px;
}

.messenger-live-result-card {
    border-radius: 16px;
    border: 1px dashed rgba(77, 57, 34, 0.16);
    background: rgba(255, 252, 247, 0.82);
    padding: 14px;
    display: grid;
    gap: 10px;
}

.messenger-live-result-card h5 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.draft-block {
    margin: 0;
    border-radius: 14px;
    background: rgba(247, 242, 233, 0.95);
    border: 1px solid rgba(77, 57, 34, 0.08);
    padding: 14px;
    color: var(--text-color);
    line-height: 1.55;
    white-space: pre-wrap;
}

.demo-journey-card,
.demo-step-card {
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(77, 57, 34, 0.12);
    border-radius: 20px;
    padding: 18px;
    display: grid;
    gap: 14px;
    min-height: 100%;
}

.demo-journey-card.lite {
    border-color: rgba(30, 122, 89, 0.2);
    background: rgba(244, 252, 247, 0.94);
}

.demo-journey-card.pro {
    border-color: rgba(141, 90, 10, 0.2);
    background: rgba(255, 249, 240, 0.94);
}

.demo-step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.demo-step-card.success {
    border-color: rgba(30, 122, 89, 0.18);
    background: rgba(244, 252, 247, 0.94);
}

.demo-step-card.warning {
    border-color: rgba(141, 90, 10, 0.2);
    background: rgba(255, 249, 240, 0.94);
}

.demo-step-card.danger {
    border-color: rgba(163, 41, 41, 0.2);
    background: rgba(255, 247, 247, 0.95);
}

.demo-step-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.demo-step-index {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.demo-script {
    margin: 0;
    padding-top: 12px;
    border-top: 1px dashed rgba(77, 57, 34, 0.14);
    color: var(--text);
    line-height: 1.55;
}

.demo-script strong {
    color: var(--primary-dark);
}

.demo-journey-card .button-row,
.demo-step-actions {
    margin-top: auto;
}

.lite-experience {
    margin-top: 18px;
}

.lite-shell {
    display: grid;
    gap: 18px;
}

.lite-hero {
    display: grid;
    gap: 18px;
    background:
        radial-gradient(circle at top right, rgba(166, 75, 26, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(255, 249, 241, 0.96) 0%, rgba(248, 241, 231, 0.96) 100%);
    border: 1px solid rgba(166, 75, 26, 0.18);
}

.lite-hero-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.lite-headline {
    max-width: 70ch;
}

.lite-signal-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.lite-signal-card.success {
    border-color: rgba(30, 122, 89, 0.18);
    background: rgba(244, 252, 247, 0.94);
}

.lite-signal-card.warning {
    border-color: rgba(141, 90, 10, 0.22);
    background: rgba(255, 249, 240, 0.92);
}

.lite-signal-card.danger {
    border-color: rgba(163, 41, 41, 0.22);
    background: rgba(255, 247, 247, 0.94);
}

.lite-finance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lite-finance-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(77, 57, 34, 0.12);
    border-radius: 20px;
    padding: 18px;
}

.lite-finance-card strong {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}

.lite-finance-card span {
    font-size: 24px;
    font-weight: 700;
}

.lite-finance-card.cash-flow-card {
    border-color: rgba(166, 75, 26, 0.22);
    box-shadow: 0 16px 36px rgba(166, 75, 26, 0.1);
}

.lite-finance-card.cash-flow-card span {
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.05;
    font-family: "IBM Plex Serif", Georgia, serif;
}

.lite-journey-shell {
    display: grid;
    gap: 14px;
}

.lite-journey-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lite-journey-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(77, 57, 34, 0.12);
    border-radius: 18px;
    padding: 14px 16px;
}

.lite-journey-step.is-active {
    border-color: rgba(166, 75, 26, 0.24);
    box-shadow: 0 16px 30px rgba(166, 75, 26, 0.1);
}

.lite-journey-step.is-done {
    border-color: rgba(30, 122, 89, 0.18);
    background: rgba(244, 252, 247, 0.94);
}

.lite-journey-index {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 57, 34, 0.08);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

.lite-journey-step.is-active .lite-journey-index {
    background: rgba(166, 75, 26, 0.18);
    color: var(--accent-deep);
}

.lite-journey-step.is-done .lite-journey-index {
    background: rgba(30, 122, 89, 0.16);
    color: var(--success);
}

.lite-journey-copy {
    display: grid;
    gap: 6px;
}

.lite-journey-copy strong {
    font-size: 15px;
}

.lite-journey-copy .hint {
    margin-bottom: 0;
}

.lite-next-step-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(77, 57, 34, 0.12);
    border-radius: 20px;
    padding: 18px 20px;
}

.lite-next-step-card.warning {
    border-color: rgba(141, 90, 10, 0.22);
    background: rgba(255, 249, 240, 0.92);
}

.lite-next-step-card.danger {
    border-color: rgba(163, 41, 41, 0.22);
    background: rgba(255, 247, 247, 0.94);
}

.lite-next-step-card.success {
    border-color: rgba(30, 122, 89, 0.18);
    background: rgba(244, 252, 247, 0.94);
}

.lite-next-step-copy {
    max-width: 70ch;
}

.lite-next-step-copy .hint {
    margin-bottom: 0;
}

.lite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lite-receipt-file-input,
.free-qr-image-input,
.free-detailed-receipt-input {
    display: none;
}

.lite-receipt-shell {
    display: grid;
    gap: 16px;
}

.lite-receipt-upload-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(30, 122, 89, 0.14);
    background: linear-gradient(180deg, rgba(244, 252, 247, 0.96) 0%, rgba(236, 248, 241, 0.96) 100%);
}

.lite-receipt-upload-card p,
.lite-receipt-empty p {
    margin-bottom: 0;
}

.free-qr-flow-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(166, 75, 26, 0.2);
    background:
        radial-gradient(circle at top right, rgba(166, 75, 26, 0.13), transparent 30%),
        linear-gradient(180deg, rgba(255, 249, 238, 0.98) 0%, rgba(246, 238, 225, 0.96) 100%);
}

.free-only-receipt-shell > .free-qr-flow-card {
    border: 0;
    box-shadow: none;
}

.free-qr-paywall {
    display: grid;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(174, 67, 31, 0.28);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 239, 224, 0.98), rgba(255, 248, 238, 0.98));
    color: #6f2f16;
}

.free-qr-paywall p {
    margin: 0;
}

.free-qr-paywall strong {
    font-family: var(--font-display);
    font-size: 1.08rem;
}

.free-qr-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 14px;
    align-items: start;
}

.free-detailed-flow-card {
    display: grid;
    gap: 16px;
    margin-top: 18px;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid rgba(30, 122, 89, 0.22);
    background:
        radial-gradient(circle at top left, rgba(30, 122, 89, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(244, 252, 247, 0.98) 0%, rgba(236, 247, 241, 0.96) 100%);
}

.free-detailed-items {
    display: grid;
    gap: 8px;
}

.free-detailed-item {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) 90px 70px 110px 110px 90px;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(30, 122, 89, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
}

.free-detailed-line-heading,
.free-detailed-review-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    grid-column: 1 / -1;
}

.free-detailed-item input {
    min-width: 0;
}

.free-detailed-review-actions .button {
    padding: 8px 11px;
}

.free-detailed-review-actions .button.active {
    border-color: var(--success);
    background: rgba(30, 122, 89, 0.14);
}

.free-detailed-evidence {
    grid-column: 1 / -1;
    font-size: 0.86rem;
}

.free-detailed-evidence p {
    margin: 6px 0 0;
}

.lite-receipt-card-list {
    display: grid;
    gap: 12px;
}

.lite-receipt-card {
    display: grid;
    gap: 14px;
}

.lite-receipt-card.is-primary {
    border-color: rgba(166, 75, 26, 0.24);
    box-shadow: 0 16px 36px rgba(166, 75, 26, 0.10);
}

.lite-receipt-empty {
    padding: 18px;
    border-radius: 20px;
    border: 1px dashed rgba(77, 57, 34, 0.18);
    background: rgba(255, 252, 247, 0.92);
}

.lite-budget-card {
    display: grid;
    gap: 14px;
}

.lite-project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.lite-project-card {
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(77, 57, 34, 0.12);
    border-radius: 20px;
    padding: 16px;
    display: grid;
    gap: 12px;
}

.lite-project-card.is-active {
    border-color: rgba(166, 75, 26, 0.28);
    box-shadow: 0 16px 36px rgba(166, 75, 26, 0.12);
}

.lite-operation-list,
.lite-prompt-list {
    display: grid;
    gap: 12px;
}

.lite-operation-item,
.lite-prompt-card {
    background: var(--surface-strong);
    border: 1px solid rgba(77, 57, 34, 0.12);
    border-radius: 18px;
    padding: 16px;
}

.lite-operation-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.lite-operation-item p,
.lite-prompt-card p {
    margin-bottom: 0;
}

.lite-prompt-card.warning {
    border-color: rgba(141, 90, 10, 0.22);
    background: rgba(255, 249, 240, 0.92);
}

.lite-prompt-card.danger {
    border-color: rgba(163, 41, 41, 0.22);
    background: rgba(255, 247, 247, 0.94);
}

.lite-prompt-card.success {
    border-color: rgba(30, 122, 89, 0.18);
    background: rgba(244, 252, 247, 0.94);
}

.lite-empty-state {
    display: grid;
    gap: 18px;
}

.lite-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lite-step-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(77, 57, 34, 0.12);
    border-radius: 18px;
    padding: 16px;
}

.pro-experience {
    display: block;
}

.pro-shell {
    display: grid;
    gap: 1.25rem;
}

.pro-hero {
    display: grid;
    gap: 1rem;
    border: 1px solid rgba(11, 58, 94, 0.14);
    background:
        radial-gradient(circle at top right, rgba(196, 222, 255, 0.48), transparent 42%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.96));
}

.pro-hero-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.pro-headline {
    display: grid;
    gap: 0.5rem;
}

.pro-summary-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.pro-summary-card {
    border: 1px solid rgba(11, 58, 94, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    padding: 1rem;
    display: grid;
    gap: 0.35rem;
}

.pro-summary-card strong {
    font-size: 0.92rem;
}

.pro-summary-card span {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text);
}

.pro-focus-callout {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    border: 1px solid rgba(11, 58, 94, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem 1.1rem;
}

.pro-panel-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.pro-panel {
    display: grid;
    gap: 1rem;
}

.pro-task-list {
    display: grid;
    gap: 0.85rem;
}

.pro-task-card,
.pro-risk-card,
.pro-log-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    display: grid;
    gap: 0.75rem;
}

.pro-task-card.warning,
.pro-risk-card.warning {
    border-color: rgba(221, 152, 48, 0.32);
    background: rgba(255, 247, 229, 0.92);
}

.pro-task-card.danger,
.pro-risk-card.danger {
    border-color: rgba(190, 64, 64, 0.28);
    background: rgba(255, 239, 239, 0.94);
}

.pro-task-card.success {
    border-color: rgba(27, 126, 93, 0.28);
    background: rgba(240, 252, 247, 0.92);
}

.pro-task-copy {
    display: grid;
    gap: 0.45rem;
}

.receipt-flow-card {
    display: grid;
    gap: 18px;
    border: 1px solid rgba(166, 75, 26, 0.18);
    background:
        radial-gradient(circle at top right, rgba(166, 75, 26, 0.14), transparent 36%),
        linear-gradient(180deg, rgba(255, 249, 241, 0.96) 0%, rgba(248, 241, 231, 0.96) 100%);
}

.receipt-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.receipt-flow-step {
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(77, 57, 34, 0.12);
    border-radius: 18px;
    padding: 16px;
}

.receipt-flow-step strong {
    display: block;
    margin-bottom: 8px;
}

.receipt-review-shell {
    display: grid;
    gap: 16px;
}

.receipt-review-shell.is-highlighted {
    border-color: rgba(166, 75, 26, 0.28);
    box-shadow: 0 18px 42px rgba(166, 75, 26, 0.12);
}

.receipt-review-card {
    display: grid;
    gap: 16px;
    border: 1px solid rgba(77, 57, 34, 0.12);
    border-radius: 20px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.82);
}

.receipt-review-card.warning {
    border-color: rgba(141, 90, 10, 0.22);
    background: rgba(255, 249, 240, 0.94);
}

.receipt-review-card.success {
    border-color: rgba(30, 122, 89, 0.2);
    background: rgba(244, 252, 247, 0.94);
}

.receipt-review-card.danger {
    border-color: rgba(163, 41, 41, 0.22);
    background: rgba(255, 247, 247, 0.95);
}

.receipt-review-copy {
    display: grid;
    gap: 6px;
}

.receipt-review-copy h4 {
    margin: 0;
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 22px;
}

.receipt-review-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.receipt-review-field {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(77, 57, 34, 0.1);
    border-radius: 16px;
    padding: 14px;
    display: grid;
    gap: 6px;
}

.receipt-review-field strong {
    font-size: 13px;
    color: var(--muted);
}

.receipt-review-field span.success {
    color: var(--success);
}

.receipt-review-field span.warning {
    color: var(--warning);
}

.receipt-review-field span.danger {
    color: var(--danger);
}

.receipt-review-field span.muted {
    color: var(--text);
}

.receipt-details-stack {
    display: grid;
    gap: 12px;
}

.receipt-debug-details {
    border-top: 1px dashed rgba(77, 57, 34, 0.14);
    padding-top: 12px;
}

.receipt-trace-block {
    display: grid;
    gap: 12px;
}

.receipt-trace-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.receipt-trace-metric {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(77, 57, 34, 0.1);
    background: rgba(255, 255, 255, 0.72);
}

.receipt-trace-metric strong {
    font-size: 13px;
    color: var(--muted);
}

.receipt-trace-metric span {
    color: var(--text);
    font-weight: 600;
}

.receipt-trace-metric em {
    font-style: normal;
    font-size: 13px;
}

.receipt-trace-metric em.success {
    color: var(--success);
}

.receipt-trace-metric em.warning {
    color: var(--warning);
}

.receipt-trace-metric em.danger {
    color: var(--danger);
}

.receipt-trace-metric em.muted {
    color: var(--muted);
}

.receipt-trace-warnings {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(163, 41, 41, 0.14);
    background: rgba(255, 247, 247, 0.8);
    display: grid;
    gap: 8px;
}

.receipt-trace-warnings strong {
    color: var(--danger);
    font-size: 13px;
}

.receipt-trace-warnings ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
}

.receipt-trace-qr {
    border-top: 1px dashed rgba(77, 57, 34, 0.14);
    padding-top: 10px;
}

.receipt-line-review-block {
    display: grid;
    gap: 14px;
    border: 1px solid rgba(166, 75, 26, 0.12);
    border-radius: 18px;
    background: rgba(255, 252, 247, 0.88);
}

.receipt-line-review-list {
    display: grid;
    gap: 12px;
}

.receipt-line-item-row {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(77, 57, 34, 0.12);
    background: rgba(255, 255, 255, 0.72);
}

.receipt-line-item-row.is-suggested-ok {
    border-color: rgba(33, 122, 89, 0.16);
    background: rgba(245, 252, 249, 0.92);
}

.receipt-line-item-row.is-disputed {
    border-color: rgba(141, 90, 10, 0.18);
    background: rgba(255, 250, 242, 0.92);
}

.receipt-line-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.receipt-line-confirm {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--text);
}

.receipt-confirm-guard {
    margin: 0;
}

.receipt-line-ready-block {
    display: grid;
    gap: 12px;
}

.receipt-line-ready-block > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--muted);
}

.receipt-line-warning-list {
    margin-top: -4px;
    margin-bottom: 0;
    padding-left: 18px;
}

.compact-empty {
    min-height: 180px;
}

.modal-shell {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 20px;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(34, 23, 15, 0.42);
    backdrop-filter: blur(6px);
}

.modal-card {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: rgba(255, 252, 247, 0.98);
    border: 1px solid rgba(77, 57, 34, 0.16);
    border-radius: 24px;
    box-shadow: 0 28px 64px rgba(34, 23, 15, 0.24);
    padding: 24px;
}

.anchor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.anchor-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(77, 57, 34, 0.14);
    background: rgba(255, 249, 241, 0.9);
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.anchor-link:hover {
    transform: translateY(-1px);
    border-color: rgba(166, 75, 26, 0.36);
    box-shadow: 0 8px 20px rgba(56, 37, 18, 0.08);
}

.hero-panel {
    display: grid;
    gap: 12px;
    align-content: start;
}

.hero-stat,
.pricing-card,
.value-card {
    background: var(--surface-strong);
    border: 1px solid rgba(77, 57, 34, 0.12);
    border-radius: 20px;
    padding: 18px;
}

.hero-stat strong,
.plan-name {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--muted);
}

.hero-stat span {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-size: 20px;
    line-height: 1.35;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
    margin-bottom: 18px;
}

.section-copy {
    max-width: 56ch;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.pricing-card {
    position: relative;
    display: grid;
    gap: 14px;
}

.pricing-card.featured {
    border-color: rgba(166, 75, 26, 0.28);
    box-shadow: 0 20px 48px rgba(166, 75, 26, 0.12);
}

.pricing-card.featured::before {
    content: "Для небольшой команды";
    position: absolute;
    top: 18px;
    right: 18px;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff7f2;
    background: var(--primary);
}

.pricing-top {
    padding-right: 160px;
}

.plan-name {
    margin-bottom: 4px;
    font-size: 28px;
    color: var(--text);
}

.plan-tag,
.pricing-note {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.feature-list,
.step-list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 10px;
    color: var(--text);
    line-height: 1.55;
}

.step-list li::marker {
    color: var(--primary);
    font-weight: 700;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.grid {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

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

.grid.one {
    grid-template-columns: 1fr;
}

.stack {
    display: grid;
    gap: 14px;
}

.stack.compact {
    gap: 12px;
}

.grow {
    flex: 1;
}

label {
    display: grid;
    gap: 6px;
    font-weight: 600;
}

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

input,
select,
textarea {
    width: 100%;
    border: 1px solid rgba(77, 57, 34, 0.18);
    background: rgba(255, 255, 255, 0.82);
    border-radius: 14px;
    padding: 12px 14px;
    color: var(--text);
}

textarea {
    resize: vertical;
    min-height: 92px;
}

.button {
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 700;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

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

.button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.button.primary {
    background: var(--primary);
    color: #fff7f2;
}

.button.primary:hover {
    background: var(--primary-dark);
}

.button.secondary,
.button.ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.button.ghost {
    padding: 8px 14px;
}

.button.danger {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid rgba(163, 41, 41, 0.18);
}

.button.warning {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid rgba(141, 90, 10, 0.18);
}

.badge,
.pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    background: rgba(33, 122, 89, 0.12);
    color: var(--success);
    border: 1px solid rgba(33, 122, 89, 0.18);
}

.badge.muted,
.pill.muted {
    background: rgba(77, 57, 34, 0.08);
    color: var(--muted);
    border-color: rgba(77, 57, 34, 0.12);
}

.pill.warning {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: rgba(141, 90, 10, 0.18);
}

.pill.danger {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: rgba(163, 41, 41, 0.18);
}

.pill.success {
    background: var(--success-soft);
    color: var(--success);
    border-color: rgba(30, 122, 89, 0.18);
}

.status-box {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid transparent;
    font-weight: 600;
}

.status-box.success {
    background: var(--success-soft);
    color: var(--success);
    border-color: rgba(33, 122, 89, 0.18);
}

.status-box.error {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: rgba(163, 41, 41, 0.18);
}

.status-box.info {
    background: rgba(77, 57, 34, 0.08);
    color: var(--muted);
    border-color: rgba(77, 57, 34, 0.12);
}

.hidden {
    display: none;
}

.app-view-hidden {
    display: none !important;
}

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(77, 57, 34, 0.16), transparent);
    margin: 18px 0;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.summary-tile,
.entity-card,
.meta-card,
.section-error {
    background: var(--surface-strong);
    border: 1px solid rgba(77, 57, 34, 0.12);
    border-radius: 18px;
    padding: 16px;
}

.summary-tile strong {
    display: block;
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 8px;
}

.summary-tile span {
    font-size: 22px;
    font-weight: 700;
}

.cards-stack {
    display: grid;
    gap: 12px;
}

.entity-card h3 {
    margin-bottom: 8px;
}

.entity-meta,
.field-list {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 14px;
}

.field-group {
    display: grid;
    gap: 10px;
}

.warning-list {
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    display: grid;
    gap: 6px;
}

.definition-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.definition-list div {
    display: grid;
    gap: 4px;
}

.field-title {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
}

.checkbox-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checkbox-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(77, 57, 34, 0.12);
    background: var(--surface-muted);
    font-weight: 500;
}

.checkbox-card input {
    width: auto;
    margin-top: 2px;
    padding: 0;
}

.mono,
code,
pre {
    font-family: "IBM Plex Mono", "Consolas", monospace;
}

.mono {
    font-size: 13px;
}

.hint {
    color: var(--muted);
    margin-bottom: 14px;
    line-height: 1.55;
}

.small {
    font-size: 13px;
}

.empty-state {
    color: var(--muted);
}

.is-disabled {
    opacity: 0.58;
}

.section-error {
    color: var(--muted);
    background: rgba(255, 250, 244, 0.76);
}

.details-block {
    margin-top: 14px;
    border-top: 1px dashed rgba(77, 57, 34, 0.16);
    padding-top: 14px;
}

details {
    margin-top: 12px;
    border: 1px dashed rgba(77, 57, 34, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.52);
    padding: 12px 14px;
}

details > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
}

details[open] > summary {
    margin-bottom: 12px;
}

.action-grid,
.meta-grid {
    display: grid;
    gap: 12px;
}

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

.action-grid.one {
    grid-template-columns: 1fr;
}

.pill-list {
    margin-top: 8px;
}

.pill-list.compact {
    margin-top: 0;
}

.json-block {
    margin-top: 10px;
    padding: 12px;
    border-radius: 14px;
    background: #22170f;
    color: #fdf3ea;
    overflow: auto;
    max-height: 260px;
}

.link-row a {
    color: var(--primary-dark);
    font-weight: 700;
    text-decoration: none;
}

.link-row a:hover {
    text-decoration: underline;
}

.positive {
    color: var(--success);
}

.negative {
    color: var(--danger);
}

@media (max-width: 1100px) {
    .grid.two,
    .hero-sale,
    .pricing-grid,
    .summary-grid,
    .checkbox-grid,
    .action-grid.two,
    .meta-grid.two,
    .demo-value-strip,
    .demo-scenario-grid,
    .demo-rehearsal-grid,
    .demo-step-grid,
    .lite-journey-grid,
    .lite-finance-grid,
    .lite-step-grid,
    .lite-project-grid,
    .free-qr-grid,
    .receipt-flow-grid,
    .receipt-review-grid {
        grid-template-columns: 1fr;
    }

    .receipt-trace-grid {
        grid-template-columns: 1fr;
    }

    .free-detailed-item {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .lite-signal-card {
        display: grid;
    }
}

@media (max-width: 900px) {
    .app-shell {
        padding-top: 16px;
    }

    .card {
        padding: 18px;
        border-radius: 20px;
    }

    .app-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .anchor-grid {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scroll-snap-type: x proximity;
        padding-bottom: 4px;
    }

    .app-view-nav {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .app-view-button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .breadcrumb-trail {
        justify-content: flex-start;
    }

    .lite-hero-top,
    .lite-operation-head,
    .lite-receipt-upload-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .anchor-link {
        flex: 0 0 auto;
        min-width: 180px;
        scroll-snap-align: start;
    }

    .header-actions,
    .entity-top,
    .inline-form,
    .app-view-shell-top,
    .demo-rehearsal-top,
    .demo-scenario-head,
    .lite-hero-top,
    .pro-hero-top,
    .lite-actions,
    .lite-next-step-card,
    .pro-focus-callout {
        justify-content: flex-start;
        flex-direction: column;
        align-items: stretch;
    }

    .demo-rehearsal-grid,
    .demo-step-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(84vw, 1fr);
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
    }

    .demo-journey-card,
    .demo-step-card {
        scroll-snap-align: start;
    }

    .demo-journey-card .button,
    .demo-step-actions .button,
    .pro-focus-actions .button {
        width: 100%;
        min-height: 48px;
    }

    .lite-actions {
        position: sticky;
        bottom: 10px;
        z-index: 3;
        padding: 12px;
        border-radius: 18px;
        background: rgba(255, 249, 241, 0.96);
        border: 1px solid rgba(166, 75, 26, 0.18);
        box-shadow: 0 16px 32px rgba(56, 37, 18, 0.14);
    }

    .lite-actions .button {
        width: 100%;
        min-height: 50px;
    }

    .lite-next-step-card .button {
        width: 100%;
        min-height: 48px;
    }

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

    .pricing-top {
        padding-right: 0;
    }

    .shell {
        width: min(100vw - 20px, 1320px);
    }

    .modal-shell {
        padding: 12px;
        align-items: end;
    }

    .modal-card {
        width: min(100vw - 12px, 560px);
        border-radius: 24px 24px 0 0;
        max-height: calc(100vh - 8px);
        padding: 20px 16px 0;
    }

    #quickOperationModal .button-row {
        position: sticky;
        bottom: 0;
        margin: 0 -16px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 252, 247, 0.98);
        border-top: 1px solid rgba(77, 57, 34, 0.12);
    }

    #quickOperationModal .button-row .button {
        flex: 1 1 0;
        min-height: 48px;
    }
}


/* G4 commercial and legal public package */
.commercial-shell {
    display: grid;
    gap: 22px;
}

.commercial-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr);
    gap: 28px;
    align-items: center;
    padding: clamp(26px, 5vw, 52px);
}

.commercial-hero-copy {
    display: grid;
    gap: 18px;
}

.commercial-lead {
    font-size: 18px;
}

.commercial-proof-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.commercial-proof-strip span {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.68);
    color: var(--muted);
    font-size: 14px;
}

.commercial-primary-cta {
    width: fit-content;
    min-width: 250px;
    justify-content: center;
}

.commercial-invite-note,
.commercial-boundary-note {
    margin: 0;
}

.commercial-outcome-card {
    border-radius: 22px;
    border: 1px solid rgba(166, 75, 26, 0.2);
    background: linear-gradient(180deg, rgba(255, 249, 241, 0.98), rgba(244, 236, 224, 0.94));
    padding: 22px;
}

.commercial-loop {
    margin: 0;
    padding-left: 22px;
    display: grid;
    gap: 14px;
    line-height: 1.5;
}

.commercial-section {
    display: grid;
    gap: 16px;
}

.commercial-heading {
    align-items: flex-end;
}

.commercial-benefits {
    align-items: stretch;
}

.compact-commercial-card {
    min-height: 100%;
}

.compact-commercial-card p:last-child,
.compact-commercial-card ul:last-child {
    margin-bottom: 0;
}

.commercial-pilot-card {
    display: grid;
    gap: 20px;
}

.commercial-pilot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.commercial-pricing {
    align-items: stretch;
}

.commercial-final-grid {
    align-items: stretch;
}

.commercial-footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 8px 18px;
    color: var(--muted);
}

.commercial-footer p {
    margin: 0;
}

.commercial-footer nav {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.commercial-footer a,
.legal-back a {
    color: var(--primary-dark);
}

.legal-shell {
    width: min(900px, calc(100vw - 32px));
}

.legal-document {
    display: grid;
    gap: 14px;
    line-height: 1.65;
}

.legal-document h1 {
    font-size: clamp(30px, 5vw, 48px);
}

.legal-document h2 {
    margin-top: 14px;
}

.legal-document p,
.legal-document ul {
    margin-bottom: 0;
}

.legal-back {
    margin-top: 18px !important;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

@media (max-width: 880px) {
    .commercial-hero,
    .commercial-pilot-grid {
        grid-template-columns: 1fr;
    }

    .commercial-primary-cta {
        width: 100%;
    }
}

/* CF-109 customer experience foundation */
:root {
    --bg: #f4f6fa;
    --bg-accent: #e8edf5;
    --surface: #ffffff;
    --surface-strong: #ffffff;
    --surface-muted: #f7f9fc;
    --border: #d9e0ea;
    --border-strong: #b8c4d4;
    --line: #d9e0ea;
    --text: #172033;
    --muted: #5d687a;
    --primary: #176b5b;
    --primary-dark: #0d5145;
    --accent: #2563eb;
    --accent-deep: #1d4ed8;
    --success: #11734f;
    --success-soft: #e9f7f0;
    --danger: #b42318;
    --danger-soft: #fef0ee;
    --warning: #9a5b08;
    --warning-soft: #fff5df;
    --focus: #2563eb;
    --shadow: 0 10px 30px rgba(23, 32, 51, 0.07);
}

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

body {
    color: var(--text);
    background: var(--bg);
    font-family: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
    line-height: 1.5;
}

body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 260px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(23, 107, 91, 0.08), rgba(37, 99, 235, 0.04) 52%, transparent);
}

.shell {
    width: min(1180px, calc(100% - 40px));
    padding: 28px 0 56px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    backdrop-filter: none;
    padding: 24px;
}

h1,
h2,
h3 {
    font-family: inherit;
    color: var(--text);
    letter-spacing: -0.025em;
}

h1 {
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.08;
    margin-bottom: 12px;
}

h2 {
    font-size: clamp(21px, 2.4vw, 27px);
    line-height: 1.2;
}

h3 {
    font-size: 18px;
    line-height: 1.25;
}

.eyebrow {
    margin-bottom: 6px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.lead {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
}

.hint,
.field-hint,
label small,
.section-description {
    color: var(--muted);
    font-weight: 400;
    line-height: 1.45;
}

.field-hint,
.section-description {
    margin: -4px 0 2px;
    font-size: 13px;
}

.section-description {
    margin: 6px 0 0;
    max-width: 70ch;
}

.grid {
    gap: 20px;
}

label {
    gap: 7px;
    color: #293349;
    font-size: 14px;
    font-weight: 700;
}

input,
select,
textarea {
    min-height: 46px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: #fff;
    padding: 11px 13px;
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input::placeholder,
textarea::placeholder {
    color: #8a94a6;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #8795aa;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 32%, transparent);
    outline-offset: 2px;
    border-color: var(--focus);
    box-shadow: 0 0 0 1px var(--focus);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.button {
    min-height: 44px;
    border-radius: 10px;
    padding: 10px 16px;
    gap: 8px;
    font-size: 14px;
    font-weight: 750;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.button:hover {
    transform: none;
    box-shadow: 0 5px 14px rgba(23, 32, 51, 0.1);
}

.button.primary {
    background: var(--primary);
    color: #fff;
}

.button.secondary {
    background: #eef5f4;
    border-color: #bad3ce;
    color: var(--primary-dark);
}

.button.ghost {
    min-height: 44px;
    padding: 8px 13px;
    background: #fff;
    border-color: var(--border);
    color: #354058;
}

.button[disabled] {
    opacity: .58;
}

.badge,
.pill {
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    font-weight: 700;
}

.status-box {
    position: relative;
    margin-top: 18px;
    border-radius: 12px;
    padding: 14px 16px 14px 44px;
    font-weight: 650;
    line-height: 1.45;
}

.status-box::before {
    position: absolute;
    left: 16px;
    top: 13px;
    font-size: 18px;
    font-weight: 900;
}

.status-box.success::before { content: "✓"; }
.status-box.error::before { content: "!"; }
.status-box.info::before { content: "i"; }

.action-dialog {
    width: min(520px, calc(100% - 32px));
    max-height: min(760px, calc(100dvh - 32px));
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    color: var(--text);
    padding: 0;
    box-shadow: 0 24px 70px rgba(23, 32, 51, .26);
}

.action-dialog::backdrop {
    background: rgba(17, 24, 39, .52);
    backdrop-filter: blur(2px);
}

.action-dialog-form {
    gap: 18px;
    padding: 24px;
}

.action-dialog-head h2,
.action-dialog-head p {
    margin-bottom: 0;
}

.action-dialog-actions {
    justify-content: flex-end;
    margin-top: 2px;
}

.button.danger {
    min-height: 44px;
    border-color: var(--danger);
    background: var(--danger);
    color: #fff;
}

.empty-state {
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    background: var(--surface-muted);
    color: var(--muted);
    padding: 16px;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 8px;
    left: 8px;
    transform: translateY(-150%);
    border-radius: 8px;
    background: var(--text);
    color: #fff;
    padding: 10px 14px;
}

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

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    letter-spacing: .06em;
}

.site-header {
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, .92);
}

.site-header-inner {
    width: min(1180px, calc(100% - 40px));
    min-height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.site-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 9px;
    color: #465168;
    text-decoration: none;
    font-weight: 650;
}

.site-nav a:hover {
    background: var(--surface-muted);
    color: var(--text);
}

/* Account */
.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(560px, 1.18fr);
    gap: clamp(32px, 6vw, 74px);
    align-items: start;
    padding-top: clamp(38px, 6vw, 72px);
}

.auth-intro {
    position: sticky;
    top: 32px;
    padding: 30px 0;
}

.auth-intro h1 {
    max-width: 16ch;
}

.auth-benefits {
    margin: 34px 0 24px;
    padding: 0;
    display: grid;
    gap: 20px;
    list-style: none;
}

.auth-benefits li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
}

.auth-benefits li > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #e5f2ef;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
}

.auth-benefits strong {
    display: block;
    margin-bottom: 3px;
}

.auth-benefits p,
.auth-boundary {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.auth-boundary {
    border-left: 3px solid #b8c4d4;
    padding-left: 14px;
}

.auth-card {
    min-width: 0;
    padding: clamp(22px, 4vw, 34px);
}

.auth-card-head {
    margin-bottom: 20px;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 24px;
    border-radius: 12px;
    background: #eef1f6;
    padding: 4px;
}

.auth-tab {
    min-height: 44px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-weight: 750;
}

.auth-tab.active {
    background: #fff;
    color: var(--text);
    box-shadow: 0 2px 8px rgba(23, 32, 51, .08);
}

.auth-panel-copy {
    margin-bottom: 20px;
}

.auth-panel-copy h3,
.auth-panel-copy p {
    margin-bottom: 4px;
}

.auth-field-grid {
    margin-top: 0;
}

.password-field {
    position: relative;
    display: block;
}

.field-group {
    display: grid;
    gap: 7px;
}

.password-field input {
    padding-right: 92px;
}

.password-toggle {
    position: absolute;
    top: 1px;
    right: 2px;
    min-width: 76px;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: var(--surface-muted);
    color: #465168;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.auth-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
}

.auth-card #accountStatus {
    margin: 0 0 20px;
}

.auth-card #sessionResult {
    margin-top: 20px;
}

.auth-claim {
    grid-column: 1 / -1;
    width: min(620px, 100%);
    margin: 0 auto;
}

/* Authenticated application headers */
.customer-header,
.integrations-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
    padding: 4px 0 22px;
}

.customer-heading h1,
.integrations-heading h1 {
    margin-bottom: 3px;
    font-size: clamp(26px, 3vw, 34px);
}

.customer-heading .lead,
.integrations-heading .lead {
    font-size: 14px;
}

.customer-header .header-actions,
.integrations-header .header-actions {
    flex-wrap: nowrap;
}

/* Messenger connections */
.integrations-shell {
    display: grid;
    gap: 18px;
}

.integration-guide {
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
    gap: 28px;
    align-items: start;
}

.integration-steps {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
}

.integration-steps li {
    min-width: 0;
    padding-left: 14px;
    border-left: 2px solid #c8d5e2;
}

.integration-steps span {
    color: var(--primary);
    font-size: 12px;
    font-weight: 850;
}

.integration-steps p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.integration-steps strong {
    color: var(--text);
}

.integration-context p:last-child {
    margin-bottom: 0;
}

/* Public and legal surfaces */
.commercial-shell {
    gap: 28px;
}

.commercial-hero {
    border-radius: 20px;
    padding: clamp(28px, 5vw, 54px);
}

.commercial-outcome-card {
    border-color: #cdd9e7;
    background: var(--surface-muted);
}

.commercial-proof-strip span {
    border-color: var(--border);
    background: var(--surface-muted);
}

.pricing-card,
.compact-commercial-card {
    border-radius: 16px;
}

@media (max-width: 980px) {
    .auth-shell {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-top: 32px;
    }

    .auth-intro {
        position: static;
        padding: 0;
    }

    .auth-intro h1 {
        max-width: none;
    }

    .auth-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .auth-benefits li {
        grid-template-columns: 1fr;
    }

    .customer-header,
    .integrations-header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .customer-header .header-actions,
    .integrations-header .header-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .integration-guide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .shell,
    .site-header-inner {
        width: min(100% - 24px, 1180px);
    }

    .shell {
        padding-top: 18px;
    }

    .site-header-inner {
        min-height: 64px;
        flex-wrap: wrap;
        gap: 8px 16px;
        padding-block: 10px;
    }

    .site-nav a:first-child {
        display: none;
    }

    .site-nav {
        flex: 1 1 100%;
        min-width: 0;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: thin;
    }

    .card {
        padding: 18px;
        border-radius: 14px;
    }

    .auth-benefits,
    .auth-field-grid,
    .integration-steps {
        grid-template-columns: 1fr;
    }

    .auth-intro .lead,
    .auth-boundary {
        font-size: 14px;
    }

    .customer-header,
    .integrations-header {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .customer-header .brand,
    .integrations-header .brand,
    .customer-header .header-actions,
    .integrations-header .header-actions {
        grid-column: auto;
    }

    .customer-header .header-actions,
    .integrations-header .header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .customer-header .header-actions .badge {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .button-row .button,
    .quick-actions .button {
        flex: 1 1 180px;
    }

    .commercial-hero {
        padding: 24px 18px;
    }
}

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

.hidden,
[hidden] {
    display: none !important;
}

/* CF-162: commercial landing page — product proof before explanation */
.landing-v2 {
    --landing-ink: #101a2b;
    --landing-navy: #10273a;
    --landing-teal: #1b806c;
    --landing-coral: #ff7650;
    --landing-coral-dark: #df5732;
    --landing-cream: #fff8ed;
    background: #f4f6f9;
    color: var(--landing-ink);
}

.landing-v2 h1,
.landing-v2 h2,
.landing-v2 h3 {
    font-family: "Segoe UI", "IBM Plex Sans", sans-serif;
    letter-spacing: -.035em;
}

.landing-v2 .button {
    border-radius: 12px;
    min-height: 48px;
    padding: 11px 18px;
    font-weight: 800;
}

.landing-v2 .button.primary {
    border-color: var(--landing-coral);
    background: var(--landing-coral);
    color: #152231;
    box-shadow: 0 10px 24px rgba(255, 118, 80, .22);
}

.landing-v2 .button.primary:hover {
    border-color: #ff8968;
    background: #ff8968;
}

.landing-header {
    position: sticky;
    z-index: 30;
    top: 0;
    border-bottom: 1px solid rgba(16, 39, 58, .09);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(18px);
}

.landing-header-inner,
.landing-footer,
.landing-hero-inner,
.landing-trust-line,
.landing-section,
.landing-final-cta {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.landing-header-inner {
    min-height: 72px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 22px;
    align-items: center;
}

.landing-header .brand {
    justify-self: start;
}

.landing-header .brand-mark,
.landing-footer .brand-mark {
    background: var(--landing-navy);
    color: #fff;
}

.landing-nav {
    display: flex;
    gap: 4px;
    align-items: center;
}

.landing-nav a,
.landing-footer a {
    color: #536175;
    text-decoration: none;
    font-weight: 700;
}

.landing-nav a {
    padding: 10px 12px;
    border-radius: 10px;
}

.landing-nav a:hover {
    background: #edf1f5;
    color: var(--landing-ink);
}

.landing-login {
    justify-self: end;
    min-height: 42px !important;
    padding: 8px 18px !important;
}

.landing-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 5% 10%, rgba(44, 151, 126, .2), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(255, 118, 80, .18), transparent 25%),
        linear-gradient(132deg, #0d1d2d 0%, #102a3e 58%, #123449 100%);
    color: #fff;
}

.landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(90deg, #000, transparent 82%);
}

.landing-hero-inner {
    position: relative;
    z-index: 1;
    min-height: 690px;
    padding-block: clamp(70px, 8vw, 108px);
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
    gap: clamp(44px, 6vw, 82px);
    align-items: center;
}

.landing-hero-copy {
    max-width: 610px;
}

.landing-kicker {
    margin: 0 0 22px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: #a9c9c2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.landing-kicker span {
    width: 28px;
    height: 2px;
    background: var(--landing-coral);
}

.landing-hero h1 {
    max-width: 700px;
    margin: 0;
    color: #fff;
    font-size: clamp(46px, 5.4vw, 76px);
    line-height: .98;
    letter-spacing: -.057em;
}

.landing-hero h1 em,
.landing-section-head h2 em {
    color: var(--landing-coral);
    font-style: normal;
}

.landing-lead {
    max-width: 610px;
    margin: 28px 0 0;
    color: #c9d5de;
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.62;
}

.landing-actions {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;
}

.landing-main-cta {
    min-width: 260px;
    justify-content: space-between;
}

.landing-main-cta span {
    font-size: 20px;
}

.landing-text-link {
    color: #e7eef3;
    font-weight: 750;
    text-decoration: none;
}

.landing-text-link:hover {
    color: #fff;
}

.landing-scope {
    margin: 38px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    color: #aebcc7;
    font-size: 13px;
}

.landing-scope li::before {
    content: "•";
    margin-right: 8px;
    color: var(--landing-coral);
}

.product-scene {
    position: relative;
    min-height: 540px;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.product-glow {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    filter: blur(4px);
}

.product-glow-one {
    width: 390px;
    height: 390px;
    background: rgba(45, 159, 134, .22);
    top: 14px;
    right: -30px;
}

.product-glow-two {
    width: 260px;
    height: 260px;
    background: rgba(255, 118, 80, .16);
    bottom: 10px;
    left: 10px;
}

.product-window {
    width: min(100%, 630px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 22px;
    background: #f7f9fc;
    color: var(--landing-ink);
    box-shadow: 0 34px 80px rgba(1, 12, 24, .42);
    transform: rotate(1.1deg);
}

.product-window-bar {
    min-height: 58px;
    padding: 0 18px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    border-bottom: 1px solid #dde4ec;
    background: #fff;
    font-size: 13px;
}

.window-dots {
    display: flex;
    gap: 6px;
}

.window-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dce2e9;
}

.window-dots i:first-child { background: #ff8262; }
.window-dots i:nth-child(2) { background: #ffc55d; }
.window-dots i:last-child { background: #49b98e; }

.mock-status {
    justify-self: end;
    border-radius: 999px;
    padding: 6px 9px;
    background: #e9f6f1;
    color: #17664f;
    font-size: 11px;
    font-weight: 850;
}

.product-window-body {
    padding: 25px;
}

.mock-stage-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: end;
}

.mock-stage-head h2 {
    margin: 3px 0 0;
    font-size: 27px;
}

.mock-overline {
    color: #7b8798;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mock-progress-label {
    color: var(--landing-teal);
    font-size: 13px;
    font-weight: 850;
}

.mock-progress {
    height: 7px;
    margin: 15px 0 20px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5eaf0;
}

.mock-progress span {
    display: block;
    width: 64%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--landing-teal), #39a889);
}

.mock-money-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.mock-money-grid > div {
    min-width: 0;
    padding: 13px;
    border: 1px solid #e1e6ed;
    border-radius: 13px;
    background: #fff;
}

.mock-money-grid span,
.mock-money-grid strong {
    display: block;
}

.mock-money-grid span {
    margin-bottom: 5px;
    color: #738094;
    font-size: 10px;
}

.mock-money-grid strong {
    font-size: 14px;
    white-space: nowrap;
}

.mock-money-grid .mock-money-total {
    border-color: #f6cdbf;
    background: #fff4ef;
}

.mock-feed {
    margin-top: 13px;
    overflow: hidden;
    border: 1px solid #e1e6ed;
    border-radius: 15px;
    background: #fff;
}

.mock-feed-row {
    min-height: 67px;
    padding: 12px 13px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    border-bottom: 1px solid #edf0f4;
}

.mock-feed-row:last-child { border-bottom: 0; }

.mock-feed-row div > strong,
.mock-feed-row div > span {
    display: block;
}

.mock-feed-row div > strong { margin-bottom: 3px; font-size: 12px; }
.mock-feed-row div > span { color: #738094; font-size: 10px; }
.mock-feed-row time { color: #8994a3; font-size: 10px; }

.mock-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 900;
}

.mock-icon-check { background: #e6f5ee; color: #13704e; }
.mock-icon-work { background: #e9f0ff; color: #2459bf; }
.mock-icon-file { background: #fff0ea; color: #c95532; }

.mock-pill {
    border-radius: 999px;
    padding: 6px 8px;
    background: #edf3ff;
    color: #295dbc;
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
}

.mock-pill-soft { background: #eef6f2; color: #286b56; }

.mock-decision {
    position: absolute;
    z-index: 3;
    right: -22px;
    bottom: 4px;
    width: 245px;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 17px;
    background: rgba(255, 255, 255, .96);
    color: var(--landing-ink);
    box-shadow: 0 22px 45px rgba(1, 12, 24, .25);
    transform: rotate(-2deg);
}

.mock-decision-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.mock-decision-top span {
    color: #d45532;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mock-decision-top strong { font-size: 12px; }
.mock-decision p { margin: 14px 0; color: #5d687a; font-size: 11px; }
.mock-decision > div:last-child { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.mock-approved { border-radius: 999px; padding: 6px 8px; background: #e8f7ef; color: #14714f; font-size: 9px; font-weight: 850; }

.landing-trust-line {
    transform: translateY(-1px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #dce2e9;
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(16, 26, 43, .05);
}

.landing-trust-line > div {
    position: relative;
    min-width: 0;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    border-right: 1px solid #e6ebf0;
}

.landing-trust-line > div:last-child { border-right: 0; }
.landing-trust-line > div > span { grid-row: 1 / 3; color: #bdc5d0; font-size: 11px; font-weight: 900; }
.landing-trust-line strong { font-size: 13px; }
.landing-trust-line small { margin-top: 2px; color: #7a8697; font-size: 11px; }

.landing-section {
    padding-block: clamp(76px, 9vw, 120px);
}

.landing-section-head {
    max-width: 760px;
}

.landing-section-head.centered {
    margin-inline: auto;
    text-align: center;
}

.landing-section-head h2,
.landing-final-cta h2 {
    margin: 0;
    font-size: clamp(34px, 4.3vw, 55px);
    line-height: 1.04;
}

.landing-section-head > p:last-child {
    max-width: 680px;
    margin: 20px 0 0;
    color: #637084;
    font-size: 17px;
    line-height: 1.55;
}

.landing-section-head.centered > p:last-child { margin-inline: auto; }

.landing-flow-section {
    padding-bottom: 76px;
}

.landing-flow {
    position: relative;
    margin: 54px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
}

.landing-flow::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 47px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: #d7dee7;
}

.landing-flow li {
    position: relative;
    min-height: 245px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid #dbe2ea;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 26, 43, .045);
}

.landing-flow li::after {
    content: "";
    position: absolute;
    right: -35px;
    bottom: -45px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #f4f7fa;
}

.flow-number {
    position: absolute;
    top: 18px;
    right: 18px;
    color: #c4ccd6;
    font-size: 11px;
    font-weight: 900;
}

.flow-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #edf6f3;
    color: var(--landing-teal);
    font-size: 21px;
    font-weight: 900;
}

.landing-flow h3 { margin: 27px 0 9px; font-size: 22px; }
.landing-flow p { position: relative; z-index: 1; margin: 0; color: #687488; font-size: 14px; line-height: 1.55; }

.landing-change-note {
    margin-top: 14px;
    padding: 19px 24px;
    display: flex;
    gap: 16px;
    align-items: center;
    border: 1px solid #f0c9bb;
    border-radius: 16px;
    background: #fff6f1;
}

.landing-change-note > span {
    flex: 0 0 auto;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--landing-coral);
    color: #172033;
    font-size: 22px;
    font-weight: 800;
}

.landing-change-note p { margin: 0; color: #5b6473; line-height: 1.45; }
.landing-change-note strong { color: var(--landing-ink); }

.landing-role-section {
    width: 100%;
    max-width: none;
    padding-inline: max(20px, calc((100% - 1180px) / 2));
    background: var(--landing-navy);
    color: #fff;
}

.landing-role-section .eyebrow { color: #75c5ae; }
.landing-role-section h2,
.landing-role-section h3,
.landing-final-cta h2 { color: #fff; }
.landing-role-section .landing-section-head > p:last-child { color: #aebdca; }

.role-grid {
    width: min(100%, 1000px);
    margin: 50px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.role-card {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 22px;
    background: rgba(255, 255, 255, .07);
}

.role-card::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -100px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(55, 167, 139, .12);
}

.role-card-owner::after { background: rgba(255, 118, 80, .12); }

.role-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 16px;
    align-items: center;
}

.role-avatar {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: #3aa889;
    font-size: 18px;
    font-weight: 900;
}

.role-card-owner .role-avatar { background: var(--landing-coral); color: #172033; }
.role-card-top div > span { color: #aebdca; font-size: 12px; font-weight: 750; }
.role-card h3 { margin: 4px 0 0; font-size: clamp(22px, 2.5vw, 29px); }

.role-card ul {
    position: relative;
    z-index: 1;
    margin: 30px 0 0;
    padding: 0;
    display: grid;
    gap: 15px;
    list-style: none;
    color: #d3dce4;
}

.role-card li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.role-card li > span { color: #75c5ae; font-weight: 900; }
.role-card-owner li > span { color: #ff9a7d; }

.role-card-foot {
    position: relative;
    z-index: 1;
    margin-top: 30px;
    padding-top: 21px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.role-card-foot strong { font-size: 13px; }
.role-card-foot span { color: #91a1af; font-size: 12px; }

.landing-questions {
    display: grid;
    grid-template-columns: minmax(280px, .76fr) minmax(0, 1.24fr);
    gap: 60px;
    align-items: center;
}

.question-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.question-cloud span {
    padding: 14px 17px;
    border: 1px solid #d9e1e9;
    border-radius: 999px;
    background: #fff;
    color: #4f5b6e;
    font-size: 14px;
    font-weight: 750;
    box-shadow: 0 6px 16px rgba(16, 26, 43, .035);
}

.question-cloud span:nth-child(2),
.question-cloud span:nth-child(5) {
    border-color: #f0c6b8;
    background: #fff4ef;
    color: #94482f;
}

.landing-pricing-section {
    border-top: 1px solid #dee4eb;
}

.landing-pricing-grid {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.landing-price-card {
    position: relative;
    padding: 28px;
    display: flex;
    flex-direction: column;
    border: 1px solid #d9e1e9;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 26, 43, .04);
}

.landing-price-card.featured {
    border: 2px solid var(--landing-teal);
    box-shadow: 0 18px 42px rgba(27, 128, 108, .13);
}

.price-ribbon {
    position: absolute;
    top: -14px;
    right: 18px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--landing-teal);
    color: #fff;
    font-size: 10px;
    font-weight: 850;
}

.price-audience {
    color: #8a95a5;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.landing-price-card h3 { margin: 12px 0 0; font-size: 25px; }
.price-value { margin: 16px 0 0; font-size: 36px; font-weight: 900; letter-spacing: -.04em; }
.price-value small { color: #7a8697; font-size: 13px; font-weight: 700; letter-spacing: 0; }
.price-value-text { font-size: 28px; }

.landing-price-card ul {
    margin: 25px 0 28px;
    padding: 22px 0 0;
    display: grid;
    gap: 11px;
    border-top: 1px solid #e6ebf0;
    list-style: none;
    color: #59667a;
    font-size: 14px;
}

.landing-price-card li::before { content: "✓"; margin-right: 9px; color: var(--landing-teal); font-weight: 900; }
.landing-price-card .button { width: 100%; margin-top: auto; justify-content: center; }

.landing-pricing-note {
    max-width: 760px;
    margin: 25px auto 0;
    color: #7b8797;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.landing-final-cta {
    margin-bottom: 88px;
    padding: clamp(28px, 5vw, 54px);
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: center;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 118, 80, .2), transparent 32%),
        var(--landing-navy);
    color: #fff;
}

.landing-final-cta .eyebrow { color: #75c5ae; }
.landing-final-cta > div:last-child { flex: 0 0 auto; text-align: center; }
.landing-final-cta > div:last-child p { margin: 11px 0 0; color: #aab9c5; font-size: 11px; }

.landing-footer {
    padding: 35px 0 42px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: flex-end;
    border-top: 1px solid #dde3ea;
}

.landing-footer > div > p { margin: 12px 0 0; color: #788496; font-size: 13px; }
.landing-footer nav { display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-end; font-size: 12px; }
.landing-footer a:hover { color: var(--landing-ink); }

@media (hover: hover) {
    .landing-flow li,
    .landing-price-card,
    .question-cloud span {
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .landing-flow li:hover,
    .landing-price-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 38px rgba(16, 26, 43, .09);
    }
    .question-cloud span:hover { transform: translateY(-2px); border-color: #b9c6d5; }
}

@media (max-width: 1020px) {
    .landing-hero-inner {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .landing-hero-copy { max-width: 760px; }
    .product-scene { width: min(100%, 720px); margin-inline: auto; }
    .landing-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-flow::before { display: none; }
    .landing-questions { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 760px) {
    .landing-header-inner,
    .landing-footer,
    .landing-hero-inner,
    .landing-trust-line,
    .landing-section,
    .landing-final-cta {
        width: min(100% - 24px, 1180px);
    }
    .landing-header-inner { min-height: 64px; grid-template-columns: 1fr auto; }
    .landing-nav { display: none; }
    .landing-hero-inner { padding-block: 58px 66px; }
    .landing-hero h1 { font-size: clamp(42px, 13vw, 62px); }
    .landing-lead { font-size: 17px; }
    .landing-actions { align-items: stretch; }
    .landing-main-cta { width: 100%; }
    .landing-text-link { display: flex; align-items: center; justify-content: center; min-height: 46px; }
    .landing-scope { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-scene { min-height: 470px; }
    .product-window { transform: none; }
    .mock-decision { right: 8px; bottom: -8px; }
    .landing-trust-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-trust-line > div:nth-child(2) { border-right: 0; }
    .landing-trust-line > div:nth-child(-n + 2) { border-bottom: 1px solid #e6ebf0; }
    .landing-section { padding-block: 76px; }
    .landing-flow { margin-top: 36px; grid-template-columns: 1fr; }
    .landing-flow li { min-height: 210px; }
    .role-grid,
    .landing-pricing-grid { grid-template-columns: 1fr; }
    .role-card-foot { align-items: flex-start; flex-direction: column; }
    .landing-final-cta { margin-bottom: 62px; align-items: stretch; flex-direction: column; }
    .landing-final-cta > div:last-child { text-align: left; }
    .landing-footer { align-items: flex-start; flex-direction: column; }
    .landing-footer nav { justify-content: flex-start; }
}

@media (max-width: 480px) {
    .landing-header .brand > span:last-child { font-size: 14px; }
    .landing-login { min-height: 40px !important; padding-inline: 14px !important; }
    .landing-kicker { align-items: flex-start; font-size: 10px; line-height: 1.4; }
    .landing-hero h1 { font-size: 43px; }
    .landing-scope { grid-template-columns: 1fr; gap: 6px; }
    .product-scene { min-height: 430px; margin-top: -8px; }
    .product-window-body { padding: 17px; }
    .product-window-bar { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: 12px; }
    .product-window-bar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mock-money-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mock-money-total { grid-column: 1 / -1; }
    .mock-feed-row { grid-template-columns: 31px minmax(0, 1fr) auto; gap: 8px; padding-inline: 9px; }
    .mock-feed-row div > span { display: none; }
    .mock-decision { width: min(230px, 82%); }
    .landing-trust-line { grid-template-columns: 1fr; }
    .landing-trust-line > div { border-right: 0; border-bottom: 1px solid #e6ebf0; }
    .landing-trust-line > div:last-child { border-bottom: 0; }
    .landing-change-note { align-items: flex-start; }
    .question-cloud { display: grid; }
    .question-cloud span { border-radius: 13px; }
}

/* CF-110: prioritize the account task on narrow screens */
@media (max-width: 700px) {
    .auth-shell {
        gap: 16px;
        padding-top: 18px;
    }

    .auth-intro {
        padding: 0 2px;
    }

    .auth-intro .auth-benefits,
    .auth-intro .auth-boundary {
        display: none;
    }

    body[data-auth-mode="login"] .auth-intro {
        display: none;
    }

    .auth-card {
        padding: 18px;
    }
}

/* CF-147 role-flow UX: multi-item procurement composer */
.procurement-item-editor {
    border: 1px solid var(--line, #dfe3e8);
    border-radius: 14px;
    padding: 14px;
    display: grid;
    gap: 12px;
    background: color-mix(in srgb, var(--surface, #fff) 96%, var(--ink, #111) 4%);
}
.procurement-item-editor + .procurement-item-editor { margin-top: 10px; }

/* CF-162 active comparison: high legibility, muted eucalyptus, no rust-orange. */
.landing-v2 {
    --landing-ink: #283a34;
    --landing-navy: #2e443d;
    --landing-teal: #789889;
    --landing-coral: #abc1b7;
    --landing-coral-dark: #7f9d90;
    --landing-cream: #f5f1e8;
    background: #f3f4ef;
}

.landing-v2 .button.primary {
    border-color: #607f73;
    background: #607f73;
    color: #fff;
    box-shadow: 0 10px 24px rgba(43, 67, 58, .18);
}
.landing-v2 .button.primary:hover { border-color: #6d8c80; background: #6d8c80; }
.landing-hero .button.primary,
.landing-final-cta .button.primary {
    border-color: #d8e3dc;
    background: #d8e3dc;
    color: #294039;
    box-shadow: 0 10px 24px rgba(8, 27, 21, .2);
}
.landing-hero .button.primary:hover,
.landing-final-cta .button.primary:hover { border-color: #e4ece7; background: #e4ece7; }

.landing-header { background: rgba(249, 248, 243, .93); border-bottom-color: rgba(46, 68, 61, .1); }
.landing-header .brand-mark,
.landing-footer .brand-mark { background: #385149; }
.landing-nav a,
.landing-footer a { color: #607069; }
.landing-nav a:hover { background: #eaeee9; }

.landing-hero {
    background:
        radial-gradient(circle at 7% 8%, rgba(143, 177, 161, .15), transparent 29%),
        radial-gradient(circle at 92% 10%, rgba(202, 214, 205, .08), transparent 27%),
        linear-gradient(132deg, #243833 0%, #2d443e 58%, #3a5049 100%);
    color: #f5f2e9;
}
.landing-hero::before {
    opacity: .25;
    background-image:
        linear-gradient(rgba(231, 239, 234, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(231, 239, 234, .045) 1px, transparent 1px);
}
.landing-kicker { color: #aebfb7; }
.landing-hero h1 { color: #f7f4ec; }
.landing-hero h1 em,
.landing-section-head h2 em { color: #abc1b7; }
.landing-lead { color: #d0dad5; }
.landing-text-link { color: #e2e8e4; }
.landing-text-link:hover { color: #fff; }
.landing-scope { color: #bac8c1; }

.product-glow-one { background: rgba(139, 174, 157, .17); }
.product-glow-two { background: rgba(206, 218, 210, .1); }
.product-window {
    border-color: rgba(229, 237, 232, .24);
    background: #f7f8f4;
    box-shadow: 0 32px 74px rgba(8, 24, 19, .37);
}
.mock-money-grid .mock-money-total { border-color: #cbd9d1; background: #eaf0ec; }
.mock-icon-file { background: #e9ede9; color: #5e776c; }
.mock-pill { background: #e8ede9; color: #557065; }
.mock-decision-top span { color: #657d72; }
.mock-approved { background: #e5eee8; color: #537365; }

.landing-change-note { border-color: #cbd8d0; background: #edf2ee; }
.landing-change-note > span { background: #789889; color: #fff; }

.landing-role-section { background: #2e443d; color: #f5f2e9; }
.landing-role-section .eyebrow { color: #abc1b7; }
.landing-role-section h2,
.landing-role-section h3 { color: #fff; }
.landing-role-section .landing-section-head > p:last-child { color: #c4d0ca; }
.role-card { border-color: rgba(230, 238, 233, .15); background: rgba(255, 255, 255, .065); }
.role-card::after,
.role-card-owner::after { background: rgba(171, 193, 183, .1); }
.role-card-owner .role-avatar { background: #abc1b7; color: #294039; }
.role-card-top div > span { color: #b8c7c0; }
.role-card ul { color: #d6dfda; }
.role-card li > span,
.role-card-owner li > span { color: #abc1b7; }
.role-card-foot { border-top-color: rgba(230, 238, 233, .13); }
.role-card-foot span { color: #aebfb7; }

.question-cloud span:nth-child(2),
.question-cloud span:nth-child(5) { border-color: #cad8d0; background: #eaf0ec; color: #506b60; }

.landing-final-cta { background: #2e443d; color: #f5f2e9; }
.landing-final-cta h2 { color: #fff; }
.landing-final-cta .eyebrow { color: #abc1b7; }
.landing-final-cta > div:last-child p { color: #b8c7c0; }

/* CF-163: durable Property Passport story on the public landing. */
.landing-passport-section {
    border-top: 1px solid #dce1da;
}

.passport-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}

.passport-use-cases {
    display: grid;
    gap: 2px;
    border-top: 1px solid #d9dfd8;
}

.passport-use-cases article {
    padding: 19px 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 15px;
    border-bottom: 1px solid #d9dfd8;
}

.passport-use-cases article > span {
    padding-top: 2px;
    color: #789889;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .09em;
}

.passport-use-cases strong,
.passport-use-cases p {
    display: block;
}

.passport-use-cases strong {
    color: #304039;
    font-size: 16px;
}

.passport-use-cases p {
    max-width: 540px;
    margin: 5px 0 0;
    color: #66766f;
    font-size: 13px;
    line-height: 1.55;
}

.passport-preview {
    overflow: hidden;
    border: 1px solid #d7dfd9;
    border-radius: 22px;
    background: #fbfaf6;
    box-shadow: 0 24px 56px rgba(43, 67, 58, .09);
}

.passport-preview-head {
    padding: 19px 22px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    border-bottom: 1px solid #dfe4de;
}

.passport-preview-head span {
    color: #789889;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.passport-preview-head strong {
    color: #304039;
    font-size: 14px;
}

.passport-timeline {
    margin: 0;
    padding: 8px 22px 16px;
    list-style: none;
}

.passport-timeline li {
    position: relative;
    min-height: 84px;
    padding: 18px 0 18px 31px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    border-bottom: 1px solid #e4e8e2;
}

.passport-timeline li:last-child { border-bottom: 0; }
.passport-timeline li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: -30px;
    left: 7px;
    width: 1px;
    background: #ccd8d1;
}

.passport-dot {
    position: absolute;
    top: 25px;
    left: 2px;
    width: 11px;
    height: 11px;
    border: 3px solid #fbfaf6;
    border-radius: 50%;
    background: #789889;
    box-shadow: 0 0 0 1px #789889;
}

.passport-timeline small,
.passport-timeline strong,
.passport-timeline p {
    display: block;
}

.passport-timeline small {
    color: #789889;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
}

.passport-timeline strong {
    margin-top: 4px;
    color: #304039;
    font-size: 14px;
}

.passport-timeline p {
    margin: 4px 0 0;
    color: #75827c;
    font-size: 11px;
}

.passport-timeline time {
    padding-top: 2px;
    color: #94a099;
    font-size: 11px;
    font-weight: 750;
}

.passport-boundary {
    max-width: 820px;
    margin: 24px 0 0;
    padding: 13px 16px;
    border-left: 3px solid #789889;
    background: #eaf0ec;
    color: #53675e;
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 1020px) {
    .passport-grid {
        grid-template-columns: 1fr;
    }
    .passport-preview {
        width: min(100%, 720px);
    }
}

@media (max-width: 480px) {
    .passport-grid { margin-top: 34px; }
    .passport-preview-head,
    .passport-timeline { padding-inline: 16px; }
    .passport-timeline li { padding-left: 28px; gap: 10px; }
    .passport-use-cases article { grid-template-columns: 34px minmax(0, 1fr); }
}

/* 2026-09-16 branding study: urrsunn public-home candidate.
   Visual-only/public-copy overlay on CF-175. Not a canonical product rename. */
.landing-brand-candidate {
    --story-forest: #233a32;
    --story-forest-deep: #172a24;
    --story-moss: #6f897d;
    --story-paper: #f4efe6;
    --story-paper-2: #ebe3d6;
    --story-ink: #27342f;
    --story-muted: #69736d;
    --story-clay: #9a5c43;
    --story-clay-deep: #7e4936;
    --story-line: #d8cfc2;
    background: var(--story-paper);
    color: var(--story-ink);
}

.landing-brand-candidate .landing-header {
    border-bottom-color: rgba(35, 58, 50, .12);
    background: rgba(247, 243, 235, .94);
}

.landing-brand-candidate .landing-header-inner {
    min-height: 76px;
}

.landing-brand-candidate .story-brand {
    gap: 11px;
    align-items: center;
    color: var(--story-forest-deep);
    text-decoration: none;
}

.landing-brand-candidate .brand-thread {
    width: 29px;
    height: 31px;
    flex: 0 0 29px;
    display: grid;
    align-content: center;
    gap: 5px;
}

.landing-brand-candidate .brand-thread i {
    height: 2px;
    display: block;
    border-radius: 999px;
    background: var(--story-forest);
}

.landing-brand-candidate .brand-thread i:first-child { width: 29px; }
.landing-brand-candidate .brand-thread i:nth-child(2) { width: 20px; margin-left: 9px; background: var(--story-clay); }
.landing-brand-candidate .brand-thread i:last-child { width: 25px; margin-left: 4px; }

.landing-brand-candidate .brand-wordmark {
    display: flex;
    gap: 5px;
    align-items: baseline;
    white-space: nowrap;
    line-height: 1;
}

.landing-brand-candidate .brand-wordmark strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.035em;
}

.landing-brand-candidate .brand-wordmark > span {
    color: var(--story-clay-deep);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-style: italic;
}

.landing-brand-candidate .landing-nav a,
.landing-brand-candidate .landing-footer a {
    color: #5d6a64;
}

.landing-brand-candidate .landing-nav a:hover {
    background: rgba(35, 58, 50, .065);
    color: var(--story-forest-deep);
}

.landing-brand-candidate .landing-login {
    border-color: rgba(35, 58, 50, .22);
    background: rgba(255, 255, 255, .45);
    color: var(--story-forest);
}

.landing-brand-candidate .landing-hero {
    overflow: hidden;
    border-bottom: 1px solid var(--story-line);
    background:
        radial-gradient(circle at 8% 2%, rgba(154, 92, 67, .09), transparent 27%),
        radial-gradient(circle at 88% 14%, rgba(111, 137, 125, .13), transparent 25%),
        linear-gradient(135deg, #f7f2e9 0%, #f1eadf 54%, #ece5da 100%);
    color: var(--story-ink);
}

.landing-brand-candidate .landing-hero::before {
    opacity: .3;
    background-image:
        linear-gradient(rgba(35, 58, 50, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35, 58, 50, .035) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.45) 58%, transparent 100%);
}

.landing-brand-candidate .landing-hero-inner {
    min-height: 720px;
    grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
    gap: clamp(48px, 6vw, 78px);
}

.landing-brand-candidate .landing-kicker {
    color: #66736d;
    letter-spacing: .105em;
}

.landing-brand-candidate .landing-kicker span {
    background: var(--story-clay);
}

.landing-brand-candidate .landing-hero h1,
.landing-brand-candidate .landing-section-head h2,
.landing-brand-candidate .landing-final-cta h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    letter-spacing: -.045em;
}

.landing-brand-candidate .landing-hero h1 {
    color: var(--story-forest-deep);
    font-size: clamp(50px, 5.25vw, 76px);
    line-height: .99;
}

.landing-brand-candidate .landing-hero h1 em,
.landing-brand-candidate .landing-section-head h2 em {
    color: var(--story-clay-deep);
    font-style: italic;
    font-weight: 500;
}

.landing-brand-candidate .landing-lead {
    color: #58655f;
    font-size: clamp(17px, 1.7vw, 19px);
    line-height: 1.66;
}

.landing-brand-candidate .button.primary {
    border-color: var(--story-clay);
    background: var(--story-clay);
    color: #fffaf3;
    box-shadow: 0 10px 24px rgba(113, 66, 48, .18);
}

.landing-brand-candidate .button.primary:hover {
    border-color: var(--story-clay-deep);
    background: var(--story-clay-deep);
}

.landing-brand-candidate .landing-hero .button.primary {
    border-color: var(--story-forest);
    background: var(--story-forest);
    color: #f8f4eb;
    box-shadow: 0 12px 28px rgba(35, 58, 50, .2);
}

.landing-brand-candidate .landing-hero .button.primary:hover {
    border-color: var(--story-forest-deep);
    background: var(--story-forest-deep);
}

.landing-brand-candidate .landing-text-link {
    color: var(--story-forest);
}

.landing-brand-candidate .landing-text-link:hover {
    color: var(--story-clay-deep);
}

.landing-brand-candidate .landing-scope {
    color: #647069;
    font-size: 12px;
    font-weight: 700;
}

.landing-brand-candidate .landing-scope li::before {
    color: var(--story-clay);
}

.landing-brand-candidate .product-scene {
    min-height: 558px;
    padding: 36px 8px 30px 30px;
}

.landing-brand-candidate .product-scene::before {
    content: "";
    position: absolute;
    z-index: -3;
    inset: 18px 12px 12px 0;
    border: 1px solid rgba(236, 231, 219, .14);
    border-radius: 34px;
    background:
        radial-gradient(circle at 86% 10%, rgba(154, 92, 67, .2), transparent 30%),
        linear-gradient(145deg, #1b3029 0%, #294239 64%, #344d43 100%);
    box-shadow: 0 38px 74px rgba(42, 51, 46, .18);
}

.landing-brand-candidate .product-scene::after {
    content: "СЛОВО  ·  РАБОТА  ·  РЕЗУЛЬТАТ";
    position: absolute;
    z-index: -1;
    top: 38px;
    left: 30px;
    color: rgba(238, 233, 221, .44);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.landing-brand-candidate .product-glow-one {
    background: rgba(120, 152, 137, .14);
}

.landing-brand-candidate .product-glow-two {
    background: rgba(154, 92, 67, .13);
}

.landing-brand-candidate .product-window {
    border-color: rgba(255,255,255,.28);
    border-radius: 18px;
    box-shadow: 0 34px 74px rgba(7, 23, 18, .36);
    transform: rotate(.55deg);
}

.landing-brand-candidate .mock-decision {
    right: -14px;
    bottom: 12px;
    border-color: #e8dfd2;
    border-radius: 14px;
    box-shadow: 0 22px 45px rgba(7, 23, 18, .23);
}

.landing-brand-candidate .mock-decision-top span {
    color: var(--story-clay-deep);
}

.landing-brand-candidate .landing-trust-line {
    border-color: var(--story-line);
    background: rgba(250, 247, 240, .92);
    box-shadow: 0 14px 30px rgba(40, 52, 47, .045);
}

.landing-brand-candidate .landing-trust-line > div {
    border-right-color: var(--story-line);
}

.landing-brand-candidate .landing-trust-line > div > span {
    color: #b5a99a;
}

.landing-brand-candidate .landing-trust-line strong {
    color: var(--story-forest-deep);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 600;
}

.landing-brand-candidate .landing-trust-line small {
    color: #777e79;
}

.landing-brand-candidate .landing-section {
    background: transparent;
}

.landing-brand-candidate .eyebrow {
    color: var(--story-clay-deep);
}

.landing-brand-candidate .landing-section-head h2 {
    color: var(--story-forest-deep);
}

.landing-brand-candidate .landing-flow li,
.landing-brand-candidate .landing-price-card,
.landing-brand-candidate .passport-preview {
    border-color: var(--story-line);
    background: rgba(250, 247, 240, .84);
}

.landing-brand-candidate .flow-icon {
    background: #e6ded2;
    color: var(--story-forest);
}

.landing-brand-candidate .landing-change-note {
    border-color: #d4c8ba;
    background: #eee7db;
}

.landing-brand-candidate .landing-change-note > span {
    background: var(--story-clay);
}

.landing-brand-candidate .landing-role-section {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(132deg, rgba(255,255,255,.015), rgba(255,255,255,0)),
        var(--story-forest-deep);
    color: #f2eee6;
}

.landing-brand-candidate .landing-role-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .18;
    background-image: linear-gradient(rgba(244,239,230,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(244,239,230,.045) 1px, transparent 1px);
    background-size: 58px 58px;
}

.landing-brand-candidate .landing-role-section .eyebrow { color: #c99782; }
.landing-brand-candidate .landing-role-section h2,
.landing-brand-candidate .landing-role-section h3 { color: #f8f4ec; }
.landing-brand-candidate .landing-role-section .landing-section-head > p:last-child { color: #c9d1cc; }
.landing-brand-candidate .role-card { border-color: rgba(239, 232, 219, .16); background: rgba(255,255,255,.055); }
.landing-brand-candidate .role-card::after,
.landing-brand-candidate .role-card-owner::after { background: rgba(154, 92, 67, .105); }
.landing-brand-candidate .role-card-owner .role-avatar { background: #d8c8b7; color: var(--story-forest-deep); }
.landing-brand-candidate .role-card-top div > span { color: #b7c1bc; }
.landing-brand-candidate .role-card ul { color: #d7ddd9; }
.landing-brand-candidate .role-card li > span,
.landing-brand-candidate .role-card-owner li > span { color: #d1a08b; }
.landing-brand-candidate .role-card-foot { border-top-color: rgba(239, 232, 219, .14); }
.landing-brand-candidate .role-card-foot span { color: #aeb9b3; }

.landing-brand-candidate .question-cloud span:nth-child(2),
.landing-brand-candidate .question-cloud span:nth-child(5) {
    border-color: #d2c5b6;
    background: #ece3d7;
    color: var(--story-clay-deep);
}

.landing-brand-candidate .landing-passport-section {
    border-top-color: var(--story-line);
}

.landing-brand-candidate .passport-use-cases {
    border-top-color: var(--story-line);
}

.landing-brand-candidate .landing-pricing-section {
    border-top: 1px solid var(--story-line);
}

.landing-brand-candidate .landing-price-card.featured {
    border-color: #b99784;
    box-shadow: 0 18px 40px rgba(77, 55, 43, .1);
}

.landing-brand-candidate .price-ribbon {
    background: var(--story-forest);
    color: #f8f4ec;
}

.landing-brand-candidate .landing-final-cta {
    border: 1px solid rgba(245, 239, 228, .13);
    background:
        radial-gradient(circle at 88% 18%, rgba(154, 92, 67, .25), transparent 30%),
        linear-gradient(135deg, #1c312a, #294139);
    color: #f4efe6;
}

.landing-brand-candidate .landing-final-cta .eyebrow {
    color: #d0a18d;
}

.landing-brand-candidate .landing-final-cta .button.primary {
    border-color: #ede4d7;
    background: #ede4d7;
    color: var(--story-forest-deep);
}

.landing-brand-candidate .landing-final-cta .button.primary:hover {
    border-color: #fffaf2;
    background: #fffaf2;
}

.landing-brand-candidate .landing-footer {
    border-top-color: var(--story-line);
}

.landing-brand-candidate .landing-footer > div > p {
    color: #747b76;
}

@media (max-width: 1020px) {
    .landing-brand-candidate .landing-hero-inner { grid-template-columns: 1fr; }
    .landing-brand-candidate .product-scene { padding-left: 26px; }
}

@media (max-width: 760px) {
    .landing-brand-candidate .landing-header-inner { min-height: 66px; }
    .landing-brand-candidate .brand-wordmark strong,
    .landing-brand-candidate .brand-wordmark > span { font-size: 18px; }
    .landing-brand-candidate .brand-thread { width: 24px; flex-basis: 24px; }
    .landing-brand-candidate .brand-thread i:first-child { width: 24px; }
    .landing-brand-candidate .brand-thread i:nth-child(2) { width: 17px; margin-left: 7px; }
    .landing-brand-candidate .brand-thread i:last-child { width: 21px; margin-left: 3px; }
    .landing-brand-candidate .landing-hero h1 { font-size: clamp(45px, 13.4vw, 62px); }
    .landing-brand-candidate .product-scene { padding: 32px 8px 28px 12px; }
    .landing-brand-candidate .product-scene::before { inset: 14px 0 8px; }
    .landing-brand-candidate .product-scene::after { left: 17px; top: 31px; }
}

@media (max-width: 480px) {
    .landing-brand-candidate .story-brand { gap: 8px; }
    .landing-brand-candidate .brand-wordmark { gap: 4px; }
    .landing-brand-candidate .brand-wordmark strong,
    .landing-brand-candidate .brand-wordmark > span { font-size: 16px; }
    .landing-brand-candidate .brand-thread { display: none; }
    .landing-brand-candidate .landing-hero h1 { font-size: 45px; }
    .landing-brand-candidate .product-scene { min-height: 452px; }
}