/* generated by tools/css.py from the HF boards and design/site-system.css */
/* from design/HFHeader.dc.html */
.hh{container-type:inline-size;font-family:var(--body);color:var(--fg)}
.hh .site-h{position:relative;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--hair);transition:box-shadow .3s var(--ease),border-color .3s var(--ease)}
.hh.is-scrolled .site-h{border-bottom-color:transparent;box-shadow:0 1px 0 rgb(16 32 27 / .04),0 10px 28px -12px rgb(30 60 50 / .26)}
.hh .site-h__logo{height:24px}
@media (prefers-reduced-motion:reduce){.hh .site-h{transition:none}}
.hh .site-h__in{gap:0}
.hh .site-h__nav{margin-left:auto;gap:4px}
.hh .site-h__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:8px}
.hh .site-h__nav a[aria-current=page]{color:var(--fg);text-decoration-color:var(--primary)}
.hh-act{margin-left:56px;display:flex;align-items:center;gap:20px}
.hh .site-h__login{display:inline-flex;align-items:center;min-height:44px}
.hh-skip{position:absolute;left:clamp(16px,4vw,40px);top:10px;z-index:6;padding:10px 16px;border-radius:10px;background:var(--fg);color:#fff;font-size:14.5px;font-weight:600;transform:translateY(-160%)}
.hh-skip:focus,.hh.s-skip .hh-skip{transform:none;outline:2px solid var(--primary);outline-offset:3px}
.hh .site-h__nav a,.hh .site-h__login{transition:color .2s var(--ease)}
.hh .site-h__login:hover{color:var(--primary)}
.hh a:focus-visible,.hh button:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}
.hh.s-hover .site-h__nav a:nth-child(3){color:var(--fg)}
.hh.s-focus .site-h__nav a:nth-child(2){outline:2px solid var(--primary);outline-offset:3px;border-radius:6px;color:var(--fg)}
.hh-menu{display:none;place-items:center;width:44px;height:44px;margin-right:-8px;border:0;border-radius:10px;background:transparent;color:var(--fg);cursor:pointer}
.hh-menu:hover{background:var(--tint)}
.hh-menu svg{width:22px;height:22px}
.hh-sh{display:none}
@container (max-width:860px){.hh .site-h__nav,.hh .site-h__login{display:none}.hh .site-h__in{height:60px}.hh-act{margin-left:auto;gap:8px}.hh-menu{display:grid}.hh .site-h__logo{height:22px}.hh .btn--sm{height:36px;padding:0 14px;font-size:14px}.hh-lg{display:none}.hh-sh{display:inline}}
.hh-sheet{display:flex;flex-direction:column;min-height:700px;padding:8px 16px 32px;background:#fff;animation:hh-in var(--d-fast) var(--out)}
.hh-sheet a.hh-row{display:flex;align-items:center;min-height:64px;font:600 24px/1.2 var(--display);letter-spacing:-.01em;color:var(--fg);border-bottom:1px solid var(--hair)}
.hh-sheet a.hh-row:hover{color:var(--primary)}
.hh-sheet a.hh-row[aria-current=page]{color:var(--primary)}
.hh-btns{display:grid;gap:12px;margin-top:auto;padding-top:28px}
.hh.is-open .hh-act .btn--sm{display:none}
@keyframes hh-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.hh-sheet{animation:none}}
/* from design/HFFooter.dc.html */
.pf{container-type:inline-size;position:relative;overflow:hidden;background:var(--primary-dark);color:var(--on-dark);font-family:var(--body)}
.pf-in{max-width:1240px;margin:0 auto;padding:88px clamp(20px,6vw,80px) 0}
.pf-top{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:40px}
.pf-logo{display:block;height:22px;width:auto;color:var(--on-dark)}
.pf-line{margin:22px 0 0;max-width:32ch;font-size:16px;line-height:1.55;color:var(--on-dark-muted)}
.pf-soc{display:flex;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.pf-soc a{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);color:var(--on-dark);box-shadow:inset 0 0 0 1px var(--on-dark-line);transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.pf-soc a:hover{background:var(--on-dark-line);box-shadow:inset 0 0 0 1px var(--primary-mid);color:#fff}
.pf-soc svg{width:18px;height:18px;fill:currentColor}
.pf-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.pf-col h2{margin:0 0 14px;font:600 15px/1.3 var(--display);color:var(--on-dark)}
.pf-col a{display:inline-block;padding:6px 0;font-size:15px;line-height:1.35;color:var(--on-dark-muted);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
.pf-col a:hover{color:#fff;text-decoration-color:var(--accent-mint)}
.pf a:focus-visible{outline:2px solid var(--accent-mint);outline-offset:3px;border-radius:4px}
.pf-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-top:72px;padding:28px 0 0;border-top:1px solid var(--on-dark-line)}
.pf-legal{display:grid;gap:6px;max-width:820px;margin:0;font-size:14px;line-height:1.55;color:var(--on-dark-muted)}
.pf-legal p{margin:0}
.pf-pay{display:inline-flex;align-items:center;gap:14px;color:var(--on-dark-muted)}
.pf-pay svg{display:block;height:15px;width:auto}
.pf-pay .paym__ideal{height:18px}
.pf-word{margin:16px 0 0;font:700 min(185px,calc((100cqw - 40px) / 6.4))/.78 var(--display);letter-spacing:-.04em;white-space:nowrap;color:var(--on-dark);opacity:.06;user-select:none;pointer-events:none}
.pf-word span{display:block}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
.pf-word span{animation:pf-rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
}
}
@keyframes pf-rise{from{transform:translateY(42%)}to{transform:translateY(0)}}
@container (max-width:900px){.pf-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}.pf-brand{grid-column:1 / -1}}
@container (max-width:560px){.pf-in{padding-top:64px}.pf-bar{margin-top:56px;flex-direction:column;align-items:flex-start}}
/* Hand-written, not a canvas board. The parts every page shares, loaded by page() on every page after page.css:
   tokens, the sticky header and its phone drawer, the footer's edge, eased hovers and entrance motion.
   tools/css.py writes it into public/_site/css/site.css after the HFHeader and HFFooter boards. */

/* Tokens (Bence 27 Oct): section rhythm 96 laptop / 64 phone, section headings 44 / 28, one left edge for the
   header, every section and the footer. Motion eases out on the way in and in on the way out; never linear. */
:root{
  --sec:clamp(64px,52.1px + 3.048vw,96px);
  --h2:clamp(28px,22.06px + 1.524vw,44px);
  /* one page title on every page (home, year, thanks): 40 phone / 76 laptop */
  --display-1:clamp(40px,26.63px + 3.429vw,76px);
  --gap-lede:clamp(32px,26px + 1.524vw,48px);
  --gap-h:clamp(12px,10.5px + .381vw,16px);
  /* type scale inside sections: lede 20/18, card title 24/20, large body 18/16, body 16, small 14 */
  --t-lede:clamp(18px,17.26px + .19vw,20px);
  --t-h3:clamp(20px,18.51px + .381vw,24px);
  --t-lg:clamp(16px,15.26px + .19vw,18px);
  --t-body:16px;
  --t-sm:14px;
  --pad-card:clamp(24px,21.03px + .762vw,32px);
  --gap-card:clamp(16px,13.03px + .762vw,24px);
  /* every card: one corner, one resting shadow; heading and lede each one measure */
  --r-card:clamp(20px,18.51px + .381vw,24px);
  --w-h:16em;
  --w-lede:34em;
  --edge:max(clamp(20px,6vw,80px),calc((100% - 1120px) / 2));
  --out:cubic-bezier(.16,1,.3,1);
  --in:cubic-bezier(.4,0,1,1);
  /* Motion (design/MOTION.md): things already on screen that move, sheets and bars, small pops; then the five times */
  --io:cubic-bezier(.65,0,.35,1);
  --sheet:cubic-bezier(.32,.72,0,1);
  --spring:var(--out);
  --d-press:.1s;--d-fast:.2s;--d-ui:.35s;--d-item:.6s;--d-hero:.9s;
  --st:70ms;--rv-y:20px;
  /* one ease-out for every page: the older --ease (.2,.8,.2,1) and the year page's (.22,1,.36,1) fold into it */
  --ease:var(--out);
  --ease-out:var(--out);
  --sk-ease:var(--out);
  /* corners, four steps: controls and buttons, cards inside a card, cards, pills */
  --r-sm:12px;
  --r-in:16px;
  /* Colour (Bence 27 Oct): every UI colour is one of these; the canvas's base set (--bg, --fg, --primary ...) is in
     design/pty.css. Art inside pictures, the Pass identities and third-party brand marks keep their own. */
  --primary-dark:#053429;
  --primary-mid:#2c7a62;
  --accent-mint:#bdffec;
  --line:#e3ebe7;
  --hair-2:rgb(16 32 27 / .18);
  --hair-3:rgb(16 32 27 / .3);
  --scrim:rgb(14 42 34 / .45);
  /* Shadows: a hairline ring at rest, a 2px primary ring when picked; --elev-card and --elev-float (design/pty.css) lift. */
  --ring:inset 0 0 0 1px var(--hair);
  --ring-on:inset 0 0 0 2px var(--primary);
  --on-dark:#dff0e7;
  --on-dark-muted:#9dbcae;
  --on-dark-line:#114536;
  /* the Lifesaver's warm paper and its orange */
  --paper:#fffdf8;
  --paper-2:#f4f1ea;
  --paper-line:#d9cfbd;
  --paper-ink:#5b4a2e;
  --ls:#c4581b;
  --ls-ink:#a8461a;
  --ls-tint:#fbe6d8;
  --ls-line:#f3dccb;
  --gone:#8a2a2a;
  --gone-tint:#f2e6e6;
  --star:#e0a526;
  /* Layers: the sticky header, the bottom dock and buy bar, the pass sheet, the page-leaving veil. */
  --z-header:20;
  --z-dock:30;
  --z-sheet:40;
  --z-veil:70;
  /* Breakpoints (no variables in media queries): 560 phone, 760 small tablet, 900 tablet, 1180 laptop. */
}

/* One keyboard focus ring on every page (WCAG 2.4.7): 2px primary, 2px off the edge; the dark footer keeps its mint one. */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pf :focus-visible{outline-color:var(--accent-mint)}

/* Native controls take the page's type, not the browser's 13px. */
button,input,select,textarea{font:inherit;color:inherit}
/* Small print never under 14px; uppercase labels 12px. */
.faint,.yy-rate{font-size:var(--t-sm)}
.dd-label{font-size:12px}
/* One corner per kind of thing. */
.btn,.btn--sm,.dd-btn,.yy-more,.hh-menu{border-radius:var(--r-sm)}
.opt,.yy-courses li,.yy-inc{border-radius:var(--r-in)}
.sum,.vid,.mba-cert,.dd{border-radius:var(--r-card)}
/* The footer's big word rises with the page's ease as it scrolls in, on every page (was linear off the home). */
.pf-word span{animation-timing-function:var(--out)}
/* Footer links: a full 44px tap target on touch screens. */
@media (pointer:coarse){.pf-col a{display:inline-flex;align-items:center;min-height:44px;padding:0}}

/* Header: one sticky bar on every page; an anchor lands its heading 24px under it. */
.hh{position:sticky;top:0;z-index:var(--z-header)}
.hh .btn--sm{white-space:nowrap}
.hh-menu,.hh-x{-webkit-tap-highlight-color:transparent}

/* Phone menu (Bence 27 Oct): full screen and white; its top row repeats the bar so the menu button turns into the close
   button in the same spot; the links, then the two buttons pinned to the bottom. A native modal dialog: focus trap, Escape. */
html:has(.hh-dr[open]),html:has(.hh-dr[open]) body{overflow:hidden}
.hh-dr{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;color:var(--fg);opacity:0;transition:opacity .28s var(--out)}
.hh-dr[open]{display:flex;flex-direction:column}
.hh-dr.is-in{opacity:1}
.hh-dr.is-out{transition:opacity .2s var(--in)}
/* the top row stays where the header was; the links and buttons follow the panel in, a beat apart; on the way out they all go together */
.hh-dr .hh-row,.hh-dr .hh-btns{opacity:0;transform:translateY(14px);transition:opacity .45s var(--out),transform .55s var(--out)}
.hh-dr.is-in .hh-row,.hh-dr.is-in .hh-btns{opacity:1;transform:none}
.hh-dr.is-in .hh-row:nth-child(1){transition-delay:70ms}
.hh-dr.is-in .hh-row:nth-child(2){transition-delay:120ms}
.hh-dr.is-in .hh-row:nth-child(3){transition-delay:170ms}
.hh-dr.is-in .hh-btns{transition-delay:230ms}
.hh-dr.is-out .hh-row,.hh-dr.is-out .hh-btns{transition-duration:.15s;transition-delay:0s}
.hh-dr::backdrop{background:transparent}
.hh-dr .hh-dr-top{flex:none;width:100%;margin:0;justify-content:space-between;border-bottom:1px solid var(--hair)}
.hh-x{display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;border:0;border-radius:10px;background:transparent;color:var(--fg);cursor:pointer}
.hh-dr-body{flex:1;display:flex;overscroll-behavior:contain;flex-direction:column;overflow-y:auto;padding:8px clamp(20px,6vw,80px) max(24px,env(safe-area-inset-bottom))}
.hh-dr a.hh-row{display:flex;align-items:center;min-height:64px;font:600 24px/1.2 var(--display);letter-spacing:-.01em;color:var(--fg);border-bottom:1px solid var(--hair)}
.hh-dr a.hh-row[aria-current=page]{color:var(--primary)}
.hh-dr .hh-btns{display:grid;gap:12px;margin-top:auto;padding-top:28px}
@media (prefers-reduced-motion:reduce){.hh-dr,.hh-dr .hh-row,.hh-dr .hh-btns{transition:none;transform:none}}

/* FP, the finder popup every "Find your program" button opens. Laptop: the hero's horizontal finder bar itself,
   floating under the header over the dimmed page, grown out of the button (site.js sets --fx, --fy, --fs), its
   dropdowns hanging below as on the page. Phone: a bottom sheet that holds the fields directly. Long ease-out in,
   quick ease-in out. */
html:has(.fp[open]){overflow:hidden;scrollbar-gutter:stable}
html:has(.fp[open]) body{overflow:hidden}
.fp{width:min(860px,calc(100% - 48px));max-width:none;max-height:none;margin:88px auto auto;padding:0;border:0;background:none;color:var(--fg);overflow:visible;opacity:0;transform:translate(var(--fx,0),var(--fy,-8px)) scale(var(--fs,.98));transition:opacity var(--d-ui) var(--out),transform var(--d-item) var(--out)}
.fp.is-in{opacity:1;transform:none}
.fp.is-out{transition:opacity var(--d-fast) var(--in),transform var(--d-fast) var(--in)}
.fp::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity var(--d-ui) var(--out)}
.fp.is-in::backdrop{opacity:1}
.fp.is-out::backdrop{transition:opacity var(--d-fast) var(--in)}
.fp-top,.fp-grab{display:none}
.fp-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* FP on a laptop, after Airbnb's search pill: one pill, the open pick lifted as a white capsule on a grey track, its
   list in one wide card under the whole pill, a round search button at the end. Esc or a click outside closes it. */
