/* Aperintelligence AI Academy, shared styles for every rebuilt page. The homepage
   adds home.css. Ported from aperintelligence.com (aperintel/static/assets/site.css)
   on the Academy's rose gold palette (Julius, 2026-10-08). Components arrive from
   that file as the pages that use them are rebuilt. */

/* Manrope carries the body, so it is served from this site and preloaded in the
   layout: from Google Fonts it arrived late enough that text repainted seconds
   after the page appeared. One variable file covers weights 200 to 700, Latin
   only (Google's latin range). SIL Open Font License, in fonts/LICENSE-Manrope. */
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:200 700;font-display:swap;
  src:url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- colour themes ---------- */
/* The dark (espresso) values. They also apply wherever text sits on a
   photograph, in either theme: anything marked .on-photo, and the nav while it
   rests over the homepage photograph (it gets a solid bar once scrolled or
   opened). :where() keeps this rule at zero specificity, so the light theme
   below wins on the page itself, and forgives a browser without :has() instead
   of dropping the whole rule.
   The theme is set on <html> by the script at the top of layout.html. */
:where(:root, .on-photo, body:has(.hero-bg) .nav:not(.scrolled):not(:has(.nav-links.open))){
  color-scheme: dark;
  /* Set here, not only on body: text inherits body's already-computed colour, which
     in the light theme is near-black, so a photo surface must name its own. */
  color: var(--text);
  --ground-deep: #100D0B;
  --ground:      #15110F;
  --surface:     #1E1815;
  --surface-high: #2A221E;
  --line:        rgba(243,236,230,0.10);
  --line-strong: rgba(243,236,230,0.18);
  --line-hover:  rgba(243,236,230,0.5);
  --tint:        rgba(243,236,230,0.05);
  /* Every button is an outline with no fill, as on aperintelligence.com, in the theme's accent. */
  --button-line: #E4BBA3;

  --text:        #F3ECE6;
  --text-soft:   rgba(243,236,230,0.82);
  --text-muted:  #B5A89E;
  --highlight:   #E4BBA3;
  --positive:    #9CC5A6;
  --accent:      #E4BBA3;
  --error-text:  #F2A99A;

  --nav-glass:    rgba(21,17,15,0.5);
  /* An r,g,b triple, so the press wash and glow can fade it with their own alpha. */
  --press-rgb:    243,236,230;
  /* The logo PNG is a silver mark; the light theme darkens it with this filter. */
  --logo-filter:  none;

  --shadow-edge: inset 0 1px 0 rgba(243,236,230,0.05);
  --shadow-card: 0 50px 100px -60px rgba(0,0,0,0.9);
}

/* Light theme (Julius, 2026-10-08). Rose gold #C99A7E is too faint for text on
   the cream ground, so it draws lines and fills only; links, buttons and focus
   rings use the deeper #85573D (5.4:1). */
:root[data-theme="light"]{
  color-scheme: light;
  --ground-deep: #F1E6D8;
  --ground:      #F8F1E7;
  --surface:     #FFFBF6;
  --surface-high: #F3E9DD;
  --line:        rgba(201,154,126,0.32);
  --line-strong: rgba(201,154,126,0.6);
  --line-hover:  rgba(133,87,61,0.6);
  --tint:        rgba(201,154,126,0.12);
  --button-line: #85573D;

  --text:        #1E1A16;
  --text-soft:   #3A312A;
  --text-muted:  #5E5248;
  --highlight:   #85573D;
  --positive:    #2F6B4A;
  --accent:      #85573D;
  --error-text:  #A32D1E;

  --nav-glass:    rgba(248,241,231,0.88);
  --press-rgb:    133,87,61;
  --logo-filter:  brightness(0.25);

  --shadow-edge: inset 0 1px 0 rgba(255,255,255,0.7);
  --shadow-card: 0 40px 80px -50px rgba(30,26,22,0.3);
  --page-fade:   #F1E6D8;
  --page-fade-edge: #F1E6D8;
}

