/* =========================================================
   Home: "The Scholarise Online Experience" section (#online-classes)
   Colours come from the shared tokens in style.css:
   --primary #035643, --secondary #349C5C, --light #EEFBF2,
   --color-accent #FFC000, --color-accent-soft #FFE8A1.
   Photos are set in assets/js/online-experience.js.
   ========================================================= */

.ox { position: relative; overflow: hidden; padding: 76px 0 80px; background: #fff; }

/* ---------- shared: photo frames and placeholders ---------- */
.ox-frame { position: relative; margin: 0; overflow: hidden; aspect-ratio: var(--ar, 4 / 3); border-radius: 20px; background: var(--light); }
.ox-frame > img, .ox-ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.ox-frame > img { object-fit: cover; transition: transform .7s var(--ease);
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; pointer-events: none; /* no dragging the photos away */ }
.ox-ph { display: grid; place-items: center; color: var(--secondary); transition: transform .7s var(--ease);
  background-color: var(--light);
  background-image: repeating-linear-gradient(135deg, rgba(3, 86, 67, .05) 0 1.5px, transparent 1.5px 13px); }
.ox-ph.is-warm { background-color: #FFF4D1; color: #B07F00; /* soft tint of --color-accent-soft */
  background-image: repeating-linear-gradient(135deg, rgba(255, 192, 0, .16) 0 1.5px, transparent 1.5px 13px); }
.ox-ph > svg { width: 34px; height: 34px; opacity: .55; }
.ox-ph-label { position: absolute; left: 12px; right: 12px; bottom: 11px; font-family: var(--font-body); font-weight: 600; font-size: 11.5px; line-height: 1.35; color: var(--primary); opacity: .72; }
/* keep the placeholder caption clear of the overlapping photos and tags */
.ox-main .ox-ph-label { left: auto; text-align: right; max-width: 52%; }
.ox-side .ox-ph-label { bottom: auto; top: 10px; }
.ox-frame:hover > img, .ox-frame:hover > .ox-ph { transform: scale(1.035); }
/* Glimpse Inside the Class: no hover zoom until the entrance animation is over (JS adds .ox-ready) */
.js .ox-in .ox-frame:not(.ox-ready):hover > img, .js .ox-in .ox-frame:not(.ox-ready):hover > .ox-ph { transform: none; }

.ox-head { max-width: 640px; }
.ox-h3 { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1.22; color: var(--primary); letter-spacing: -.01em; }
.ox-sub { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }

/* ---------- Part A: introduction ---------- */
.ox-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 64px; align-items: center; }
.page-home .ox .ox-title { margin-top: 14px; text-align: left; font-size: clamp(28px, 2.55vw, 36px); line-height: 1.2; }
.ox-title > span { display: block; }
.ox-lead { margin-top: 18px; max-width: 470px; font-size: 16px; line-height: 1.75; color: var(--text); }