.fp .dd{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0;padding:0;border-radius:999px;background:var(--card);box-shadow:var(--elev-float);transition:background-color var(--d-ui) var(--out)}
.fp .dd:has(.dd-field.is-open){background:var(--band)}
.fp .dd-fields{grid-template-columns:1fr 1.35fr .8fr}
.fp .dd-field{position:static}
.fp .dd-btn{min-height:68px;padding:12px 44px 12px 32px;border-radius:999px;transition:background-color var(--d-fast) var(--out),box-shadow var(--d-ui) var(--out)}
.fp .dd-chev{right:20px}
.fp .dd-btn:focus-visible{outline-offset:-2px}
.fp .dd-field.is-open .dd-btn{background:var(--card);box-shadow:0 6px 20px -4px rgb(30 60 50 / .22)}
.fp .dd-field.is-open + .dd-field,.fp .dd-field:has(+ .dd-field.is-open){border-color:transparent}
.fp .dd-go{flex:none;width:52px;height:52px;margin:0 8px 0 4px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--primary);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color var(--d-fast) var(--out),transform var(--d-fast) var(--out)}
.fp .dd-go:active{transform:scale(.96);transition-duration:var(--d-press)}
.fp .dd-menu{left:0;right:0;top:calc(100% + 12px);width:auto;max-width:none;grid-template-columns:1fr 1fr;gap:4px;padding:20px;border-radius:32px;animation:fp-menu var(--d-ui) var(--out) both}
.fp .dd-opt{min-height:52px;padding:12px 16px;border-radius:16px;font-size:16px}
.fp .dd-note{flex-basis:100%;padding:0 32px 12px}
@keyframes fp-menu{from{opacity:0;transform:translateY(-6px)}}
@media (hover:hover) and (pointer:fine){
  .fp .dd-field:not(.is-open):not(.off) .dd-btn:hover{background:var(--hair)}
  .fp .dd-go:hover{background:var(--primary-hover)}
}
@media (max-width:640px){
  .fp{width:100%;max-height:calc(100dvh - 24px);margin:auto 0 0;border-radius:24px 24px 0 0;background:var(--card);box-shadow:var(--elev-float);overflow-y:auto;overscroll-behavior:contain;opacity:1;transform:translateY(100%);transition:transform var(--d-ui) var(--sheet)}
  .fp.is-in{transform:translateY(var(--drag,0px))}
  .fp.is-out{transition:transform var(--d-fast) var(--in)}
  .fp.is-drag{transition:none}
  .fp{background:var(--bg)}
  .fp-in{display:block;padding:8px 12px max(16px,env(safe-area-inset-bottom))}
  .fp-grab{display:block;width:36px;height:5px;border-radius:3px;background:var(--hair-3);margin:0 auto}
  .fp-top{display:flex;align-items:center;padding:6px 8px 6px 16px}
  .fp-h{position:static;width:auto;height:auto;clip:auto;margin:0;font:600 22px/1.15 var(--display);letter-spacing:-.01em}
  .fp-x{margin:0 0 0 auto;width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:var(--card);color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
  /* after Airbnb's phone search: each pick its own white card on the grey sheet, the open one holding its list */
  .fp .dd,.fp .dd:has(.dd-field.is-open){display:block;background:none;box-shadow:none;padding:0;border-radius:0}
  .fp .dd-fields{grid-template-columns:1fr;gap:10px}
  .fp .dd-field,.fp .dd-field + .dd-field{border:0;border-radius:24px;background:var(--card);box-shadow:var(--elev-card)}
  .fp .dd-btn,.fp .dd-field.is-open .dd-btn{height:auto;min-height:64px;padding:12px 44px 12px 20px;border-radius:24px;background:none;box-shadow:none}
  .fp .dd-menu{position:static;width:auto;max-width:none;grid-template-columns:1fr;box-shadow:none;padding:0 8px 8px;border-radius:0 0 24px 24px;animation:none}
  .fp .dd-go{display:none}
  .fp .dd-note{padding:8px 4px 0}
}
@media (prefers-reduced-motion:reduce){
  .fp,.fp.is-in,.fp.is-out,.fp.is-drag{transform:none;transition:opacity var(--d-fast) var(--io)}
  .fp{opacity:0}.fp.is-in{opacity:1}
  .fp .dd-menu{animation:none}
}
/* Questions open with their height (site.js); the measured height includes the row's border */
details.qa,details.qa-row{box-sizing:border-box}

/* Footer: the same left edge as the header, the section rhythm above its columns. */
.pf .pf-in{max-width:none;padding-top:var(--sec);padding-left:var(--edge);padding-right:var(--edge)}

/* Hovers: colour and lift only, eased, and only where a real pointer hovers (no sticky hover on touch). */
a,.site-h__nav a,.site-h__login{transition:color .2s var(--out),text-decoration-color .2s var(--out)}
.dd-btn,.dd-opt,.hh-menu,.hh-x{transition:background-color .2s var(--out)}
.dd-chev{transition:transform .25s var(--out)}
/* the finder's lists: the active option (pointer or arrow keys) is shaded, ringed when the keyboard drives it; the
   chosen one keeps its tint and weight */
.dd-opt.is-active{background:var(--bg)}
.dd-opt.on.is-active{background:var(--tint)}
.dd-field:has(.dd-btn:focus-visible) .dd-opt.is-active{box-shadow:inset 0 0 0 2px var(--primary)}
.dd-opt[aria-disabled=true]{cursor:default}
.dd-btn:hover,.dd-opt:hover,.hh-menu:hover,.hh-x:hover{background:none}
.dd-field.off .dd-btn:hover{background:none}
@media (hover:hover) and (pointer:fine){
  .dd-btn:hover,.dd-opt:hover{background:var(--bg)}
  .dd-opt.on:hover{background:var(--tint)}
  .hh-menu:hover,.hh-x:hover{background:var(--tint)}
  .hh-dr a.hh-row:hover{color:var(--primary)}
}
.dd-opt.on{background:var(--tint)}

/* Buttons (Bence 27 Oct): primary 56 (52 on phone), small 44, one corner; one disabled look that neither lifts nor presses. */
@media (max-width:560px){.btn:not(.btn--sm){height:52px}}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--band);color:var(--faint);box-shadow:none;cursor:default;transform:none}

