/* Account and utility pages: sign-in, order tracking, name check, fee calculator, tax calendar, careers, legal, updates, invite, 404.
   Brand tokens only; every animation has a reduced-motion fallback. */
:root { --x-ink: var(--ih-color-brand-ink); --x-paper: var(--ih-color-brand-paper); --x-or: var(--ih-color-brand-orange); --x-or7: var(--ih-color-orange-700); }
.proto-note { margin: 0; padding: 10px 12px; border-radius: var(--ih-radius-md); font-size: 13px; font-weight: 600; color: var(--ih-text-muted);
  background: var(--ih-color-neutral-100); border: 1px dashed var(--ih-color-neutral-300); }

/* ---------- Sign-in ---------- */
.auth { display: grid; grid-template-columns: 1.1fr minmax(0, 460px); grid-template-areas: "art card" "copy card"; gap: 0 clamp(24px, 4vw, 56px);
  max-inline-size: 1180px; margin-inline: auto; padding: clamp(28px, 5vw, 64px) 16px; align-items: center; }
.auth-art { grid-area: art; position: relative; aspect-ratio: 1.3; max-block-size: 360px; border-radius: 28px; overflow: hidden; background: var(--x-ink); isolation: isolate; }
.auth-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 260px at 70% 30%, color-mix(in srgb, var(--x-or) 38%, transparent), transparent 70%); }
.auth-fan { position: absolute; inset: 0; display: grid; place-items: center; }
.auth-fan ih-hub { --ih-hub-size: min(34%, 150px); }
.auth-orbit { position: absolute; inset: 0; animation: x-orbit 36s linear infinite; }
.auth-orbit span { position: absolute; left: 50%; top: 50%; padding: 7px 12px; border-radius: 99px; font-weight: 800; font-size: 13px; white-space: nowrap;
  color: var(--x-paper); background: color-mix(in srgb, var(--x-paper) 12%, transparent); border: 1px solid color-mix(in srgb, var(--x-paper) 22%, transparent);
  transform: rotate(calc(var(--k) * 90deg)) translate(clamp(78px, 20vw, 150px)) rotate(calc(var(--k) * -90deg)) translate(-50%, -50%); }
.auth-orbit span > * { display: inline-block; }
.auth-orbit span:nth-child(1) { --k: 0; } .auth-orbit span:nth-child(2) { --k: 1; } .auth-orbit span:nth-child(3) { --k: 2; } .auth-orbit span:nth-child(4) { --k: 3; }
.auth-orbit span { animation: x-orbit-r 36s linear infinite; }
@keyframes x-orbit { to { rotate: 360deg; } }
@keyframes x-orbit-r { to { rotate: -360deg; } }
.auth-copy { grid-area: copy; display: grid; gap: 12px; padding-block: 22px; }
.auth-copy .cx-badge { color: var(--ih-text); justify-self: start; }
.auth-copy h2 { margin: 0; font-size: var(--ih-font-size-3xl); line-height: 1.12; }
.auth-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.auth-list li { display: flex; gap: 10px; align-items: baseline; font-weight: 600; }
.auth-list li::before { content: "✓"; flex: none; inline-size: 22px; block-size: 22px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 800; background: var(--x-or); color: var(--x-ink); }
.auth-card { grid-area: card; display: grid; gap: 16px; padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: var(--ih-bg); border: 1.5px solid var(--ih-border);
  box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--x-ink) 55%, transparent); }
.auth-card h1 { margin: 0; font-size: var(--ih-font-size-2xl); }
.auth-card .muted { margin: 0; }
.auth-card .hint { margin: 0; font-size: 13px; color: var(--ih-text-muted); }
.auth-card .hint a { color: var(--x-or7); font-weight: 700; }
.auth-done { display: grid; justify-items: center; gap: 10px; text-align: center; padding-block: 24px; }
.auth-done ih-hub { --ih-hub-size: 72px; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; grid-template-areas: "card" "art" "copy"; gap: 22px; } .auth-art { max-block-size: 260px; aspect-ratio: 1.6; } }