:root{
  /* Where the hero photograph fades into the page below it. A page-level colour,
     deliberately outside the dark set above: inside the hero the dark values
     apply, but the fade must reach the page's own ground in either theme. */
  --page-fade:   #100D0B;
  /* The hero's bottom border, drawn over its own dark background: a faint line in
     the dark theme, the page colour in the light one so the fade has no seam. */
  --page-fade-edge: rgba(243,236,230,0.10);

  --display-weight:300;
  --sans:  "Manrope", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;

  --nav-h:  76px;
  --logo-h: 44px;
  --wrap:   1240px;

  /* Every size on the site was cut by a fifth on 2026-10-10 (Julius), with 12px as the smallest text. */
  --fs-h2:    clamp(24px, 1.6vw + 13px, 37px);
  --fs-h3:    clamp(13.5px, 0.32vw + 10.5px, 15px);
  --fs-intro: clamp(12px, 0.16vw + 10px, 13px);
  --fs-meta:  12px;
  --sec-pad:  clamp(72px, 9vw, 128px);
  --head-gap: clamp(36px, 4.5vw, 64px);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;

  --ease-out: cubic-bezier(.2,.8,.2,1);
  --t-fast: 160ms;
  --t: 240ms;
}

/* ---------- base ---------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }
body{margin:0;background:var(--ground);color:var(--text);font:400 12px/1.65 var(--sans);-webkit-font-smoothing:antialiased;}
/* Headings are Manrope Light, the same rule as aperintelligence.com (Julius,
   2026-10-10; they were Instrument Serif until then, and the site no longer
   loads a serif at all). --display-weight is the weight of smaller heading-like text (course
   names, prices, list titles), where 200 reads too thin. */