/* Entrance motion (design/MOTION.md). The hero rises on load. Below it, site.js watches every [data-rv] block on its
   own and adds .is-in once it is reached, with --i its place among the blocks reached together:
     data-rv         the block rises and fades in
     data-rv="st"    its children do, one after another (--i set per child, capped at 6 steps)
     data-rv="lines" its children are lines that rise out of a mask, one after another
     data-rv="media" a picture or wall: fades in from a touch smaller
     data-rv="own"   the section's own CSS says what moves (keyed on .is-in and --i)
   Content is hidden only when JS runs (.js on <html>) and shows anyway if site.js never arrives (.rv-off). */
@supports (transition-timing-function:linear(0,1)){:root{--spring:linear(0,.075,.25,.464,.674,.851,.984,1.07,1.114,1.126,1.117,1.094,1.067,1.041,1.018,1.002,.991,.986,.984,.985,.988,.992,.995,.998,1)}}
@media (max-width:640px){:root{--rv-y:12px}}
@keyframes rise{from{opacity:0;transform:translateY(var(--rv-y))}}
@keyframes fade-in{from{opacity:0}}
@keyframes rv-line{from{opacity:0;transform:translateY(.4em);clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -.3em 0)}}
@keyframes rv-media{from{opacity:0;transform:scale(.98)}}
@keyframes rv-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2px 0 0)}}
.js:not(.rv-off) :is([data-rv=""],[data-rv="media"]):not(.is-in),.js:not(.rv-off) :is([data-rv="st"],[data-rv="lines"]):not(.is-in) > *{opacity:0}
[data-rv="lines"] > *{display:block}
@media (prefers-reduced-motion:no-preference){
  .hero__copy > *{animation:rise var(--d-item) var(--out) calc(var(--i,0) * var(--st)) backwards}
  .hero__copy > :nth-child(2){--i:1}
  .hero__copy > :nth-child(3){--i:2}
  .hero__copy > :nth-child(4){--i:3}
  .hero__media{animation:rv-media var(--d-hero) var(--out) .2s backwards}
  .is-in:is([data-rv=""]),.is-in:is([data-rv="st"]) > *{animation:rise var(--d-item) var(--out) calc(min(var(--i,0),6) * var(--st)) backwards}
  .is-in[data-rv="lines"] > *{animation:rv-line var(--d-hero) var(--out) calc(min(var(--i,0),6) * var(--st) * 1.5) backwards}
  .is-in[data-rv="media"]{animation:rv-media var(--d-hero) var(--out) calc(var(--i,0) * var(--st)) backwards}
}
/* Reduced motion: nothing travels; reveals become a short crossfade, everything else ends at once, loops included. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .is-in:is([data-rv=""],[data-rv="media"]),.is-in:is([data-rv="st"],[data-rv="lines"]) > *{animation:fade-in .2s linear backwards!important;animation-duration:.2s!important}
}

/* Press and hover (design/MOTION.md): everything you can tap gives under the finger and comes back on --out; a lift
   or nudge only where there is a mouse. */
