/* "What it means": the translation panel on every try-it surface (hero stage, try-it modals, /try-it/).
   Opens ABOVE the completion block; the link in the block scrolls back up to it. Fade only: height never animates, so nothing shifts. */
.tryit-translation{--ink:#0f172a;--line:#e2e0d8}
.tryit-translation[hidden]{display:none}
.tryit-translation{margin:24px 0 24px;padding:22px 24px;background:#f7f8fc;border:1px solid var(--line);border-radius:16px;text-align:left;opacity:0;transition:opacity .8s cubic-bezier(.22,.8,.2,1);scroll-margin-top:12px}
.tryit-translation.is-in{opacity:1}
.tryit-translation__h{margin-bottom:18px!important}
.tryit-translation__col h4{margin-bottom:8px!important}
.tryit-translation__h,.tryit-translation__col h4{margin:0 0 12px;font:600 12px/1.3 "SIR Poppins","Poppins",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.tryit-translation p{margin:0;font:400 16px/1.7 "SIR Poppins","Poppins",system-ui,sans-serif;color:var(--ink)}
.tryit-translation__t{color:#334155}
.tryit-translation__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.tryit-translation__row{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:10px 0}
.tryit-translation__row:first-child{padding-top:0}
.tryit-translation__row:last-child{padding-bottom:0}
/* the link: the theme turns every button into a dark blue fill on hover/focus/press, so pin the colours (periwinkle, ink text) */
.tryit-completion .tryit-stage__see-meaning[hidden]{display:none}
.tryit-completion .tryit-stage__see-meaning,.tryit-completion .tryit-stage__see-meaning:focus,.tryit-completion .tryit-stage__see-meaning:active{display:flex;align-items:center;justify-content:center;gap:6px;width:fit-content;min-height:44px;margin:4px auto 20px;padding:0 18px;background:#fff!important;border:1.5px solid #7d92ff!important;border-radius:999px!important;box-shadow:none!important;color:#0f172a!important;font:600 14px/1.2 "SIR Poppins","Poppins",system-ui,sans-serif;text-decoration:none;cursor:pointer}
.tryit-completion .tryit-stage__see-meaning:hover{background:#eef1ff!important;color:#0f172a!important}
@keyframes tryit-fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tryit-completion .tryit-stage__see-meaning:not([hidden]){animation:tryit-fade-up .8s cubic-bezier(.22,.8,.2,1) .15s both}
.tryit-completion .tryit-stage__see-meaning:focus-visible{outline:2px solid #7d92ff;outline-offset:3px}
@media (max-width:767px){
  .tryit-translation{margin:20px 0 20px;padding:20px}
  .tryit-translation__grid,.tryit-translation__row{grid-template-columns:1fr;gap:16px}
}
@media (prefers-reduced-motion:reduce){.tryit-translation{transition:none}.tryit-completion .tryit-stage__see-meaning:not([hidden]){animation:none}}
