/* =========================================================================
   pages.css — subpage components for FutureWork Academy (light GlobalDWS)
   Loaded after tokens.css + site.css. Reuses .wrap .btn* .eyebrow .h-section
   .display .section .divide from site.css.
   ========================================================================= */
:root {
  --cyan: var(--title-accent-bright);  /* #4DD8FF */
  --cyan-deep: var(--title-accent);    /* #1FB8E5 */
  --blue: var(--color-blue-500);
  --blue-deep: var(--color-blue-700);
}

/* ---- breadcrumb in the global header ---- */
.crumb { display: flex; align-items: center; gap: 10px; margin-left: auto; font-family: var(--font-family-mono); font-size: 11.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-muted); }
.crumb a { color: var(--fg-secondary); }
.crumb a:hover { color: var(--fg-accent); }
.crumb .sep { opacity: 0.45; }
.crumb .now { color: var(--fg-accent); }
@media (max-width: 760px) { .crumb { display: none; } }

/* ============================ SUBPAGE HERO (light) ============================ */
.subhero { position: relative; overflow: hidden; }
.subhero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--bg-accent-soft) 0%, transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg-canvas) 100%);
}
.subhero > .wrap { position: relative; z-index: 1; padding-top: 76px; padding-bottom: 84px; }
.subhero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--font-family-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 26px; }
.subhero__meta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-accent); box-shadow: 0 0 0 4px var(--bg-accent-soft); }
.subhero__meta .sep { width: 1px; height: 12px; background: var(--border-strong); opacity: 0.5; }
.subhero__meta .live { color: var(--fg-accent); font-weight: 600; }
.subhero h1 { font-size: clamp(40px, 6vw, 80px); margin: 0 0 22px; max-width: 18ch; }
.subhero__sub { font-size: 19px; line-height: 1.55; color: var(--fg-secondary); max-width: 60ch; margin: 0; }
.subhero__sub em { font-style: italic; color: var(--fg-strong); }
.subhero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.subhero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: end; }
@media (max-width: 980px) { .subhero__grid { grid-template-columns: 1fr; gap: 40px; } }

.subhero__copy { max-width: 880px; }

/* hero stat card (light accent) */
.statcard { background: linear-gradient(135deg, var(--bg-accent-soft), #FFFFFF); border: 1px solid var(--color-turquoise-200); border-radius: var(--radius-xl); padding: 36px; position: relative; overflow: hidden; }
.statcard::after { content: ""; position: absolute; right: -100px; bottom: -100px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, var(--bg-accent-soft) 0%, transparent 70%); }
.statcard .big { font-family: var(--font-family-display); font-size: clamp(64px, 9vw, 116px); font-weight: 500; color: var(--blue); letter-spacing: -0.045em; line-height: 0.9; margin-bottom: 14px; position: relative; }
.statcard .big small { font-size: 0.4em; color: var(--cyan-deep); margin-left: 4px; }
.statcard .lbl { font-size: 17px; line-height: 1.5; color: var(--fg-default); max-width: 32ch; position: relative; }
.statcard .src { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--border-subtle); position: relative; }

/* hero image with chip */
.heroimg { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-subtle); aspect-ratio: 4 / 3.2; background: var(--bg-canvas); }
.heroimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heroimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 35%, rgba(11,18,31,0.55) 100%); }
.heroimg .chip { position: absolute; left: 20px; right: 20px; bottom: 20px; background: rgba(24,34,47,0.84); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg); padding: 18px 20px; color: #fff; max-width: 330px; }
.heroimg .chip .big { font-family: var(--font-family-display); font-size: 48px; font-weight: 500; color: var(--cyan); line-height: 1; letter-spacing: -0.03em; }
.heroimg .chip .big small { font-size: 0.5em; }
.heroimg .chip .lbl { font-size: 14px; color: rgba(255,255,255,0.86); margin-top: 10px; line-height: 1.45; }
.heroimg .chip .src { font-family: var(--font-family-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.12); }

