/* brand.css - the one SomaCortex brand, shared by www.somacortex.ai and the four doors (RULING site-brand-consistency, 1 Nov 2026).
   White ground, ink text, blue for trust, clay for the one primary button, Fraunces + Inter. Edit here, both sites follow. */
:root{
  --ink:#17201f;--mute:#4a5756;--soft:#6a7675;--line:#dde4ee;--line2:#c8d3e2;
  --blue:#2a62b8;--blue2:#1d4c8f;--pale:#e9f0fb;--pale2:#f3f6fa;
  --clay:#c97a4b;--clay2:#a85f33;--cream:#fbf5f1;--bg:#ffffff;--code:#141a24;
  /* door tints: one secondary tint per door, same lightness family as the blue; used only for badges, hero bands and illustrations */
  --tint-me:#4f8fd6;--tint-dev:#17201f;--tint-org:#2b9a98;--tint-company:#4a5a78;
  /* the classic page's variable names, mapped onto the brand so its existing CSS renders on the white ground */
  --bg-elevated:#f3f6fa;--surface:#ffffff;--text:#17201f;--text-dim:#4a5756;
  --accent:#2a62b8;--accent-warm:#c97a4b;--accent-glow:rgba(42,98,184,0.10);--border:#dde4ee;
}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:Inter,system-ui,sans-serif}
h1,h2,h3,.brand,.logo{font-family:Fraunces,serif;font-weight:500;color:var(--ink)}
a{color:var(--blue)}a:hover{color:var(--blue2)}
/* the blue accents: a thin rule under section titles, blue eyebrows, one tinted band per screen, never more */
h2.job-h,.trio h2,.film h2{position:relative;padding-bottom:10px}
h2.job-h::after,.trio h2::after,.film h2::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:3px;border-radius:2px;background:var(--blue)}
.kicker,.eyebrow{font-size:13px;font-weight:600;color:var(--blue);letter-spacing:0}
.trio-card,.card,.job-council .card{background:#fff;border:1.5px solid var(--line);border-radius:16px;box-shadow:none}
.patent,.film,.job-council{background:var(--bg)}
section.trio.job-sec:nth-of-type(odd){background:var(--pale2)}
/* primary button: clay, one per screen */
.job-cta,.btn,.nav-cta,button.primary{background:var(--clay);color:#fff;border:none;border-radius:26px}
.job-cta:hover,.btn:hover{background:var(--clay2)}
/* four doors chooser */
.doors{max-width:720px;margin:0 auto;padding:8px 20px 28px}
.doors h2{margin:0 0 6px;font-size:26px;line-height:1.2}
.doors .lede{margin:0 0 14px;font-size:15px;color:var(--mute)}
.doors .grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:640px){.doors .grid{grid-template-columns:1fr 1fr}}
.door{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;border:1.5px solid var(--line);background:#fff;text-decoration:none;color:var(--ink);min-height:44px}
.door:hover{border-color:var(--blue)}
.door .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.door .name{font-size:17px;font-weight:600}
.door .price{font-size:13px;font-weight:600;color:var(--blue);text-align:right}
.door .what{font-size:14px;line-height:1.45;color:var(--mute)}
.door.me{border-left:4px solid var(--tint-me)}.door.dev{border-left:4px solid var(--tint-dev)}.door.org{border-left:4px solid var(--tint-org)}.door.company{border-left:4px solid var(--tint-company)}
.doors .note{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--pale2);font-size:12px;line-height:1.5;color:var(--mute)}
.home-switch{font-size:12px;color:var(--soft);text-align:center;padding:12px 20px 28px}
.home-switch a{color:var(--blue)}
img,video{filter:none}

/* the one logo: mark + wordmark, identical on www and the doors */
.logo,.brand{display:inline-flex;align-items:center;font:500 1.35rem Fraunces,serif;color:var(--ink);text-decoration:none;letter-spacing:-0.02em}
.logo .mark,.brand .mark{width:28px;height:28px;flex:none;margin-right:.5rem}
.logo span,.brand span{color:var(--blue)}
/* door cards on a phone: name on one line, price under it */
@media(max-width:639px){.door .row{flex-direction:column;align-items:flex-start;gap:2px}.door .price{text-align:left}}
/* door identity on the staging doors: body[data-door] set by site.js; badge and hero band only */
body[data-door=me] .badge,body[data-door=me] .kicker{color:var(--tint-me)}
body[data-door=org] .badge,body[data-door=org] .kicker{color:var(--tint-org)}
body[data-door=company] .badge,body[data-door=company] .kicker{color:var(--tint-company)}
body[data-door=dev] .badge{color:var(--tint-dev)}

/* header nav on a phone: one line each */
.top nav a{white-space:nowrap;padding:0 10px;font-size:13px}