/* Platform College — the shop, in the ATHE house style.

   The four ATHE companions had the strongest design system of the three we had
   built, so it is now the house style: one warm light canvas, Outfit for
   display, Plus Jakarta Sans for text, rounded cards, generous type.

   The fonts are the same files the companions self-host, so the shop makes
   NO third-party request either — it used to pull DM Sans and Fraunces from
   Google, which made the page that has to sell the slowest page on the site.

   The previous dark treatment is kept as styles-dark-previous.css. */

@font-face {
  font-family: "Outfit"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("courses/athe-academy/shared/fonts/outfit-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Jakarta"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("courses/athe-academy/shared/fonts/jakarta-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Jakarta"; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url("courses/athe-academy/shared/fonts/jakarta-italic-latin.woff2") format("woff2");
}

:root{
  /* the ATHE canvas, unchanged */
  --bg:#f7f7f5; --surface:#ffffff; --surface2:#f1f1ee; --surface3:#e6e7e2;
  --border:#e4e5e0; --border2:#c6c8c2; --line:#e4e5e0;
  --ink:#15181d; --ink2:#4a4f57; --ink3:#6b717a; --deep:#11151b;
  --muted:#4a4f57; --muted2:#6b717a;

  /* the college's own mark: the red from the crest, on the ATHE canvas */
  --brand:#b4232f; --brand-2:#d7343f; --brand-bg:#fdeaea; --on-brand:#ffffff;

  /* the four diplomas, so a course card can carry its own colour */
  --c-law:#7d5e16;      --c-law-bg:#fbf3e2;
  --c-business:#0c3d78; --c-business-bg:#e3edf9;
  --c-idt:#4b2a86;      --c-idt-bg:#ece4fb;
  --c-hsc:#0b5c39;      --c-hsc-bg:#d8f2e4;
  --c-barpath:#0b2136;  --c-barpath-bg:#e7ecf2;

  --ok:#0f7a4a; --ok-bg:#dff5e8;
  --gold:#7d5e16; --cyan:#0c4a6e; --lime:#0f7a4a; --red:#b4232f;

  --r:14px; --r-lg:18px; --r-xl:24px;
  --shadow-sm:0 1px 2px rgba(17,21,27,.06);
  --shadow:0 2px 8px rgba(17,21,27,.07);
  --shadow-lg:0 12px 32px rgba(17,21,27,.12);

  --sans:"Jakarta","Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --display:"Outfit",system-ui,sans-serif;
}

*{box-sizing:border-box} html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans)}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:min(1120px,calc(100% - 2rem));margin:0 auto}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--surface);color:var(--ink);padding:.5rem 1rem;z-index:99;border-radius:8px}

header,main,footer{position:relative;z-index:1}

header.site{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(18px) saturate(1.3);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;gap:1rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--ink);font-weight:700}
.brand:hover{text-decoration:none}
.brand img{width:44px;height:44px;object-fit:contain;border-radius:10px}
.brand div{font-family:var(--display);font-size:1.15rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.brand small{display:block;font:800 .6rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-top:.15rem}
.nav nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:.2rem .9rem;align-items:center}
.nav nav a{color:var(--ink2);font-size:.92rem;font-weight:700}
.nav nav a[aria-current="page"],.nav nav a:hover{color:var(--ink);text-decoration:none}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  background:var(--brand);color:var(--on-brand);border:1px solid var(--brand);
  border-radius:999px;padding:.7rem 1.15rem;font:700 .95rem var(--sans);
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:var(--brand-2);border-color:var(--brand-2);text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--border2);box-shadow:none}
.btn.ghost:hover{background:var(--surface2);color:var(--ink)}
.btn.cyan{background:var(--cyan);border-color:var(--cyan)}

