/* Sidenotes guide template v4 (1.44.0). Loaded only for a guide whose _sn_template is 'v4' (asset key guides/guide-v4).
   Source of truth: design/guides-v4/guide.css, the tested specimen. This file is that stylesheet with the page-level
   rules the theme already owns removed (colour tokens, body, the lead modal) and a compatibility layer at the foot for
   the site's global element rules. Phone first: base rules are the 390px design, wider screens are added on top. */
:root{--r-lg:16px;--ease:cubic-bezier(.2,0,0,1);
  --lift:0 0 0 1px var(--line-soft),0 16px 32px -22px rgba(14,22,24,.32);
  --lift-sm:0 0 0 1px var(--line-soft),0 8px 18px -14px rgba(14,22,24,.26)}
/* Gutters are the guide's own, so the site header and footer keep theirs. */
.gd{--gut:20px}
@media(min-width:768px){.gd{--gut:32px}}
@media(min-width:1024px){.gd{--gut:40px}}
@media(min-width:1280px){.gd{--gut:48px}}
html{scroll-padding-top:calc(var(--hdr) + 16px)}

.gd{display:block;font-size:17px;line-height:28px;outline:none}
.gd *,.gd *::before,.gd *::after{box-sizing:border-box}
.gd :where(h1,h2,h3,p,ol,ul,figure,figcaption){margin:0}
.gd :where(ol,ul){padding:0;list-style:none}
.gd a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gd :focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
.gd{position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.shell{max-width:1184px;margin:0 auto;padding:0 var(--gut)}
.lbl{font-size:13px;line-height:16px;font-weight:600;letter-spacing:.02em;color:var(--teal-dark)}

/* ---------- top: crumbs, category, title, short answer, trust, hero, key takeaways ---------- */
.top{padding-top:16px;max-width:720px}
.crumbs ol{display:flex;flex-wrap:wrap;font-size:14px;line-height:20px;color:var(--ink-2)}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 8px;color:var(--ink-2)}
.crumbs a{display:inline-block;padding:2px 0;color:var(--ink-2);text-decoration:none}
.crumbs li[aria-current]{display:none}
.catrow{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:500;color:var(--ink-2)}
.cat{color:var(--teal-dark);font-weight:600}
.top h1{margin-top:8px;font-size:32px;line-height:36px;font-weight:650;letter-spacing:-.6px;text-wrap:balance;color:var(--ink)}
.answer{margin-top:16px;padding:16px;border-radius:var(--r-lg);background:var(--teal-tint)}
.answer p:not(.lbl){margin-top:6px;font-size:16px;line-height:24px;font-weight:450;color:var(--ink);text-wrap:pretty}
.trust{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;line-height:20px;color:var(--ink-2)}
.trust .tick{position:relative;flex:none;width:16px;height:16px;border-radius:50%;background:var(--teal)}
.trust .tick::after{content:"";position:absolute;left:5.5px;top:3px;width:4px;height:8px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(45deg)}
.trust .dot,.catrow .dot{color:var(--line-field)}
.trust a{color:var(--teal);font-weight:500}
.hero{margin-top:24px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--lift-sm);background:var(--surface-2)}
.hero img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.kt{margin-top:32px;padding:18px 18px 4px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--lift)}
.kt ul{margin-top:8px}
.kt li{display:grid;align-content:start;gap:2px;padding:14px 0}
.kt li+li{border-top:1px solid var(--line-soft)}
.kt b{font-size:17px;line-height:24px;font-weight:600}
.kt span{font-size:16px;line-height:24px;color:var(--ink-2)}

/* ---------- contents and article ---------- */
.body{margin-top:32px}
.toc{padding:16px 16px 6px;border-radius:var(--r-lg);background:var(--surface-2)}
.toc ol{margin-top:6px}
.toc a{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;color:var(--ink);text-decoration:none;font-size:16px;line-height:24px}
.toc li+li a{border-top:1px solid var(--line-soft)}
.toc .tn{flex:none;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;line-height:24px;font-weight:600;text-align:center;color:var(--teal-dark);font-variant-numeric:tabular-nums}
.toc a[aria-current="true"]{font-weight:600}
.toc a[aria-current="true"] .tn{background:var(--teal-deep);color:var(--surface);box-shadow:none}
.art{margin-top:48px}
.related{margin-top:32px;padding:14px 16px 6px;border-radius:var(--r-lg);background:var(--surface-2)}
.related ul{margin-top:4px}
.related li+li{border-top:1px solid var(--line-soft)}
.related a{text-decoration:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 4px 8px 0;font-size:16px;line-height:24px;font-weight:500;color:var(--teal-dark)}
.related a::after{content:"";flex:none;width:8px;height:8px;border:solid var(--teal-dark);border-width:2px 2px 0 0;transform:rotate(45deg)}
.related+.sec{margin-top:48px}
.sec+.sec,.sec+.banner,.banner+.sec{margin-top:48px}
.sec h2{font-size:26px;line-height:32px;font-weight:650;letter-spacing:-.3px;text-wrap:balance;scroll-margin-top:calc(var(--hdr) + 16px)}
.sec h2:focus{outline:none}
.sec h2:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.prose{margin-top:20px;display:grid;gap:16px;max-width:680px}
.prose p{text-wrap:pretty}
.blk{margin-top:24px}
.cap{font-size:14px;line-height:20px;font-weight:600;color:var(--ink-2)}
.note{font-size:14px;line-height:20px;color:var(--ink-2)}
.note a{color:var(--teal-dark)}

