/* ============================================================
   Avanta Risk — subpage components (loaded on inner pages)
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.crumb { display: flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--on-ink-mute); text-transform: uppercase; }
.crumb a { color: var(--on-ink-soft); }
.crumb a:hover { color: #fff; }
.crumb span { color: var(--on-ink-soft); }

/* ---------- Page hero ---------- */
.phero { position: relative; overflow: hidden; }
.phero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 88% -10%, rgba(44,102,224,0.16), transparent 55%),
    radial-gradient(80% 70% at -5% 110%, rgba(28,122,82,0.09), transparent 60%);
}
.phero__in { position: relative; padding-block: clamp(44px, 6vw, 84px); }
.phero .eyebrow { margin-top: 22px; }
.phero h1 { font-family: 'Spectral', serif; font-weight: 400; font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.04; letter-spacing: -0.02em; margin: 18px 0 0; max-width: 18ch; text-wrap: balance; color: #fff; }
.phero__lede { margin-top: 20px; max-width: 60ch; }
.phero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

/* hero with side panel */
.phero__grid { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: clamp(40px, 6vw, 80px); }
.phero__grid h1 { max-width: 15ch; }

/* ---------- Compact data card (dark) ---------- */
.dcard { background: radial-gradient(120% 90% at 80% -10%, rgba(44,102,224,0.14), transparent 60%), var(--ink-1); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.dcard__bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-ink-soft); background: rgba(255,255,255,0.02); }
.dcard__bar b { font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem; color: #fff; font-weight: 500; }
.dcard__bar .tag { margin-left: auto; }
.dcard__rows { padding: 6px 18px 12px; }
.dcard__rows .rrow { color: #EAF0F7; }

/* ---------- Numbered connected grid ---------- */
.connect { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 48px; }
.cnode { background: var(--paper-2); padding: 22px 20px; }
.cnode__n { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--accent); font-weight: 500; }
.cnode h4 { font-size: 0.98rem; font-weight: 600; margin: 12px 0 6px; letter-spacing: -0.01em; }
.cnode p { font-size: 0.84rem; color: var(--text-soft); line-height: 1.5; }

/* ---------- Checklist (outputs) ---------- */
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 40px; margin-top: 30px; }
.checklist li { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--text); }
.checklist svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--clear); }
.checklist--dark li { border-color: var(--line-ink-soft); color: var(--on-ink-soft); }
.checklist--dark svg { color: var(--clear-d); }

