/* ==================================================================
   Archimedes design system — shared tokens + base components.
   Source of truth: the archimedes.coach homepage design (Oct 2026).
   This file is identical in archimedes-landing/brand.css and
   archimedes-mvp/app/brand.css — keep them in sync.
=================================================================== */
:root{
  --ink:#10213A;        /* primary dark / text on light */
  --ink-2:#18304F;      /* raised panel on dark */
  --ink-line:#2C4569;   /* borders on dark */
  --ink-field:#4A5F80;  /* input borders on dark */
  --paper:#F5F6F2;      /* page ground */
  --white:#FFFFFF;
  --line:#DDE1D8;       /* borders on light */
  --line-2:#C9CFC3;
  --chip:#E3E6DE;
  --muted:#4A5568;      /* secondary text on light */
  --muted-dark:#C9D2DF; /* secondary text on dark */
  --muted-dark-2:#AEBBCD;
  --accent:#F2A93B;     /* buttons, highlights on dark */
  --accent-hover:#F5B95C;
  --accent-ink:#8A5A0E; /* accent used as text on light (AA) */
  --accent-soft:#FBEBD0;/* accent tint on light */
  --error:#FFB4A6;      /* error text on dark */
  --error-ink:#A3342A;  /* error text on light */
  --ok-ink:#25643F;
  --ok-soft:#E3F1E6;
  --display:'Bricolage Grotesque','Helvetica Neue',Helvetica,sans-serif;
  --body:'IBM Plex Sans','Helvetica Neue',Helvetica,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --r-sm:10px; --r-md:18px; --r-lg:22px; --r-xl:24px; --r-pill:999px;
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--ink)}
a:hover{color:#3A4F70}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.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}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px;margin:0 auto;padding:0 24px}
.dark{background:var(--ink);color:var(--paper)}
.dark a{color:var(--paper)}
.band{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

h1,h2,h3{font-family:var(--display);margin:0}
h1{font-weight:800;font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:1.04;letter-spacing:-0.025em}
h2{font-weight:800;font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;letter-spacing:-0.02em}
h3{font-weight:700;font-size:24px;line-height:1.2}
p{margin:0}
.lead{font-size:19px}
.kicker{font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.dark .kicker{color:var(--accent)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px;
  min-height:56px;padding:14px 26px;border-radius:var(--r-pill);border:0;background:var(--accent);color:var(--ink);
  cursor:pointer;text-decoration:none}
.btn:hover{background:var(--accent-hover);color:var(--ink)}
.btn[disabled]{opacity:.65;cursor:progress}
.tag{font-family:var(--mono);font-size:12px;padding:4px 10px;border-radius:var(--r-pill);background:var(--chip);color:#3A4556;white-space:nowrap}

/* ---------- Nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:22px;text-decoration:none;color:var(--paper)}
.logo svg{flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px;flex-wrap:wrap}
.nav-links a{color:var(--muted-dark);text-decoration:none}
.nav-links a:hover{color:var(--paper)}
.nav-links .login{color:var(--paper);border:1px solid var(--ink-field);padding:10px 18px;border-radius:var(--r-pill);min-height:44px;display:inline-flex;align-items:center}
@media (max-width:640px){.nav-links a:not(.login){display:none}}

/* ---------- Footer ---------- */
.footer{padding:40px 24px 56px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.footer nav{display:flex;gap:20px;flex-wrap:wrap}
.footer a{color:var(--muted)}
.footer .footer-brand{display:flex;flex-direction:column;gap:10px;max-width:640px}
.footer .logo{color:var(--ink);font-size:18px}

/* ---------- Legal / long-form pages ---------- */
.page-head{padding:24px 0 56px}
.page-head h1{font-size:clamp(2.2rem,4.2vw,3.4rem);margin-top:12px}
.page-head .sub{color:var(--muted-dark);margin-top:12px}
.prose{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,4vw,48px);margin:-28px auto 0;max-width:820px;line-height:1.65;font-size:17px}
.prose h2{font-size:clamp(1.3rem,2.2vw,1.6rem);letter-spacing:-0.01em;margin:36px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px}
.prose ul{padding-left:22px;margin:0 0 14px}
.prose li{margin:6px 0}
.prose a{color:var(--ink);text-underline-offset:2px}
.prose code{font-family:var(--mono);font-size:.85em;background:var(--chip);padding:1px 5px;border-radius:5px;word-break:break-all}
.prose .lead{color:var(--muted);font-size:15px}

/* ---------- Brand loader (logo lever rocking) ---------- */
.brand-loader{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.brand-loader .mark{width:88px;height:88px;border-radius:24px;background:var(--ink);color:var(--accent);display:grid;place-items:center;box-shadow:0 0 0 1px var(--ink-line)}
.brand-loader .mark svg{width:56px;height:56px;overflow:visible}
.brand-loader .beam{transform-origin:15px 15px;transform-box:view-box;animation:arch-rock 1.6s ease-in-out infinite}
@keyframes arch-rock{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@media (prefers-reduced-motion:reduce){.brand-loader .beam{animation:none}}
.brand-loader .title{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.2}
.brand-loader .sub{font-size:15px;color:var(--muted-dark)}