/* table card */
.tbl{padding-top:16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--lift);overflow:hidden}
.tbl .cap{padding:0 16px}
.tbl-in{margin-top:12px;overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:16px;line-height:24px}
.tbl th,.tbl td{padding:12px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--line-soft)}
.tbl thead th{font-size:14px;line-height:20px;font-weight:600;color:var(--ink-2);background:var(--surface-2)}
.tbl tbody th{font-weight:600}
.tbl td{color:var(--ink-2)}
.tbl .note{padding:12px 16px 14px;border-top:1px solid var(--line-soft)}
@media(max-width:374px){.tbl th,.tbl td{padding:10px 10px}.tbl table{font-size:15px;line-height:22px}}

/* fee chart card */
.chart{padding:18px 16px 16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--lift)}
.bars{margin-top:14px;display:grid;gap:14px}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px}
.bars .u{grid-column:1/-1;font-size:15px;line-height:20px}
.bars .bar{height:12px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.bars i{display:block;height:100%;width:var(--w);border-radius:6px;background:var(--teal)}
.bars b{font-size:16px;line-height:20px;font-weight:650;font-variant-numeric:tabular-nums}
.chart .note{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft)}

/* comparison group: tonal panel, neutral labels */
.cmp{padding:2px 16px;border-radius:var(--r-lg);background:var(--surface-2)}
.cmp li{padding:14px 0}
.cmp li+li{border-top:1px solid var(--line)}
.cmp b{display:block;font-size:17px;line-height:24px;font-weight:600}
.cmp span{display:block;margin-top:2px;font-size:16px;line-height:24px;color:var(--ink-2)}

/* steps card */
.steps{padding:2px 16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--lift)}
.steps li{display:flex;gap:14px;padding:16px 0}
.steps li+li{border-top:1px solid var(--line-soft)}
.steps .num{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--teal-deep);color:var(--surface);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.steps b{display:block;font-size:17px;line-height:24px;font-weight:600}
.steps span{display:block;margin-top:2px;font-size:16px;line-height:24px;color:var(--ink-2)}
.steps span a{color:var(--teal)}

/* lead banner: the dark card that matches the course photos */
.banner{border-radius:var(--r-lg);background:var(--teal-deep);color:var(--surface);overflow:hidden;box-shadow:var(--lift)}
.banner img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.bn-c{padding:20px}
.banner h2{font-size:22px;line-height:28px;font-weight:650;letter-spacing:-.2px;text-wrap:balance;color:var(--surface)}
.banner p{margin-top:8px;font-size:16px;line-height:24px;color:var(--teal-tint)}
.banner .btn{margin-top:16px;width:100%}