/* ---------- Shared page shell for tools ---------- */
.x-hero { position: relative; overflow: hidden; isolation: isolate; color: var(--x-paper); background: var(--x-ink); padding-block: clamp(44px, 7vw, 92px) clamp(48px, 7vw, 96px); }
.x-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(820px 460px at 85% 10%, color-mix(in srgb, var(--x-or) 30%, transparent), transparent 62%); }
.x-hero .bg-fan { position: absolute; inset-block-start: 50%; inset-inline-end: -8%; inline-size: min(46vw, 520px); translate: 0 -50%; z-index: -1; opacity: .16; }
.x-hero .bg-fan ih-hub { --ih-hub-size: 100%; color: var(--x-paper); }
.x-hero h1 { margin: 10px 0 12px; font-size: clamp(32px, 5vw, 56px); line-height: 1.04; max-inline-size: 18ch; }
.x-hero h1 .l2 { color: var(--x-or); }
.x-hero p { margin: 0; max-inline-size: 60ch; color: color-mix(in srgb, var(--x-paper) 78%, transparent); font-size: var(--ih-font-size-lg); }
.x-hero .cx-badge { color: var(--x-paper); }
.x-body { padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px); display: grid; gap: 22px; }
.x-card { display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 26px); border-radius: 22px; background: var(--ih-bg); border: 1.5px solid var(--ih-border); }
.x-card h2, .x-card h3 { margin: 0; }
.x-lift { margin-block-start: clamp(-64px, -6vw, -40px); position: relative; z-index: 2; box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--x-ink) 60%, transparent); }
.x-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.x-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.x-row > .f { flex: 1 1 220px; margin: 0; }
.x-src { font-size: 13px; color: var(--ih-text-muted); }
.x-src a { color: var(--x-or7); font-weight: 700; }
.x-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 13px; font-weight: 800; background: var(--ih-color-neutral-100); }
.x-pill.ok { background: var(--ih-color-status-success-bg); color: var(--ih-color-status-success); }
.x-pill.warn { background: var(--ih-color-orange-50); color: var(--x-or7); }
.x-pill.no { background: var(--ih-color-status-danger-bg); color: var(--ih-color-status-danger); }

/* ---------- Step tracker (order tracking, invite, connect Claude) ----------
   Each step draws its own segment to the next step, from circle centre to circle centre, so the line always meets
   the circles exactly, at any width and in RTL. Segments up to the current step are orange. */
.trk-x { --dot: 44px; --gap: 8px; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: var(--gap); margin: 0; padding: 0; isolation: isolate; }
.trk-x li { position: relative; list-style: none; display: grid; grid-template-rows: var(--dot) auto auto; gap: 8px; justify-items: center; align-content: start; text-align: center;
  font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--ih-text-muted); overflow-wrap: anywhere; }
.trk-x li:not(:last-child)::after { content: ""; position: absolute; z-index: -1; inset-block-start: calc(var(--dot) / 2 - 1.5px); block-size: 3px; border-radius: 3px;
  inset-inline-start: 50%; inline-size: calc(100% + var(--gap)); background: var(--ih-color-neutral-200); }
.trk-x li.done:not(:last-child)::after { background: var(--x-or); }
.trk-x .dot { inline-size: var(--dot); block-size: var(--dot); border-radius: 50%; display: grid; place-items: center; background: var(--ih-bg); border: 2px solid var(--ih-color-neutral-200); }
.trk-x .dot ih-hub { --ih-hub-size: 26px; }
.trk-x li.done, .trk-x li.now { color: var(--ih-text); }
.trk-x li.done .dot { background: var(--x-ink); border-color: var(--x-ink); }
.trk-x li.now .dot { border-color: var(--x-or); box-shadow: 0 0 0 6px color-mix(in srgb, var(--x-or) 18%, transparent); }
@media (max-width: 520px) { .trk-x { --dot: 38px; --gap: 4px; } .trk-x li { font-size: 12px; } .trk-x .dot ih-hub { --ih-hub-size: 22px; } }
.ord { display: grid; gap: 16px; }
.ord-hd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: baseline; }
.ord-hd b { font-size: var(--ih-font-size-lg); }
.ord-log { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; border-inline-start: 2px solid var(--ih-color-neutral-200); padding-inline-start: 16px; }
.ord-log li { display: grid; gap: 2px; } .ord-log small { color: var(--ih-text-muted); font-weight: 600; }
.ord-act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--ih-color-orange-50); border: 1px solid var(--ih-color-orange-200); font-weight: 700; }

