/* The course page.

   The frame comes first: one centred column, measured the same way as every
   other page on the site, so a course lines up with an ordinary page instead
   of running edge to edge. --glt-cp-w and --glt-cp-gut are printed by the
   plugin, which is how the width stays a setting rather than a number buried
   in a stylesheet.

   Everything below the frame is scoped to .glt-cp, so nothing here can reach
   the header, the footer, or anything the theme owns. */

.glt-cp-page{
 display:block;width:100%;
 padding-block:clamp(28px,4vw,64px)
}

.glt-cp-shell{
 box-sizing:border-box;
 width:100%;
 max-width:var(--glt-cp-w,clamp(1460px,1160px + 20vw,1740px));
 margin-inline:auto;
 padding-inline:var(--glt-cp-gut,clamp(16px,3.2vw,48px))
}

/* When a theme is drawing the page it has already centred the content, so a
   second column inside the first would only make it narrower. */
.glt-cp-shell.is-inline{max-width:none;padding-inline:0}

.glt-cp{
 --c-ink:#0B160E; --c-body:#4E5E54; --c-mute:#6B7A72;
 --c-green:#009721; --c-deep:#003B0D; --c-fire:#FF3B00;
 --c-line:#E5EAE6; --c-mist:#F5F8F5; --c-white:#fff;
 --c-sans:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
 --c-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 font-family:var(--c-sans);color:var(--c-body);line-height:1.65
}
.glt-cp *,.glt-cp *::before,.glt-cp *::after{box-sizing:border-box}

/* ------------------------------------------------------------------ hero */
.glt-cp-hero{margin:0 0 clamp(22px,3vw,34px)}
.glt-cp-badge{display:inline-flex;align-items:center;background:rgba(255,59,0,.1);border:1px solid rgba(255,59,0,.28);
 color:#C42B00;font-family:var(--c-mono);font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
 padding:6px 13px;border-radius:999px;margin:0 0 14px}
.glt-cp-title{font-family:var(--c-sans);font-weight:800;letter-spacing:-.03em;line-height:1.1;
 color:var(--c-ink);margin:0 0 14px;font-size:clamp(2.0875rem,1.5375rem + 2.2vw,3.5875rem);
 text-wrap:balance;overflow-wrap:break-word}
.glt-cp-sub{font-size:clamp(1.175rem,1.7vw,1.4875rem);line-height:1.55;color:var(--c-body);margin:0 0 16px;max-width:60ch}
.glt-cp-by{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 0;list-style:none;
 margin:0 0 18px;padding:0}
.glt-cp-by:empty{display:none}
/* Vertical rules only where the row is certainly wide enough to hold every
   fact on one line. Narrower than that the facts wrap, and a rule left either
   at the start of the new line or hanging off the end of the old one looks
   like a mistake. Below this width the spacing does the separating. */
@media(min-width:1200px){
 .glt-cp-by li{position:relative;padding-right:22px;margin-right:22px}
 .glt-cp-by li:last-child{padding-right:0;margin-right:0}
 .glt-cp-by li:not(:last-child)::after{content:'';position:absolute;right:0;top:3px;bottom:3px;
  width:1px;background:var(--c-line)}
}
@media(max-width:1199px){
 .glt-cp-by{gap:14px 26px}
}
/* On a phone the dividers go and the facts pair up, so the header does not
   push the price and the button below the fold. */
/* On a phone the dividers go and each fact takes exactly the room its own
   words need, wrapping to a new line when the next one will not fit. Forcing
   them into equal halves split a long name down the middle, which reads as a
   fault rather than as a wrap. */
@media(max-width:700px){
 .glt-cp-by{gap:14px 24px}
 .glt-cp-by li{flex:0 1 auto;max-width:100%}
 .glt-cp-by li{padding-right:0;margin-right:0}
}
.glt-cp-by li{display:flex;flex-direction:column;gap:1px;font-size:16px}
.glt-cp-by span{font-family:var(--c-mono);font-size:12.5px;font-weight:600;letter-spacing:.11em;
 text-transform:uppercase;color:var(--c-mute)}
.glt-cp-by b{color:var(--c-ink);font-weight:700;font-size:17px}