/* "in every live class" call bar: the controls a learner actually uses */
.ox-class { margin-top: 28px; }
.ox-class-label { font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--primary); }
.ox-callbar { display: inline-flex; gap: 6px; margin-top: 12px; padding: 10px; border-radius: 22px; background: var(--grad-deep); box-shadow: 0 16px 32px rgba(3, 86, 67, .18); }
.ox-cb { display: grid; justify-items: center; gap: 7px; width: 84px; padding: 5.5px 2px 4.5px; border-radius: 14px; } /* the icon's ring and the text's line spacing are uneven, so the top gets a little more room to look centred */
.ox-cb-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; transition: transform .3s var(--ease), background-color .3s; }
.ox-cb-btn svg { width: 20px; height: 20px; }
.ox-cb-text { font-family: var(--font-head); font-weight: 500; font-size: 11.5px; line-height: 1.2; color: #dff3e7; text-align: center; }
.ox-cb.is-mic .ox-cb-btn { background: var(--secondary); box-shadow: 0 0 0 4px rgba(52, 156, 92, .3); }
.ox-cb.is-hand .ox-cb-btn { background: var(--color-accent); color: var(--primary); }
.ox-cb:hover .ox-cb-btn { transform: translateY(-3px); }
.js .ox-class.is-in .ox-cb.is-hand .ox-cb-btn svg { animation: oxWave 1.2s ease-in-out 1.45s 2; transform-origin: 50% 90%; }
/* "In every live class" bar: plays when it scrolls into view.
   The label rises, the bar opens from the left, the four buttons pop in one by one,
   then the mic ring pulses and the hand waves. */
.js .ox-class[data-reveal] { opacity: 1; transform: none; } /* the parts animate themselves */
.js .ox-class:not(.is-in) .ox-class-label, .js .ox-class:not(.is-in) .ox-cb { opacity: 0; }
.js .ox-class:not(.is-in) .ox-callbar { clip-path: inset(0 100% 0 0 round 22px); }
.ox-class.is-in .ox-class-label { animation: oxUp .6s var(--ease) backwards; }
.ox-class.is-in .ox-callbar { animation: oxBarOpen .9s cubic-bezier(.77, 0, .18, 1) .15s backwards; }
.ox-class.is-in .ox-cb { animation: oxCbIn .55s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.ox-class.is-in .ox-cb:nth-child(1) { animation-delay: .55s; }
.ox-class.is-in .ox-cb:nth-child(2) { animation-delay: .67s; }
.ox-class.is-in .ox-cb:nth-child(3) { animation-delay: .79s; }
.ox-class.is-in .ox-cb:nth-child(4) { animation-delay: .91s; }
.ox-class.is-in .ox-cb.is-mic .ox-cb-btn { animation: oxRing 1.4s ease-out 1.3s 2; }
@keyframes oxBarOpen { from { clip-path: inset(0 100% 0 0 round 22px); } to { clip-path: inset(0 0 0 0 round 22px); } }
@keyframes oxCbIn { from { opacity: 0; transform: translateY(14px) scale(.7); } }
@keyframes oxRing { 0% { box-shadow: 0 0 0 4px rgba(52, 156, 92, .3); } 50% { box-shadow: 0 0 0 10px rgba(52, 156, 92, .12); } 100% { box-shadow: 0 0 0 4px rgba(52, 156, 92, .3); } }
@media (prefers-reduced-motion: reduce) {
  .ox-class.is-in .ox-class-label, .ox-class.is-in .ox-callbar, .ox-class.is-in .ox-cb, .ox-class.is-in .ox-cb.is-mic .ox-cb-btn, .js .ox-class.is-in .ox-cb.is-hand .ox-cb-btn svg { animation: none; }
  .js .ox-class:not(.is-in) .ox-class-label, .js .ox-class:not(.is-in) .ox-cb { opacity: 1; }
  .js .ox-class:not(.is-in) .ox-callbar { clip-path: none; }
}
@keyframes oxWave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(12deg); } }