/* ---------- end band: courses, fee note, FAQ, read next, sources ---------- */
.band{margin-top:64px;padding:48px 0 56px;background:var(--surface-2)}
.band .shell>*+*{margin-top:48px}
.band .shell>.feenote{margin-top:4px}
.band h2{font-size:26px;line-height:32px;font-weight:650;letter-spacing:-.3px;text-wrap:balance}
.row-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.snav{flex:none;display:flex;align-items:center;gap:4px}
.snav[hidden]{display:none}
.sbtn{width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface) center/20px no-repeat;cursor:pointer;transition:transform .1s ease-out,opacity .12s}
.sbtn.prev{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230E1618' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l-6 6 6 6'/%3E%3C/svg%3E")}
.sbtn.next{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230E1618' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4l6 6-6 6'/%3E%3C/svg%3E")}
.sbtn:disabled{opacity:.35;cursor:default}
.pos{min-width:52px;text-align:center;font-size:14px;line-height:20px;color:var(--ink-2);font-variant-numeric:tabular-nums}
@media(max-width:359px){.pos{display:none}}
.track{position:relative;margin:16px calc(-1 * var(--gut)) 0;padding:4px var(--gut) 28px;display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.card{position:relative;flex:0 0 min(310px,80vw);scroll-snap-align:start;display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--lift);overflow:hidden}
.card.rn{flex-basis:min(280px,74vw)}
.card img,.card .ph{display:block;flex:none;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--surface-2)}
.cb{flex:1;display:flex;flex-direction:column;padding:16px 18px 18px}
.kicker{display:block;font-size:14px;line-height:20px;color:var(--ink-2)}
.card h3{margin-top:4px;font-size:18px;line-height:24px;font-weight:650;text-wrap:balance}
.card .meta{margin:6px 0 14px;font-size:14px;line-height:20px;color:var(--ink-2)}
.cost{margin-top:auto;margin-bottom:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.cost span{display:block;font-size:13px;line-height:18px;color:var(--ink-2)}
.cost b{display:block;font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.card .btn{width:100%}
.rn a{flex:1;display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.rn .kicker{font-size:13px;line-height:18px;font-weight:600;color:var(--teal-dark)}
.rn .t{display:block;margin-top:4px;font-size:17px;line-height:24px;font-weight:600;text-wrap:balance}
.feenote{display:flex;align-items:flex-start;gap:10px;max-width:760px;font-size:14px;line-height:20px;color:var(--ink-2)}
.feenote .i{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-2);position:relative}
.feenote .i::before,.feenote .i::after{content:"";position:absolute;left:8px;width:2px;border-radius:1px;background:var(--ink-2)}
.feenote .i::before{top:4px;height:2px}
.feenote .i::after{top:7.5px;height:6px}

.faq-l{margin-top:16px;padding:0 16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--lift)}
.qa+.qa{border-top:1px solid var(--line-soft)}
.qa h3{font:inherit}
.qa button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:56px;padding:14px 0;border:0;background:none;color:var(--ink);font:inherit;font-size:17px;line-height:24px;font-weight:600;text-align:left;cursor:pointer}
.pm{flex:none;position:relative;width:20px;height:20px}
.pm::before,.pm::after{content:"";position:absolute;left:3px;right:3px;top:9px;height:2px;border-radius:1px;background:var(--teal)}
.pm::after{transform:rotate(90deg)}
.qa button[aria-expanded="true"] .pm::after{transform:none}
.ans p{padding-bottom:16px;font-size:17px;line-height:28px;color:var(--ink-2)}
.ans[hidden]{display:none}
.srcs ol{margin-top:16px;padding-left:22px;list-style:decimal;display:grid;gap:10px;font-size:16px;line-height:24px;color:var(--ink-2)}
.srcs a{color:var(--teal-dark)}
.pdf{display:inline-block;margin-left:6px;padding:0 6px;border-radius:4px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;line-height:20px;color:var(--ink-2)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:0;border-radius:var(--r-md);font:inherit;font-size:16px;line-height:24px;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .1s ease-out,background-color .12s ease-out}
.gd a.btn{text-decoration:none}
.btn-amber{background:var(--amber);color:var(--ink)}
.gd a.btn-teal,.btn-teal{background:var(--teal);color:var(--surface)}
.btn-ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn:disabled{cursor:progress;opacity:.75}

/* ---------- motion: transform and opacity only, nothing that delays reading ---------- */
@media(prefers-reduced-motion:no-preference){
  .btn:active,.sbtn:active:not(:disabled){transform:scale(.98)}
  .ans.in{animation:fade-in .12s ease-out}
}
@keyframes fade-in{from{opacity:0}}

/* ---------- hover, pointer devices only ---------- */
@media(hover:hover) and (pointer:fine){
  .crumbs a:hover{color:var(--ink);text-decoration:underline}
  .toc a:hover span:last-child{color:var(--teal)}
  .related a:hover{color:var(--teal)}
  .btn-amber:hover{background:var(--amber);box-shadow:inset 0 0 0 100px rgba(14,22,24,.06)}
  .gd a.btn-teal:hover{background:var(--teal-dark)}
  .btn-ghost:hover{background:var(--surface-2)}
  .sbtn:hover:not(:disabled){border-color:var(--ink-2)}
  .card{transition:box-shadow .18s ease-out,transform .18s ease-out}
  .card:hover{box-shadow:0 0 0 1px var(--line),0 22px 40px -24px rgba(14,22,24,.4);transform:translateY(-2px)}
  .rn a:hover .t{color:var(--teal-dark)}
  .qa button:hover{color:var(--teal-dark)}
}

/* ---------- 768px: wider gutters, grids instead of scrollers, dialog centred ---------- */
@media(min-width:768px){
  .top h1{font-size:40px;line-height:46px;letter-spacing:-.8px}
  .crumbs li[aria-current]{display:flex;color:var(--ink)}
  .answer{padding:20px}
  .hero img{aspect-ratio:16/9}
  .kt{padding:20px 20px 4px}
  .sec h2,.band h2{font-size:30px;line-height:38px;letter-spacing:-.4px}
  .cmp.n2,.cmp.n3{display:grid;padding:0;background:none;gap:12px}
  .cmp.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cmp.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cmp.n2 li,.cmp.n3 li{padding:16px;border-radius:var(--r-lg);background:var(--surface-2)}
  .cmp.n2 li+li,.cmp.n3 li+li{border-top:0}
  .banner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
  .banner.noimg{display:block}
  .banner img{height:100%;aspect-ratio:auto;min-height:240px}
  .bn-c{padding:28px}
  .banner .btn{width:auto;min-width:200px}
  .snav{display:none}
  .track{margin:16px 0 0;padding:4px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));overflow:visible}
  .track.rn{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .track.n2,.track.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .track.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card,.card.rn{flex-basis:auto}
}