.glt-cp-prog{margin:0 0 18px;max-width:440px}
.glt-cp-bar{height:9px;border-radius:99px;background:var(--c-line);overflow:hidden}
.glt-cp-bar span{display:block;height:100%;border-radius:99px;background:var(--c-green)}
.glt-cp-prog p{margin:8px 0 0;font-family:var(--c-mono);font-size:13.5px;font-weight:600;letter-spacing:.06em;
 text-transform:uppercase;color:var(--c-mute)}

.glt-cp-quote{margin:0;padding:20px 24px;background:var(--c-mist);border-left:4px solid var(--c-green);border-radius:0 13px 13px 0}
.glt-cp-quote blockquote{max-width:62ch}
.glt-cp-quote blockquote{margin:0;font-size:18.5px;line-height:1.6;color:var(--c-ink);font-weight:500}
.glt-cp-quote figcaption{margin-top:9px;font-size:15.5px;color:var(--c-mute)}

/* ------------------------------------------------------------------ grid */
/* Desktop: the header and the body share the left column, the card sits right.
   Mobile: header, then the card, then the panels and tabs, in that order. */
.glt-cp-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,23vw,392px);
 grid-template-areas:"hero card" "main card";
 gap:0 clamp(24px,3vw,48px);align-items:start}
.glt-cp-hero{grid-area:hero}
.glt-cp-side{grid-area:card}
.glt-cp-main{grid-area:main;min-width:0}

@media(max-width:1023px){
 .glt-cp-grid{grid-template-columns:minmax(0,1fr);
  grid-template-areas:"hero" "card" "main";gap:0}
 .glt-cp-hero{margin-bottom:22px}
 .glt-cp-side{margin:0 0 26px}
}

/* ------------------------------------------------------------------ tabs */
/* overflow-x:auto makes the browser compute overflow-y as auto too, and the
   tabs' negative bottom margin then pushed a few pixels past the box, so the
   rail grew a vertical scrollbar it had no use for. Pinning the cross axis
   closed is what removes it. */
.glt-cp-rail{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;
 border-bottom:2px solid var(--c-line);margin:0 0 26px;
 scrollbar-width:thin;-webkit-overflow-scrolling:touch;
 scroll-snap-type:x proximity;-ms-overflow-style:-ms-autohiding-scrollbar}
.glt-cp-rail::-webkit-scrollbar{height:3px}
.glt-cp-rail::-webkit-scrollbar-thumb{background:var(--c-line);border-radius:99px}

/* A row of tabs that runs off the edge should look like it does. The tab
   row only exists once the script runs, so the script marks which end still
   has tabs behind it and that end fades out. The fade works on any page
   background because it fades the tabs themselves, not a painted colour. */
.glt-cp-rail.is-more-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
.glt-cp-rail.is-more-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent)}
.glt-cp-rail.is-more-l.is-more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
.glt-cp-tab{scroll-snap-align:start}
.glt-cp-tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;
 font-family:var(--c-sans);font-weight:700;font-size:17px;color:var(--c-mute);padding:13px 18px;
 border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .2s,border-color .2s}
.glt-cp-tab:hover{color:var(--c-ink)}
.glt-cp-tab.is-on{color:var(--c-green);border-bottom-color:var(--c-green)}
.glt-cp-tab:focus-visible{outline:3px solid var(--c-fire);outline-offset:-3px;border-radius:6px}
/* Tabs only hide panes once the script is running; without it every pane shows in order. */
.glt-cp-tabs:not(.is-js) .glt-cp-rail{display:none}
.glt-cp-tabs.is-js .glt-cp-pane{display:none}
.glt-cp-tabs.is-js .glt-cp-pane.is-on{display:block}

.glt-cp-rich>*:first-child{margin-top:0}
.glt-cp-rich h2,.glt-cp-out h2,.glt-cp-list h2{font-family:var(--c-sans);font-weight:800;
 font-size:clamp(1.325rem,1.9vw,1.6875rem);color:var(--c-ink);letter-spacing:-.02em;line-height:1.3;margin:28px 0 12px}
.glt-cp-rich p{margin:0 0 15px}