a,button,summary,label{-webkit-tap-highlight-color:transparent}
:is(.btn,.link,.oy-list a,.yy-years a,.yy-iv button,.opt,summary,.dd-opt,.hh-x,.site-h__menu,.mba-policy,.mb-policy,.rw-more,.pf-soc a){touch-action:manipulation}
/* One motion for all of them (Bence 27 Oct: unified hovers): the same press, the same release, the same lift. A
   deeper shadow fades in on ::after instead of animating box-shadow. */
:is(.btn,.opt,.oy-list a,.yy-years a,.yy-iv button,.dd-opt,.hh-x,.pf-soc a,.yy-more,.yy-courses li){transition:transform var(--d-fast) var(--out),background-color var(--d-fast) var(--out),color var(--d-fast) var(--out)}
:is(.oy-list a,.yy-years a,.yy-iv button,.dd-opt,.hh-x,.pf-soc a,.yy-more,.qa-row summary,.qa summary):active{transform:scale(.97);transition-duration:var(--d-press)}
:is(.btn,.opt):active{transform:scale(.98);transition-duration:var(--d-press)}
:is(.btn,.opt,.oy-list a,.yy-courses li){position:relative}
:is(.btn,.opt,.oy-list a,.yy-courses li)::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--elev-float);opacity:0;pointer-events:none;transition:opacity var(--d-fast) var(--out)}
:is(.qa-row,.qa) summary{transition:transform var(--d-fast) var(--out)}
:is(.mba-policy,.mb-policy,.rw-more,.oy-list a) svg{transition:transform var(--d-fast) var(--out)}
@media (hover:hover) and (pointer:fine){
  :is(.mba-policy,.mb-policy,.oy-list a):hover svg{transform:translateX(3px)}
  :is(.btn,.opt,.oy-list a,.yy-courses li):not(:disabled,[aria-disabled="true"]):hover{transform:translateY(-2px)}
  :is(.btn,.opt,.oy-list a,.yy-courses li):not(:disabled,[aria-disabled="true"]):hover::after{opacity:1}
  :is(.btn,.opt,.oy-list a):not(:disabled,[aria-disabled="true"]):hover:active{transform:translateY(-1px) scale(.98)}
  .yy-iv button:not(.on):hover{color:var(--fg)}
}