/* ---------- Name check ---------- */
.nc-out { display: grid; gap: 10px; }
.nc-item { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ih-border); background: var(--ih-bg); animation: x-in 400ms both; animation-delay: calc(var(--i) * 70ms); }
.nc-item .ic { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.nc-item.ok .ic { background: var(--ih-color-status-success-bg); color: var(--ih-color-status-success); }
.nc-item.warn .ic { background: var(--ih-color-orange-50); color: var(--x-or7); }
.nc-item.no .ic { background: var(--ih-color-status-danger-bg); color: var(--ih-color-status-danger); }
.nc-item p { margin: 2px 0 0; color: var(--ih-text-muted); font-size: 14px; }
.nc-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.nc-preview span { padding: 8px 12px; border-radius: 12px; background: var(--x-ink); color: var(--x-paper); font-weight: 800; letter-spacing: .01em; }
.nc-search { display: grid; gap: 8px; }
.nc-search a { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--ih-border); text-decoration: none; color: var(--ih-text); font-weight: 700; }
.nc-search a:hover { border-color: var(--x-or); }
.nc-search small { color: var(--ih-text-muted); font-weight: 600; }
@keyframes x-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Fee calculator ---------- */
.fc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 18px; align-items: start; }
.fc-svc { display: grid; gap: 8px; }
.fc-svc label { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--ih-border); cursor: pointer; background: var(--ih-bg); transition: border-color 200ms; }
.fc-svc label:has(input:checked) { border-color: var(--x-or); background: var(--ih-color-orange-50); }
.fc-svc input { inline-size: 18px; block-size: 18px; accent-color: var(--x-or); }
.fc-svc b { flex: 1; } .fc-svc small { color: var(--ih-text-muted); font-weight: 700; white-space: nowrap; }
.fc-sum { position: sticky; inset-block-start: 92px; display: grid; gap: 12px; padding: 20px; border-radius: 22px; background: var(--x-ink); color: var(--x-paper); }
.fc-sum ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
.fc-sum li { display: flex; justify-content: space-between; gap: 10px; }
.fc-sum li span:first-child { color: color-mix(in srgb, var(--x-paper) 78%, transparent); }
.fc-total { display: flex; justify-content: space-between; align-items: baseline; border-block-start: 1px solid color-mix(in srgb, var(--x-paper) 20%, transparent); padding-block-start: 12px; }
.fc-total b { font-size: clamp(30px, 4vw, 40px); }
.fc-sum .btn--primary { inline-size: 100%; }
.fc-sum small { color: color-mix(in srgb, var(--x-paper) 66%, transparent); }
@media (max-width: 860px) { .fc { grid-template-columns: 1fr; } .fc-sum { position: static; } }

/* ---------- Tax calendar ---------- */
.cal-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.cal-m { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 18px; border: 1.5px solid var(--ih-border); background: var(--ih-bg); animation: x-in 420ms both; animation-delay: calc(var(--i) * 40ms); }
.cal-m.now { border-color: var(--x-or); box-shadow: 0 0 0 4px color-mix(in srgb, var(--x-or) 14%, transparent); }
.cal-m h3 { margin: 0 0 4px; font-size: var(--ih-font-size-lg); display: flex; justify-content: space-between; }
.cal-e { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 10px; border-radius: 12px; background: var(--ih-color-neutral-50); border: 1px solid var(--ih-color-neutral-200); text-decoration: none; color: inherit; }
.cal-e:hover { border-color: var(--x-or); }
.cal-e .d { grid-row: span 2; inline-size: 44px; text-align: center; font-weight: 800; font-size: 20px; line-height: 1; padding-block: 6px; border-radius: 10px; background: var(--x-ink); color: var(--x-paper); }
.cal-e .d small { display: block; font-size: 10px; font-weight: 700; opacity: .75; margin-top: 3px; }
.cal-e b { font-size: 14px; } .cal-e span { font-size: 13px; color: var(--ih-text-muted); }

