:root { color-scheme: light; --ink:#211b16; --muted:#6f6258; --paper:#fffaf4; --line:#eadfd3; --accent:#ff5a2c; --purple:#6d3fd1; --green:#26724e; --soft:#f7f8f1; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--ink); background: radial-gradient(circle at 20% 10%, #eefaf0, transparent 28%), radial-gradient(circle at 86% 8%, #efe8ff, transparent 26%), var(--paper); }
a { color: inherit; 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; }
.site-header { min-height: 76px; padding: 0 28px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); background: rgba(255,250,244,.94); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); }
.brand-link { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; font-weight: 900; letter-spacing: 0; }
.page-language-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid rgba(109,63,209,.14); border-radius: 999px; background: rgba(255,255,255,.72); box-shadow: 0 10px 24px rgba(109,63,209,.08); }
.page-lang-option { min-width: 32px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
.page-lang-option.is-active { background: var(--purple); color: #fffaf4; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 760; }
.site-nav a, .ghost-link { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 8px; white-space: nowrap; transition: background .18s ease, color .18s ease, transform .18s ease; }
.site-nav a:hover, .ghost-link:hover { color: var(--ink); background: rgba(109,63,209,.08); }
.site-nav a.is-active { color: var(--purple); background: rgba(109,63,209,.11); }
.site-actions { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; font-weight: 800; }
.site-actions .is-active { color: var(--purple); background: rgba(109,63,209,.1); }
.site-actions .button.is-active { color: #fffaf4; background: var(--accent); }
.site-signup { min-height: 38px; padding: 0 14px; box-shadow: 0 12px 26px rgba(255,90,44,.18); }
main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 60px 0 84px; }
.hero { max-width: 860px; }
.eyebrow { color: var(--green); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 800; }
h1 { font-size: 40px; line-height: 1.08; max-width: 700px; margin: 0 0 16px; text-wrap: balance; }
p { color: var(--muted); font-size: 16px; line-height: 1.64; max-width: 720px; }
.lead { font-size: 17px; line-height: 1.62; color: #554940; }
.section { margin-top: 48px; }
.section h2 { margin: 0 0 13px; font-size: 27px; line-height: 1.16; max-width: 660px; text-wrap: balance; }
.section > p { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 28px; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card, .grid a, .note, .cta-panel { border: 1px solid var(--line); background: rgba(255,255,255,.74); border-radius: 8px; box-shadow: 0 16px 42px rgba(38, 48, 41, .07); }
.grid a, .card { padding: 18px; }
.grid a { font-weight: 800; }
.card strong, .grid a strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 18px; line-height: 1.2; }
.card span, .grid a span { display: block; color: var(--muted); font-size: 14px; line-height: 1.45; font-weight: 500; }
.card p { margin: 0; font-size: 15px; line-height: 1.58; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.badge { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid rgba(109,63,209,.18); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--purple); font-size: 13px; font-weight: 800; }
.note { margin-top: 28px; padding: 18px; color: #4f433b; font-size: 16px; line-height: 1.7; }
.cta-panel { margin-top: 56px; padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(239,232,255,.82)); }
.cta-panel p { margin: 0; font-size: 16px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border-radius: 8px; background: var(--accent); color: #fffaf4; font-weight: 850; white-space: nowrap; }
.steps { display: grid; gap: 12px; margin-top: 28px; counter-reset: step; }
.step { position: relative; padding: 18px 18px 18px 58px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.72); }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 18px; top: 18px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--purple); color: #fffaf4; font-size: 13px; font-weight: 900; }
.step strong { display: block; margin-bottom: 4px; }
.split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 18px; align-items: start; margin-top: 28px; }
ul.clean { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
ul.clean li { padding-left: 18px; position: relative; color: var(--muted); font-size: 16px; line-height: 1.55; }
ul.clean li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.section-heading-row { display: grid; grid-template-columns: minmax(0, .95fr) minmax(280px, .55fr); gap: 28px; align-items: end; margin-bottom: 24px; }
.section-heading-row .eyebrow { margin: 0 0 10px; }
.section-heading-row h2 { margin-bottom: 0; }
.section-heading-row > p { margin: 0; font-size: 15px; line-height: 1.58; }
.pricing-hero { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 28px; align-items: end; }
.pricing-control-panel { border: 1px solid rgba(109,63,209,.18); border-radius: 8px; background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(239,232,255,.76)); padding: 18px; box-shadow: 0 20px 48px rgba(109,63,209,.1); }
.control-block + .control-block { margin-top: 16px; }
.control-label { display: block; margin-bottom: 8px; color: #5d5047; font-size: 13px; font-weight: 850; }
.segmented-control, .tier-selector { display: grid; gap: 6px; padding: 4px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,255,255,.72); }
.segmented-control { grid-template-columns: repeat(2, minmax(0,1fr)); }
.tier-selector { grid-template-columns: repeat(4, minmax(0,1fr)); }
.segmented-control button, .tier-selector button { min-height: 36px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; }
.segmented-control button.is-active, .tier-selector button.is-active { background: var(--purple); color: #fffaf4; box-shadow: 0 10px 22px rgba(109,63,209,.18); }
.usage-summary { margin-top: 16px; padding: 16px; border-radius: 8px; background: #211b16; color: #fffaf4; }
.usage-summary span:first-child { display: block; color: rgba(255,250,244,.68); font-size: 12px; font-weight: 850; }
.usage-summary strong { display: block; margin-top: 6px; color: #fffaf4; font-size: 30px; line-height: 1; }
.usage-summary p { margin: 10px 0 0; color: rgba(255,250,244,.74); font-size: 14px; line-height: 1.5; }
.usage-summary b { color: #fffaf4; }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.plan-card { position: relative; min-height: 510px; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.78); box-shadow: 0 16px 42px rgba(38,48,41,.07); }
.plan-card.is-featured { border-color: rgba(109,63,209,.5); background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(239,232,255,.78)); box-shadow: 0 22px 56px rgba(109,63,209,.14); }
.plan-tag { position: absolute; right: 16px; top: 16px; min-height: 26px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; background: var(--accent); color: #fffaf4; font-size: 12px; font-weight: 900; }
.plan-kicker { color: var(--purple); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.plan-card h3 { margin: 12px 0 8px; font-size: 25px; line-height: 1.1; }
.plan-card > p { margin: 0; min-height: 76px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.price-line { margin: 18px 0; display: flex; align-items: baseline; gap: 6px; }
.price-line span { color: var(--ink); font-size: 45px; line-height: 1; font-weight: 900; letter-spacing: 0; }
.price-line small { color: var(--muted); font-size: 14px; font-weight: 800; }
.price-line.custom { align-items: flex-end; }
.price-line.custom span { font-size: 36px; }
.plan-action { width: 100%; margin-bottom: 18px; }
.plan-action.secondary { background: #211b16; color: #fffaf4; }
.plan-features { margin: auto 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; display: grid; gap: 11px; }
.plan-features li { position: relative; padding-left: 18px; color: #5d5047; font-size: 14px; line-height: 1.42; }
.plan-features li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.billing-preview { display: grid; grid-template-columns: 224px minmax(0,1fr); border: 1px solid rgba(109,63,209,.16); border-radius: 8px; background: rgba(255,255,255,.82); color: var(--ink); overflow: hidden; box-shadow: 0 24px 64px rgba(109,63,209,.12); }
.billing-sidebar { padding: 22px 14px; border-right: 1px solid rgba(109,63,209,.1); background: linear-gradient(180deg, rgba(255,250,244,.95), rgba(239,232,255,.72)); display: grid; align-content: start; gap: 9px; }
.billing-sidebar strong { display: block; margin-bottom: 12px; color: var(--ink); font-size: 18px; }
.billing-nav-item { min-height: 38px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; color: #6f6258; font-size: 14px; font-weight: 820; }
.billing-nav-item.is-active { background: var(--purple); color: #fffaf4; box-shadow: 0 12px 22px rgba(109,63,209,.16); }
.billing-console { min-width: 0; padding: 20px; display: grid; gap: 16px; background: radial-gradient(circle at 100% 0%, rgba(255,90,44,.1), transparent 32%), rgba(255,253,248,.84); }
.console-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(33,27,22,.08); }
.console-topbar strong { color: var(--ink); font-size: 22px; }
.console-topbar > div:first-child { display: grid; gap: 4px; }
.console-topbar div { display: flex; gap: 8px; align-items: center; color: #5d5047; font-weight: 850; }
.console-kicker { color: var(--muted); font-size: 12px; line-height: 1.3; font-weight: 800; }
.console-wallet { flex-wrap: wrap; justify-content: flex-end; }
.credit-pill { padding: 7px 10px; border: 1px solid rgba(255,90,44,.22); border-radius: 8px; color: var(--accent); background: rgba(255,90,44,.08); }
.console-tabs { display: flex; gap: 22px; overflow-x: auto; color: #74685f; font-size: 14px; font-weight: 850; }
.console-tabs button { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; padding: 0 0 9px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.console-tabs span { padding-bottom: 9px; border-bottom: 2px solid transparent; }
.console-tabs .is-active { color: var(--purple); border-color: var(--purple); }
.console-card { border: 1px solid rgba(109,63,209,.12); border-radius: 8px; background: rgba(255,255,255,.82); padding: 18px; box-shadow: 0 18px 42px rgba(38,48,41,.07); }
.console-card-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 16px; }
.console-card-head strong { display: block; color: var(--ink); font-size: 18px; }
.console-card-head span { color: var(--muted); font-size: 13px; }
.console-card-head button { min-height: 38px; border: 0; border-radius: 8px; padding: 0 14px; background: var(--purple); color: #fffaf4; font: inherit; font-weight: 900; }
.console-subgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.console-plan { min-height: 136px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; padding: 14px; display: grid; align-content: space-between; gap: 10px; text-align: left; background: rgba(255,250,244,.76); font: inherit; }
.console-plan.is-selected { border-color: rgba(109,63,209,.34); background: linear-gradient(180deg, rgba(239,232,255,.88), rgba(255,255,255,.9)); box-shadow: inset 0 0 0 1px rgba(109,63,209,.08), 0 14px 30px rgba(109,63,209,.1); }
.console-plan span, .console-plan small { color: #6f6258; font-size: 13px; }
.console-plan strong { color: var(--ink); font-size: 25px; }
.console-plan a, .console-plan em { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; width: fit-content; border-radius: 8px; padding: 0 9px; background: rgba(109,63,209,.1); color: var(--purple); font-size: 12px; font-style: normal; font-weight: 900; }
.console-plan.is-selected a, .console-plan.is-selected em { background: var(--purple); color: #fffaf4; }
.console-status-rail { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.console-status-item { min-width: 0; min-height: 76px; display: grid; align-content: space-between; gap: 8px; padding: 12px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,255,255,.72); color: #74685f; font-size: 12px; line-height: 1.35; font-weight: 800; }
.console-status-item strong { display: block; color: var(--ink); font-size: 18px; line-height: 1.1; overflow-wrap: anywhere; }
.console-state-panel { min-width: 0; display: grid; gap: 12px; padding: 16px; border: 1px solid rgba(109,63,209,.12); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,250,244,.72)); }
.console-state-panel[hidden], [data-console-pane][hidden], [data-console-loading][hidden] { display: none; }
.console-state-panel.is-loading { border-color: rgba(109,63,209,.2); background: rgba(239,232,255,.52); }
.console-state-panel.is-empty { border-style: dashed; background: rgba(255,255,255,.58); }
.console-state-panel.is-error { border-color: rgba(255,90,44,.32); background: rgba(255,90,44,.08); }
.console-state-panel > button { min-height: 34px; border: 1px solid rgba(109,63,209,.16); border-radius: 8px; padding: 0 12px; background: rgba(239,232,255,.72); color: var(--purple); font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.console-skeleton { position: relative; overflow: hidden; min-height: 14px; border-radius: 7px; background: rgba(109,63,209,.08); }
.console-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: console-skeleton-sweep 1.3s ease-in-out infinite; }
.console-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.console-empty-actions a, .console-empty-actions button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(109,63,209,.18); border-radius: 8px; padding: 0 11px; background: rgba(239,232,255,.72); color: var(--purple); font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.console-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid rgba(38,114,78,.18); border-radius: 8px; background: rgba(238,250,240,.72); color: #5d5047; font-size: 13px; line-height: 1.45; }
.console-notice::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: .42em; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(38,114,78,.12); }
.console-ledger { display: grid; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,255,255,.7); overflow: hidden; }
.console-ledger-row { min-width: 0; display: grid; grid-template-columns: minmax(120px,1.2fr) minmax(90px,.8fr) minmax(86px,.7fr) minmax(74px,.55fr); gap: 10px; align-items: center; min-height: 42px; padding: 10px 12px; border-bottom: 1px solid rgba(33,27,22,.08); color: #6f6258; font-size: 13px; line-height: 1.35; }
.console-ledger-row:last-child { border-bottom: 0; }
.console-ledger-row strong { color: var(--ink); font-size: 13px; line-height: 1.25; }
.console-ledger-row span, .console-ledger-row small { min-width: 0; overflow-wrap: anywhere; }
.console-strip { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.console-strip div { border: 1px solid rgba(109,63,209,.12); border-radius: 8px; padding: 14px; background: rgba(239,232,255,.45); }
.console-strip strong, .console-strip span { display: block; }
.console-strip strong { color: var(--ink); }
.console-strip span { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.console-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.console-service { display: grid; gap: 8px; min-height: 126px; padding: 14px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,250,244,.76); }
.console-service strong, .console-service span, .console-service small { display: block; }
.console-service strong { color: var(--ink); font-size: 16px; line-height: 1.2; }
.console-service span { color: #5d5047; font-size: 13px; line-height: 1.45; }
.console-service small { align-self: end; color: var(--purple); font-size: 12px; font-weight: 900; }
.console-order-list { display: grid; gap: 8px; }
.console-order-row { min-height: 48px; display: grid; grid-template-columns: minmax(110px,.85fr) minmax(0,1.3fr) minmax(82px,.55fr) minmax(64px,.45fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,255,255,.72); color: #6f6258; font-size: 13px; font-weight: 760; }
.console-order-row strong { color: var(--ink); font-size: 13px; line-height: 1.25; }
.console-order-row em { color: var(--green); font-style: normal; font-weight: 900; }
.console-order-row b { color: var(--ink); font-size: 13px; text-align: right; }
@keyframes console-skeleton-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .console-skeleton::after { animation: none; transform: none; } }
.pricing-included .card strong { color: var(--purple); }
.product-explainer { margin-top: 30px; display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 18px; align-items: stretch; }
.product-explainer.reverse { grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); }
.explainer-copy, .explainer-visual, .story-card, .route-card, .compare-strip, .governance-board, .resource-board { min-width: 0; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,255,255,.78); box-shadow: 0 18px 48px rgba(38,48,41,.08); }
.explainer-copy { padding: 22px; display: grid; align-content: center; gap: 16px; background: radial-gradient(circle at 100% 0%, rgba(255,90,44,.11), transparent 35%), rgba(255,255,255,.76); }
.explainer-copy h2 { margin: 0; font-size: 27px; line-height: 1.14; }
.explainer-copy p { margin: 0; max-width: 68ch; color: #5d5047; font-size: 15px; line-height: 1.62; }
.explainer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.explainer-actions a { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: 0 12px; background: rgba(109,63,209,.1); color: var(--purple); font-size: 13px; font-weight: 900; transition: transform .18s ease, background .18s ease; }
.explainer-actions a:hover { transform: translateY(-1px); background: rgba(109,63,209,.16); }
.explainer-visual { overflow: hidden; background: linear-gradient(90deg, rgba(33,27,22,.04) 1px, transparent 1px), linear-gradient(rgba(33,27,22,.04) 1px, transparent 1px), #fffdf8; background-size: 28px 28px, 28px 28px, auto; }
.mini-window { min-height: 360px; display: grid; grid-template-rows: 42px 1fr; }
.mini-topbar { min-height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid rgba(33,27,22,.08); background: rgba(255,255,255,.74); color: #6f6258; font-size: 12px; font-weight: 900; }
.mini-topbar i { width: 8px; height: 8px; border-radius: 999px; background: rgba(33,27,22,.16); }
.mini-topbar i:first-child { background: var(--accent); }
.mini-topbar i:nth-child(2) { background: var(--purple); }
.mini-topbar i:nth-child(3) { background: var(--green); }
.diagram-canvas { padding: 16px; display: grid; gap: 12px; align-content: start; }
.flow-diagram { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; align-items: stretch; }
.flow-step { min-height: 118px; display: grid; align-content: space-between; gap: 10px; padding: 13px; border: 1px solid rgba(109,63,209,.12); border-radius: 8px; background: rgba(255,255,255,.82); }
.flow-step span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(109,63,209,.1); color: var(--purple); font-size: 11px; font-weight: 950; }
.flow-step strong { color: var(--ink); font-size: 14px; line-height: 1.2; }
.flow-step small { color: #6f6258; font-size: 12px; line-height: 1.38; font-weight: 700; }
.system-row-list { display: grid; gap: 9px; }
.system-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 58px; padding: 10px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,255,255,.78); }
.system-row b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,90,44,.1); color: #b85016; font-size: 11px; }
.system-row strong, .system-row span, .system-row em { display: block; min-width: 0; }
.system-row strong { color: var(--ink); font-size: 14px; line-height: 1.18; }
.system-row span { margin-top: 3px; color: #6f6258; font-size: 12px; line-height: 1.3; }
.system-row em { color: var(--green); font-size: 11px; font-style: normal; font-weight: 900; white-space: nowrap; }
.permission-chain { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.permission-chain article { min-height: 108px; display: grid; align-content: start; gap: 7px; padding: 13px; border: 1px solid rgba(38,114,78,.15); border-radius: 8px; background: rgba(238,250,240,.72); }
.permission-chain strong { color: var(--ink); font-size: 14px; line-height: 1.18; }
.permission-chain span { color: #5d5047; font-size: 12.5px; line-height: 1.42; font-weight: 650; }
.story-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.story-card { min-height: 188px; padding: 18px; display: grid; align-content: start; gap: 10px; }
.story-card span { width: fit-content; min-height: 26px; display: inline-flex; align-items: center; border-radius: 8px; padding: 0 9px; background: rgba(109,63,209,.1); color: var(--purple); font-size: 11px; font-weight: 950; }
.story-card strong { color: var(--ink); font-size: 18px; line-height: 1.18; }
.story-card p { margin: 0; color: #5d5047; font-size: 14px; line-height: 1.55; }
.route-card { margin-top: 26px; padding: 16px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; background: linear-gradient(135deg, rgba(239,232,255,.58), rgba(255,255,255,.76)); }
.route-card span { min-height: 76px; display: grid; align-content: center; gap: 5px; border: 1px solid rgba(109,63,209,.12); border-radius: 8px; padding: 12px; background: rgba(255,255,255,.68); color: var(--ink); font-size: 13px; font-weight: 900; }
.route-card b { color: var(--ink); font-size: 13px; line-height: 1.2; }
.route-card em { color: #6f6258; font-style: normal; font-size: 11px; line-height: 1.3; font-weight: 760; }
.compare-strip { margin-top: 26px; padding: 16px; display: grid; grid-template-columns: minmax(0,1fr) 44px minmax(0,1fr); gap: 10px; align-items: stretch; }
.compare-strip > span { display: grid; place-items: center; color: var(--accent); font-size: 24px; font-weight: 950; }
.compare-box { display: grid; gap: 9px; padding: 14px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,255,255,.76); }
.compare-box strong { color: var(--ink); font-size: 16px; }
.compare-box p { margin: 0; color: #5d5047; font-size: 13px; line-height: 1.45; }
.governance-board, .resource-board { margin-top: 26px; padding: 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.governance-board article, .resource-board a { min-height: 116px; display: grid; align-content: start; gap: 7px; padding: 14px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,255,255,.7); }
.resource-board a { text-decoration: none; }
.governance-board strong, .resource-board strong { color: var(--ink); font-size: 16px; line-height: 1.2; }
.governance-board span, .resource-board span { color: #5d5047; font-size: 13px; line-height: 1.46; font-weight: 650; }
.form-panel { margin-top: 26px; padding: 20px; border: 1px solid rgba(109,63,209,.16); border-radius: 8px; background: rgba(255,255,255,.78); box-shadow: 0 18px 48px rgba(38,48,41,.08); }
.shenzhi-sales-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.62fr); gap: 22px; align-items: center; border: 1px solid rgba(255,122,26,.22); border-radius: 8px; padding: 22px; background: radial-gradient(circle at 100% 0%, rgba(255,122,26,.13), transparent 34%), rgba(255,255,255,.78); box-shadow: 0 18px 48px rgba(38,48,41,.08); }
.shenzhi-sales-panel h2 { max-width: 760px; margin-bottom: 10px; }
.shenzhi-sales-panel p:not(.eyebrow) { max-width: 70ch; margin: 0 0 18px; color: var(--muted); font-size: 15.5px; line-height: 1.62; }
.shenzhi-sales-questions { display: grid; gap: 10px; }
.shenzhi-sales-questions span { display: block; border: 1px solid rgba(109,63,209,.13); border-radius: 8px; padding: 12px 13px; background: rgba(255,255,255,.72); color: var(--ink); font-size: 14px; font-weight: 780; line-height: 1.4; }
.ecosystem-toolbar { margin-top: 24px; display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.36fr); gap: 14px; align-items: center; padding: 16px; border: 1px solid rgba(109,63,209,.15); border-radius: 8px; background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(239,232,255,.62)); box-shadow: 0 18px 48px rgba(109,63,209,.08); }
.ecosystem-kicker { display: block; margin-bottom: 5px; color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ecosystem-toolbar strong { display: block; color: var(--ink); font-size: 16px; line-height: 1.35; text-wrap: balance; }
.ecosystem-search { min-height: 42px; display: flex; align-items: center; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,255,255,.78); padding: 0 13px; color: #7b6e64; font-size: 13px; font-weight: 800; }
.ecosystem-search::before { content: ""; width: 14px; height: 14px; margin-right: 9px; border: 2px solid rgba(109,63,209,.42); border-radius: 999px; box-shadow: 7px 7px 0 -5px rgba(109,63,209,.42); transform: rotate(-10deg); }
.ecosystem-region-tabs { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.ecosystem-region-tabs span { min-height: 32px; display: inline-flex; align-items: center; border: 1px solid rgba(109,63,209,.16); border-radius: 999px; background: rgba(255,255,255,.72); padding: 0 11px; color: var(--purple); font-size: 12px; font-weight: 900; }
.ecosystem-cluster { margin-top: 28px; display: grid; gap: 14px; scroll-margin-top: 96px; }
.ecosystem-cluster-head { display: grid; grid-template-columns: minmax(0,.72fr) minmax(280px,.54fr); gap: 18px; align-items: end; }
.ecosystem-cluster-head h3 { margin: 0; color: var(--ink); font-size: 22px; line-height: 1.18; }
.ecosystem-cluster-head p { margin: 0; max-width: none; color: #5d5047; font-size: 14px; line-height: 1.58; }
.ecosystem-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.ecosystem-app { min-width: 0; min-height: 188px; display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 8px; align-content: start; padding: 14px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,255,255,.76); box-shadow: 0 16px 38px rgba(44,62,49,.06); overflow: hidden; color: inherit; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.ecosystem-app:hover, .ecosystem-app:focus-visible { transform: translateY(-2px); border-color: rgba(255,122,26,.34); background: rgba(255,255,255,.92); box-shadow: 0 22px 54px rgba(109,63,209,.12); outline: none; }
.ecosystem-app:focus-visible { outline: 2px solid rgba(255,122,26,.42); outline-offset: 3px; }
.ecosystem-app::after { content: "外部登录"; width: fit-content; max-width: 100%; min-height: 24px; display: inline-flex; align-items: center; border: 1px solid rgba(255,122,26,.18); border-radius: 999px; background: rgba(255,122,26,.08); padding: 0 8px; color: #b85016; font-size: 10.5px; line-height: 1; font-weight: 950; }
html[lang="en"] .ecosystem-app::after { content: "External sign in"; }
.ecosystem-logo { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,255,255,.86); overflow: hidden; }
.ecosystem-logo img { display: block; width: 36px; height: 36px; max-width: 38px; max-height: 38px; object-fit: contain; border-radius: 6px; }
.ecosystem-logo.tone-white { background: #fff; }
.ecosystem-logo.tone-purple { background: rgba(239,232,255,.9); }
.ecosystem-logo.tone-blue { background: rgba(232,243,255,.92); }
.ecosystem-logo.tone-green { background: rgba(238,250,240,.92); }
.ecosystem-logo.tone-orange { background: rgba(255,243,232,.95); }
.ecosystem-logo.tone-red { background: rgba(255,238,235,.92); }
.ecosystem-logo.tone-ink { background: #211b16; color: #fffaf4; }
.ecosystem-logo.tone-google { background: linear-gradient(135deg, rgba(66,133,244,.14), rgba(52,168,83,.12), rgba(251,188,5,.12), rgba(234,67,53,.12)); }
.ecosystem-wordmark { display: block; max-width: 100%; color: currentColor; font-size: clamp(11px, 1.15vw, 15px); line-height: 1.05; font-weight: 950; letter-spacing: 0; text-align: center; overflow-wrap: anywhere; }
.ecosystem-logo:not(.tone-ink) .ecosystem-wordmark { color: var(--ink); }
.ecosystem-app strong { min-width: 0; color: var(--ink); font-size: 15px; line-height: 1.22; font-weight: 900; overflow-wrap: anywhere; }
.ecosystem-app > span:not(.ecosystem-logo) { min-width: 0; color: #5d5047; font-size: 12.5px; line-height: 1.42; font-weight: 650; overflow-wrap: anywhere; }
.ecosystem-app small { align-self: end; min-height: 26px; display: inline-flex; width: fit-content; max-width: 100%; align-items: center; border-radius: 8px; background: rgba(109,63,209,.09); padding: 0 8px; color: var(--purple); font-size: 11px; line-height: 1.2; font-weight: 900; overflow-wrap: anywhere; }
.permission-ladder { margin-top: 26px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.permission-ladder div { min-height: 106px; display: grid; align-content: center; gap: 6px; padding: 15px; border: 1px solid rgba(38,114,78,.16); border-radius: 8px; background: linear-gradient(180deg, rgba(238,250,240,.74), rgba(255,255,255,.78)); }
.permission-ladder strong { color: var(--green); font-size: 16px; line-height: 1.15; }
.permission-ladder span { color: #5d5047; font-size: 13px; line-height: 1.42; font-weight: 650; }
@media (max-width: 1040px) { .ecosystem-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .ecosystem-cluster-head, .ecosystem-toolbar { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 720px) { .ecosystem-grid { grid-template-columns: 1fr; } .ecosystem-app { min-height: 0; grid-template-columns: 52px minmax(0,1fr); grid-template-rows: auto auto auto; align-items: center; } .ecosystem-logo { grid-row: 1 / span 3; } .ecosystem-app small { align-self: start; } }
.github-purpose-grid { margin-top: 26px; display: grid; grid-template-columns: 1.2fr repeat(2, minmax(0, .82fr)); gap: 12px; }
.github-purpose-grid article { min-width: 0; min-height: 188px; display: grid; align-content: start; gap: 9px; padding: 18px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,255,255,.72); box-shadow: 0 16px 38px rgba(44,62,49,.06); }
.github-purpose-grid article.is-primary { background: radial-gradient(circle at 100% 0%, rgba(255,90,44,.12), transparent 38%), linear-gradient(145deg, rgba(255,255,255,.9), rgba(239,232,255,.72)); border-color: rgba(109,63,209,.2); }
.github-purpose-grid span { color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.github-purpose-grid strong { color: var(--ink); font-size: 18px; line-height: 1.18; }
.github-purpose-grid p { margin: 0; color: #5d5047; font-size: 14px; line-height: 1.55; }
.github-workbench { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .34fr); gap: 14px; align-items: stretch; }
.github-workbench-main, .github-agent-rail, .github-route-list a { border: 1px solid rgba(109,63,209,.14); border-radius: 8px; background: rgba(255,255,255,.76); box-shadow: 0 18px 46px rgba(38,48,41,.08); }
.github-workbench-main { min-width: 0; overflow: hidden; }
.github-window-bar { min-height: 54px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid rgba(33,27,22,.08); background: linear-gradient(135deg, rgba(255,250,244,.94), rgba(239,232,255,.62)); }
.github-window-bar span { width: 9px; height: 9px; border-radius: 999px; background: rgba(33,27,22,.24); }
.github-window-bar span:first-child { background: var(--accent); }
.github-window-bar span:nth-child(2) { background: #f7b955; }
.github-window-bar span:nth-child(3) { background: var(--green); }
.github-window-bar strong { margin-left: 8px; color: var(--ink); font-size: 14px; line-height: 1.2; font-weight: 900; overflow-wrap: anywhere; }
.github-repo-card { margin: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: #211b16; color: #fffaf4; }
.github-repo-card > div { min-width: 0; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 10px 12px; align-items: start; }
.github-logo-mark { grid-row: 1 / span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.92); }
.github-logo-mark img { width: 30px; height: 30px; object-fit: contain; }
.github-repo-card strong, .github-repo-card p { grid-column: 2; margin: 0; }
.github-repo-card strong { color: #fffaf4; font-size: 18px; line-height: 1.18; }
.github-repo-card p { max-width: none; color: rgba(255,250,244,.72); font-size: 13px; line-height: 1.48; }
.github-repo-card small { flex: 0 0 auto; min-height: 28px; display: inline-flex; align-items: center; border-radius: 999px; padding: 0 10px; background: rgba(255,250,244,.12); color: #fffaf4; font-size: 12px; font-weight: 900; white-space: nowrap; }
.github-task-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 0 16px 16px; }
.github-task-list article { min-width: 0; min-height: 122px; display: grid; align-content: start; gap: 7px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; padding: 13px; background: rgba(255,250,244,.76); }
.github-task-list b { color: var(--ink); font-size: 15px; line-height: 1.2; }
.github-task-list span { color: #5d5047; font-size: 13px; line-height: 1.45; font-weight: 650; }
.github-agent-rail { min-width: 0; padding: 16px; display: grid; align-content: start; gap: 10px; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(239,232,255,.52)); }
.github-agent-rail > strong { color: var(--ink); font-size: 17px; line-height: 1.18; }
.github-agent-rail div { min-height: 58px; display: grid; align-content: center; gap: 4px; padding: 10px 12px; border: 1px solid rgba(109,63,209,.12); border-radius: 8px; background: rgba(255,255,255,.72); }
.github-agent-rail span { color: var(--ink); font-size: 14px; font-weight: 900; }
.github-agent-rail small { color: var(--purple); font-size: 12px; font-weight: 900; }
.github-route-list { margin-top: 24px; display: grid; gap: 10px; }
.github-route-list a { min-height: 86px; display: grid; align-content: center; gap: 6px; padding: 16px 18px; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.github-route-list a:hover { transform: translateY(-1px); border-color: rgba(109,63,209,.28); background: rgba(255,255,255,.9); }
.github-route-list strong { color: var(--ink); font-size: 17px; line-height: 1.2; }
.github-route-list span { color: #5d5047; font-size: 14px; line-height: 1.5; font-weight: 650; }
@media (max-width: 1040px) { .github-purpose-grid, .github-workbench { grid-template-columns: 1fr; } .github-purpose-grid article { min-height: 0; } }
@media (max-width: 860px) { .github-task-list { grid-template-columns: 1fr; } .github-repo-card { flex-direction: column; } }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.field { display: grid; gap: 8px; color: #5d5047; font-size: 13px; font-weight: 850; }
.field + .field { margin-top: 14px; }
.field-grid .field + .field { margin-top: 0; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid rgba(109,63,209,.16); border-radius: 8px; background: rgba(255,255,255,.78); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.4; outline: none; }
.field input, .field select { height: 42px; padding: 0 12px; }
.field textarea { resize: vertical; min-height: 118px; padding: 12px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(109,63,209,.46); box-shadow: 0 0 0 3px rgba(109,63,209,.1); }
.form-actions { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.form-status { margin: 0; max-width: 560px; color: var(--green); font-size: 14px; line-height: 1.5; font-weight: 760; }
.sales-request-layout { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .58fr); gap: 18px; align-items: start; }
.sales-request-form { margin-top: 0; }
.verification-panel { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.verification-card { min-width: 0; padding: 13px; border: 1px solid rgba(109,63,209,.13); border-radius: 8px; background: rgba(255,250,244,.74); }
.verification-card strong { display: block; margin-bottom: 9px; color: var(--ink); font-size: 14px; line-height: 1.2; }
.verification-card input { width: 100%; min-width: 0; height: 42px; border: 1px solid rgba(109,63,209,.16); border-radius: 8px; background: rgba(255,255,255,.78); padding: 0 11px; color: var(--ink); font: inherit; font-size: 13px; outline: none; }
.verification-card input:focus { border-color: rgba(109,63,209,.46); box-shadow: 0 0 0 3px rgba(109,63,209,.1); }
.sales-risk-check { grid-column: 1 / -1; margin: 0; }
.verification-panel .auth-risk-status { grid-column: 1 / -1; }
.sales-attachment-zone { margin-top: 16px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 14px; border: 1px dashed rgba(109,63,209,.24); border-radius: 8px; background: linear-gradient(145deg, rgba(239,232,255,.42), rgba(255,255,255,.72)); }
.sales-attachment-zone strong, .sales-attachment-zone span { display: block; }
.sales-attachment-zone strong { color: var(--ink); font-size: 15px; line-height: 1.2; }
.sales-attachment-zone span { margin-top: 5px; color: #5d5047; font-size: 13px; line-height: 1.48; font-weight: 650; }
.attachment-button { border: 1px solid rgba(109,63,209,.17); background: rgba(255,255,255,.74); color: var(--purple); font-weight: 900; cursor: pointer; }
.attachment-list { grid-column: 1 / -1; display: grid; gap: 7px; }
.attachment-list span, .attachment-list button { min-height: 34px; display: flex; justify-content: space-between; gap: 10px; align-items: center; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(255,255,255,.72); padding: 8px 10px; color: #5d5047; font: inherit; font-size: 13px; font-weight: 760; text-align: left; }
.attachment-list em { color: var(--green); font-style: normal; font-size: 12px; font-weight: 900; white-space: nowrap; }
.sales-result-panel { position: sticky; top: 96px; padding: 18px; border: 1px solid rgba(109,63,209,.16); border-radius: 8px; background: radial-gradient(circle at 100% 0%, rgba(255,90,44,.12), transparent 32%), linear-gradient(180deg, rgba(255,255,255,.86), rgba(239,232,255,.68)); box-shadow: 0 22px 60px rgba(109,63,209,.12); }
.sales-result-head .eyebrow { margin: 0 0 7px; }
.sales-result-head h3 { margin: 0; max-width: 300px; color: var(--ink); font-size: 22px; line-height: 1.15; text-wrap: balance; }
.sales-flow-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; counter-reset: sales-flow; }
.sales-flow-list li { position: relative; min-height: 58px; display: grid; align-content: center; gap: 4px; padding: 11px 12px 11px 44px; border: 1px solid rgba(109,63,209,.12); border-radius: 8px; background: rgba(255,255,255,.66); }
.sales-flow-list li::before { counter-increment: sales-flow; content: counter(sales-flow); position: absolute; left: 12px; top: 13px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--purple); color: #fffaf4; font-size: 12px; font-weight: 900; }
.sales-flow-list strong { color: var(--ink); font-size: 14px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sales-flow-list span { color: #5d5047; font-size: 12.5px; line-height: 1.35; font-weight: 650; }
.reply-draft-card { margin-top: 14px; padding: 14px; border-radius: 8px; background: #211b16; color: #fffaf4; box-shadow: 0 16px 38px rgba(33,27,22,.16); }
.reply-draft-card span { display: block; color: rgba(255,250,244,.72); font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.reply-draft-card p { margin: 8px 0 0; color: rgba(255,250,244,.88); font-size: 13px; line-height: 1.52; }
.sales-admin-links { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.sales-admin-links a { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(109,63,209,.1); color: var(--purple); padding: 0 10px; font-size: 13px; font-weight: 900; transition: background .18s ease, transform .18s ease; }
.sales-admin-links a:hover { background: rgba(109,63,209,.16); transform: translateY(-1px); }
.auth-main { width: min(1180px, calc(100% - 40px)); padding: 54px 0 92px; }
.auth-landing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); gap: 34px; align-items: start; }
.signup-landing { grid-template-columns: minmax(0, .98fr) minmax(360px, 430px); }
.auth-copy { padding-top: 18px; }
.auth-copy h1 { max-width: 600px; font-size: 40px; line-height: 1.06; margin-bottom: 16px; text-wrap: balance; }
.auth-copy .lead { max-width: 590px; color: #5d5047; font-size: 17px; line-height: 1.62; }
.auth-shell { display: grid; grid-template-columns: minmax(0, .86fr) minmax(340px, 430px); gap: 24px; align-items: start; margin-top: 28px; }
.auth-context { padding: 10px 0 0; }
.auth-context h2 { max-width: 620px; }
.auth-note-list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 590px; }
.auth-note-list li { position: relative; padding: 12px 14px 12px 38px; border: 1px solid rgba(109,63,209,.12); border-radius: 8px; background: rgba(255,255,255,.52); color: #554940; font-size: 14px; line-height: 1.48; }
.auth-note-list li::before { content: ""; position: absolute; left: 16px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(255,90,44,.12); }
.auth-card { padding: 20px; border: 1px solid rgba(109,63,209,.18); border-radius: 8px; background: rgba(255,255,255,.82); box-shadow: 0 24px 64px rgba(109,63,209,.13); }
.auth-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.auth-card-head .eyebrow { margin: 0 0 7px; }
.auth-card-head h2 { margin: 0; font-size: 27px; line-height: 1.08; }
.service-intent { margin: -4px 0 16px; display: grid; gap: 5px; border: 1px solid rgba(109,63,209,.16); border-radius: 8px; padding: 12px 13px; background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(248,242,255,.72)); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); }
.service-intent span { color: var(--purple); font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.service-intent strong { color: var(--ink); font-size: 16px; line-height: 1.2; font-weight: 880; }
.service-intent p { margin: 0; color: #5d5047; font-size: 13px; line-height: 1.48; font-weight: 650; }
.auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; padding: 4px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(247,248,241,.78); }
.auth-tabs button { min-height: 38px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; }
.auth-tabs button.is-active { background: var(--purple); color: #fffaf4; box-shadow: 0 10px 22px rgba(109,63,209,.18); }
.auth-tabs button:active, .auth-code-button:active, .auth-sso button:active { transform: translateY(1px); }
.auth-pane { margin-top: 16px; }
.auth-pane[hidden] { display: none; }
.auth-row { margin: 13px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-check { display: inline-flex; align-items: center; gap: 8px; color: #66594f; font-size: 13px; font-weight: 760; }
.auth-check input { width: 15px; height: 15px; accent-color: var(--purple); }
.auth-pane > .auth-check { margin: 12px 0 16px; align-items: flex-start; line-height: 1.42; }
.auth-text-link { border: 0; padding: 0; background: transparent; color: var(--purple); font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; text-decoration: none; }
.auth-text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-submit { width: 100%; }
.auth-status, .auth-code-status, .auth-recovery-status { margin-top: 12px; max-width: none; }
.auth-code-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.auth-code-button { min-height: 42px; border: 1px solid rgba(109,63,209,.16); border-radius: 8px; background: rgba(239,232,255,.72); color: var(--purple); padding: 0 12px; font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; white-space: nowrap; }
.auth-code-button:hover { border-color: rgba(109,63,209,.34); background: rgba(239,232,255,.94); }
.auth-code-button.is-verified { border-color: rgba(38,114,78,.28); background: var(--green); color: #fffaf4; }
.auth-risk { margin: 14px 0 12px; padding: 13px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid rgba(38,114,78,.18); border-radius: 8px; background: rgba(238,250,240,.72); }
.auth-risk strong, .auth-risk span { display: block; }
.auth-risk strong { color: var(--green); font-size: 14px; line-height: 1.2; }
.auth-risk span { margin-top: 4px; color: #5d5047; font-size: 12px; line-height: 1.4; font-weight: 650; }
.auth-risk-button { min-height: 36px; border: 1px solid rgba(38,114,78,.24); border-radius: 8px; background: rgba(255,255,255,.78); color: var(--green); padding: 0 12px; font: inherit; font-size: 13px; font-weight: 850; cursor: pointer; white-space: nowrap; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.auth-risk-button:hover { border-color: rgba(38,114,78,.42); background: rgba(255,255,255,.96); transform: translateY(-1px); }
.auth-risk-button.is-verified { border-color: rgba(38,114,78,.28); background: var(--green); color: #fffaf4; }
.checkout-main { width: min(1180px, calc(100% - 40px)); padding: 56px 0 90px; }
.checkout-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); gap: 34px; align-items: start; }
.checkout-copy h1 { max-width: 620px; }
.checkout-timeline { display: grid; gap: 10px; margin-top: 28px; max-width: 640px; }
.checkout-timeline article { position: relative; display: grid; gap: 4px; border: 1px solid rgba(109,63,209,.12); border-radius: 8px; padding: 13px 14px 13px 42px; background: rgba(255,255,255,.58); }
.checkout-timeline article::before { content: ""; position: absolute; left: 15px; top: 17px; width: 12px; height: 12px; border-radius: 999px; background: rgba(33,27,22,.18); box-shadow: 0 0 0 5px rgba(33,27,22,.045); }
.checkout-timeline article.is-active { border-color: rgba(38,114,78,.22); background: rgba(238,250,240,.72); }
.checkout-timeline article.is-active::before { background: var(--green); box-shadow: 0 0 0 5px rgba(38,114,78,.12); }
.checkout-timeline strong { color: var(--ink); font-size: 15px; line-height: 1.2; }
.checkout-timeline span { color: #5d5047; font-size: 13px; line-height: 1.45; font-weight: 650; }
.checkout-card { border: 1px solid rgba(109,63,209,.18); border-radius: 8px; padding: 20px; background: rgba(255,255,255,.84); box-shadow: 0 24px 64px rgba(109,63,209,.13); }
.checkout-service-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; }
.checkout-service-head .eyebrow { margin: 0 0 7px; }
.checkout-service-head h2 { margin: 0; font-size: 24px; line-height: 1.1; text-wrap: balance; }
.checkout-price { display: inline-flex; align-items: baseline; gap: 2px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout-price strong { font-size: 30px; line-height: 1; font-weight: 900; }
.checkout-price em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 850; }
.checkout-service-copy { margin: 14px 0 0; color: #5d5047; font-size: 14px; line-height: 1.58; }
.checkout-cycle, .checkout-methods { display: grid; gap: 8px; margin-top: 16px; }
.checkout-cycle { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 4px; border: 1px solid rgba(33,27,22,.08); border-radius: 8px; background: rgba(247,248,241,.78); }
.checkout-cycle button, .checkout-methods button { border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.checkout-cycle button { min-height: 38px; font-size: 13px; font-weight: 900; }
.checkout-cycle button.is-active { background: var(--purple); color: #fffaf4; box-shadow: 0 10px 22px rgba(109,63,209,.18); }
.checkout-methods { grid-template-columns: repeat(3, minmax(0,1fr)); }
.checkout-methods button { min-height: 78px; display: grid; align-content: center; gap: 5px; border: 1px solid rgba(33,27,22,.08); padding: 10px; background: rgba(255,255,255,.62); text-align: left; }
.checkout-methods button.is-selected { border-color: rgba(109,63,209,.32); background: rgba(239,232,255,.72); color: var(--purple); }


/* Recovery tail: restored after shell redirection incident. */
.brand-link::before { content: ""; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 999px; background: url("../assets/avatars/bird-logo.svg") center / contain no-repeat; box-shadow: 0 0 0 1px rgba(33,27,22,.08), 0 8px 18px rgba(33,27,22,.08); }
.site-footer-nav { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(239,232,255,.4)); }
.site-footer-inner { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 42px; display: grid; gap: 22px; }
.footer-main { display: grid; grid-template-columns: minmax(220px,1.4fr) repeat(3,minmax(130px,.75fr)) minmax(220px,1fr); gap: 22px; align-items: start; }
.footer-brand-name { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 900; }
.footer-brand-name::before { content: ""; width: 30px; height: 30px; border-radius: 999px; background: url("../assets/avatars/bird-logo.svg") center / contain no-repeat; }
.footer-brand p, .footer-subscribe p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; }
.footer-social, .footer-column, .footer-subscribe, .footer-legal, .footer-legal nav { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-column, .footer-subscribe { min-width: 0; flex-direction: column; }
.footer-column strong, .footer-subscribe strong { font-size: 13px; color: var(--ink); }
.footer-column a, .footer-social a, .footer-legal a { color: var(--muted); font-size: 13px; font-weight: 760; }
.footer-subscribe form { width: 100%; min-width: 0; max-width: 100%; display: grid; grid-template-columns: minmax(0,1fr) max-content; gap: 8px; }
.footer-subscribe input { width: 100%; min-width: 0; height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 11px; background: rgba(255,255,255,.75); font: inherit; }
.footer-subscribe button { min-height: 38px; border: 0; border-radius: 8px; padding: 0 12px; background: var(--accent); color: #fffaf4; font: inherit; font-weight: 850; white-space: nowrap; }
.footer-legal { justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; color: var(--muted); font-size: 13px; }
.page-mini-legal { width: min(1180px, calc(100% - 40px)); margin: -62px auto 24px; text-align: center; }
.page-mini-legal a { color: rgba(33,27,22,.48); font-size: 11px; font-weight: 680; text-decoration: none; transition: color .18s ease; }
.page-mini-legal a:hover { color: var(--purple); }
.ops-summary-grid, .ops-insight-grid, .ops-commandbar, .ops-event-layout, .ops-service-grid, .status-strip, .permission-ladder { display: grid; gap: 14px; }
.ops-summary-grid, .status-strip { grid-template-columns: repeat(4,minmax(0,1fr)); }
.ops-insight-grid, .ops-event-layout, .ops-commandbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ops-service-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.ops-source-list, .admin-ai-sources, .admin-ai-prompts { display: flex; flex-wrap: wrap; gap: 7px; }
.ops-source-list span, .admin-ai-sources span { min-height: 26px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: rgba(109,63,209,.1); color: var(--purple); font-size: 11px; font-weight: 900; }
.admin-ai-assist { position: fixed; right: 20px; bottom: 18px; z-index: 30; width: min(360px, calc(100vw - 40px)); border: 1px solid rgba(109,63,209,.18); border-radius: 8px; background: rgba(255,255,255,.94); box-shadow: 0 26px 80px rgba(33,27,22,.18); backdrop-filter: blur(14px); transform: translateY(calc(100% - 58px)); transition: transform .22s ease; overflow: hidden; }
.admin-ai-assist.is-open { transform: translateY(0); }
.admin-ai-head { min-height: 58px; padding: 12px 14px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1px solid rgba(234,223,211,.82); background: linear-gradient(135deg, rgba(239,232,255,.72), rgba(255,250,244,.94)); }
.admin-ai-head::before { content: ""; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 999px; background: url("../assets/avatars/bird-logo-mono.svg") center / 26px 26px no-repeat, rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(33,27,22,.08); }
.admin-ai-head span, .admin-ai-head strong { display: block; }
.admin-ai-head span { color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.admin-ai-head strong { margin-top: 4px; color: var(--ink); font-size: 15px; line-height: 1.25; }
.admin-ai-head button { width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid rgba(109,63,209,.14); border-radius: 8px; background: rgba(255,255,255,.76); color: var(--purple); font: inherit; font-size: 17px; line-height: 1; font-weight: 900; cursor: pointer; }
.admin-ai-body { margin: 0; max-width: none; padding: 14px 14px 0; color: #4f433b; font-size: 13px; line-height: 1.58; }
.admin-ai-sources, .admin-ai-prompts { padding: 12px 14px 0; }
.admin-ai-prompts button { min-height: 32px; border: 1px solid rgba(109,63,209,.16); border-radius: 8px; background: rgba(239,232,255,.5); color: var(--purple); padding: 0 10px; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.admin-ai-assist textarea { width: calc(100% - 28px); margin: 12px 14px 14px; resize: vertical; border: 1px solid rgba(109,63,209,.16); border-radius: 8px; background: rgba(255,250,244,.82); padding: 10px; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.45; outline: none; }
.admin-ai-assist textarea:focus { border-color: rgba(109,63,209,.46); box-shadow: 0 0 0 3px rgba(109,63,209,.1); }
@media (max-width: 1040px) { .site-header { padding: 14px 24px; flex-wrap: wrap; align-items: flex-start; } .site-nav { order: 3; flex: 1 1 100%; margin-left: 0; overflow-x: auto; padding-bottom: 2px; } .site-actions { margin-left: auto; } .pricing-hero, .section-heading-row, .auth-shell, .auth-landing, .checkout-shell, .sales-request-layout, .product-explainer, .product-explainer.reverse { grid-template-columns: 1fr; align-items: start; } .sales-result-panel { position: static; } .plan-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .billing-preview { grid-template-columns: 190px minmax(0,1fr); } .console-status-rail { grid-template-columns: repeat(2, minmax(0,1fr)); } .footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 1040px) { .shenzhi-sales-panel { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 860px) { .grid, .grid.two, .grid.four, .split, .field-grid, .verification-panel, .status-strip, .ops-commandbar, .ops-insight-grid, .ops-event-layout, .ops-service-grid, .permission-ladder, .flow-diagram, .permission-chain, .story-grid, .route-card, .governance-board, .resource-board { grid-template-columns: 1fr; } .cta-panel { align-items: flex-start; flex-direction: column; } .billing-preview { grid-template-columns: 1fr; } .sales-attachment-zone { grid-template-columns: 1fr; } .attachment-button { width: 100%; } .console-subgrid, .console-service-grid { grid-template-columns: 1fr; } .console-order-row { grid-template-columns: 1fr; align-items: start; } .console-order-row b { text-align: left; } .compare-strip { grid-template-columns: 1fr; } .compare-strip > span { transform: rotate(90deg); min-height: 32px; } .admin-ai-assist { right: 12px; bottom: 12px; width: min(360px, calc(100vw - 24px)); } }
@media (max-width: 720px) { .site-header { min-height: 70px; padding: 14px 16px; gap: 12px; } .brand-link::before { width: 29px; height: 29px; } .page-language-switch { order: 2; margin-left: auto; } .site-nav { gap: 6px; font-size: 14px; } .site-nav a, .ghost-link { padding: 0 9px; } .site-actions { gap: 6px; font-size: 13px; } .site-actions .ghost-link:first-child { display: none; } main, main.auth-main, .checkout-main { width: min(100%, calc(100% - 28px)); padding: 44px 0 74px; } h1 { font-size: 30px; line-height: 1.1; } .section h2, .explainer-copy h2 { font-size: 24px; line-height: 1.18; } p, .lead { font-size: 16px; line-height: 1.62; } .pricing-control-panel, .auth-card, .checkout-card, .sales-result-panel, .explainer-copy { padding: 14px; } .mini-window { min-height: 0; } .system-row { grid-template-columns: 36px minmax(0,1fr); } .system-row em { grid-column: 2; width: fit-content; } .tier-selector, .auth-code-row, .auth-risk, .auth-sso, .checkout-methods, .sales-admin-links { grid-template-columns: 1fr; } .plan-grid, .console-strip, .console-status-rail, .footer-main, .footer-subscribe form { grid-template-columns: 1fr; } .footer-subscribe button { width: 100%; } .footer-legal { align-items: flex-start; flex-direction: column; } .admin-ai-assist { width: calc(100vw - 16px); right: 8px; bottom: 8px; } }
@media (max-width: 720px) { .shenzhi-sales-panel { padding: 16px; } .shenzhi-sales-panel p:not(.eyebrow) { font-size: 15px; } .shenzhi-sales-questions span { font-size: 13.5px; } }