/* Teaching3D — the site's shared design system (began as the front-page mockups' mock.css, 2026-10-05).
   Light, polished top; blue→teal→green "aurora" accents; strong blacks and whites; glass panels;
   dark "viewport" bands lower down for the 3D/game/VFX fun. */



* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-head); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.3rem); font-weight: 700; letter-spacing: -.035em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 650; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.muted { color: var(--muted); }
.mono { font-family: var(--f-mono); }
.aurora-text { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- brand marks (SVG masks: themeable, gradient-fillable) ---------- */
/* ---------- eyebrow / chips ---------- */
.eyebrow { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-d); display: inline-flex; align-items: center; gap: .6em; margin-bottom: 1rem; }
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--aurora); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: .82rem; padding: .32em .8em; border-radius: 99px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(8px); color: var(--ink-2); white-space: nowrap; }
.chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); margin-right: .45em; vertical-align: 1px; }

/* ---------- buttons ---------- */
.btn { --h: 48px; display: inline-flex; align-items: center; gap: .55em; height: var(--h); padding: 0 1.35em; border-radius: 99px; font-weight: 600; font-size: .98rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: #fff; box-shadow: 0 10px 24px -12px rgba(10, 14, 19, .7); }
.btn-ink:hover { box-shadow: 0 14px 30px -12px rgba(10, 14, 19, .8); }
.btn-aurora { background: var(--aurora); color: #fff; box-shadow: 0 10px 26px -12px rgba(19, 140, 160, .8); }
.btn-glass { background: var(--glass-strong); color: var(--ink); border-color: var(--line); backdrop-filter: blur(10px); }
.btn-ghost-dark { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .18); }
.btn-sm { --h: 38px; padding: 0 1em; font-size: .9rem; }
.btn .arr { transition: transform .18s; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- shared site chrome lives in chrome.css ---------- */
.soon { display: inline-block; font-size: .72em; font-weight: 600; letter-spacing: .02em; padding: .15em .6em; margin-left: .3em; border-radius: 99px; background: var(--hud); color: #1a1205; vertical-align: .1em; white-space: nowrap; }
.btn.is-soon { opacity: .7; cursor: default; }

/* ---------- aurora + grid backdrop (light) ---------- */
.aurora-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora-bg .ribbon { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; animation: drift 22s ease-in-out infinite alternate; }
.aurora-bg .r1 { width: 60vw; height: 26vw; left: -10vw; top: -6vw; background: radial-gradient(closest-side, rgba(33, 114, 229, .55), transparent); transform: rotate(-12deg); }
.aurora-bg .r2 { width: 55vw; height: 22vw; right: -12vw; top: 4vw; background: radial-gradient(closest-side, rgba(19, 179, 159, .55), transparent); transform: rotate(8deg); animation-duration: 28s; }
.aurora-bg .r3 { width: 50vw; height: 18vw; left: 25vw; top: 18vw; background: radial-gradient(closest-side, rgba(53, 207, 134, .38), transparent); transform: rotate(-4deg); animation-duration: 34s; }
@keyframes drift { from { translate: 0 0; } to { translate: 4vw 2vw; } }
.grid-floor { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 70%; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(700px) rotateX(62deg); transform-origin: 50% 100%; mask-image: linear-gradient(to top, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); }



/* ---------- hero (variant A) ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); padding-bottom: clamp(40px, 6vw, 90px); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; padding-top: clamp(24px, 5vw, 64px); }
.hero h1 { margin-bottom: .35em; }
.hero .lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-2); max-width: 34em; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6rem 0 1.4rem; }
.stage { position: relative; aspect-ratio: 1 / .92; min-height: 300px; }
.stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.hud { position: absolute; font-family: var(--f-mono); font-size: .72rem; color: var(--steel-d); letter-spacing: .04em; padding: .45em .8em; border-radius: 10px; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(10px); box-shadow: var(--shadow); white-space: nowrap; }
.hud b { color: var(--ink); font-weight: 600; }
.hud .live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: .5em; box-shadow: 0 0 0 3px rgba(53, 207, 134, .25); }
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; color: var(--muted); font-size: .88rem; }
.trust strong { font-family: var(--f-head); color: var(--ink-2); font-weight: 600; letter-spacing: .02em; }

/* ---------- sections ---------- */
.section { padding: clamp(56px, 8vw, 110px) 0; position: relative; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(26px, 4vw, 46px); }
.section-head p { max-width: 36em; color: var(--muted); margin: 0; }
.white { background: #fff; }

/* subject cards */
.subjects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.subjects > a.card { display: block; color: inherit; text-decoration: none; }
.card .media { aspect-ratio: 16 / 9; background: var(--night-2) center / cover no-repeat; position: relative; }
.card .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6, 9, 12, .45)); }
.card .media .tag { position: absolute; left: 12px; bottom: 10px; z-index: 1; color: #fff; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.card .body { padding: 18px 20px 20px; }
.card .body p { color: var(--muted); font-size: .95rem; margin: 0; }
.card .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(33, 114, 229, .1), rgba(53, 207, 134, .14)); color: var(--teal); margin-bottom: 12px; }

