/* SOARR App — monochrome black/white system (Uber-style: flat, bold, functional). Gold lives ONLY in the brand marks. */
:root {
  /* Belt and braces with the meta tag: this also tells the browser to draw scrollbars,
     form controls and the space beyond the page in dark, so nothing anywhere is white. */
  color-scheme: dark;
  --bg: #000000;
  --panel: #121212;
  --panel-tr: rgba(18, 18, 18, .93);   /* content sits over the emblem, not on top of it */
  --panel-2: #1C1C1C;
  --panel-3: #262626;
  --line: #292929;
  --line-soft: #1F1F1F;
  --gold: #FFFFFF;            /* decorative "gold" usages resolve to white now */
  --gold-deep: #E6E6E6;
  --gold-grad: linear-gradient(180deg, #FFFFFF, #ECECEC);
  --brandgold: #E9BA4F;       /* the ONLY gold: wordmark RR + bird */
  --text: #FFFFFF;
  --muted: #A8A8A8;
  --dim: #8A8A8A;        /* WCAG AA: 5.4:1 on panel, 4.9:1 on panel-2 */
  --purple: #A684FF;
  --purple-deep: #8F66FF;
  --green: #2FD980;
  --blue: #66A5F8;
  --red: #F87171;
  --amber: #F4C152;
  --r: 8px;
  --rs: 5px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Translation control and the note under a translated message. */
.iconbtn {
  background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px;
  display: inline-flex; align-items: center; border-radius: 8px;
}
.iconbtn:hover { color: var(--text); }
.iconbtn.on { color: var(--brandgold); }
.trnote {
  display: block; margin-top: 6px; background: none; border: 0; padding: 0;
  font: 600 10.5px/1.4 inherit; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim); cursor: pointer; text-align: left;
}
.msg.out .trnote { color: rgba(0,0,0,.45); }
.trnote:hover { color: var(--brandgold); }

/* Foldouts: detail that is there when wanted and out of the way when not. Keeps long
   analysis pages short on a phone without hiding anything from anybody. */
.foldout { border-top: 1px solid var(--line-soft); margin-top: 16px; }
.foldout > summary {
  list-style: none; cursor: pointer; padding: 4px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.foldout > summary::-webkit-details-marker { display: none; }
.foldout > summary::after {
  content: '+'; font-size: 20px; font-weight: 300; color: var(--muted); line-height: 1;
  width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px;
  border: 1px solid var(--line); border-radius: 50%;
}
.foldout[open] > summary::after { content: '−'; }
.foldout > summary:hover::after { color: var(--text); border-color: var(--brandgold); }
.foldout > summary .sechead { flex: 1; }

/* ---------- responsiveness ---------- */
/* Every tappable thing answers instantly, before the server has said anything. On a
   phone this is the whole difference between "app" and "website": the finger gets
   feedback in the same frame it touches the glass. */
.btn, .row, .stat, a.stat, .nav-item, .tabbar a, .match, .plan, .payopt, .refchip {
  -webkit-tap-highlight-color: transparent;
  transition: transform .09s cubic-bezier(.2, 0, 0, 1), background-color .12s ease, opacity .12s ease;
}
.btn:active, .row:active, a.stat:active, .match:active, .payopt:active, .refchip:active {
  transform: scale(.978);
}
.nav-item:active, .tabbar a:active { transform: scale(.94); }
/* A pressed button says so even while the next page loads. */
.btn.is-busy { opacity: .6; pointer-events: none; position: relative; }
.btn.is-busy::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 13px; height: 13px;
  margin-top: -7px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn, .row, .stat, .nav-item, .tabbar a, .match { transition: none; }
  .btn:active, .row:active, .match:active { transform: none; }
  .btn.is-busy::after { animation: none; }
}

/* ---------- accessibility ---------- */
/* A visible focus ring on everything reachable by keyboard. Gold, two pixels, offset
   so it never sits on top of the thing it is marking. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brandgold);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Skip link: first stop for a keyboard or screen-reader user, invisible until focused. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--brandgold); color: #000; font-weight: 700; font-size: 13px;
  padding: 10px 16px; border-radius: 0 0 8px 8px; transition: top .15s ease;
}
.skip:focus { top: 0; }
/* Screen-reader-only text: announced, never seen. */
.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;
}
/* Text scaling: the app must survive 200% without losing content. Fixed heights are
   the usual culprit, so anything that scrolls gets room to grow. */
@media (min-resolution: 0.001dpi) {
  .row, .stat, .card { min-height: 0; }
}
/* Navigation is one designed movement, identical on every page. The chrome — top bar,
   left rail, tab bar — holds still while only the content crosses over. That is what
   separates a considered app from a slideshow: the furniture does not flinch. */
@view-transition { navigation: auto; }
@keyframes vt-leave { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-enter { from { opacity: 0; transform: translateY(8px); } }

/* the page frame itself never animates: no full-screen flash */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* only the main content moves */
::view-transition-old(content) { animation: vt-leave .16s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(content) { animation: vt-enter .24s cubic-bezier(0, 0, .2, 1) both; }
.main { view-transition-name: content; }
.topbar { view-transition-name: chrome-top; }
.sidebar { view-transition-name: chrome-side; }
.tabbar { view-transition-name: chrome-tabs; }
/* chrome is pinned: it stays put across the change instead of redrawing */
::view-transition-old(chrome-top), ::view-transition-new(chrome-top),
::view-transition-old(chrome-side), ::view-transition-new(chrome-side),
::view-transition-old(chrome-tabs), ::view-transition-new(chrome-tabs) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(content), ::view-transition-new(content) { animation: none; }
}
/* JS fallback (browsers without the API): fade the content only, same feel.
   Never fully transparent, so a stalled navigation still leaves a readable page. */
body.vt-leaving .main { opacity: .35; transition: opacity .12s ease-in; }
@media (prefers-reduced-motion: no-preference) {
  body.vt-arrive .main { animation: vt-enter .22s cubic-bezier(0, 0, .2, 1) both; }
}
html { background: var(--bg); }
/* The body itself must not paint black, or the emblem layer behind it is invisible.
   The black lives on <html>; body is a transparent sheet the emblem shows through. */
body {
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: transparent; color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
  line-height: 1.45; letter-spacing: -0.005em;
  min-height: 100vh;
}
h1, h2, h3, .brand .word, .stat b, .plan .price b { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
h1 { letter-spacing: -0.03em; }
/* Engraved small caps — the business-card read. Every label, kicker and column head
   shares one voice: 10.5px, wide-tracked, bone grey. */
.label-sm, .kicker, th, .stat .top, .sechead .fine, .msg .who {
  letter-spacing: .14em !important; text-transform: uppercase; font-size: 10.5px !important; font-weight: 600;
}
a { color: var(--text); text-decoration: none; }
img { max-width: 100%; }

/* The SOARR emblem sits faint behind every screen — presence without noise. */
/* A warm floor under everything, so the app reads as deep charcoal-and-gold rather
   than flat black. Barely there, but it stops the screen feeling like a void. */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(233, 186, 79, .06), transparent 62%),
    radial-gradient(90% 70% at 0% 100%, rgba(233, 186, 79, .04), transparent 58%);
}
/* The emblem, big and cropped by the edge of the screen the way it is on the front
   page. It is roughly half the width of the display, with about 40% of it carried off
   the edge, so what you see is a fragment of a much larger mark rather than a small
   logo parked in a corner. The art is vector, so this holds up on a 6K display.

   Size lives on <body> rather than inline in the fallback so a section can override it
   in one place. Height tracks the artwork's 256:272 aspect — a square box would letter-
   box it and quietly shrink the mark. */