/* Endless loops pause while their section is off screen (site.js sets data-anim-off). */
[data-anim-off] *,[data-anim-off] *::before,[data-anim-off] *::after{animation-play-state:paused}
/* The footer logo is 22px tall: grow its hit area to 44px without moving anything. */
.pf-brand > a{padding:11px 0;margin:-11px 0}

/* Finder menu and the pass sheet open and close instead of snapping (MOTION.md, Open and close). */
@media (prefers-reduced-motion:no-preference){
  .dd-menu{transform-origin:50% 0;animation:dd-in var(--d-ui) var(--out) both}
  .scrim:not([hidden]){animation:fade-in var(--d-ui) var(--out) both}
  .scrim:not([hidden]) .sheet{animation:sheet-in var(--d-ui) var(--sheet) both}
  .scrim.is-out{animation:fade-out var(--d-fast) var(--in) both}
  .scrim.is-out .sheet{animation:sheet-out var(--d-fast) var(--in) both}
}
@keyframes dd-in{from{opacity:0;transform:translateY(-6px) scale(.98)}}
@keyframes fade-out{to{opacity:0}}
@keyframes sheet-in{from{opacity:0;transform:translateY(24px) scale(.98)}}
@keyframes sheet-out{to{opacity:0;transform:translateY(16px) scale(.98)}}