/* ---------- 1024px: contents rail beside the article, top section across the full width ---------- */
@media(min-width:1024px){
  .top{padding-top:24px}
  .answer p:not(.lbl){font-size:17px;line-height:26px}
  .kt ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .kt li{padding:14px 0 18px}
  .kt li+li{border-top:0;padding-left:20px;border-left:1px solid var(--line-soft)}
  .body{display:grid;grid-template-columns:minmax(0,720px) 240px;justify-content:space-between;gap:64px;align-items:start;margin-top:48px}
  .toc{grid-column:2;grid-row:1;position:sticky;top:calc(var(--hdr) + 24px);padding:16px 16px 6px}
  .toc a{font-size:15px;line-height:22px;min-height:40px;padding:9px 0}
  .art{grid-column:1;grid-row:1;margin-top:0}
  .crumbs li[aria-current]{display:none}
  .top{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto 1fr auto;
    grid-template-areas:"crumbs hero" "cat hero" "h1 hero" "ans hero" "trust hero" ". hero" "kt kt";column-gap:48px}
  .crumbs{grid-area:crumbs}.catrow{grid-area:cat}.top h1{grid-area:h1}.answer{grid-area:ans}.trust{grid-area:trust}.kt{grid-area:kt}
  /* The photo frame takes exactly the height of the text beside it (crumbs to trust line), so both columns
     start and end on the same lines whatever the title length. The image fills the frame from its focal point. */
  .hero{grid-area:hero;margin-top:0;align-self:stretch;position:relative;min-height:320px}
  .hero img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  /* A guide without an approved hero keeps one reading column rather than an empty right column. */
  .top:not(:has(.hero)){display:block;max-width:720px}
  .track.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1024px) and (max-height:620px){.toc{position:static}}

/* ---------- 1280px: desktop type ---------- */
@media(min-width:1280px){
  .gd{font-size:18px;line-height:30px}
  .top h1{font-size:48px;line-height:54px;letter-spacing:-1px}
  .sec h2,.band h2{font-size:32px;line-height:40px;letter-spacing:-.5px}
  .card h3{font-size:18px}
}

/* ---------- compatibility with the site's global rules (style.css, components.css, GeneratePress) ---------- */
/* The site's h2 carries a teal bar, a 14px indent and weight 800: section grammar for other page types. */
.gd h1,.gd h2,.gd h3{position:static;padding-left:0;margin-bottom:0}
.gd h2::before{content:none}
.gd .top h1,.gd .sec h2,.gd .band h2,.gd .banner h2,.gd .card h3{font-weight:650}
/* style.css gives every <section> 64px padding, a top rule and overflow-x:clip (section grammar). The clip would
   also cut off the sideways card rows. The guide's sections set their own spacing. */
.gd .sec,.gd .row-sec,.gd .faq,.gd .srcs,.gd .answer,.gd .kt{border-top:0;overflow-x:visible}
.gd .sec,.gd .row-sec,.gd .faq,.gd .srcs{padding:0}
/* The same rule adds scroll-margin-top on top of the page's scroll padding, so a contents jump would land 87px down,
   past the line where the contents marker switches. */
.gd .sec,.gd .row-sec,.gd .faq,.gd .srcs{scroll-margin-top:0}
/* components.css styles .crumbs for other page types; the guide sets its own spacing. */
.gd .crumbs{margin-bottom:0}
.gd .crumbs ol,.gd .crumbs li{gap:0}
.gd .crumbs [aria-current]{font-weight:400;color:var(--ink-2)}
.gd .crumbs li+li::before{color:var(--ink-2)}
/* GeneratePress paints every button grey on hover and focus (button:hover, button:focus). These class selectors
   outrank it in every state without naming :hover, so no ungated hover rule is added. */
.gd .sbtn{background-color:var(--surface);color:var(--ink)}
.gd .qa button{background:none;color:var(--ink)}
.gd .btn-amber{background-color:var(--amber);color:var(--ink)}
@media(hover:hover) and (pointer:fine){.gd .qa button:hover{color:var(--teal-dark)}}