/* ————————————————————————————————————————————————————————————
   course.css — the shared skin for the five course pages.

   These are NOT the landing. The landing is a stage: a blackout, a light cord,
   an owl that walks. A course page is the opposite job — someone has already
   decided to look and now wants facts. So: light paper, no mechanics, nothing
   that moves, one column, and type that can carry 500 words without tiring.

   Tokens mirror the landing's inline set on purpose. They are duplicated rather
   than shared because the landing keeps everything inline by design (it opens in
   a browser with no build step, and that property is worth more than saving
   twenty lines here). If a brand colour changes, it changes in both places.
   ———————————————————————————————————————————————————————————— */

:root{
  --pink:#c72566; --pink-hover:#b01859; --pink-press:#9c1450; --pink-light:#e0568f;
  --ink:#0c0a09; --body-c:#44403c; --muted:#78716c; --hair:#e7e5e4;
  --s1:#faf8f7; --s2:#f5f3f1;
  --pad: clamp(20px, 5vw, 64px);
  --out: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html{ color-scheme: light; -webkit-text-size-adjust:100%; }
body{
  margin:0; background: var(--s2); color: var(--body-c);
  font-family:'Readex Pro', system-ui, sans-serif; font-weight:300;
  font-size: clamp(1rem, .96rem + .25vw, 1.09rem); line-height:2;
  /* the house paper: the same dot grid the landing rests on, at a whisper */
  background-image: radial-gradient(rgba(12,10,9,.055) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
}
.wrap{ max-width: 820px; margin-inline:auto; padding-inline: var(--pad); }

/* ——— the bar: the mark walks home, nothing else ——— */
.bar{ padding-block: 26px 0; }
.bar-in{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.bar-mark{ width:38px; height:38px; flex:none; }
.bar-name{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:1rem; line-height:1.5; color:var(--ink); }
.bar-in:hover .bar-name{ color: var(--pink); }

/* ——— breadcrumb: small, real links, no chevron graphics ——— */
.crumb{ margin-block: 26px 0; font-size:.84rem; color: var(--muted); }
.crumb a{ color: var(--muted); text-decoration:none; }
.crumb a:hover{ color: var(--pink); text-decoration:underline; }
.crumb b{ color: var(--body-c); font-weight:500; }

/* ——— the title block ——— */
h1{
  font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color: var(--ink);
  font-size: clamp(1.95rem, 1.4rem + 3.1vw, 3.05rem); line-height:1.42;
  margin: 14px 0 0; letter-spacing:-.3px;
}
h1 .hl{ color: var(--pink); }
.lede{
  margin: 18px 0 0; font-size: clamp(1.06rem, 1rem + .5vw, 1.24rem);
  line-height:1.95; color: var(--body-c); font-weight:400;
}
.rule{ width:170px; height:4px; border-radius:3px; background:var(--pink); margin: 30px 0 0; }

/* ——— the facts strip: the numbers the course actually is ——— */
.facts{
  margin: 40px 0 0; padding: 0; list-style:none;
  display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}
.facts li{
  background:#fff; border:1px solid var(--hair); border-radius:14px;
  padding: 16px 18px; box-shadow: 0 2px 8px rgba(12,10,9,.03);
}
.facts b{
  display:block; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800;
  font-size:1.55rem; line-height:1.3; color: var(--pink);
}
.facts span{ display:block; font-size:.88rem; line-height:1.65; color: var(--muted); margin-top:2px; }

/* ——— sections ——— */
section{ margin-block: 52px 0; }
h2{
  font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color: var(--ink);
  font-size: clamp(1.32rem, 1.15rem + .8vw, 1.72rem); line-height:1.55; margin:0 0 14px;
}
h3{
  font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; color: var(--ink);
  font-size:1.06rem; line-height:1.7; margin: 26px 0 6px;
}
p{ margin: 0 0 16px; }
p:last-child{ margin-bottom:0; }
strong{ color: var(--ink); font-weight:500; }

/* the programme list: a pink tick, then the thing, then what it means */
.prog{ margin:0; padding:0; list-style:none; }
.prog li{
  position:relative; padding-inline-start:30px; margin-bottom:18px;
}
.prog li::before{
  content:''; position:absolute; inset-inline-start:0; top:.72em;
  width:11px; height:11px; border-radius:50%;
  background: var(--pink-light); box-shadow: 0 0 0 3px rgba(224,86,143,.18);
}
.prog b{ display:block; color: var(--ink); font-weight:600; font-family:'Baloo Bhaijaan 2', sans-serif; }
/* the direct child only — this is the description slot. Unscoped it also caught
   a nested <span class="latin"> (a service name, «IP»), turned it into a
   full-width block and threw it onto its own line. */
.prog > li > span{ display:block; color: var(--body-c); font-size:.95rem; line-height:1.9; }

/* ——— long-form document (the privacy policy): plain bullets, because a legal
       page earns nothing from decoration and loses something from it ——— */
.doc{ margin: 0 0 16px; padding-inline-start: 22px; }
.doc li{ margin-bottom: 9px; }
.doc li:last-child{ margin-bottom: 0; }
.doc li::marker{ color: var(--pink-light); }
.stamp{ margin: 14px 0 0; font-size:.84rem; color: var(--muted); }

/* inline links inside body copy — the house pink, not the browser's blue.
   The course pages already carry these where they point at each other. */
main p a, .doc a, .prog a{
  color: var(--pink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
main p a:hover, .doc a:hover, .prog a:hover{ color: var(--pink-hover); }
.ask .btn, .crumb a{ text-decoration:none; }

/* ——— the ask ——— */
.ask{
  margin-block: 56px 0; padding: 30px var(--pad) 34px;
  background:#fff; border:1px solid var(--hair); border-radius:20px; text-align:center;
}
.ask h2{ margin-bottom:8px; }
.ask p{ color: var(--muted); font-size:.98rem; }
.acts{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:20px; }
.btn{
  display:inline-flex; align-items:center; gap:9px; min-height:48px;
  padding: 12px 26px; border-radius:999px; text-decoration:none;
  font-family:'Readex Pro', sans-serif; font-weight:500; font-size:1rem;
  transition: background-color .18s ease, color .18s ease, transform .18s var(--out);
}
.btn:active{ transform: translateY(1px); }
.btn-1{ background: var(--pink); color:#fff; box-shadow: 0 8px 22px rgba(199,37,102,.22); }
.btn-1:hover{ background: var(--pink-hover); }
.btn-2{ background:#fff; color: var(--ink); border:1px solid var(--hair); }
.btn-2:hover{ border-color: var(--pink-light); color: var(--pink); }
.btn svg{ flex:none; }
.latin{ font-family:'Rubik', system-ui, sans-serif; font-weight:500; letter-spacing:.4px; }

/* ——— siblings: the other four courses, because a course page that dead-ends
       wastes the visit AND the internal link ——— */
.also{ margin-block: 56px 0; }
.also-list{ display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin:0; padding:0; list-style:none; }
.also-list a{
  display:block; padding: 15px 18px; background:#fff; border:1px solid var(--hair);
  border-radius:14px; text-decoration:none; color: var(--ink);
  font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:600; font-size:.99rem;
  transition: border-color .18s ease, color .18s ease;
}
.also-list a:hover{ border-color: var(--pink-light); color: var(--pink); }
.also-list em{ display:block; font-family:'Readex Pro', sans-serif; font-style:normal;
  font-weight:300; font-size:.85rem; color: var(--muted); margin-top:3px; }

/* ——— footer ——— */
.foot{ margin-block: 64px 0; padding-block: 26px 40px; border-top:1px solid var(--hair);
  font-size:.85rem; color: var(--muted); text-align:center; }
.foot a{ color: var(--muted); text-decoration:none; }
.foot a:hover{ color: var(--pink); text-decoration:underline; }
.foot p{ margin: 0 0 8px; }

a:focus-visible, .btn:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; border-radius:6px; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}