:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #111827; color: #f8fafc; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.hero, .centered { display: grid; place-items: center; min-height: 100vh; padding: 2rem; }
.hero > div, .card { max-width: 760px; width: 100%; }
.hero { grid-template-rows: auto minmax(0, 1fr); align-items: stretch; padding: 0; }
.hero > div { align-self: center; justify-self: center; padding: 3rem 2rem 5rem; }
.home-nav { width: min(1120px, calc(100% - 3rem)); min-height: 5.25rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.home-nav nav { display: flex; align-items: center; gap: 1rem; }
.home-nav nav a { color: #c7d6e8; font-size: .9rem; font-weight: 700; text-decoration: none; }
.home-nav nav a:hover { color: #8cf0df; }
.home-nav .home-account-link { padding: .55rem .8rem; border: 1px solid #3d706e; border-radius: .6rem; background: #113032; color: #a7f4e5; }
.price { color: #5eead4; font-size: clamp(2.8rem, 10vw, 6rem); font-weight: 800; letter-spacing: -0.06em; margin: .5rem 0; }
h1 { font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.05; letter-spacing: -.04em; margin: 0 0 1rem; }
h2 { margin-top: 2rem; }
.plan-name { margin: 1.8rem 0 .35rem; color: #99f6e4; font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.plan-summary { display: grid; gap: .35rem; margin: 1.1rem 0 0; padding: 1rem 1rem 1rem 2.2rem; border: 1px solid #2b5c68; border-radius: .8rem; background: #0c2630; color: #c7e9e9; }
.plan-summary li { padding-left: .1rem; font-size: .95rem; line-height: 1.45; }
p { color: #cbd5e1; font-size: 1.1rem; line-height: 1.6; }
.button { appearance: none; border: 0; border-radius: .65rem; background: #5eead4; color: #052e2b; cursor: pointer; font: inherit; font-weight: 750; padding: .85rem 1.2rem; }
.button:hover { background: #99f6e4; }
.button:disabled { cursor: progress; opacity: .65; }
.card { background: #172033; border: 1px solid #334155; border-radius: 1rem; padding: clamp(1.5rem, 6vw, 3rem); box-shadow: 0 20px 70px #02061777; }
form { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
input { flex: 1 1 260px; border: 1px solid #475569; border-radius: .65rem; padding: .85rem 1rem; color: #f8fafc; background: #0f172a; font: inherit; }
.message { min-height: 1.5rem; color: #fda4af; }
pre { overflow: auto; padding: 1rem; border-radius: .65rem; background: #020617; color: #cbd5e1; line-height: 1.5; white-space: pre-wrap; }
.key { color: #5eead4; word-break: break-all; }
.try-layout { display: grid; gap: 1rem; }
.extract-status { min-height: 1.5rem; margin: 1rem 0 0; color: #cbd5e1; }
.extract-status[data-state="loading"] { color: #93c5fd; }
.extract-status[data-state="success"] { color: #86efac; }
.extract-status[data-state="error"] { color: #fda4af; }
.try-layout .button[aria-busy="true"] { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; }
.try-layout .button[aria-busy="true"]::before { content: ''; width: .8rem; height: .8rem; border: 2px solid #052e2b55; border-top-color: #052e2b; border-radius: 50%; animation: extract-spinner .7s linear infinite; }
@keyframes extract-spinner { to { transform: rotate(1turn); } }
.flags-high { background: #7f1d1d; color: #fee2e2; padding: 1rem; border-radius: .5rem; }
.flags-medium { background: #713f12; color: #fef3c7; padding: 1rem; border-radius: .5rem; }
a { color: #5eead4; }

/* Development setup */
.setup-page { background: #0a1020; color: #ecf4ff; padding-bottom: 5rem; }
.setup-page::before { content: ''; position: fixed; z-index: -1; inset: -28rem 20% auto; height: 46rem; background: radial-gradient(circle, #164e6388, transparent 68%); pointer-events: none; }
.setup-nav { width: min(1120px, calc(100% - 3rem)); margin: 0 auto; min-height: 5.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { color: #f8fafc; font-size: 1.05rem; font-weight: 800; text-decoration: none; letter-spacing: -.02em; }
.brand span { color: #72e7d3; font: 600 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; margin-left: .45rem; text-transform: uppercase; }
.quiet-link { color: #b8c6dd; font-size: .95rem; text-decoration: none; }
.quiet-link:hover { color: #72e7d3; }
.setup-shell { width: min(1120px, calc(100% - 3rem)); margin: 0 auto; }
.setup-intro { max-width: 790px; padding: 4rem 0 2.75rem; }
.eyebrow, .readiness-label, .step-number { color: #72e7d3; font: 700 .74rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.setup-intro h1 { max-width: 780px; margin: .85rem 0 1.25rem; font-size: clamp(2.7rem, 6vw, 5rem); line-height: .98; }
.lede { max-width: 690px; color: #bdcbe0; font-size: 1.16rem; }
.security-note { max-width: 680px; display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.75rem; padding: .85rem 1rem; border: 1px solid #24526a; border-radius: .8rem; background: #0b2030aa; }
.security-note span { color: #72e7d3; font-size: 1.4rem; line-height: 1; }
.security-note p { margin: 0; color: #c2e5e5; font-size: .91rem; line-height: 1.45; }
.readiness { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin: 0 0 1.4rem; }
.readiness-card { min-height: 5.7rem; display: flex; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid #334760; border-radius: .9rem; background: #101a2ccc; }
.readiness-card p { margin: 0 0 .25rem; font-size: .7rem; }
.readiness-card strong { display: block; font-size: .94rem; line-height: 1.3; }
.readiness-dot { width: .7rem; height: .7rem; flex: 0 0 auto; border-radius: 999px; background: #fbbf24; box-shadow: 0 0 0 4px #fbbf2417; }
.readiness-card[data-state="ready"] .readiness-dot { background: #48d6a3; box-shadow: 0 0 0 4px #48d6a31c; }
.setup-panel { margin-top: 1rem; padding: clamp(1.35rem, 3vw, 2.25rem); border: 1px solid #31445f; border-radius: 1.1rem; background: linear-gradient(145deg, #142038ee, #0d1627ee); box-shadow: 0 1rem 3.5rem #0206172b; }
.panel-heading { display: flex; align-items: flex-start; gap: 1.1rem; }
.step-number { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin: .1rem 0 0; border: 1px solid #347485; border-radius: 999px; background: #113142; }
.panel-heading h2 { margin: 0; color: #f0f7ff; font-size: clamp(1.35rem, 3vw, 1.85rem); letter-spacing: -.03em; }
.panel-heading p:not(.step-number) { margin: .4rem 0 0; color: #9fb0c9; font-size: .98rem; }
.setup-form { display: grid; gap: 1.35rem; margin: 2rem 0 0; }
.setup-form fieldset { min-width: 0; margin: 0; padding: 1.25rem; border: 1px solid #2c405a; border-radius: .85rem; }
.setup-form legend { padding: 0 .45rem; color: #e6f0ff; font-size: 1rem; font-weight: 750; }
.setup-form legend span { margin-left: .35rem; color: #91a5c2; font-size: .82rem; font-weight: 500; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .8rem; }
.field-grid label { display: grid; gap: .42rem; color: #c8d6e9; font-size: .86rem; font-weight: 650; }
.field-grid input, .inline-form input { width: 100%; min-width: 0; flex: none; border-color: #3b526e; border-radius: .55rem; background: #091323; color: #f2f7ff; }
.field-grid input:focus, .inline-form input:focus { outline: 3px solid #5eead455; outline-offset: 1px; border-color: #5eead4; }
.wide-field { grid-column: 1 / -1; }
.field-hint { margin: .75rem 0 0; color: #9dafc8; font-size: .84rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.button-primary { background: #72e7d3; color: #042f2e; }
.button-primary:hover { background: #a0f3e3; }
.button-secondary { background: #20364d; color: #dcecff; border: 1px solid #41617c; }
.button-secondary:hover { background: #29455f; }
.button-ghost { background: transparent; color: #9ff3e4; border: 1px solid #49796f; }
.button-ghost:hover { background: #0d3734; }
.form-message { min-height: 1.35rem; margin: 0; color: #9fb0c9; font-size: .9rem; }
.form-message[data-type="success"] { color: #78e8b6; }
.form-message[data-type="error"] { color: #ffb4c1; }
.setup-panel-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .9fr); gap: 2rem; align-items: center; }
.panel-action, .test-key-area, .relay-area, .simulation-area { display: grid; gap: .8rem; }
.simulation-form { display: grid; grid-template-columns: minmax(190px, 1.3fr) minmax(130px, .7fr) auto; gap: .7rem; align-items: end; margin: 0; }
.simulation-form label { display: grid; gap: .42rem; color: #c8d6e9; font-size: .82rem; font-weight: 650; }
.simulation-form input { width: 100%; min-width: 0; flex: none; border-color: #3b526e; border-radius: .55rem; background: #091323; color: #f2f7ff; }
.simulation-form button { white-space: nowrap; }
.relay-visual { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .8rem; border: 1px solid #376276; border-radius: .7rem; background: #0a1c2d; color: #c3eff0; font-size: .83rem; font-weight: 700; }
.relay-visual span { padding: .32rem .45rem; border-radius: .4rem; background: #143a47; }
.relay-visual i { color: #7ae7d4; font-style: normal; }
.panel-action .button { justify-self: start; }
.inline-form { display: flex; gap: .7rem; flex-wrap: wrap; margin: 0; }
.inline-form input { flex: 1 1 220px; }
.key-result { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid #307265; border-radius: .75rem; background: #0c2a2b; }
.key-result p { margin: 0 0 .4rem; }
.key-result code { color: #bbfbeb; font: .87rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.try-link { display: inline-block; margin-top: .15rem; font-weight: 700; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 960px) {
  .readiness { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .setup-nav, .setup-shell { width: min(100% - 2rem, 1120px); }
  .setup-intro { padding-top: 2.5rem; }
  .readiness, .setup-panel-split, .field-grid, .simulation-form { grid-template-columns: 1fr; }
  .setup-panel-split { gap: 1.4rem; }
  .wide-field { grid-column: auto; }
  .setup-form fieldset { padding: 1rem; }
  .key-result { align-items: flex-start; flex-direction: column; }
}

/* Browser-rendered product map */
.visual-page { background: #08111f; color: #edf5ff; overflow-x: hidden; }
.visual-page::before, .visual-page::after { content: ''; position: fixed; z-index: -1; pointer-events: none; border-radius: 999px; filter: blur(8px); }
.visual-page::before { width: 46rem; height: 46rem; top: -26rem; left: -18rem; background: radial-gradient(circle, #0c617866, transparent 68%); }
.visual-page::after { width: 42rem; height: 42rem; top: 15rem; right: -25rem; background: radial-gradient(circle, #38277955, transparent 70%); }
.visual-nav, .visual-shell, .visual-footer { width: min(1180px, calc(100% - 3rem)); margin: 0 auto; }
.visual-nav { min-height: 5.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.visual-nav nav { display: flex; align-items: center; gap: 1.15rem; }
.visual-nav nav > a { color: #c2d0e4; text-decoration: none; font-size: .92rem; font-weight: 650; }
.visual-nav nav > a:hover { color: #83eedc; }
.visual-nav .nav-cta { padding: .6rem .85rem; border: 1px solid #3d706e; border-radius: .6rem; background: #113032; color: #a7f4e5; }
.visual-hero { max-width: 850px; padding: 5.5rem 0 3.2rem; }
.visual-hero h1 { margin: .8rem 0 1.3rem; font-size: clamp(3rem, 7.5vw, 6.3rem); line-height: .93; }
.visual-hero .lede { max-width: 700px; color: #b9c8dc; font-size: 1.2rem; }
.visual-legend { display: flex; flex-wrap: wrap; gap: .7rem 1.25rem; margin-top: 2rem; color: #a9b9d1; font-size: .85rem; }
.visual-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.legend-dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 999px; }
.legend-user { background: #74d8ff; box-shadow: 0 0 0 4px #74d8ff19; }
.legend-api { background: #7bedc8; box-shadow: 0 0 0 4px #7bedc819; }
.legend-provider { background: #bda6ff; box-shadow: 0 0 0 4px #bda6ff19; }
.legend-store { background: #ffcc7a; box-shadow: 0 0 0 4px #ffcc7a19; }
.flow-explorer { margin: 0 0 7rem; padding: clamp(1.15rem, 3.2vw, 2.45rem); border: 1px solid #304562; border-radius: 1.4rem; background: linear-gradient(150deg, #14223ae8, #0d1728ed 72%); box-shadow: 0 2rem 6rem #02061755; }
.flow-explorer-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.flow-explorer-heading h2, .visual-section-heading h2, .agent-loop h2 { margin: .45rem 0 0; font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1; letter-spacing: -.04em; }
.flow-summary { max-width: 340px; margin: 0; color: #aebdd2; font-size: .98rem; }
.flow-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: 2rem 0 1.75rem; padding: .4rem; border: 1px solid #2a3e59; border-radius: .85rem; background: #091322; }
.flow-tab { display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 3.15rem; padding: .7rem; border: 1px solid transparent; border-radius: .6rem; background: transparent; color: #a9b9ce; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 700; }
.flow-tab:hover { background: #15253a; color: #e7f2ff; }
.flow-tab[aria-selected="true"] { border-color: #4e908a; background: #153536; color: #b9f9e8; box-shadow: inset 0 1px #ffffff18; }
.tab-number { font: 700 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; color: #78dfcf; }
.flow-panel { animation: map-enter .32s ease both; }
@keyframes map-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.flow-diagram { display: flex; align-items: stretch; justify-content: center; gap: .7rem; padding: 1.25rem 0 1.8rem; }
.flow-node { position: relative; flex: 1 1 0; min-width: 0; min-height: 13.5rem; padding: 1.1rem; border: 1px solid #415876; border-radius: .9rem; background: linear-gradient(160deg, #14233b, #0f1b2e); }
.flow-node::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, #ffffff0a, transparent 42%); }
.flow-node h3 { position: relative; z-index: 1; margin: 1rem 0 .35rem; color: #eef6ff; font-size: 1.05rem; letter-spacing: -.02em; }
.flow-node p { position: relative; z-index: 1; margin: 0; color: #aebfd5; font-size: .82rem; line-height: 1.45; }
.node-index { position: absolute; top: .8rem; right: .8rem; color: #7f93af; font: 700 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.node-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .72rem; }
.node-icon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.node-user { border-color: #2d7391; background: linear-gradient(160deg, #102b42, #0c1a2c); }
.node-user .node-icon { color: #92e5ff; background: #124360; }
.node-api { border-color: #3d8274; background: linear-gradient(160deg, #12332f, #0c201f); }
.node-api .node-icon { color: #a9f4df; background: #155146; }
.node-provider { border-color: #6755aa; background: linear-gradient(160deg, #272247, #171631); }
.node-provider .node-icon { color: #d3c7ff; background: #493b82; }
.node-store { border-color: #8c6b3b; background: linear-gradient(160deg, #332719, #211912); }
.node-store .node-icon { color: #ffe1a7; background: #63481f; }
.flow-arrow { display: grid; place-items: center; flex: 0 0 1.15rem; color: #6be4d1; font-size: 1.55rem; font-weight: 400; text-shadow: 0 0 1rem #6be4d166; }
.flow-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.flow-outcomes-two { grid-template-columns: repeat(2, 1fr); }
.outcome-card { min-height: 6.6rem; padding: 1rem 1.05rem; border: 1px solid #334b68; border-radius: .8rem; background: #0b1525bb; }
.outcome-card span { display: block; margin-bottom: .38rem; font: 700 .68rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.outcome-card strong { display: block; color: #dce9fb; font-size: .91rem; line-height: 1.35; }
.outcome-response { border-color: #2d7190; }
.outcome-response span { color: #88e0fb; }
.outcome-store { border-color: #846834; }
.outcome-store span { color: #f5d18f; }
.outcome-provider { border-color: #6551a1; }
.outcome-provider span { color: #cbbfff; }
.flow-callout { display: grid; grid-template-columns: auto 1fr; gap: .85rem; margin-top: 1.3rem; padding: 1rem 1.1rem; border-radius: .75rem; background: #0e2d2c; border: 1px solid #28645e; color: #bcf1e5; }
.flow-callout strong { color: #83edd9; white-space: nowrap; }
.flow-callout span { color: #c5ddd9; font-size: .9rem; line-height: 1.45; }
.visual-lanes { margin: 0 0 7rem; }
.visual-section-heading { max-width: 660px; margin-bottom: 2rem; }
.lane-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(250px, 1.4fr) minmax(220px, 1fr); gap: 1rem; align-items: stretch; }
.lane-card { padding: 1.35rem; border: 1px solid #3e526e; border-radius: 1rem; background: #101d31; }
.lane-card h3 { margin: .7rem 0 1rem; color: #edf5ff; font-size: 1.3rem; }
.lane-card ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; color: #aabbd1; font-size: .9rem; }
.lane-card li { display: flex; gap: .5rem; align-items: center; }
.lane-card li::before { content: '•'; color: #79dfce; }
.lane-badge { display: inline-block; padding: .32rem .5rem; border-radius: 999px; font: 700 .66rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; text-transform: uppercase; }
.lane-dev .lane-badge { background: #143b44; color: #8cf2e1; }
.lane-prod .lane-badge { background: #352247; color: #d6c4ff; }
.release-bridge { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; align-items: center; gap: .55rem; padding: 1.2rem; border: 1px dashed #4d6382; border-radius: 1rem; background: #0a1424; }
.release-bridge span { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 999px; background: #24555b; color: #b6faf0; font: 700 .72rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.release-bridge p { margin: 0; color: #bdcae0; font-size: .78rem; line-height: 1.3; }
.release-bridge i { color: #7f9bbd; font-size: 1rem; font-style: normal; }
.agent-loop { display: grid; grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); gap: 3.5rem; align-items: center; margin: 0 0 7rem; padding: clamp(1.5rem, 4vw, 3.6rem); border: 1px solid #3a4d69; border-radius: 1.4rem; background: linear-gradient(135deg, #182546, #101b32); }
.agent-loop p:not(.eyebrow) { max-width: 510px; color: #b4c4da; font-size: 1rem; }
.agent-loop .button { display: inline-block; margin-top: 1rem; text-decoration: none; }
.agent-loop-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.agent-loop-steps li { position: relative; min-width: 0; padding: 1rem .55rem .8rem; border: 1px solid #3b5274; border-radius: .75rem; background: #0c172b; text-align: center; }
.agent-loop-steps li:not(:last-child)::after { content: '→'; position: absolute; z-index: 1; right: -.62rem; top: 50%; transform: translateY(-50%); color: #7fe3d2; font-size: 1.1rem; }
.agent-loop-steps span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin: 0 auto .6rem; border-radius: 999px; background: #1d5a59; color: #aef9eb; font: 700 .68rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.agent-loop-steps strong { display: block; color: #edf5ff; font-size: .83rem; }
.agent-loop-steps small { display: block; margin-top: .35rem; color: #9db0ca; font-size: .67rem; line-height: 1.25; }
.visual-footer { display: flex; align-items: center; justify-content: space-between; padding: 1.8rem 0 2.8rem; border-top: 1px solid #233750; color: #8699b3; font-size: .86rem; }
.visual-footer a { color: #90e6d9; text-decoration: none; font-weight: 700; }

@media (max-width: 900px) {
  .flow-explorer-heading, .agent-loop { grid-template-columns: 1fr; display: grid; }
  .flow-summary { max-width: 600px; }
  .flow-diagram { flex-wrap: wrap; }
  .flow-node { flex-basis: calc(50% - 1.25rem); }
  .flow-arrow { flex-basis: .55rem; }
  .lane-grid { grid-template-columns: 1fr; }
  .release-bridge { grid-template-columns: auto 1fr auto 1fr auto 1fr; min-height: 5.4rem; }
}

@media (max-width: 640px) {
  .visual-nav, .visual-shell, .visual-footer { width: min(100% - 2rem, 1180px); }
  .visual-nav { min-height: 4.75rem; }
  .visual-nav nav { gap: .7rem; }
  .visual-nav nav > a:first-child { display: none; }
  .visual-hero { padding: 3.4rem 0 2.3rem; }
  .visual-hero h1 { font-size: clamp(2.7rem, 14vw, 4.3rem); }
  .flow-explorer { padding: 1rem; margin-bottom: 4.5rem; }
  .flow-tabs { grid-template-columns: 1fr; margin-top: 1.4rem; }
  .flow-tab { justify-content: flex-start; }
  .flow-diagram { display: grid; grid-template-columns: 1fr; padding: 1rem 0; }
  .flow-node { min-height: 0; padding: 1rem 1rem 1rem 4.85rem; }
  .flow-node .node-icon { position: absolute; left: 1rem; top: 1rem; }
  .flow-node h3 { margin: .1rem 1.8rem .32rem 0; }
  .flow-arrow { height: 1.2rem; transform: rotate(90deg); }
  .flow-outcomes, .flow-outcomes-two { grid-template-columns: 1fr; }
  .flow-callout { grid-template-columns: 1fr; gap: .35rem; }
  .flow-callout strong { white-space: normal; }
  .release-bridge { grid-template-columns: auto 1fr; gap: .55rem .8rem; }
  .release-bridge i { display: none; }
  .agent-loop { gap: 2rem; margin-bottom: 4.5rem; padding: 1.3rem; }
  .agent-loop-steps { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
  .agent-loop-steps li:not(:last-child)::after { display: none; }
  .agent-loop-steps li:last-child { grid-column: 1 / -1; }
  .visual-footer { padding-bottom: 2rem; }
}

/* Site map and compact utility navigation */
.compact-nav { width: min(760px, calc(100% - 3rem)); min-height: 4.7rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.compact-nav nav { display: flex; gap: 1rem; }
.compact-nav nav a { color: #b7c6d9; font-size: .88rem; text-decoration: none; }
.compact-nav nav a:hover { color: #76e6d2; }
.try-page-content { min-height: calc(100vh - 4.7rem); padding-top: 1rem; }
.account-page { min-height: 100vh; background: #091321; color: #eef5ff; }
.account-shell { width: min(760px, calc(100% - 3rem)); margin: 0 auto; padding: 3.8rem 0 5rem; }
.account-intro { max-width: 650px; margin-bottom: 2.6rem; }
.account-intro h1 { margin: .7rem 0 1rem; font-size: clamp(2.8rem, 7vw, 5rem); line-height: .96; letter-spacing: -.06em; }
.account-intro > p:not(.eyebrow) { color: #b6c5d9; font-size: 1.12rem; }
.account-timeline { position: relative; display: grid; gap: 1rem; }
.account-timeline::before { content: ''; position: absolute; top: 1.65rem; bottom: 1.65rem; left: 1.25rem; width: 2px; background: #3d6070; }
.account-step { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem; border: 1px solid #314a67; border-radius: 1rem; background: #101d31; }
.account-step-number { z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #164d4e; color: #b7fbeb; font: 700 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.account-step h2 { margin: .35rem 0 .65rem; color: #ecf5ff; font-size: 1.55rem; letter-spacing: -.035em; }
.account-step p { max-width: 560px; color: #b7c6d9; line-height: 1.55; }
.account-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: end; margin-top: 1.1rem; }
.account-form label { grid-column: 1 / -1; color: #c9d9ec; font-size: .85rem; font-weight: 700; }
.account-form input { min-width: 0; width: 100%; }
.account-message { min-height: 1.45rem; margin: .85rem 0 0; color: #b7c6d9; font-size: .92rem; }
.account-message[data-type="success"] { color: #87ead8; }
.account-message[data-type="error"] { color: #ffb7af; }
.account-note { color: #91a6c1 !important; font-size: .84rem; }
.account-key-result { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; padding: .85rem; border: 1px solid #31766c; border-radius: .75rem; background: #0e292b; }
.account-key-result code { flex: 1; min-width: 0; color: #b7fbeb; overflow-wrap: anywhere; }
@media (max-width: 640px) { .account-shell { width: min(100% - 2rem, 760px); padding-top: 2.6rem; } .account-form { grid-template-columns: 1fr; } }
.sitemap-page { background: #091321; color: #eef5ff; overflow-x: hidden; }
.sitemap-page::before { content: ''; position: fixed; z-index: -1; width: 58rem; height: 58rem; top: -34rem; right: -22rem; border-radius: 999px; background: radial-gradient(circle, #1b4f785e, transparent 68%); pointer-events: none; }
.sitemap-shell { width: min(1120px, calc(100% - 3rem)); margin: 0 auto; }
.sitemap-hero { max-width: 790px; padding: 4.8rem 0 3rem; }
.sitemap-hero h1 { margin: .75rem 0 1.15rem; font-size: clamp(3rem, 7vw, 5.75rem); line-height: .94; }
.sitemap-hero > p:not(.eyebrow) { max-width: 680px; color: #b6c5d9; font-size: 1.15rem; }
.route-legend { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.7rem; }
.route-legend span { padding: .38rem .62rem; border: 1px solid; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.route-public { border-color: #397c99 !important; background: #103246; color: #a9e8ff; }
.route-authenticated { border-color: #3c8774 !important; background: #123b35; color: #aaf2dd; }
.route-local { border-color: #705ab1 !important; background: #28204b; color: #d5c8ff; }
.route-webhook { border-color: #92703e !important; background: #392b17; color: #ffe0a0; }
.site-tree { padding: clamp(1.15rem, 3vw, 2.35rem); border: 1px solid #304663; border-radius: 1.35rem; background: linear-gradient(150deg, #142239ef, #0d1727f2); box-shadow: 0 2rem 6rem #02061755; }
.tree-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.tree-heading h2, .sitemap-rules h2 { margin: .4rem 0 0; font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: -.04em; }
.tree-heading > a { color: #91e8da; font-weight: 700; font-size: .86rem; text-decoration: none; }
.tree-heading > a:hover { color: #c2fff1; }
.tree-root { position: relative; display: grid; place-items: center; padding: 2rem 0 3.2rem; }
.tree-root::after { content: ''; position: absolute; bottom: .75rem; width: 2px; height: 1.8rem; background: linear-gradient(#5eefd7, #405a78); }
.tree-card { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-width: 0; padding: 1rem; border: 1px solid #3b536f; border-radius: .8rem; background: #0c1729; color: inherit; text-decoration: none; }
.tree-card:hover { border-color: #70dccc; transform: translateY(-1px); }
.tree-card small { display: block; margin-bottom: .24rem; color: #91a6c1; font-size: .69rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tree-card strong { display: block; color: #ecf5ff; font-size: .95rem; }
.tree-card code { display: block; margin-top: .34rem; color: #82dbce; font: .76rem ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.tree-card i { color: #7ce4d3; font-size: 1.1rem; font-style: normal; }
.tree-root-card { min-width: min(100%, 340px); padding: 1.2rem; border-color: #3b857e; background: linear-gradient(145deg, #123b3a, #102638); }
.tree-root-card:hover { transform: translateY(-2px); }
.tree-root-card > span:last-child { flex: 1; }
.tree-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: #1b5c55; color: #b7fbeb; font-size: 1.45rem; }
.tree-branches { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tree-branches::before { content: ''; position: absolute; top: 0; left: 16.66%; right: 16.66%; height: 2px; background: #405a78; }
.tree-branch { position: relative; padding: 2rem 1rem 1rem; border: 1px solid #314761; border-radius: 1rem; background: #0d1829aa; }
.tree-branch::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 1.3rem; background: #405a78; }
.branch-title { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; }
.branch-title h3 { margin: 0; color: #dcecff; font-size: .95rem; }
.branch-dot { width: .65rem; height: .65rem; border-radius: 999px; }
.branch-customer .branch-dot { background: #79dfff; box-shadow: 0 0 0 4px #79dfff1b; }
.branch-operator .branch-dot { background: #d0c0ff; box-shadow: 0 0 0 4px #d0c0ff1b; }
.branch-platform .branch-dot { background: #f4ce87; box-shadow: 0 0 0 4px #f4ce871b; }
.tree-stack { display: grid; gap: .65rem; }
.route-public-card { border-color: #2f7391; }
.route-auth-card { border-color: #347a6b; }
.route-local-card { border-color: #6651a6; }
.route-api-card { border-color: #3a7495; }
.route-webhook-card { border-color: #856633; }
.route-transient-card { border-color: #6a6e7a; opacity: .9; }
.sitemap-rules { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 3rem; align-items: start; margin: 6rem 0; padding: clamp(1.4rem, 4vw, 3.2rem); border: 1px solid #3b506d; border-radius: 1.35rem; background: #111e35; }
.sitemap-rules > div { position: sticky; top: 1rem; }
.sitemap-rules ol { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.sitemap-rules li { display: grid; grid-template-columns: 1.8rem 1fr; gap: .8rem; padding: 1rem; border: 1px solid #304761; border-radius: .8rem; background: #0c172a; }
.sitemap-rules li > span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; background: #1c5652; color: #aff6e8; font: 700 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.sitemap-rules li p { margin: 0; color: #afc0d7; font-size: .91rem; line-height: 1.5; }
.sitemap-rules li strong { color: #e6f1ff; }
.sitemap-rules code { color: #94eadb; font: .82rem ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 850px) {
  .tree-branches { grid-template-columns: 1fr; }
  .tree-branches::before { display: none; }
  .tree-branch::before { left: 1.5rem; height: 1.2rem; }
  .sitemap-rules { grid-template-columns: 1fr; gap: 1.5rem; }
  .sitemap-rules > div { position: static; }
}

@media (max-width: 640px) {
  .compact-nav, .sitemap-shell { width: min(100% - 2rem, 1120px); }
  .compact-nav { min-height: 4.25rem; }
  .compact-nav nav { gap: .7rem; }
  .compact-nav nav a { font-size: .8rem; }
  .sitemap-hero { padding: 3.2rem 0 2.25rem; }
  .sitemap-hero h1 { font-size: clamp(2.75rem, 14vw, 4.3rem); }
  .site-tree { padding: 1rem; }
  .tree-heading { align-items: flex-start; flex-direction: column; }
  .tree-root { padding: 1.7rem 0 2.7rem; }
  .sitemap-rules { margin: 4.5rem 0; padding: 1.2rem; }
}

/* Signed-in customer and administrator dashboards */
.account-shell { width: min(1120px, calc(100% - 3rem)); }
.account-dashboard { margin-top: 2.25rem; }
.dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.dashboard-heading h2 { margin: .4rem 0 .6rem; color: #eef7ff; font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -.05em; }
.dashboard-heading p:not(.eyebrow) { max-width: 650px; margin: 0; color: #aebfd3; font-size: .95rem; }
.dashboard-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; }
.dashboard-actions .button { text-decoration: none; white-space: nowrap; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin: 1.1rem 0; }
.metric-card { min-height: 10.5rem; padding: 1.15rem; border: 1px solid #324c69; border-radius: .9rem; background: linear-gradient(145deg, #14233a, #0d1829); }
.metric-card span { display: block; color: #99b2cc; font: 700 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.metric-card strong { display: block; margin: .7rem 0 .35rem; color: #f0f8ff; font-size: clamp(1.7rem, 4vw, 2.45rem); letter-spacing: -.06em; }
.metric-card p { margin: 0; color: #9db1c9; font-size: .82rem; line-height: 1.4; }
.metric-highlight { border-color: #398b7d; background: linear-gradient(145deg, #123b38, #0d2528); }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.dashboard-panel { margin-top: .85rem; padding: 1.25rem; border: 1px solid #304861; border-radius: .9rem; background: #0e192b; }
.dashboard-panel h3, .dashboard-panel h4 { margin: .25rem 0 .5rem; color: #e9f4ff; letter-spacing: -.03em; }
.dashboard-panel p { margin: 0; color: #aabbd0; font-size: .88rem; }
.panel-heading-inline { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.dashboard-list { display: grid; gap: .6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.dashboard-list li { padding-top: .65rem; border-top: 1px solid #263c55; color: #c3d3e5; font-size: .86rem; line-height: 1.45; }
.text-button { border: 0; padding: 0; background: transparent; color: #89ead8; cursor: pointer; font: 700 .82rem inherit; text-align: right; }
.subscription-status { margin-top: 1rem !important; padding: .75rem; border: 1px solid #315a69; border-radius: .65rem; background: #0b2530; color: #bcece5 !important; }
.admin-dashboard { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid #3b5272; }
.dashboard-period { color: #9ec5ff !important; font: 700 .76rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.usage-bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: .55rem; min-height: 11rem; margin-top: 1rem; }
.usage-bar { position: relative; display: grid; align-content: end; min-height: 100%; padding-bottom: 1.65rem; text-align: center; }
.usage-bar::after { content: ''; display: block; height: var(--bar-height); min-height: .45rem; border-radius: .4rem .4rem .15rem .15rem; background: linear-gradient(#77e8d4, #298979); }
.usage-bar span { position: absolute; bottom: calc(var(--bar-height) + 1.85rem); width: 100%; color: #bfeee7; font-size: .73rem; }
.usage-bar small { position: absolute; bottom: .2rem; width: 100%; color: #91a8c1; font-size: .66rem; }
.table-scroll { overflow-x: auto; }
.dashboard-table { width: 100%; border-collapse: collapse; margin-top: .75rem; text-align: left; white-space: nowrap; }
.dashboard-table th, .dashboard-table td { padding: .75rem .65rem; border-bottom: 1px solid #263d56; color: #bacbdf; font-size: .82rem; }
.dashboard-table th { color: #80e2d1; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; }
.dashboard-table td:first-child { color: #e5f1ff; }
.admin-management-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.admin-account-search { display: grid; gap: .38rem; min-width: min(100%, 16rem); color: #c7d8ed; font-size: .75rem; font-weight: 700; }
.admin-account-search input { width: 100%; min-width: 0; }
.admin-management-message { min-height: 1.35rem !important; margin-top: .85rem !important; color: #aabbd0; }
.admin-management-message[data-type="success"] { color: #87ead8; }
.admin-management-message[data-type="error"] { color: #ffb7af; }
.admin-account-actions { display: flex; gap: .45rem; align-items: center; }
.button-small { min-height: auto; padding: .42rem .62rem; font-size: .74rem; }
.button-danger { border-color: #9b4b55 !important; color: #ffb8be !important; }
.button-danger:hover { border-color: #e47680 !important; background: #3a1b25 !important; }
.admin-development-setup { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border-color: #3b746d; background: linear-gradient(145deg, #102e32, #0e1b2c); }
.admin-development-setup > div { max-width: 680px; }
.admin-setup-status { margin-top: .8rem !important; color: #9ee8dc !important; }
.admin-development-setup .button { flex: 0 0 auto; text-decoration: none; white-space: nowrap; }
.admin-development-test { border-color: #526a92; background: linear-gradient(145deg, #14243c, #0e1b2c); }
.admin-development-test > div { max-width: 760px; }
.development-test-form { display: flex; align-items: end; gap: .75rem; margin-top: 1rem; }
.development-test-form label { display: grid; flex: 1 1 20rem; gap: .38rem; color: #c7d8ed; font-size: .75rem; font-weight: 700; }
.development-test-form input { width: 100%; }
.development-test-form .button { flex: 0 0 auto; }
.development-test-steps { display: grid; gap: .55rem; margin: 1.15rem 0 0; padding-left: 1.3rem; color: #c7d8ed; font-size: .86rem; line-height: 1.55; }
.development-test-steps strong { color: #9ee8dc; }
.admin-testing-heading { max-width: 760px; }
.admin-testing-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin-top: 1.2rem; }
.admin-testing-step { display: flex; flex-direction: column; gap: .7rem; padding: 1rem; border: 1px solid #314969; border-radius: .85rem; background: rgba(7, 18, 33, .45); }
.admin-testing-step .step-number { margin: 0; color: #9ee8dc; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.admin-testing-step h4 { margin: 0; color: #e6f4ff; font-size: 1rem; }
.admin-testing-step p { margin: .25rem 0 0; color: #b8cce3; font-size: .84rem; line-height: 1.5; }
.admin-testing-step .development-test-form { flex-wrap: wrap; margin-top: auto; }
.admin-testing-step .development-test-form label { flex-basis: 100%; }
.admin-test-message { min-height: 2.5rem; color: #aabbd0; font-size: .8rem; line-height: 1.45; }
.admin-test-message[data-type="success"] { color: #87ead8; }
.admin-test-message[data-type="error"] { color: #ffb7af; }
.admin-test-key-result { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem; border: 1px solid #3b746d; border-radius: .65rem; background: #0a2428; }
.admin-test-key-result code { flex: 1 1 100%; overflow-wrap: anywhere; color: #c8fff5; font-size: .76rem; }
.admin-production-launch { border-color: #765c35; background: linear-gradient(145deg, #2e2415, #0e1b2c); }
.admin-production-launch > div { max-width: 760px; }
.production-launch-steps { display: grid; gap: .45rem; margin: 1rem 0; padding-left: 1.3rem; color: #d8c8ab; font-size: .86rem; line-height: 1.5; }
.admin-production-launch code { color: #ffe7ae; }
@media (max-width: 800px) {
  .account-shell { width: min(100% - 2rem, 1120px); }
  .dashboard-metrics, .dashboard-grid { grid-template-columns: 1fr; }
  .admin-development-setup, .development-test-form { align-items: flex-start; flex-direction: column; }
  .admin-testing-steps { grid-template-columns: 1fr; }
  .admin-testing-step .development-test-form { align-items: flex-start; }
  .development-test-form { width: 100%; }
  .development-test-form label, .development-test-form .button { width: 100%; }
}

/* Homepage: clear customer paths and an at-a-glance product story */
.hero { display: block; position: relative; overflow-x: hidden; padding: 0; background: #091321; }
.hero::before, .hero::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 999px; filter: blur(6px); }
.hero::before { width: 48rem; height: 48rem; top: -29rem; right: -15rem; background: radial-gradient(circle, #12566a70, transparent 68%); }
.hero::after { width: 38rem; height: 38rem; bottom: -22rem; left: -14rem; background: radial-gradient(circle, #1b5d4c56, transparent 68%); }
.home-shell { width: min(1120px, calc(100% - 3rem)); margin: 0 auto; padding: 5.5rem 0 5rem; }
.home-intro { max-width: 800px; }
.home-kicker { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin: 0; color: #8cebd9; font: 700 .76rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.home-kicker span { padding: .34rem .55rem; border: 1px solid #315d70; border-radius: 999px; background: #102b3b; color: #a9d9ed; font-size: .65rem; letter-spacing: .06em; }
.home-intro h1 { max-width: 790px; margin: 1rem 0 1.25rem; font-size: clamp(3rem, 7vw, 6rem); line-height: .94; letter-spacing: -.065em; }
.home-lede { max-width: 680px; margin: 0; color: #b6c8dc; font-size: clamp(1rem, 2vw, 1.2rem); }
.home-proof { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.7rem; }
.home-proof span { padding: .45rem .65rem; border: 1px solid #334e68; border-radius: 999px; background: #0d1c2f; color: #c2d7e9; font-size: .8rem; font-weight: 700; }
.home-proof span::before { content: "✓"; margin-right: .4rem; color: #72e7d3; }
.home-actions { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(255px, .8fr); gap: 1rem; align-items: stretch; margin-top: 3.25rem; }
.home-signup-card, .home-existing-card { padding: clamp(1.35rem, 3vw, 2.2rem); border: 1px solid #354f6c; border-radius: 1.15rem; background: linear-gradient(145deg, #14233a, #0d1829); box-shadow: 0 1.4rem 4.5rem #02061740; }
.home-signup-card { border-color: #347975; background: linear-gradient(145deg, #133b3b, #102238 72%); }
.home-actions h2 { margin: .45rem 0 .7rem; color: #edf7ff; font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.03; letter-spacing: -.045em; }
.home-signup-card .plan-name, .home-existing-card .plan-name, .home-next .plan-name { margin: 0; }
.home-signup-card .price { margin: 1rem 0 .4rem; color: #8ff5e2; font-size: clamp(2rem, 5vw, 3.7rem); line-height: .95; }
.home-signup-card .price small { color: #b7ccd9; font-size: clamp(.92rem, 2vw, 1.2rem); font-weight: 650; letter-spacing: -.02em; }
.home-pricing, .home-existing-card > p:not(.plan-name), .signup-note { margin: 0; color: #b7c9dc; font-size: .93rem; line-height: 1.55; }
.home-signup-card form { margin: 1.3rem 0 .55rem; }
.home-signup-card input { flex: 1 1 250px; }
.home-signup-card .message { margin: 0; font-size: .88rem; }
.signup-note { color: #99c8c1; font-size: .82rem; }
.home-existing-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: linear-gradient(145deg, #15233a, #0d1728); }
.home-existing-card .button { display: inline-block; margin-top: 1.35rem; text-decoration: none; }
.home-text-link { margin-top: 1rem; color: #a8eee0; font-size: .88rem; font-weight: 750; text-decoration: none; }
.home-text-link:hover { color: #d0fff4; }
.home-next { margin-top: 5.5rem; padding-top: 2.5rem; border-top: 1px solid #29435d; }
.home-next h2 { margin: .45rem 0 1.5rem; color: #ecf5ff; font-size: clamp(1.65rem, 4vw, 2.6rem); letter-spacing: -.05em; }
.home-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.home-flow li { min-height: 9.5rem; padding: 1.1rem; border: 1px solid #304965; border-radius: .9rem; background: #0d1a2caa; }
.home-flow span { display: block; margin-bottom: .85rem; color: #86e9d8; font: 800 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.home-flow strong { display: block; color: #e7f2ff; font-size: .98rem; }
.home-flow p { margin: .45rem 0 0; color: #a9bdd4; font-size: .83rem; line-height: 1.45; }
.home-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.35rem; }
.home-links a { color: #95eadb; font-size: .88rem; font-weight: 750; text-decoration: none; }
.home-links a:hover { color: #cefff3; }

/* Administrator test journey */
.admin-testing-heading h3 { max-width: 690px; font-size: clamp(1.45rem, 3vw, 2.1rem); }
.admin-test-path { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.05rem 0 .8rem; }
.admin-test-path span { padding: .38rem .58rem; border: 1px solid #3d5c7e; border-radius: 999px; background: #10243a; color: #bed4ed; font-size: .74rem; font-weight: 750; }
.admin-test-flow-state { min-height: 1.35rem; margin-top: .2rem !important; color: #8be8d8 !important; font-size: .84rem !important; }
.admin-testing-steps { gap: 1rem; }
.admin-testing-step { position: relative; gap: .8rem; border-color: #314969; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.admin-testing-step[data-state="active"] { border-color: #54b8a8; background: linear-gradient(160deg, #123a39, #0b1b2d); box-shadow: 0 0 0 1px #73e3cf1a, 0 .8rem 1.7rem #02061725; }
.admin-testing-step[data-state="complete"] { border-color: #39776f; background: linear-gradient(160deg, #102e31, #0b1a29); }
.admin-testing-step[data-state="complete"]::after { content: "✓"; position: absolute; top: .9rem; right: .95rem; color: #8deedc; font-weight: 900; }
.admin-step-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.admin-testing-step .step-number { margin: 0; }
.admin-step-state { padding: .28rem .45rem; border: 1px solid #3d5877; border-radius: 999px; color: #b1c7e0; font-size: .67rem; font-weight: 800; text-transform: uppercase; }
.admin-testing-step[data-state="active"] .admin-step-state { border-color: #4a9d90; background: #123e3b; color: #aaf8e8; }
.admin-testing-step[data-state="complete"] .admin-step-state { border-color: #3b7c72; background: #103430; color: #9debdc; }
.admin-testing-step h4 { font-size: 1.08rem; }
.admin-testing-step .development-test-form { padding-top: .1rem; border-top: 1px solid #27405a; }

@media (max-width: 800px) {
  .home-shell { width: min(100% - 2rem, 1120px); padding: 3.25rem 0 3.5rem; }
  .home-actions, .home-flow { grid-template-columns: 1fr; }
  .home-actions { margin-top: 2.4rem; }
  .home-next { margin-top: 3.8rem; }
  .home-flow li { min-height: 0; }
}

@media (max-width: 520px) {
  .home-nav { width: min(100% - 2rem, 1120px); min-height: 4.5rem; }
  .home-nav nav { gap: .75rem; }
  .home-nav nav a { font-size: .8rem; }
  .home-kicker { gap: .45rem; }
  .home-intro h1 { font-size: clamp(2.7rem, 14vw, 4.2rem); }
  .home-signup-card, .home-existing-card { padding: 1.2rem; }
  .home-signup-card form .button { width: 100%; }
  .admin-test-path span { width: 100%; }
}

/* Generated homepage artwork */
.home-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .58fr); gap: clamp(1.6rem, 5vw, 5rem); align-items: center; max-width: none; }
.home-copy { min-width: 0; max-width: 800px; }
.home-art { position: relative; min-width: 0; max-width: 420px; margin: 0; justify-self: end; padding: .65rem; border: 1px solid #3d7380; border-radius: 1.45rem; background: linear-gradient(145deg, #133a4a, #10192f); box-shadow: 0 1.8rem 4.5rem #02061773; overflow: hidden; }
.home-art::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, #b4fff11c, transparent 42%); }
.home-art img { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: .92rem; object-fit: cover; object-position: center; }
.home-art figcaption { position: relative; margin: .7rem .3rem .1rem; color: #a5c5d4; font-size: .76rem; line-height: 1.4; }

@media (max-width: 800px) {
  .home-intro { grid-template-columns: 1fr; gap: 2rem; }
  .home-art { width: min(100%, 420px); justify-self: start; }
}

/* Generated product-tour artwork */
.visual-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .55fr); gap: clamp(1.6rem, 5vw, 5rem); align-items: center; max-width: none; }
.visual-hero-copy { min-width: 0; max-width: 790px; }
.overview-art { position: relative; min-width: 0; max-width: 380px; margin: 0; justify-self: end; padding: .65rem; border: 1px solid #776447; border-radius: 1.45rem; background: linear-gradient(150deg, #30291d, #121b31 65%); box-shadow: 0 1.8rem 4.5rem #02061773; overflow: hidden; }
.overview-art::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, #ffd99918, transparent 43%); }
.overview-art img { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: .92rem; object-fit: cover; object-position: center; }
.overview-art figcaption { position: relative; margin: .7rem .3rem .1rem; color: #d8c7a8; font-size: .76rem; line-height: 1.4; }

@media (max-width: 900px) {
  .visual-hero { grid-template-columns: 1fr; gap: 2rem; }
  .overview-art { width: min(100%, 380px); justify-self: start; }
}

/* Shared native SVG icon system */
.brand { display: inline-flex; align-items: center; gap: .52rem; color: #f8fafc; text-decoration: none; }
.brand-mark { width: 2rem; height: 2rem; flex: 0 0 auto; padding: .3rem; border: 1px solid #3b817a; border-radius: .62rem; background: linear-gradient(145deg, #174b4b, #15304a); color: #9af4e4; box-shadow: 0 .35rem .9rem #02061735; }
.brand .brand-label { margin-left: 0; color: #f8fafc; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; text-transform: none; }
.brand .brand-context { margin-left: -.1rem; color: #72e7d3; font: 600 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; text-transform: uppercase; }
.home-proof span { display: inline-flex; align-items: center; gap: .42rem; }
.home-proof span::before { content: none; }
.home-proof svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: #7ce5d4; }
.metric-card-label { display: flex; align-items: center; gap: .48rem; }
.metric-card-label svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: #79e4d2; }
.metric-card-label span { margin: 0; }
.metric-highlight .metric-card-label svg { color: #b6ffed; }

@media (max-width: 520px) {
  .brand-mark { width: 1.8rem; height: 1.8rem; }
  .brand .brand-label { font-size: .98rem; }
  .brand .brand-context { display: none; }
}

/* Screenshot-led hierarchy pass: reveal the action before the fold */
.home-shell { padding: clamp(3.25rem, 5vw, 4.25rem) 0 4rem; }
.home-intro h1 { max-width: 720px; font-size: clamp(3.1rem, 5.35vw, 5.2rem); line-height: .96; }
.home-primary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.15rem; margin-top: 1.35rem; }
.home-primary-actions .button { text-decoration: none; }
.home-inline-link { color: #a9eee1; font-size: .9rem; font-weight: 750; text-decoration: none; }
.home-inline-link:hover { color: #d4fff5; }
.home-proof { margin-top: 1.2rem; }
.home-proof svg { width: 1.08rem; height: 1.08rem; }
.home-actions { margin-top: 1.9rem; }
.visual-hero { padding: clamp(3rem, 5vw, 4.3rem) 0 2.4rem; }
.visual-hero h1 { max-width: 720px; font-size: clamp(3rem, 5.55vw, 5.15rem); line-height: .95; }
.flow-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brand { white-space: nowrap; }

@media (max-width: 800px) {
  .home-shell { padding: 2.5rem 0 3.25rem; }
  .home-actions { margin-top: 1.55rem; }
  .visual-hero { padding-top: 2.5rem; }
}

@media (max-width: 640px) {
  .home-intro h1 { font-size: clamp(2.7rem, 11.8vw, 3.35rem); line-height: .98; }
  .home-art, .home-proof { display: none; }
  .home-primary-actions { align-items: flex-start; flex-direction: column; gap: .75rem; margin-top: 1.15rem; }
  .home-primary-actions .button { width: 100%; text-align: center; }
  .visual-hero h1 { font-size: clamp(2.55rem, 11.5vw, 3.45rem); line-height: .98; }
  .visual-legend { gap: .45rem .8rem; margin-top: 1.35rem; font-size: .77rem; }
}


/* Account sign-in: concise, provider-ready customer access */
.account-page { min-height: 100vh; background: #091321; }
.account-page::before { content: ""; position: fixed; z-index: -1; width: 54rem; height: 54rem; top: -33rem; left: -17rem; border-radius: 999px; background: radial-gradient(circle, #13646565, transparent 67%); pointer-events: none; }
.account-page::after { content: ""; position: fixed; z-index: -1; width: 43rem; height: 43rem; right: -22rem; bottom: -27rem; border-radius: 999px; background: radial-gradient(circle, #254d8070, transparent 69%); pointer-events: none; }
.account-shell { padding: clamp(3.2rem, 6vw, 5.6rem) 0 5rem; }
.auth-intro { max-width: 680px; margin-bottom: clamp(1.65rem, 4vw, 2.8rem); }
.auth-intro h1 { max-width: 650px; font-size: clamp(3rem, 6vw, 5.15rem); line-height: .94; }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .72fr); gap: 1rem; align-items: stretch; max-width: 940px; }
.auth-card { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid #324e6b; border-radius: 1.15rem; background: linear-gradient(145deg, #13243b, #0c1729 78%); box-shadow: 0 1.25rem 3.4rem #02061752; }
.auth-card-sign-in { border-color: #397f7b; background: linear-gradient(145deg, #123b3a, #101d33 75%); }
.auth-card-recovery { display: flex; flex-direction: column; align-items: flex-start; border-color: #435e85; background: linear-gradient(145deg, #152943, #0d1729 80%); }
.auth-card-heading { display: flex; align-items: center; gap: .85rem; }
.auth-icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; flex: 0 0 auto; border: 1px solid #3c8e82; border-radius: .85rem; background: #103b38; color: #aaf7e7; }
.auth-icon svg { width: 1.45rem; height: 1.45rem; }
.auth-icon-muted { margin-bottom: 1.2rem; border-color: #496c96; background: #122d49; color: #b2d8ff; }
.auth-card h2 { margin: .25rem 0; color: #eef7ff; font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -.045em; }
.auth-card h3 { margin: 1.45rem 0 .35rem; color: #e8f4ff; font-size: 1rem; }
.auth-card .eyebrow { margin: 0; }
.auth-copy { max-width: 510px; margin: 1.1rem 0 0; color: #b4c8dc; line-height: 1.55; }
.auth-form { display: grid; gap: .8rem; margin-top: 1.25rem; }
.auth-form label, .password-form label { display: grid; gap: .38rem; color: #d4e3f4; font-size: .78rem; font-weight: 750; }
.auth-form input, .password-form input { width: 100%; min-width: 0; }
.auth-form .button { width: 100%; justify-content: center; }
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.35rem 0 1rem; color: #8faac4; font-size: .74rem; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: #31506a; }
.provider-stack { display: grid; gap: .55rem; }
.provider-button { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; width: 100%; min-height: 3.1rem; padding: .5rem .7rem; border: 1px solid #38536e; border-radius: .72rem; background: #101e31; color: #d6e5f3; font: 700 .86rem inherit; text-align: left; }
.provider-button:disabled { cursor: not-allowed; opacity: .72; }
.provider-button small { color: #8fa8c3; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.provider-glyph { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: .42rem; background: #eaf1f8; color: #132036; font-size: .86rem; font-weight: 900; }
.provider-google { color: #286fc7; }
.provider-apple { background: #e7edf5; color: #101827; font-size: .7rem; }
.provider-microsoft { grid-template-columns: repeat(2, .42rem); grid-template-rows: repeat(2, .42rem); gap: .08rem; background: transparent; }
.provider-microsoft i { display: block; width: .42rem; height: .42rem; background: #f35325; }
.provider-microsoft i:nth-child(2) { background: #81bc06; }
.provider-microsoft i:nth-child(3) { background: #05a6f0; }
.provider-microsoft i:nth-child(4) { background: #ffba08; }
.provider-note { margin: .85rem 0 0; color: #8ca6c0; font-size: .76rem; line-height: 1.45; }
.code-flow { width: 100%; margin-top: 1.3rem; padding-top: .1rem; border-top: 1px solid #385573; }
.auth-footnote { margin: auto 0 0; padding-top: 1.4rem; color: #9fb6cf; font-size: .85rem; }
.auth-footnote a { color: #9af0de; font-weight: 750; text-decoration: none; }
.auth-footnote a:hover { color: #d2fff3; }
.account-access { border-color: #397a72; background: linear-gradient(145deg, #102d31, #0d192b 68%); }
.account-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid #29475a; }
.account-access-grid > div + div { padding-left: 1.35rem; border-left: 1px solid #29475a; }
.access-status { min-height: 1.35rem; color: #bcebe3 !important; }
.access-actions { margin-top: .75rem; }
.password-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .65rem; }
.password-form label { min-width: 0; }
.password-form .button { white-space: nowrap; }
.account-access .account-message { margin-bottom: 0; }
@media (max-width: 800px) {
  .auth-layout, .account-access-grid { grid-template-columns: 1fr; }
  .account-access-grid > div + div { padding-top: 1.2rem; padding-left: 0; border-top: 1px solid #29475a; border-left: 0; }
}
@media (max-width: 560px) {
  .account-shell { padding-top: 2.55rem; }
  .auth-intro h1 { font-size: clamp(2.55rem, 12.5vw, 3.45rem); }
  .auth-card { padding: 1.1rem; border-radius: .95rem; }
  .provider-button { grid-template-columns: 1.65rem minmax(0, 1fr); }
  .provider-button small { grid-column: 2; font-size: .63rem; }
  .password-form { grid-template-columns: 1fr; }
  .password-form .button { width: 100%; }
}

/* HTML hidden state must win over layout classes. */
.auth-layout[hidden] { display: none; }
.account-email-display { color: #baf5e8; font-weight: 750; }
.button-signout { border-color: #5a6a80 !important; color: #d8e4f2 !important; }
.button-signout:hover { border-color: #8da1ba !important; background: #1a2a3d !important; }
@media (max-width: 800px) {
  .dashboard-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-actions { width: 100%; justify-content: flex-start; }
}

/* Administrator workspace tabs and resilient usage chart */
.admin-tabs { display: flex; gap: .5rem; margin: 1.15rem 0 .2rem; padding: .35rem; border: 1px solid #314b67; border-radius: .82rem; background: #0b1728; }
.admin-tab { flex: 1 1 0; min-height: 2.65rem; border: 1px solid transparent; border-radius: .58rem; background: transparent; color: #a9bdd3; cursor: pointer; font: 750 .84rem inherit; }
.admin-tab:hover { color: #e4f5ff; background: #14263d; }
.admin-tab[aria-selected="true"] { border-color: #3a8e82; background: #123d3a; color: #adf5e7; }
.admin-tab-panel { margin-top: .85rem; }
.admin-tab-panel[hidden] { display: none; }
.usage-bars { grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: stretch; min-height: 12rem; padding: .85rem .2rem .15rem; border-bottom: 1px solid #29445f; }
.usage-bar { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: stretch; gap: .4rem; height: 11rem; min-height: 0; padding: 0; }
.usage-bar::after { display: none; }
.usage-bar span { position: static; align-self: end; color: #bfeee7; font-size: .73rem; }
.usage-bar-track { display: flex; align-items: flex-end; min-height: 0; padding: 0 .2rem; border-bottom: 1px solid #20374f; }
.usage-bar-fill { display: block; width: 100%; height: var(--bar-height); min-height: .38rem; border-radius: .36rem .36rem .08rem .08rem; background: linear-gradient(#77e8d4, #298979); box-shadow: 0 .28rem .7rem #0b8c7d2b; }
.usage-bar-fill-empty { min-height: 0; opacity: 0; }
.usage-bar small { position: static; color: #91a8c1; font-size: .66rem; }
.usage-bars-empty { grid-template-columns: 1fr; place-items: center; min-height: 8rem; padding: 1rem; border: 1px dashed #37546f; border-radius: .72rem; background: #0b1728; }
.usage-bars-empty p { margin: 0; color: #a8bdd4; font-size: .88rem; }
@media (max-width: 560px) {
  .admin-tabs { gap: .35rem; }
  .admin-tab { font-size: .78rem; }
  .usage-bars { gap: .3rem; min-height: 10rem; }
  .usage-bar { height: 9.2rem; }
  .usage-bar span { font-size: .66rem; }
  .usage-bar small { font-size: .58rem; }
}

/* Homepage alignment refinement */
.home-shell { padding: clamp(3.25rem, 4.5vw, 4rem) 0 4.5rem; }
.home-intro { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: clamp(2rem, 5vw, 4.75rem); align-items: start; }
.home-copy { max-width: 670px; padding-top: .2rem; }
.home-intro h1 { max-width: 660px; margin: .9rem 0 1.1rem; font-size: clamp(3rem, 5vw, 4.75rem); line-height: .98; }
.home-lede { max-width: 620px; line-height: 1.55; }
.home-primary-actions { margin-top: 1.5rem; }
.home-proof { gap: .5rem; margin-top: 1.1rem; }
.home-proof span { padding: .42rem .58rem; }
.home-art { width: 100%; max-width: 360px; align-self: start; margin-top: .2rem; padding: .55rem; border-radius: 1.1rem; }
.home-art img { aspect-ratio: 1 / 1; border-radius: .72rem; }
.home-art figcaption { margin: .55rem .2rem .05rem; }
.home-actions { grid-template-columns: minmax(0, 1.15fr) minmax(290px, .85fr); gap: 1.25rem; margin-top: 2.75rem; }
.home-signup-card, .home-existing-card { display: flex; min-height: 18.75rem; flex-direction: column; align-items: flex-start; padding: clamp(1.4rem, 2.5vw, 2rem); }
.home-actions h2 { max-width: 530px; margin: .45rem 0 .8rem; font-size: clamp(1.55rem, 2.6vw, 2rem); line-height: 1.08; }
.home-signup-card .price { margin: .8rem 0 .35rem; font-size: clamp(2.55rem, 4vw, 3.25rem); }
.home-signup-card form { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .65rem; margin: 1.2rem 0 .55rem; }
.home-signup-card input { width: 100%; min-width: 0; }
.home-signup-card form .button { white-space: nowrap; }
.home-existing-card { justify-content: flex-start; }
.home-existing-card .button { margin-top: auto; }

@media (max-width: 800px) {
  .home-intro { grid-template-columns: 1fr; gap: 1.8rem; }
  .home-art { width: min(100%, 360px); margin-top: 0; }
  .home-actions { grid-template-columns: 1fr; margin-top: 2.25rem; }
  .home-signup-card, .home-existing-card { min-height: 0; }
}

@media (max-width: 560px) {
  .home-shell { padding-top: 2.4rem; }
  .home-intro h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .home-signup-card form { grid-template-columns: 1fr; }
  .home-signup-card form .button { width: 100%; }
}

/* Signed-in document upload with an intentionally quiet API-key fallback */
.try-page { min-height: 100vh; background: #091321; }
.try-page-content { align-items: start; }
.upload-card { width: min(100%, 700px); padding: clamp(1.4rem, 4vw, 2.45rem); border-color: #34526f; background: linear-gradient(145deg, #14263c, #0c1728); }
.upload-card .eyebrow { margin: 0; }
.upload-card h1 { max-width: 560px; margin: .55rem 0 .8rem; font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: .98; }
.upload-intro { max-width: 560px; margin: 0; color: #b7cbe0; font-size: 1rem; }
.upload-loading { min-height: 3rem; margin: 1.55rem 0 0; color: #8edfd4; font-size: .92rem; }
.upload-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) auto; gap: .75rem; align-items: end; margin-top: 1.55rem; }
.upload-form input { width: 100%; min-width: 0; }
.file-field { display: grid; gap: .42rem; min-width: 0; color: #d1e1ef; font-size: .78rem; font-weight: 750; }
.file-field input { min-height: 3rem; padding: .55rem .65rem; color: #a9c5da; font-size: .78rem; }
.file-field input::file-selector-button { margin-right: .6rem; border: 0; border-radius: .42rem; padding: .42rem .55rem; background: #203b54; color: #d5ecff; font: 750 .75rem inherit; }
.upload-button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .45rem; white-space: nowrap; }
.upload-button svg { width: 1.05rem; height: 1.05rem; }
.upload-button[aria-busy="true"]::before { content: ""; width: .8rem; height: .8rem; border: 2px solid #052e2b55; border-top-color: #052e2b; border-radius: 50%; animation: extract-spinner .7s linear infinite; }
.upload-state { margin-top: 1.55rem; padding: 1.2rem; border: 1px solid #386b70; border-radius: .9rem; background: #0d2b31; }
.upload-state h2 { margin: 0; color: #e7f8f6; font-size: 1.28rem; }
.upload-state p { margin: .5rem 0 1rem; color: #b9d4d4; font-size: .92rem; line-height: 1.5; }
.upload-state .button { text-decoration: none; }
.guest-upload { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid #29445e; }
.guest-upload summary { width: fit-content; color: #92b8cc; cursor: pointer; font-size: .82rem; font-weight: 700; }
.guest-upload[open] summary { color: #a8eee0; }
.guest-upload > p { max-width: 480px; margin: .7rem 0 0; color: #8fa8bf; font-size: .83rem; line-height: 1.45; }
.guest-upload-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.guest-upload-form .upload-button { grid-column: 1 / -1; justify-self: start; }
.upload-card .extract-status { margin-top: 1.2rem; }

@media (max-width: 620px) {
  .upload-card { padding: 1.2rem; }
  .upload-form, .guest-upload-form { grid-template-columns: 1fr; }
  .upload-button, .guest-upload-form .upload-button { width: 100%; justify-self: stretch; }
}
/* Explainable JSON results and public field guide */ .result-actions:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; } .result-actions a { color: #92e8da; font-size: .82rem; font-weight: 750; text-decoration: none; } .result-actions a:hover, .result-actions a:focus-visible { color: #d0fff6; text-decoration: underline; } .upload-card #result { max-height: 34rem; margin-top: .8rem; border: 1px solid #25445f; background: #081421; font-size: .82rem; } .json-key { color: #70e8d6; font-weight: 750; text-decoration: underline; text-decoration-color: #70e8d666; text-underline-offset: .18em; } .json-key:hover, .json-key:focus-visible { color: #d0fff6; text-decoration-color: currentColor; } .json-string { color: #b6d9ff; } .json-number { color: #f2cc8f; } .json-boolean { color: #caa8ff; } .json-null { color: #9caec2; font-style: italic; } .result-guide { margin: 4.25rem 0 2.2rem; padding: clamp(1.15rem, 3vw, 2rem); border: 1px solid #295a70; border-radius: 1.2rem; background: linear-gradient(145deg, #102a3d, #0d1729 62%); box-shadow: 0 1.1rem 3rem #02081766; } .result-guide-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; } .result-guide-heading h2 { margin: .4rem 0 .55rem; color: #eff9ff; font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.03; } .result-guide-heading p:not(.eyebrow) { max-width: 650px; margin: 0; color: #bad0e2; line-height: 1.6; } .result-guide-heading .button { flex: 0 0 auto; text-decoration: none; white-space: nowrap; } .result-guide-workbench { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 1rem; margin-top: 1.55rem; } .invoice-example, .json-example { min-width: 0; overflow: visible; border: 1px solid #2f5972; border-radius: .9rem; background: #0b192b; } .invoice-example > header, .json-example > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .9rem; border-bottom: 1px solid #2a4963; color: #d9efff; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .invoice-example > header small, .json-example > header small { color: #78cfc5; font-size: .67rem; font-weight: 700; letter-spacing: normal; text-transform: none; } .invoice-paper { display: grid; gap: 1rem; margin: .85rem; padding: clamp(1rem, 2.4vw, 1.45rem); border-radius: .5rem; background: linear-gradient(135deg, #fbfaf3, #d9e8e9); color: #163247; box-shadow: .22rem .3rem .8rem #02081766; font-size: .78rem; } .invoice-paper-top, .invoice-paper-total, .invoice-paper-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .invoice-paper-top strong { font-size: .86rem; letter-spacing: .04em; } .invoice-paper-top span { padding: .25rem .42rem; border: 1px solid #72a3ae; border-radius: .25rem; color: #28616c; font-size: .65rem; font-weight: 850; letter-spacing: .1em; } .invoice-paper-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid #a9c2c9; border-bottom: 1px solid #a9c2c9; } .invoice-paper-meta p { margin: 0; line-height: 1.7; } .invoice-paper-lines { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; color: #315266; } .invoice-paper-total { padding-top: .75rem; border-top: 2px solid #57808d; color: #14394a; } .invoice-paper-total strong { font-size: 1.08rem; } .invoice-paper-footer { align-items: start; color: #45657a; font-size: .7rem; line-height: 1.45; } .term-link { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: #49a69a99; text-underline-offset: .17em; } .term-link:hover, .term-link:focus-visible { color: #087d76; text-decoration-color: currentColor; } .json-example pre { min-height: 22rem; max-height: 29rem; margin: 0; border-radius: 0 0 .85rem .85rem; background: #07121f; font-size: clamp(.67rem, 1.35vw, .8rem); line-height: 1.62; white-space: pre; } .json-example .json-key { color: #77e7d5; } .result-guide-note { display: flex; align-items: start; gap: .55rem; margin: 1rem 0; padding: .78rem .9rem; border-left: 3px solid #5de1ce; border-radius: .45rem; background: #0a2430; color: #bfdae3; font-size: .85rem; line-height: 1.5; } .result-guide-note strong { flex: 0 0 auto; color: #a7f4e5; } .field-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } .field-definition { min-width: 0; padding: .9rem; border: 1px solid #294963; border-radius: .75rem; background: #0a1727; scroll-margin-top: 1.25rem; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .field-definition:target { border-color: #65dfce; box-shadow: 0 0 0 3px #65dfce22; transform: translateY(-2px); } .field-definition code { color: #77e8d6; font: 750 .77rem ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word; } .field-definition h3 { margin: .5rem 0 .32rem; color: #e8f5ff; font-size: .98rem; } .field-definition p { margin: 0; color: #a9c1d4; font-size: .8rem; line-height: 1.5; } .field-definition-warning { border-color: #6b5a39; background: linear-gradient(145deg, #211c18, #0c1727); } .field-definition-warning code { color: #f2cd8d; } @media (max-width: 900px) { .result-guide-workbench { grid-template-columns: 1fr; } .field-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .json-example pre { min-height: 0; } } @media (max-width: 620px) { .result-guide { margin-top: 2.75rem; padding: 1rem; } .result-guide-heading { align-items: start; flex-direction: column; gap: .95rem; } .result-guide-heading .button { width: 100%; } .invoice-paper-meta { grid-template-columns: 1fr; gap: .45rem; } .invoice-paper-footer { flex-direction: column; gap: .4rem; } .field-guide-grid { grid-template-columns: 1fr; } .result-guide-note { flex-direction: column; gap: .18rem; } .json-example pre { padding: .8rem; font-size: .68rem; } }
/* Synchronized invoice-to-JSON hover mapping */ .field-inspector { min-height: 7.4rem; margin-top: 1rem; padding: 1rem 1.05rem; border: 1px solid #386675; border-left: 4px solid #72e4d2; border-radius: .75rem; background: linear-gradient(110deg, #0d2934, #0b1727); } .field-inspector-kicker { display: block; color: #75e7d5; font-size: .69rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .field-inspector h3 { margin: .38rem 0 .32rem; color: #edf9ff; font-size: 1.05rem; } .field-inspector p { max-width: 760px; margin: 0; color: #bad3df; font-size: .86rem; line-height: 1.55; } .result-guide [data-map] { box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-color .15s ease, color .15s ease, text-decoration-color .15s ease; } .invoice-paper .invoice-map { border-radius: .22rem; cursor: help; outline-offset: .16rem; } .invoice-paper [data-map].is-related, .invoice-paper .term-link.is-related { border-radius: .24rem; background: #ffd975; box-shadow: inset 0 -2px 0 #11324499; color: #113244; text-decoration-color: currentColor; } .json-example [data-map].is-related { border-radius: .2rem; background: #1c6d69; box-shadow: inset 0 -2px 0 #75e7d5; color: #e9fffc; text-decoration-color: currentColor; } .result-guide [data-map]:focus-visible { outline: 2px solid #ffdc82; outline-offset: .2rem; } .invoice-paper-footer { flex-wrap: wrap; justify-content: flex-start; gap: .45rem .85rem; } @media (max-width: 620px) { .field-inspector { min-height: 8.7rem; } }
/* Source-validated critical fields */ .critical-field-legend { display: flex; align-items: center; gap: .75rem; margin: 1.05rem 0 0; padding: .72rem .85rem; border: 1px solid #9a7332; border-radius: .65rem; background: #2d2110; color: #f0d8a3; font-size: .82rem; line-height: 1.45; } .critical-field-legend p { margin: 0; } .critical-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .28rem; width: fit-content; padding: .22rem .42rem; border: 1px solid #d09a40; border-radius: .32rem; background: #4a3210; color: #ffe7ad; font: 800 .65rem/1 system-ui, sans-serif; letter-spacing: .035em; text-transform: uppercase; } .critical-badge::before, .json-key-critical::after, .invoice-paper .critical-source::after { color: #ffe58f; content: " *"; font-weight: 900; } .critical-badge::before { content: "*"; font-size: .92rem; line-height: .65rem; } .json-key-critical { text-decoration-style: double; text-decoration-thickness: 2px; } .json-key-critical::after { font-size: .85em; text-decoration: none; } .invoice-paper .critical-source::after { font-size: .85em; text-decoration: none; } @media (max-width: 620px) { .critical-field-legend { align-items: flex-start; flex-direction: column; gap: .4rem; } }


/* Invocello: quiet editorial identity for public and private product surfaces. */
.brand { display: inline-flex; align-items: center; gap: .58rem; color: #f2f7ff; text-decoration: none; }
.brand-label { color: inherit; font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, ui-serif, serif; font-size: 1.12rem; font-weight: 700; letter-spacing: -.055em; }
.brand-mark { border-color: #64bdb2; border-radius: 999px; background: radial-gradient(circle at 32% 26%, #42d5bf, #174b5e 54%, #101c35 100%); color: #e5fff9; box-shadow: 0 .45rem 1.2rem #0c9e8b2b; }
.hero { background: radial-gradient(circle at 84% 8%, #2247834d, transparent 27rem), radial-gradient(circle at 8% 88%, #0e6d6340, transparent 29rem), #07111f; }
.home-kicker { color: #a6f6e6; letter-spacing: .12em; }
.home-kicker span { border-color: #3c6b88; background: #10253b; color: #c0e2f4; }
.home-intro h1 { color: #f6f9ff; }
.home-lede { color: #bfd0e4; }
.home-art { border-color: #497f93; background: linear-gradient(145deg, #174c61, #111a33 62%, #1b1a45); box-shadow: 0 2rem 5.5rem #02061780, 0 0 0 1px #93fff114; }
.home-art::after { content: "INVOICE INTELLIGENCE"; position: absolute; top: 1rem; right: 1rem; z-index: 1; padding: .34rem .48rem; border: 1px solid #98fff04a; border-radius: 999px; background: #071626ad; color: #b9fff2; font: 700 .56rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.home-art figcaption { color: #b6d6e6; }
.home-signup-card { border-color: #3d857b; background: linear-gradient(145deg, #123c3a, #0e2030 72%); }
.home-existing-card { border-color: #405f85; background: linear-gradient(145deg, #152640, #0d192c 72%); }
.home-actions h2 { color: #f3f8ff; }
.home-signup-card .price { color: #90f0de; }
@media (max-width: 800px) { .home-art::after { top: .75rem; right: .75rem; } .brand-label { font-size: 1.04rem; } }
@media (max-width: 560px) { .home-art::after { display: none; } }


/* Round 2: carry the Invocello finish through the product journey. */
.brand .brand-label { margin-left: 0; color: inherit; font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, ui-serif, serif; font-size: 1.12rem; font-weight: 700; letter-spacing: -.055em; text-transform: none; }
.compact-nav, .visual-nav { position: relative; }
.compact-nav::after, .visual-nav::after { content: ""; position: absolute; right: max(1.5rem, calc((100% - 1120px) / 2)); bottom: 0; left: max(1.5rem, calc((100% - 1120px) / 2)); height: 1px; background: linear-gradient(90deg, transparent, #5cd1c177, #7799e266, transparent); }
.try-page { background: radial-gradient(circle at 82% 15%, #1f4b8040, transparent 26rem), radial-gradient(circle at 7% 86%, #106d6240, transparent 28rem), #07111f; }
.upload-card { border-color: #3c6884; background: linear-gradient(145deg, #142940, #0b1628 72%); box-shadow: 0 1.8rem 4.5rem #02061766, 0 0 0 1px #91fff00d; }
.upload-card h1 { color: #f5f9ff; letter-spacing: -.055em; }
.upload-card .file-field { border-color: #42758a; background: #0b1c2e; }
.account-page { background: radial-gradient(circle at 84% 8%, #2247833d, transparent 27rem), radial-gradient(circle at 8% 88%, #0e6d6340, transparent 29rem), #07111f; }
.account-page::before, .account-page::after { display: none; }
.auth-card, .dashboard-panel { box-shadow: 0 1.2rem 3rem #02061730; }
.auth-card-sign-in { border-color: #3c7181; }
.auth-card-recovery { border-color: #4c5988; }
.visual-page { background: radial-gradient(circle at 86% 10%, #29497a40, transparent 30rem), radial-gradient(circle at 7% 82%, #0c716544, transparent 29rem), #07111f; }
.visual-page::before, .visual-page::after { display: none; }
.visual-hero h1, .flow-explorer-heading h2, .result-guide-heading h2 { color: #f4f8ff; }
.overview-art { border-color: #4a7f92; box-shadow: 0 1.8rem 4.8rem #02061773; }
.visual-footer { border-top-color: #315a70; }
@media (max-width: 800px) { .brand .brand-label { font-size: 1.04rem; } .compact-nav::after, .visual-nav::after { right: 1rem; left: 1rem; } }


/* Round 3: reduce secondary weight on small screens and keep navigation decisive. */
.home-inline-link { color: #b7f6eb; text-underline-offset: .22em; }
.home-inline-link:hover { color: #efffff; }
.visual-nav .nav-cta { border-color: #579a91; background: #133a39; color: #c2fff1; }
.visual-nav .nav-cta:hover { background: #1b4d49; }
.visual-hero { position: relative; }
.visual-hero-copy { position: relative; z-index: 1; }
@media (max-width: 700px) { .visual-hero { padding-top: 3.35rem; padding-bottom: 2.1rem; } .visual-hero .overview-art { display: none; } .visual-hero .lede { font-size: 1.05rem; } .visual-legend { gap: .55rem .85rem; } }


/* The brand mark must read as an invoice at a glance, even in a compact header. */
.brand { gap: .7rem; }
.brand-mark { width: 2.65rem; height: 2.65rem; padding: .2rem; border-radius: .78rem; background: linear-gradient(145deg, #1b625d, #173a59 68%, #14203b); box-shadow: 0 .5rem 1.3rem #0c9e8b33; }
.brand .brand-label { font-size: 1.24rem; letter-spacing: -.05em; }
@media (max-width: 520px) { .brand { gap: .58rem; } .brand-mark { width: 2.35rem; height: 2.35rem; padding: .18rem; } .brand .brand-label { font-size: 1.12rem; } }


/* Simplicity pass: one clear next step at each point in the customer journey. */
.home-proof { gap: .8rem 1.15rem; }
.home-proof span { padding: 0; border: 0; border-radius: 0; background: transparent; color: #bfd0e2; }
.home-actions { grid-template-columns: minmax(0, 1fr) minmax(15.5rem, .36fr); align-items: start; gap: 1rem; margin-top: 2.35rem; }
.home-signup-card { min-height: 0; }
.home-existing-card { min-height: 0; margin-top: .55rem; padding: 1.3rem 1.4rem; justify-content: center; }
.home-existing-card .plan-name { color: #a8d8ee; }
.home-existing-card > p:not(.plan-name) { max-width: 17rem; }
.home-existing-card .button { margin-top: 1rem; }
.auth-card-sign-in { justify-content: center; }
@media (max-width: 800px) { .home-actions { grid-template-columns: 1fr; margin-top: 2.1rem; } .home-existing-card { width: 100%; margin-top: 0; } }
@media (max-width: 560px) { .home-proof { display: grid; gap: .58rem; } }


/* Keep the detailed field guide available without making it compete with the main story. */
.result-guide-details { padding: 0; overflow: hidden; }
.result-guide-summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: clamp(1.15rem, 3vw, 1.65rem) clamp(1.15rem, 3vw, 2rem); cursor: pointer; list-style: none; }
.result-guide-summary::-webkit-details-marker { display: none; }
.result-guide-summary .eyebrow, .result-guide-summary strong, .result-guide-summary small { display: block; }
.result-guide-summary strong { margin-top: .25rem; color: #eff9ff; font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: -.04em; }
.result-guide-summary small { max-width: 38rem; margin-top: .28rem; color: #a9c4d6; font-size: .86rem; line-height: 1.45; }
.result-guide-toggle { display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto; color: #9af0df; font-size: .82rem; font-weight: 800; }
.result-guide-toggle b { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border: 1px solid #559d94; border-radius: 999px; font-size: 1.15rem; font-weight: 500; transition: transform .18s ease; }
.result-guide-details[open] .result-guide-summary { border-bottom: 1px solid #2b526b; }
.result-guide-details[open] .result-guide-toggle b { transform: rotate(45deg); }
.result-guide-content { padding: 0 clamp(1.15rem, 3vw, 2rem) clamp(1.15rem, 3vw, 2rem); }
@media (max-width: 620px) { .result-guide-summary { align-items: flex-start; flex-direction: column; gap: .8rem; } .result-guide-toggle { align-self: stretch; justify-content: space-between; padding-top: .65rem; border-top: 1px solid #294963; } .result-guide-content { padding: 0 1rem 1rem; } }

/* Advisory EU invoice-detail review and public compliance explanation. */
.compliance-page { min-height: 100vh; background: radial-gradient(circle at 83% 8%, #274e863d, transparent 30rem), radial-gradient(circle at 8% 74%, #0c71653d, transparent 28rem), #07111f; }
.compliance-shell { width: min(1120px, calc(100% - 3rem)); margin: 0 auto; padding: clamp(3rem, 7vw, 6.5rem) 0 4.5rem; }
.compliance-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, .52fr); align-items: center; gap: clamp(2rem, 7vw, 6.5rem); }
.compliance-hero h1 { max-width: 720px; margin: .55rem 0 1rem; color: #f5f9ff; font-size: clamp(2.65rem, 5vw, 4.65rem); letter-spacing: -.06em; line-height: .98; }
.compliance-hero > div > p:not(.eyebrow) { max-width: 680px; margin: 0; color: #c0d2e6; font-size: clamp(1rem, 1.7vw, 1.15rem); line-height: 1.65; }
.compliance-hero-note { padding: 1.35rem; border: 1px solid #377b7c; border-radius: 1.05rem; background: linear-gradient(145deg, #10383d, #102239); box-shadow: 0 1.25rem 3rem #02061755; }
.compliance-note-icon { display: inline-grid; width: 2.2rem; height: 2.2rem; place-items: center; margin-bottom: .85rem; border: 1px solid #64d6c5; border-radius: .65rem; background: #0a2630; color: #8ff4e4; }
.compliance-note-icon svg { width: 1.2rem; height: 1.2rem; }
.compliance-hero-note strong { display: block; color: #effffb; font-size: 1.08rem; }
.compliance-hero-note p { margin: .45rem 0 0; color: #b9d8d8; font-size: .9rem; line-height: 1.55; }
.compliance-baseline, .compliance-review-flow, .compliance-boundary, .compliance-action { margin-top: clamp(3.6rem, 7vw, 6.5rem); }
.compliance-section-copy { max-width: 760px; }
.compliance-section-copy h2, .compliance-boundary h2, .compliance-action h2 { margin: .48rem 0 .75rem; color: #f3f8ff; font-size: clamp(1.7rem, 3vw, 2.55rem); letter-spacing: -.045em; line-height: 1.06; }
.compliance-section-copy > p:not(.eyebrow), .compliance-boundary p, .compliance-action p { margin: 0; color: #b8cde0; line-height: 1.65; }
.compliance-source { margin-top: .85rem !important; color: #8fb4c6 !important; font-size: .86rem; }
.compliance-source a { color: #83ead8; text-underline-offset: .18em; }
.baseline-grid, .review-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1.5rem; }
.baseline-grid article, .review-status { min-width: 0; padding: 1rem; border: 1px solid #315b75; border-radius: .82rem; background: linear-gradient(145deg, #112942, #0b1729); }
.baseline-grid span { display: block; color: #74e9d8; font: 800 .68rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.baseline-grid h3 { margin: .55rem 0 .38rem; color: #eff9ff; font-size: 1rem; }
.baseline-grid p, .review-status p { margin: 0; color: #a9c3d6; font-size: .82rem; line-height: 1.48; }
.review-status { min-height: 8.6rem; border-left-width: 3px; }
.review-status strong { display: block; margin-bottom: .5rem; color: #eefaff; font-size: .92rem; }
.review-status-detected { border-left-color: #62d8be; }
.review-status-partial { border-left-color: #e1c275; }
.review-status-missing { border-left-color: #d98e84; }
.review-status-context { border-left-color: #8f9dea; }
.compliance-review-flow code { padding: .14rem .28rem; border-radius: .25rem; background: #0b2134; color: #8debd9; font-size: .9em; }
.compliance-boundary { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(17rem, .95fr); gap: clamp(1.4rem, 5vw, 4rem); align-items: start; padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid #7a6650; border-radius: 1rem; background: linear-gradient(135deg, #282019, #111c2e); }
.compliance-boundary ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.compliance-boundary li { position: relative; padding-left: 1.25rem; color: #ddcba7; font-size: .9rem; line-height: 1.5; }
.compliance-boundary li::before { position: absolute; left: 0; color: #f0c96b; content: "•"; }
.compliance-action { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid #397b75; border-radius: 1rem; background: linear-gradient(115deg, #103936, #102440 70%); }
.compliance-action > div { max-width: 650px; }
.compliance-action .button { flex: 0 0 auto; text-decoration: none; white-space: nowrap; }
.invoice-detail-review { margin-top: 1.2rem; padding: 1rem; border: 1px solid #3b726f; border-radius: .82rem; background: linear-gradient(145deg, #0b292d, #0b192a); }
.invoice-detail-review-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.invoice-detail-review-heading h2 { margin: .34rem 0 .25rem; color: #effdf9; font-size: 1.16rem; }
.invoice-detail-review-heading p:not(.eyebrow) { margin: 0; color: #b3d5d5; font-size: .84rem; line-height: 1.45; }
.invoice-detail-review-heading a { flex: 0 0 auto; color: #8ce9da; font-size: .76rem; font-weight: 750; text-decoration: none; }
.invoice-detail-review-heading a:hover, .invoice-detail-review-heading a:focus-visible { color: #e1fffa; text-decoration: underline; }
.invoice-detail-summary { display: flex; flex-wrap: wrap; gap: .42rem; margin: .85rem 0; }
.invoice-detail-summary span { padding: .25rem .42rem; border: 1px solid #315c68; border-radius: 999px; color: #c7e7e8; font-size: .7rem; font-weight: 750; }
.invoice-detail-summary [data-status="detected"] { border-color: #3c917e; color: #9ff1db; }
.invoice-detail-summary [data-status="partially_detected"] { border-color: #9b7b3b; color: #f3d88d; }
.invoice-detail-summary [data-status="not_detected"] { border-color: #8e5b58; color: #f0b6ad; }
.invoice-detail-summary [data-status="context_required"] { border-color: #586aa4; color: #c4d0ff; }
.invoice-detail-items { display: grid; gap: .38rem; margin: 0; padding: 0; list-style: none; }
.invoice-detail-items li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: baseline; padding: .55rem .1rem; border-top: 1px solid #284456; }
.invoice-detail-items li:first-child { border-top: 0; }
.invoice-detail-status { min-width: 6.7rem; color: #a7e9dc; font-size: .69rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.invoice-detail-items li[data-status="partially_detected"] .invoice-detail-status { color: #f0d284; }
.invoice-detail-items li[data-status="not_detected"] .invoice-detail-status { color: #e6aaa1; }
.invoice-detail-items li[data-status="context_required"] .invoice-detail-status { color: #bec9fb; }
.invoice-detail-item-copy strong { color: #e3f2fb; font-size: .82rem; }
.invoice-detail-item-copy span { color: #a9c3d1; font-size: .78rem; line-height: 1.4; }
@media (max-width: 850px) { .compliance-hero, .compliance-boundary { grid-template-columns: 1fr; } .baseline-grid, .review-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .compliance-shell { width: min(100% - 2rem, 1120px); padding-top: 2.65rem; } .compliance-hero h1 { font-size: clamp(2.3rem, 12vw, 3.25rem); } .baseline-grid, .review-status-grid { grid-template-columns: 1fr; } .compliance-action, .invoice-detail-review-heading { align-items: stretch; flex-direction: column; } .compliance-action .button { width: 100%; } .invoice-detail-items li { grid-template-columns: 1fr; gap: .18rem; } }

.compliance-boundary li::before { content: "+"; }

.flow-callout-compliance { border-color: #4a5f8f; background: #121f39; }
.flow-callout-compliance strong { color: #bbceff; }
.flow-callout-compliance a { color: #91eadf; font-weight: 750; text-underline-offset: .18em; }
.flow-callout-compliance a:hover, .flow-callout-compliance a:focus-visible { color: #e5fffa; }

/* Public design reset: a restrained, document-led Invocello surface. */
:root {
  --ink: #071419;
  --raised: #0c2027;
  --paper: #f4f0e7;
  --mist: #bdcbc8;
  --muted: #8ba0a0;
  --mint: #77dfc9;
  --mint-hi: #b2f5e4;
  --gold: #e4ba77;
  --line: #29474f;
}
.hero, .try-page, .visual-page, .compliance-page {
  background: radial-gradient(circle at 82% 4%, #1b41494f, transparent 32rem), linear-gradient(135deg, #061014, var(--ink) 60%, #0b1d23);
}
.home-nav, .visual-nav, .compact-nav {
  min-height: 5.65rem;
  border-bottom: 1px solid #ffffff12;
}
.home-nav nav, .visual-nav nav, .compact-nav nav { gap: 1.2rem; }
.home-nav nav a, .visual-nav nav > a, .compact-nav nav a {
  color: var(--mist);
  font-size: .78rem;
  font-weight: 760;
  letter-spacing: .02em;
}
.home-nav nav a:hover, .visual-nav nav > a:hover, .compact-nav nav a:hover { color: var(--mint-hi); }
.home-nav .home-account-link, .visual-nav .nav-cta {
  border: 1px solid #5aa395;
  border-radius: .3rem;
  background: transparent;
  color: var(--mint-hi);
}
.home-nav .home-account-link:hover, .visual-nav .nav-cta:hover { background: #103030; }
.brand { gap: .62rem; }
.brand-mark {
  width: 2.45rem;
  height: 2.45rem;
  padding: .18rem;
  border: 1px solid #70cdbd;
  border-radius: .32rem;
  background: #11343a;
  box-shadow: none;
}
.brand .brand-label {
  color: var(--paper);
  font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, ui-serif, serif;
  font-size: 1.22rem;
  letter-spacing: -.055em;
}
.button { border-radius: .3rem; box-shadow: none; font-size: .88rem; letter-spacing: .01em; }
.button-primary { background: var(--mint); color: #06241f; }
.button-primary:hover { background: var(--mint-hi); }

/* Home: strong reading order, one actual start point, and one framed artifact. */
.home-shell { width: min(1180px, calc(100% - 3rem)); padding: clamp(3.4rem, 6vw, 6.5rem) 0 4.5rem; }
.home-intro {
  grid-template-columns: minmax(0, 1.14fr) minmax(260px, .62fr);
  gap: clamp(2rem, 7vw, 7.5rem);
  align-items: center;
}
.home-copy {
  max-width: 700px;
  padding-left: clamp(1rem, 2vw, 1.55rem);
  border-left: 1px solid #5cc6b466;
}
.home-kicker { margin: 0; color: var(--mint); font: 780 .68rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; }
.home-intro h1 {
  max-width: 680px;
  margin: .82rem 0 1.15rem;
  color: var(--paper);
  font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, ui-serif, serif;
  font-size: clamp(3.25rem, 5.65vw, 5.55rem);
  font-weight: 700;
  letter-spacing: -.075em;
  line-height: .9;
}
.home-lede { max-width: 590px; color: var(--mist); font-size: clamp(1rem, 1.55vw, 1.15rem); line-height: 1.65; }
.home-primary-actions { gap: 1rem; margin-top: 1.6rem; }
.home-inline-link { color: var(--paper); font-size: .85rem; font-weight: 720; }
.home-proof {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 0;
  width: fit-content;
  margin-top: 2.25rem;
  border-top: 1px solid #ffffff1d;
  border-bottom: 1px solid #ffffff1d;
}
.home-proof span {
  min-height: 3.25rem;
  padding: 0 1rem;
  border-right: 1px solid #ffffff14;
  color: var(--mist);
  font-size: .73rem;
  font-weight: 720;
}
.home-proof span:first-child { padding-left: 0; }
.home-proof span:last-child { border-right: 0; }
.home-proof svg { width: .95rem; height: .95rem; color: var(--mint); }
.home-art {
  width: min(100%, 390px);
  max-width: 390px;
  padding: .42rem;
  border: 1px solid #56838a;
  border-radius: .16rem;
  background: #10262d;
  box-shadow: 1.15rem 1.15rem 0 #15333a55;
  overflow: visible;
}
.home-art::before { inset: -.6rem .6rem .6rem -.6rem; border: 1px solid #ffffff15; border-radius: 0; background: none; }
.home-art::after {
  top: auto;
  right: auto;
  bottom: -1.15rem;
  left: .8rem;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--mint);
  content: "SOURCE / STRUCTURE / SIGNAL";
  font-size: .56rem;
}
.home-art img { aspect-ratio: 1 / 1; border-radius: 0; }
.home-art figcaption { margin: .78rem .2rem .12rem; color: var(--mist); font-size: .72rem; }
.home-actions {
  grid-template-columns: minmax(0, 1fr) minmax(230px, .35fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  margin-top: clamp(4.5rem, 8vw, 7rem);
  padding-top: 1.1rem;
  border-top: 1px solid #ffffff1d;
}
.home-signup-card, .home-existing-card {
  min-height: 0;
  padding: 1.25rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-signup-card { border-top: 2px solid var(--mint); }
.home-existing-card { margin-top: 0; border-top: 2px solid #587a83; color: var(--mist); }
.plan-name { margin: 0; color: var(--mint); font-size: .66rem; }
.home-actions h2 {
  max-width: 570px;
  margin: .55rem 0 .65rem;
  color: var(--paper);
  font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, ui-serif, serif;
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  letter-spacing: -.05em;
}
.home-signup-card .price { margin: .75rem 0 .35rem; color: var(--mint-hi); font-size: clamp(2.3rem, 4vw, 3.15rem); }
.home-pricing, .home-existing-card > p:not(.plan-name), .signup-note { color: var(--mist); font-size: .87rem; line-height: 1.55; }
.home-signup-card form { max-width: 690px; margin-top: 1.25rem; }
.home-signup-card input { min-height: 3.1rem; border-color: #486a70; border-radius: .28rem; background: #07151a; }
.home-existing-card .button { margin-top: 1rem; border-color: #5d8580; border-radius: .3rem; }

/* Product tour: the process sheet replaces the card wall. */
.visual-shell { width: min(1180px, calc(100% - 3rem)); }
.visual-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(250px, .55fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
  padding: clamp(3.5rem, 6vw, 6.25rem) 0 3.75rem;
  border-bottom: 1px solid #ffffff18;
}
.visual-hero h1, .flow-explorer-heading h2, .result-guide-heading h2,
.compliance-hero h1, .compliance-section-copy h2, .compliance-boundary h2, .compliance-action h2 {
  color: var(--paper);
  font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, ui-serif, serif;
}
.visual-hero h1 { max-width: 690px; font-size: clamp(3.15rem, 5.7vw, 5.55rem); letter-spacing: -.075em; }
.visual-hero .lede { max-width: 590px; color: var(--mist); font-size: 1.05rem; }
.overview-art {
  max-width: 340px;
  padding: .42rem;
  border: 1px solid #8d7652;
  border-radius: .16rem;
  background: #251e16;
  box-shadow: 1.15rem 1.15rem 0 #2c251a63;
  overflow: visible;
}
.overview-art::before { inset: -.6rem .6rem .6rem -.6rem; border: 1px solid #ffffff15; border-radius: 0; background: none; }
.overview-art img { aspect-ratio: 1 / 1; border-radius: 0; }
.overview-art figcaption { margin: .78rem .2rem .12rem; color: #c9bc9f; }
.flow-explorer {
  margin: 3.2rem 0 5.5rem;
  padding: clamp(1.25rem, 3vw, 2.4rem) 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.flow-explorer-heading { align-items: end; padding: 0 clamp(1.15rem, 3vw, 2rem); }
.flow-summary { color: var(--muted); font-size: .9rem; }
.flow-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 650px;
  margin: 2rem 0 1.45rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.flow-tab {
  justify-content: flex-start;
  min-height: 2.85rem;
  padding: .7rem .1rem;
  border-bottom: 1px solid #456269;
  border-radius: 0;
  color: var(--muted);
  font-size: .8rem;
}
.flow-tab:hover { background: transparent; color: var(--paper); }
.flow-tab[aria-selected="true"] { border-color: var(--mint); background: transparent; color: var(--mint-hi); box-shadow: none; }
.flow-panel { padding: clamp(1.15rem, 3vw, 2rem); border: 1px solid var(--line); background: #0a181e99; }
.flow-diagram { gap: 0; padding: 0 0 1.6rem; }
.flow-node { min-height: 12.2rem; padding: 1rem; border-color: #35535a; border-radius: 0; background: #0d2026; }
.flow-node::after { display: none; }
.flow-node h3, .outcome-card strong {
  color: var(--paper);
  font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, ui-serif, serif;
}
.flow-node h3 { font-size: 1.12rem; }
.flow-node p { color: var(--mist); }
.node-user, .node-api, .node-provider, .node-store { border-top-width: 2px; }
.node-user { border-top-color: #71d4e7; }
.node-api { border-top-color: var(--mint); }
.node-provider { border-top-color: #c9adff; }
.node-store { border-top-color: var(--gold); }
.node-icon { width: 2.35rem; height: 2.35rem; border-radius: .22rem; background: transparent !important; }
.flow-arrow { flex-basis: 1.4rem; color: #5a8585; }
.flow-outcomes { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.outcome-card { min-height: 6rem; padding: 1rem; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.outcome-card:last-child { border-right: 0; }
.outcome-card strong { font-size: 1rem; font-weight: 700; }
.flow-callout {
  grid-template-columns: minmax(150px, .35fr) 1fr;
  gap: 1.2rem;
  margin-top: 0;
  padding: 1.15rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.flow-callout strong { color: var(--mint); font-size: .85rem; white-space: normal; }
.flow-callout span { color: var(--mist); font-size: .88rem; }
.flow-callout-compliance { border-color: var(--line); background: transparent; }
.flow-callout-compliance strong { color: #c1cffd; }
.flow-callout-compliance a { color: var(--mint-hi); }

/* Upload and compliance are focused work surfaces, not decorative cards. */
.upload-card {
  width: min(100%, 760px);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid #41626a;
  border-top: 2px solid var(--mint);
  border-radius: .2rem;
  background: #0b1a20e8;
  box-shadow: 1rem 1rem 0 #12303740;
}
.upload-card h1 { color: var(--paper); font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, ui-serif, serif; }
.upload-state, .invoice-detail-review { border-radius: .2rem; box-shadow: none; }
.invoice-detail-review { border-left: 3px solid var(--mint); background: #0b2125; }
.result-guide { border: 1px solid #36555e; border-top: 2px solid var(--gold); border-radius: .2rem; background: #0c1d23; box-shadow: none; }
.invoice-example, .json-example, .result-guide-toggle b, .critical-field-legend { border-radius: .18rem; }
.compliance-shell { width: min(1180px, calc(100% - 3rem)); }
.compliance-hero {
  grid-template-columns: minmax(0, 1.12fr) minmax(15rem, .48fr);
  padding-bottom: 3rem;
  border-bottom: 1px solid #ffffff18;
}
.compliance-hero-note { border: 1px solid #4c7373; border-left: 3px solid var(--mint); border-radius: .2rem; background: #0d2427; box-shadow: none; }
.compliance-baseline, .compliance-review-flow, .compliance-boundary, .compliance-action { margin-top: clamp(3rem, 6vw, 5.5rem); }
.baseline-grid, .review-status-grid { gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.baseline-grid article, .review-status {
  padding: 1.1rem;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #0b1a20;
}
.review-status { min-height: 7.8rem; border-left: 0; }
.compliance-boundary { border-color: #755f43; border-left: 3px solid var(--gold); border-radius: .2rem; background: #211c15; }
.compliance-action { border: 1px solid #3d6f68; border-top: 2px solid var(--mint); border-radius: .2rem; background: #0d292b; }

@media (max-width: 850px) {
  .home-intro, .visual-hero, .compliance-hero { grid-template-columns: 1fr; }
  .home-art, .overview-art { justify-self: start; margin-top: 1rem; }
  .home-actions { grid-template-columns: 1fr; gap: 2rem; }
  .home-existing-card { max-width: 33rem; }
  .baseline-grid, .review-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home-nav, .visual-nav, .compact-nav, .home-shell, .visual-shell, .compliance-shell { width: min(100% - 2rem, 1180px); }
  .home-nav, .visual-nav, .compact-nav { min-height: 4.7rem; }
  .home-nav nav, .visual-nav nav, .compact-nav nav { gap: .7rem; }
  .home-nav nav a, .visual-nav nav > a, .compact-nav nav a { font-size: .68rem; }
  .home-nav nav a:nth-child(2), .visual-nav nav > a:nth-child(2), .compact-nav nav a:nth-child(2) { display: none; }
  .home-shell { padding-top: 3rem; }
  .home-copy { padding-left: .9rem; }
  .home-intro h1, .visual-hero h1, .compliance-hero h1 { font-size: clamp(2.65rem, 12.5vw, 3.65rem); }
  .home-proof { grid-template-columns: 1fr; width: 100%; margin-top: 1.8rem; }
  .home-proof span, .home-proof span:first-child { padding: .7rem 0; border-right: 0; border-bottom: 1px solid #ffffff14; }
  .home-proof span:last-child { border-bottom: 0; }
  .home-art, .overview-art { display: none; }
  .flow-explorer { margin-top: 2.4rem; }
  .flow-explorer-heading { padding: 0; }
  .flow-tabs { grid-template-columns: 1fr; margin-top: 1.35rem; }
  .flow-panel { padding: 1rem; }
  .flow-diagram { display: grid; grid-template-columns: 1fr; gap: .65rem; }
  .flow-node { min-height: 0; padding: 1rem 1rem 1rem 4.35rem; }
  .flow-node .node-icon { left: 1rem; top: 1rem; }
  .flow-arrow { display: none; }
  .flow-outcomes { grid-template-columns: 1fr; border-left: 1px solid var(--line); }
  .outcome-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .outcome-card:last-child { border-bottom: 0; }
  .flow-callout { grid-template-columns: 1fr; gap: .35rem; }
  .upload-card { padding: 1.2rem; box-shadow: none; }
  .baseline-grid, .review-status-grid { grid-template-columns: 1fr; }
  .compliance-action { align-items: stretch; flex-direction: column; }
}

/* Final landing-page refinement: one quiet mark, one clean artifact, no miniature controls. */
.brand { gap: .55rem; }
.brand-mark {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mint-hi);
}
.home-proof {
  display: flex;
  align-items: center;
  gap: 0;
  width: auto;
  margin-top: 2rem;
  border: 0;
}
.home-proof span,
.home-proof span:first-child,
.home-proof span:last-child {
  min-height: 0;
  padding: 0 .9rem;
  border: 0;
  border-left: 1px solid #ffffff2b;
  color: var(--mist);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.1;
  white-space: nowrap;
}
.home-proof span:first-child {
  padding-left: 0;
  border-left: 0;
}
.home-proof svg { display: none; }
.home-art {
  width: min(100%, 365px);
  max-width: 365px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-art::before,
.home-art::after { display: none; }
.home-art img {
  display: block;
  aspect-ratio: 1 / 1;
  border: 1px solid #42656a;
  border-radius: .22rem;
  box-shadow: none;
}
.home-art figcaption {
  margin: .75rem 0 0;
  color: var(--mist);
  font-size: .72rem;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .brand-mark { width: 1.95rem; height: 1.95rem; }
  .home-proof {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: 1.8rem;
  }
  .home-proof span,
  .home-proof span:first-child,
  .home-proof span:last-child {
    padding: .72rem 0;
    border: 0;
    border-top: 1px solid #ffffff1d;
    white-space: normal;
  }
  .home-proof span:first-child { border-top: 0; }
}