/* two ways to learn */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.way { position: relative; padding: clamp(24px, 3vw, 38px); border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.way.dark { background: radial-gradient(120% 120% at 100% 0%, rgba(19, 179, 159, .28), transparent 50%), radial-gradient(90% 90% at 0% 100%, rgba(33, 114, 229, .3), transparent 55%), var(--night); color: var(--night-text); border-color: rgba(255, 255, 255, .08); }
.way.dark .muted { color: var(--night-muted); }
.way ul { padding: 0; list-style: none; margin: 1.2em 0 1.6em; display: grid; gap: .55em; }
.way li { padding-left: 1.6em; position: relative; }
.way li::before { content: ""; position: absolute; left: 0; top: .52em; width: 10px; height: 10px; border-radius: 3px; background: var(--aurora); transform: rotate(45deg); }
.price { font-family: var(--f-head); font-size: 1.05rem; font-weight: 600; }

/* seminar date cards */
.dates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.date { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 18px; border-radius: var(--r); background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; transition: transform .2s; }
.date:hover { transform: translateY(-2px); }
.cal { width: 64px; border-radius: 14px; overflow: hidden; text-align: center; background: #fff; border: 1px solid var(--line); }
.cal .m { background: var(--ink); color: #fff; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; padding: 3px 0; }
.cal .d { font-family: var(--f-head); font-size: 1.7rem; font-weight: 700; padding: 2px 0 4px; }
.date h4 { font-size: 1.02rem; margin: 2px 0 .25em; }
.date .meta { font-size: .86rem; color: var(--muted); }
.levels { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.lvl { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: .2em .55em; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-2); }
.lvl.b { border-color: rgba(53, 207, 134, .5); color: #158a55; }
.lvl.i { border-color: rgba(15, 167, 196, .5); color: #0a7b91; }
.lvl.a { border-color: rgba(33, 114, 229, .5); color: #1a5fc4; }

/* ---------- dark viewport band ---------- */
.band { position: relative; background: var(--night); color: var(--night-text); overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--night-line) 1px, transparent 1px), linear-gradient(90deg, var(--night-line) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 85%); -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 85%); }
.band .aurora-glow { position: absolute; inset: auto -10% -40% -10%; height: 80%; background: radial-gradient(50% 60% at 30% 50%, rgba(33, 114, 229, .35), transparent 70%), radial-gradient(40% 50% at 70% 60%, rgba(19, 179, 159, .32), transparent 70%), radial-gradient(30% 40% at 50% 80%, rgba(53, 207, 134, .2), transparent 70%); filter: blur(30px); }
.band > .wrap { position: relative; z-index: 1; }
.band h2 { color: #fff; }
/* "read more" links at the end of a section: the front page stays short and fans out (Joe, 2026-10-06) */
.more-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; font-weight: 600; }
.more-links a { color: var(--azure); text-decoration: none; }
.more-links a:hover { text-decoration: underline; }
.more-links.dark a, .band .more-links a { color: #7ad7ef; }
/* the heart of the philosophy, self-directed learning (Joe, 2026-10-06), then the four pillars as one row of links;
   the map -> path -> challenges steps are on approach/ */
.core { max-width: 60em; }
.core-line { font-size: 1.08rem; color: var(--ink-2); margin: 0 0 16px; max-width: 46em; }
.core-line b { color: var(--ink); }
.pillar-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pillar-chips a { display: inline-block; padding: .45em 1em; border-radius: 99px; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .93rem; }
.pillar-chips a:hover { border-color: var(--azure); color: var(--azure); }
.more-links.stacked { flex-direction: column; align-items: flex-start; gap: 6px; }
.more-links .or { color: var(--muted); font-weight: 400; font-style: italic; }
.band .more-links .or { color: var(--night-muted); }
.band .muted, .band .section-head p { color: var(--night-muted); }
.band .eyebrow { color: #9fc3cf; }

/* build sequence (homage to the original logo) */
.build { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; counter-reset: step; }
.step { position: relative; padding: 18px 14px 16px; border-radius: var(--r); background: var(--glass-dark); border: 1px solid var(--glass-dark-brd); backdrop-filter: blur(10px); text-align: center; }
.step svg { width: 100%; height: 92px; display: block; margin-bottom: 10px; }
.step .k { font-family: var(--f-mono); font-size: .66rem; color: var(--night-muted); letter-spacing: .14em; }
.step .k::before { counter-increment: step; content: "0" counter(step) "  "; color: var(--teal); }
.step h4 { color: #fff; margin: .2em 0 .25em; font-size: 1rem; }
.step p { font-size: .82rem; color: var(--night-muted); margin: 0; line-height: 1.45; }
.step:not(:last-child)::after { content: "→"; position: absolute; right: -12px; top: 52px; color: var(--teal); font-size: 14px; z-index: 2; }

/* app window (fake / real 3D app shots) */
.appwin { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); background: var(--night-2); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .5); }
.appwin .bar { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: #111820; border-bottom: 1px solid rgba(255, 255, 255, .06); font-family: var(--f-mono); font-size: .72rem; color: var(--night-muted); }
.appwin .bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a4550; display: inline-block; }
.appwin .bar i:nth-child(1) { background: #ff5f57; } .appwin .bar i:nth-child(2) { background: #febc2e; } .appwin .bar i:nth-child(3) { background: #28c840; }
.appwin .bar .t { margin-left: 8px; }
.appwin .bar .st { margin-left: auto; color: var(--hud); }
.appwin img { display: block; width: 100%; border: 0; }
.appwin .screen img { height: auto; }   /* a screenshot, never the live app (Joe): whole, scaled down */
.appwin .bar .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.appwin .bar .st { white-space: nowrap; }
@media (max-width: 560px) { .appwin .bar .st { display: none; } }

.showcase { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.showcase .stack { display: grid; gap: 18px; }
.still { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); background: var(--night-3) center / cover no-repeat; min-height: 200px; }
.still .cap { position: absolute; left: 12px; bottom: 10px; right: 12px; display: flex; justify-content: space-between; gap: 10px; font-family: var(--f-mono); font-size: .68rem; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }

/* EzWings promo */
.ez { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.kbd { font-family: var(--f-mono); font-size: .78rem; padding: .15em .5em; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); }

/* testimonials */
.quotes { columns: 3 300px; column-gap: 18px; }
.quote { break-inside: avoid; margin: 0 0 18px; padding: 22px 22px 18px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.quote p { font-size: .98rem; color: var(--ink-2); }
.quote p::before { content: "“"; font-family: var(--f-head); font-size: 2.6rem; line-height: 0; vertical-align: -.42em; margin-right: .08em; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote cite { font-style: normal; font-size: .86rem; display: block; }
.quote cite b { display: block; font-family: var(--f-head); font-weight: 600; color: var(--ink); }
.quote cite span { color: var(--muted); }

/* about */
.about { display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 4vw, 48px); align-items: center; }
.portrait { width: clamp(150px, 18vw, 220px); aspect-ratio: 1; border-radius: 50%; background: center / cover no-repeat; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--line), var(--shadow-lift); position: relative; }
.portrait::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid transparent; background: var(--aurora) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fact { padding: 10px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); font-size: .9rem; }
.fact b { font-family: var(--f-head); display: block; font-size: 1.15rem; }

/* CTA + footer */
.cta-band { border-radius: var(--r-l); padding: clamp(28px, 5vw, 60px); background: radial-gradient(70% 120% at 0% 0%, rgba(33, 114, 229, .35), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgba(53, 207, 134, .3), transparent 60%), var(--night); color: #fff; display: grid; grid-template-columns: 1.4fr auto; gap: 24px; align-items: center; overflow: hidden; position: relative; }
.cta-band h2 { margin: 0 0 .3em; color: #fff; }
.cta-band p { color: var(--night-muted); margin: 0; }
.footer { background: var(--night); color: var(--night-muted); padding: 60px 0 36px; margin-top: clamp(56px, 8vw, 110px); font-size: .92rem; }
.footer .cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 30px; }
.footer h5 { color: #fff; font-family: var(--f-head); font-size: .95rem; margin: 0 0 .8em; }
.footer a { color: var(--night-muted); text-decoration: none; display: block; padding: .18em 0; }
.footer a:hover { color: #fff; }
.footer .legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--night-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .8rem; }
.footer .mark-word-heavy { height: 26px; }

.credit { font-family: var(--f-mono); font-size: .68rem; color: var(--night-muted); margin-top: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero-in { grid-template-columns: 1fr; }
  .stage { max-width: 560px; margin: 0 auto; width: 100%; }
  .subjects, .dates { grid-template-columns: 1fr 1fr; }
  .build { grid-template-columns: repeat(3, 1fr); }
  .step:nth-child(3)::after { display: none; }
  .ez, .showcase { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .ways, .subjects, .dates { grid-template-columns: 1fr; }
  .build { grid-template-columns: 1fr 1fr; }
  .step::after { display: none; }
  .about { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .facts { justify-content: center; }
  .cta-band { grid-template-columns: 1fr; }
  .hero .ctas .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- carried forward from Celestine Studios (2001–) so the brand reads as a refinement ---------- */
:root {
  /* the icy chrome of the Celestine wordmark */
  --ice: linear-gradient(180deg, #ffffff 0%, #e4f3f8 38%, #a9d4e2 52%, #e9f6fa 72%, #8ebfd0 100%);
  --hairline: linear-gradient(90deg, transparent, rgba(110, 200, 220, .9) 20%, rgba(110, 200, 220, .9) 80%, transparent);
}
.ice-text { background: var(--ice); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
.mark.ice { background: var(--ice); }
.hairline { height: 1px; background: var(--hairline); opacity: .8; border: 0; margin: 0; }
.swoosh { position: absolute; pointer-events: none; opacity: .5; }
.band .swoosh { opacity: .35; }

/* testimonials callout + LinkedIn warning */
.linkedin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 26px; padding: 14px 18px; border-radius: var(--r); background: #fff8ec; border: 1px solid #f3d9a8; color: #6b4a12; font-size: .92rem; }
.linkedin .warn { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: #f0a33a; color: #fff; padding: .25em .6em; border-radius: 6px; }
.linkedin a { font-weight: 600; color: #0a66c2; }

/* subject grid: 4-up, code and 3D-print media cards */
.subjects { grid-template-columns: repeat(4, 1fr); }
.card .media.code { background: radial-gradient(120% 120% at 100% 0%, rgba(19, 179, 159, .25), transparent 55%), #0b1117; display: flex; align-items: center; }
.card .media.code.alt { background: radial-gradient(120% 120% at 0% 0%, rgba(33, 114, 229, .3), transparent 55%), #0b1117; }
.card .media.code pre { margin: 0; padding: 14px 16px 26px; font-family: var(--f-mono); font-size: .7rem; line-height: 1.55; color: #c9d6de; white-space: pre; overflow: hidden; }
.code .k { color: #7fb8ff; } .code .f { color: #6fe0c4; } .code .s { color: #f0c27a; } .code .c { color: #6c7f8c; font-style: italic; } .code .n { color: #f39a8a; } .code .t { color: #9fe07f; }
.card .media.print { background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.0) 0 5px, rgba(255,255,255,.07) 5px 6px),
  radial-gradient(40% 55% at 50% 58%, #5fd3e6 0%, #13b39f 45%, transparent 46%),
  radial-gradient(60% 40% at 50% 92%, rgba(53,207,134,.35), transparent 70%),
  linear-gradient(160deg, #0f1820, #070b0f); }
.card .media.print::before { content: ""; position: absolute; left: 50%; top: 22%; width: 34%; aspect-ratio: 1; translate: -50% 0; border-radius: 22% 22% 30% 30%; background: repeating-linear-gradient(0deg, #d7f3f6 0 3px, #a7dce4 3px 5px); box-shadow: 0 18px 30px -10px rgba(0,0,0,.6); }
@media (max-width: 1020px) { .subjects { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .subjects { grid-template-columns: 1fr; } }
.band .aurora-glow { inset: 30% -10% -10% -10%; height: auto; }
@media (max-width: 760px) { .hide-sm { display: none; } }

/* ================= v2 (Joe's review, 2026-10-04) ================= */
/* hero: copy, then the build strip */
.hero2 .hero-copy { position: relative; z-index: 1; max-width: 1040px; padding-top: clamp(28px, 6vw, 80px); }
.hero2 h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
.hero2 .lede { font-size: clamp(1.05rem, 1.45vw, 1.24rem); color: var(--ink-2); max-width: 40em; }
.strip-wrap { position: relative; z-index: 1; margin-top: clamp(26px, 4vw, 48px); }
.strip { width: 100%; aspect-ratio: 6 / 1.15; min-height: 92px; position: relative; }
.strip canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.strip-labels { display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.strip-labels span:last-child { color: var(--ink); font-weight: 600; letter-spacing: .06em; text-transform: none; font-family: var(--f-head); font-size: .9rem; }
.strip-hint { position: absolute; right: 0; top: -6px; font-family: var(--f-mono); font-size: .66rem; color: var(--muted); opacity: .8; }
.strip-rule { height: 1px; background: var(--hairline); margin-top: 14px; opacity: .7; }

/* Learning Learning: the motto and four pillars */
.motto { font-family: var(--f-head); font-weight: 700; letter-spacing: -.035em; font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1; margin: 0 0 .25em; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pillar { padding: 24px 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.pillar::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--aurora); opacity: .85; }
.pillar .n { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; color: var(--teal); }
.pillar h3 { margin: .5em 0 .45em; }
.pillar p { color: var(--muted); font-size: .95rem; margin: 0; }
.pull { font-family: var(--f-head); font-size: clamp(1.2rem, 2.1vw, 1.6rem); line-height: 1.35; letter-spacing: -.01em; color: var(--ink); max-width: 30em; }
.pull em { font-style: normal; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* the AI-era studio band */
.pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: clamp(28px, 4vw, 46px) 0; }
/* The whole image, never cropped or stretched (Joe, 2026-10-05): it sets the frame's size — full width,
   natural height — and the labels sit on top. */
.frame { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); background: var(--night-3); }
.frame img { display: block; width: 100%; height: auto; }
.pipeline > a.frame { display: block; text-decoration: none; }
.pipeline > a.frame:is(:hover, :focus-visible) { border-color: var(--cyan); }
.frame .meta { position: absolute; right: 10px; bottom: 8px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .08em; color: #fff; padding: .2em .5em; border-radius: 5px; background: rgba(10, 14, 19, .55); }
.frame.board .meta { color: #3b3a36; background: rgba(255, 255, 255, .75); }
.frame.animatic .meta { color: var(--hud); }
.frame .lab { position: absolute; left: 12px; top: 10px; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; padding: .25em .55em; border-radius: 6px; background: rgba(6, 9, 12, .55); backdrop-filter: blur(6px); }
.frame .lab b { color: var(--teal); font-weight: 600; margin-right: .4em; }
.frame.board { background: #f4f1ea; }
.maybes { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 26px; }
.maybe { font-size: .95rem; padding: .5em 1em; border-radius: 99px; border: 1px solid var(--glass-dark-brd); background: rgba(255, 255, 255, .05); color: var(--night-text); }
.maybe b { color: #fff; font-weight: 600; }
.why { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); margin-top: clamp(26px, 4vw, 48px); padding-top: clamp(22px, 3vw, 36px); border-top: 1px solid var(--night-line); }
.pull-note { color: var(--night-muted); margin: 12px 0 0; max-width: 40em; }
.why p { color: var(--night-muted); margin: 0; }
.why h3 { color: #fff; }
.tech-note { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 18px 20px; border-radius: var(--r); background: linear-gradient(135deg, rgba(33, 114, 229, .08), rgba(53, 207, 134, .1)); border: 1px solid var(--line); }
.tech-note b { font-family: var(--f-head); }

@media (max-width: 1020px) { .pillars { grid-template-columns: 1fr 1fr; } .pipeline { grid-template-columns: 1fr; } .why { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } .strip-labels { font-size: .5rem; letter-spacing: .04em; } .strip-labels span:last-child { font-size: .62rem; } .strip-hint { display: none; } }
.hero2 .lede { max-width: 44em; }

/* ================= v3 (Joe's notes on v2, 2026-10-04) ================= */
.headstart { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hs { padding: 16px 18px; border-radius: var(--r); background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hs b { display: block; font-family: var(--f-head); font-weight: 600; margin-bottom: 4px; }
.hs span { color: var(--muted); font-size: .9rem; line-height: 1.45; display: block; }
.offers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.offer { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 24px 22px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.offer .n { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #087568; }
.offer h3 { margin: .2em 0; }
.offer p { flex: 1; font-size: .95rem; }
.offer.dark { background: radial-gradient(120% 120% at 100% 0%, rgba(19, 179, 159, .28), transparent 50%), var(--night); border-color: rgba(255, 255, 255, .08); }
.offer.dark .muted { color: var(--night-muted); }
.offer.aurora { background: var(--aurora); border: 0; color: #fff; }
.offer.aurora .n { color: rgba(255, 255, 255, .85); }
.offer.aurora p { color: rgba(255, 255, 255, .92); }
.ez-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; color: var(--night-muted); }
.ez-list li { padding-left: 1.5em; position: relative; }
.ez-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 3px; background: var(--aurora); transform: rotate(45deg); }
.ez-list b { color: #fff; font-weight: 600; }
@media (max-width: 1020px) { .headstart { grid-template-columns: 1fr; } .offers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hs-grid, .offers { grid-template-columns: 1fr; } }

/* free consultation (Joe, 2026-10-04) */
#consult { margin-top: clamp(10px, 2vw, 20px); }
.consult { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(26px, 4vw, 48px); border-radius: var(--r-l); background: linear-gradient(#fff, #fff) padding-box, var(--aurora) border-box; border: 2px solid transparent; box-shadow: var(--shadow-lift); }
.consult h2 { margin-bottom: .4em; }
.consult-side ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.consult-side li { padding-left: 1.6em; position: relative; color: var(--ink-2); }
.consult-side li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
@media (max-width: 760px) { .consult { grid-template-columns: 1fr; } }
[id] { scroll-margin-top: 96px; }  /* anchors land below the sticky nav */
.hero2 h1 { text-wrap: balance; margin-bottom: .2em; }
.subhead { font-family: var(--f-head); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.2; color: var(--ink-2); margin: 0 0 .9em; }

/* software strip under the subjects (Joe, 2026-10-04) */
.software { display: grid; grid-template-columns: auto 1fr; gap: 14px 28px; align-items: center; margin-top: 22px; padding: 20px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.software .apps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.software .apps span { font-family: var(--f-head); font-weight: 600; font-size: .95rem; padding: .4em .9em; border-radius: 99px; background: var(--bg); border: 1px solid var(--line); }
.software .apps .more { font-family: var(--f-body); font-weight: 500; color: var(--muted); background: transparent; border-style: dashed; }
.software .free { grid-column: 1 / -1; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--ink-2); font-size: .95rem; }
@media (max-width: 760px) { .software { grid-template-columns: 1fr; } .software .apps { justify-content: flex-start; } }

/* "Start learning right now" (Joe, 2026-10-04) */
.start-now { display: inline-flex; align-items: center; gap: 14px; margin-top: 4px; padding: 12px 18px 12px 12px; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(10px); transition: transform .18s, box-shadow .18s; }
.start-now:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.start-now .sn-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--aurora); color: #fff; font-size: .85rem; flex: none; }
.start-now b { display: block; font-family: var(--f-head); font-weight: 600; font-size: 1.05rem; }
.start-now small { display: block; color: var(--muted); font-size: .88rem; }
.start-now:hover .arr { transform: translateX(3px); } .start-now .arr { display: inline-block; transition: transform .18s; }
.hero2 .ctas { align-items: center; }
.hero2 .ctas .start-now { margin-top: 0; padding: 7px 16px 7px 7px; border-radius: 16px; }
.hero2 .ctas .start-now .sn-ico { width: 36px; height: 36px; border-radius: 11px; }
.hero2 .ctas .start-now b { font-size: .98rem; line-height: 1.2; }
.hero2 .ctas .start-now small { font-size: .8rem; line-height: 1.3; }
@media (max-width: 760px) { .hero2 .ctas .start-now { flex: 1 1 100%; } }

/* two-part eyebrow: each part stays whole; if both don't fit, the second drops to its own line */
.eyebrow-2 { flex-wrap: wrap; row-gap: .35em; }
.eyebrow-2 > span { white-space: nowrap; }
@media (max-width: 660px) {
  .eyebrow-2 .sep { display: none; }
  .eyebrow-2 > span:last-child { flex-basis: 100%; padding-left: calc(22px + .6em); }  /* line up under the first part */
}
@media (max-width: 480px) {
  .eyebrow-2 { letter-spacing: .07em; font-size: .72rem; }
  .eyebrow-2 > span:last-child { white-space: normal; }   /* last resort on the narrowest screens */
}
/* single seminar card, date TBA (Joe, 2026-10-04) */
.seminar { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center; padding: clamp(22px, 3.5vw, 40px); border-radius: var(--r-l); background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--shadow); }
.levels.big { gap: 10px; margin: 0 0 14px; }
.levels.big .lvl { font-size: .8rem; padding: .35em .8em; border-radius: 8px; }
.seminar .lead { font-family: var(--f-head); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.35; margin: 0 0 .4em; }
.seminar .lead b { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.seminar .muted { margin: 0; }
.seminar-side { display: grid; gap: 14px; justify-items: start; }
.tba { display: grid; padding: 12px 18px; border-radius: 14px; border: 1px dashed var(--steel); background: #fff; }
.tba .mono { font-size: .68rem; letter-spacing: .14em; color: var(--muted); }
.tba b { font-family: var(--f-head); font-size: 1.15rem; }
@media (max-width: 760px) { .seminar { grid-template-columns: 1fr; } }

/* Keep the instructor beside the headline, including on the first phone screen. */
.hero-intro { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: clamp(28px, 4vw, 56px); align-items: start; padding-top: clamp(28px, 6vw, 72px); }
.hero2 .hero-copy { max-width: none; padding-top: 0; }
.hero2 h1 { font-size: clamp(2.4rem, 4.5vw, 4rem); }
.instructor-card { display: block; text-decoration: none; padding: 24px; border: 1px solid var(--glass-brd); border-radius: var(--r-l); background: var(--glass); box-shadow: var(--shadow); }
.instructor-card img { width: 154px; height: 154px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; }
.instructor-card h2 { font-size: 1.18rem; line-height: 1.35; }
.instructor-card p { font-size: .92rem; color: var(--ink-2); }
.instructor-more { font-weight: 600; color: #155cb8; text-decoration: underline; text-underline-offset: .2em; }
.about .portrait { object-fit: cover; }
@media (max-width: 820px) {
  .hero-intro { grid-template-columns: minmax(0, 1fr) clamp(98px, 25vw, 150px); gap: 8px; padding-top: 20px; }
  .hero2 .hero-copy { display: contents; }
  .hero-copy .eyebrow { grid-column: 1; grid-row: 1; margin: 0; font-size: .64rem; letter-spacing: .03em; }
  .hero-copy .eyebrow::before, .hero-copy .eyebrow .sep { display: none; }
  .hero-copy .eyebrow > span { white-space: normal; }
  .hero-copy .eyebrow > span:last-child { flex-basis: 100%; padding-left: 0; }
  .hero2 h1 { grid-column: 1; grid-row: 2; font-size: clamp(1.5rem, 10vw - 6px, 3.4rem); margin: 0; }
  .hero2 h1 .hero-line { display: block; white-space: nowrap; }
  .hero2 h1 > .aurora-text { display: block; }
  .hero-copy .subhead, .hero-copy .lede, .hero-copy .ctas { grid-column: 1 / -1; }
  .hero-copy .subhead { margin: 0; }
  .hero-copy .ctas { margin-top: 0; }
  .instructor-card { grid-column: 2; grid-row: 1 / 3; min-width: 0; padding: 5px; border-radius: 16px; text-align: center; }
  .instructor-card img { width: clamp(68px, 18vw, 96px); height: auto; aspect-ratio: 1; margin: 0 auto 4px; }
  .instructor-card h2 { font-size: clamp(.76rem, 1.8vw, .95rem); line-height: 1.3; margin-bottom: 4px; }
  .instructor-card p { display: none; }
  .instructor-more { display: block; font-size: .78rem; line-height: 1.3; white-space: nowrap; }
}

.credits-link { text-align: center; font-size: .85rem; margin: 1.5em 0 0; }
.app-preview { margin: 1.5em 0; }
.app-preview img { width: 100%; height: auto; border-radius: 16px; }

/* Text uses darker accent stops; luminous gradients remain on decorative surfaces. */
.aurora-text, .pull em, .seminar .lead b { background-image: linear-gradient(105deg, #155cb8, #087e95 38%, #087568 64%, #168044); }
.btn-aurora, .offer.aurora, .offer.aurora .n, .offer.aurora p { color: #020508; }
.levels .lvl.b { color: #0c7445; }
a:focus-visible, button:focus-visible, canvas:focus-visible { outline: 3px solid #155cb8; outline-offset: 4px; }

.skip-link { position: fixed; left: 16px; top: -120px; z-index: 2000; padding: 12px 18px; background: #fff; color: #0a0e13; border: 2px solid #155cb8; border-radius: 8px; }
.skip-link:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

.strip-motion { display: block; margin: 12px 0 0 auto; padding: .45em .8em; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #26313b; font: inherit; font-size: .78rem; cursor: pointer; }
.strip-unavailable { min-height: 0; height: 0; }

.learning-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.thinking-card { padding: 28px; border-radius: var(--r-l); background: linear-gradient(145deg, #edf5ff, #e8f6ef); border: 1px solid var(--line); }
.thinking-card h2 { font-size: 1.65rem; line-height: 1.25; }
.thinking-card .eyebrow { font-size: .68rem; letter-spacing: .08em; }
.thinking-card p { color: var(--ink-2); }
.thinking-card > a { font-weight: 600; color: #155cb8; text-underline-offset: .2em; }
@media (max-width: 820px) { .learning-layout { grid-template-columns: 1fr; } }

@media (max-width: 560px) {
  .footer .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer .cols > * { min-width: 0; }
  .footer .cols > :first-child { grid-column: 1 / -1; }
}