@import url("./tokens.css");

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.6; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration: none; }
button, select, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #8db4ff; outline-offset: 3px; }
.shell { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.topbar { background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
.topbar-main { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: .08em; font-size: 17px; white-space: nowrap; }
.brand-mark { align-items: center; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); border-radius: 10px; color: white; display: inline-flex; font-size: 11px; height: 31px; justify-content: center; letter-spacing: 0; width: 31px; }
.brand small { color: var(--muted); display: block; font-size: 10px; letter-spacing: .14em; line-height: 1; margin-top: 3px; }
.view-tabs { display: flex; background: var(--blue-pale); border-radius: 999px; gap: 2px; padding: 4px; }
.view-tabs a { border-radius: 999px; color: #506784; font-size: 12px; font-weight: 700; padding: 6px 12px; }
.view-tabs a.active { background: var(--surface); box-shadow: 0 2px 5px rgba(16,42,76,.1); color: var(--blue-deep); }
.journey { border-top: 1px solid var(--line); overflow-x: auto; }
.journey-inner { display: flex; min-width: 670px; padding: 9px 0; }
.journey a { align-items: center; color: var(--muted); display: flex; flex: 1; font-size: 11px; gap: 7px; white-space: nowrap; }
.journey a:not(:last-child)::after { background: var(--line); content: ""; height: 1px; margin-left: 3px; min-width: 16px; width: 100%; }
.journey .step { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 50%; display: inline-flex; font-size: 9px; font-weight: 800; height: 21px; justify-content: center; width: 21px; }
.journey a.active { color: var(--blue-deep); font-weight: 800; }
.journey a.active .step { background: var(--blue); border-color: var(--blue); color: white; }
.journey a.done .step { background: var(--success); border-color: var(--success); color: white; }
.case-context { background: #102a4c; color: #fff; }
.case-context-inner { align-items: center; display: grid; gap: 0; grid-template-columns: 1.2fr 1fr 1fr 1fr; min-height: 54px; }
.case-cell { border-left: 1px solid rgba(255,255,255,.18); padding: 8px 15px; }
.case-cell:first-child { border-left: 0; padding-left: 0; }
.case-cell small { color: #bcd0ed; display: block; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.case-cell strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { padding: 48px 0 88px; }
.eyebrow { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .15em; margin: 0 0 10px; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(30px, 4.2vw, 52px); letter-spacing: -.04em; line-height: 1.17; margin-bottom: 16px; }
h2 { font-size: clamp(22px, 3vw, 31px); letter-spacing: -.03em; line-height: 1.3; }
h3 { font-size: 17px; line-height: 1.4; }
.lead { color: var(--muted); font-size: 17px; max-width: 720px; }
.page-intent { align-items: flex-start; background: #edf4ff; border: 1px solid #c8d9f5; border-radius: 12px; display: flex; gap: 11px; margin: 18px 0 28px; max-width: 850px; padding: 13px 15px; }
.page-intent b { align-items: center; background: var(--blue); border-radius: 50%; color: white; display: inline-flex; flex: 0 0 auto; font-size: 10px; height: 23px; justify-content: center; margin-top: 1px; width: 23px; }
.page-intent p { color: #24436c; font-size: 13px; margin: 0; }
.section-head { align-items: end; display: flex; justify-content: space-between; gap: 16px; margin-bottom: 21px; }
.section-head p { color: var(--muted); font-size: 14px; margin-bottom: 0; }
.hero { background: radial-gradient(circle at 82% 20%, rgba(80,138,255,.34), transparent 24%), linear-gradient(135deg, #102a4c, #173f8a); border-radius: 28px; color: white; overflow: hidden; padding: clamp(30px,6vw,72px); position: relative; }
.hero::after { border: 1px solid rgba(255,255,255,.24); border-radius: 50%; content: ""; height: 380px; position: absolute; right: -130px; top: -150px; width: 380px; }
.hero .eyebrow, .hero .lead { color: #dce9ff; position: relative; z-index: 1; }
.hero h1 { max-width: 720px; position: relative; z-index: 1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; position: relative; z-index: 1; }
.btn { align-items: center; border: 1px solid transparent; border-radius: 9px; display: inline-flex; font-size: 14px; font-weight: 800; gap: 8px; justify-content: center; min-height: 43px; padding: 9px 15px; transition: .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #124ebf; }
.btn-light { background: #fff; color: var(--blue-deep); }
.btn-outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-success { background: var(--success); color: #fff; }
.btn-sm { font-size: 12px; min-height: 34px; padding: 6px 10px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 23px; }
.card.tight { padding: 17px; }
.card.link-card { transition: .18s ease; }
.card.link-card:hover { border-color: #9bbcff; box-shadow: var(--shadow); transform: translateY(-2px); }
.card-kicker { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.icon { align-items: center; background: var(--blue-pale); border-radius: 10px; color: var(--blue); display: inline-flex; font-weight: 800; height: 40px; justify-content: center; width: 40px; }
.icon.dark { background: #173f8a; color: #fff; }
.tag { background: var(--blue-pale); border-radius: 999px; color: var(--blue-deep); display: inline-flex; font-size: 11px; font-weight: 800; padding: 3px 8px; }
.tag.success { background: #d9f2e6; color: #075f38; }
.tag.warning { background: #fff0d4; color: #854a00; }
.tag.dark { background: #e8edf5; color: #334b6b; }
.metric { font-size: 29px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; margin: 12px 0 6px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hub-flow { align-items: center; display: flex; gap: 0; margin: 34px 0; overflow-x: auto; padding: 10px 0; }
.hub-node { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 142px; padding: 16px; }
.hub-node strong { display: block; margin-top: 5px; }
.hub-node.central { background: linear-gradient(140deg,#173f8a,#2563d9); color: #fff; min-width: 190px; }
.hub-link { background: #99baff; height: 2px; min-width: 42px; position: relative; }
.hub-link::after { border-bottom: 5px solid transparent; border-left: 7px solid #2563d9; border-top: 5px solid transparent; content: ""; position: absolute; right: 0; top: -4px; }
.relationship-map { display: grid; gap: 10px; grid-template-columns: 1fr 46px 1.15fr 46px 1.15fr; margin: 26px 0; }
.relationship-arrow { align-items: center; color: var(--blue); display: flex; font-size: 20px; justify-content: center; }
.actor-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.actor-panel.platform { background: linear-gradient(145deg,#102a4c,#173f8a); color: white; }
.actor-panel.platform .muted { color: #c8d9f5; }
.actor-line { align-items: start; border-top: 1px solid var(--line); display: flex; gap: 10px; padding: 10px 0; }
.actor-line:first-of-type { border-top: 0; }
.actor-line .role-dot { background: var(--blue); border-radius: 50%; flex: 0 0 auto; height: 8px; margin-top: 7px; width: 8px; }
.actor-line small { color: var(--muted); display: block; }
.platform .actor-line { border-color: rgba(255,255,255,.18); }.platform .actor-line small { color:#c8d9f5; }
.rights-bundle { display: grid; gap: 10px; grid-template-columns: repeat(3,1fr); }
.right-card { background: #f7faff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.right-card strong { display:block; font-size:13px; }.right-card small { color:var(--muted); }
.filter-bar { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; gap: 10px; padding: 13px; }
.searchbox { border: 0; color: var(--ink); flex: 1; min-width: 120px; outline: 0; padding: 8px; }
.filter { border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 8px; }
.profile-art { align-items: end; background: linear-gradient(150deg,#dce9ff,#91baff); border-radius: 14px; display: flex; height: 156px; justify-content: center; overflow: hidden; position: relative; }
.profile-art::after { background: rgba(16,42,76,.16); border-radius: 50%; bottom: -26px; content: ""; height: 90px; position: absolute; width: 150px; }
.profile-art svg { height: 136px; position: relative; width: 118px; z-index: 1; }
.catalog-card { display: grid; grid-template-columns: 130px 1fr; gap: 17px; }
.catalog-card .profile-art { height: 130px; }
.catalog-card .profile-art svg { height: 116px; }
.clearance-row { display:flex; flex-wrap:wrap; gap:7px; margin:11px 0; }
.clearance-chip { background:#e9f6ef; border:1px solid #b9dfca; border-radius:999px; color:#075f38; font-size:10px; font-weight:800; padding:3px 8px; }
.clearance-chip.review { background:#fff4df; border-color:#edcf91; color:#744300; }
.price { color: var(--blue-deep); font-size: 20px; font-weight: 800; }
.app-layout { align-items: start; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(310px,.85fr); gap: 22px; }
.form-section { border-top: 1px solid var(--line); padding: 20px 0; }
.form-section:first-child { border-top: 0; padding-top: 0; }
.form-label { display: block; font-size: 14px; font-weight: 800; margin-bottom: 9px; }
.form-help { color: var(--muted); font-size: 11px; margin: 6px 0 0; }
.text-field, .text-area { background:#fff; border:1px solid var(--line); border-radius:9px; color:var(--ink); padding:10px 11px; width:100%; }
.text-area { min-height: 104px; resize: vertical; }
.motivation-field { background:#f9fbff; border:1px solid #a9c5f7; border-left:5px solid var(--blue); border-radius:12px; padding:17px; }
.motivation-field .text-area { font-family:var(--serif); font-size:16px; line-height:1.9; }
.form-number { align-items:center; background:var(--blue-pale); border-radius:7px; color:var(--blue-deep); display:inline-flex; font-size:10px; font-weight:800; height:24px; justify-content:center; margin-right:7px; width:24px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.choice { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; color: var(--ink); min-height: 44px; padding: 9px 11px; text-align: left; }
.choice.selected { background: #edf4ff; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37,99,217,.12); color: var(--blue-deep); font-weight: 800; }
.sticky { position: sticky; top: 160px; }
.estimate { background: linear-gradient(150deg,#102a4c,#173f8a); color: white; }
.estimate .muted { color: #c8d9f5; }
.estimate .readiness .muted { color: var(--muted); }
.estimate-line { align-items: center; border-top: 1px solid rgba(255,255,255,.2); display: flex; justify-content: space-between; padding: 10px 0; }
.estimate-total { font-size: 35px; font-weight: 800; letter-spacing: -.05em; }
.readiness { background:#fff; border:1px solid rgba(255,255,255,.25); border-radius:10px; color:var(--ink); margin-bottom:17px; padding:12px; }
.readiness-head { align-items:center; display:flex; justify-content:space-between; }
.readiness-track { background:#dce5f3; border-radius:99px; height:7px; margin-top:8px; overflow:hidden; }.readiness-track span { background:var(--success); display:block; height:100%; width:86%; }
.notice { background: #eff5ff; border-left: 4px solid var(--blue); border-radius: 0 9px 9px 0; color: #24436c; font-size: 13px; padding: 12px 14px; }
.stepper { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 26px; }
.stepper-item { align-items: center; color: var(--muted); display: flex; font-size: 12px; gap: 8px; }
.stepper-item b { align-items: center; background: #e8edf5; border-radius: 50%; display: inline-flex; height: 28px; justify-content: center; width: 28px; }
.stepper-item.active, .stepper-item.done { color: var(--blue-deep); font-weight: 800; }
.stepper-item.active b { background: var(--blue); color: #fff; }
.stepper-item.done b { background: var(--success); color: #fff; }
.flow-stage { min-height: 330px; }
.progress-track { background: #e7edf7; border-radius: 99px; height: 10px; overflow: hidden; }
.progress-bar { background: linear-gradient(90deg,var(--blue),#75a5ff); border-radius: 99px; height: 100%; transition: width .4s ease; width: 0; }
.check-list { display: grid; gap: 9px; margin: 18px 0; }
.check-item { align-items: center; background: #f7faff; border: 1px solid var(--line); border-radius: 10px; display: flex; gap: 11px; padding: 12px; }
.check { align-items: center; background: #e5ebf4; border-radius: 50%; color: transparent; display: inline-flex; flex: 0 0 auto; font-size: 12px; height: 21px; justify-content: center; width: 21px; }
.check.done { background: var(--success); color: #fff; }
.success-panel { background: #eaf8f0; border: 1px solid #bee3cb; border-radius: var(--radius); color: #075f38; padding: 21px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; font-size: 13px; min-width: 610px; width: 100%; }
th { background: #f3f6fb; color: #546a88; font-size: 11px; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 11px; }
td strong { color: var(--ink); }
.split-bar { border-radius: 99px; display: flex; height: 12px; overflow: hidden; }
.split-bar span:nth-child(1) { background:#173f8a; width:40%; }.split-bar span:nth-child(2) { background:#4b84eb; width:40%; }.split-bar span:nth-child(3) { background:#5ab688; width:20%; }
.rule { align-items: center; display: flex; justify-content: space-between; padding: 13px 0; }
.rule + .rule { border-top: 1px solid var(--line); }
.rule small { color: var(--muted); }
.authority-grid { display:grid; gap:12px; grid-template-columns:repeat(3,1fr); }
.authority-card { border:1px solid var(--line); border-radius:12px; padding:15px; position:relative; }
.authority-card .status-dot { background:var(--success); border:3px solid #dff4e8; border-radius:50%; height:13px; position:absolute; right:13px; top:13px; width:13px; }
.authority-card strong { display:block; padding-right:18px; }.authority-card small { color:var(--muted); display:block; margin-top:4px; }
.decision-table { display:grid; gap:0; }
.decision-row { align-items:center; border-top:1px solid var(--line); display:grid; gap:12px; grid-template-columns:1.1fr 1fr auto; padding:12px 0; }.decision-row:first-child { border-top:0; }
.due { color:#854a00; font-size:11px; font-weight:800; }
.allocation { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; }
.allocation + .allocation { border-top: 1px solid var(--line); }
.timeline { border-left: 2px solid var(--line); margin: 10px 0 0 9px; padding-left: 25px; }
.timeline-item { padding-bottom: 25px; position: relative; }
.timeline-item::before { background: var(--blue); border: 3px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--blue); content: ""; height: 9px; left: -31px; position: absolute; top: 7px; width: 9px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item time { color: var(--muted); display: block; font-size: 11px; }
.chart-card { min-height: 300px; }
.chart { height: 215px; margin-top: 20px; width: 100%; }
.chart path.area { fill: url(#fillBlue); }.chart path.line { fill:none; stroke:#2563d9; stroke-width:4; }.chart line { stroke:#d5e0f0; }.chart text { fill:#5d7190; font-size:10px; }
.activity { align-items: start; display: flex; gap: 11px; padding: 11px 0; }.activity + .activity { border-top: 1px solid var(--line); }
.activity-dot { background: var(--blue); border-radius: 50%; height: 8px; margin-top: 7px; width: 8px; }
.ledger-id { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.demo-badge { background: #102a4c; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; bottom: 20px; box-shadow: 0 8px 23px rgba(16,42,76,.25); color: white; font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 8px 12px; pointer-events: none; position: fixed; right: 20px; z-index: 25; }
.site-footer { background: #edf2f8; border-top: 1px solid var(--line); color: #526783; font-size: 12px; padding: 25px 0 42px; }
.footer-inner { display: flex; gap: 20px; justify-content: space-between; }
.toast { background: #102a4c; border-radius: 10px; bottom: 70px; color: white; opacity: 0; padding: 12px 15px; pointer-events: none; position: fixed; right: 20px; transform: translateY(10px); transition: .2s; z-index: 30; }.toast.show { opacity:1; transform:translateY(0); }
.hide { display: none !important; }
@media (max-width: 780px) {
  .shell { padding: 0 17px; }.topbar-main { align-items:flex-start; flex-direction:column; gap:9px; padding:13px 0; }.view-tabs { width:100%; }.view-tabs a { flex:1; text-align:center; }.journey { margin: 0; }.journey-inner { padding-left:17px; padding-right:17px; }.case-context { overflow-x:auto; }.case-context-inner { min-width:680px; padding-left:17px; padding-right:17px; }.hero { border-radius:20px; }.grid-2,.grid-3,.grid-4,.app-layout,.relationship-map,.authority-grid { grid-template-columns:1fr; }.relationship-arrow { min-height:28px; transform:rotate(90deg); }.rights-bundle { grid-template-columns:1fr; }.catalog-card { grid-template-columns:1fr; }.catalog-card .profile-art { height:180px; }.catalog-card .profile-art svg { height:164px; }.field-grid { grid-template-columns:1fr; }.sticky { position:static; }.stepper { grid-template-columns:1fr; }.hub-flow { align-items:stretch; flex-direction:column; }.hub-link { height:28px; margin-left:35px; min-height:28px; min-width:2px; width:2px; }.hub-link::after { border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid #2563d9; bottom:0; left:-4px; right:auto; top:auto; }.decision-row { grid-template-columns:1fr; gap:3px; }.footer-inner { flex-direction:column; }.filter-bar { flex-wrap:wrap; }.filter { flex:1; }.demo-badge { border-radius:0; box-shadow:none; position:static; text-align:center; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }