/* The AI Campus — site design system.
   Ported from funnel/idea-engine-guide.html. Keep the look: OLED black,
   electric blue, blue diamond markers, double-bezel cards, no emoji,
   no gradients beyond the subtle radial orbs. */

:root {
  --bg:#050607; --surface:#0C0E12; --surface2:#08090C;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --blue:#2563EB; --blue2:#5B8DEF; --blue3:#8FB0F5;
  --text:#EDEFF2; --muted:#A7ADB8; --dim:#5F6672;
  --display:'Outfit',"Clash Display",sans-serif;
  --body:'DM Sans',"General Sans",sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',"SF Mono",Menlo,monospace;
}
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; }
h1,h2,h3,p { margin:0; }
img { max-width:100%; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.serif { font-family:var(--serif); font-style:italic; font-weight:400; }

.orbs { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(120px); }
.orb1 { width:720px; height:720px; background:rgba(37,99,235,.16); top:-300px; right:-220px; }
.orb2 { width:560px; height:560px; background:rgba(37,99,235,.09); top:1400px; left:-260px; }
.orb3 { width:640px; height:640px; background:rgba(37,99,235,.12); bottom:-320px; right:-200px; }
.wrap { position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 28px; }

/* ---------- nav ---------- */
.top { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0; }
.brand { display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:.02em; text-decoration:none; }
.brand img { width:44px; height:auto; display:block; mix-blend-mode:screen; }
.nav-right { display:flex; align-items:center; gap:26px; }
.nav-links { display:flex; align-items:center; gap:24px; }
.nav-links a { font-size:15px; font-weight:500; color:var(--muted); text-decoration:none; transition:color .25s ease; }
.nav-links a:hover { color:var(--text); }
.nav-links a[aria-current="page"] { color:var(--text); }
a.join { font-weight:600; font-size:15px; color:var(--blue2); text-decoration:none; padding:10px 16px; border:1px solid rgba(91,141,239,.35); border-radius:999px; white-space:nowrap; transition:background .25s ease, border-color .25s ease; }
a.join:hover { background:rgba(37,99,235,.12); border-color:rgba(91,141,239,.6); }

/* ---------- shared type ---------- */
.eyebrow { display:flex; align-items:center; gap:12px; font-weight:600; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--blue2); }
.diamond { width:9px; height:9px; background:var(--blue); transform:rotate(45deg); flex:0 0 auto; }

section { padding:72px 0; border-top:1px solid var(--line); }
section h2 { font-family:var(--display); font-weight:700; font-size:clamp(32px,4vw,46px); line-height:1.05; letter-spacing:-.02em; margin-top:18px; text-wrap:balance; max-width:22ch; }
section .intro { font-size:19px; color:var(--muted); margin-top:16px; max-width:58ch; }
section .intro b { color:var(--text); font-weight:500; }
.rule { margin-top:22px; font-size:16px; color:var(--muted); max-width:62ch; }
.rule b { color:var(--text); font-weight:500; }

.ctas { display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; align-items:center; }
.btn { display:inline-flex; align-items:center; gap:14px; padding:14px 18px 14px 24px; border-radius:999px; font-weight:600; font-size:16px; text-decoration:none; transition:transform .5s cubic-bezier(.2,.7,.3,1), background .3s ease; }
.btn:active { transform:scale(.98); }
.btn.primary { background:var(--text); color:var(--bg); }
.btn.primary:hover { background:#fff; }
.btn .arr { width:30px; height:30px; border-radius:50%; background:rgba(5,6,7,.1); display:inline-flex; align-items:center; justify-content:center; font-size:16px; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arr { transform:translate(2px,-1px) scale(1.05); }
.btn.ghost { border:1px solid var(--line2); color:var(--text); background:rgba(255,255,255,.02); }
.btn.ghost:hover { background:rgba(255,255,255,.05); }
.ctas .fine { font-size:14px; color:var(--dim); }

/* ---------- cards ---------- */
.card { border-radius:24px; padding:4px; background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 45%, rgba(37,99,235,.22)); }
.card .in { border-radius:20px; height:100%; padding:28px 26px; background:linear-gradient(180deg,var(--surface),var(--surface2)); box-shadow:inset 0 1px 1px rgba(255,255,255,.06); }
.card .k { font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.16em; color:var(--blue); }
.card h3 { font-family:var(--display); font-weight:600; font-size:24px; line-height:1.15; margin-top:10px; }
.card p { font-size:16px; color:var(--muted); margin-top:10px; }
.card p b { color:var(--text); font-weight:500; }
.three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:40px; }
.shell { border-radius:28px; padding:6px; background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 40%, rgba(37,99,235,.28)); }
.core { border-radius:22px; background:linear-gradient(180deg,var(--surface),var(--surface2)); box-shadow:inset 0 1px 1px rgba(255,255,255,.08); overflow:hidden; }

