/* Additions on top of the original Coba theme (theme.css + flexkit.css).
   Covers what WordPress/jQuery/plugins used to provide. */
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: #314662; color: #fff; padding: 8px 14px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }
.center { text-align: center; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #ffc66f; outline-offset: 2px; }

/* header: hamburger was a div, now a button */
.header .container #hamburger { background: none; border: 0; padding: 0; }
.header .container nav ul { padding: 0; }

/* video embed */
.video_container .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 6px; }
.video_container .embed-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* empty icon cards no longer leave a blank image slot */
.icon_list .inner .icon_list_item { align-content: flex-end; }

/* client carousel (replaces slick.js) */
.testimonials.slick-slider .slick-list { padding: 30px 0; }
.testimonials .slick-track { transition: transform .6s ease; will-change: transform; }
.testimonials .slick-slide { box-sizing: border-box; }
.testimonials .slick-dots { padding: 0; }
.testimonials .slick-dots li.slick-active button { opacity: 1; background: #314662; }
@media (prefers-reduced-motion: reduce) { .testimonials .slick-track { transition: none; } }

/* contact form inherits the old Gravity Forms styling via its ids */
.two_col.contact_info .col:last-child #gform_fields_1 { list-style: none; padding: 0; margin: 0; }
.two_col.contact_info .col:last-child #gform_fields_1 li input,
.two_col.contact_info .col:last-child #gform_fields_1 li textarea { font: inherit; color: #314662; }
.two_col.contact_info .col #gform_submit_button_1 { cursor: pointer; font-size: 18px; }

/* footer */
.footer ul.contact_info, .footer ul.social_links { list-style: none; padding: 0; }
.footer ul.social_links { display: flex; gap: 14px; }
.footer ul.social_links svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.footer ul.contact_info li p { margin: 0; }
@media (max-width: 1000px) { .footer ul.social_links { justify-content: center; } }

/* phone reel on the home page (same frame as the Nexa course pages: iPhone 18 Pro proportions) */
.reel_row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.reel_row .left_text_container { padding-left: 80px; }
.phone { margin: 0; justify-self: center; text-align: center; }
.phone__body { position: relative; width: min(300px, 74vw, calc((86vh - 60px) * .46)); padding: 3.4%; border-radius: 17.5% / 8.3%;
  background: linear-gradient(145deg, #3a3d41, #0d0e10 38%, #0b0c0d 62%, #2b2e31);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.26), 0 40px 80px -28px rgba(20,32,48,.55); }
.phone__body::before, .phone__body::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2f3235; }
.phone__body::before { left: -3px; top: 19%; height: 6%; box-shadow: 0 56px 0 0 #2f3235, 0 104px 0 0 #2f3235; }
.phone__body::after { right: -3px; top: 31%; height: 13%; }
.phone__screen { position: relative; aspect-ratio: 1206 / 2622; border-radius: 15.4% / 7.1%; overflow: hidden; background: #05080b; }
.phone__screen::before { content: ""; position: absolute; z-index: 2; top: 1.35%; left: 50%; width: 31%; aspect-ratio: 126 / 37; border-radius: 999px; background: #000; transform: translateX(-50%); }
.phone__v { display: block; width: 100%; height: 100%; object-fit: cover; background: #05080b; }
.phone__cap { display: block; margin-top: 16px; font-family: "Maven Pro", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(49,70,98,.6); }
.phone.is-pre { transform: translateY(36px) scale(.97); transition: transform 1.1s cubic-bezier(.2,.9,.25,1.15); }
.phone.is-pre.is-in { transform: none; }
@media (max-width: 1000px) { .reel_row .left_text_container { padding-left: 0; } }
@media (max-width: 850px) { .reel_row { grid-template-columns: 1fr; gap: 40px; } }
@media (prefers-reduced-motion: reduce) { .phone.is-pre { transform: none; transition: none; } }



/* "Big & Small RTOs": the blob artwork sits to the right of the words (below them on phones), never under them */
.section.four { background-position: right 4% bottom; background-size: min(520px, 42%); margin-bottom: 60px; min-height: 360px; }
.section.four .left_text_container { max-width: 560px; }
@media (max-width: 1000px) { .section.four { background-position: right bottom; background-size: 46%; } }
@media (max-width: 750px) { .section.four { background-position: center bottom; background-size: 78%; padding-bottom: 68vw; min-height: 0; } }

/* the two cards without a picture don't need their tall empty top on phones */
@media (max-width: 1000px) { .icon_list .inner .icon_list_item { min-height: 0; } }


/* ───────── products page: built from the home page's parts ───────── */
.prod_intro { text-align: center; padding-bottom: 1rem; background: url("images/courses-bg.png") no-repeat left -60px top 30px / 22%; }
.prod_intro .container { max-width: 760px; }
.prod_intro p { max-width: 620px; margin: 0 auto; }
.prod_jump { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 34px; }

.prod { background: url("images/section_2_shapes.png") no-repeat right bottom / 46%; padding-bottom: 5rem; }
.prod--flip { background: url("images/video_shapes.png") no-repeat left -40px bottom 40px / 44%; }
.prod_row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.prod--flip .prod_row { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.prod--flip .prod_media { order: -1; }
.prod_copy { max-width: 560px; }
.prod--flip .prod_copy { justify-self: end; }
.prod_units { font-family: "Maven Pro", sans-serif; font-weight: 700; color: #00b49a; letter-spacing: .04em; margin: -6px 0 18px; }
.prod_units span { display: block; font-weight: 500; letter-spacing: 0; color: rgba(49,70,98,.7); margin-top: 4px; }
.prod_tags { list-style: none; padding: 0; margin: 22px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.prod_tags li { font-family: "Maven Pro", sans-serif; font-weight: 600; font-size: 14px; color: #314662; background: #fff; border-radius: 999px; padding: 6px 14px; box-shadow: 0 0 17px rgba(0,0,0,.05); }
.prod_actions { display: flex; flex-wrap: wrap; gap: 26px; }
.prod_actions .border_button { margin-top: 30px; }
.prod_media { margin: 0; justify-self: center; text-align: center; width: 100%; }

/* widescreen frame for 16:9 reels (First Aid) */
.wide__body { position: relative; padding: 10px; border-radius: 18px; background: linear-gradient(145deg, #3a3d41, #0d0e10 40%, #0b0c0d 62%, #2b2e31);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.26), 0 40px 80px -28px rgba(20,32,48,.55); }
.wide__screen { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #05080b; }
.wide__v { display: block; width: 100%; height: 100%; object-fit: cover; }
.prod_media--phone .phone__body { margin: 0 auto; }

/* the numbers: the home page's client cards, small */
.prod_stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; max-width: 900px; }
.prod--flip .prod_stats { margin-left: auto; }
.prod_stat { background: #fff; padding: 22px 20px 20px; text-align: center; border-bottom: solid 5px #00b49a; box-shadow: 0 0 17px rgba(0,0,0,.05); }
.prod_stat strong { display: block; font-family: "Paytone One", sans-serif; font-weight: 400; font-size: 38px; line-height: 1.1; color: #314662; }
.prod_stat span { display: block; margin-top: 6px; font-family: "Maven Pro", sans-serif; font-weight: 600; font-size: 15px; color: rgba(49,70,98,.75); }
.prod_note { max-width: 900px; margin: 16px 0 0; font-size: 14px; color: rgba(49,70,98,.7); }
.prod--flip .prod_note { margin-left: auto; }

/* every video, grouped: cards on the grey band, like the client cards */
.prod_topics .testinonial_title { margin-bottom: 50px; }
.topic_grid { columns: 4 240px; column-gap: 24px; }
.topic_card { display: block; break-inside: avoid; margin: 0 0 24px; background: #fff; border-radius: 10px; padding: 24px 26px 20px; box-shadow: 0 0 17px rgba(0,0,0,.05); }
.topic_card summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; list-style: none; cursor: default; margin-bottom: 12px; }
.topic_card summary::-webkit-details-marker { display: none; }
.topic_card h4 { margin: 0; font-family: "Paytone One", sans-serif; font-weight: 400; font-size: 19px; color: #314662; }
.topic_n { font-family: "Maven Pro", sans-serif; font-weight: 700; font-size: 13px; color: #00b49a; }
.topic_card ul { list-style: none; margin: 0; padding: 0; }
.topic_card li { position: relative; padding: 5px 0 5px 18px; border-top: 1px solid #f0f0f0; font-size: 15px; line-height: 1.4; }
.topic_card li:first-child { border-top: 0; }
.topic_card li::before { content: ""; position: absolute; left: 0; top: .85em; width: 7px; height: 7px; border-radius: 50%; background: #00b49a; }

.prod_end .border_button + .border_button { margin-left: 26px; }

@media (max-width: 1000px) {
  .prod, .prod--flip { background-size: 70%; }
}
@media (max-width: 850px) {
  .prod_row, .prod--flip .prod_row { grid-template-columns: 1fr; }
  .prod--flip .prod_media { order: 0; }
  .prod--flip .prod_copy { justify-self: start; }
  .prod_media { max-width: 520px; }
  .prod_stats { gap: 12px; margin-top: 44px; }
  .prod_stat strong { font-size: 28px; }
  .prod_stat span { font-size: 13px; }
  .prod_intro { background-size: 45%; }
}
@media (max-width: 480px) {
  .prod_stats { grid-template-columns: 1fr 1fr 1fr; }
  .prod_stat { padding: 16px 8px 14px; }
}
@media (min-width: 1001px) { .prod:not(.prod--flip) .prod_copy, .prod:not(.prod--flip) .prod_stats, .prod:not(.prod--flip) .prod_note { padding-left: 80px; } .prod:not(.prod--flip) .prod_stats { max-width: 980px; } }
@media (max-width: 750px) { .prod_intro { background: none; } }
/* phones: each group folds to a tap-to-open card (site.js closes them); the count shows what's inside */
@media (max-width: 640px) {
  .topic_card { padding: 18px 20px; margin-bottom: 12px; }
  .topic_card summary { cursor: pointer; margin-bottom: 0; }
  .topic_card[open] summary { margin-bottom: 12px; }
  .topic_n::after { content: "+"; display: inline-block; margin-left: 10px; font-size: 18px; line-height: 1; transition: transform .2s; }
  .topic_card[open] .topic_n::after { transform: rotate(45deg); }
}

/* Blob artwork: on desktop each blob is sized to its section's height, so the whole shape always shows (no flat cut
   where it meets the section above). It only ever touches the page edge it's designed to run off. */
@media (min-width: 851px) {
  .home .section.two { background-size: auto min(94%, 900px); background-position: right center; }
  .prod { background-size: auto min(90%, 860px); background-position: right center; }
  .prod--flip { background-size: auto min(80%, 560px); background-position: left center; }
  .section.four { background-size: auto min(86%, 460px); background-position: right 4% center; }
  .prod_intro { background-size: auto min(90%, 300px); background-position: left top; }
}