h1,h2{font-family:var(--sans);font-weight:200;margin:0;letter-spacing:-0.02em;line-height:1.1;text-wrap:balance;}
h3{font-family:var(--sans);font-weight:600;margin:0;letter-spacing:-0.01em;line-height:1.3;text-wrap:balance;}
p{margin:0;}
p,figcaption,summary{text-wrap:pretty;}
b,strong{font-weight:600;}
a{color:inherit;text-decoration:none;}
/* height:auto lets the width and height attributes set the shape without fixing the height in pixels. */
img{max-width:100%;height:auto;display:block;}
button{font:inherit;color:inherit;}
/* The hidden attribute always wins, even over a component that sets its own display (.btn, sections). */
[hidden]{display:none !important;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
section{padding:var(--sec-pad) 0;}
/* A section that follows a page header directly, so the two do not stack their padding. */
.tight-top{padding-top:0;}
/* The plain header of a content page with no photograph. */
.page-head{padding:clamp(56px, 7vw, 104px) 0 clamp(40px, 5vw, 64px);}
/* Sections on the deeper ground, alternating with the base colour down a page. */
.band{background:var(--ground-deep);border-block:1px solid var(--line);}
:focus-visible{outline:2px solid var(--highlight);outline-offset:3px;}
section[id]{scroll-margin-top:calc(var(--nav-h) + 16px);}
@keyframes rise{from{opacity:0;transform:translateY(6px);}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 22px;line-height:1.25;text-align:center;
  border-radius:999px;font-weight:500;font-size:12px;font-family:inherit;
  border:1px solid var(--button-line);cursor:pointer;
  background:transparent;color:var(--text);
  transition:background-color var(--t) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn[disabled]{opacity:.42;pointer-events:none;}

/* The press, on every kind of button: a soft wash spreads from the exact point
   pressed and fades, and a glow rings the outline. site.js sets --press-x,
   --press-y and --press-size and adds .is-pressed. */
.btn,.cookie-btn,.icon-btn,.play-pill,.lumen-trigger,.lumen-icon{position:relative;overflow:hidden;isolation:isolate;}
.btn:active,.cookie-btn:active,.icon-btn:active,.play-pill:active,.lumen-trigger:active,.lumen-icon:active{transform:scale(.97);}
.btn::after,.cookie-btn::after,.icon-btn::after,.play-pill::after,.lumen-trigger::after,.lumen-icon::after{
  content:"";position:absolute;z-index:-1;left:var(--press-x, 50%);top:var(--press-y, 50%);
  width:var(--press-size, 200%);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(var(--press-rgb),.55) 0, rgba(var(--press-rgb),.18) 45%, transparent 70%);
  opacity:0;transform:translate(-50%, -50%) scale(0);
}
.is-pressed{animation:press-glow 700ms var(--ease-out);}
.is-pressed::after{animation:press-wash 700ms var(--ease-out);}
@keyframes press-wash{
  from{opacity:1;transform:translate(-50%, -50%) scale(0);}
  to{opacity:0;transform:translate(-50%, -50%) scale(1);}
}
@keyframes press-glow{
  from{box-shadow:0 0 0 0 rgba(var(--press-rgb),.4);}
  to{box-shadow:0 0 0 8px rgba(var(--press-rgb),0);}
}

/* ---------- nav ---------- */
/* Transparent at rest so the homepage photograph runs behind it; it takes on a
   background as soon as the page moves, because text scrolling under a
   see-through bar is unreadable. The :has() arm covers the open phone menu,
   whose panel is solid. */
.nav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  transition:background-color var(--t) var(--ease-out);
}
.nav.scrolled,
.nav:has(.nav-links.open){
  background:var(--nav-glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.nav .logo{display:flex;align-items:center;flex-shrink:0;min-height:44px;}
.nav .logo img{height:var(--logo-h);width:auto;}
.logo img{filter:var(--logo-filter);}
/* The mark with the Academy's name set beside it, in the nav and the footer. */
.logo{display:flex;align-items:center;gap:12px;}
.logo span{position:relative;top:1px;font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:-0.01em;line-height:1;color:var(--text);white-space:nowrap;}
.nav-links{display:flex;align-items:center;gap:26px;font-size:12px;font-weight:400;}
.nav-links a{white-space:nowrap;}
.nav-links a:not(.btn){color:var(--text-soft);transition:color var(--t) var(--ease-out);}
.nav-links .btn{min-height:38px;padding:0 18px;}
/* margin-left:auto keeps the links beside the theme button at the right, not centred in the bar. */
.nav-links{margin-left:auto;}
/* The theme button shows where a press takes you: the sun in the dark theme, the moon in the light one. */
.theme-toggle{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0;background:none;border:0;border-radius:50%;cursor:pointer;color:var(--text-soft);transition:color var(--t) var(--ease-out);}
.theme-toggle .icon-moon{display:none;}
[data-theme="light"] .theme-toggle .icon-sun{display:none;}
[data-theme="light"] .theme-toggle .icon-moon{display:block;}
/* 10px padding round a 24px icon makes a 44px target; the negative margin keeps the icon on the page edge. */
.nav-burger{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer;color:var(--text);}

/* Read by screen readers, not shown. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- photo layer and button row (home hero and course page heroes) ---------- */
.hero-bg{position:absolute;inset:0;overflow:hidden;}
.hero-bg img{width:100%;height:100%;object-fit:cover;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;}

/* ---------- a whole section set on a photograph ---------- */
/* Marked .on-photo in the markup like the heroes, so the text stays light on the dark wash in both themes. */
.photo-section{position:relative;overflow:hidden;background:var(--ground-deep);}
.photo-section-bg{position:absolute;inset:0;}
.photo-section-bg img{width:100%;height:100%;object-fit:cover;}
.photo-section-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(16,13,11,.9) 0%, rgba(16,13,11,.8) 50%, rgba(16,13,11,.86) 100%);}
.photo-section > .wrap{position:relative;z-index:1;}

/* ---------- the tracks: one ruled row per track (home and the courses index) ---------- */
.ladder{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong);}
.ladder li{border-bottom:1px solid var(--line-strong);}
.ladder a{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) 120px 170px 150px;grid-template-areas:"name tag length price link";
  gap:24px;align-items:baseline;padding:28px 12px;
  transition:background-color var(--t) var(--ease-out);
}
.ladder h3{grid-area:name;font-family:var(--sans);font-weight:var(--display-weight);font-size:clamp(19px, 0.72vw + 12px, 24px);line-height:1.1;letter-spacing:0;}
.rung-tag{grid-area:tag;color:var(--text-muted);}
/* On the courses index the line and the track's features share the tag column. */
.rung-detail{grid-area:tag;}
.rung-features{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:12px;color:var(--text-muted);}
.rung-features li{display:flex;gap:10px;align-items:baseline;}
.rung-features li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--line-hover);transform:translateY(-2px);}
.rung-length{grid-area:length;color:var(--text-soft);}
.rung-price{grid-area:price;font-family:var(--sans);font-weight:var(--display-weight);font-size:21px;line-height:1;}
.rung-price small{font-family:var(--sans);font-size:12px;color:var(--text-muted);}
.rung-link{grid-area:link;justify-self:end;white-space:nowrap;font-weight:600;color:var(--highlight);}
.rung-link::after{content:"";display:inline-block;width:7px;height:7px;margin-left:10px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--t) var(--ease-out);}