/* ---------- home: hero ---------- */
.home-hero { padding:70px 0 84px; }
.home-hero h1 { font-family:var(--display); font-weight:700; font-size:clamp(44px,6.4vw,80px); line-height:1.0; letter-spacing:-.02em; margin-top:22px; text-wrap:balance; max-width:15ch; }
.home-hero h1 .blue { color:var(--blue2); }
.home-hero .lede { font-size:21px; color:var(--muted); margin-top:24px; max-width:56ch; }

/* home hero, two-up with the classroom roster */
.home-hero.split { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:56px; align-items:center; }
.home-hero.split h1 { font-size:clamp(44px,5.4vw,68px); max-width:13ch; }
.home-hero.split .lede { font-size:19.5px; max-width:44ch; }
.home-hero.split .marks { flex-direction:column; gap:10px; }
.roster { padding:28px 26px 26px; }
.roster .rh { display:flex; align-items:center; gap:12px; font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue2); }
.roster ul { list-style:none; margin:20px 0 0; padding:0; }
.roster li { display:grid; grid-template-columns:44px minmax(0,1fr); align-items:baseline; row-gap:2px; padding:14px 0; border-top:1px solid var(--line); }
.roster li:first-child { border-top:0; padding-top:4px; }
.roster .n { font-family:var(--mono); font-size:15px; color:var(--blue2); }
.roster .t { font-family:var(--display); font-weight:600; font-size:17px; color:var(--text); }
.roster .d { grid-column:2; font-size:14px; color:var(--muted); }
.roster .rf { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; color:var(--dim); }
.home-hero .lede b { color:var(--text); font-weight:500; }
.home-hero .marks { display:flex; gap:28px; flex-wrap:wrap; margin-top:36px; font-size:15px; color:var(--muted); }
.home-hero .marks span::before { content:""; display:inline-block; width:7px; height:7px; background:var(--blue); transform:rotate(45deg); margin-right:10px; vertical-align:middle; }

/* ---------- systems grid (what you'll build) ---------- */
.systems { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:40px; }
.system { padding:26px 24px; border-radius:20px; background:linear-gradient(180deg,var(--surface),var(--surface2)); border:1px solid var(--line); }
.system .k { font-family:var(--mono); font-size:13px; color:var(--blue2); letter-spacing:-.02em; }
.system h3 { font-family:var(--display); font-weight:600; font-size:21px; line-height:1.2; margin-top:12px; }
.system p { font-size:15.5px; color:var(--muted); margin-top:8px; }

/* ---------- tracks ---------- */
.tracks { display:flex; flex-direction:column; gap:14px; margin-top:40px; }
.track { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:22px; align-items:start; padding:24px 26px; border-radius:20px; background:linear-gradient(180deg,var(--surface),var(--surface2)); border:1px solid var(--line); }
.track .k { font-family:var(--mono); font-size:26px; color:var(--blue2); line-height:1.15; }
.track h3 { font-family:var(--display); font-weight:600; font-size:22px; line-height:1.15; }
.track p { font-size:16px; color:var(--muted); margin-top:6px; max-width:62ch; }
.track p b { color:var(--text); font-weight:500; }
.track .tag { font-family:var(--mono); font-size:13px; color:var(--dim); white-space:nowrap; padding-top:6px; }