/* stat ribbon */
.ribbon { margin-top: 60px; display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.ribbon .cell { padding: 24px 26px; border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 8px; }
.ribbon .cell:last-child { border-right: none; }
.ribbon .k { font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.ribbon .v { font-family: var(--font-family-display); font-size: 19px; font-weight: 500; color: var(--fg-strong); letter-spacing: -0.01em; line-height: 1.2; }
.ribbon .v.cyan { color: var(--blue); }
.ribbon .v small { font-family: var(--font-family-mono); font-size: 11px; color: var(--fg-muted); display: block; margin-top: 6px; font-weight: 400; letter-spacing: 0.04em; }
@media (max-width: 1100px) { .ribbon { grid-template-columns: repeat(2, 1fr); } .ribbon .cell { border-bottom: 1px solid var(--border-subtle); } .ribbon .cell:nth-child(odd) { border-right: 1px solid var(--border-subtle); } }
@media (max-width: 540px) { .ribbon { grid-template-columns: 1fr; } .ribbon .cell { border-right: none !important; } .ribbon .cell:last-child { border-bottom: none; } }

/* ============================ SECTION HEAD (two-col) ============================ */
.head-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 52px; }
.head-row .right { color: var(--fg-secondary); font-size: 17px; line-height: 1.6; max-width: 52ch; }
.head-row .eyebrow { margin-bottom: 20px; }
@media (max-width: 880px) { .head-row { grid-template-columns: 1fr; gap: 20px; } }

/* ============================ CARD GRIDS ============================ */
.grid { display: grid; gap: 20px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.grid.c5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .grid.c5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .grid.c4 { grid-template-columns: repeat(2, 1fr); } .grid.c3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid.c2, .grid.c3, .grid.c4, .grid.c5 { grid-template-columns: 1fr; } }

/* numbered / general light card */
.ncard { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 210px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.ncard:hover { border-color: var(--card-border-hover); box-shadow: var(--card-shadow-raised); transform: translateY(-3px); }
.ncard .num { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.ncard .role { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-accent); }
.ncard h3 { font-family: var(--font-family-display); font-size: 20px; letter-spacing: -0.01em; color: var(--fg-strong); margin: 0; line-height: 1.2; }
.ncard p { margin: 0; font-size: 14.5px; color: var(--fg-default); line-height: 1.55; }
.ncard p.grow { flex: 1; }
.ncard .bar { height: 2px; width: 26px; background: var(--cyan-deep); border-radius: 2px; margin-top: auto; }
.ncard .mark { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--color-turquoise-200); background: var(--bg-accent-soft); display: grid; place-items: center; color: var(--blue); font-family: var(--font-family-display); font-weight: 600; font-size: 20px; }
.ncard .for { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); padding-top: 14px; border-top: 1px solid var(--border-subtle); margin-top: auto; }
.ncard .pn { font-family: var(--font-family-display); font-size: 60px; font-weight: 500; color: var(--cyan-deep); letter-spacing: -0.04em; line-height: 1; }

/* modules */
.module { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; transition: border-color .2s, box-shadow .2s, transform .2s; }
.module:hover { border-color: var(--card-border-hover); box-shadow: var(--card-shadow-raised); transform: translateY(-3px); }
.module .mhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--border-subtle); padding-bottom: 14px; }
.module .mnum { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-deep); }
.module .mmins { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); display: inline-flex; align-items: center; gap: 8px; }
.module .mmins::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-deep); }
.module h3 { font-family: var(--font-family-display); font-size: 21px; line-height: 1.15; color: var(--fg-strong); margin: 0; }
.module p { margin: 0; font-size: 14.5px; color: var(--fg-default); line-height: 1.55; }