/* ---------- spec list: a name beside its description, under hairline rules ---------- */
.spec-list{margin:0;border-bottom:1px solid var(--line-strong);}
.spec-list > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px;padding:24px 0;border-top:1px solid var(--line-strong);}
.spec-list dt{font-family:var(--sans);font-weight:var(--display-weight);font-size:clamp(17.5px, 0.56vw + 12px, 21.5px);line-height:1.15;}
.spec-list dd{margin:0;max-width:62ch;color:var(--text-muted);}

/* ---------- section heads ---------- */
/* A heading with its intro paragraph set beside it. */
.split-head{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px;align-items:last baseline;margin-bottom:var(--head-gap);}
.split-head h2{font-size:var(--fs-h2);}
.split-head p{grid-column:2 / -1;max-width:58ch;color:var(--text-muted);font-size:var(--fs-intro);line-height:1.65;}
.split-head p a,.enrol-lead a{color:var(--text);text-decoration:underline;text-underline-offset:3px;}

/* ---------- questions: a heading beside an expanding list ---------- */
.questions{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px, 6vw, 96px);align-items:start;}
.questions h2{font-size:var(--fs-h2);}
.questions-more{display:inline-block;margin-top:20px;padding-block:6px;font-weight:600;color:var(--highlight);}
.faq-list details{border-bottom:1px solid var(--line);}
.faq-list details:first-of-type{border-top:1px solid var(--line);}
.faq-list summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;color:var(--text);font-size:12px;}
.faq-list summary::-webkit-details-marker{display:none;}
/* A drawn plus that turns into a cross when the answer opens. */
.faq-list summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-6px;background:linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;color:var(--text-muted);transition:transform var(--t) var(--ease-out), color var(--t) var(--ease-out);}
.faq-list details[open] summary::after{transform:rotate(45deg);color:var(--highlight);}
.faq-list details p{padding:0 40px 20px 0;max-width:62ch;color:var(--text-muted);}
.faq-list details[open] p{animation:rise .35s var(--ease-out) both;}

/* ---------- register panel (end of the homepage and the content pages) ---------- */
.register{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:56px;border-radius:var(--r-xl);background:linear-gradient(160deg, var(--surface-high), var(--surface));border:1px solid var(--line);box-shadow:var(--shadow-edge);}
.register h2{font-size:var(--fs-h2);}
.register-lead{margin-top:18px;max-width:46ch;font-size:var(--fs-intro);line-height:1.6;color:var(--text-muted);}
.register ul{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:12px;}
.register li{display:flex;gap:12px;align-items:baseline;}
.register li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line-hover);flex:none;transform:translateY(-2px);}
.register-actions{display:grid;gap:12px;align-self:stretch;align-content:center;padding-left:56px;border-left:1px solid var(--line);}
.register-note{margin-bottom:8px;font-size:12px;color:var(--text-muted);}
.register-actions .btn{width:100%;max-width:440px;}

/* ---------- course page hero: a shorter photo hero (.on-photo, so light text in both themes) ---------- */
/* Pulled up under the see-through nav like the home hero; the nav's resting rule keys on .hero-bg. */
.page-hero{
  position:relative;overflow:hidden;margin-top:calc(var(--nav-h) * -1);
  padding:calc(var(--nav-h) + clamp(56px, 7vw, 104px)) 0 calc(var(--hero-fade) + 32px);
  background:var(--ground-deep);border-bottom:1px solid var(--page-fade-edge);
  --hero-fade:96px;
}
/* Heaviest on the left, under the text, and light on the right, where the people in the photograph are.
   The band across the top keeps the nav readable over a bright photograph. */
