/* ExternUp marketing site — Deep Teal brand system (mirrors frontend/src/style.css tokens). */
:root {
  --teal-50:#F0F9F7; --teal-100:#D6ECE8; --teal-300:#6FC3B7; --teal-500:#0D8074; --teal-600:#0A6E63; --teal-700:#0A5F57; --teal-900:#0C3B37;
  --mint:#5EEAD4; --stone-0:#FFFFFF; --stone-50:#FAFAF9; --stone-100:#F5F5F4; --stone-200:#E7E5E4; --stone-300:#D6D3D1; --stone-400:#A8A29E; --stone-500:#78716C; --stone-600:#57534E; --stone-700:#44403C; --stone-900:#1C1B19;
  --surface-dark:#16211F; --font-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius-sm:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:18px;
  --shadow-md:0 1px 2px rgba(28,27,25,.05),0 18px 40px rgba(28,27,25,.06);
}
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:400; font-display:swap; src:url(assets/fonts/dm-sans-400.woff2) format("woff2"); }
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:500; font-display:swap; src:url(assets/fonts/dm-sans-500.woff2) format("woff2"); }
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:700; font-display:swap; src:url(assets/fonts/dm-sans-700.woff2) format("woff2"); }
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--font-sans); color:var(--stone-900); background:var(--stone-50); line-height:1.55; font-size:16px; }
a { color:var(--teal-700); text-decoration:none; } a:hover { text-decoration:underline; }
h1,h2,h3 { margin:0 0 .4em; line-height:1.15; letter-spacing:-.01em; }
h1 { font-size:clamp(34px,5vw,52px); font-weight:700; } h2 { font-size:clamp(24px,3vw,32px); font-weight:700; } h3 { font-size:19px; font-weight:600; }
p { margin:0 0 1em; } .muted { color:var(--stone-600); } .small { font-size:14px; }
.wrap { width:min(1080px,100% - 40px); margin:0 auto; }
/* nav */
.nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--stone-900); font-weight:700; font-size:22px; letter-spacing:-.01em; }
.brand:hover { text-decoration:none; } .brand img { width:28px; height:28px; border-radius:7px; display:block; } .brand b { color:var(--teal-500); }
.nav-links { display:flex; align-items:center; gap:22px; font-weight:500; } .nav-links a { color:var(--stone-700); } .nav-links a:hover { color:var(--teal-700); text-decoration:none; }
/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:var(--radius-md); font-weight:600; border:1px solid transparent; cursor:pointer; font-family:inherit; font-size:15px; line-height:1.2; }
.btn:hover { text-decoration:none; } .btn-primary { background:var(--teal-500); color:#fff; } .btn-primary:hover { background:var(--teal-600); }
.btn-ghost { background:var(--stone-0); color:var(--stone-900); border-color:var(--stone-300); } .btn-ghost:hover { border-color:var(--stone-400); }
.btn-mint { background:var(--mint); color:var(--teal-900); } .btn-mint:hover { background:#7FF0DF; }
/* hero */
.hero { padding:56px 0 40px; display:grid; gap:36px; grid-template-columns:1.15fr 1fr; align-items:center; }
.hero .lead { font-size:19px; color:var(--stone-600); max-width:54ch; }
.eyebrow { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-700); background:var(--teal-50); border:1px solid var(--teal-100); border-radius:999px; padding:5px 12px; margin-bottom:16px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
/* the "phone" card: a still-life of the student clock, all CSS, no screenshot to keep fresh */
.phone { background:var(--surface-dark); color:#fff; border-radius:28px; padding:26px 22px; box-shadow:var(--shadow-md); max-width:340px; margin:0 auto; }
.phone .t { color:#9DB0AC; font-size:13px; } .phone .big { font-variant-numeric:tabular-nums; font-size:44px; font-weight:700; letter-spacing:-.02em; color:var(--mint); margin:6px 0 2px; }
.phone .row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-top:1px solid rgba(255,255,255,.08); font-size:14px; }
.pill { display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:rgba(94,234,212,.14); color:var(--mint); }
.pill.warm { background:rgba(245,158,11,.16); color:#FCD34D; }
.phone .cta { margin-top:14px; width:100%; }
/* sections */
section { padding:44px 0; } .grid3 { display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }
.card { background:var(--stone-0); border:1px solid var(--stone-200); border-radius:var(--radius-lg); padding:22px; }
.card .num { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:10px; background:var(--teal-50); color:var(--teal-700); font-weight:700; margin-bottom:12px; }
.band { background:var(--surface-dark); color:#fff; border-radius:var(--radius-xl); padding:40px; display:grid; gap:24px; grid-template-columns:1.3fr 1fr; align-items:center; }
.band h2 { color:#fff; } .band p { color:#CBC7C2; } .band .mint { color:var(--mint); }
.chips { display:flex; flex-wrap:wrap; gap:8px; } .chip { border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:6px 12px; font-size:14px; color:#F5F5F4; }
/* prose pages */
.prose { max-width:760px; } .prose h2 { font-size:22px; margin-top:1.6em; } .prose h1 { margin-bottom:.2em; }
.prose ul { padding-left:1.2em; } .prose li { margin:.3em 0; }
/* forms */
form { display:grid; gap:14px; max-width:620px; }
label { display:grid; gap:6px; font-weight:600; font-size:14px; }
input,select,textarea { font:inherit; font-size:15px; padding:11px 12px; border:1px solid var(--stone-300); border-radius:var(--radius-sm); background:var(--stone-0); color:var(--stone-900); width:100%; }
input:focus,select:focus,textarea:focus { outline:2px solid var(--teal-300); outline-offset:1px; border-color:var(--teal-500); }
textarea { min-height:140px; resize:vertical; } .two { display:grid; gap:14px; grid-template-columns:1fr 1fr; }
.hidden { display:none; }
/* footer */
footer { border-top:1px solid var(--stone-200); margin-top:40px; padding:26px 0 40px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--stone-500); font-size:14px; }
footer nav { display:flex; gap:18px; } footer a { color:var(--stone-600); }
@media (max-width:820px) { .hero,.band,.grid3,.two { grid-template-columns:1fr; } .hero { padding-top:32px; } .band { padding:28px; } .nav-links a.hide-sm { display:none; } }