/* pricing tiers */
.tier { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 16px; min-width: 0; position: relative; transition: border-color .2s, box-shadow .2s, transform .2s; }
.tier:hover { border-color: var(--card-border-hover); box-shadow: var(--card-shadow-raised); transform: translateY(-3px); }
.tier.popular { border: 1.5px solid var(--cyan-deep); box-shadow: 0 24px 60px -30px rgba(31,184,229,0.30); transform: translateY(-8px); }
@media (max-width: 980px) { .tier.popular { transform: none; } }
.tier .ribbonpop { position: absolute; top: -14px; left: 30px; font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; background: var(--cyan-deep); color: #fff; padding: 6px 14px; border-radius: var(--radius-pill); }
.tier .ttop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); }
.tier .tnum { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-deep); }
.tier .taxis { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.tier h3 { font-family: var(--font-family-display); font-size: 21px; line-height: 1.15; color: var(--fg-strong); margin: 0; }
.tier .price { font-family: var(--font-family-display); font-size: 44px; font-weight: 500; color: var(--fg-strong); letter-spacing: -0.035em; line-height: 1; }
.tier .price small { font-family: var(--font-family-mono); font-size: 12px; color: var(--fg-muted); margin-left: 6px; }
.tier .bestfor { font-family: var(--font-family-mono); font-size: 11.5px; color: var(--cyan-deep); letter-spacing: 0.02em; }
.tier .outcome { font-size: 14.5px; line-height: 1.5; color: var(--fg-secondary); font-style: italic; padding: 12px 0; border-top: 1px dashed var(--border-subtle); border-bottom: 1px dashed var(--border-subtle); }
.tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tier li { font-size: 14px; color: var(--fg-default); line-height: 1.5; padding-left: 22px; position: relative; }
.tier li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-deep); opacity: 0.55; }
.tier.popular li::before { opacity: 1; }
.tier .tcta .btn { width: 100%; justify-content: center; }

/* bordered grid (topics) */
.bgrid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; background: #fff; }
.bgrid .cell { padding: 26px; border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: background .2s; }
.bgrid .cell:hover { background: var(--bg-canvas); }
.bgrid .tn { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-deep); }
.bgrid h3 { font-family: var(--font-family-display); font-size: 18px; line-height: 1.2; color: var(--fg-strong); margin: 0; }
.bgrid p { font-size: 13.5px; line-height: 1.5; color: var(--fg-default); margin: 0; }
@media (max-width: 540px) { .bgrid { grid-template-columns: 1fr; } }

.topwrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
@media (max-width: 980px) { .topwrap { grid-template-columns: 1fr; gap: 32px; } }
.topintro p { font-size: 17px; line-height: 1.6; color: var(--fg-secondary); max-width: 48ch; margin: 18px 0 0; }

/* context row (text + image) */
.ctxrow { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 52px; }
@media (max-width: 880px) { .ctxrow { grid-template-columns: 1fr; gap: 28px; } }
.ctxrow .txt p { font-size: 17px; line-height: 1.6; color: var(--fg-default); margin: 0 0 18px; }
.ctxrow .txt p:last-child { margin-bottom: 0; }
.ctxrow .txt strong { color: var(--fg-strong); }
.ctxrow .img { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); aspect-ratio: 4 / 3; }
.ctxrow .img img { width: 100%; height: 100%; object-fit: cover; }