.glt-cp-out{background:var(--c-mist);border:1px solid var(--c-line);border-radius:16px;padding:22px 24px;margin:0 0 26px}
.glt-cp-out h2{margin-top:0}
.glt-cp-out ul,.glt-cp-list ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;list-style:none;margin:0;padding:0}
@media(max-width:700px){.glt-cp-out ul,.glt-cp-list ul{grid-template-columns:minmax(0,1fr)}}
.glt-cp-out li,.glt-cp-list li{position:relative;padding-left:26px;font-size:17.5px;line-height:1.6}
.glt-cp-out li::before,.glt-cp-list li::before{content:'';position:absolute;left:0;top:.52em;width:13px;height:7px;
 border-left:2.6px solid var(--c-green);border-bottom:2.6px solid var(--c-green);transform:rotate(-45deg)}
.glt-cp-list{margin:0 0 26px}

/* ------------------------------------------------------------ curriculum */
.glt-cp-cur{display:flex;flex-direction:column;gap:10px}
.glt-cp-sec{border:1px solid var(--c-line);border-radius:14px;background:var(--c-white);overflow:hidden}
.glt-cp-sec>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
 padding:16px 20px;background:var(--c-mist);font-weight:700;color:var(--c-ink);list-style:none}
.glt-cp-sec>summary::-webkit-details-marker{display:none}
.glt-cp-sec>summary::after{content:'';flex:0 0 auto;width:9px;height:9px;border-right:2.4px solid var(--c-mute);
 border-bottom:2.4px solid var(--c-mute);transform:rotate(45deg);margin-top:-4px;transition:transform .22s}
.glt-cp-sec[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.glt-cp-sec-t{font-size:18px;line-height:1.4;min-width:0}
.glt-cp-sec-n{font-family:var(--c-mono);font-size:13.5px;font-weight:600;letter-spacing:.07em;
 text-transform:uppercase;color:var(--c-mute);white-space:nowrap;margin-left:auto}
.glt-cp-sec ul{list-style:none;margin:0;padding:0}
.glt-cp-item{display:flex;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid var(--c-line);font-size:17px}
.glt-cp-kind{flex:0 0 auto;font-family:var(--c-mono);font-size:12px;font-weight:600;letter-spacing:.07em;
 text-transform:uppercase;color:var(--c-mute);background:var(--c-mist);border:1px solid var(--c-line);
 border-radius:99px;padding:3px 9px;white-space:nowrap}
.glt-cp-item-t{flex:1 1 auto;min-width:0;color:var(--c-ink);text-decoration:none}
a.glt-cp-item-t:hover{color:var(--c-green);text-decoration:underline}
.glt-cp-item.is-shut .glt-cp-item-t{color:var(--c-mute)}
.glt-cp-item.is-done .glt-cp-item-t::before{content:'';display:inline-block;width:11px;height:6px;margin-right:8px;
 border-left:2.4px solid var(--c-green);border-bottom:2.4px solid var(--c-green);transform:rotate(-45deg);vertical-align:middle}
.glt-cp-free{flex:0 0 auto;font-size:13.5px;font-weight:700;color:var(--c-green);background:rgba(0,151,33,.1);
 border-radius:99px;padding:3px 10px;white-space:nowrap}
.glt-cp-time{flex:0 0 auto;font-family:var(--c-mono);font-size:14px;color:var(--c-mute);white-space:nowrap}
@media(max-width:560px){
 .glt-cp-item{flex-wrap:wrap;gap:7px 10px}
 .glt-cp-item-t{flex:1 1 100%;order:-1;font-weight:600}
}

/* -------------------------------------------------------------- materials */
.glt-cp-mats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.glt-cp-mat{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--c-line);
 border-radius:13px;background:var(--c-white);transition:border-color .2s}