.ox-collage { position: relative; padding: 0 70px 58px 46px; }
.ox-main { position: relative; z-index: 1; }
.ox-main .ox-frame { --ar: 5 / 4; border-radius: 28px; box-shadow: 0 0 0 8px #fff, var(--shadow); }
.ox-main::before { /* golden corner bracket */
  content: ""; position: absolute; z-index: -1; left: -18px; top: -18px; width: 86px; height: 86px;
  border-left: 4px solid var(--color-accent); border-top: 4px solid var(--color-accent); border-top-left-radius: 36px; }
.ox-blob { position: absolute; z-index: 0; right: 18px; bottom: 26px; width: 64%; height: 72%; pointer-events: none;
  background: var(--color-accent-soft); border-radius: 46% 54% 38% 62% / 52% 40% 60% 48%; }
.ox-side { position: absolute; z-index: 2; }
.ox-side .ox-frame { border-radius: 20px; box-shadow: 0 0 0 6px #fff, 0 16px 34px rgba(3, 86, 67, .16); }
.ox-side-a { left: 0; bottom: 0; width: 34%; }
.ox-side-a .ox-frame { --ar: 1 / 1; }
.ox-side-b { right: 0; top: 38px; width: 26%; }
.ox-side-b .ox-frame { --ar: 4 / 5; }

.ox-tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 7px 13px 7px 9px; border-radius: 999px; background: #fff; color: var(--primary);
  font-family: var(--font-head); font-weight: 600; font-size: 12.5px; line-height: 1; box-shadow: 0 8px 20px rgba(3, 86, 67, .14); }
.ox-tag svg { width: 16px; height: 16px; color: var(--secondary); }
.ox-tag-live { left: 18px; top: 18px; padding-left: 12px; }
.ox-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #E53935; } /* red = live */
.ox-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #E53935; }
.js .ox-dot { animation: oxBlink 1.4s ease-in-out infinite; }
.js .ox-dot::after { animation: oxPing 1.4s ease-out infinite; }
@keyframes oxBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes oxPing { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
.ox-side-a .ox-tag { left: 50%; bottom: -15px; transform: translateX(-50%); }
.ox-side-b .ox-tag { right: -6px; bottom: -15px; }

/* ---------- Part B: four-step journey (green band with lifted cards) ---------- */
.ox-journey { margin-top: 84px; padding: 50px 50px 54px; border-radius: 32px; color: #fff; background: var(--grad-section); }
/* desktop: the whole journey band is shown 5% smaller, centred */
@media (min-width: 1000px) { .ox-journey { zoom: .95; width: 95%; margin-left: auto; margin-right: auto; } }
.ox-journey .ox-h3 { color: #fff; }
.ox-journey .ox-sub { color: rgba(255, 255, 255, .75); }
.ox-steps-wrap { position: relative; margin-top: 30px; }
.ox-steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
/* dashed path that links the step badges; it shows in the gaps between the cards */
.ox-track { position: absolute; z-index: 0; left: 40px; right: 40px; top: 17px; height: 2px; }
.ox-track-line { position: absolute; inset: 0; border-radius: 2px; transform-origin: left center;
  background: repeating-linear-gradient(90deg, rgba(255, 232, 161, .65) 0 8px, transparent 8px 15px); }
.js .ox-track[data-reveal] { opacity: 1; transform: none; }
.js .ox-track:not(.is-in) .ox-track-line { transform: scaleX(0); }
.js .ox-track .ox-track-line { transition: transform 1.4s cubic-bezier(.45, .05, .2, 1) .25s; }

.ox-step { position: relative; padding: 12px 12px 24px; border-radius: 24px; background: #fff; color: var(--text); box-shadow: 0 22px 44px rgba(0, 0, 0, .18); }
.ox-mark { position: absolute; z-index: 2; left: 24px; top: -18px; display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 999px;
  background: var(--color-accent); color: var(--primary); box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
  font-family: var(--font-head); font-weight: 700; font-size: 14px; white-space: nowrap; }
.ox-step-main { margin-top: 0; }
.ox-step-img { border-radius: 16px; }
.ox-step-title { display: flex; align-items: center; gap: 8px; margin: 18px 8px 0; font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--primary); }
.ox-step-title svg { flex: none; width: 20px; height: 20px; color: var(--secondary); }
.ox-step p { margin: 8px 8px 0; font-size: 14.5px; line-height: 1.65; color: var(--text); }

/* ---------- Part C: inside the class ---------- */
.ox-inside { margin-top: 88px; }
.ox-in-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 44px; margin-top: 30px; }
.ox-in-media { position: relative; }
.ox-in-media .ox-frame { position: relative; z-index: 1; border-radius: 24px; box-shadow: 0 0 0 8px #fff, 0 18px 36px rgba(3, 86, 67, .14); }
/* coloured backing card behind each photo */
.ox-in-media::before { content: ""; position: absolute; z-index: 0; border-radius: 30px; pointer-events: none; }
.ox-in-1 .ox-in-media::before { inset: 26px 26px -26px -26px; background: var(--color-accent-soft); }
.ox-in-2 .ox-in-media::before { inset: 24px -24px -24px 24px; background: #D9F2E2; /* deeper tint of --light */ }
.ox-in-3 .ox-in-media::before { inset: -22px -22px 22px 22px; background: var(--color-accent-soft); }
.ox-in-1 { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; align-items: center; }
.ox-in-1 .ox-frame { --ar: 3 / 2; }
/* desktop: centre the photo + text pair (the yellow backing card sticks out 26px on the left, the text box is 420px wide) */
@media (min-width: 1000px) {
  .ox-in-1 { grid-template-columns: minmax(0, 598fr) minmax(0, 420fr); max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 26px; }
}
.ox-in-2 { grid-column: 1 / span 6; position: relative; left: 10px; margin-top: 15px; } /* nudged 10px in and 15px down */
.ox-in-2 .ox-frame { --ar: 3 / 2; }
.ox-in-3 { grid-column: 8 / span 5; position: relative; left: -10px; margin-top: 15px; } /* 10px in and 15px down; photo top still lines up with the Practise photo */
.ox-in-3 .ox-frame { --ar: 4 / 3; }
.ox-in-2 .ox-in-text, .ox-in-3 .ox-in-text { margin-top: 44px; }
/* Practise / Guidance: the block (box width) is centred under its photo; inside it,
   the icon + heading and the text start from the box's left edge */
.ox-in-2 .ox-in-text, .ox-in-3 .ox-in-text { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; column-gap: 12px; max-width: 420px; margin-left: auto; margin-right: auto; text-align: left; }
.ox-in-2 .ox-in-text > *, .ox-in-3 .ox-in-text > * { flex: 0 0 100%; }
.ox-in-2 .ox-in-text > .ox-in-icon, .ox-in-3 .ox-in-text > .ox-in-icon { flex: 0 0 auto; }
.ox-in-2 .ox-in-text > h4, .ox-in-3 .ox-in-text > h4 { flex: 0 1 auto; margin-top: 0; }
.ox-in-2 .ox-in-text > p, .ox-in-3 .ox-in-text > p { margin-top: 12px; }
.ox-in-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--light); color: var(--secondary); }
.ox-in-icon svg { width: 22px; height: 22px; }
.ox-in h4 { margin-top: 14px; font-family: var(--font-head); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--primary); }
.ox-in p { margin-top: 8px; max-width: 420px; font-size: 15px; line-height: 1.7; color: var(--text); }

/* example conversation under "Speak Up and Share Ideas" */
.ox-chat { display: grid; gap: 10px; max-width: 420px; margin-top: 22px; }
.ox-in .ox-chat-label { margin: 0 0 2px; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--secondary); }
.ox-in .ox-bubble { margin: 0; max-width: 88%; padding: 10px 15px 11px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; }
.ox-bubble b { display: block; margin-bottom: 2px; font-family: var(--font-head); font-weight: 600; font-size: 11.5px; letter-spacing: .02em; }
.ox-bubble.is-teacher { justify-self: start; background: var(--light); color: var(--primary); border-bottom-left-radius: 6px; }
.ox-bubble.is-teacher b { color: var(--secondary); }
.ox-bubble.is-learner { justify-self: end; background: var(--color-accent-soft); color: #3d2f05; border-bottom-right-radius: 6px; }
.ox-bubble.is-learner b { color: #8a6400; }
.js .ox-bubble { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .ox-in-1:not(.is-in) .ox-bubble { opacity: 0; transform: translateY(12px); }
.js .ox-chat .ox-bubble:nth-of-type(2) { transition-delay: .55s; }
.js .ox-chat .ox-bubble:nth-of-type(3) { transition-delay: .9s; }
.js .ox-chat .ox-bubble:nth-of-type(4) { transition-delay: 1.25s; }

/* example practice task under "Practise, Not Just Listen" */
.ox-task, .ox-fb { max-width: 420px; margin-top: 22px; }
.ox-task-card, .ox-fb-card { margin-top: 2px; padding: 16px 18px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(52, 156, 92, .25); box-shadow: 0 10px 24px rgba(3, 86, 67, .07); }
.ox-in .ox-task-head { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 11.5px; letter-spacing: .02em; color: var(--secondary); }
.ox-in .ox-task-q { margin: 8px 0 0; max-width: none; font-size: 15px; line-height: 1.7; color: var(--primary); }
.ox-gap { display: inline-block; min-width: 54px; padding: 0 6px; border-bottom: 2px solid var(--secondary); text-align: center; line-height: 1.35; }
.ox-gap > span { display: inline-block; font-weight: 700; color: var(--primary); transition: opacity .4s ease 1.1s, transform .5s cubic-bezier(.34, 1.56, .64, 1) 1.1s; }
.ox-in .ox-task-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; max-width: none; }
.ox-task-opts span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--light); font-family: var(--font-head); font-weight: 500; font-size: 13px; color: var(--primary); transition: background-color .4s ease .7s, box-shadow .4s ease .7s; }
.ox-task-opts svg { width: 13px; height: 13px; transition: opacity .3s ease 1s, transform .4s cubic-bezier(.34, 1.56, .64, 1) 1s; }
.ox-task-opts .is-picked { background: var(--color-accent-soft); box-shadow: inset 0 0 0 1.5px var(--color-accent); font-weight: 600; }
.js .ox-in-2:not(.is-in) .ox-gap > span { opacity: 0; transform: translateY(6px); }
.js .ox-in-2:not(.is-in) .ox-task-opts .is-picked { background: var(--light); box-shadow: none; }
.js .ox-in-2:not(.is-in) .ox-task-opts svg { opacity: 0; transform: scale(0); }

/* example feedback under "Learn with Guidance" */
.ox-fb-card { display: grid; gap: 12px; }
.ox-fb-card b { display: block; margin-bottom: 3px; font-family: var(--font-head); font-weight: 600; font-size: 11.5px; letter-spacing: .02em; }
.ox-in .ox-fb-line { margin: 0; max-width: none; font-size: 15px; line-height: 1.6; color: var(--primary); }
.ox-fb-line b { color: var(--secondary); }
.ox-fb-line del { position: relative; margin: 0 2px 0 3px; text-decoration: none; color: var(--muted); }
.ox-fb-line del::after { content: ""; position: absolute; left: -1px; right: -1px; top: 54%; height: 2px; border-radius: 2px; background: var(--primary); transform-origin: left; transition: transform .45s ease .8s; }
.ox-fb-line ins { text-decoration: none; padding: 1px 6px; border-radius: 6px; background: var(--color-accent-soft); font-weight: 700; color: var(--primary); transition: opacity .4s ease 1.2s, transform .5s cubic-bezier(.34, 1.56, .64, 1) 1.2s; display: inline-block; }
.ox-in .ox-fb-note { margin: 0; max-width: none; padding: 10px 14px 11px; border-radius: 14px; border-top-left-radius: 4px; background: var(--light); font-size: 14px; line-height: 1.55; color: var(--primary); transition: opacity .5s ease 1.6s, transform .5s var(--ease) 1.6s; }
.ox-fb-note b { color: var(--secondary); }
.js .ox-in-3:not(.is-in) .ox-fb-line del::after { transform: scaleX(0); }
.js .ox-in-3:not(.is-in) .ox-fb-line ins { opacity: 0; transform: translateY(-6px) scale(.9); }
.js .ox-in-3:not(.is-in) .ox-fb-note { opacity: 0; transform: translateY(10px); }

/* ---------- Part D: closing ---------- */
.ox-close { position: relative; overflow: hidden; margin-top: 88px; padding: 50px 40px 52px; border-radius: 32px; text-align: center; background: var(--color-accent-soft); }
.ox-close::before { content: ""; position: absolute; width: 280px; height: 280px; right: -90px; top: -150px; border-radius: 50%; background: rgba(255, 255, 255, .45); pointer-events: none; }
.ox-close::after { content: ""; position: absolute; width: 180px; height: 180px; left: -70px; bottom: -110px; border-radius: 50%; background: rgba(52, 156, 92, .12); pointer-events: none; }
.ox-close-line { position: relative; z-index: 1; font-family: var(--font-head); font-size: 25px; line-height: 1.4; color: var(--primary); }
.ox-close-line > span { display: block; }
.ox-close-line > span:first-child { font-weight: 500; }
.ox-close-line > span + span { font-weight: 700; }
.ox-close .btn { position: relative; z-index: 1; margin-top: 26px; }

/* ---------- tablet ---------- */
@media (max-width: 999px) {
  .ox { padding: 64px 0 68px; }
  .ox-intro { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .ox-lead { max-width: 640px; }
  .ox-collage { max-width: 640px; margin: 0 auto; width: 100%; }
  .ox-journey { margin-top: 64px; padding: 38px 32px 42px; }
  .ox-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .ox-track { display: none; }
  .ox-inside { margin-top: 68px; }
  .ox-in-1 { column-gap: 32px; }
  .ox-in-3 { grid-column: 7 / span 6; margin-top: 15px; }
  .ox-close { margin-top: 68px; }
}

/* ---------- phone: vertical journey ---------- */
@media (max-width: 680px) {
  .ox { padding: 52px 0 56px; }
  .ox-h3 { font-size: 23px; }
  .ox-collage { padding: 0 34px 48px 16px; }
  .ox-main::before { left: -10px; top: -10px; width: 58px; height: 58px; border-top-left-radius: 26px; }
  .ox-side-a { width: 40%; }
  .ox-side-b { width: 30%; top: 26px; }
  .ox-tag { font-size: 11.5px; padding: 6px 11px 6px 8px; }
  .ox-callbar { display: flex; gap: 2px; padding: 8px; }
  .ox-cb { flex: 1 1 0; width: auto; }
  .ox-cb-btn { width: 38px; height: 38px; }
  .ox-cb-text { font-size: 10.5px; }
  .ox-tag-live { left: 12px; top: 12px; }
  .ox-side-b .ox-tag { right: 0; }
  .ox-journey { margin-top: 52px; padding: 32px 18px 34px; border-radius: 24px; }
  .ox-steps-wrap { margin-top: 24px; }
  .ox-steps { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .ox-step { padding: 10px 10px 20px; border-radius: 20px; }
  .ox-mark { left: 18px; height: 32px; top: -16px; padding: 0 13px; font-size: 13px; }
  .ox-step-title { margin-top: 16px; }
  .ox-step-img { --ar: 16 / 9; }
  .ox-in .ox-frame { --ar: 16 / 10; }
  .ox-side .ox-ph > svg { display: none; }
  .ox-side .ox-ph-label { font-size: 10px; left: 8px; right: 8px; top: 8px; }
  .ox-main .ox-ph-label { max-width: 46%; font-size: 10.5px; }
  .ox-inside { margin-top: 56px; }
  .ox-in-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; margin-top: 24px; }
  .ox-in-1 { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .ox-in-1, .ox-in-2, .ox-in-3 { grid-column: 1 / -1; left: 0; }
  .ox-in-2, .ox-in-3 { margin-top: 0; }
  .ox-in-media .ox-frame { box-shadow: 0 0 0 6px #fff, 0 14px 28px rgba(3, 86, 67, .14); }
  .ox-in-1 .ox-in-media::before { inset: 14px 14px -14px -10px; }
  .ox-in-2 .ox-in-media::before { inset: 14px -10px -14px 14px; }
  .ox-in-3 .ox-in-media::before { inset: -14px -10px 14px 14px; }
  .ox-in-1 .ox-in-text { margin-top: 18px; }
  .ox-in-2 .ox-in-text, .ox-in-3 .ox-in-text { margin-top: 30px; }
  .ox-in-3 { margin-top: 10px; }
  .ox-in h4 { font-size: 18px; }
  .ox-close { margin-top: 56px; padding: 38px 22px 40px; border-radius: 24px; }
  .ox-close-line { font-size: 20px; }
  .ox-close .btn { width: 100%; max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .ox-frame > img, .ox-ph { transition: none; }
  .ox-frame:hover > img, .ox-frame:hover > .ox-ph { transform: none; }
  .js .ox-track .ox-track-line, .js .ox-track:not(.is-in) .ox-track-line { transition: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 680px) {
  .js .ox-step:not(:last-child)::after, .js .ox-step:not(:last-child):not(.is-in)::after { transition: none; transform: none; }
}

/* =========================================================
   "Practise, Not Just Listen" + "Learn with Guidance":
   arrival on scroll, in order
   1 tinted backing card  2 photo wipes open, image settles
   3 icon pops  4 heading, text, label  5 example card
   6 the example plays (word fills in / correction appears)
   ========================================================= */
.js .ox-in-2[data-reveal], .js .ox-in-3[data-reveal] { opacity: 1; transform: none; } /* the parts arrive one by one instead */
.ox-in-3 { --ox-lag: .25s; } /* the right-hand block follows a beat later */
.ox-in-2 { --ox-lag: 0s; }

.ox-in-2.is-in .ox-in-media::before, .ox-in-3.is-in .ox-in-media::before { animation: oxBackIn .9s var(--ease) calc(.05s + var(--ox-lag)) backwards; }
.ox-in-2.is-in .ox-frame { animation: oxWipeLeft 1.1s cubic-bezier(.77, 0, .18, 1) calc(.2s + var(--ox-lag)) backwards; }
.ox-in-3.is-in .ox-frame { animation: oxWipeRight 1.1s cubic-bezier(.77, 0, .18, 1) calc(.2s + var(--ox-lag)) backwards; }
.ox-in-2.is-in .ox-frame > img, .ox-in-3.is-in .ox-frame > img { animation: oxSettle 1.5s cubic-bezier(.22, 1, .36, 1) calc(.2s + var(--ox-lag)) backwards; }
.ox-in-2.is-in .ox-in-icon, .ox-in-3.is-in .ox-in-icon { animation: oxPop .7s cubic-bezier(.34, 1.56, .64, 1) calc(.85s + var(--ox-lag)) backwards; }
.ox-in-2.is-in .ox-in-text > h4, .ox-in-3.is-in .ox-in-text > h4 { animation: oxUp .7s var(--ease) calc(.95s + var(--ox-lag)) backwards; }
.ox-in-2.is-in .ox-in-text > p, .ox-in-3.is-in .ox-in-text > p { animation: oxUp .7s var(--ease) calc(1.05s + var(--ox-lag)) backwards; }
.ox-in-2.is-in .ox-chat-label, .ox-in-3.is-in .ox-chat-label { animation: oxUp .6s var(--ease) calc(1.15s + var(--ox-lag)) backwards; }
.ox-in-2.is-in .ox-task-card, .ox-in-3.is-in .ox-fb-card { animation: oxCard .8s cubic-bezier(.22, 1, .36, 1) calc(1.22s + var(--ox-lag)) backwards; }

/* hidden until the block is reached */
.js .ox-in-2:not(.is-in) .ox-frame { clip-path: inset(-70px 100% -70px -70px); }
.js .ox-in-3:not(.is-in) .ox-frame { clip-path: inset(-70px -70px -70px 100%); }
.js .ox-in-2:not(.is-in) .ox-in-media::before, .js .ox-in-3:not(.is-in) .ox-in-media::before,
.js .ox-in-2:not(.is-in) .ox-in-icon, .js .ox-in-3:not(.is-in) .ox-in-icon,
.js .ox-in-2:not(.is-in) .ox-in-text > h4, .js .ox-in-3:not(.is-in) .ox-in-text > h4,
.js .ox-in-2:not(.is-in) .ox-in-text > p, .js .ox-in-3:not(.is-in) .ox-in-text > p,
.js .ox-in-2:not(.is-in) .ox-chat-label, .js .ox-in-3:not(.is-in) .ox-chat-label,
.js .ox-in-2:not(.is-in) .ox-task-card, .js .ox-in-3:not(.is-in) .ox-fb-card { opacity: 0; }

/* the example plays after its card has landed */
.ox-gap > span { transition-delay: 2.2s; }
.ox-task-opts span { transition-delay: 1.9s; }
.ox-task-opts svg { transition-delay: 2.3s; }
.ox-fb-line del::after { transition-delay: 2.2s; }
.ox-fb-line ins { transition-delay: 2.55s; }
.ox-in .ox-fb-note { transition-delay: 2.95s; }

@keyframes oxBackIn { from { opacity: 0; transform: translate(-18px, 18px) scale(.94); } }
@keyframes oxWipeLeft { from { clip-path: inset(-70px 100% -70px -70px); } to { clip-path: inset(-70px -70px -70px -70px); } }
@keyframes oxWipeRight { from { clip-path: inset(-70px -70px -70px 100%); } to { clip-path: inset(-70px -70px -70px -70px); } }
@keyframes oxSettle { from { transform: scale(1.18); } }
@keyframes oxPop { from { opacity: 0; transform: scale(.4) rotate(-18deg); } }
@keyframes oxUp { from { opacity: 0; transform: translateY(18px); } }
@keyframes oxCard { from { opacity: 0; transform: translateY(26px) scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .ox-in-2.is-in *, .ox-in-3.is-in *, .ox-in-2.is-in .ox-in-media::before, .ox-in-3.is-in .ox-in-media::before { animation: none !important; }
  .js .ox-in-2:not(.is-in) .ox-frame, .js .ox-in-3:not(.is-in) .ox-frame { clip-path: none; }
  .js .ox-in-2:not(.is-in) *, .js .ox-in-3:not(.is-in) .ox-in-media::before, .js .ox-in-2:not(.is-in) .ox-in-media::before { opacity: 1 !important; }
}

/* "Speak Up and Share Ideas": photo wipes open from the left, then the icon pops
   and the heading and text wipe in the same way, then the example chat plays */
.js .ox-in-1[data-reveal] { opacity: 1; transform: none; }
.ox-in-1 { --ox-lag: 0s; }
.ox-in-1.is-in .ox-in-media::before { animation: oxBackIn .9s var(--ease) .05s backwards; }
.ox-in-1.is-in .ox-frame { animation: oxWipeLeft 1.1s cubic-bezier(.77, 0, .18, 1) .2s backwards; }
.ox-in-1.is-in .ox-frame > img { animation: oxSettle 1.5s cubic-bezier(.22, 1, .36, 1) .2s backwards; }
.ox-in-1.is-in .ox-in-icon { animation: oxPop .7s cubic-bezier(.34, 1.56, .64, 1) .7s backwards; }
.ox-in-1.is-in .ox-in-text > h4 { animation: oxTextWipe .9s cubic-bezier(.77, 0, .18, 1) .85s backwards; }
.ox-in-1.is-in .ox-in-text > p { animation: oxTextWipe .9s cubic-bezier(.77, 0, .18, 1) 1s backwards; }
.ox-in-1.is-in .ox-chat-label { animation: oxUp .6s var(--ease) 1.3s backwards; }
.js .ox-in-1:not(.is-in) .ox-frame { clip-path: inset(-70px 100% -70px -70px); }
.js .ox-in-1:not(.is-in) .ox-in-media::before, .js .ox-in-1:not(.is-in) .ox-in-icon,
.js .ox-in-1:not(.is-in) .ox-in-text > h4, .js .ox-in-1:not(.is-in) .ox-in-text > p, .js .ox-in-1:not(.is-in) .ox-chat-label { opacity: 0; }
.js .ox-chat .ox-bubble:nth-of-type(2) { transition-delay: 1.5s; }
.js .ox-chat .ox-bubble:nth-of-type(3) { transition-delay: 1.85s; }
.js .ox-chat .ox-bubble:nth-of-type(4) { transition-delay: 2.2s; }
@keyframes oxTextWipe { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-12px); } 30% { opacity: 1; } to { clip-path: inset(0 0 0 0); transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ox-in-1.is-in *, .ox-in-1.is-in .ox-in-media::before { animation: none !important; }
  .js .ox-in-1:not(.is-in) .ox-frame { clip-path: none; }
  .js .ox-in-1:not(.is-in) * , .js .ox-in-1:not(.is-in) .ox-in-media::before { opacity: 1 !important; }
}