/* image strip with caption (Core Blue overlay) */
.imgstrip { margin-top: 60px; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-subtle); position: relative; aspect-ratio: 21 / 8; background: var(--bg-canvas); }
.imgstrip img { width: 100%; height: 100%; object-fit: cover; }
.imgstrip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,91,153,0.90) 0%, rgba(4,91,153,0.35) 55%, transparent 100%); }
.imgstrip .cap { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); z-index: 2; max-width: 40ch; color: #fff; }
.imgstrip .cap .eyebrow { color: var(--cyan); margin-bottom: 14px; }
.imgstrip .cap .eyebrow .bar { background: var(--cyan); }
.imgstrip .cap h3 { font-family: var(--font-family-display); font-size: clamp(22px, 2.4vw, 32px); color: #fff; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
@media (max-width: 720px) { .imgstrip { aspect-ratio: 4 / 3; } .imgstrip .cap { left: 24px; right: 24px; max-width: none; } }

/* careers grid (bordered) */
.cgrid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-subtle); border-left: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.cgrid .cell { padding: 32px 30px; border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 150px; transition: background .2s; }
.cgrid .cell:hover { background: var(--bg-accent-soft); }
.cgrid .num { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-deep); }
.cgrid h3 { font-family: var(--font-family-display); font-size: 20px; color: var(--fg-strong); letter-spacing: -0.01em; line-height: 1.15; margin: 0; }
@media (max-width: 880px) { .cgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cgrid { grid-template-columns: 1fr; } }

/* FAQ accordion */
.faqlist { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
details.faq { border-bottom: 1px solid var(--border-subtle); }
details.faq:last-child { border-bottom: none; }
details.faq summary { list-style: none; cursor: pointer; padding: 26px 6px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--font-family-display); font-size: 19px; font-weight: 500; color: var(--fg-strong); letter-spacing: -0.01em; line-height: 1.3; transition: color .15s; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary:hover { color: var(--cyan-deep); }
details.faq .plus { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; font-family: var(--font-family-mono); font-size: 16px; color: var(--fg-secondary); transition: transform .25s, background .15s, color .15s, border-color .15s; }
details.faq[open] .plus { transform: rotate(45deg); background: var(--cyan-deep); color: #fff; border-color: var(--cyan-deep); }
details.faq[open] summary { color: var(--cyan-deep); }
details.faq .answer { padding: 0 6px 26px; color: var(--fg-default); font-size: 16px; line-height: 1.65; max-width: 78ch; }

/* two-column lists (one light, one Core Blue) */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 880px) { .twocol { grid-template-columns: 1fr; } }
.twocol .col { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: 34px 30px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.twocol .col h3 { font-family: var(--font-family-display); font-size: 21px; color: var(--fg-strong); letter-spacing: -0.01em; margin: 0; }
.twocol .col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.twocol .col li { font-size: 15px; color: var(--fg-default); line-height: 1.55; padding-left: 22px; position: relative; }
.twocol .col li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-deep); }
.twocol .col.blue { background: linear-gradient(135deg, var(--blue-deep), var(--blue)); color: #fff; border-color: transparent; position: relative; overflow: hidden; }
.twocol .col.blue::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(95,239,255,0.16) 0%, transparent 70%); }
.twocol .col.blue h3 { color: #fff; position: relative; z-index: 1; }
.twocol .col.blue ul { position: relative; z-index: 1; }
.twocol .col.blue li { color: rgba(255,255,255,0.88); }
.twocol .col.blue li::before { background: var(--cyan); }
.twocol .roi { position: relative; z-index: 1; margin-top: 4px; padding: 16px 18px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.20); font-size: 14.5px; color: rgba(255,255,255,0.9); line-height: 1.5; }
.twocol .roi strong { color: var(--cyan); font-family: var(--font-family-display); font-weight: 500; font-size: 17px; display: block; margin-bottom: 4px; }
.twocol .roi span { color: rgba(255,255,255,0.55); }