/* ---------- guide cards ---------- */
.guide-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:40px; }
a.guide { text-decoration:none; display:block; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
a.guide:hover { transform:translateY(-3px); }
a.guide .in { display:flex; flex-direction:column; gap:10px; height:100%; }
a.guide .meta { display:flex; align-items:center; justify-content:space-between; gap:16px; }
a.guide .date { font-family:var(--mono); font-size:13px; color:var(--dim); }
a.guide h3 { font-family:var(--display); font-weight:600; font-size:24px; line-height:1.15; margin-top:2px; }
a.guide p { font-size:16px; color:var(--muted); margin-top:0; }
a.guide .read { margin-top:auto; padding-top:14px; font-weight:600; font-size:15px; color:var(--blue2); }
a.guide .read .arr { margin-left:8px; transition:transform .4s cubic-bezier(.2,.7,.3,1); display:inline-block; }
a.guide:hover .read .arr { transform:translateX(4px); }
.empty { margin-top:40px; padding:28px 26px; border-radius:20px; border:1px solid var(--line); background:var(--surface2); color:var(--muted); font-size:16px; }

/* ---------- two-up prose blocks ---------- */
.duo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:40px; }
.duo div { padding:28px 26px; border-radius:20px; background:linear-gradient(180deg,var(--surface),var(--surface2)); border:1px solid var(--line); }
.duo h3 { font-family:var(--display); font-weight:600; font-size:24px; }
.duo p { font-size:16px; color:var(--muted); margin-top:10px; }
.duo p b { color:var(--text); font-weight:500; }

/* ---------- prose (about) ---------- */
.prose { max-width:64ch; }
.prose p { font-size:18px; color:var(--muted); margin-top:18px; }
.prose p b { color:var(--text); font-weight:500; }
.prose ul { margin:18px 0 0; padding:0; list-style:none; }
.prose li { position:relative; padding-left:24px; font-size:18px; color:var(--muted); margin-top:12px; }
.prose li b { color:var(--text); font-weight:500; }
.prose li::before { content:""; position:absolute; left:0; top:11px; width:8px; height:8px; background:var(--blue); transform:rotate(45deg); }

/* ---------- closing CTA + footer ---------- */
.cta { text-align:center; padding:96px 0 80px; border-top:1px solid var(--line); }
.cta img { width:120px; height:auto; display:block; margin:0 auto 26px; mix-blend-mode:screen; }
.cta h2 { font-family:var(--display); font-weight:700; font-size:clamp(32px,4vw,46px); line-height:1.05; letter-spacing:-.02em; margin:0 auto; max-width:16ch; text-wrap:balance; }
.cta .sub { font-family:var(--serif); font-style:italic; font-size:24px; color:var(--blue3); margin-top:18px; }
.cta .ctas { justify-content:center; }
.cta .list { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:34px; font-size:15px; color:var(--muted); }
.cta .list span::before { content:""; display:inline-block; width:7px; height:7px; background:var(--blue); transform:rotate(45deg); margin-right:10px; vertical-align:middle; }
.cta .url { font-family:var(--mono); font-size:15px; color:var(--dim); margin-top:26px; }

