/* ==========================================================================
   AGENT CITY — Academy re-skin
   Loaded after learn.html's inline styles. Brings the Learn page into the
   home-page brand: Instrument Serif headlines, dark opener, home nav, home
   buttons, home footer. Content and diagrams untouched.
   ========================================================================== */
:root {
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --void: #010D0B; --abyss: #02201B; --field: #043D33; --field-deep: #062E27;
  --mint-2: #7FF6DC; --card-2: #DCE8E3; --ink-h: #1B3A33;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
body { font-size: 17px; }

/* ---------- type ---------- */
.hero h1, .sec-head h2, .level-title h2, .closer-card h2, .pack-card h3, .fit-card h3, .ladder-sec h2, .mod-head h3 {
  font-family: var(--serif); font-weight: 400; text-transform: none; letter-spacing: -0.02em;
}
.hero h1 { font-size: clamp(2.8rem, 7vw, 6rem); line-height: .98; max-width: 14ch; color: #fff; }
.hero h1 .grad { background: none; -webkit-text-fill-color: initial; color: var(--mint-2); font-style: italic; }
.hero h1 .sk-wrap svg { display: none; }
.sec-head h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.04; color: var(--ink-h); text-wrap: balance; }
.level-title h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: var(--ink-h); }
.closer-card h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); max-width: 18ch; }
.closer-card h2 .grad { background: none; -webkit-text-fill-color: initial; color: var(--mint-2); font-style: italic; }
.mod-head h3 { font-size: 1.35rem; }
.pack-card h3, .fit-card h3 { font-size: 1.7rem; }
.sec-eyebrow, .hero-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); display: inline-flex; align-items: center; gap: .6rem; }
.sec-eyebrow::before, .hero-kicker::before { content: ''; width: 22px; height: 6px; border-radius: 2px; background: repeating-linear-gradient(-45deg, var(--accent) 0 5px, var(--field) 5px 10px); }
.note-hand { display: none; }

/* ---------- nav (home style) ---------- */
.nav { background: rgba(242,247,245,.78); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); }
.nav-in { max-width: 1400px; padding: 1rem var(--pad-x); }
.nav-links a:not(.btn) { font-size: .92rem; font-weight: 600; color: var(--ink); opacity: .8; }
.nav-links a:not(.btn):hover { opacity: 1; color: var(--ink); }
.nav .btn { padding: .6rem 1.05rem; font-size: .88rem; border-radius: 11px; background: var(--abyss); color: #fff; box-shadow: none; }
.nav .btn:hover { background: var(--field-deep); }
.nav.on-dark { background: rgba(1,13,11,.6); border-bottom-color: rgba(255,255,255,.09); }
.nav.on-dark .nav-links a:not(.btn), .nav.on-dark .logo { color: #fff; }
.nav.on-dark .btn { background: rgba(255,255,255,.92); color: var(--abyss); }

/* ---------- buttons (home style) ---------- */
.btn { border-radius: 14px; font-weight: 600; padding: .9rem 1.5rem; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s; }
.btn-sm { padding: .62rem 1.1rem; font-size: .9rem; border-radius: 11px; }
.btn-primary { background: #10201C; color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--abyss); transform: translateY(-2px); }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -20px rgba(2,32,27,.35); }
.hero .btn-primary, .closer-card .btn-primary { background: var(--accent); color: var(--abyss); box-shadow: 0 16px 40px -14px rgba(0,212,170,.7); }
.hero .btn-ghost, .closer-card .btn-ghost { background: rgba(255,255,255,.04) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important; backdrop-filter: blur(8px); }

/* ---------- hero: dark opener like the home page ---------- */
.hero { background: var(--void); color: #fff; position: relative; min-height: 88svh; padding-top: 9rem; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 70%, rgba(0,212,170,.16), transparent 70%); }
.hero > * { position: relative; }
.hero-badge { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--mint-2); box-shadow: none; }
.hero-kicker { color: var(--mint-2); }
.hero-sub { color: rgba(255,255,255,.78); }
.hero-proof { color: rgba(255,255,255,.62); }
.hero-proof b { color: #fff; }
.hero .skyline .bld { fill: #041A16; }
.hero .city-win { fill: var(--mint-2); }

/* the sections right after the dark hero pick up the home page's dawn */
.path-sec { background: linear-gradient(180deg, var(--accent) 0%, rgba(0,212,170,.32) 18%, rgba(242,247,245,0) 46%), var(--bg); padding-top: var(--sec-y); }

/* ---------- cards ---------- */
.mod, .fit-card, .pack-card, .ladder-card, .stop { border-radius: 20px; }
.closer-card { background: var(--abyss); border-radius: 28px; }
.pack-card { background: var(--card-2); box-shadow: none; border: 0; }
.stop-badge { background: var(--abyss); color: #fff; }

/* ---------- home footer ---------- */
footer.ac-foot { background: var(--void); color: #fff; padding: 5rem 0 2rem; overflow: hidden; position: relative; }
.ac-foot .foot-top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-end; }
.ac-foot .foot-links { display: flex; gap: 2rem; flex-wrap: wrap; font-size: .92rem; color: rgba(255,255,255,.7); }
.ac-foot .foot-links a:hover { color: #fff; }
.ac-foot .foot-mark { margin-top: 3rem; font-weight: 800; letter-spacing: -0.05em; font-size: clamp(4rem, 17vw, 17rem); line-height: .85; color: #fff; white-space: nowrap; }
.ac-foot .foot-mark .dot { color: var(--accent); }
.ac-foot .foot-bottom { margin-top: 2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: rgba(255,255,255,.5); align-items: center; }
.ac-foot .strap { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: .26em; font-size: .68rem; color: rgba(255,255,255,.8); }
.ac-foot .btn-mint { background: var(--accent); color: var(--abyss); }
.nav.on-dark .logo-tag { color: rgba(255,255,255,.8); }
.stop-badge { font-family: var(--serif); font-size: 1.4rem; display: grid; place-items: center; }
.ac-foot a { text-decoration: none; }