/* badge note (methodology / rule of thumb) */
.note { padding: 22px 28px; background: linear-gradient(135deg, var(--blue-deep), var(--blue)); color: #fff; border-radius: var(--radius-lg); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.note.spaced { margin-top: 40px; }
.note .badge { font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); padding: 6px 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-pill); white-space: nowrap; }
.note p { font-family: var(--font-family-display); font-weight: 500; font-size: 17px; color: #fff; margin: 0; letter-spacing: -0.01em; line-height: 1.4; }
.note p em { font-style: italic; color: var(--cyan); }
@media (max-width: 640px) { .note { flex-direction: column; align-items: flex-start; } }

/* help card (AI hub) */
.helpcard { background: linear-gradient(135deg, var(--blue-deep), var(--blue)); color: #fff; border-radius: var(--radius-xl); padding: 44px 48px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; position: relative; overflow: hidden; }
.helpcard::after { content: ""; position: absolute; right: -100px; bottom: -100px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(95,239,255,0.18) 0%, transparent 70%); }
.helpcard h3 { font-family: var(--font-family-display); font-size: 26px; color: #fff; letter-spacing: -0.02em; margin: 0 0 10px; position: relative; z-index: 1; }
.helpcard h3 em { font-style: italic; color: var(--cyan); font-weight: 400; }
.helpcard p { color: rgba(255,255,255,0.8); font-size: 15.5px; line-height: 1.6; margin: 0; position: relative; z-index: 1; max-width: 48ch; }
.helpcard .acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 1; }
@media (max-width: 880px) { .helpcard { grid-template-columns: 1fr; padding: 36px 28px; } .helpcard .acts { justify-content: flex-start; } }

/* path cards (AI hub) */
.pathgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 980px) { .pathgrid { grid-template-columns: 1fr; } }
.path { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: border-color .2s, transform .2s, box-shadow .2s; }
.path:hover { border-color: var(--card-border-hover); transform: translateY(-4px); box-shadow: var(--card-shadow-raised); }
.path .banner { aspect-ratio: 16 / 6; position: relative; overflow: hidden; color: #fff; }
.path .banner.youth { background: linear-gradient(135deg, var(--blue) 0%, var(--color-turquoise-600) 100%); }
.path .banner.org { background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%); }
.path .banner::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 32px 32px; }
.path .banner .tag { position: absolute; top: 20px; left: 22px; font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.35); border-radius: var(--radius-pill); background: rgba(0,0,0,0.18); backdrop-filter: blur(8px); }
.path .banner .glyph { position: absolute; right: 28px; bottom: 20px; text-align: right; font-family: var(--font-family-display); color: #fff; }
.path .banner .glyph .num { display: block; font-size: 56px; line-height: 0.9; letter-spacing: -0.04em; color: #fff; font-weight: 500; }
.path .banner .glyph .lbl { font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.path .body { padding: 34px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.path .pill { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-deep); display: inline-flex; align-items: center; gap: 8px; }
.path .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan-deep); }
.path h3 { font-family: var(--font-family-display); font-size: 27px; line-height: 1.1; letter-spacing: -0.025em; color: var(--fg-strong); margin: 0; }
.path .lede { font-size: 16px; color: var(--fg-default); line-height: 1.6; margin: 0; }
.path .metas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 0 4px; border-top: 1px solid var(--border-subtle); margin-top: 6px; }
.path .metas .k { font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.path .metas .v { font-family: var(--font-family-display); font-size: 14.5px; font-weight: 500; color: var(--fg-strong); display: block; margin-top: 4px; }
.path .go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-family-display); font-weight: 600; font-size: 15px; color: var(--blue); }
.path:hover .go { color: var(--cyan-deep); }
.path .go .material-symbols-rounded { font-size: 18px; transition: transform .2s; }
.path:hover .go .material-symbols-rounded { transform: translateX(4px); }