footer { padding:28px 0 40px; border-top:1px solid var(--line); color:var(--dim); font-size:13px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
footer a { color:var(--dim); text-decoration:none; }
footer a:hover { color:var(--muted); }
footer .fnav { display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- guide page: hero + outlier card ---------- */
.hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; align-items:center; padding:64px 0 88px; }
.hero h1 { font-family:var(--display); font-weight:700; font-size:clamp(44px,6.2vw,76px); line-height:1.0; letter-spacing:-.02em; margin-top:22px; text-wrap:balance; }
.hero h1 .blue { color:var(--blue2); }
.hero .lede { font-size:21px; color:var(--muted); margin-top:22px; max-width:34ch; }
.hero .lede b { color:var(--text); font-weight:500; }
.post { padding:0; }
.post .thumb { aspect-ratio:16/10; background:radial-gradient(120% 90% at 20% 0%, rgba(37,99,235,.55), rgba(37,99,235,.08) 45%, #0A0C10 80%); position:relative; display:flex; align-items:flex-end; padding:22px; }
.post .thumb .tag { position:absolute; top:16px; left:16px; padding:5px 9px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:rgba(5,6,7,.8); border:1px solid var(--line2); border-radius:6px; color:var(--muted); }
.post .thumb .cap { font-family:var(--serif); font-style:italic; font-size:22px; color:#C8D6F5; line-height:1.3; max-width:22ch; }
.post .body { display:flex; gap:18px; padding:20px 22px 22px; align-items:stretch; }
.post .t { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.post h3 { font-family:var(--body); font-weight:600; font-size:16px; line-height:1.3; }
.post .who { color:var(--muted); font-size:14px; }
.post .stats { font-family:var(--mono); font-size:13px; color:var(--dim); margin-top:auto; display:flex; gap:12px; flex-wrap:wrap; }
.post .stats .v { color:var(--muted); }
.badge { align-self:flex-start; font-family:var(--mono); font-weight:500; font-size:30px; line-height:1; padding:12px 14px; border-radius:10px; background:var(--blue); color:#fff; letter-spacing:-.03em; }
.post .why { padding:14px 22px 20px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
.post .why b { color:var(--text); font-weight:500; }

/* ---------- guide page: formula, steps, timeline, scores, costs ---------- */
.formula { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:18px; align-items:center; margin-top:40px; }
.formula .box { padding:26px 24px; border-radius:20px; background:linear-gradient(180deg,var(--surface),var(--surface2)); border:1px solid var(--line); }
.formula .box .l { font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.formula .box .n { font-family:var(--mono); font-size:40px; margin-top:8px; letter-spacing:-.03em; }
.formula .box.result { border-color:rgba(91,141,239,.45); }
.formula .box.result .n { color:var(--blue2); }
.formula .op { font-family:var(--mono); font-size:34px; color:var(--dim); text-align:center; }
.formula .box p { font-size:14px; color:var(--muted); margin-top:8px; }

.steps { display:flex; flex-direction:column; gap:14px; margin-top:40px; }
.step { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:22px; align-items:start; padding:24px 26px; border-radius:20px; background:linear-gradient(180deg,var(--surface),var(--surface2)); border:1px solid var(--line); }
.step .k { font-family:var(--mono); font-size:26px; color:var(--blue2); line-height:1.15; }
.step h3 { font-family:var(--display); font-weight:600; font-size:22px; line-height:1.15; }
.step p { font-size:16px; color:var(--muted); margin-top:6px; max-width:60ch; }
.step p b { color:var(--text); font-weight:500; }
.step .time { font-family:var(--mono); font-size:13px; color:var(--dim); white-space:nowrap; padding-top:6px; }
.step.hi { border-color:rgba(91,141,239,.4); }

.morning { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin-top:40px; position:relative; }
.morning::before { content:""; position:absolute; left:6%; right:6%; top:14px; height:1px; background:var(--line2); }
.m { position:relative; padding:0 12px; text-align:center; }
.m .dot { width:13px; height:13px; background:var(--blue); transform:rotate(45deg); margin:8px auto 22px; position:relative; z-index:1; box-shadow:0 0 0 6px var(--bg); }
.m .t { font-family:var(--mono); font-size:13px; color:var(--dim); }
.m h3 { font-family:var(--display); font-weight:600; font-size:18px; margin-top:6px; line-height:1.2; }
.m p { font-size:14px; color:var(--muted); margin-top:6px; }

.scores { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:40px; }
.score { padding:26px 24px; border-radius:20px; background:linear-gradient(180deg,var(--surface),var(--surface2)); border:1px solid var(--line); }
.score .n { font-family:var(--mono); font-size:44px; color:var(--blue2); letter-spacing:-.03em; line-height:1; }
.score .n small { font-size:16px; color:var(--dim); letter-spacing:0; margin-left:6px; }
.score h3 { font-family:var(--display); font-weight:600; font-size:22px; margin-top:12px; }
.score p { font-size:15px; color:var(--muted); margin-top:6px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.chip { font-size:13px; padding:7px 12px; border-radius:999px; border:1px solid var(--line2); color:var(--muted); }
.chip.src { border-color:rgba(91,141,239,.4); color:var(--blue3); }
.chips-l { font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-top:26px; }

.costs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:40px; }
.cost { border-radius:24px; padding:4px; background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 45%, rgba(37,99,235,.22)); }
.cost .in { border-radius:20px; padding:30px 28px; background:linear-gradient(180deg,var(--surface),var(--surface2)); height:100%; }
.cost .l { font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--blue2); }
.cost .big { font-family:var(--mono); font-size:64px; line-height:1; margin-top:14px; letter-spacing:-.04em; }
.cost .big small { font-size:22px; color:var(--dim); letter-spacing:0; margin-left:6px; }
.cost p { font-size:16px; color:var(--muted); margin-top:14px; }
.cost p b { color:var(--text); font-weight:500; }
.asof { font-size:13px; color:var(--dim); margin-top:18px; }

.who { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:40px; }
.who div { padding:28px 26px; border-radius:20px; background:linear-gradient(180deg,var(--surface),var(--surface2)); border:1px solid var(--line); }
.who h3 { font-family:var(--display); font-weight:600; font-size:24px; }
.who p { font-size:16px; color:var(--muted); margin-top:10px; }
.who p b { color:var(--text); font-weight:500; }

/* ---------- guide page: prompt blocks ---------- */
.prompts { display:flex; flex-direction:column; gap:18px; margin-top:40px; }
.prompt { border-radius:24px; padding:4px; background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 45%, rgba(37,99,235,.22)); }
.prompt .ph { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:24px 26px 18px; background:linear-gradient(180deg,var(--surface),var(--surface2)); border-radius:20px 20px 0 0; }
.prompt .k { font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.16em; color:var(--blue); }
.prompt h3 { font-family:var(--display); font-weight:600; font-size:24px; line-height:1.15; margin-top:8px; }
.prompt .ps { font-size:14px; color:var(--dim); margin-top:4px; }
.copy { flex:0 0 auto; font:inherit; font-weight:600; font-size:14px; color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--line2); border-radius:999px; padding:10px 16px; cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease; }
.copy:hover { background:rgba(255,255,255,.08); }
.copy.done { color:var(--blue3); border-color:rgba(91,141,239,.5); }
.prompt .pt { padding:20px 26px 26px; background:var(--surface2); border-radius:0 0 20px 20px; border-top:1px solid var(--line); font-size:15.5px; line-height:1.6; color:var(--muted); }
.prompt .pt p + p { margin-top:12px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  body { font-size:16.5px; }
  .top { flex-wrap:wrap; gap:14px; }
  .nav-right { width:100%; justify-content:space-between; gap:16px; }
  .nav-links { gap:18px; }
  .hero { grid-template-columns:1fr; gap:36px; padding:40px 0 60px; }
  .home-hero { padding:44px 0 60px; }
  .home-hero.split { grid-template-columns:1fr; gap:34px; }
  .home-hero.split .marks { flex-direction:row; flex-wrap:wrap; gap:14px 22px; }
  .three, .scores, .costs, .who, .systems, .guide-list, .duo { grid-template-columns:1fr; }
  .formula { grid-template-columns:1fr; }
  .formula .op { display:none; }
  .morning { grid-template-columns:1fr; gap:22px; }
  .morning::before { display:none; }
  .m { text-align:left; padding:0; display:grid; grid-template-columns:28px 1fr; column-gap:10px; }
  .m .dot { margin:8px 0 0; grid-row:1 / span 3; }
  .step, .track { grid-template-columns:48px 1fr; }
  .step .time, .track .tag { grid-column:2; padding-top:0; margin-top:10px; }
  .prompt .ph { flex-direction:column; }
  section { padding:56px 0; }
  .cta { padding:64px 0 56px; }
}
@media (max-width: 520px) {
  .cta .list, .home-hero .marks { gap:14px 22px; }
  .cost .big { font-size:52px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .arr, a.guide, a.guide .read .arr { transition:none; }
}