.page-hero .hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(0deg, var(--page-fade) 0, transparent var(--hero-fade)),
    linear-gradient(180deg, rgba(16,13,11,.78) 0%, rgba(16,13,11,0) 24%),
    linear-gradient(90deg, rgba(16,13,11,.92) 0%, rgba(16,13,11,.86) 44%, rgba(16,13,11,.34) 100%);
}
.page-hero .hero-bg img{object-position:100% 50%;}
.page-hero > .wrap{position:relative;z-index:1;}
.page-hero h1,.page-head h1{font-size:clamp(30.5px, 1.92vw + 14.5px, 48px);line-height:1.08;max-width:20ch;}
.page-hero-lead{margin-top:20px;max-width:40ch;font-family:var(--sans);font-weight:var(--display-weight);font-size:clamp(17.5px, 0.64vw + 13px, 22.5px);line-height:1.25;}
.standfirst{margin-top:18px;max-width:62ch;font-size:var(--fs-intro);line-height:1.65;color:var(--text-soft);}
/* The course's facts (price, length, schedule): data, so they sit in a row as a definition list. */
.hero-facts{display:flex;flex-wrap:wrap;gap:20px 40px;margin:40px 0 0;padding-top:24px;border-top:1px solid var(--line-strong);}
.hero-facts dt{font-size:var(--fs-meta);color:var(--text-muted);}
.hero-facts dd{margin:4px 0 0;color:var(--text);}

/* ---------- course pages: a few words beside an example project in a window frame (.app-mock, card-stack.css) ---------- */
.course-example{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px, 6vw, 96px);align-items:center;}
.course-example h2{font-size:var(--fs-h2);}
.course-example p{margin-top:18px;max-width:42ch;font-size:var(--fs-intro);line-height:1.65;color:var(--text-muted);}
.example-frame{aspect-ratio:16 / 10;}

/* ---------- course pages: links to the other courses, one ruled row each ---------- */
/* The rule above the section separates it from whichever section ends the page, band or plain. */
.other-courses{border-top:1px solid var(--line);}
.course-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong);}
.course-links a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:20px 12px;border-bottom:1px solid var(--line-strong);transition:background-color var(--t) var(--ease-out);}
.course-link-name{font-family:var(--sans);font-weight:var(--display-weight);font-size:clamp(17.5px, 0.56vw + 12px, 21.5px);line-height:1.15;}

/* ---------- lists and notes inside course sections ---------- */
.ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;}
.ticks li{display:flex;gap:12px;align-items:baseline;color:var(--text-soft);}
.ticks li::before{content:"";flex:none;width:12px;height:7px;border-left:2px solid var(--highlight);border-bottom:2px solid var(--highlight);transform:rotate(-45deg) translateY(-3px);}
.section-note{margin-top:36px;max-width:62ch;color:var(--text-muted);}

/* ---------- enrol: the heading beside the booking form ---------- */
.enrol{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px, 6vw, 96px);align-items:start;}
.enrol h2{font-size:var(--fs-h2);}
.enrol-lead{margin-top:18px;max-width:42ch;font-size:var(--fs-intro);line-height:1.65;color:var(--text-muted);}
.enrol-panel{padding:clamp(24px, 3vw, 40px);border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-edge);}

/* ---------- form fields (class names as the booking forms and checkout.js use them) ---------- */
.form-row{margin-bottom:20px;}
.form-label{display:block;margin-bottom:8px;font-size:12px;font-weight:600;color:var(--text);}
.form-input,.form-select,.form-textarea{
  width:100%;min-height:46px;padding:11px 14px;border:1px solid var(--line-strong);border-radius:var(--r-xs);
  font:inherit;color:var(--text);background:var(--ground);
  transition:border-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-muted);}
