.tempus-course{
  --tmp-band:#F9F8F6;--tmp-ink:#1F2121;--tmp-muted:#6E7272;--tmp-border:#E3E5E5;--tmp-tint:#F5F5F5;
  --tmp-accent:#18A5F3;--tmp-yellow:#FFC83D;--tmp-card-radius:20px;--tmp-pill:20px;--tmp-gutter:83px;--tmp-side:447px;
  --tmp-shadow-card:0 4px 50px rgba(31,33,33,.18);--tmp-shadow-tabs:0 4px 30px rgba(31,33,33,.15);
  /* How far the sticky sidebar card is pulled up into the hero band. A plain constant -
     tune it directly if the overlap looks too shallow/deep for real course titles. It is
     deliberately NOT derived from grid track sizing (see .tc-side below) so it can never
     shift when tab content, glance rows or the contact box change height. */
  --tmp-card-lift:-170px;
  position:relative;font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-weight:500;color:var(--tmp-ink)}

.tempus-course :where(h1,h2,h3,ul,li,p,figure){margin:0;padding:0}
.tempus-course ul{list-style:none}

/* Theme uses `.single-product #page .site-content{margin:130px 0}` (1,2,0). Match and beat it. */
body.single-product #page .site-content{margin-top:0}

/* position:sticky is disabled by the theme's `overflow-x:hidden` on html/body, which makes
   the root a scroll container. `clip` prevents horizontal scroll WITHOUT creating one. */
html:has(body.single-product),body.single-product{overflow-x:clip}

.tc-grid{position:relative;z-index:1;max-width:1290px;margin:0 auto;padding:40px 0 72px;display:grid;grid-template-columns:minmax(0,1fr) var(--tmp-side);column-gap:var(--tmp-gutter);align-items:start}