/* ---------- Long-form legal / updates ---------- */
.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.doc-toc { position: sticky; inset-block-start: 92px; display: grid; gap: 4px; }
.doc-toc a { padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--ih-text-muted); font-weight: 700; font-size: 14px; }
.doc-toc a:hover, .doc-toc a.on { background: var(--ih-color-neutral-100); color: var(--ih-text); }
.doc-body { display: grid; gap: 28px; max-inline-size: 76ch; }
.doc-body section { scroll-margin-top: 96px; display: grid; gap: 10px; }
.doc-body h2 { margin: 0; font-size: var(--ih-font-size-2xl); }
.doc-body h3 { margin: 8px 0 0; font-size: var(--ih-font-size-lg); }
.doc-body p, .doc-body li { line-height: 1.7; }
.doc-body ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; }
.doc-body table { inline-size: 100%; border-collapse: collapse; font-size: 14px; }
.doc-body th, .doc-body td { text-align: start; padding: 10px; border-block-end: 1px solid var(--ih-border); vertical-align: top; }
.doc-draft { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--ih-color-orange-50); border: 1px solid var(--ih-color-orange-200); font-weight: 700; }
.doc-meta { font-size: 13px; color: var(--ih-text-muted); font-weight: 600; }
@media (max-width: 860px) { .doc { grid-template-columns: 1fr; } .doc-toc { position: static; display: flex; flex-wrap: wrap; } }
.upd { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 18px; border-radius: 18px; border: 1.5px solid var(--ih-border); background: var(--ih-bg); }
.upd time { grid-row: span 3; inline-size: 64px; text-align: center; font-weight: 800; line-height: 1.1; padding: 8px 4px; border-radius: 12px; background: var(--x-ink); color: var(--x-paper); font-size: 13px; }
.upd time b { display: block; font-size: 22px; }
.upd h3 { margin: 0; font-size: var(--ih-font-size-lg); }
.upd p { margin: 0; color: var(--ih-text-muted); line-height: 1.6; }
.upd .ft { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; }
.upd .ft a { color: var(--x-or7); font-weight: 800; }

/* ---------- 404 ---------- */
.nf { min-block-size: 64vh; display: grid; place-items: center; text-align: center; padding: 48px 16px; }
.nf-fan { inline-size: 140px; margin-inline: auto; animation: nf-wobble 2.4s ease-in-out infinite; }
.nf-fan ih-hub { --ih-hub-size: 140px; }
.nf h1 { margin: 18px 0 8px; font-size: clamp(30px, 5vw, 48px); }
.nf p { margin: 0 auto 18px; max-inline-size: 52ch; color: var(--ih-text-muted); }
.nf .links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@keyframes nf-wobble { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }

@media (prefers-reduced-motion: reduce) {
  .auth-orbit, .auth-orbit span, .nf-fan, .nc-item, .cal-m { animation: none; }
  
}

/* ---------- Claude conversation demo (js/claude-demo.js) ---------- */
.cd { display: grid; grid-template-rows: auto 1fr; block-size: 440px; border-radius: 22px; overflow: hidden; background: var(--ih-color-brand-paper); color: var(--ih-color-brand-ink); border: 1.5px solid var(--ih-border);
  box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--x-ink) 50%, transparent); }
.cd-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-block-end: 1px solid var(--ih-border); font-size: 14px; }
.cd-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--x-or); }
.cd-conn { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: var(--ih-color-neutral-100); }
.cd-body { overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; scrollbar-width: none; }
.cd-msg, .cd-tool { animation: x-in 380ms cubic-bezier(.2, .7, .2, 1) both; }
.cd-msg { display: grid; gap: 6px; max-inline-size: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.cd-u { align-self: flex-end; background: var(--x-ink); color: var(--x-paper); border-end-end-radius: 4px; }
.cd-a { align-self: flex-start; background: var(--ih-color-neutral-100); border-end-start-radius: 4px; }
.cd-file { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, var(--x-paper) 16%, transparent); justify-self: start; }
.cd-tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 10px; color: var(--x-or7); background: var(--ih-color-orange-50); border: 1px dashed var(--ih-color-orange-200); }
@media (prefers-reduced-motion: reduce) { .cd-msg, .cd-tool { animation: none; } }