/* ---------- Split feature (two columns of prose cards) ---------- */
.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.scard { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.scard h3 { font-family: 'Spectral', serif; font-size: 1.22rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 9px; }
.scard p { font-size: 0.92rem; color: var(--text-soft); line-height: 1.55; }
.scard--dark { background: var(--ink-1); border-color: var(--line-ink); }
.scard--dark h3 { color: #fff; }
.scard--dark p { color: var(--on-ink-soft); }

/* two-up generic */
.twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 48px; }

/* ---------- Stat band ---------- */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 6px; }
.sb { border-top: 2px solid currentColor; padding-top: 18px; }
.sb b { font-family: 'Spectral', serif; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 400; line-height: 1; letter-spacing: -0.02em; display: block; }
.sb span { font-size: 0.86rem; color: var(--text-soft); margin-top: 11px; display: block; max-width: 22ch; line-height: 1.4; }
.ink-bg .sb span { color: var(--on-ink-soft); }
.ink-bg .sb b { color: #fff; }
.sb.is-high { color: var(--high); }
.sb.is-elevated { color: var(--elevated); }
.sb.is-clear { color: var(--clear); }
.ink-bg .sb.is-high { color: var(--high-d); }
.ink-bg .sb.is-elevated { color: var(--elevated-d); }
.ink-bg .sb.is-clear { color: var(--clear-d); }
.sb.is-special { color: var(--special); }
.ink-bg .sb.is-special { color: var(--special-d); }
.sb.is-neutral { color: var(--ink); }
.ink-bg .sb.is-neutral { color: var(--on-ink); }

/* ---------- Comparison table ---------- */
.cmp { margin-top: 48px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-card); }
.cmp__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; }
.cmp__row + .cmp__row { border-top: 1px solid var(--line); }
.cmp__row > div { padding: 18px 22px; }
.cmp__row > div + div { border-left: 1px solid var(--line); }
.cmp__head { background: var(--paper-2); }
.cmp__head > div { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); }
.cmp__head .cmp__b { color: var(--accent); }
.cmp__k { font-weight: 600; font-size: 0.95rem; }
.cmp__row .cmp__v { font-size: 0.9rem; color: var(--text-soft); display: flex; align-items: flex-start; gap: 8px; }
.cmp__v svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.cmp__v .yes { color: var(--clear); }
.cmp__v .no { color: var(--text-mute); }
.cmp__v .star { color: var(--accent); }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 5vw, 64px); align-items: start; }
.cinfo__list { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.cinfo__row { display: flex; gap: 14px; align-items: flex-start; }
.cinfo__ico { width: 40px; height: 40px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.cinfo__ico svg { width: 18px; height: 18px; }
.cinfo__row b { display: block; font-weight: 600; font-size: 0.95rem; }
.cinfo__row span { color: var(--text-soft); font-size: 0.9rem; }
.cinfo__row a { color: var(--accent); }

.cform { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 40px); box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-mute); margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; font-family: inherit; font-size: 0.95rem; color: var(--text); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.field textarea { resize: vertical; min-height: 110px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform .btn { width: 100%; justify-content: center; margin-top: 6px; }
.cform__note { font-size: 0.78rem; color: var(--text-mute); margin-top: 14px; text-align: center; }

/* ---------- Values (about) ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.vcard { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
.vcard__ico { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--accent); display: grid; place-items: center; margin-bottom: 18px; }
.vcard__ico svg { width: 20px; height: 20px; }
.vcard h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: 9px; }
.vcard p { font-size: 0.9rem; color: var(--text-soft); line-height: 1.55; }

/* prose */
.prose { max-width: 64ch; }
.prose p { color: var(--text-soft); font-size: 1.05rem; line-height: 1.65; margin-top: 18px; }
.prose p:first-child { margin-top: 0; }
.ink-bg .prose p { color: var(--on-ink-soft); }

/* ============================================================
   PLATFORM HERO — portal product shot
   ============================================================ */
.pv {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 50px 100px -45px rgba(0,0,0,0.85), 0 12px 28px -16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
}
.pv__chrome { display: flex; align-items: center; gap: 9px; padding: 9px 13px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.pv__lights { display: flex; gap: 6px; }
.pv__lights i { width: 9px; height: 9px; border-radius: 50%; background: #D8D2C6; display: block; }
.pv__url { margin-left: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.02em; color: var(--text-mute); background: #fff; border: 1px solid var(--line); border-radius: 100px; padding: 4px 12px; }
.pv__live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clear); }
.pv__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--clear); display: block; }

.pv__body { display: block; }

.pv__main { background: var(--paper); padding: 13px; }
.pv__greet { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pv__greet b { color: var(--accent); font-size: 11.5px; font-weight: 600; }
.pv__greet span { font-family: 'IBM Plex Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); }

.pv__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 11px; }
.pv__card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; }
.pv__card .k { font-family: 'IBM Plex Mono', monospace; font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-mute); display: block; margin-bottom: 5px; line-height: 1.3; min-height: 19px; }
.pv__card .v { font-family: 'Spectral', serif; font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; display: block; }
.pv__card .n { font-size: 8px; font-weight: 600; margin-top: 5px; display: block; color: var(--text-mute); }
.pv__card.is-elevated .v { color: var(--elevated); }
.pv__card.is-high .v { color: var(--high); }
.pv__card.is-clear .v { color: var(--clear); }
.pv__card.is-accent .v { color: var(--accent); }