.form-textarea{min-height:110px;resize:vertical;}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--highlight);box-shadow:0 0 0 3px var(--tint);}
.form-select{cursor:pointer;}
.form-select:disabled{cursor:not-allowed;opacity:.7;}
.form-hint{display:block;margin-top:6px;font-size:12px;color:var(--text-muted);}
/* The payment choice: each radio sits in its own bordered row. */
.form-row > label:has(> input[type="radio"]){display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);cursor:pointer;color:var(--text);}
.form-row > label:has(> input[type="radio"]) > span:first-of-type{flex:1;}
.form-row > label:has(> input[type="radio"]:checked){border-color:var(--highlight);background:var(--tint);}
input[type="radio"],input[type="checkbox"]{accent-color:var(--accent);}
.pricing-detail-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:22px 0;border-top:1px solid var(--line);}
.pricing-detail-label{color:var(--text-soft);}
.pricing-detail-value{font-family:var(--sans);font-weight:var(--display-weight);font-size:22.5px;line-height:1;color:var(--text);}
.body-mono{font-family:var(--mono);font-size:12px;color:var(--text-muted);}
.form-submit{width:100%;margin-top:8px;}
.enrol-panel form > .body-mono{margin-top:14px;text-align:center;}
/* The honeypot field: off screen for people, still in the form for a bot to fill. */
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
/* Shown in place of the taster form once a free seat is booked (checkout.js). */
.booking-done h3{font-family:var(--sans);font-weight:var(--display-weight);font-size:22.5px;}
.booking-done p{margin-top:10px;color:var(--text-muted);}
.booking-done a{color:var(--highlight);text-decoration:underline;text-underline-offset:3px;}
.booking-done:focus{outline:none;}
/* Focus scrolls the panel into view; this keeps its heading clear of the sticky nav. */
.booking-done{scroll-margin-top:calc(var(--nav-h) + 24px);}
/* checkout.js and cohorts.js set these two inline; the rules here give them room and type. */
.checkout-error{line-height:1.5;}
.cohort-empty-notice a{text-underline-offset:3px;}

/* ---------- long-form legal pages (ported from aperintelligence.com) ---------- */
.legal-date{margin-top:16px;font-size:12px;color:var(--text-muted);}
.prose{max-width:72ch;}
.prose > :first-child{margin-top:0;}
.prose h2{font-size:clamp(19px, 0.72vw + 13px, 24px);margin-top:48px;}
.prose h3{font-size:var(--fs-h3);margin-top:28px;}
.prose p,.prose li{color:var(--text-muted);}
.prose p{margin-top:14px;}
.prose ul,.prose ol{margin:14px 0 0;padding-left:22px;}
.prose li{margin-bottom:8px;}
.prose a{color:var(--text);text-decoration:underline;text-underline-offset:3px;}
.prose strong{color:var(--text);}
.prose code{font-family:var(--mono);font-size:.95em;color:var(--text);}
/* Tables scroll sideways on a phone rather than squeezing the columns. */
.prose table{display:block;overflow-x:auto;width:100%;margin-top:18px;border-collapse:collapse;font-size:12px;}
.prose th,.prose td{padding:10px 14px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:var(--text-muted);}
.prose th{color:var(--text);font-weight:600;border-bottom-color:var(--line-strong);}
/* A highlighted note inside a policy, such as the refund summary. */
.prose .callout{margin-top:24px;padding:18px 20px;border-radius:var(--r-md);background:var(--tint);border:1px solid var(--line-strong);}

/* ---------- footer ---------- */
.site-foot{position:relative;padding:56px 0 40px;border-top:1px solid var(--line);background:var(--ground-deep);font-size:12px;color:var(--text-muted);}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;}
.foot-brand img{height:38px;width:auto;}
.foot-brand .logo span{font-size:13.5px;}
.foot-tagline{margin-top:18px;max-width:38ch;line-height:1.6;}
.foot-contact{display:inline-block;margin-top:14px;padding-block:6px;font-weight:500;color:var(--highlight);}
.foot-title{margin-bottom:10px;font-weight:600;color:var(--text);}
.foot-col ul{list-style:none;margin:0;padding:0;}
.foot-col a,.foot-bottom a{display:inline-block;padding-block:5px;transition:color var(--t) var(--ease-out);}
.foot-bottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:14px;font-size:var(--fs-meta);}
.legal{display:flex;flex-wrap:wrap;gap:4px 20px;}

/* ---------- accessibility ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;background:var(--text);color:var(--ground-deep);border-radius:0 0 10px 0;
  font-size:12px;font-weight:600;
}
.skip:focus{left:0;}

/* Every hover state lives here, so touch screens never keep a stuck hover after a tap. */
@media (hover:hover){
  .btn:hover,.cookie-btn:hover,.icon-btn:hover,.play-pill:hover,.lumen-trigger:hover,.lumen-icon:hover{background-color:var(--tint);}
  .theme-toggle:hover,.nav-links a:not(.btn):hover,.foot-col a:hover,.foot-bottom a:hover,.foot-contact:hover{color:var(--text);}
  .faq-list summary:hover::after{color:var(--highlight);}
  .ladder a:hover,.course-links a:hover{background-color:var(--tint);}
  .ladder a:hover .rung-link::after,.course-links a:hover .rung-link::after{transform:translate(4px, -2px) rotate(45deg);}
  .questions-more:hover{text-decoration:underline;text-underline-offset:4px;}
}