/* ---------- Claude page ---------- */
.ai-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
@media (max-width: 900px) { .ai-grid { grid-template-columns: 1fr; } }
.ai-url { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--ih-color-neutral-100); border: 1px solid var(--ih-border); font-weight: 800; }
.ai-url code { flex: 1; font-size: 15px; overflow-wrap: anywhere; }
.ai-perm { display: grid; gap: 8px; }
.ai-perm label { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--ih-border); cursor: pointer; }
.ai-perm label:has(input:checked) { border-color: var(--x-or); background: var(--ih-color-orange-50); }
.ai-perm small { grid-column: 1; color: var(--ih-text-muted); font-weight: 600; }
.ai-perm input { grid-row: 1 / span 2; grid-column: 2; inline-size: 44px; block-size: 24px; appearance: none; border-radius: 99px; background: var(--ih-color-neutral-300); position: relative; cursor: pointer; transition: background 200ms; }
.ai-perm input::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--ih-bg); transition: inset-inline-start 200ms; }
.ai-perm input:checked { background: var(--x-or); } .ai-perm input:checked::after { inset-inline-start: 23px; }
.ai-perm .lock { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--x-or7); }
.ai-limit { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--x-ink); color: var(--x-paper); }
.ai-limit input { accent-color: var(--x-or); inline-size: 100%; }
.ai-limit b { font-size: 24px; }
.ai-prompts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.ai-prompts button { font: inherit; text-align: start; cursor: pointer; padding: 14px; border-radius: 14px; border: 1.5px solid var(--ih-border); background: var(--ih-bg); display: grid; gap: 6px; }
.ai-prompts button:hover { border-color: var(--x-or); }
.ai-prompts small { color: var(--ih-text-muted); font-weight: 700; }

/* ---------- KYC: identity check after payment (stages/kyc/) ---------- */
.kyc { max-inline-size: 760px; margin-inline: auto; padding: clamp(20px, 4vw, 40px) 16px 56px; display: grid; gap: 18px; }
.kyc-top { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.kyc-top ih-hub { --ih-hub-size: 48px; }
.kyc-top ol { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 700; color: var(--ih-text-muted); }
.kyc-top li[aria-current="step"] { color: var(--ih-text); } .kyc-top li.done::before { content: "✓ "; color: var(--x-or7); }
.kyc-card { display: grid; gap: 16px; padding: clamp(18px, 3vw, 28px); border-radius: 24px; background: var(--ih-bg); border: 1.5px solid var(--ih-border); }
.kyc-card h1 { margin: 0; font-size: clamp(24px, 3.4vw, 32px); }
.kyc-card > p { margin: 0; color: var(--ih-text-muted); line-height: 1.7; }
.kyc-need { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.kyc-need div { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: var(--ih-color-neutral-100); }
.kyc-need b { font-size: 15px; } .kyc-need small { color: var(--ih-text-muted); font-weight: 600; }
.kyc-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; }
.kyc-consent input { margin-top: 4px; inline-size: 18px; block-size: 18px; accent-color: var(--x-or); flex: none; }
.kyc-cam { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--x-ink); display: grid; place-items: center; }
.kyc-cam video, .kyc-cam canvas.shot { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.kyc-cam .frame { position: absolute; inset: 14% 10%; border: 3px solid var(--x-paper); border-radius: 16px; box-shadow: 0 0 0 999px color-mix(in srgb, var(--x-ink) 45%, transparent); transition: border-color 300ms; }
.kyc-cam .frame.oval { inset: 10% 26%; border-radius: 50%; }
.kyc-cam .frame.ok { border-color: var(--ih-color-status-success); } .kyc-cam .frame.bad { border-color: var(--x-or); }
.kyc-cam .hint { position: absolute; inset-inline: 12px; inset-block-start: 12px; padding: 10px 12px; border-radius: 12px; text-align: center; font-weight: 800; color: var(--x-paper); background: color-mix(in srgb, var(--x-ink) 72%, transparent); }
.kyc-cam .idle { color: var(--x-paper); text-align: center; display: grid; gap: 10px; justify-items: center; padding: 20px; }
.kyc-cam .idle ih-hub { --ih-hub-size: 56px; }
.kyc-cam .cue { position: absolute; inset-block-end: 16px; inset-inline: 0; margin-inline: auto; inline-size: fit-content; padding: 8px 14px; border-radius: 99px; font-weight: 800; background: var(--x-or); color: var(--x-ink); animation: x-in 360ms both; }
.kyc-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 420px) { .kyc-checks span { font-size: 12px; padding: 8px; } }
.kyc-checks span { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 700; background: var(--ih-color-neutral-100); }
.kyc-checks span::before { content: "•"; inline-size: 20px; block-size: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--ih-color-neutral-200); flex: none; }
.kyc-checks .ok::before { content: "✓"; background: var(--ih-color-status-success-bg); color: var(--ih-color-status-success); }
.kyc-checks .bad::before { content: "!"; background: var(--ih-color-orange-50); color: var(--x-or7); }
.kyc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kyc-row .grow { flex: 1; }
.kyc-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.kyc-seg label { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--ih-border); cursor: pointer; font-weight: 700; }
.kyc-seg label:has(input:checked) { border-color: var(--x-or); background: var(--ih-color-orange-50); }
.kyc-seg input { accent-color: var(--x-or); }
.kyc-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.6; background: var(--ih-color-neutral-100); }
.kyc-note b { display: block; }
.kyc-done { display: grid; justify-items: center; gap: 10px; text-align: center; padding-block: 18px; }
.kyc-done ih-hub { --ih-hub-size: 84px; }
.kyc-sum { display: grid; gap: 8px; }
.kyc-sum div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ih-color-neutral-100); font-size: 14px; }
.kyc-sum div b::before { content: "✓ "; color: var(--ih-color-status-success); }