.tc-breadcrumb{grid-column:1 / -1;grid-row:1;position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:16px;color:var(--tmp-muted);margin:0;padding:0}
.tc-breadcrumb::before{content:"";position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:100%;background:var(--e-global-color-background-field);z-index:-1}
.tc-breadcrumb a{color:var(--tmp-muted);text-decoration:none}
.tc-breadcrumb a:hover{color:var(--e-global-color-accent)}
.tc-breadcrumb .sep{color:#B7BDBC}
.tc-breadcrumb .current{color:var(--tmp-ink)}

.tc-main{grid-column:1;grid-row:3;min-width:0}
/* grid-row is 3 only (NOT 2/4): the card must never span into the hero's row. Spanning
   both rows made CSS Grid's track-sizing algorithm distribute extra height between hero
   and main whenever the card's own content (image/button/glance rows/contact box) needed
   more room than hero+main naturally provided - which visibly moved the tabs whenever ANY
   of those three areas changed height. Decoupled: hero's height is now only ever a function
   of its own title + tag line, forever. The visual overlap into the hero band is recreated
   with a plain margin-top, --tmp-card-lift, instead of grid spanning. */
/* align-self:stretch here is SAFE (unlike the old grid-row:2/4 span): row 3 is a single,
   non-spanning row, so 'stretch' just matches the row's own max-content height (i.e. main's
   height) - no cross-row extra-space distribution, so it can never touch hero's row again.
   This also restores the tall wrapper tempus-course-sticky.js needs: it slides .tc-card
   between position:fixed/relative inside whatever extra height .tc-side has beyond the
   card's own height, so a collapsed-to-content .tc-side (align-self:start) leaves it no
   room to travel and the sticky effect silently stops firing. */
.tc-side{grid-column:2;grid-row:3;align-self:stretch;margin-top:50px;}
.tc-side{position:relative}
.tc-card{position:relative;width:100%;background:var(--e-global-color-tmpwht, #fff);border-radius:var(--tmp-card-radius);box-shadow:var(--tmp-shadow-card);padding:30px}
.tc-side.tc-slide-down .tc-card{position:fixed}
.tc-side.tc-slide-top .tc-card{position:relative}
@media(min-width:1025px){.tc-card{width:var(--tmp-side)}}
@media(max-width:1024px){.tc-side.tc-slide-down .tc-card,.tc-side.tc-slide-top .tc-card{position:static !important;width:100%}}
.tc-card__media{border-radius:12px;overflow:hidden;margin-bottom:22px}
.tc-card__media img{display:block;width:100%;height:auto}

.tc-title{font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-weight:500;font-size:46px;line-height:1.12;color:var(--tmp-ink);margin-bottom:40px}
.tc-meta{display:flex;flex-wrap:wrap;gap:12px 26px;margin:20px 0 40px}
.tc-meta__item{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--tmp-ink)}
.tc-meta__item [class*=inlingua-icon-]{color:var(--e-global-color-accent);font-size:20px}

.tc-tabs{margin-bottom:24px;margin-top:50px;position:relative;z-index:1}
.tc-tablist{display:inline-flex;flex-wrap:wrap;gap:6px;background:var(--e-global-color-tmpwht, #fff);border-radius:var(--tmp-pill);box-shadow:var(--tmp-shadow-tabs);padding:8px;width:100%;}
.tc-tab{border:0;background:transparent;border-radius:var(--tmp-pill);padding:12px 26px;font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-weight:500;font-size:16px;color:var(--tmp-ink);cursor:pointer;transition:background .18s,color .18s}
.tc-tab:hover:not(.is-active){background:var(--tmp-tint)}
.tc-tab.is-active{background:var(--tmp-yellow);color:var(--tmp-ink)}

.tc-panel{margin-bottom:24px}
html.tc-js .tc-panel{display:none}
html.tc-js .tc-panel.is-active{display:block}
.tc-learnbox{border:1px solid var(--tmp-border);border-radius:var(--tmp-card-radius);padding:40px 30px;background:var(--e-global-color-tmpwht, #fff)}
.tc-h2{font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-weight:500;font-size:32px;line-height:1.15;color:var(--tmp-ink);margin-bottom:16px}
.tc-h2--mt{margin-top:28px}
.tc-prose{font-size:16px;line-height:26px;color:var(--tmp-ink)}
.tc-prose p{margin:0 0 16px;max-width:62ch}
.tc-prose p:last-child{margin-bottom:0}

.tempus-list{margin:0;padding:0;list-style:none}
.tempus-list li{position:relative;padding:9px 0 9px 34px;font-size:16px;line-height:26px;color:var(--tmp-ink)}
.tempus-list li:before{content:"";position:absolute;left:0;top:15px;width:14px;height:14px;border-radius:50%;background:var(--e-global-color-accent)}
.tc-checklist{columns:2;column-gap:40px}
@media(max-width:600px){.tc-checklist{columns:1}}

.tc-faq-section{margin-top:34px}
.tc-faq-section .tc-h2{margin-bottom:18px}
.tempus-faq{border:1px solid var(--tmp-border);border-radius:var(--tmp-card-radius);margin:0 0 12px;overflow:hidden}
.tempus-faq summary{cursor:pointer;padding:20px 24px;font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-weight:500;font-size:18px;color:var(--tmp-ink);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.tc-faq-icon{color:var(--tmp-muted);font-size:20px;flex-shrink:0;transition:transform .2s ease}
.tempus-faq[open] .tc-faq-icon{transform:rotate(180deg)}
.tempus-faq summary::-webkit-details-marker{display:none}
.tempus-faq[open] summary{background:var(--tmp-tint)}
.tempus-faq>div{padding:16px 24px;font-size:16px;line-height:26px;color:var(--tmp-ink)}
.tempus-faq>div p{margin:0}
/* FAQs now live in an auto-generated last tab rather than a persistent block below the
   tabs. The panel deliberately has NO .tc-learnbox wrapper - each <details> already draws
   its own bordered card, so nesting them in a second card double-boxed the list. */
.tc-panel--faq .tempus-faq:last-child{margin-bottom:0}

.tempus-includes__head{font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-size:22px;line-height:30px;font-weight:500;color:var(--tmp-ink);margin:24px 0 20px}
.tempus-includes ul{list-style:none;padding:0;margin:0}
.tempus-includes li{display:flex;align-items:center;position:relative;padding:0 0 14px 34px;margin-bottom:14px;border-bottom:1px solid var(--tmp-border)}
.tempus-includes li:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
.tempus-includes li .tc-glance-icon{position:absolute;left:0;top:0;width:20px;height:20px;color:var(--tmp-muted);fill:currentColor}
.tempus-includes__label{color:var(--tmp-muted);font-size:16px;line-height:26px;margin-right:8px}
.tempus-includes__val{font-size:16px;line-height:26px;font-weight:700;color:var(--tmp-ink);margin-left:auto;text-align:right}
/* When the icon+text notes group follows the labelled rows, the last labelled row must
   KEEP its divider (the base rule strips it as :last-child) so the two groups read as one
   continuous list rather than a floating block. */
.tempus-includes--has-notes li:last-child{border-bottom:1px solid var(--tmp-border);padding-bottom:14px;margin-bottom:14px}
.tempus-highlight-notes{list-style:none;padding:0;margin:0}
.tempus-highlight-notes li{display:flex;align-items:flex-start;position:relative;padding:0 0 0 34px;margin:0 0 12px}
.tempus-highlight-notes li:last-child{margin-bottom:0}
.tempus-highlight-notes li .tc-glance-icon{position:absolute;left:0;top:3px;width:20px;height:20px;color:var(--tmp-ink);fill:currentColor}
.tempus-highlight-notes__val{font-size:16px;line-height:26px;color:var(--tmp-ink)}

/* Sidebar price row. Sits directly above the action button. Bordered rather than
   bottom-ruled like the highlights rows, because it is a standalone statement next
   to the CTA, not one item in a list. */
.tc-price{display:flex;align-items:center;gap:10px;border:1px solid var(--tmp-border);border-radius:12px;padding:14px 18px;margin:0 0 14px}
.tc-price__icon{width:20px;height:20px;flex:0 0 auto;color:var(--tmp-muted);fill:currentColor}
.tc-price__label{font-size:16px;line-height:26px;color:var(--tmp-muted)}
.tc-price__val{margin-left:auto;text-align:right;font-size:16px;line-height:26px;font-weight:500;color:var(--tmp-ink)}
/* get_price_html() emits <del>/<ins> for a sale price. Mute the old figure and drop
   the browser default underline on the new one. */
.tc-price__val del{font-weight:500;color:var(--tmp-muted);margin-right:6px}
.tc-price__val del .amount{text-decoration:line-through}
.tc-price__val ins{text-decoration:none;background:none;color:inherit}
.tempus-course .tempus-apply-wrap{margin:0 0 4px}
.tempus-course .tempus-apply-btn{display:block;width:100%;text-align:center;border-radius:var(--tmp-pill);padding:16px 24px;font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-weight:500;font-size:16px;background:var(--e-global-color-accent);color:var(--e-global-color-tmpwht, #fff);border:0;cursor:pointer}
.tempus-course .tempus-apply-btn:hover{background:var(--tmp-ink);color:var(--e-global-color-tmpwht, #fff)}

/* Purchase mode renders WooCommerce's own add-to-cart form, so the button is Woo's
   .single_add_to_cart_button rather than our .tempus-apply-btn. Match it to the other
   two modes so the card looks identical whichever action a course uses.
   NOTE the flex container is .product-add-to-cart-form, NOT form.cart: the Inlingua theme
   overrides Woo's simple.php and wraps everything in that div plus a .quantity_wrap, so
   styling form.cart directly lays out a single child and does nothing visible. */
.tempus-course .tempus-apply-wrap--purchase form.cart{margin:0}
.tempus-course .tempus-apply-wrap--purchase .product-add-to-cart-form{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* Quantity gets its own full-width row so the button can stay full width like the Apply
   Now and external buttons - side by side, the button is squeezed in a 447px card. */
.tempus-course .tempus-apply-wrap--purchase .quantity_wrap{flex:1 0 100%;display:flex;align-items:center;gap:10px;margin:0}
.tempus-course .tempus-apply-wrap--purchase .quantity_label{margin:0;font-size:15px;line-height:1.4;color:var(--tmp-muted)}
.tempus-course .tempus-apply-wrap--purchase .quantity{flex:0 0 auto;margin:0}
.tempus-course .tempus-apply-wrap--purchase .quantity input{width:88px;height:48px;text-align:center;border:1px solid var(--tmp-border);border-radius:var(--tmp-pill);background:var(--e-global-color-tmpwht, #fff);font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-size:16px;color:var(--tmp-ink)}
.tempus-course .tempus-apply-wrap--purchase .single_add_to_cart_button{flex:1 0 100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;border-radius:var(--tmp-pill);padding:16px 24px;font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-weight:500;font-size:16px;background:var(--e-global-color-accent);color:var(--e-global-color-tmpwht, #fff);border:0;cursor:pointer}
/* :focus stated explicitly - the Elementor kit sets injected buttons to white text on
   hover AND focus, which on a light background is an invisible button. */
.tempus-course .tempus-apply-wrap--purchase .single_add_to_cart_button:hover,
.tempus-course .tempus-apply-wrap--purchase .single_add_to_cart_button:focus{background:var(--tmp-ink);color:var(--e-global-color-tmpwht, #fff)}
/* Theme emits these empty wrappers after the button; they only add a stray gap here. */
.tempus-course .tempus-apply-wrap--purchase .product_button{display:none}
.tempus-course .tempus-apply-wrap--purchase .added_to_cart{flex:1 0 100%;text-align:center;font-size:15px;color:var(--e-global-color-accent)}


.tc-contact{background:var(--tmp-tint);border-radius:var(--tmp-card-radius);padding:30px 30px 26px;margin-top:24px}
.tc-contact__heading{font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-weight:500;font-size:22px;line-height:30px;color:var(--tmp-ink);margin-bottom:20px}
.tc-contact__item{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:16px;line-height:26px}
.tc-contact__item:last-child{margin-bottom:0}
.tc-contact__item span{color:var(--tmp-muted);font-weight:500}
.tc-contact__item a{color:var(--tmp-ink);font-weight:500;text-decoration:none}
.tc-contact__item a:hover{text-decoration:underline}


.tc-hero{grid-column:1 / -1;grid-row:2;position:relative;min-width:0;padding:16px 0 56px;display:grid;grid-template-columns:minmax(0,1fr) var(--tmp-side);column-gap:var(--tmp-gutter);align-items:start}
/* Hero is now a two-column row of its own, mirroring .tc-grid tracks exactly, so the
   Course highlights panel lines up with the sticky card in the row below. The old
   padding-right that reserved the sidebar width is gone: a real grid track does that job
   now, and a percentage-free track cannot re-create the min-content overflow bug that
   once knocked the full-bleed band off centre. */
.tc-hero__body{min-width:0;display:flex;flex-direction:column;gap:20px}
.tc-hero__body .tc-title{margin-bottom:0}
.tc-hero__intro{font-size:18px;line-height:28px;color:var(--tmp-ink);max-width:58ch}
.tc-hero__intro p{margin:0 0 14px}
.tc-hero__intro p:last-child{margin:0}
.tc-hero__aside{min-width:0}
.tc-glance-panel{background:var(--e-global-color-tmpwht, #fff);border:1px solid var(--tmp-border);border-radius:var(--tmp-card-radius);box-shadow:var(--tmp-shadow-card);padding:30px}
/* .tempus-includes__head carries margin-top:24px for its old sidebar position; zero it here. */
.tc-glance-panel__head{margin-top:0}
.tc-hero::before{content:"";position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:100%;background:var(--e-global-color-background-field) var(--tmp-deco,none) no-repeat top right;z-index:-1}

.tc-contact__social{display:flex;align-items:center;gap:16px;margin-top:16px}
.tc-contact__social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#FFFFFF;color:var(--e-global-color-primary);border:2px solid var(--e-global-color-primary);transition:color .18s,border-color .18s}
.tc-contact__social a:hover{color:var(--e-global-color-dark);border-color:var(--e-global-color-dark)}
.tc-contact__social a span{font-size:18px;font-weight:500;}



.inlingua-related-product-section{max-width:1290px;margin:0 auto;padding:0 30px 72px}

.tc-related-carousel{position:relative;font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-weight:500}
.tc-related-carousel > h2{font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-weight:500;font-size:32px;line-height:1.2;letter-spacing:normal;color:var(--e-global-color-tmpdgry, #1F2121);margin:0 0 30px}
@media(max-width:767px){.tc-related-carousel > h2{font-size:26px;margin-bottom:24px}}

.inlingua-related-product-section,.tc-related-carousel{overflow:visible}
.tc-related-carousel__wrap{position:relative;overflow:visible;clip-path:inset(0 -250px)}
.tc-related-carousel__viewport{overflow:hidden;width:100%}
.tc-related-carousel .swiper-wrapper{align-items:stretch;box-sizing:border-box}
.tc-related-carousel .swiper-slide{height:auto;display:flex}

.tc-related-card{display:flex;flex-direction:column;width:100%;background:var(--e-global-color-tmpwht, #fff);border:1px solid var(--tmp-border,#E3E5E5);border-radius:16px;padding:7px;transition:box-shadow .3s ease}
.tc-related-card:hover{box-shadow:0 4px 30px rgba(31,33,33,.10)}

.tc-related-card__media{display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--tmp-tint,#F5F5F5)}
.tc-related-card__media img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.tc-related-card__body{display:flex;flex-direction:column;justify-content:space-between;flex:1;padding:20px 16px 16px}
.tc-related-card__title{margin:0 0 10px;font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-weight:500;font-size:19px;line-height:1.35;color:var(--e-global-color-tmpdgry, #1F2121)}
.tc-related-card__title a{font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;color:inherit;text-decoration:none}
.tc-related-card__title a:hover{color:var(--e-global-color-accent,#18A5F3)}
.tc-related-card .tempus-apply-wrap{margin:auto 0 0}
.tc-related-card .tempus-apply-btn{display:block;width:100%;text-align:center;border:0;cursor:pointer;border-radius:12px;padding:14px 20px;font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-weight:500;font-size:16px;background:var(--e-global-color-accent,#18A5F3);color:var(--e-global-color-tmpwht, #fff);transition:background .3s ease}
.tc-related-card .tempus-apply-btn:hover{background:var(--e-global-color-tmpdgry, #1F2121);color:var(--e-global-color-tmpwht, #fff)}

.tc-related-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border-radius:100px;background:var(--e-global-color-tmpwht, #fff);border:1px solid var(--tmp-border,#E3E5E5);cursor:pointer;transition:all .3s ease}
.tc-related-carousel__arrow [class*=inlingua-icon-]{font-size:24px;line-height:1;color:#929C9A}
.tc-related-carousel__arrow:hover{background:var(--e-global-color-accent,#18A5F3);border-color:var(--e-global-color-accent,#18A5F3)}
.tc-related-carousel__arrow:hover [class*=inlingua-icon-]{color:var(--e-global-color-tmpwht, #fff)}
.tc-related-carousel__arrow--prev{left:-70px}
.tc-related-carousel__arrow--next{right:-70px}
@media(max-width:1540px){.tc-related-carousel__arrow--prev{left:4px}.tc-related-carousel__arrow--next{right:4px}}
.tc-related-carousel__arrow.swiper-button-disabled{opacity:.35;pointer-events:none}
@media(max-width:767px){.tc-related-carousel__arrow{display:none}}
/* At a glance: WooCommerce price markup inside a row value */
.tempus-includes--glance .tempus-includes__val .woocommerce-Price-amount{font-weight:inherit;color:inherit}
.tempus-includes--glance .tempus-includes__val del{opacity:.55;font-weight:500;margin-right:5px}
.tempus-includes--glance .tempus-includes__val ins{text-decoration:none;background:none}

/* Rich-text tab panels. The theme kills markers via .tempus-course ul{list-style:none},
   so editor-entered lists must be restyled here. */
.tc-prose>*:first-child{margin-top:0}
.tc-prose>*:last-child{margin-bottom:0}
.tc-prose h2,.tc-prose h3,.tc-prose h4{font-family:var(--e-global-typography-primary-font-family,Rubik,"Rubik Fallback",Arial,Helvetica,sans-serif);font-weight:500;color:var(--tmp-ink);line-height:1.2;margin:34px 0 12px}
.tc-prose h2{font-size:26px}
.tc-prose h3{font-size:22px}
.tc-prose h4{font-size:18px}
.tc-prose ul{list-style:none;margin:0 0 16px;padding:0}
.tc-prose ul li{position:relative;padding:2px 0 2px 25px;font-size:16px;line-height:26px;color:var(--tmp-ink)}
.tc-prose ul li:before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--e-global-color-text)}
.tc-prose ol{margin:0 0 16px;padding-left:24px;list-style:decimal}
.tc-prose ol li{padding:6px 0;font-size:16px;line-height:26px;color:var(--tmp-ink)}
.tc-prose a{color:var(--e-global-color-accent);text-decoration:underline}
.tc-prose a:hover{color:var(--tmp-ink)}
.tc-prose img{max-width:100%;height:auto;border-radius:12px}
.tc-prose blockquote{margin:0 0 16px;padding:14px 20px;border-left:4px solid var(--e-global-color-accent);background:var(--tmp-tint)}
.tc-prose table{width:100%;border-collapse:collapse;margin:0 0 16px}
.tc-prose th,.tc-prose td{border:1px solid var(--tmp-border);padding:10px 12px;text-align:left;font-size:16px}
.tc-prose.tsb-prose ul li:before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--e-global-color-text)}
.tc-prose.tsb-prose ul li{position:relative;padding:2px 0 2px 25px;font-size:16px;line-height:24px;color:var(--tmp-ink)}

/* --------------------------------------------------------------------------
   RESPONSIVE. Must stay at the END of this file: media queries carry no extra
   specificity, so any base rule declared later would silently win. That is what
   left .tc-hero with padding-right:530px at mobile, forcing its min-content
   width to ~737px, pushing it off-centre and misaligning the full-bleed band.
   -------------------------------------------------------------------------- */
@media(max-width:1024px){
  .tc-grid{grid-template-columns:1fr;column-gap:0;padding-bottom:56px}
  .tc-breadcrumb{grid-column:1;grid-row:auto}
  .tc-hero{grid-column:1;grid-row:auto;grid-template-columns:1fr;row-gap:32px;padding:16px 0 40px}
  .tc-main{grid-column:1;grid-row:auto}
  .tc-side{grid-column:1;grid-row:auto;align-self:auto;margin-top:36px}
  .tc-card{position:static}
}
@media(max-width:768px){
  .tc-title{font-size:36px}
  .tc-learnbox{padding:22px}
}