.hero{padding:2.6rem 0 3rem;display:grid;grid-template-columns:1.1fr .9fr;gap:2.4rem;align-items:center}
.kicker{color:var(--brand);font:800 .72rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;margin:0 0 .85rem}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.14;margin:0 0 .6rem;color:var(--deep)}
h1{font-size:clamp(2.1rem,5vw,3.3rem)}
h2{font-size:clamp(1.55rem,3vw,2.15rem)}
.lede{font-size:1.06rem;color:var(--ink2);max-width:38rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 1.1rem}
.pills{display:flex;flex-wrap:wrap;gap:.45rem}
.pill{
  border:1px solid var(--border2);border-radius:999px;padding:.35rem .8rem;
  font-size:.78rem;font-weight:700;color:var(--ink2);background:var(--surface);
}
.pill.free{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.hero-visual{position:relative}
.hero-visual img{width:100%;height:420px;object-fit:cover;border-radius:var(--r-xl);border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.badge{
  position:absolute;left:1rem;bottom:1rem;background:var(--surface);color:var(--ink);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:.75rem .95rem;
  font-size:.82rem;max-width:15rem;box-shadow:var(--shadow-lg);
}
.badge b{display:block;color:var(--brand);font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.2rem}

.band{padding:3rem 0}
.band.alt{background:var(--surface2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.grid{display:grid;gap:1rem}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.25rem 1.3rem;box-shadow:var(--shadow-sm);
}
.card h3{font-size:1.2rem;margin-bottom:.2rem}
.card p{margin:.35rem 0 0;color:var(--ink2);font-size:.95rem}
.price{margin-top:.8rem;color:var(--deep);font-weight:800;font-family:var(--display)}
.tag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--brand);margin-bottom:.4rem}

/* a course card carries its own diploma colour, as it does inside the app */
.card[data-course]{border-top:3px solid var(--border2)}
.card[data-course="barpath"]{border-top-color:var(--c-barpath)}
.card[data-course="athe-law"]{border-top-color:var(--c-law)}
.card[data-course="athe-bus"]{border-top-color:var(--c-business)}
.card[data-course="athe-idt"]{border-top-color:var(--c-idt)}
.card[data-course="athe-hsc"]{border-top-color:var(--c-hsc)}

table.plain{width:100%;border-collapse:collapse;font-size:.92rem}
table.plain th,table.plain td{text-align:left;padding:.7rem .5rem;border-bottom:1px solid var(--border);vertical-align:top}
table.plain th{color:var(--ink3);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.note{font-size:.84rem;color:var(--ink3);margin-top:.8rem}
footer.site{border-top:1px solid var(--border);background:var(--surface);padding:2rem 0 3rem;color:var(--ink2);font-size:.88rem}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between}

.form{display:grid;gap:.7rem;max-width:32rem}
.form input,.form select,.form textarea{
  width:100%;background:var(--surface);border:1.5px solid var(--border2);color:var(--ink);
  border-radius:12px;padding:.75rem .9rem;font:400 1rem var(--sans)
}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--brand)}
.form label{font-size:.82rem;font-weight:700;color:var(--ink2)}

/* the phone menu button — hidden until the links are */
.nav-toggle{
  display:none;width:42px;height:42px;flex:none;padding:0;cursor:pointer;
  border:1px solid var(--border2);border-radius:12px;background:var(--surface);
  align-items:center;justify-content:center;
}
.nav-toggle:hover{background:var(--surface2)}
.nav-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.nav-bars{display:grid;gap:4px;width:18px}
.nav-bars i{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .18s,opacity .18s}
.nav-toggle.on .nav-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.on .nav-bars i:nth-child(2){opacity:0}
.nav-toggle.on .nav-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:860px){
  .hero,.g3,.g2{grid-template-columns:1fr}
  .hero-visual img{height:260px}
  .nav-toggle{display:inline-flex}
  .nav .btn{margin-left:auto;padding:.55rem .85rem;font-size:.84rem;white-space:nowrap}
  .brand div{font-size:1rem}
  .brand img{width:38px;height:38px}

  .nav nav{display:none}
  .nav nav.open{
    display:flex;flex-direction:column;gap:0;align-items:stretch;text-align:left;
    position:absolute;top:100%;left:0;right:0;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    padding:.3rem 0 .6rem;margin:0;
  }
  .nav nav.open a{padding:.85rem 1rem;font-size:1rem;border-top:1px solid var(--border)}
  .nav nav.open a:first-child{border-top:0}
  .nav nav.open a[aria-current="page"]{color:var(--ink);box-shadow:inset 3px 0 0 var(--brand)}
}
@media(max-width:420px){
  .brand small{display:none}
  .brand div{line-height:1.15}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}