/* ---------- Staff KYC review (stages/ops-kyc/) ---------- */
.okyc { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; padding-block: 24px 56px; align-items: start; }
.okyc-q { display: grid; gap: 8px; position: sticky; inset-block-start: 84px; }
.okyc-q button { font: inherit; text-align: start; cursor: pointer; display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--ih-border); background: var(--ih-bg); }
.okyc-q button[aria-pressed="true"] { border-color: var(--x-or); background: var(--ih-color-orange-50); }
.okyc-q small { color: var(--ih-text-muted); font-weight: 600; }
.okyc-media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.okyc-media figure { margin: 0; display: grid; gap: 6px; }
.okyc-media .ph { aspect-ratio: 4 / 3; border-radius: 16px; background: var(--x-ink); display: grid; place-items: center; color: var(--x-paper); font-weight: 800; }
.okyc-media figcaption { font-size: 13px; color: var(--ih-text-muted); font-weight: 700; }
.okyc-t { inline-size: 100%; border-collapse: collapse; font-size: 14px; }
.okyc-t td { padding: 9px 10px; border-block-end: 1px solid var(--ih-border); }
.okyc-t td:last-child { text-align: end; }
.okyc-log { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--ih-text-muted); }
@media (max-width: 900px) { .okyc { grid-template-columns: 1fr; } .okyc-q { position: static; } .okyc-media { grid-template-columns: 1fr; } }

/* Affiliate programme page (stages/affiliates/) */
.af-big { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--ih-text-accent); }
.af-no { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.af-no li { display: flex; gap: 10px; align-items: baseline; color: var(--ih-text-muted); }
.af-no li::before { content: "×"; flex: none; inline-size: 22px; block-size: 22px; display: inline-grid; place-items: center; border-radius: 50%; font-weight: 800; background: var(--ih-surface-alt); color: var(--ih-text); }
.af-ex { display: grid; gap: 6px; }
.af-ex-r { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-block-end: 1px solid var(--ih-border); }
.af-ex-r b { font-size: 18px; }
.af-ex-r.is-zero b { color: var(--ih-text-muted); }
.af-terms { margin: 0; padding-inline-start: 20px; display: grid; gap: 10px; }