/* Founders HQ phone site. Strict CSP: this file is the only stylesheet; no inline styles. */
@font-face { font-family: 'Geppa'; src: url('/fonts/geppa.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Axiome'; src: url('/fonts/ax-reg.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Axiome'; src: url('/fonts/ax-med.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Axiome'; src: url('/fonts/ax-semi.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'AxMono'; src: url('/fonts/ax-mono.woff2') format('woff2'); font-display: swap; }

:root {
  --bg: #0E0A07;
  --panel: #17110C;
  --panel-2: #1F1710;
  --line: #2C2118;
  --text: #F2ECE4;
  --muted: #A89A8A;
  --dim: #6F6355;
  --gold: #F29A26;
  --orange: #E5540F;
  --ok: #7FB77E;
  --warn: #E8B44A;
  --bad: #E5644A;
  --r: 14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text);
  font: 400 16px/1.45 'Axiome', -apple-system, 'SF Arabic', 'Geeza Pro', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: calc(var(--safe-t) + 56px) 0 calc(var(--safe-b) + 84px);
}
body.signed-out { padding-bottom: calc(var(--safe-b) + 24px); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* top bar */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 5; height: calc(var(--safe-t) + 56px);
  padding: var(--safe-t) 16px 0; display: flex; align-items: center; gap: 10px;
  background: rgba(14, 10, 7, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.top-mark { width: 28px; height: 28px; }
.top-name { font-family: 'Geppa', 'Axiome', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; }
.top-out { margin-left: auto; font-size: 13px; color: var(--muted); padding: 8px 4px; }

main { max-width: 640px; margin: 0 auto; padding: 16px; }

/* headings and type */
h1, h2 { font-family: 'Geppa', 'Axiome', sans-serif; text-transform: uppercase; font-weight: 400; letter-spacing: .04em; margin: 0; }
h3 { font-family: 'Axiome', system-ui, sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0; line-height: 1.3; margin: 0; }
.steps { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.steps .next { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
h1 { font-size: 26px; line-height: 1.1; }
h2 { font-size: 14px; letter-spacing: .12em; color: var(--muted); margin: 26px 0 10px; }
h3 { font-size: 17px; line-height: 1.2; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: 'AxMono', ui-monospace, monospace; font-size: 12px; letter-spacing: .02em; }
.ar { font-family: 'SF Arabic', 'Geeza Pro', system-ui, sans-serif; color: var(--muted); }
.kicker { font-family: 'AxMono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); }

/* panels */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.card + .card { margin-top: 10px; }
.hero { background: linear-gradient(160deg, #2A1A0C 0%, var(--panel) 60%); border-color: #3A2614; }
.hero p.big { font-size: 19px; line-height: 1.35; margin-top: 8px; }
.list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; width: 100%; text-align: start; }
.row + .row { border-top: 1px solid var(--line); }
.row .grow { flex: 1; min-width: 0; }
.row .chev { color: var(--dim); align-self: center; }
button.row:active { background: var(--panel-2); }

/* pills */
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pill { font-family: 'AxMono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.pill.on-track, .pill.live { color: var(--ok); border-color: rgba(127, 183, 126, .35); }
.pill.attention, .pill.warning { color: var(--warn); border-color: rgba(232, 180, 74, .35); }
.pill.blocked, .pill.critical, .pill.at-risk { color: var(--bad); border-color: rgba(229, 100, 74, .4); }
.pill.gold { color: var(--gold); border-color: rgba(242, 154, 38, .4); }

/* progress */
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--orange)); border-radius: 3px; }
.ring { width: 96px; height: 96px; flex: none; }
.ring circle { fill: none; stroke-width: 9; }
.ring .track { stroke: var(--line); }
.ring .fill { stroke: url(#rg); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring text { fill: var(--text); font: 600 22px 'Axiome', sans-serif; }
.guest-top { display: flex; gap: 16px; align-items: center; }

/* width helpers for bars (CSP forbids inline style, so widths are classes w0..w100 in steps of 5) */
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}
.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}

/* checklist */
.check { display: flex; gap: 10px; padding: 10px 0; }
.check + .check { border-top: 1px solid var(--line); }
.box { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid var(--dim); margin-top: 2px; }
.check.done .box { background: var(--gold); border-color: var(--gold); position: relative; }
.check.done .box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check.done span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--dim); }

/* dates */
.date { display: flex; gap: 14px; align-items: baseline; }
.date .when { flex: none; width: 64px; font-family: 'AxMono', ui-monospace, monospace; font-size: 12px; color: var(--gold); text-transform: uppercase; }
.date .days { margin-left: auto; flex: none; font-size: 12px; color: var(--dim); }

/* office */
.agent { display: flex; gap: 12px; align-items: center; }
.avatar { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; font: 600 14px 'Axiome', sans-serif; color: var(--bg); background: var(--gold); }
.avatar.teal { background: #5FB8A8; } .avatar.coral { background: #E98A6B; } .avatar.blue { background: #7FA6E8; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); margin-right: 6px; }
.dot.working { background: var(--gold); box-shadow: 0 0 0 4px rgba(242, 154, 38, .18); }
.dot.needs-you { background: var(--bad); }

/* goals */
.goal-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.goal-now { font-family: 'AxMono', ui-monospace, monospace; font-size: 12px; color: var(--gold); flex: none; }
.fund { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.fund b { font: 600 30px 'Axiome', sans-serif; }
.step-title { margin: 18px 0 8px; font-size: 13px; color: var(--muted); }
.tool { display: flex; justify-content: space-between; gap: 12px; }
.tool .price { flex: none; font-family: 'AxMono', ui-monospace, monospace; font-size: 12px; color: var(--muted); }

/* sign-in */
.signin { min-height: calc(100dvh - 160px); display: flex; flex-direction: column; justify-content: center; }
.signin .logo { width: 72px; height: 72px; margin-bottom: 22px; }
.signin h1 { font-size: 30px; }
.signin p { margin-top: 8px; color: var(--muted); }
.field { margin-top: 26px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.field input {
  width: 100%; height: 52px; padding: 0 16px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); font-size: 17px;
}
.field input:focus { border-color: var(--gold); outline: none; }
.field input.code { font-family: 'AxMono', ui-monospace, monospace; letter-spacing: .5em; text-align: center; font-size: 22px; }
.btn {
  margin-top: 14px; width: 100%; height: 52px; border-radius: 12px; font-weight: 600;
  background: linear-gradient(180deg, var(--gold), #DE7A16); color: #1A0F05;
}
.btn:disabled { opacity: .55; }
.link { margin-top: 14px; color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.msg { margin-top: 12px; font-size: 14px; min-height: 20px; }
.msg.err { color: var(--bad); }
.devcode { margin-top: 10px; font-family: 'AxMono', ui-monospace, monospace; font-size: 12px; color: var(--warn); }

/* empty + loading */
.empty { text-align: center; padding: 56px 16px; }
.empty img { width: 56px; height: 56px; opacity: .7; margin-bottom: 14px; }
.empty p { color: var(--muted); margin-top: 8px; }
.loading { display: grid; place-items: center; min-height: 50vh; }
.loading span { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* back + detail */
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; padding: 6px 0 14px; }
.detail-head h1 { margin-top: 4px; }
.kpi { display: flex; justify-content: space-between; gap: 12px; }
.kpi b { font-weight: 600; }
.foot { margin-top: 28px; text-align: center; font-size: 12px; color: var(--dim); }
.links a { color: var(--gold); text-decoration: none; }

/* bottom tabs */
.tabs {
  position: fixed; inset: auto 0 0 0; z-index: 5; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 8px calc(var(--safe-b) + 6px); background: rgba(14, 10, 7, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line);
}
.tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; font-size: 11px; color: var(--dim); min-height: 48px; }
.tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabs button[aria-current='page'] { color: var(--gold); }

@media (prefers-reduced-motion: reduce) { .loading span { animation: none; } }

/* Fitova skin (gold): glow background, glossy cards, glowing slider bars */
body {
  background:
    radial-gradient(700px 420px at 85% -60px, rgba(242, 154, 38, .18), transparent 65%),
    radial-gradient(520px 420px at -20% 40%, rgba(229, 84, 15, .10), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}
.card, .list, .field input {
  background: linear-gradient(160deg, #221A12, #130E0A);
  border-color: rgba(242, 154, 38, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 28px -18px rgba(0, 0, 0, .8);
}
.card, .list { border-radius: 18px; }
.hero { position: relative; overflow: hidden; background: linear-gradient(160deg, #33210E, #140E09 70%); border-color: rgba(242, 154, 38, .28); }
.hero::after { content: ''; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 154, 38, .22), transparent 70%); pointer-events: none; }
.bar { position: relative; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: visible; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45); }
.bar i { position: relative; min-width: 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(242, 154, 38, .35), #FFB347); box-shadow: 0 0 12px -2px var(--gold); }
.bar i::after { content: ''; position: absolute; right: -2px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); border-radius: 50%; background: #140C06; border: 3px solid #FFB347; box-shadow: 0 0 10px var(--gold); }
.bar i.w0 { min-width: 0; } .bar i.w0::after { display: none; }
.ring .track { stroke: rgba(255, 255, 255, .07); }
.ring .fill { filter: drop-shadow(0 0 6px rgba(242, 154, 38, .7)); }
.avatar { background: linear-gradient(180deg, #FFB347, var(--gold)); box-shadow: 0 0 16px -4px var(--gold); }
.btn { background: linear-gradient(180deg, #FFB347, var(--gold)); box-shadow: 0 0 22px -6px var(--gold); }
.pill { background: rgba(255, 255, 255, .03); }
.pill.gold { background: linear-gradient(180deg, #FFB347, var(--gold)); color: #1A0F05; border-color: transparent; }
.kicker { color: #FFB347; }
.tabs button[aria-current='page'] { color: #FFB347; }
.tabs button[aria-current='page'] svg { filter: drop-shadow(0 0 6px rgba(242, 154, 38, .8)); }
.fund b { font-family: 'Geppa', 'Axiome', sans-serif; font-weight: 400; }

/* sign-in options */
.btn.ghost { background: rgba(255, 255, 255, .04); color: var(--text); border: 1px solid rgba(242, 154, 38, .35); box-shadow: none; }
.or { text-align: center; color: var(--dim); font-size: 13px; margin: 14px 0 -8px; }
.hint { margin-top: 12px; }
.card .btn { margin-top: 12px; }
h3.gap { margin-top: 22px; }
.btn.google { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; background: #F7F3EE; color: #1A1410; box-shadow: none; margin-top: 10px; }
.btn.google[hidden] { display: none; }
.btn.google .g { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 14px 'Axiome', sans-serif; color: #fff; background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0); }
/* privacy page */
.legal p { margin-top: 10px; line-height: 1.6; }
.legal h2 { margin-top: 28px; }
.legal a { color: #FFB347; }

/* ask tab */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { font-size: 13px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(242, 154, 38, .35); background: rgba(255, 255, 255, .03); color: var(--text); }
.chip:active { background: rgba(242, 154, 38, .18); }
.ask-in, .ask-sel { width: 100%; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(242, 154, 38, .2); color: var(--text); font: inherit; font-size: 16px; resize: vertical; }
.ask-in:focus, .ask-sel:focus { outline: none; border-color: var(--gold); }
.answer { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(242, 154, 38, .07); border: 1px solid rgba(242, 154, 38, .25); white-space: pre-wrap; line-height: 1.55; }
.field.tight { margin-top: 0; margin-bottom: 12px; }
a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* people */
.picks { display: grid; gap: 6px; max-height: 260px; overflow: auto; padding: 4px 2px; }
.pick { display: flex; gap: 10px; align-items: center; font-size: 15px; padding: 6px 4px; }
.pick input { width: 18px; height: 18px; accent-color: var(--gold); }
.link.danger { color: var(--bad); align-self: center; margin-top: 0; }
.gap-top { margin-top: 14px; }
pre.answer { font: inherit; }

/* Arabic client page */
h1.ar-title { font-family: 'SF Arabic', 'Geeza Pro', system-ui, sans-serif; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 30px; }
.pill.ar-pill { font-family: 'SF Arabic', 'Geeza Pro', system-ui, sans-serif; text-transform: none; letter-spacing: 0; font-size: 12px; }
.card.clean .check.done span { text-decoration: none; color: var(--text); }