@media (max-width:1100px){
  .ladder a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "tag tag" "length link";gap:10px 24px;}
  .rung-price{justify-self:end;text-align:right;}
}
@media (max-width:900px){
  .wrap{padding:0 20px;}
  .split-head{grid-template-columns:1fr;gap:16px;}
  .split-head p{grid-column:auto;}
  .questions,.register,.enrol,.course-example{grid-template-columns:1fr;gap:36px;}
  /* On a narrow screen the text runs the full width, so the wash is even across the photograph. */
  .page-hero .hero-bg::after{background:
    linear-gradient(0deg, var(--page-fade) 0, transparent var(--hero-fade)),
    linear-gradient(180deg, rgba(16,13,11,.9) 0%, rgba(16,13,11,.8) 100%);}
  .page-hero .hero-bg img{object-position:78% 50%;}
  .ticks{grid-template-columns:1fr;}
  .register{padding:32px 24px;}
  .register-actions{padding:28px 0 0;border-left:0;border-top:1px solid var(--line);}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px 24px;}
  .foot-brand{grid-column:1 / -1;}
  /* 44px tap areas on touch screens: the footer links get full rows, and the
     footer logo gets padding with a matching negative margin, so nothing visibly moves. */
  .foot-brand .logo{padding:3px 0;margin:-3px 0;}
  .foot-col a,.legal a,.foot-contact{display:inline-flex;align-items:center;min-height:44px;padding-block:0;}
  .legal a{min-width:44px;justify-content:center;}
  .foot-contact{margin-top:6px;}
}
/* Four links and a button need about 840px on one row beside the logo, so below this the menu folds into the burger. */
@media (max-width:860px){
  .nav-links{
    display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    background:var(--ground-deep);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;padding:12px 32px 20px;
  }
  .nav-links.open{display:flex;}
  /* With the links folded away, this pushes the theme button over to sit beside the burger. */
  .theme-toggle{margin-left:auto;}
  .nav-links a:not(.btn){padding:12px 0;width:100%;font-size:12px;}
  .nav-links .btn{margin-top:10px;margin-bottom:6px;min-height:44px;padding:0 24px;}
  .nav-burger{display:block;}
}
@media (max-width:720px){
  .ladder a{padding:24px 0;}
  .course-links a{padding:18px 0;}
  .spec-list > div{grid-template-columns:1fr;gap:8px;}
  :root{--nav-h:68px;--logo-h:38px;}
  .nav .logo span{font-size:13px;}
  .nav-links{padding:12px 20px 20px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
}

/* ---------- cookie card (cookie-consent.js) ---------- */
#cookie-card{
  position:fixed;z-index:60;left:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  width:min(300px, calc(100vw - 32px));padding:16px 16px 14px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-card);
  font-size:12px;line-height:1.5;color:var(--text-muted);
  opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
#cookie-card.is-visible{opacity:1;transform:none;}
#cookie-card p{padding-right:20px;}
#cookie-card a{color:var(--text);text-decoration:underline;text-underline-offset:3px;}
.cookie-close{position:absolute;top:0;right:0;width:44px;height:44px;background:none;border:0;color:var(--text-muted);font-size:12px;line-height:1;cursor:pointer;}
.cookie-actions,.cookie-settings{display:flex;align-items:center;gap:8px;margin-top:12px;}
.cookie-settings{justify-content:space-between;color:var(--text);}
.cookie-settings[hidden]{display:none;}
.cookie-btn{min-height:44px;padding:0 14px;border-radius:999px;cursor:pointer;font-weight:600;font-size:12px;color:var(--text);background:transparent;border:1px solid var(--button-line);transition:background-color var(--t) var(--ease-out), transform var(--t-fast) var(--ease-out);}
/* Padding makes a 44px tap area; the matching negative margin keeps the card the same size. */
.cookie-link{margin:-13px 0 -13px auto;background:none;border:0;padding:13px 0;cursor:pointer;font-size:12px;color:var(--text-muted);text-decoration:underline;text-underline-offset:3px;}
@media (hover:hover){
  .cookie-close:hover,.cookie-link:hover{color:var(--text);}
}