/* Header hover and press (Bence 27 Oct, option A, design/MOTION.md): under a mouse one soft pill glides between the links
   (site.js) and Log in gets its own; the button is the shared .btn (below); everything gives
   under the finger; the current page keeps a green line. */
.hh .site-h__nav{position:relative}
.hh .site-h__nav a{position:relative;z-index:1;text-decoration:none;color:var(--muted);transition:color var(--d-fast) var(--out),transform var(--d-fast) var(--out)}
.hh .site-h__nav a[aria-current=page]{color:var(--fg)}
.hh .site-h__nav a[aria-current=page]::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:2px;border-radius:2px;background:var(--primary)}
.hh-pill{position:absolute;left:0;right:0;top:calc(50% - 18px);height:36px;border-radius:10px;background:var(--tint);pointer-events:none;opacity:0;
  clip-path:inset(0 var(--r,100%) 0 var(--l,0) round 10px);transition:clip-path var(--d-ui) var(--out),opacity var(--d-fast) var(--out)}
.hh-pill.is-on{opacity:1}
.hh-pill.is-snap{transition:opacity var(--d-fast) var(--out)}
.hh .site-h__login,.hh .site-h__login:hover{position:relative;z-index:0;color:var(--fg);transition:color var(--d-fast) var(--out),transform var(--d-fast) var(--out)}
.hh .site-h__login::before{content:"";position:absolute;inset:4px -12px;z-index:-1;border-radius:10px;background:var(--tint);opacity:0;transform:scale(.94);transition:opacity var(--d-fast) var(--out),transform var(--d-ui) var(--out)}
.hh .btn--sm:hover{background:linear-gradient(180deg,var(--primary-mid),var(--primary))}
.hh .site-h__nav a:active,.hh .site-h__login:active{transform:scale(.97);transition-duration:var(--d-press)}
.hh .site-h__in > a:first-child{transition:transform var(--d-fast) var(--out);-webkit-tap-highlight-color:transparent}
.hh .site-h__in > a:first-child:active{transform:scale(.97);transition-duration:var(--d-press)}
.hh .site-h__nav a:focus-visible,.hh .site-h__login:focus-visible{border-radius:10px}
@media (hover:hover) and (pointer:fine){
  .hh .site-h__nav a:hover{color:var(--fg)}
  .hh .site-h__login:hover::before{opacity:1;transform:none}
}

/* Buttons (Bence 27 Oct, pick A): on top of the shared lift and press above, every .btn deepens its own colour; a tone
   layer (::before, --btn-tone per kind) fades in, since a gradient cannot transition. Slower on --d-ui so it settles. */
.btn{isolation:isolate;--btn-tone:linear-gradient(180deg,var(--primary),var(--primary-hover))}
.btn--turbo,.btn--max{--btn-tone:linear-gradient(180deg,rgb(0 0 0 / .04),rgb(0 0 0 / .24))}
.btn--trial{--btn-tone:rgb(181 156 123 / .16)}
.btn--quiet{--btn-tone:var(--tint)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--btn-tone);opacity:0;pointer-events:none;transition:opacity var(--d-ui) var(--out)}
.btn--quiet,.btn--quiet:hover{box-shadow:inset 0 0 0 1.5px var(--hair-2)}
:is(.btn,.opt){transition:transform var(--d-ui) var(--out),background-color var(--d-fast) var(--out),color var(--d-fast) var(--out)}
:is(.btn,.opt)::after{transition-duration:var(--d-ui)}
@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled,[aria-disabled="true"]):hover::before{opacity:1}
}