/* Magrios design system — ported from the approved Claude Design prototype */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#FAF8F3; --card:#FFFFFF; --ink:#1C1A16; --ink2:#6E6659; --line:#E7E1D4; --line2:#D9D2C0;
  --ev:#2E6B4E; --ev-bg:#EEF4EE; --ev-line:#BBD2C2;
  --hyp:#8F6410; --hyp-bg:#FBF4E1; --hyp-line:#DDBE6E;
  --mut:#776F61; --mut-bg:#F3F0E7; /* #776F61 = 4.68:1 on paper — AA for the small (hint/footer/th) text it carries */
  --tgt:#A03A2C; --tgt-bg:#F8ECE8; --tgt-line:#DFB4A9;
  --acc:#2B6B76; --acc-bg:#EAF1F2;
  --wat:#44403A;
  --serif:'Newsreader',Georgia,serif;
  --sans:'IBM Plex Sans',-apple-system,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper)}
body{font-family:var(--sans);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--acc);text-decoration:none} a:hover{color:var(--ink);text-decoration:underline}
::selection{background:#DDE9E4}
input,button,select{font-family:inherit}
button{cursor:pointer}
/* One branded focus ring for every interactive element — :focus-visible so it
   shows for keyboard/switch navigation without flashing on every mouse click. */
a:focus-visible,button:focus-visible,.btn:focus-visible,[role=button]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
/* Skip-to-content link: off-screen until keyboard focus, then pinned top-left. */
.skip{position:absolute;left:8px;top:-48px;z-index:100;background:var(--ink);color:var(--paper);
  padding:9px 16px;border-radius:8px;font-size:13.5px;font-weight:600;transition:top 120ms ease-out}
.skip:focus{top:8px;text-decoration:none;color:var(--paper)}
[tabindex="-1"]:focus{outline:none} /* skip-link target shouldn't paint a focus ring on the region itself */

.wrap{max-width:1060px;margin:0 auto;padding:0 28px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
/* Brand lockup (2026-07-16, Concept A "Fixpoint" from docs/brand/): four brackets converging
 * on a point of signal — the moment a market comes into focus. Mark ships as a data-URI on
 * .logo::before so every existing logo node upgrades without markup churn; the wordmark
 * flattens to a single-color lowercase set (the accent lives in the mark's dot). */
/* Brand hierarchy (2026-07-17 polish): symbol → wordmark → quiet descriptor. The lockup is
 * the strongest element in the header; the descriptor supports, never competes. Wordmark is
 * optically balanced against the 32px mark (~1.25:1, per the Fixpoint concept sheet). */
/* Spacing lives on the mark (margin-right), NOT on flex gap — gap opens a hole between any
 * two children, so stray multi-node markup would render "mag rios". Margin can't. */
.logo{display:inline-flex;align-items:center;font-family:var(--sans,ui-sans-serif,system-ui,sans-serif);font-size:25px;font-weight:650;letter-spacing:-.028em;color:var(--ink);text-transform:lowercase;line-height:1}
.logo::before{content:"";width:32px;height:32px;flex:none;margin-right:11px;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none"><path d="M12 26 V20 Q12 12 20 12 H26 M38 12 H44 Q52 12 52 20 V26 M52 38 V44 Q52 52 44 52 H38 M26 52 H20 Q12 52 12 44 V38" stroke="%231C1A16" stroke-width="5.5" stroke-linecap="round"/><circle cx="32" cy="32" r="7.5" fill="%232B6B76"/></svg>') no-repeat center/contain}
.logo b,.logo em{color:inherit;font-weight:inherit;font-style:normal}
/* Inverted mark for dark surfaces (auth brand panel): paper brackets, brighter dot. */
.logo.inv::before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none"><path d="M12 26 V20 Q12 12 20 12 H26 M38 12 H44 Q52 12 52 20 V26 M52 38 V44 Q52 52 44 52 H38 M26 52 H20 Q12 52 12 44 V38" stroke="%23FAF8F3" stroke-width="5.5" stroke-linecap="round"/><circle cx="32" cy="32" r="7.5" fill="%238FB8BF"/></svg>')}
/* Header descriptor: BESIDE the wordmark behind a hairline — the Stripe-docs pattern. It is
 * the acronym's expansion (MAGRIOS = MArket GRowth Intelligence OS), quiet by design, and
 * disappears first on small screens so the lockup never crowds. */
.brand-suffix{display:inline-block;margin-left:27px;padding-left:16px;border-left:1px solid var(--line);font-size:10.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--mut);white-space:nowrap;align-self:center;transform:translateY(1px)}
@media(max-width:820px){.brand-suffix{display:none}}
/* Stacked variant (login cards, centered contexts) — kept for surfaces where beside won't fit. */
.brand-tag{display:block;font-size:9.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);margin-top:5px;white-space:nowrap}
.brand-col{display:inline-flex;flex-direction:column;line-height:1}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:14px}
h1.hero{font-family:var(--serif);font-size:46px;font-weight:500;letter-spacing:-.02em;line-height:1.1;max-width:19ch}
.lede{color:var(--ink2);font-size:16.5px;max-width:58ch;margin-top:18px;line-height:1.6}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 26px}
.btn{display:inline-block;background:var(--ink);color:var(--paper);border:none;border-radius:9px;padding:13px 24px;font-size:14.5px;font-weight:600;transition:background-color 150ms ease-out,transform 100ms ease-out,opacity 150ms ease-out}
.btn:hover{background:#000;text-decoration:none;color:var(--paper)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.btn.ghost:hover{border-color:var(--ink);background:transparent}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}
input[type=text]{width:100%;font-size:14.5px;padding:12px 14px;border:1px solid var(--line2);border-radius:9px;background:var(--card);color:var(--ink)}
input[type=text]:focus{outline:2px solid var(--acc-bg);border-color:var(--acc)}
label.f{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin:16px 0 6px}
.hint{font-size:12px;color:var(--mut);margin-top:6px;line-height:1.5}
.err{color:var(--tgt);font-size:13px;margin-top:10px}

table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
th{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);background:#FCFAF5;font-weight:500}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;font-size:13.5px}
tr:last-child td{border-bottom:none}

.chip{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;padding:2px 9px;border-radius:99px;border:1px solid var(--line);color:var(--ink2);background:var(--mut-bg);white-space:nowrap}
.chip.hi{border-color:var(--tgt-line);color:var(--tgt);background:var(--tgt-bg)}
.chip.med{border-color:var(--hyp-line);color:var(--hyp);background:var(--hyp-bg)}
footer{margin:70px 0 44px;color:var(--mut);font-size:12px;border-top:1px solid var(--line);padding-top:22px;line-height:1.6}
@media(max-width:860px){h1.hero{font-size:33px}}