.pv__panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pv__phead { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.pv__phead b { font-size: 10.5px; font-weight: 600; }
.pv__phead .srch { font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; color: var(--text-mute); border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; }
.pv__table { width: 100%; border-collapse: collapse; }
.pv__table th { font-family: 'IBM Plex Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-mute); font-weight: 500; text-align: left; padding: 7px 11px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.pv__table td { padding: 7px 11px; border-bottom: 1px solid var(--line-soft); font-size: 10px; color: var(--text-soft); vertical-align: middle; }
.pv__table tr:last-child td { border-bottom: 0; }
.pv__table .cl { font-weight: 600; color: var(--text); }
.pv__table .addr { color: var(--text-mute); font-size: 9.5px; }
.pv__pill { font-family: 'IBM Plex Mono', monospace; font-size: 8px; font-weight: 500; padding: 2px 7px; border-radius: 100px; display: inline-flex; align-items: center; gap: 4px; }
.pv__pill::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.pv__pill.s-90 { background: var(--elevated-bg); color: var(--elevated); }
.pv__pill.s-fcl { background: var(--high-bg); color: var(--high); }
.pv__pill.s-cur { background: var(--clear-bg); color: var(--clear); }
.pv__view { font-family: 'IBM Plex Mono', monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; color: #fff; background: var(--clear); padding: 4px 9px; border-radius: 5px; }
.pv__foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; border-top: 1px solid var(--line); font-size: 9px; color: var(--text-mute); }
.pv__pg { display: flex; gap: 3px; }
.pv__pg i { font-style: normal; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--line); font-size: 8.5px; color: var(--text-soft); }
.pv__pg i.on { background: var(--clear); color: #fff; border-color: transparent; }

@media (max-width: 480px) {
  .pv__stats { grid-template-columns: repeat(2, 1fr); }
  .pv__table .addr { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .phero__grid, .contact { grid-template-columns: 1fr; }
  .connect, .statband { grid-template-columns: repeat(2, 1fr); }
  .split, .values { grid-template-columns: repeat(2, 1fr); }
  .twoup { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .connect, .statband, .split, .values, .checklist, .field--row { grid-template-columns: 1fr; }
  .cmp__row { grid-template-columns: 1fr; }
  .cmp__row > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* super-lien-risk: tier ledger (right column of map section) */
.tiers { display: flex; flex-direction: column; gap: 14px; }
.tiers__bar { display: flex; gap: 3px; height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.tiers__bar i { display: block; }
.tiers__bar .is-high { background: var(--high-d); }
.tiers__bar .is-limited { background: var(--elevated-d); }
.tiers__bar .is-special { background: var(--special-d); }
.tiers__bar .is-standard { background: #3C5168; }
.tier { --tc: var(--high-d); position: relative; padding: 20px 22px 18px 24px; border: 1px solid var(--line-ink); border-radius: var(--radius); background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); overflow: hidden; }
.tier::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tc); }
.tier--limited { --tc: var(--elevated-d); }
.tier--special { --tc: var(--special-d); }
.tier--standard { --tc: #3C5168; }
.tier__head { display: flex; align-items: flex-start; gap: 18px; }
.tier__n { font-family: 'Spectral', Georgia, serif; font-weight: 400; font-size: clamp(2.4rem, 3.6vw, 3rem); line-height: 0.9; color: var(--tc); min-width: 1.6ch; letter-spacing: -0.02em; }
.tier__t { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 1rem; font-weight: 600; color: #fff; margin: 2px 0 4px; }
.tier__d { font-size: 0.84rem; line-height: 1.45; color: var(--on-ink-soft); margin: 0; }
@media (max-width: 600px) { .tier { padding: 18px 16px 16px 18px; } .tier__head { gap: 14px; } }