/* HP try-it "stage" ([tryit_modal mode="stage"]). The live quiz in the hero: one card, no drawer, no button.
   Motion: opacity, transform and clip-path only, so nothing can move the layout.
   Colours and type follow the brand: ink #0f172a, periwinkle #7d92ff (ink labels on fills), SIR Poppins. */
.tryit-stage{--ink:#0f172a;--line:#e2e0d8;--blue:#7d92ff;--muted:#475569;max-width:720px;margin:28px auto 0;text-align:left}

/* ── the instruction line ─────────────────────────────────────── */
.tryit-stage__line{margin:0 0 16px;text-align:center;font:500 17px/1.7 "SIR Poppins","Poppins",system-ui,sans-serif;color:#334155}
.tryit-stage__synopsis{display:block;color:var(--muted)}
.tryit-stage__synopsis b{color:var(--ink);font-weight:600}
.tryit-stage__act{display:block;color:var(--ink);font-weight:600}           /* the instruction gets its own row: never split mid-phrase */
.tryit-stage__missing{position:relative;display:inline-block;white-space:normal}
.tryit-stage__missing[hidden],.tryit-stage__plain[hidden]{display:none}
.tryit-stage b.tryit-stage__n{font-weight:600;color:var(--ink)}
.tryit-stage__pill{display:inline-flex;align-items:center;gap:7px;margin:0 2px;padding:1px 12px 1px 14px;min-height:32px;border:1.5px solid var(--blue);border-radius:999px;background:#fff;color:var(--ink);font-family:inherit;font-weight:600;font-size:inherit;line-height:1.4;cursor:pointer;vertical-align:baseline;position:relative;touch-action:manipulation}
.tryit-stage__pill::after{content:"";position:absolute;inset:-6px -4px}               /* 44px touch target without a taller pill */
/* the theme restyles button hover/focus (white text); pin the colours so the label can never disappear */
.tryit-stage .tryit-stage__pill,.tryit-stage .tryit-stage__pill:focus,.tryit-stage .tryit-stage__pill:active{color:var(--ink)!important;background:#fff!important;box-shadow:none}
.tryit-stage .tryit-stage__pill:hover,.tryit-stage .tryit-stage__pill[aria-expanded="true"]{color:var(--ink)!important;background:#eef1ff!important}
.tryit-stage__pill:focus-visible,.tryit-stage__menu [role="option"]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tryit-stage__caret{flex:none;transition:transform .18s ease}
.tryit-stage__pill[aria-expanded="true"] .tryit-stage__caret{transform:rotate(180deg)}

/* menu: a popover under the pill on every screen size. A bottom sheet would sit under the cookie banner (Complianz, z-index 99999);
   tryit-stage.js centres it on the pill and keeps it 12px inside the screen edges. */
.tryit-stage__menu[hidden]{display:none}
@keyframes tryit-menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tryit-stage__menu:not([hidden]){animation:tryit-menu-in .3s cubic-bezier(.22,.8,.2,1) both}
.tryit-stage__menu{display:block;position:absolute;z-index:30;top:calc(100% + 8px);left:0;min-width:250px;max-width:calc(100vw - 24px);margin:0;padding:6px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 45px -14px rgba(15,23,42,.28);text-align:left}
.tryit-stage__menu [role="option"]{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:44px;padding:8px 14px;border-radius:11px;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer}
.tryit-stage__menu [role="option"]:hover,.tryit-stage__menu [role="option"]:focus{background:rgba(125,146,255,.14);outline:0}
.tryit-stage__menu [role="option"][aria-selected="true"]{font-weight:600}
.tryit-stage__menu [role="option"][aria-selected="true"] .tryit-stage__opt-n::after{content:" \2713";color:var(--blue)}
.tryit-stage__opt-name{color:var(--muted);font-weight:400}
.tryit-stage__menu.is-stale .tryit-stage__opt-n{display:none}                      /* a count we can't vouch for is never shown */
.tryit-stage__menu.is-stale [role="option"]{justify-content:flex-start}
.tryit-stage__note{display:block;padding:8px 14px 6px;font-size:13px;line-height:1.4;color:#b45309;cursor:default}
.tryit-stage__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── the card ─────────────────────────────────────────────────── */
.tryit-stage__card{position:relative}
.tryit-stage .tryit-quiz-slot{background:#fff!important;border:1px solid var(--line)!important;border-radius:22px!important;box-shadow:0 18px 45px -18px rgba(15,23,42,.18)!important;padding:22px 22px 18px!important}
.tryit-stage #sir-customize-btn{border-radius:999px!important;border:1px solid #cbd5e1!important;min-height:44px;padding:0 16px!important;color:var(--ink)!important;font-weight:500!important;background:#fff!important}
/* the quiz inside the card: no second box, no breakout, no drawer behaviour */
.tryit-stage #tryit-inline{width:auto!important;max-width:none!important;left:auto!important;right:auto!important;margin:0!important;position:static!important;text-align:left}
.tryit-stage .tryit-inline__drawer{display:block!important;max-height:none!important;opacity:1!important;transform:none!important;transition:none!important;overflow:visible!important}
.tryit-stage #tryit-experience{padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important}
.tryit-stage #tryit-experience .quizShortcode,.tryit-stage #tryit-experience .tw-bs4{background:none!important;border:0!important;box-shadow:none!important}

/* first-time visitors: less to read, nothing that discourages.
   (The "85%" button FR1 could not read is now "Slow down" / "85% speed" everywhere: speed-button.css + front.js + try-it.js.) */
.tryit-stage .irl-vote-totals{display:none!important}                              /* "9 learners said this felt hard" is not proof for a cold visitor */
.tryit-stage .quiz-action-btn--clear{display:none!important}                       /* Clear wraps on phones and a first-timer has nothing to clear */

/* ── one entrance ─────────────────────────────────────────────── */
.tryit-stage[data-armed]:not(.in) .tryit-stage__card{opacity:0;transform:translateY(18px)}
.tryit-stage[data-armed] .tryit-stage__card{transition:opacity .9s cubic-bezier(.22,.8,.2,1),transform .9s cubic-bezier(.22,.8,.2,1)}
.tryit-stage.in .tryit-stage__card{opacity:1;transform:none}
@keyframes lp-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.tryit-stage.in[data-armed] #quiz-form-id input.single_input{animation:lp-draw .8s cubic-bezier(.22,.8,.2,1) both;animation-delay:calc(var(--i,0) * 80ms + 350ms)}

/* ── one nudge: a single soft ring on Listen and Capture ─────── */
@keyframes lp-ring{0%{box-shadow:0 0 0 0 rgba(125,146,255,.60)}100%{box-shadow:0 0 0 16px rgba(125,146,255,0)}}
.tryit-stage #start-quiz-button.is-nudge{animation:lp-ring 1.1s ease-out 1}

/* ── reduced motion: final state at once; the nudge becomes a still ring until first use ── */
@media (prefers-reduced-motion:reduce){
  .tryit-stage[data-armed]:not(.in) .tryit-stage__card{opacity:1;transform:none}
  .tryit-stage[data-armed] .tryit-stage__card{transition:none}
  .tryit-stage.in[data-armed] #quiz-form-id input.single_input{animation:none}
  .tryit-stage #start-quiz-button.is-nudge{animation:none}
  .tryit-stage:not(.is-used) #start-quiz-button{box-shadow:0 0 0 4px rgba(125,146,255,.35)!important}
  .tryit-stage__caret{transition:none}
  .tryit-stage__menu:not([hidden]){animation:none}
}
/* While the retail mobile bar is showing, the desktop player above the transcript is a duplicate: hide it, so the transcript
   starts right under the buttons (it used to leave a 76px invisible spacer, about 140px of gap with its margins). */
body:has(#cefr-mobile-bar.is-visible) .tryit-stage .sir-audio-player-wrap{display:none!important}
/* The bar already has Hint and Slow down; the card's own copies are duplicates (and cost a row). Show stays in the card. */
body:has(#cefr-mobile-bar.is-visible) .tryit-stage .quiz-action-btn--hint,
body:has(#cefr-mobile-bar.is-visible) .tryit-stage .quiz-action-btn--slow{display:none!important}
@media (max-width:767px){
  /* App-like width: cancel the stacked page gutters (theme padding + the homepage block's 16px = about 48px a side) and keep 8px. */
  .tryit-stage{max-width:none;width:100vw;margin:20px calc(50% - 50vw) 0;padding:0 8px;box-sizing:border-box}
  .tryit-stage__line{padding:0 8px}
  .tryit-stage__line{font-size:16px}
  .tryit-stage .tryit-quiz-slot{padding:16px 0 14px!important;border-radius:16px!important} /* .tw-bs4 inside supplies the 14px gutters */
  .tryit-stage__menu [role="option"]{min-height:48px;font-size:16px}
}

/* Try again: the theme turns every button into a dark blue fill with a shadow on hover/focus/press. Pin it: quiet link, periwinkle highlight. */
.tryit-stage .tryit-btn-link.tryit-btn-retry,.tryit-stage .tryit-btn-link.tryit-btn-retry:hover,.tryit-stage .tryit-btn-link.tryit-btn-retry:focus,.tryit-stage .tryit-btn-link.tryit-btn-retry:active{display:block;min-height:44px;margin:20px auto 0;padding:0 18px;background:transparent!important;border:0!important;border-radius:999px!important;box-shadow:none!important;color:#475569!important;font:500 14px/1.2 "SIR Poppins","Poppins",system-ui,sans-serif;text-decoration:underline}
.tryit-stage .tryit-btn-link.tryit-btn-retry:hover,.tryit-stage .tryit-btn-link.tryit-btn-retry:focus-visible,.tryit-stage .tryit-btn-link.tryit-btn-retry:active{background:rgba(125,146,255,.18)!important;color:#0f172a!important;text-decoration:none}