/* ---------------- Front page (6 Oct 2026) ---------------- */
html.home, html.home body { overflow-x: clip; }

/* who it is for: a quiet gold menu under the black bar */
.aud {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  padding: 0.75rem 1.6rem 0;
  font: 500 0.86rem/1 Arial, "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 83;   /* stays sharp above the soft veil, so you can move between panels */
}
.aud a {
  position: relative;
  color: #8a6a1c;
  text-decoration: none;
  padding: 0.45rem 0.85rem;
  border-left: 1px solid rgba(228, 195, 106, 0.7);
  transition: color 0.2s ease;
}
.aud a:first-child { border-left: 0; }
.aud a:hover, .aud a:focus-visible { color: #111; }
.aud a:focus-visible { outline: 2px solid #e4c36a; outline-offset: 2px; border-radius: 4px; }
.aud a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.2rem;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #e4c36a;
  box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(228, 195, 106, 0.9);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.aud a.on { color: #111; }
.aud a.on::after { opacity: 1; transform: scale(1); }

main { padding-top: 3.2rem; }

/* The title stays on one line. The column is narrow, so the size comes down until it fits. */
html.home main > h1 {
  white-space: nowrap;
  font-size: clamp(1.35rem, 4.15vw, 2.85rem);
  letter-spacing: -0.03em;
}

/* the pictures: a smaller painted middle with the real world either side */
.vista {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(112rem, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem) minmax(0, 1fr);
  align-items: center;
  margin-top: 0.8rem;
}
.stage, .reel {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 0;
  height: auto !important;
}
.vista .stage { grid-column: 2; grid-row: 1; z-index: 2; }
.reel { grid-row: 1; z-index: 3; pointer-events: none; }   /* above the middle so the soft edges melt into it */
.reel-left  { grid-column: 1; margin-right: -3.5rem; transform: translateY(-1.6rem); }
.reel-right { grid-column: 3; margin-left: -3.5rem;  transform: translateY(1.8rem); }
.stage img, .reel img,
.stage img.on, .stage img:not(.on) {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.6s ease-in-out, transform 6s ease-out;
  will-change: opacity;
}
.stage img.on, .reel img.on { opacity: 1; transform: scale(1.035); }

/* the short line under the pictures */
.intro { max-width: 46rem; margin: 1.4rem auto 0; }
.intro .lead { max-width: 34rem; }
.kicker {
  font: 600 0.72rem/1.2 Arial, "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a6a1c;
  margin: 0 0 0.9rem;
}
.lead { font-size: 0.95rem; line-height: 1.75; color: #3a3a3a; margin: 0 auto; }
.glow {
  color: #111;
  font-weight: 600;
  text-shadow: 0 0 0.5em rgba(228, 195, 106, 0.75), 0 0 1.3em rgba(228, 195, 106, 0.35);
  animation: glow 4.8s ease-in-out infinite alternate;
}
@keyframes glow {
  from { text-shadow: 0 0 0.35em rgba(228, 195, 106, 0.55), 0 0 0.9em rgba(228, 195, 106, 0.2); }
  to   { text-shadow: 0 0 0.6em rgba(228, 195, 106, 0.95), 0 0 1.6em rgba(228, 195, 106, 0.45); }
}
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.3rem; }
.pills a {
  font: 600 0.8rem/1 Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #111;
  text-decoration: none;
  padding: 0.65rem 1rem;
  min-height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  border: 1px solid #e4c36a;
  border-radius: 999px;
  background: #fff;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.pills a:hover, .pills a:focus-visible { background: #e4c36a; box-shadow: 0 4px 14px rgba(228, 195, 106, 0.35); outline: none; }

.demo [hidden] { display: none !important; }
/* (8 Oct 2026) Free demo: a gold button at the end of the pills with a menu of things to try with no sign-up */
.pills a.on { background: #e4c36a; }
.demo { position: relative; display: inline-flex; }
.demo-btn { font: 700 0.8rem/1 Arial, "Helvetica Neue", Helvetica, sans-serif; min-height: 2.5rem; padding: 0.65rem 1.1rem; border-radius: 999px; border: 1px solid #111; background: #111; color: #e4c36a; cursor: pointer; display: inline-flex; gap: 0.45rem; align-items: center; box-shadow: 0 4px 14px rgba(228, 195, 106, 0.3); transition: background 0.15s, color 0.15s; }
.demo-btn i { font-style: normal; transition: transform 0.2s; }
.demo-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.demo-btn:hover, .demo-btn:focus-visible { background: #e4c36a; color: #111; outline: none; }
.demo-menu { position: absolute; top: calc(100% + 0.55rem); right: 0; z-index: 40; width: min(22rem, calc(100vw - 2rem)); display: block; text-align: left; background: #fff; border: 1px solid #e4c36a; border-radius: 16px; box-shadow: 0 18px 48px rgba(12, 12, 14, 0.18); padding: 0.55rem; animation: demoIn 0.16s ease-out; }
.demo-menu::before { content: ''; position: absolute; top: -7px; right: 2rem; width: 12px; height: 12px; background: #fff; border-left: 1px solid #e4c36a; border-top: 1px solid #e4c36a; transform: rotate(45deg); }
@keyframes demoIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.demo-head { display: block; padding: 0.35rem 0.6rem 0.5rem; font: 700 0.7rem/1.2 Arial, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #9a7a1e; }
.demo-list { display: flex; flex-direction: column; gap: 0.2rem; }
.demo-item { position: relative; display: flex; gap: 0.7rem; align-items: center; width: 100%; padding: 0.65rem 0.7rem; border: 0; border-radius: 12px; background: transparent; cursor: pointer; text-align: left; font: inherit; color: #111; }
.demo-item:hover, .demo-item:focus-visible { background: #fff5d6; outline: none; }
.demo-item .ic { flex: 0 0 2.2rem; height: 2.2rem; border-radius: 10px; display: grid; place-items: center; background: #111; color: #e4c36a; font-size: 1.1rem; }
.demo-item b { display: block; font: 700 0.92rem/1.2 Arial, sans-serif; }
.demo-item small { display: block; margin-top: 0.15rem; font-size: 0.76rem; color: #7a6a3a; }
/* the callout: what each one is, beside the menu on a wide screen */
.demo-call { position: absolute; top: 50%; right: calc(100% + 0.9rem); width: 15rem; transform: translateY(-50%) translateX(6px); padding: 0.7rem 0.85rem; border-radius: 12px; background: #0c0c0e; color: #f7f4ec; font: 400 0.8rem/1.45 Arial, sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; }
.demo-call::after { content: ''; position: absolute; top: 50%; right: -6px; width: 12px; height: 12px; margin-top: -6px; background: #0c0c0e; transform: rotate(45deg); }
.demo-item:hover .demo-call, .demo-item:focus-visible .demo-call { opacity: 1; transform: translateY(-50%); }
.demo-form { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.4rem 0.6rem 0.6rem; }
.demo-picked { font: 700 0.95rem/1.2 Arial, sans-serif; }
.demo-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: #555; }
.demo-form input { font-size: 1rem; padding: 0.55rem 0.75rem; border: 1px solid #bbb; border-radius: 10px; }
.demo-row { display: flex; gap: 0.5rem; justify-content: flex-end; }
.demo-row button { padding: 0.55rem 1.2rem; border-radius: 999px; font-weight: 700; cursor: pointer; border: 1px solid #111; }
.demo-row button[type=submit] { background: #111; color: #e4c36a; }
.demo-back { background: #fff; color: #111; }
.demo-form small { font-size: 0.76rem; color: #666; line-height: 1.4; }
.demo-err { color: #9b1c1c; font-weight: 700; font-size: 0.82rem; }
@media (max-width: 900px) {
  /* phones and tablets: the button gets its own row, the menu sits centred under it, and each item's
     description sits under its name (no hover on a touch screen) */
  .demo { flex-basis: 100%; justify-content: center; margin-top: 0.2rem; }
  .demo-btn { min-height: 2.9rem; padding: 0.7rem 1.6rem; font-size: 0.9rem; }
  .demo-menu { left: 50%; right: auto; width: min(24rem, calc(100vw - 2rem)); transform: translateX(-50%); animation: none; }
  .demo-menu::before { left: 50%; right: auto; margin-left: -6px; }
  .demo-item { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 0.7rem; row-gap: 0.25rem; align-items: center; }
  .demo-item > span:nth-child(2) { min-width: 0; }
  .demo-call { position: static; grid-column: 2; display: block; width: auto; margin: 0; transform: none; opacity: 1; padding: 0; background: none; color: #555; box-shadow: none; font-size: 0.78rem; line-height: 1.4; }
  .demo-call::after { display: none; }
  .demo-item:hover .demo-call, .demo-item:focus-visible .demo-call { transform: none; }
  .demo-form input { font-size: 16px; }   /* 16px stops iPhones zooming in when the box is tapped */
}

/* the footer: black and gold like the bar at the top */
footer.foot {
  width: auto;
  margin: 4.5rem 0 0;
  padding: 0;
  text-align: left;
  background: #0c0c0e;
  color: #f7f4ec;
  font: 0.9rem/1.6 Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.foot-in {
  width: min(64rem, calc(100% - 3rem));
  margin: 0 auto;
  padding: 3rem 0 2rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
}
.foot a { color: #f7f4ec; text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: #e4c36a; }
.foot-col { display: flex; flex-direction: column; gap: 0.35rem; }
.foot-head, .foot-name { margin: 0 0 0.4rem !important; color: #e4c36a; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; }
.foot-name { letter-spacing: 0.06em; font-size: 0.95rem; text-transform: none; }
.foot-line { color: #b7b1a4; margin: 0 0 0.6rem !important; max-width: 20rem; }
.foot-brand p { margin: 0; }
.foot-base { margin: 0 !important; padding: 1rem 1.5rem 1.4rem; text-align: center; color: #b7b1a4; font-size: 0.78rem; border-top: 1px solid rgba(228, 195, 106, 0.25); }

/* ---------------- the information panel, like the cards inside the world ---------------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.veil.on { opacity: 1; }
.tether {
  position: fixed;
  z-index: 82;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(#e4c36a, #fff 45%, #e4c36a);
  box-shadow: 0 0 6px rgba(228, 195, 106, 0.8);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.3s ease 0.05s;
  pointer-events: none;
}
.tether.on { transform: scaleY(1); }
.panel-card {
  position: fixed;
  z-index: 84;   /* above the menu, which sits above the veil */
  /* Full height of the window, on the right, from just under the black bar to just
     above the bottom edge. front.js tightens `top` to the real bar. It used to
     start under the button that opened it, which left a short card at the bottom
     of the screen with the rest cut off. */
  top: 8.5rem;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(44rem, calc(46vw - 1rem));
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  background: #fff;
  color: #1a1a1a;
  border: 2px solid #e4c36a;
  border-radius: 16px;
  padding: 1.5rem 1.7rem 1.3rem;
  font: 17px/1.6 Arial, "Helvetica Neue", Helvetica, sans-serif;
  text-align: left;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(228, 195, 106, 0.2);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.panel-card.on { opacity: 1; transform: none; }
/* 9 Oct 2026: a panel that overflows its own max-height (every panel on a short window, and most
   on a phone) scrolls fine, but there was nothing to show a pupil that scrolling would reveal more -
   the last visible line simply looked like the end of the page. This sticks a soft fade to the
   bottom of the card's own scroll area (like .panel-x already sticks its close button to the top)
   for as long as there is more below, and scrolls away on its own once the true end is reached.
   10 Oct 2026 fix: the fade used to sit on top of .panel-body's own last line of content, because
   nothing reserved it any space of its own - on every panel whose last line is the "Create your
   account"/pricing button, that button sat right in the fade and looked cut off or feathery, even
   once fully in view. Giving .panel-body genuine blank room at its foot means the fade now covers
   only that blank space, never real text or a button, and still releases once truly scrolled to the end. */
.panel-body { padding-bottom: 2.4rem; }
.panel-card::after {
  content: "";
  display: block;
  position: sticky;
  bottom: -1px;
  height: 2.4rem;
  margin: -2.4rem 0 -1px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%);
  pointer-events: none;
}
.panel-x {
  position: sticky;
  top: 0;
  float: right;
  margin: -0.4rem -0.6rem 0 0.6rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 10px;
  background: #e4c36a;
  color: #1a1a1a;
  font: 700 1.3rem/1 Arial, sans-serif;
  cursor: pointer;
  z-index: 2;
}
.panel-x:hover { background: #d4b55a; }
.panel-x:focus-visible, .panel-card a:focus-visible, .panel-card .btn:focus-visible, .panel-card input:focus-visible, .panel-card select:focus-visible, .panel-card textarea:focus-visible { outline: 3px solid #e4c36a; outline-offset: 2px; }
.panel-card .eb {
  font: 600 10px/1.2 Arial, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8a6a1c;
  margin: 0 0 8px;
}
.panel-card h2 {
  font: 700 32px/1.15 Arial, sans-serif;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  margin: 0 0 8px;
  padding-right: 3rem;
  text-align: left;
}
.panel-card .hook { font-style: italic; color: #555; font-size: 16px; margin: 0 0 12px; line-height: 1.45; }
.panel-card h3 {
  font: 700 11px/1.2 Arial, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8a6a1c;
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e4c36a;
}
.panel-card p { margin: 8px 0; }
.panel-card ul { margin: 0; padding-left: 0; list-style: none; }
.panel-card li { position: relative; margin: 7px 0; padding-left: 1.2rem; line-height: 1.5; }
.panel-card li::before { content: ""; position: absolute; left: 0.15rem; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: #e4c36a; }
.panel-card b { font-weight: 700; color: #111; background: linear-gradient(transparent 62%, rgba(228, 195, 106, 0.35) 62%); }
.panel-card a { color: #1a1a1a; text-decoration-color: #e4c36a; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.panel-card .close-line { font-style: italic; color: #6b5a2c; }
/* (9 Oct 2026, Phase 6) the About panel's "learning as an adventure" rationale: set apart as a
   bubble, not another plain paragraph, in the same gold/black house style as everything else here. */
.panel-card .rationale { background: rgba(228, 195, 106, 0.12); border: 1px solid #e4c36a; border-left: 4px solid #e4c36a; border-radius: 10px; padding: 0.9rem 1.1rem; margin: 16px 0; }
.panel-card .rationale p { margin: 0; font-style: italic; color: #3a3a3a; font-size: 15px; line-height: 1.6; }
.panel-card .small { font-size: 13px; color: #666; }
.panel-card .act { margin-top: 18px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  font: 600 13px Arial, sans-serif;
  color: #1a1a1a !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, #e4c36a, #d4b55a);
  border: 1px solid #e4c36a;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(228, 195, 106, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(228, 195, 106, 0.45); }
.btn.ghost { background: #fff; box-shadow: none; }
.btn.ghost:hover { background: #e4c36a; }
.btn:disabled { opacity: 0.6; cursor: wait; transform: none; }

.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 12px; text-align: center; }
.founder img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 8px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e4c36a; }
.founder p { margin: 2px 0 !important; }
.f-name { font-weight: 700; color: #111; }
.f-role { color: #666; font-size: 14px; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem; margin: 16px 0 6px; }
.plan {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(228, 195, 106, 0.7);
  border-radius: 12px;
  padding: 1rem 1.05rem 1.1rem;
  background: linear-gradient(160deg, rgba(228, 195, 106, 0.1), rgba(228, 195, 106, 0.02) 55%);
}
.plan-aud { font: 600 10px/1.2 Arial, sans-serif !important; letter-spacing: 0.15em; text-transform: uppercase; color: #8a6a1c; margin: 0 0 4px !important; }
.plan-name { margin: 0 0 6px; font: 700 18px/1.2 Arial, sans-serif; color: #111; }
.plan-price { margin: 0 !important; color: #111; }
.plan-price .amt { font: 700 30px/1.1 Arial, sans-serif; letter-spacing: -0.02em; }
.plan-price .per { font-size: 14px; color: #555; }
.plan-alt { margin: 2px 0 8px !important; font-size: 13px; color: #6b5a2c; }
.plan-list { flex: 1; margin-bottom: 10px !important; }
.plan-list li { font-size: 14px; }
.plan .btn { align-self: flex-start; }

/* the enquiry form */
.enquiry { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 0.9rem; margin-top: 10px; }
.ef { display: flex; flex-direction: column; gap: 0.25rem; font-size: 13px; color: #444; font-weight: 600; }
.ef.wide { grid-column: 1 / -1; }
.ef input, .ef select, .ef textarea {
  font: 16px Arial, sans-serif;   /* 16px stops iPhones zooming in when the box is tapped */
  color: #111;
  padding: 0.55rem 0.65rem;
  min-height: 44px;
  border: 1px solid #d9d2c0;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  width: 100%;
}
.ef textarea { resize: vertical; }
.ef input:focus, .ef select:focus, .ef textarea:focus { border-color: #e4c36a; box-shadow: 0 0 0 3px rgba(228, 195, 106, 0.25); outline: none; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ef-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.ef-note { margin: 0 !important; font-size: 14px; color: #444; }
.ef-note.bad { color: #9b1c1c; font-weight: 700; }
.ef-done { grid-column: 1 / -1; padding: 0.9rem 1rem; border: 1px solid #e4c36a; border-radius: 12px; background: rgba(228, 195, 106, 0.12); font-weight: 600; }

/* Phones and tablets: the sheet is the whole screen, including the safe area, so the
   address bar and the home indicator never cut the last line off. */
@media (max-width: 1100px) {
  .panel-card {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: auto !important;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    padding: calc(0.85rem + env(safe-area-inset-top, 0px)) max(1.15rem, env(safe-area-inset-right, 0px)) calc(1.2rem + env(safe-area-inset-bottom, 0px)) max(1.15rem, env(safe-area-inset-left, 0px));
    font-size: 16px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .panel-x { top: env(safe-area-inset-top, 0px); }
  .tether { display: none !important; }
}
@media (max-width: 1000px) {
  .vista { grid-template-columns: 1fr 1fr; width: min(46rem, calc(100vw - 2rem)); }
  .vista .stage { grid-column: 1 / span 2; grid-row: 1; }
  .reel { grid-row: 2; transform: none; margin: -1.6rem 0 0; }
  .reel-left { grid-column: 1; margin-right: -1.2rem; }
  .reel-right { grid-column: 2; margin-left: -1.2rem; margin-top: -0.6rem; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  /* phones: the six menu items sit in a tidy grid of three */
  .aud { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; padding: 0.7rem 0.5rem 0; font-size: 0.84rem; row-gap: 0.1rem; }
  .aud a { padding: 0.6rem 0.75rem; text-align: center; }
  .aud a:nth-child(3n + 1) { border-left: 0; }
  /* (26 Oct 2026) a shorter hero, so the Free demo button is on the first screen: the two reels sit
     side by side under the middle picture, and Free demo leads the buttons */
  .vista { grid-template-columns: 1fr 1fr; width: calc(100vw - 1rem); }
  .vista .stage { grid-column: 1 / span 2; grid-row: 1; }
  .reel { grid-row: 2 !important; transform: none !important; width: auto; }
  .reel-left { grid-column: 1 !important; margin: -1.6rem -0.6rem 0 0 !important; }
  .reel-right { grid-column: 2 !important; margin: -0.9rem 0 0 -0.6rem !important; }
  .intro { margin-top: 0.4rem; }
  .pills { gap: 0.45rem; }
  .pills .demo { order: -1; margin: 0 0 0.35rem; }
  main { padding-top: 2.2rem; }
  .panel-card h2 { font-size: 1.65rem; }
  .enquiry { grid-template-columns: 1fr; }
  .founders { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
}
@media (max-width: 480px) {
  .foot-in { grid-template-columns: 1fr; gap: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .glow { animation: none; }
  .stage img, .reel img, .stage img.on, .reel img.on { transition: none; transform: none; }
  .panel-card, .veil, .tether, .aud a::after { transition: none; }
}

/* (6 Oct 2026, mobile polish) Phones only: footer links get a 40 px tap area,
   the small gold eyebrow labels grow from 10 to 11 px, and the sticky close
   button gets a white ring so text never shows around its edges. */
@media (max-width: 700px) {
  .foot-col { gap: 0; }
  .foot-col a { padding: 0.5rem 0; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
  .foot-head { margin-bottom: 0.2rem !important; }
  .panel-card .eb, .plan-aud, html.home .wall-card .eb { font-size: 11px !important; }
  .panel-x { box-shadow: 0 0 0 5px #fff; }
  .founder a { display: inline-block; padding: 0.55rem 0.6rem; }   /* LinkedIn links: a comfortable tap area */
}

/* Page locked behind an open panel so a swipe scrolls the panel (all screen sizes) */
html.home.panel-open, html.home.panel-open body { overflow: hidden; }
/* Phone: the menu links are real tap targets (at least 44 px tall) and easy to read */
@media (max-width: 700px) {
  .aud a { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; }
  .panel-x { width: 2.75rem; height: 2.75rem; box-shadow: 0 0 0 6px #fff, 0 2px 10px rgba(0,0,0,.18); }   /* a clear ring so scrolling text never reads through it */
  .founder { min-width: 0; }
  .panel-card img, .panel-card table { max-width: 100%; }
  .panel-card table { display: block; overflow-x: auto; }
}

/* ---------------- Visual overview (19 Oct 2026) ----------------
   A short film on the student panel. Pictures are the real world.
   Chapters, play and pause are wired in front.js. */
.ov {
  position: relative;
  margin: 2px 0 8px;
  border: 1px solid #e4c36a;
  border-radius: 14px;
  overflow: hidden;
  background: #fffdf8;
  box-shadow: 0 12px 32px rgba(80, 60, 10, 0.08);
  max-width: 100%;
  min-width: 0;
}
.panel-card .ov p { margin: 0; }
.panel-card .ov b { background: none; color: inherit; font-weight: 700; }
.ov-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1c1914;
  overflow: hidden;
  cursor: pointer;
}
.ov-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s ease; pointer-events: none; }
.ov-scene.on { opacity: 1; z-index: 1; }
.ov-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.22);
}
.ov-shot.over { opacity: 0; }
.ov-shot.pos-bio { object-position: 50% 62%; }
.ov-shot.pos-maths { object-position: 68% 48%; }
.ov-shot.pos-art { object-position: 50% 46%; }
.ov-shot.pos-mars { object-position: 36% 48%; }
.ov-shot.pos-geo { object-position: 50% 38%; }
.ov-scene.on .ken-a { animation: ov-ken-a var(--ms) ease-out forwards; }
.ov-scene.on .ken-b { animation: ov-ken-b var(--ms) ease-out forwards; }
.ov-scene.on .ov-shot.over { animation: ov-cross var(--ms) linear forwards; }
.ov-scene.dim .ov-shot { filter: brightness(0.38) saturate(0.92); }
@keyframes ov-ken-a { from { transform: scale(1.22); } to { transform: scale(1.34) translate3d(-1.6%, -1%, 0); } }
@keyframes ov-ken-b { from { transform: scale(1.32) translate3d(1.4%, 0, 0); } to { transform: scale(1.2) translate3d(-1%, 1%, 0); } }
@keyframes ov-cross {
  0%, 40% { opacity: 0; transform: scale(1.24); }
  56%, 100% { opacity: 1; transform: scale(1.32) translate3d(-1%, 0, 0); }
}
.ov-stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.4rem;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
}
.ov-bars {
  position: absolute;
  z-index: 6;
  left: 0.55rem; right: 0.55rem; bottom: 0.4rem;
  display: flex;
  gap: 0.22rem;
  pointer-events: none;
}
.ov-bars i { flex: 1; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.38); overflow: hidden; }
.ov-bars b { display: block; height: 100%; width: 100%; background: #e4c36a; transform: scaleX(0); transform-origin: left center; }
.ov-bigplay {
  position: absolute;
  z-index: 6;
  left: 50%; top: 42%;
  width: 3.4rem; height: 3.4rem;
  margin: -1.7rem 0 0 -1.7rem;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #1a1a1a;
  background: #e4c36a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.ov:not(.is-play) .ov-bigplay { opacity: 1; transform: scale(1); }
.chip, .ov-seal, .ov-float span, .ov-quest, .ov-board, .ov-stats, .ov-learn {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.chip {
  display: inline-flex;
  align-items: center;
  font: 700 11px/1 Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #f7f4ec;
  background: rgba(16, 14, 10, 0.72);
  border: 1px solid rgba(228, 195, 106, 0.75);
  border-radius: 999px;
  padding: 0.38rem 0.55rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  opacity: 1;
}
.ov-scene.on .chip { animation: ov-pop 0.48s ease calc(var(--d) * 0.28s + 0.12s) both; }
@keyframes ov-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ov-chips, .ov-pills, .ov-kinds {
  position: absolute;
  z-index: 5;
  top: 0.65rem;
  left: 0.6rem;
  right: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}
.ov-chips { flex-direction: column; align-items: flex-start; right: auto; }
.ov-seal {
  position: absolute;
  z-index: 5;
  left: 0.6rem;
  bottom: 0.95rem;
  margin: 0;
  font: 700 11px/1 Arial, "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: 0.01em;
  color: #1a1a1a;
  background: #e4c36a;
  border-radius: 999px;
  padding: 0.4rem 0.62rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  opacity: 1;
}
.ov-scene.on .ov-seal { animation: ov-pop 0.5s ease 0.7s both; }
.ov-quest, .ov-board, .ov-stats, .ov-learn {
  position: absolute;
  z-index: 5;
  color: #f7f4ec;
  background: rgba(14, 12, 9, 0.78);
  border: 1px solid rgba(228, 195, 106, 0.6);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(5px);
}
.ov-quest, .ov-board, .ov-stats { top: 0.6rem; right: 0.55rem; width: min(13.2rem, 62%); padding: 0.55rem 0.65rem 0.6rem; }
.ov-scene.on .ov-quest, .ov-scene.on .ov-board, .ov-scene.on .ov-stats { animation: ov-pop 0.5s ease 0.1s both; }
.ov-mini {
  font: 700 10px/1 Arial, sans-serif !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e4c36a;
  margin: 0 0 0.28rem !important;
}
.ov-qt { font: 700 18px/1.1 Arial, sans-serif !important; color: #fff; }
.ov-qs, .ov-ms { font: 12px/1.3 Arial, sans-serif !important; color: #efe6d2; margin-top: 0.12rem !important; }
.ov-modes { display: flex; gap: 0.3rem; margin-top: 0.45rem; }
.ov-modes span {
  font: 700 11px/1 Arial, sans-serif;
  padding: 0.32rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(228, 195, 106, 0.7);
  color: #f7f4ec;
}
.ov-scene.on .ov-modes .friend { animation: ov-friend var(--ms) linear forwards; }
@keyframes ov-friend {
  0%, 42% { background: transparent; color: #f7f4ec; }
  56%, 100% { background: #e4c36a; color: #1a1a1a; }
}
.ov-meter { height: 5px; margin-top: 0.5rem; border-radius: 99px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.ov-meter i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #b8923e, #e4c36a); transform: scaleX(0); transform-origin: left center; }
.ov-scene.on .ov-meter i { animation: ov-meter var(--ms) ease-out forwards; }
@keyframes ov-meter { from { transform: scaleX(0.08); } to { transform: scaleX(1); } }
.ov-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.35rem;
  align-items: center;
  font: 13px/1.2 Arial, sans-serif;
  padding: 0.22rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ov-row em { font-style: normal; font-size: 11px; color: #e4c36a; opacity: 0; }
.ov-row.you { color: #fff; font-weight: 700; }
.ov-scene.on .ov-row em { animation: ov-plus var(--ms) ease forwards; }
@keyframes ov-plus {
  0%, 50% { opacity: 0; transform: translateY(4px); }
  66%, 86% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
.ov-learn {
  left: 0.65rem;
  right: 0.65rem;
  top: 7%;
  width: auto;
  max-width: 18.5rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0.7rem 0.75rem 0.65rem;
}
.ov-q { font: 700 14px/1.3 Arial, sans-serif !important; color: #fff; }
.ov-opts { display: flex; gap: 0.35rem; margin-top: 0.45rem; }
.ov-opts span {
  flex: 1;
  text-align: center;
  font: 700 12px/1 Arial, sans-serif;
  padding: 0.42rem 0.3rem;
  border-radius: 8px;
  border: 1px solid rgba(228, 195, 106, 0.45);
  background: rgba(255, 255, 255, 0.08);
  color: #f7f4ec;
}
.ov-slot { position: relative; min-height: 2.5rem; margin-top: 0.45rem; }
.ov-miss, .ov-why, .ov-tick { font: 12.5px/1.35 Arial, sans-serif !important; }
.ov-miss, .ov-why { position: absolute; left: 0; right: 0; top: 0; opacity: 0; }
.ov-miss { color: #ffc9c9; }
.ov-why { color: #f7f4ec; }
.ov-tick { min-height: 1.15rem; margin-top: 0.15rem !important; color: #e4c36a; font-weight: 700; opacity: 0; }
.ov-scene.on .ov-q { animation: ov-q var(--ms) linear forwards; }
.ov-scene.on .friction { animation: ov-fr var(--ms) linear forwards; }
.ov-scene.on .gravity { animation: ov-gr var(--ms) linear forwards; }
.ov-scene.on .ov-miss { animation: ov-miss var(--ms) linear forwards; }
.ov-scene.on .ov-why { animation: ov-why var(--ms) linear forwards; }
.ov-scene.on .ov-tick { animation: ov-tick var(--ms) linear forwards; }
@keyframes ov-q { 0% { opacity: 0; transform: translateY(6px); } 8%, 100% { opacity: 1; transform: none; } }
@keyframes ov-fr {
  0% { opacity: 0; }
  12%, 20% { opacity: 1; background: rgba(255, 255, 255, 0.08); color: #f7f4ec; }
  28%, 100% { opacity: 1; background: #9a3030; color: #fff; border-color: #9a3030; }
}
@keyframes ov-gr {
  0% { opacity: 0; }
  16%, 60% { opacity: 1; background: rgba(255, 255, 255, 0.08); color: #f7f4ec; }
  70%, 100% { opacity: 1; background: #e4c36a; color: #1a1a1a; border-color: #e4c36a; }
}
@keyframes ov-miss { 0%, 26% { opacity: 0; } 34%, 46% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes ov-why { 0%, 50% { opacity: 0; transform: translateY(4px); } 60%, 100% { opacity: 1; transform: none; } }
@keyframes ov-tick { 0%, 72% { opacity: 0; } 82%, 100% { opacity: 1; } }
.ov-stat { display: grid; grid-template-columns: 4.6rem 1fr auto; gap: 0.35rem; align-items: center; font: 12px/1.2 Arial, sans-serif; margin-top: 0.28rem; }
.ov-stat i { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.ov-stat i::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--w);
  background: linear-gradient(90deg, #b8923e, #e4c36a);
  transform: scaleX(0);
  transform-origin: left center;
}
.ov-scene.on .ov-stat i::before { animation: ov-meter 1.15s ease calc(var(--d) * 0.16s + 0.25s) forwards; }
.ov-stat.done b { color: #e4c36a; }
.ov-float { position: absolute; z-index: 5; top: 0.7rem; left: 0.65rem; right: 0.65rem; height: 2rem; margin: 0; }
.ov-float span {
  position: absolute;
  left: 0; top: 0;
  font: 700 13px/1 Arial, sans-serif;
  color: #f7f4ec;
  background: rgba(14, 12, 9, 0.78);
  border: 1px solid rgba(228, 195, 106, 0.7);
  border-radius: 999px;
  padding: 0.42rem 0.65rem;
  opacity: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.ov-scene.on .ov-float .a { animation: ov-lab-a var(--ms) linear forwards; }
.ov-scene.on .ov-float .b { animation: ov-lab-b var(--ms) linear forwards; }
@keyframes ov-lab-a { 0%, 6% { opacity: 0; } 14%, 40% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes ov-lab-b { 0%, 46% { opacity: 0; } 58%, 100% { opacity: 1; } }
.ov-card { display: grid; background: #fffdf8; border-top: 1px solid rgba(228, 195, 106, 0.45); }
.ov-cap { grid-area: 1 / 1; padding: 0.7rem 0.9rem 0.35rem; opacity: 0; visibility: hidden; }
.ov-cap.on { opacity: 1; visibility: visible; }
.ov-kicker {
  font: 700 10px/1.2 Arial, sans-serif !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a6a1c;
  margin: 0 0 0.28rem !important;
}
.ov-title { font: 700 17px/1.25 Arial, sans-serif !important; color: #1a1a1a; margin: 0 0 0.2rem !important; }
.ov-line { font: 14px/1.45 Arial, sans-serif !important; color: #3a3a3a; max-width: 40rem; }
.ov-nav {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0.15rem 0.7rem 0.7rem;
  background: #fffdf8;
  scrollbar-width: none;
  min-width: 0;
}
.ov-nav::-webkit-scrollbar { display: none; }
.ov button { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; cursor: pointer; }
.ov-play, .ov-tab {
  flex: 0 0 auto;
  min-height: 2.25rem;
  border-radius: 999px;
  border: 1px solid #e4c36a;
  background: #fff;
  color: #1a1a1a;
}
.ov-play {
  width: 2.25rem;
  padding: 0;
  display: grid;
  place-items: center;
  background: #1a1a1a;
  color: #e4c36a;
}
.ov-play svg { display: block; }
.ov.is-play .ico-play, .ov:not(.is-play) .ico-pause { display: none; }
.ov-tab {
  font: 700 12px/1 Arial, sans-serif;
  padding: 0.4rem 0.7rem;
  scroll-snap-align: start;
}
.ov-tab.on { background: #e4c36a; border-color: #e4c36a; }
.ov-live {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ov-still .ov-scene,
.ov-still .ov-scene.on .chip,
.ov-still .ov-scene.on .ov-seal,
.ov-still .ov-scene.on .ken-a,
.ov-still .ov-scene.on .ken-b,
.ov-still .ov-scene.on .ov-shot.over,
.ov-still .ov-scene.on .ov-quest,
.ov-still .ov-scene.on .ov-board,
.ov-still .ov-scene.on .ov-stats,
.ov-still .ov-scene.on .ov-learn,
.ov-still .ov-scene.on .ov-q,
.ov-still .ov-scene.on .friction,
.ov-still .ov-scene.on .gravity,
.ov-still .ov-scene.on .ov-miss,
.ov-still .ov-scene.on .ov-why,
.ov-still .ov-scene.on .ov-tick,
.ov-still .ov-scene.on .ov-meter i,
.ov-still .ov-scene.on .ov-stat i::before,
.ov-still .ov-scene.on .ov-modes .friend,
.ov-still .ov-scene.on .ov-row em,
.ov-still .ov-scene.on .ov-float .a,
.ov-still .ov-scene.on .ov-float .b { animation: none; }
.ov-still .ov-meter i, .ov-still .ov-stat i::before { transform: scaleX(1); }
.ov-still .friend { background: #e4c36a; color: #1a1a1a; }
.ov-still .friction { background: #9a3030; color: #fff; opacity: 1; }
.ov-still .gravity { background: #e4c36a; color: #1a1a1a; opacity: 1; }
.ov-still .ov-miss { opacity: 0; }
.ov-still .ov-why, .ov-still .ov-tick { opacity: 1; }
.ov-still .ov-float .a { opacity: 1; }
.ov-still .ov-float .b { opacity: 0; }
.ov-still .ov-row em { opacity: 1; }
@media (max-width: 700px) {
  .ov-stage { aspect-ratio: 5 / 4; }
  .ov-title { font-size: 16px !important; }
  .ov-line { font-size: 14px !important; }
  .ov-play, .ov-tab { min-height: 44px; }
  .ov-play { width: 44px; }
  .ov-quest, .ov-board, .ov-stats { width: min(12.4rem, 70%); padding: 0.45rem 0.5rem 0.5rem; }
  .ov-qt { font-size: 16px !important; }
  .chip { font-size: 10.5px; padding: 0.32rem 0.45rem; }
  .ov-learn { max-width: none; top: 0.45rem; padding: 0.55rem 0.6rem 0.5rem; }
  .ov-q { font-size: 13px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-scene { transition: none; }
  .ov-bigplay { transition: none; }
}

/* Fast cuts inside a chapter. --slice is one picture. --i is its place in the run. */
.reel8 .frame, .reel6 .frame, .reel4 .frame, .reel3 .frame, .reel2 .frame,
.ov-caplet { opacity: 0; }
.ov-scene.on.reel8 .frame { animation: ov-r8 var(--ms) linear forwards; animation-delay: calc(var(--i) * var(--slice)); }
.ov-scene.on.reel6 .frame { animation: ov-r6 var(--ms) linear forwards; animation-delay: calc(var(--i) * var(--slice)); }
.ov-scene.on.reel6 .frame.walk { animation-name: ov-r6-walk; }
.ov-scene.on.reel4 .frame { animation: ov-r4 var(--ms) linear forwards; animation-delay: calc(var(--i) * var(--slice)); }
.ov-scene.on.reel3 .frame { animation: ov-r3 var(--ms) linear forwards; animation-delay: calc(var(--i) * var(--slice)); }
.ov-scene.on.reel2 .frame { animation: ov-r2 var(--ms) linear forwards; animation-delay: calc(var(--i) * var(--slice)); }
.ov-scene.on.reel8 .ov-caplet { animation: ov-t8 var(--ms) linear forwards; animation-delay: calc(var(--i) * var(--slice)); }
.ov-scene.on.reel6 .ov-caplet { animation: ov-t6 var(--ms) linear forwards; animation-delay: calc(var(--i) * var(--slice)); }
.ov-scene.on.reel2 .ov-caplet { animation: ov-t2 var(--ms) linear forwards; animation-delay: calc(var(--i) * var(--slice)); }
@keyframes ov-r8 {
  0% { opacity: 1; transform: scale(1.18) translate3d(1.2%, 0, 0); }
  12.4% { opacity: 1; transform: scale(1.26) translate3d(-1.4%, -0.6%, 0); }
  12.5%, 100% { opacity: 0; }
}
@keyframes ov-r6 {
  0% { opacity: 1; transform: scale(1.08); }
  16.5% { opacity: 1; transform: scale(1.14) translate3d(-1%, 0, 0); }
  16.7%, 100% { opacity: 0; }
}
@keyframes ov-r6-walk {
  0% { opacity: 1; transform: scale(1.32) translate3d(6%, 3%, 0); }
  16.5% { opacity: 1; transform: scale(1.48) translate3d(-8%, -3%, 0); }
  16.7%, 100% { opacity: 0; }
}
@keyframes ov-r4 {
  0%, 24.8% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
@keyframes ov-r3 {
  0%, 33% { opacity: 1; }
  33.4%, 100% { opacity: 0; }
}
@keyframes ov-r2 {
  0% { opacity: 1; transform: scale(1.04); }
  49% { opacity: 1; transform: scale(1.1); }
  50%, 100% { opacity: 0; }
}
@keyframes ov-t8 { 0%, 12.4% { opacity: 1; } 12.5%, 100% { opacity: 0; } }
@keyframes ov-t6 { 0%, 16.5% { opacity: 1; } 16.7%, 100% { opacity: 0; } }
@keyframes ov-t2 { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.ov-caplet {
  position: absolute;
  z-index: 5;
  left: 0.55rem;
  bottom: 0.95rem;
  margin: 0;
  max-width: calc(100% - 1.2rem);
  font: 700 12px/1.2 Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #1a1a1a;
  background: #e4c36a;
  border-radius: 999px;
  padding: 0.38rem 0.6rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.frame.colour, .frame.kahoot, .frame.sheet {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem 0.75rem 1.3rem;
  box-sizing: border-box;
  overflow: hidden;
}
.frame.colour { background: linear-gradient(180deg, #8ec8f2 0 28%, #f6f3ec 28% 100%); color: #1a1a1a; }
.frame.kahoot { background: #16140f; color: #f7f4ec; }
.frame.sheet { background: #f7f4ec; color: #1a1a1a; }
.frame.flat { transform: none; background: #0c0c0e; }
.frame.flat.paint { object-position: 50% 72%; }
.frame.flat.learn { object-fit: contain; object-position: center; background: #16140f; }
.ov-scene.on.reel2 .frame.flat.learn { animation-name: ov-r2-hold; }
@keyframes ov-r2-hold {
  0%, 49% { opacity: 1; transform: none; }
  50%, 100% { opacity: 0; }
}
.frame.flat.topics { object-position: 22% 58%; }
.frame.live {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 0.42rem;
  padding: 0.72rem 0.75rem 1.35rem;
  background: radial-gradient(120% 70% at 50% -20%, #2c2618 0%, #0c0c0e 58%);
  color: #f7f4ec;
}
.live-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.45rem; }
.live-live { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font: 700 11px/1 Arial, Helvetica, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #e4c36a; }
.live-live i { width: 7px; height: 7px; border-radius: 50%; background: #e23b4a; box-shadow: 0 0 0 3px rgba(226, 59, 74, 0.28); }
.live-place { font: 12px/1 Arial, Helvetica, sans-serif; color: #c8c0ae; text-align: center; }
.live-time { font: 700 13px/1 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; color: #fff; }
.live-meter { height: 3px; border-radius: 99px; background: #2a261f; overflow: hidden; }
.live-meter b { display: block; height: 100%; width: 64%; background: #e4c36a; }
.live-q { margin: 0; font: 700 18px/1.25 Georgia, "Times New Roman", serif; color: #fff; text-align: left; }
.live-opts { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.4rem; min-height: 0; }
.live-opts span { display: flex; align-items: center; gap: 0.45rem; min-height: 0; padding: 0 0.65rem; border-radius: 12px; color: #1a140c; font: 700 15px/1 Arial, Helvetica, sans-serif; }
.live-opts em { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.16); font-style: normal; font-size: 12px; }
.live-opts span:nth-child(1) { background: #f3c6c0; }
.live-opts span:nth-child(2) { background: #c9d7f2; }
.live-opts span:nth-child(3) { background: #f6e3a1; }
.live-opts span:nth-child(4) { background: #cfe8cf; }
.live-opts .pick { box-shadow: inset 0 0 0 2px #1a140c, 0 0 0 2px #e4c36a; }
.live-board { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(228, 195, 106, 0.4); }
.live-board li { display: grid; grid-template-columns: 1.35rem 1fr auto; align-items: center; gap: 0.45rem; min-height: 1.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font: 14px/1 Arial, Helvetica, sans-serif; }
.live-board b { width: 1.2rem; height: 1.2rem; border-radius: 50%; display: grid; place-items: center; background: #2a261f; color: #e4c36a; font-size: 11px; }
.live-board strong { font-variant-numeric: tabular-nums; }
.live-board .you span, .live-board .you strong { color: #e4c36a; }
.live-board .you b { background: #e4c36a; color: #1a140c; }
.frame.level {
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.85rem 0.9rem 1.45rem;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(228, 195, 106, 0.2), transparent 55%),
    linear-gradient(180deg, #1c160e 0%, #0c0c0e 100%);
  color: #f7f4ec;
}
.lv-k { margin: 0; font: 700 11px/1 Arial, Helvetica, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #e4c36a; }
.lv-topic { margin: 0; font: 700 22px/1.15 Georgia, "Times New Roman", serif; color: #fff; }
.lv-q { margin: 0; font: 15px/1.35 Arial, Helvetica, sans-serif; color: #f3efe4; }
.lv-steps { list-style: none; margin: 0.15rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.lv-steps li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.4rem; align-items: center; min-width: 0; padding: 0.45rem 0.45rem 0.5rem; background: #14110c; border: 1px solid rgba(228, 195, 106, 0.55); border-radius: 12px; }
.lv-steps b { grid-row: 1 / span 2; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; background: #e4c36a; color: #1a140c; font-size: 12px; }
.lv-steps span { font: 11px/1.2 Arial, Helvetica, sans-serif; color: #c8c0ae; }
.lv-steps em { font: 700 18px/1 Georgia, "Times New Roman", serif; font-style: normal; color: #fff; }
.lv-tip { margin: 0.1rem 0 0; font: 13px/1.35 Arial, Helvetica, sans-serif; color: #d9d0bc; }
.frame.plate { display: grid; place-items: center; align-content: start; padding: 0.4rem 0.45rem 2rem; background: #0c0c0e; }
.frame.plate img { height: calc(100% - 1.7rem); width: auto; max-width: 100%; object-fit: contain; border-radius: 14px; box-shadow: 0 0 0 1px #e4c36a, 0 18px 40px rgba(0, 0, 0, 0.45); }
.frame .ov-qt { font-size: 16px !important; margin: 0 0 0.15rem !important; color: #1a1a1a; }
.frame.kahoot .ov-qt { color: #fff; }
.frame.sheet .ov-ms, .frame.colour .ov-ms { color: #444; }
.squares { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 0.2rem; }
.squares i { display: block; aspect-ratio: 1; background: #fff; border: 2px solid #161616; border-radius: 2px; }
.squares i:nth-child(3n) { background: #e23b4a; }
.squares i:nth-child(5n) { background: #3a86ff; }
.squares i:nth-child(7n) { background: #e4c36a; }
.ov-scene.on .squares i:nth-child(4n) { animation: ov-ink 0.9s ease both; }
@keyframes ov-ink { from { background: #fff; } to { background: #7dce7a; } }
.frame .qz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.frame .qz-opt {
  display: flex; align-items: center; min-height: 2.4rem; padding: 0.35rem 0.55rem;
  border-radius: 10px; font: 700 13px/1.2 Arial, sans-serif; color: #111;
}
.frame .qz-opt:nth-child(4n+1) { background: #f3c6c0; }
.frame .qz-opt:nth-child(4n+2) { background: #c9d7f2; }
.frame .qz-opt:nth-child(4n+3) { background: #f6e3a1; }
.frame .qz-opt:nth-child(4n+4) { background: #cfe8cf; }
.frame .qz-opt.right { box-shadow: 0 0 0 3px #e4c36a; }
.frame .ov-row { color: #f7f4ec; border-top-color: rgba(255,255,255,.12); }
.frame .pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
.frame .pack-stat { background: #fff; border: 1px solid #e6e0d0; border-radius: 10px; padding: 0.35rem 0.4rem; min-width: 0; }
.frame .pack-stat b { display: block; font-size: 1.05rem; line-height: 1.1; }
.frame .pack-stat span { display: block; color: #444; font-size: 11px; line-height: 1.2; }
.frame .pie-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.frame .pie-cell { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1px solid #e6e0d0; border-radius: 10px; padding: 0.3rem 0.2rem; }
.frame .pie { width: 52px; height: 52px; }
.frame .pie-num { font: 700 7px Arial, sans-serif; fill: #111; }
.frame .pie-cell b { font-size: 12px; }
.frame .pie-cell small { color: #666; font-size: 10px; }
.qtrack { display: grid; grid-template-columns: 7.2rem 1fr auto; gap: 0.35rem; align-items: center; font: 13px/1.2 Arial, sans-serif; margin-top: 0.28rem; }
.qtrack i { display: block; height: 7px; border-radius: 99px; background: #efe9d6; overflow: hidden; }
.qtrack i::before { content: ""; display: block; height: 100%; width: var(--w); background: #e4c36a; }
.qtrack b.ok { color: #146c36; }
.qtrack b.low { color: #9f1d14; }
.who { display: flex; align-items: center; gap: 0.55rem; margin: 0.15rem 0 0.35rem; }
.who b { display: block; font-size: 15px; }
.who small { display: block; color: #555; font-size: 12px; }
.avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: #e4c36a; color: #1a1a1a; font: 700 16px/1 Arial, sans-serif; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e4c36a; }
.ov-still .reel8 .frame, .ov-still .reel6 .frame, .ov-still .reel4 .frame, .ov-still .reel3 .frame, .ov-still .reel2 .frame,
.ov-still .ov-caplet { animation: none; opacity: 0; }
.ov-still .frame[style*="--i:0"], .ov-still .ov-caplet[style*="--i:0"] { opacity: 1; }
@media (max-width: 700px) {
  .frame .pack-grid { grid-template-columns: repeat(2, 1fr); }
  .frame .ov-qt { font-size: 15px !important; }
  .ov-caplet { font-size: 11px; }
  .live-q { font-size: 16px; }
  .lv-topic { font-size: 18px; }
  .lv-q, .lv-tip { font-size: 13px; }
  .lv-steps { gap: 0.25rem; }
  .lv-steps em { font-size: 15px; }
  .lv-steps span { font-size: 10px; }
}