body { --wm-size: min(132vh, 92vw, 1500px); --wm-cut: -.30; }
body::before {
  content: ''; position: fixed;
  /* Cut at the mark's own midpoint, not at some fraction of the viewport: the offset is
     computed from --wm-size, so exactly half the emblem is off the edge on a phone and
     on a 6K display alike, and the arc's radius lands mid-screen. */
  right: calc(var(--wm-size) * var(--wm-cut)); top: var(--wm-y, -4%);
  width: var(--wm-size); height: calc(var(--wm-size) * 1.0625);
  background: url(/emblem.svg) no-repeat center / contain;
  opacity: var(--wm-op, .15); pointer-events: none; z-index: 0;
  transform: rotate(var(--wm-rot, 0deg));
}
/* One treatment, every screen, no exceptions. The mark is part of the furniture like the
   top bar is — if it shifted from page to page it would read as a decoration that keeps
   being redrawn rather than as the room the app lives in. Only the navigation changes. */
/* A phone is narrow and tall, so a full-width mark would be nearly all bleed. Sizing it
   off the height instead keeps the same "half of something huge" read. */
@media (max-width: 700px) {
  body { --wm-size: min(170vw, 74vh, 700px); --wm-cut: -.26; }
  body::before { --wm-op: .13; --wm-y: -14%; }
}
.shell, .topbar, .tabbar, .chatwrap { position: relative; z-index: 1; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  position: sticky; top: 0; background: rgba(0,0,0,.94); backdrop-filter: blur(14px); z-index: 40;
}
.brand { line-height: 1; }
.brandrow { display: flex; align-items: center; gap: 9px; }
.brand .bird { height: 28px; width: auto; }
.brand .word { font-weight: 800; font-size: 20px; letter-spacing: .04em; color: #fff; }
.brand .word .r2 { color: var(--brandgold); }
.brand .sub { font-size: 7.5px; letter-spacing: .46em; color: var(--dim); font-weight: 700; }
.topbar .actions { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #000;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px;
  text-decoration: none; cursor: pointer;
}
/* With a photo the circle is the photo — no white disc showing through at the corners,
   and the image is cropped to the ring rather than squashed into it. */
.avatar.hasphoto { background: var(--panel-3); overflow: hidden; }
.avatar.hasphoto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
a.avatar:hover { outline: 2px solid var(--gold); outline-offset: 2px; }
.chip-ai {
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 700;
  color: var(--text); background: var(--panel); white-space: nowrap;
}
.chip-ai .spark .i { color: var(--text); }

/* ---------- app shell ---------- */
.shell { display: flex; min-height: calc(100vh - 60px); }
.sidebar {
  width: 230px; flex: 0 0 230px; border-right: 1px solid var(--line-soft);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 2px;
}
.sidebar .client {
  background: var(--panel); border-radius: var(--r); padding: 12px; margin-bottom: 12px;
  display: flex; gap: 10px; align-items: center;
}
.client .logo {
  width: 38px; height: 38px; border-radius: 9px; background: #fff; color: #000;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
  overflow: hidden; flex: 0 0 38px;
}
/* With a real logo, the white tile becomes the logo's own backdrop — most company marks
   are drawn for white, so keeping it is safer than dropping them onto black. */
.client .logo.haslogo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.client b { display: block; font-size: 13.5px; }
.client span { font-size: 11.5px; color: var(--muted); }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--rs);
  color: var(--muted); font-size: 13.5px; font-weight: 600;
}
.nav-item .ico { width: 18px; text-align: center; }
.nav-item.on { background: var(--panel-2); color: #fff; }
.nav-item .new { margin-left: auto; font-size: 9px; background: #fff; color: #000; border-radius: 4px; padding: 1px 5px; font-weight: 800; }
.main { flex: 1; padding: 20px clamp(14px, 3vw, 32px) 60px; min-width: 0; }

/* ---------- typography (big, bold, tight — Uber-ish) ---------- */
h1.hero-line { font-size: clamp(30px, 6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
h1 .gold, h2 .gold, .goldtxt { color: #fff; }
h2.section { font-size: 19px; font-weight: 800; margin: 26px 0 12px; letter-spacing: -0.02em; }
.kicker { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; color: var(--dim); margin-bottom: 8px; }
.lede { color: var(--muted); font-size: 15.5px; max-width: 62ch; }
.fine { color: var(--dim); font-size: 12.5px; }
.fine a, a.fine { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.label-sm { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: var(--dim); font-weight: 700; }
.caps { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- cards & tiles (flat, no borders, no glow) ---------- */
.card { background: var(--panel-tr); border-radius: var(--r); padding: 16px; }
.card.glow { background: var(--panel-2); }
.grid { display: grid; gap: 10px; }
/* Cards in a row behave like a set: the button sits on the same baseline in every one,
   however short the copy above it runs. */
.grid > .card { display: flex; flex-direction: column; }
.grid > .card > .btn:last-child, .grid > .card > a.btn:last-child, .grid > .card > form:last-child { margin-top: auto; align-self: flex-start; }
/* Phones: stat tiles sit two across so a KPI row reads as a row, not a stack.
   Cards holding prose or charts stay full width. */
@media (max-width: 699px) {
  .grid.c3, .grid.c4 { grid-template-columns: 1fr 1fr; }
  .grid.c3 > .card, .grid.c4 > .card { grid-column: 1 / -1; }
  .stat b { font-size: 22px; }
}
@media (min-width: 700px) {
  .grid.c2 { grid-template-columns: 1fr 1fr; }
  .grid.c3 { grid-template-columns: 1fr 1fr; }
  .grid.c4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .grid.c3 { grid-template-columns: repeat(3, 1fr); }
  .grid.c4 { grid-template-columns: repeat(4, 1fr); }
}
.stat { background: var(--panel); border-radius: var(--r); padding: 15px; display: block; }
a.stat { text-decoration: none; color: inherit; transition: background .12s ease; }
a.stat:hover { background: var(--panel-2); }
.stat .ico { margin-bottom: 8px; display: block; color: var(--muted); }
.stat b { display: block; font-size: 25px; letter-spacing: -0.03em; }
.stat b.gold { color: #fff; } .stat b.purple { color: var(--purple); } .stat b.green { color: var(--green); } .stat b.blue { color: var(--blue); }
.stat span { font-size: 12px; color: var(--muted); }
.stat .top { font-size: 11.5px; color: var(--dim); margin-bottom: 4px; }
.stat.bare { background: transparent; padding: 8px; }

/* ---------- buttons (Uber: solid white primary on black) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--rs); border: none;
  background: var(--panel-2); color: var(--text); font-weight: 700; font-size: 14px;
  cursor: pointer; text-decoration: none !important; font-family: inherit;
  transition: transform .06s ease, background .12s ease;
}
.btn:hover { background: var(--panel-3); }
.btn:active { transform: scale(.98); }
.btn.gold { background: #fff; color: #000; }
.btn.gold:hover { background: #E8E8E8; }
.btn.purple { background: var(--purple-deep); color: #fff; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--panel); }
.btn.big { width: 100%; padding: 15px; font-size: 15px; }
.btn.sm { padding: 8px 14px; font-size: 12.5px; }
.btn .arr { font-weight: 800; }
.btn .i { color: inherit; }

/* ---------- badges / pills ---------- */
.pill { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 5px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge.impact-hi { background: rgba(255,255,255,.12); color: #fff; }
.badge.impact-med { background: rgba(255,255,255,.06); color: var(--muted); }
.badge.green { background: rgba(47,217,128,.14); color: var(--green); }
.badge.amber { background: rgba(244,193,82,.13); color: var(--amber); }
.badge.red { background: rgba(248,113,113,.13); color: var(--red); }
.badge.purple { background: rgba(166,132,255,.15); color: var(--purple); }
.badge.free { background: rgba(47,217,128,.14); color: var(--green); }
.dotlab { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.green { color: var(--green); }

/* ---------- forms ---------- */
label.f { display: grid; gap: 7px; font-weight: 700; font-size: 13.5px; color: var(--text); }
label.f .hint { font-weight: 400; color: var(--dim); font-size: 11.5px; }
label.f .fi { color: var(--muted); margin-right: 2px; vertical-align: -2px; display: inline-block; }
input, select, textarea {
  font: inherit; padding: 13px 14px; border: none; border-radius: var(--rs);
  background: var(--panel-2); color: var(--text); width: 100%;
}
input::placeholder, textarea::placeholder { color: #5E5E5E; }
input:focus, select:focus, textarea:focus { outline: 2px solid #fff; outline-offset: 0; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.formrow { display: grid; gap: 14px; }
@media (min-width: 700px) { .formrow.c2 { grid-template-columns: 1fr 1fr; } }
.charcount { text-align: right; font-size: 11px; color: var(--dim); margin-top: 4px; }

/* ---------- onboarding steps ---------- */
.steps-rail { display: flex; flex-direction: column; }
.step-item { display: flex; gap: 12px; padding: 8px 4px; align-items: flex-start; }
.step-item .num {
  width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; color: var(--dim); background: var(--panel-2);
}
.step-item.done .num { background: #fff; color: #000; }
.step-item.now .num { background: var(--panel-3); color: #fff; outline: 1.5px solid #fff; }
.step-item b { font-size: 13.5px; color: var(--muted); font-weight: 700; display: block; }
.step-item.now b { color: #fff; }
.step-item span { font-size: 11px; color: var(--dim); }
.progress-top { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.progress-top .track { width: 130px; height: 4px; border-radius: 4px; background: var(--panel-3); overflow: hidden; }
.progress-top .fill { height: 100%; background: #fff; }

/* Phones: the step counter stays in the bar, the track becomes a hairline along the
   bottom edge of the header so nothing has to compete for horizontal room. */
@media (max-width: 560px) {
  /* The named step chips directly below the header already say where you are, so the
     "STEP n OF 8" label is dropped and the track becomes a hairline along the header edge. */
  .progress-top > span:not(.track) { display: none; }
  .progress-top { gap: 0; }
  .progress-top .track {
    position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 2px; border-radius: 0;
  }
  .topbar .actions .btn { white-space: nowrap; padding: 7px 12px; }
}
.mobile-steps { display: none; }
.pagemark {
  width: 50px; height: 50px; border-radius: 50%; background: var(--panel-2); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: 0 0 50px;
}

/* ---------- welcome ---------- */
.welcome-hero {
  min-height: calc(100vh - 60px); display: flex; flex-direction: column; justify-content: center;
  padding: 40px clamp(18px, 5vw, 60px); position: relative; overflow: hidden; background: #000;
}
.welcome-hero .glowline { display: none; }
/* The front-page mark: large, and deliberately carried off the right edge so it reads
   as a fragment of something bigger. Every other screen echoes this. */
.hero-bird { position: absolute; right: -14%; top: 4%; height: 88%; opacity: .13; pointer-events: none; }
.role-btns { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.role-card {
  flex: 1 1 240px; max-width: 340px; border-radius: 14px; padding: 22px;
  background: var(--panel); text-decoration: none !important; color: var(--text);
  transition: background .12s ease;
}
.role-card:hover { background: var(--panel-2); }
.role-card .ico .i { width: 26px; height: 26px; color: #fff; }
.role-card b { display: block; font-size: 17px; margin: 12px 0 6px; letter-spacing: -0.01em; }
.role-card p { font-size: 13px; color: var(--muted); }
.role-card .go { color: #fff; font-weight: 800; font-size: 13px; margin-top: 12px; display: inline-block; }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.bubble { padding: 12px 15px; border-radius: 16px; font-size: 14.5px; max-width: 85%; }
.bubble.ai { background: var(--panel-2); border-bottom-left-radius: 5px; align-self: flex-start; }
.bubble.me { background: #fff; color: #000; border-bottom-right-radius: 5px; align-self: flex-end; }
.bubble .who { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--dim); display: block; margin-bottom: 3px; }
.bubble.me .who { color: #7a7a7a; }
.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3 } 30% { opacity: 1 } }
.chatbox { display: flex; gap: 10px; margin-top: 14px; max-width: 720px; }
.chatbox input { flex: 1; }

/* ---------- blueprint / roadmap ---------- */
.stage { border-radius: var(--r); overflow: hidden; background: var(--panel); }
.stage { display: flex; flex-direction: column; }
.stage .head { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.stage .head b { font-size: 12px; letter-spacing: .06em; white-space: nowrap; display: block; }
.stage .head span { display: block; margin-top: 3px; }
.stage ul { flex: 1; }
.stage.s1 .head b { color: var(--green); } .stage.s2 .head b { color: #fff; } .stage.s3 .head b { color: var(--purple); }
.stage .head span { font-size: 11.5px; color: var(--dim); }
.stage ul { list-style: none; padding: 8px 16px; }
.stage li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; font-size: 13.5px; border-bottom: 1px solid var(--line-soft); }
.stage li:last-child { border-bottom: none; }
.stage .foot { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-soft); background: var(--panel-2); }
.stage .foot div { padding: 11px 6px 13px; text-align: center; min-width: 0; }
.stage .foot .label-sm { display: block; margin-bottom: 3px; font-size: 9.5px; letter-spacing: .02em; line-height: 1.3; }
.stage .foot b { font-size: 13px; line-height: 1.25; display: block; word-break: normal; overflow-wrap: break-word; }
.stage .foot div:last-child b { font-size: 12px; }
.li-ico { display: inline-flex; align-items: center; gap: 8px; }
.li-ico .i { color: var(--muted); }

/* tables */
.tablewrap { overflow-x: auto; border-radius: var(--r); background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 680px; }
th { text-align: left; padding: 11px 14px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); border-bottom: 1px solid var(--line); }
td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td .green { color: var(--green); font-weight: 700; } td .goldc { color: #fff; font-weight: 700; }

/* ---------- match cards ---------- */
.match { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: var(--r); background: var(--panel); flex-wrap: wrap; }
.match .face {
  width: 50px; height: 50px; border-radius: 50%; flex: 0 0 50px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: #fff;
}
img.match-photo, .match img.face { object-fit: cover; }
.match .info { flex: 1 1 200px; min-width: 0; }
.match .info b { font-size: 15px; }
.match .info .tick { color: var(--blue); }
.match .info .tick .i { width: 13px; height: 13px; }
.match .info p { font-size: 12.5px; color: var(--muted); }
.match .skills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.match .score { text-align: center; flex: 0 0 74px; }
.ring { --p: 90; width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 4px;
  background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--panel-3) 0);
  display: flex; align-items: center; justify-content: center; position: relative; }
.ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--panel); }
.ring b { position: relative; z-index: 1; font-size: 13px; }
.match .rate { flex: 0 0 92px; font-size: 12.5px; color: var(--muted); }
.match .rate b { display: block; font-size: 15px; color: var(--text); }
.match .cta { display: flex; flex-direction: column; gap: 7px; flex: 0 0 150px; }
.topmatch { font-size: 9.5px; letter-spacing: .1em; background: #fff; color: #000; border-radius: 4px; padding: 2px 7px; font-weight: 800; }
.face-sm { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.teamrow { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.intg { background: var(--panel-2); border-radius: 10px; padding: 10px; text-align: center; }

/* ---------- plans ---------- */
.plan { border-radius: 14px; padding: 22px; background: var(--panel); position: relative; display: flex; flex-direction: column; }
.plan.hot { background: var(--panel-2); outline: 1.5px solid #fff; }
.plan .poptag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: #fff; color: #000; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 3px 12px; border-radius: 999px; }
.plan h3 { font-size: 16.5px; }
.plan .price { margin: 8px 0 2px; } .plan .price b { font-size: 32px; letter-spacing: -0.03em; } .plan .price span { color: var(--dim); font-size: 13px; }
.plan p.sub { color: var(--muted); font-size: 12.5px; margin-bottom: 12px; }
.plan ul { list-style: none; margin: 6px 0 18px; flex: 1; }
.plan li { padding: 5px 0; font-size: 13px; color: var(--muted); display: flex; gap: 8px; }
.plan li::before { content: "✓"; color: var(--green); font-weight: 800; }

/* usage meter */
.usage { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); border-radius: 999px; padding: 8px 14px; background: var(--panel); }
.usage .track { width: 90px; height: 5px; border-radius: 5px; background: var(--panel-3); overflow: hidden; }
.usage .fill { height: 100%; background: var(--green); }

/* reference chips */
.refchip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: 600 11.5px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .04em;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 9px; position: relative;
}
.refchip:hover { color: var(--text); border-color: var(--gold); }
.refchip .cop { display: none; color: var(--green); font-family: inherit; }
.refchip.copied .cop { display: inline; }
.refchip.copied { border-color: var(--green); }

/* profile-strength meter */
.meter { height: 6px; border-radius: 6px; background: var(--panel-3); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--gold); transition: width .3s ease; }
a.pill { text-decoration: none; }
a.pill:hover { border-color: var(--gold); color: var(--ink); }

/* locked grid */
.locklist { display: grid; gap: 7px; }
@media (min-width: 700px) { .locklist { grid-template-columns: 1fr 1fr; } }
.locklist div { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.locklist div::before { content: "•"; color: var(--dim); }

/* ---------- pipeline (submitted) ---------- */
.pipeline { display: flex; align-items: flex-start; overflow-x: auto; padding: 10px 0; }
.pipe-step { flex: 1; min-width: 92px; text-align: center; position: relative; }
.pipe-step::before { content: ""; position: absolute; top: 20px; left: -50%; width: 100%; height: 2px; background: var(--line); }
.pipe-step:first-child::before { display: none; }
.pipe-step.done::before { background: var(--green); }
.pipe-step .ico {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 8px; position: relative; z-index: 1;
  background: var(--panel-2); display: flex; align-items: center; justify-content: center;
}
.pipe-step .ico .i { color: var(--muted); }
.pipe-step.done .ico { background: rgba(47,217,128,.14); }
.pipe-step.done .ico .i { color: var(--green); }
.pipe-step b { font-size: 11.5px; display: block; line-height: 1.3; }
.pipe-step span { font-size: 10.5px; color: var(--dim); }
.gauge { text-align: center; padding: 8px 0; }
.gauge .arc { width: 150px; height: 82px; margin: 0 auto; position: relative; overflow: hidden; }
.gauge .arc::before { content: ""; position: absolute; inset: 0 0 -82px 0; border-radius: 50%;
  background: conic-gradient(from 270deg, #fff, var(--green) 50%, var(--panel-3) 50%); }
.gauge .arc::after { content: ""; position: absolute; inset: 13px 13px -82px 13px; border-radius: 50%; background: var(--panel); }
.gauge .val { position: relative; margin-top: -46px; font-size: 21px; font-weight: 800; }
.gauge .cap { font-size: 10.5px; letter-spacing: .14em; color: var(--dim); font-weight: 800; }

/* timeline */
.nextsteps { list-style: none; }
.nextsteps li { display: flex; gap: 14px; padding: 10px 0; position: relative; }
.nextsteps li::before { content: ""; position: absolute; left: 15px; top: 40px; bottom: -6px; width: 2px; background: var(--line-soft); }
.nextsteps li:last-child::before { display: none; }
.nextsteps .ni { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--panel-2); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.nextsteps .ni .i { color: var(--muted); }
.nextsteps b { font-size: 14px; display: block; }
.nextsteps p { font-size: 12.5px; color: var(--muted); }

/* ---------- banners ---------- */
.banner { display: flex; gap: 12px; align-items: center; background: var(--panel); border-radius: var(--r); padding: 14px 16px; font-size: 13.5px; }
.banner.gold { background: var(--panel-2); }
.banner.purple { background: var(--panel); }
.bico { display: flex; align-items: center; }

/* ---------- trust bar ---------- */
.trustbar {
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 4vw, 34px); flex-wrap: wrap;
  border-top: 1px solid var(--line-soft); margin-top: 44px; padding: 18px; font-size: 11.5px; color: var(--dim);
}
.trustbar b { color: var(--muted); display: block; font-size: 12px; }
.trust-item { display: flex; align-items: center; gap: 8px; }
.trust-item .i { color: var(--muted); }

/* ---------- journey strip ---------- */
.journey { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; }
.journey .j { flex: 1; min-width: 130px; text-align: center; padding: 14px 8px; border-radius: var(--r); background: var(--panel); }
.journey .j .ico { width: 38px; height: 38px; margin: 0 auto 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--panel-2); }
.journey .j .ico .i { color: #fff; }
.journey .j .ico.c1, .journey .j .ico.c2, .journey .j .ico.c3, .journey .j .ico.c4, .journey .j .ico.c5 { background: var(--panel-2); color: #fff; }
.journey b { display: block; font-size: 12.5px; }
.journey span { font-size: 11px; color: var(--dim); }

/* ---------- lists ---------- */
.checklist { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.checklist .i { color: var(--green); }
.sumlist { display: grid; gap: 10px; font-size: 13px; }
.sumlist > span { display: flex; gap: 9px; align-items: flex-start; }
.sumlist .i { color: var(--muted); margin-top: 2px; }
.whylist { font-size: 12px; color: var(--muted); }
.whylist > span { display: flex; gap: 9px; align-items: flex-start; }
.whylist .i { color: var(--muted); margin-top: 1px; }
.whylist b { color: var(--text); }
.leglist { font-size: 12px; color: var(--muted); display: grid; gap: 3px; }

/* ---------- deed / legal document ---------- */
.deedbox {
  max-height: 46vh; overflow-y: auto; background: var(--panel);
  font-size: 12.5px; line-height: 1.6; color: var(--muted);
  scroll-behavior: smooth;
}
.deedbox .deedhead { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; }
.deedbox .deedhead b { display: block; font-size: 12px; letter-spacing: .04em; color: var(--text); line-height: 1.4; }
.deedbox p { margin-bottom: 8px; }
.deedbox p.deed-h { color: var(--text); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin: 16px 0 6px; border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; }
.deedbox h3.clause { color: var(--text); font-size: 13px; margin: 16px 0 6px; font-weight: 800; }
.deedbox .item, .deedbox .item2 { display: flex; margin-bottom: 6px; }
.deedbox .item .lbl, .deedbox .item2 .lbl { flex: 0 0 30px; color: var(--dim); }
.deedbox .item2 { margin-left: 30px; }
.deedbox .item .txt, .deedbox .item2 .txt { flex: 1; }
.deedbox b { color: var(--text); }
.deedend { text-align: center; color: var(--dim); font-size: 11px; padding: 18px 0 4px; letter-spacing: .1em; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- ops queue ---------- */
.oprow { display: flex; gap: 12px; align-items: center; padding: 13px 14px; background: var(--panel); border-radius: var(--r); flex-wrap: wrap; }
.oprow .who { flex: 1 1 180px; min-width: 0; }
.oprow .who b { font-size: 14.5px; }
.oprow .who p { font-size: 12px; color: var(--muted); }
.oprow form { display: inline; }

/* ---------- misc ---------- */
.rowflex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.divider { height: 1px; background: var(--line-soft); margin: 16px 0; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; }
.mb8 { margin-bottom: 8px; } .mb16 { margin-bottom: 16px; } .mb24 { margin-bottom: 24px; }
.center { text-align: center; }
.i { vertical-align: -3px; flex: 0 0 auto; }

/* ---------- bottom tab bar ---------- */
.tabbar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: rgba(0,0,0,.96); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-soft); padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--dim); font-size: 10px; font-weight: 700; text-decoration: none !important; padding: 5px 0 3px;
}
.tabbar a.on { color: #fff; }

/* ---------- responsive: phone ---------- */
@media (max-width: 860px) {
  .sidebar { display: none; }
  .mobile-steps {
    display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
    scrollbar-width: none;
  }
  .mobile-steps::-webkit-scrollbar { display: none; }
  .mobile-steps .ms {
    flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--dim);
    background: var(--panel); border-radius: 999px; padding: 6px 12px; white-space: nowrap;
  }
  .mobile-steps .ms.done { color: #000; background: #fff; }
  .mobile-steps .ms.now { color: #fff; background: var(--panel-3); }
  .main { padding: 18px 14px 110px; }
  .match .cta { flex: 1 1 100%; flex-direction: row; }
  .match .cta .btn { flex: 1; }
  .chip-ai .txt { display: none; }
  .tabbar { display: flex; }
  .trustbar { padding-bottom: 96px; }
  .brand .bird { height: 25px; }
  .brand .word { font-size: 18px; }
}


/* ---------- corporate list rows (replaces card-for-everything) ---------- */
.list { background: var(--panel); border-radius: var(--r); overflow: hidden; }
.list > .row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-bottom: 1px solid var(--line-soft); text-decoration: none !important; color: var(--text); }
.list > .row:last-child { border-bottom: none; }
.list > a.row:active { background: var(--panel-2); }
.row .body { flex: 1; min-width: 0; }
.row .title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row .body > .meta:first-of-type { color: var(--text); font-weight: 500; }
.row .meta { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.row .meta i { font-style: normal; color: var(--dim); }
.row .sub { display: block; font-size: 12.5px; color: var(--dim); margin-top: 3px; }
.row .chev { color: var(--dim); flex: 0 0 auto; }
.row .trail { flex: 0 0 auto; text-align: right; font-size: 13px; color: var(--muted); }
.row .trail b { display: block; color: var(--text); font-size: 15px; font-weight: 600; }
.avatar-sq { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13.5px; background: var(--panel-3); color: var(--text); letter-spacing: -0.02em; }
.avatar-sq.light { background: #F2F2F2; color: #000; }

/* metadata pairs instead of dot-separated strings */
.metagrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px 18px; }
.metagrid > div { min-width: 0; }
.metagrid .v { overflow-wrap: anywhere; }
.metagrid > div .k { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.metagrid > div .v { font-size: 14px; margin-top: 2px; }

/* section headers with a rule, like a real product */
.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 10px; }
.sechead h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.sechead a { font-size: 13px; color: var(--muted); font-weight: 600; }

/* page header block */
.pagehead { padding: 4px 0 18px; }
.pagehead h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.pagehead p { color: var(--muted); font-size: 14.5px; margin-top: 8px; max-width: 58ch; }

.nav-item.soon { opacity: .55; }
.soonbadge { margin-left: auto; font-size: 9.5px; background: var(--panel-3); color: var(--muted); border-radius: 4px; padding: 2px 6px; font-weight: 700; }
.navfoot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.bubble .text { display: block; }


/* ---------- messaging: WhatsApp / Signal style ---------- */
.chatwrap {
  display: flex; flex-direction: column; height: calc(100vh - 61px);
  max-width: 780px; margin: 0 auto; width: 100%; background: var(--bg);
  border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
}
@media (max-width: 800px) { .chatwrap { border: none; height: calc(100vh - 61px); } }
.chathead {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line-soft); flex: 0 0 auto;
}
.chathead .back { color: var(--muted); display: flex; padding: 4px; }
.chathead .who-b { flex: 1; min-width: 0; }
.chathead .who-b b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.chathead .who-b span { font-size: 12px; color: var(--muted); }
.chathead .acts { display: flex; gap: 4px; }
.chathead .acts a { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.chathead .acts a:active { background: var(--panel-2); }

.chatscroll { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 3px; }
.syschip {
  align-self: center; background: var(--panel-2); color: var(--muted); font-size: 11.5px;
  padding: 7px 14px; border-radius: 8px; margin: 6px 0 12px; text-align: center; max-width: 86%; line-height: 1.5;
}
.syschip .i { color: var(--green); vertical-align: -2px; margin-right: 4px; }
.daychip { align-self: center; background: var(--panel-2); color: var(--muted); font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 999px; margin: 10px 0 6px; }

.msg { max-width: 78%; padding: 7px 11px 6px; border-radius: 12px; font-size: 14.5px; line-height: 1.4; position: relative; word-wrap: break-word; }
.msg.in { align-self: flex-start; background: var(--panel-2); border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; background: #fff; color: #000; border-bottom-right-radius: 4px; }
.msg + .msg.in, .msg + .msg.out { margin-top: 1px; }
.msg .txt { display: block; padding-right: 52px; }
.msg .stamp { position: absolute; right: 9px; bottom: 5px; font-size: 10.5px; color: var(--dim); display: flex; align-items: center; gap: 3px; }
.msg.out .stamp { color: rgba(0,0,0,.45); }
.msg .ticks { letter-spacing: -3px; font-size: 12px; transition: color .2s ease; }
/* Delivered is grey; read turns SOARR gold. No ambiguity about whether it landed. */
.msg.out .ticks.read { color: var(--brandgold); }
/* Someone at the other end is typing. */
.typingrow { display: flex; align-items: center; gap: 10px; padding: 6px 4px; align-self: flex-start; }
.msg.pending { opacity: .6; }

.composer {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid var(--line-soft);
}
.composer .field { flex: 1; background: var(--panel-2); border-radius: 20px; padding: 4px 6px 4px 14px; display: flex; align-items: center; gap: 6px; }
.composer textarea {
  flex: 1; background: transparent; border: none; outline: none; resize: none;
  font: inherit; font-size: 15px; color: var(--text); padding: 8px 0; max-height: 110px; line-height: 1.35;
}
.composer textarea::placeholder { color: var(--dim); }
.composer .sendbtn {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; border: none; cursor: pointer;
  background: #fff; color: #000; display: flex; align-items: center; justify-content: center;
}
.composer .sendbtn:disabled { opacity: .35; }
/* The button answers the question "am I allowed to send this?" at a glance:
   lit gold the moment there is something sendable in the box. */
.composer .sendbtn:not(:disabled) { background: var(--gold); color: #000; }
.composer .sendbtn { transition: background .15s ease, color .15s ease, opacity .15s ease; }

/* ---------- ratings (Uber style) ---------- */
.ratebox { display: flex; align-items: center; gap: 14px; }
.ratebig { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stars { display: inline-flex; gap: 2px; }
.stars .i { color: var(--amber); }
.stars .i.off { color: var(--panel-3); }
.ratemeta { font-size: 12.5px; color: var(--muted); }
.ratebars { display: grid; gap: 5px; margin-top: 12px; }
.ratebars .rb { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.ratebars .rb .track { flex: 1; height: 5px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.ratebars .rb .fill { height: 100%; background: var(--amber); }
.review { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.review:last-child { border-bottom: none; }
.review .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.review .top b { font-size: 13.5px; font-weight: 600; }
.review p { font-size: 13.5px; color: var(--muted); margin-top: 5px; }
.review .job { font-size: 11.5px; color: var(--dim); margin-top: 4px; }

.i.flip { transform: rotate(180deg); }

.syschip.warn { background: rgba(244,193,82,.10); color: var(--amber); }
.syschip.warn .i { color: var(--amber); }
.blockbar {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 12px 8px;
  background: rgba(248,113,113,.10); border-radius: 10px; padding: 11px 13px; font-size: 13px; color: var(--red);
}
.blockbar .bico .i { color: var(--red); }
.blockbar .fine { color: #C98F8F; }

/* verified skills + resume view */
.vtick { display: inline-flex; vertical-align: -2px; }
.vtick .i { color: var(--blue); }
.pill.verified { background: rgba(102,165,248,.13); color: #A9CCFB; display: inline-flex; align-items: center; gap: 5px; }
.pill.verified .vtick .i { color: var(--blue); }
.resumeview {
  white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.6; color: var(--muted); background: var(--panel-2);
  border-radius: 8px; padding: 14px; max-height: 340px; overflow-y: auto;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
optgroup { background: var(--panel-2); color: var(--muted); }

/* selectable skill chips */
.chip { position: relative; display: inline-block; }
.chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.chip span {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px;
  background: var(--panel-2); color: var(--muted); font-size: 13px; font-weight: 600;
  cursor: pointer; user-select: none; transition: background .12s ease, color .12s ease;
  border: 1px solid transparent;
}
.chip:hover span { background: var(--panel-3); }
.chip input:checked + span { background: #fff; color: #000; }
.chip input:checked + span .vtick .i { color: #1B6FD4; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }


/* ---------- device breakpoints ---------- */
/* phone: tab bar, no sidebar (already handled at 860px) */
/* tablet portrait: roomier padding, still tab bar */
@media (min-width: 700px) and (max-width: 860px) {
  .main { padding: 22px 24px 110px; }
  .pagehead h1 { font-size: 30px; }
}
/* desktop / laptop: sidebar, constrained reading width */
@media (min-width: 861px) {
  .main { padding: 24px clamp(20px, 3vw, 40px) 60px; }
  .main > * { max-width: 1180px; }
  .tabbar { display: none; }
}
/* large desktop and iMac: cap line length, centre */
@media (min-width: 1440px) {
  .main { padding-left: 48px; padding-right: 48px; }
  .pagehead h1 { font-size: 32px; }
}
/* landscape phone: shrink vertical chrome */
@media (max-height: 480px) and (orientation: landscape) {
  .welcome-hero { min-height: auto; padding: 24px 20px; }
  .topbar { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 8px; }
}
/* pointer-less devices: bigger touch targets */
/* WCAG 2.2 target size: nothing tappable smaller than 44px in either direction. */
.btn, .tabbar a, .nav-item, .row, .refchip, .bellbtn, .avatar, .sendbtn, .pill {
  min-height: 44px;
}
.btn.sm, .pill, .refchip { min-height: 36px; display: inline-flex; align-items: center; }
@media (hover: none) {
  .btn { min-height: 44px; }
  .row { min-height: 56px; }
  .tabbar a { min-height: 48px; }
}
/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* print: clean documents */
@media print {
  .topbar, .sidebar, .tabbar, .composer, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .list { background: #fff; border: 1px solid #ccc; }
}

/* legal documents */
.legaldoc { max-width: 74ch; }
.legaldoc h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 28px 0 10px; color: var(--text); }
.legaldoc h2:first-child { margin-top: 0; }
.legaldoc p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin-bottom: 11px; }
.legaldoc p b { color: var(--text); }
.legaldoc .ltable { width: 100%; border-collapse: collapse; margin: 14px 0 18px; font-size: 13.5px; background: var(--panel); border-radius: var(--r); overflow: hidden; }
.legaldoc .ltable th { text-align: left; padding: 10px 13px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); border-bottom: 1px solid var(--line); }
.legaldoc .ltable td { padding: 10px 13px; border-bottom: 1px solid var(--line-soft); color: var(--muted); vertical-align: top; }
.legaldoc .ltable tr:last-child td { border-bottom: none; }
.legaldoc .ltable td b { color: var(--text); }
.pill.on { background: #fff; color: #000; }

.legalfoot { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; padding: 22px 18px 4px; border-top: 1px solid var(--line-soft); margin-top: 40px; }
.legalfoot a { font-size: 12.5px; color: var(--dim); }
.legalfoot a:hover { color: var(--muted); }
.trustbar { margin-top: 8px; border-top: none; }

/* table cells: no clipping */
table td, table th { word-break: normal; overflow-wrap: anywhere; }
table td b { display: inline-block; }

.bellbtn { position: relative; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.bellbtn:active { background: var(--panel-2); }
.dotcount { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; border-radius: 8px; background: var(--red); color: #fff; font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

/* payments */
.paylines { display: grid; gap: 9px; font-size: 14px; }
.paylines > div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.paylines .total { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 3px; color: var(--text); font-weight: 700; font-size: 16px; }
.payopt { cursor: pointer; position: relative; }
.payopt input { position: absolute; opacity: 0; }
.radio-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: 0 0 20px; position: relative; }
.payopt input:checked ~ .radio-dot { border-color: #fff; }
.payopt input:checked ~ .radio-dot::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.payopt input:checked ~ .body .title { color: #fff; }

/* charts */
.chart { display: grid; gap: 10px; }
.cbar { display: grid; grid-template-columns: minmax(90px, max-content) 1fr auto; gap: 12px; align-items: center; font-size: 12.5px; }
/* Phones: a truncated name tells you nothing, so the label gets its own line above the bar. */
@media (max-width: 560px) {
  .cbar { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .clabel { grid-column: 1 / -1; white-space: normal; color: var(--text); font-weight: 600; }
}
.clabel { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctrack { height: 8px; border-radius: 4px; background: var(--panel-3); overflow: hidden; }
.cfill { display: block; height: 100%; background: #fff; border-radius: 4px; }
.cvalue { color: var(--text); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.avatar-photo { border-radius: 22%; object-fit: cover; display: block; }
/* A person is a circle, a company is a rounded square. Keeping the two shapes distinct
   means you can tell at a glance whether a row is a human or a business. */
.avatar-photo.round { border-radius: 50%; }

/* ---------- photo cropper ---------- */
.cropwrap {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(0, 0, 0, .82); backdrop-filter: blur(10px); padding: 20px;
}
.croppanel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; max-width: 460px; width: 100%; text-align: center;
  /* Dragging inside a crop window must never start a text selection. */
  user-select: none; -webkit-user-select: none;
}
.croptitle { font-size: 20px; letter-spacing: -0.02em; margin-top: 2px; }
.cropnote { font-size: 12.5px; color: var(--dim); margin-top: 6px; }
.cropview {
  position: relative; margin: 18px auto 0; overflow: hidden; border-radius: 10px;
  background: #0A0A0A; cursor: grab; touch-action: none;
}
.cropview:active { cursor: grabbing; }
.cropview.round { border-radius: 50%; }
.cropcanvas { display: block; }
/* The mask is the honest bit: the ring is exactly the saved crop, so what is inside it
   is what ends up on the profile. A huge shadow spread dims everything outside. */
.cropmask {
  position: absolute; inset: 0; pointer-events: none; border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(233, 186, 79, .55) inset;
}
.cropmask.round { border-radius: 50%; }
.cropzoom { width: 100%; margin-top: 16px; accent-color: var(--brandgold); }
.cropbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }

/* ---------- loading screen ---------- */
/* The mark crosses the screen while the app boots. It is the only screen every session
   begins with, so it earns more than a spinner. */
.soar-splash {
  position: fixed; inset: 0; z-index: 400; overflow: hidden;
  display: grid; place-items: center;
  background: var(--bg);
  animation: sb-out .45s cubic-bezier(.4,0,1,1) forwards;
  animation-play-state: paused;
}
.soar-splash.go { animation-play-state: running; }
@keyframes sb-out { to { opacity: 0; visibility: hidden; } }

/* The sky is the upper part of the screen and the wordmark sits below it. Flying the bird
   through the middle put it straight over the lettering, where the two fought each other
   and neither read. A bird crosses above you; the name stays put underneath. */
.soar-sky { position: absolute; left: 0; right: 0; top: 0; height: 58%; pointer-events: none; overflow: hidden; }

/* The wake. Each line stretches out of nothing, races across and thins away — read as
   air being torn rather than as objects moving. */
.soar-trail {
  position: absolute; left: 0; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--brandgold), transparent);
  transform: translateX(-30vw) scaleX(.2); transform-origin: left;
  animation: sb-streak 2.6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes sb-streak {
  0%   { transform: translateX(-30vw) scaleX(.15); opacity: 0; }
  18%  { opacity: 1; }
  70%  { opacity: .9; }
  100% { transform: translateX(115vw) scaleX(1.5); opacity: 0; }
}

/* The flight path: across, with a shallow rise and fall. Two nested transforms keep the
   horizontal travel and the vertical drift independent, so neither fights the other. */
.soar-flight {
  position: absolute; left: 0; top: 62%; will-change: transform;
  animation: sb-cross 2.6s cubic-bezier(.42,0,.58,1) infinite;
}
@keyframes sb-cross {
  0%   { transform: translate(-34vw, 5vh) rotate(-4deg); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translate(38vw, -4vh) rotate(2deg); }
  88%  { opacity: 1; }
  100% { transform: translate(112vw, 3vh) rotate(-2deg); opacity: 0; }
}

.soar-bird {
  width: min(30vw, 168px); height: auto; color: var(--brandgold);
  overflow: visible; display: block; margin-top: -50%;
}

/* --- the wingbeat ---
   Slower and deeper than before: a bird crossing open sky, not one escaping something. */
.soar-bird .sb-wingL .sb-in  { transform-origin: 116.9px 181.4px; }
.soar-bird .sb-wingL .sb-out { transform-origin: 67.7px 166.5px; }
.soar-bird .sb-wingR .sb-in  { transform-origin: 166.9px 171.7px; }
.soar-bird .sb-wingR .sb-out { transform-origin: 204.3px 163.4px; }
.soar-bird .sb-secL { transform-origin: 116.9px 181.4px; }
.soar-bird .sb-secR { transform-origin: 166.9px 171.7px; }

.soar-bird .sb-wingL .sb-in  { animation: sb-shoulderL .86s cubic-bezier(.36,0,.5,1) infinite; }
.soar-bird .sb-wingR .sb-in  { animation: sb-shoulderR .86s cubic-bezier(.36,0,.5,1) infinite; }
/* The tip trails the shoulder — the lag that makes it a wing and not a lever. */
.soar-bird .sb-wingL .sb-out { animation: sb-tipL .86s cubic-bezier(.36,0,.5,1) infinite -.77s; }
.soar-bird .sb-wingR .sb-out { animation: sb-tipR .86s cubic-bezier(.36,0,.5,1) infinite -.77s; }
/* Secondaries travel about two-thirds as far, or they swing clear of the wing at the
   extremes and read as separate objects flying off. */
.soar-bird .sb-secL { animation: sb-secL .86s cubic-bezier(.36,0,.5,1) infinite -.79s; }
.soar-bird .sb-secR { animation: sb-secR .86s cubic-bezier(.36,0,.5,1) infinite -.79s; }
/* Foreshortening: a wing looks longest level, shortest at both ends of the stroke. */
.soar-bird .sb-wing { transform-origin: 50% 181.4px;
  animation: sb-short .86s cubic-bezier(.36,0,.5,1) infinite; }
.soar-bird .sb-body { animation: sb-lift .86s cubic-bezier(.36,0,.5,1) infinite; }

@keyframes sb-shoulderL {
  0% { transform: rotate(-22deg); } 34% { transform: rotate(13deg); } 100% { transform: rotate(-22deg); }
}
@keyframes sb-shoulderR {
  0% { transform: rotate(22deg); } 34% { transform: rotate(-13deg); } 100% { transform: rotate(22deg); }
}
@keyframes sb-tipL {
  0% { transform: rotate(9deg); } 34% { transform: rotate(-10deg); } 100% { transform: rotate(9deg); }
}
@keyframes sb-tipR {
  0% { transform: rotate(-9deg); } 34% { transform: rotate(10deg); } 100% { transform: rotate(-9deg); }
}
@keyframes sb-secL {
  0% { transform: rotate(-14deg); } 34% { transform: rotate(8deg); } 100% { transform: rotate(-14deg); }
}
@keyframes sb-secR {
  0% { transform: rotate(14deg); } 34% { transform: rotate(-8deg); } 100% { transform: rotate(14deg); }
}
@keyframes sb-short {
  0% { transform: scaleX(.85); } 17% { transform: scaleX(1); }
  34% { transform: scaleX(.88); } 67% { transform: scaleX(1); } 100% { transform: scaleX(.85); }
}
@keyframes sb-lift {
  0% { transform: translateY(3px); } 34% { transform: translateY(-4px); } 100% { transform: translateY(3px); }
}

/* Wordmark and progress sit still in the middle; the bird crosses behind them. */
.soar-inner { display: grid; justify-items: center; gap: 22px; position: relative; z-index: 1; }
.soar-word {
  font-weight: 800; font-size: 19px; letter-spacing: .22em; color: #fff;
  animation: sb-fade .7s ease-out .2s both;
}
.soar-word .r2 { color: var(--brandgold); }
.soar-sub {
  font-size: 8px; letter-spacing: .5em; color: var(--dim); font-weight: 700;
  margin-top: 7px; animation: sb-fade .7s ease-out .32s both;
}
@keyframes sb-fade { from { opacity: 0; transform: translateY(6px); } }

.soar-bar { width: 132px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.soar-bar i { display: block; height: 100%; width: 100%; background: var(--brandgold);
  transform-origin: left; animation: sb-bar 1.6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes sb-bar { from { transform: scaleX(.04); } to { transform: scaleX(1); } }

/* Motion sensitivity: the mark still appears, it just stops flying. */
@media (prefers-reduced-motion: reduce) {
  .soar-bird, .soar-bird *, .soar-flight, .soar-trail { animation: none !important; }
  .soar-trail { display: none; }
  .soar-flight { position: static; transform: none; margin-bottom: 18px; }
  .soar-bird { margin: 0 auto; }
  .soar-word, .soar-sub, .soar-bar i { animation: none !important; }
  .soar-splash { animation-duration: .01s; }
}

/* A navigation is not a boot: once a session has started the loading screen must never
   appear again. The class is set in <head> before first paint, so there is no flash. */
html.booted .soar-splash { display: none; }

/* ---------- deeds and signing ---------- */
/* The full text scrolls inside a fixed box rather than running down the page: it makes
   the length of the document honest, and keeps the signature within reach. */
.deedscroll {
  max-height: 46vh; overflow-y: auto; font-size: 12.5px; line-height: 1.62;
  color: var(--muted); background: var(--panel-2);
}
.deedscroll h2, .deedscroll h3 { color: var(--text); font-size: 13.5px; margin: 18px 0 8px; }
.deedscroll h2:first-child, .deedscroll h3:first-child { margin-top: 0; }
.deedscroll p { margin-bottom: 9px; }
.deedscroll b { color: var(--text); }
.deedscroll .item, .deedscroll .item2 { display: grid; grid-template-columns: 34px 1fr; gap: 8px; margin-bottom: 9px; }
.deedscroll .item2 { padding-left: 22px; }
.deedscroll .lbl { color: var(--dim); font-variant-numeric: tabular-nums; }

.sigpad-wrap { position: relative; }
.sigpad {
  width: 100%; height: auto; aspect-ratio: 900 / 260; display: block;
  background: var(--panel-3); border: 1px dashed var(--line);
  border-radius: 10px; touch-action: none; cursor: crosshair;
}
/* The rule you sign on, so the box reads as a signature line and not a doodle pad. */
.sigpad-wrap::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: 22%;
  border-bottom: 1px solid var(--line); pointer-events: none;
}
.sigpad-wrap .btn { position: absolute; right: 10px; top: 10px; }

.bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brandgold); transition: width .3s ease; }

/* A button that reads as a link — for secondary paths like the typed signature. */
.linklike {
  background: none; border: 0; padding: 0; color: var(--brandgold);
  font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline;
}