/* apply cards (eligibility) */
.apply-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 980px) { .apply-wrap { grid-template-columns: 1fr; } }
.apply-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: 34px 30px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.apply-card.blue { background: linear-gradient(135deg, var(--blue-deep), var(--blue)); color: #fff; border-color: transparent; position: relative; overflow: hidden; }
.apply-card h3 { font-family: var(--font-family-display); font-size: 21px; color: var(--fg-strong); letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 12px; }
.apply-card.blue h3 { color: #fff; position: relative; z-index: 1; }
.apply-card h3 .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--bg-accent-soft); color: var(--cyan-deep); display: grid; place-items: center; font-size: 15px; flex: none; }
.apply-card.blue h3 .ic { background: rgba(95,239,255,0.16); color: var(--cyan); }
.apply-card p { color: var(--fg-secondary); font-size: 14.5px; line-height: 1.55; margin: 0; position: relative; z-index: 1; }
.apply-card.blue p { color: rgba(255,255,255,0.8); }
.apply-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.apply-card li { font-size: 15px; color: var(--fg-default); line-height: 1.5; padding-left: 22px; position: relative; }
.apply-card.blue li { color: rgba(255,255,255,0.86); }
.apply-card li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-deep); }
.apply-card.blue li::before { background: var(--cyan); }
.apply-card .encourage-image { margin: -34px -30px 4px; aspect-ratio: 16 / 6.5; overflow: hidden; position: relative; z-index: 1; }
.apply-card .encourage-image img { width: 100%; height: 100%; object-fit: cover; }

/* ============================ CLOSING CTA CARD (Core Blue) ============================ */
.ctacard { background: radial-gradient(700px 380px at 80% 0%, rgba(95,239,255,0.22), transparent 60%), linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 72%); border-radius: var(--radius-2xl); padding: 72px 56px; color: #fff; position: relative; overflow: hidden; }
@media (max-width: 720px) { .ctacard { padding: 48px 30px; } }
.ctacard .eyebrow { color: var(--cyan); }
.ctacard .eyebrow .bar { background: var(--cyan); }
.ctacard h2 { font-family: var(--font-family-display); font-size: clamp(32px, 4.6vw, 54px); font-weight: 600; color: #fff; letter-spacing: -0.03em; line-height: 1.0; max-width: 22ch; margin: 0 0 20px; }
.ctacard h2 em { font-style: italic; font-weight: 400; color: var(--cyan); }
.ctacard p { color: rgba(255,255,255,0.82); font-size: 17px; max-width: 56ch; line-height: 1.6; margin: 0 0 32px; }
.ctacard .acts { display: flex; gap: 14px; flex-wrap: wrap; }

/* ctacard with a media panel (image bleeds to the card edge) */
.ctacard--media { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 48px; align-items: center; overflow: hidden; }
.ctacard--media .ctacard__body { min-width: 0; }
.ctacard--media .ctacard__media { position: relative; align-self: stretch; margin: -72px -56px -72px 0; min-height: 360px; }
.ctacard--media .ctacard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ctacard--media .ctacard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--blue-deep) 0%, rgba(4,91,153,0.40) 24%, transparent 58%); }
@media (max-width: 720px) {
  .ctacard--media { grid-template-columns: 1fr; gap: 0; }
  .ctacard--media .ctacard__media { margin: 28px -30px -48px; min-height: 210px; }
  .ctacard--media .ctacard__media::after { background: linear-gradient(0deg, transparent 55%, rgba(4,91,153,0.45)); }
}
.ctacard .contact { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-family-mono); font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 0.04em; }
.ctacard .contact a { color: var(--cyan); }
.ctacard .contact .sep { width: 1px; height: 12px; background: rgba(255,255,255,0.2); }
.ctacard .funding { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ctacard .funding .badge { font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); padding: 6px 12px; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-pill); white-space: nowrap; }
.ctacard .funding span { font-size: 13.5px; color: rgba(255,255,255,0.65); line-height: 1.5; }