.glt-cp-mat:hover{border-color:#C6E3CD}
.glt-cp-mat.is-locked{background:var(--c-mist);opacity:.85}
.glt-cp-mat-k{flex:0 0 auto;font-family:var(--c-mono);font-size:12px;font-weight:600;letter-spacing:.07em;
 text-transform:uppercase;color:var(--c-deep);background:rgba(0,151,33,.1);border-radius:8px;padding:6px 10px;white-space:nowrap}
.glt-cp-mat-b{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.glt-cp-mat-t{color:var(--c-ink);font-weight:600;text-decoration:none;word-break:break-word}
a.glt-cp-mat-t:hover{color:var(--c-green);text-decoration:underline}
.glt-cp-mat-n{font-size:15.5px;color:var(--c-mute)}
.glt-cp-mat-lock{flex:0 0 auto;font-size:13.5px;font-weight:700;color:var(--c-mute);white-space:nowrap}

/* ------------------------------------------------------------- instructor */
.glt-cp-tutor{display:flex;gap:24px;align-items:flex-start}
@media(max-width:600px){.glt-cp-tutor{flex-direction:column;gap:16px}}
.glt-cp-tutor-pic img{border-radius:50%;display:block;width:132px;height:132px;object-fit:cover}
.glt-cp-tutor-b{min-width:0}
.glt-cp-tutor-b h2{margin:0 0 4px;font-size:clamp(1.325rem,1.9vw,1.6875rem);font-weight:800;color:var(--c-ink);letter-spacing:-.02em}
.glt-cp-tutor-n{font-family:var(--c-mono);font-size:13.5px;font-weight:600;letter-spacing:.07em;
 text-transform:uppercase;color:var(--c-mute);margin:0 0 12px}
.glt-cp-tutor-b p{margin:0 0 12px;font-size:17.5px}

/* ------------------------------------------------------------------ faqs */
.glt-cp-faqs{display:flex;flex-direction:column;gap:10px}
.glt-cp-faq{border:1px solid var(--c-line);border-radius:13px;background:var(--c-white);overflow:hidden}
.glt-cp-faq>summary{cursor:pointer;padding:16px 20px;font-weight:700;color:var(--c-ink);font-size:17.5px;
 list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
.glt-cp-faq>summary::-webkit-details-marker{display:none}
.glt-cp-faq>summary::after{content:'';flex:0 0 auto;width:9px;height:9px;border-right:2.4px solid var(--c-mute);
 border-bottom:2.4px solid var(--c-mute);transform:rotate(45deg);margin-top:-4px;transition:transform .22s}
.glt-cp-faq[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.glt-cp-faq-a{padding:0 20px 18px;font-size:17.5px}
.glt-cp-faq-a p{margin:0 0 12px}
.glt-cp-faq-a p:last-child{margin-bottom:0}

.glt-cp-empty{font-size:17.5px;color:var(--c-body);margin:0}
.glt-cp-empty.is-note{background:var(--c-mist);border:1px dashed var(--c-line);border-radius:13px;
 padding:18px 20px;color:var(--c-mute)}
.glt-cp-empty.is-note a{color:var(--c-green);font-weight:700}

/* ------------------------------------------------------------------ card */
.glt-cp-side{position:sticky;top:24px}
@media(max-width:1023px){.glt-cp-side{position:static}}
.glt-cp-card{background:var(--c-white);border:1px solid var(--c-line);border-radius:18px;overflow:hidden;
 box-shadow:0 26px 54px -32px rgba(11,22,14,.34)}
.glt-cp-prev{position:relative;aspect-ratio:16/9;background:var(--c-deep);overflow:hidden}
.glt-cp-prev img,.glt-cp-prev iframe,.glt-cp-prev video{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;border:0;display:block}
.glt-cp-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;
 border:0;border-radius:50%;background:rgba(255,255,255,.94);cursor:pointer;display:flex;align-items:center;
 justify-content:center;transition:transform .2s,background .2s;padding:0}
.glt-cp-play svg{width:28px;height:28px;fill:var(--c-deep);margin-left:3px}
.glt-cp-play:hover{background:#fff;transform:translate(-50%,-50%) scale(1.07)}
.glt-cp-play:focus-visible{outline:3px solid var(--c-fire);outline-offset:3px}
.glt-cp-promo{margin:0;padding:10px 18px;background:var(--c-mist);font-size:15.5px;color:var(--c-mute);text-align:center}
.glt-cp-card-b{padding:22px}
.glt-cp-price{font-family:var(--c-sans);font-weight:800;font-size:2.0375rem;color:var(--c-deep);
 letter-spacing:-.03em;margin:0 0 16px;line-height:1.15}
.glt-cp-price del{color:var(--c-mute);font-weight:500;font-size:0.7em;margin-right:8px}
.glt-cp-price ins{text-decoration:none}
.glt-cp-go{display:flex;align-items:center;justify-content:center;min-height:56px;padding:15px 24px;
 border-radius:999px;background:var(--c-green);color:#fff;font-weight:700;font-size:18px;text-decoration:none;
 text-align:center;transition:background .2s,transform .2s}
.glt-cp-go:hover{background:#00701A;color:#fff;transform:translateY(-2px)}
.glt-cp-go:focus-visible{outline:3px solid var(--c-fire);outline-offset:3px}
.glt-cp-note{margin:12px 0 0;font-size:15.5px;color:var(--c-mute);text-align:center}
.glt-cp-seats{margin:10px 0 0;font-size:15.5px;font-weight:600;color:#C42B00;text-align:center}
.glt-cp-full{margin:0;font-size:17px;color:var(--c-body);text-align:center}
.glt-cp-facts{margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--c-line);display:flex;flex-direction:column;gap:11px}
.glt-cp-facts div{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.glt-cp-facts dt{font-size:16px;color:var(--c-mute);flex:0 0 auto}
.glt-cp-facts dd{margin:0;font-size:16.5px;font-weight:700;color:var(--c-ink);text-align:right;min-width:0}
.glt-cp-accred{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--c-line);font-size:15px;color:var(--c-mute)}

@media(prefers-reduced-motion:reduce){
 .glt-cp-go,.glt-cp-play,.glt-cp-tab,.glt-cp-mat,.glt-cp-sec>summary::after,.glt-cp-faq>summary::after{transition:none}
 .glt-cp-go:hover,.glt-cp-play:hover{transform:none}
 .glt-cp-play:hover{transform:translate(-50%,-50%)}
}

/* ---------------------------------------------- requirements and features */
.glt-cp-panels{display:flex;flex-direction:column;gap:10px;margin:0 0 26px}
.glt-cp-panel{border:1px solid var(--c-line);border-radius:13px;background:var(--c-white);overflow:hidden}
.glt-cp-panel>summary{cursor:pointer;padding:15px 20px;font-weight:700;color:var(--c-ink);font-size:17.5px;
 list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
.glt-cp-panel>summary::-webkit-details-marker{display:none}
.glt-cp-panel>summary::after{content:'';flex:0 0 auto;width:9px;height:9px;border-right:2.4px solid var(--c-mute);
 border-bottom:2.4px solid var(--c-mute);transform:rotate(45deg);margin-top:-4px;transition:transform .22s}
.glt-cp-panel[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
.glt-cp-panel-b{padding:0 20px 18px}
.glt-cp-panel-b ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.glt-cp-panel-b li{position:relative;padding-left:25px;font-size:17.5px;line-height:1.6}
.glt-cp-panel-b li::before{content:'';position:absolute;left:0;top:.52em;width:13px;height:7px;
 border-left:2.6px solid var(--c-green);border-bottom:2.6px solid var(--c-green);transform:rotate(-45deg)}

/* ------------------------------------------------------------------ stars */
.glt-stars{display:inline-flex;align-items:center;gap:2px;vertical-align:middle}
.glt-star{display:block;flex:0 0 auto}
.glt-star.is-full{fill:#F5A623}
.glt-star.is-half{fill:#F5A623;opacity:.55}
.glt-star.is-none{fill:#D6DED9}
.glt-cp-rate-li b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.glt-cp-rate-li a{color:var(--c-green);font-weight:700;font-size:16px;text-decoration:none}
.glt-cp-rate-li a:hover{text-decoration:underline}
.glt-cp-norate{font-weight:400;font-size:15.5px;color:var(--c-mute)}

/* --------------------------------------------------------- review summary */
.glt-cp-score{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);
 align-items:center;padding:22px 24px;background:var(--c-mist);border:1px solid var(--c-line);
 border-radius:16px;margin:0 0 26px}
@media(max-width:600px){.glt-cp-score{grid-template-columns:minmax(0,1fr);gap:18px}}
.glt-cp-score-n{text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.glt-cp-score-n b{font-family:var(--c-sans);font-weight:800;font-size:2.7875rem;line-height:1;
 color:var(--c-deep);letter-spacing:-.04em}
.glt-cp-score-n span{font-size:14.5px;color:var(--c-mute)}
.glt-cp-score-n em{font-style:normal;font-family:var(--c-mono);font-size:13.5px;font-weight:600;
 letter-spacing:.07em;text-transform:uppercase;color:var(--c-mute);margin-top:3px}
.glt-cp-score-b{display:flex;flex-direction:column;gap:7px;min-width:0}
.glt-cp-score-r{display:grid;grid-template-columns:16px minmax(0,1fr) 32px;gap:10px;align-items:center;
 font-size:15px;color:var(--c-mute)}
.glt-cp-score-t{height:8px;border-radius:99px;background:var(--c-line);overflow:hidden}
.glt-cp-score-t i{display:block;height:100%;border-radius:99px;background:#F5A623}
.glt-cp-score-r em{font-style:normal;text-align:right}

/* ------------------------------------------------------- leaving a review */
.glt-rate{border:0;margin:0 0 18px;padding:0}
.glt-rate legend{font-weight:700;color:var(--c-ink);font-size:17px;padding:0;margin:0 0 8px}
.glt-rate-row{display:inline-flex;flex-direction:row-reverse;gap:4px}
.glt-rate-row input{position:absolute;opacity:0;width:1px;height:1px}
.glt-rate-row label{cursor:pointer;line-height:0;padding:2px}
.glt-rate-row label svg{width:30px;height:30px;fill:#D6DED9;transition:fill .15s}
.glt-rate-row label:hover svg,
.glt-rate-row label:hover ~ label svg,
.glt-rate-row input:checked ~ label svg{fill:#F5A623}
.glt-rate-row input:focus-visible + label svg{outline:3px solid var(--c-fire);outline-offset:2px;border-radius:4px}
.glt-cp-reviews .comment-list .glt-stars{margin:0 0 6px}

@media(prefers-reduced-motion:reduce){
 .glt-cp-panel>summary::after,.glt-rate-row label svg{transition:none}
}

/* On a tablet the card has width to spare, so the preview and the buying
   side sit together instead of stacking into a giant video. */
@media(min-width:601px) and (max-width:1023px){
 .glt-cp-card.has-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"prev body" "promo body" "rest body";
  grid-template-rows:auto auto 1fr}
 .glt-cp-card.has-preview .glt-cp-prev{grid-area:prev}
 .glt-cp-card.has-preview .glt-cp-promo{grid-area:promo}
 .glt-cp-card.has-preview .glt-cp-card-b{grid-area:body;border-left:1px solid var(--c-line);height:100%}
}


/* ======================================================= every screen size

   Checked from a 240px feature phone up to a television. The rules below are
   only the places where the fluid sizing above is not enough on its own.    */

/* Nothing may ever push the page sideways. A long word, a pasted address or
   a title with no spaces in it wraps instead of widening the page. */
.glt-cp,.glt-cp-shell{overflow-x:clip}
/* break-word only as a last resort. The aggressive form split a name down
   the middle on a narrow column, which looks like a fault rather than a wrap. */
.glt-cp h1,.glt-cp h2,.glt-cp h3,.glt-cp p,.glt-cp li,.glt-cp b,.glt-cp td{
 overflow-wrap:break-word;word-break:normal;hyphens:none}
/* An address has nowhere sensible to break, so it may break anywhere. */
.glt-cp a[href^="http"],.glt-cp-mat-t,.glt-cp code{overflow-wrap:anywhere}
.glt-cp img,.glt-cp iframe,.glt-cp video,.glt-cp table{max-width:100%}
.glt-cp-rich table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------------------------------------------- small phones, 361 to 480 */
@media(max-width:480px){
 .glt-cp-card-b{padding:18px}
 .glt-cp-price{font-size:1.7875rem}
 .glt-cp-out,.glt-cp-score{padding:18px}
 .glt-cp-sec>summary,.glt-cp-faq>summary,.glt-cp-panel>summary{padding:14px 16px;gap:10px}
 .glt-cp-item{padding:12px 16px}
 .glt-cp-mat{padding:13px 14px;gap:11px}
 .glt-cp-panel-b,.glt-cp-faq-a{padding-left:16px;padding-right:16px}
 .glt-cp-tab{padding:12px 13px;font-size:16.5px}
}

/* ------------------------- the smallest screens still sold, 240 to 360 px */
@media(max-width:360px){
 .glt-cp-title{font-size:1.8375rem;letter-spacing:-.02em}
 .glt-cp-sub{font-size:1.125rem}
 .glt-cp-card-b{padding:15px}
 .glt-cp-go{min-height:52px;padding:14px 16px;font-size:17px}
 .glt-cp-price{font-size:1.6375rem}
 .glt-cp-facts div{flex-direction:column;align-items:flex-start;gap:2px}
 .glt-cp-facts dd{text-align:left}
 .glt-cp-mat{flex-wrap:wrap}
 .glt-cp-mat-k{order:-1}
 .glt-cp-mat-b{flex:1 1 100%}
 .glt-cp-tutor-pic img{width:92px;height:92px}
 .glt-cp-score-n b{font-size:2.2875rem}
 .glt-cp-badge{font-size:12.5px;padding:5px 10px}
 .glt-cp-tab{padding:11px 10px;font-size:16px}
 .glt-cp-out ul,.glt-cp-list ul{gap:8px}
 .glt-cp-out li,.glt-cp-list li,.glt-cp-panel-b li{font-size:17px;padding-left:23px}
}

/* A 240px feature phone. Everything still has to be reachable and readable,
   so the chrome gives way before the words do. */
@media(max-width:300px){
 .glt-cp-shell{padding-inline:12px}
 .glt-cp-title{font-size:1.6375rem}
 .glt-cp-card{border-radius:14px}
 .glt-cp-out,.glt-cp-score,.glt-cp-sec,.glt-cp-faq,.glt-cp-panel,.glt-cp-mat{border-radius:11px}
 .glt-cp-quote{padding:14px 16px}
 .glt-cp-score-n b{font-size:2.0875rem}
}

/* ------------------------------------------------ pointer and touch sizes */
/* On a touch screen every control is at least the size of a fingertip. */
@media(pointer:coarse){
 .glt-cp-tab{min-height:48px}
 .glt-cp-sec>summary,.glt-cp-faq>summary,.glt-cp-panel>summary{min-height:52px}
 .glt-cp-go{min-height:56px}
 .glt-cp-play{width:72px;height:72px}
 .glt-rate-row label svg{width:36px;height:36px}
}

/* ---------------------------------------------- tablets held the long way */
@media(min-width:768px) and (max-width:1023px){
 .glt-cp-grid{max-width:760px;margin-inline:auto}
 .glt-cp-out ul,.glt-cp-list ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ------------------------------------------- large desktops and up */
@media(min-width:1600px){
 .glt-cp-card-b{padding:26px}
 .glt-cp-go{min-height:60px;font-size:19px}
 .glt-cp-price{font-size:2.1875rem}
 .glt-cp-facts dt,.glt-cp-facts dd{font-size:17.5px}
}

/* ------------------------------------------------- televisions and beyond */
/* A living room screen is viewed from across the room, so everything steps up
   a size rather than the column simply getting wider. The column itself is
   already capped, which is what stops a line of text running a metre wide. */
@media(min-width:1921px){
 .glt-cp{font-size:19.5px;line-height:1.7}
 .glt-cp-sub{font-size:1.5875rem}
 .glt-cp-by b{font-size:18.5px}
 .glt-cp-tab{font-size:18.5px;padding:15px 22px}
 .glt-cp-out li,.glt-cp-list li,.glt-cp-panel-b li,.glt-cp-item,.glt-cp-faq-a{font-size:19px}
 .glt-cp-sec-t,.glt-cp-mat-t{font-size:19px}
 .glt-cp-go{min-height:64px;font-size:20px}
}

@media(min-width:2400px){
 .glt-cp{font-size:22px}
 .glt-cp-title{font-size:3.9875rem}
 .glt-cp-sub{font-size:1.7375rem}
 .glt-cp-tab{font-size:20px}
}

/* ------------------------------------------------------- short landscape */
/* A phone turned sideways has very little height, so a sticky card would eat
   most of the screen. */
@media(max-height:520px) and (orientation:landscape){
 .glt-cp-side{position:static}
 .glt-cp-prev{aspect-ratio:21/9}
}

/* --------------------------------------------------------------- printing */
@media print{
 .glt-cp-side,.glt-cp-rail,.glt-cp-play{display:none!important}
 .glt-cp-pane{display:block!important}
 .glt-cp-sec,.glt-cp-faq,.glt-cp-panel{break-inside:avoid}
 .glt-cp-sec[open]>summary::after,.glt-cp-faq>summary::after{display:none}
 .glt-cp{color:#000}
}

/* ------------------------------------------------------- high contrast */
@media(prefers-contrast:more){
 .glt-cp{--c-mute:#3F4D45;--c-line:#9AA8A0}
 .glt-cp-tab.is-on{border-bottom-width:4px}
 .glt-cp-go{outline:2px solid var(--c-deep);outline-offset:2px}
}

/* --------------------------------------------------- forced colours mode */
/* Windows high contrast replaces every colour, so anything drawn with a
   background or a border needs a system colour to survive. */
@media(forced-colors:active){
 .glt-cp-go{border:2px solid ButtonText}
 .glt-cp-tab.is-on{border-bottom-color:Highlight}
 .glt-cp-bar span,.glt-cp-score-t i{background:Highlight}
 .glt-cp-out li::before,.glt-cp-list li::before,.glt-cp-panel-b li::before{border-color:CanvasText}
}

/* ------------------------------------------- 4.5: save, prerequisites, prices */
.glt-cp-save{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 0;font-size:15.5px;color:var(--c-mute)}
.glt-cp-save .glt-wish{margin:0}
.glt-cp-save .glt-wish-b{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--c-line);background:#fff;color:var(--c-ink,#0B160E);cursor:pointer}
.glt-cp-save .glt-wish-b svg{fill:none;stroke:currentColor;stroke-width:2}
.glt-cp-save .glt-wish-b:hover,.glt-cp-save .glt-wish-b[aria-pressed="true"]{color:#FF3B00;border-color:#FF3B00}
.glt-cp-save .glt-wish-b[aria-pressed="true"] svg{fill:currentColor}
.glt-cp-pre{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,59,0,.06);border:1px solid rgba(255,59,0,.25);font-size:15.5px;color:var(--c-body,#4E5E54)}
.glt-cp-pre a{color:var(--c-deep,#003B0D);font-weight:700}
.glt-cp-pre.is-ready{background:rgba(0,151,33,.07);border-color:rgba(0,151,33,.25)}
.glt-ref{display:block;margin-top:4px;font-size:15px;font-weight:600;color:var(--c-mute);letter-spacing:0}
.glt-ref[hidden]{display:none}
.glt-ccy{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:2px 0 12px}
.glt-ccy-b{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--c-line);font-size:14px;font-weight:600;color:var(--c-body,#4E5E54);text-decoration:none}
.glt-ccy-b:hover{border-color:#009721;color:#009721}
.glt-ccy-b.is-on{background:#003B0D;border-color:#003B0D;color:#fff}
.glt-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.glt-shell .glt-ccy-b{color:var(--c-body,#4E5E54);text-decoration:none}
.glt-shell .glt-ccy-b:hover{color:#00701A}
.glt-shell .glt-ccy-b.is-on{color:#fff}
.glt-shell .glt-cp-pre a{color:var(--c-deep,#003B0D)}
/* sections and lessons the course owner has not opened yet */
.glt-cp-sec-soon,.glt-cp-wait{display:inline-block;flex:0 0 auto;font-family:var(--c-sans);font-size:12.5px;font-weight:700;line-height:1.4;color:var(--c-ink);background:rgba(255,59,0,.08);border:1px solid rgba(255,59,0,.5);border-radius:99px;padding:2px 10px;white-space:nowrap;vertical-align:middle}
.glt-cp-sec-soon{margin-left:8px;letter-spacing:0;text-transform:none}
@media(max-width:600px){.glt-cp-sec-soon{margin:6px 0 0;display:table}}