/* ============================ CONTACT FORM ============================ */
.formgrid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; }
@media (max-width: 980px) { .formgrid { grid-template-columns: 1fr; gap: 36px; } }
.inquiry { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 40px; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 540px) { .inquiry { padding: 28px 22px; } }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .frow { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-secondary); }
.field label .req { color: var(--cyan-deep); margin-left: 4px; }
.field input, .field textarea, .field select { font-family: var(--font-family-sans); font-size: 15px; color: var(--fg-strong); padding: 13px 14px; border: 1px solid var(--input-border); border-radius: 10px; background: #fff; width: 100%; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--cyan-deep); box-shadow: 0 0 0 3px rgba(31,184,229,0.15); }
.field textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.field select { font-family: var(--font-family-display); font-weight: 500; font-size: 16px; appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234F5464' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
.field select optgroup { font-family: var(--font-family-mono); font-weight: 500; font-style: normal; }
.field select option { font-family: var(--font-family-sans); font-weight: 400; }
.field .help { font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--fg-muted); margin-top: 4px; }
.form-error[hidden] { display: none; }
.form-error { background: #FFF4F4; border: 1px solid #F5C2C2; color: #8C2A2A; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; }
.form-error::before { content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #C24A4A; color: #fff; display: grid; place-items: center; font-family: var(--font-family-display); font-weight: 700; font-size: 12px; margin-top: 1px; }
.form-error a { color: #8C2A2A; text-decoration: underline; }
.submitrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 8px; }
.submitnote { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-muted); max-width: 32ch; line-height: 1.5; }
.side { display: flex; flex-direction: column; gap: 20px; }
.side-card { background: var(--bg-canvas); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 26px 28px; }
.side-card.blue { background: linear-gradient(135deg, var(--blue-deep), var(--blue)); color: #fff; border-color: transparent; position: relative; overflow: hidden; }
.side-card.blue::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(95,239,255,0.16) 0%, transparent 70%); }
.side-card h3 { font-family: var(--font-family-display); font-size: 18px; margin: 0 0 8px; color: var(--fg-strong); }
.side-card.blue h3 { color: #fff; position: relative; z-index: 1; }
.side-card p { font-size: 14px; line-height: 1.6; margin: 0; color: var(--fg-secondary); }
.side-card.blue p { color: rgba(255,255,255,0.8); position: relative; z-index: 1; }
.side-card .label { font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-deep); margin-bottom: 8px; }
.side-card.blue .label { color: var(--cyan); position: relative; z-index: 1; }
.side-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.side-steps .step { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: baseline; }
.side-steps .n { font-family: var(--font-family-mono); font-size: 11px; color: var(--cyan-deep); letter-spacing: 0.12em; }
.side-steps .t { font-size: 13.5px; line-height: 1.5; color: var(--fg-secondary); }
.side-steps .t strong { font-family: var(--font-family-display); font-weight: 500; color: var(--fg-strong); display: block; margin-bottom: 2px; font-size: 14px; }
.side-direct { position: relative; z-index: 1; margin-top: 16px; }
.side-direct a { font-family: var(--font-family-display); font-size: 17px; color: var(--cyan); font-weight: 500; word-break: break-all; }
.side-direct a:hover { color: #fff; }
.success { display: none; text-align: center; padding: 32px 24px; }
.success .ic { width: 64px; height: 64px; border-radius: 50%; background: var(--bg-accent-soft); color: var(--cyan-deep); display: grid; place-items: center; margin: 0 auto 22px; font-size: 28px; font-weight: 600; border: 1px solid var(--color-turquoise-200); }
.success h3 { font-family: var(--font-family-display); font-size: 22px; margin-bottom: 10px; color: var(--fg-strong); }
.success p { color: var(--fg-secondary); font-size: 15px; line-height: 1.6; max-width: 40ch; margin: 0 auto; }
.inquiry.sent { display: none; }
.inquiry.sent + .success { display: block; }

/* ============================ BACK TO TOP ============================ */
.to-top { position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; background: var(--blue); color: #fff; border: 1px solid var(--color-turquoise-300); border-radius: 50%; display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s, background .15s; z-index: 60; box-shadow: var(--shadow-lg); }
.to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover { background: var(--blue-deep); }
.to-top .material-symbols-rounded { font-size: 22px; }
@media (max-width: 540px) { .to-top { right: 16px; bottom: 16px; } }

/* ============================ ENROLL · INDIVIDUALS ============================ */
.pricebar {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 26px 32px; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--bg-accent-soft), #FFFFFF);
  border: 1px solid var(--color-turquoise-200);
}
.pricebar__price { display: flex; align-items: baseline; gap: 14px; flex: none; }
.pricebar .ebird { font-family: var(--font-family-display); font-weight: 600; font-size: 52px; letter-spacing: -0.035em; line-height: 1; color: var(--blue); }
.pricebar .ebird small { font-family: var(--font-family-mono); font-weight: 400; font-size: 14px; color: var(--fg-muted); margin-left: 6px; letter-spacing: 0; }
.pricebar .reg { font-family: var(--font-family-display); font-weight: 500; font-size: 26px; color: var(--fg-muted); text-decoration: line-through; text-decoration-color: var(--color-turquoise-400); letter-spacing: -0.02em; }
.pricebar .ebird-badge { font-family: var(--font-family-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--cyan-deep); padding: 6px 12px; border-radius: var(--radius-pill); align-self: center; }
.pricebar__note { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-secondary); }
.pricebar__note strong { color: var(--fg-strong); font-weight: 600; }

.datecard {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);
  padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 188px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.datecard:hover { border-color: var(--cyan-deep); box-shadow: var(--card-shadow-raised); transform: translateY(-3px); }
.datecard__dow { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-deep); }
.datecard__date { font-family: var(--font-family-display); font-weight: 600; font-size: 30px; letter-spacing: -0.025em; line-height: 1; color: var(--fg-strong); }
.datecard__date span { color: var(--fg-muted); font-weight: 500; }
.datecard__meta { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-muted); padding-top: 14px; border-top: 1px solid var(--border-subtle); margin-top: auto; }
.datecard__cta { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-family-display); font-weight: 600; font-size: 14.5px; color: var(--blue); }
.datecard:hover .datecard__cta { color: var(--cyan-deep); }
.datecard__cta .material-symbols-rounded { font-size: 17px; transition: transform .2s; }
.datecard:hover .datecard__cta .material-symbols-rounded { transform: translateX(4px); }

/* Enroll · Individuals — borderless date LIST (secondary, de-emphasized) */
.datelist { margin-top: 24px; border-top: 1px solid var(--border-subtle); }
.daterow {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 6px; border-bottom: 1px solid var(--border-subtle);
  transition: background .15s;
}
.daterow:hover { background: var(--bg-accent-soft); }
.daterow__cal {
  flex: none; width: 58px; height: 58px; border-radius: 12px;
  background: var(--bg-accent-soft); border: 1px solid var(--color-turquoise-200);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.daterow__mon { font-family: var(--font-family-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan-deep); }
.daterow__day { font-family: var(--font-family-display); font-weight: 600; font-size: 23px; line-height: 1; color: var(--blue); letter-spacing: -0.02em; }
.daterow__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.daterow__title { font-family: var(--font-family-display); font-weight: 500; font-size: 17px; color: var(--fg-strong); letter-spacing: -0.01em; }
.daterow__meta { font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-muted); }
.daterow__cta { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-family-display); font-weight: 600; font-size: 14.5px; color: var(--blue); }
.daterow:hover .daterow__cta { color: var(--cyan-deep); }
.daterow__cta .material-symbols-rounded { font-size: 17px; transition: transform .2s; }
.daterow:hover .daterow__cta .material-symbols-rounded { transform: translateX(4px); }
.daterow--extra { display: none; }
.datelist.is-expanded .daterow--extra { display: flex; }

.viewmore {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; padding: 8px 4px;
  font-family: var(--font-family-display); font-weight: 600; font-size: 14.5px; color: var(--cyan-deep);
}
.viewmore:hover { color: var(--blue); }
.viewmore .material-symbols-rounded { font-size: 20px; transition: transform .25s; }
.viewmore[aria-expanded="true"] .material-symbols-rounded { transform: rotate(180deg); }
@media (max-width: 560px) {
  .daterow { gap: 14px; }
  .daterow__cta .vm-text, .daterow__cta-text { display: none; }
}