/* =========================================================================
   triptico-skin.css  —  reskins the Class League landing system for Triptico.
   Loaded AFTER styles.css + landing.css. The CL design is token-driven, so the
   whole palette flips by overriding --accent; the rest is image swaps.
   This is a faithful visual clone — NOT yet wired to Triptico's Firebase.
   ========================================================================= */

:root {
  /* CL green (#0d7a4f) -> Triptico blue. Cascades through nav CTA, FAQ markers,
     final-section background, focus rings, step numbers, etc. */
  --accent: #3498db;
  --accent-ink: #ffffff;
}

/* Stop the page-level overscroll bounce. On iPad Chrome, rubber-banding past
   the footer collapses the bottom toolbar and exposes the light --bg behind the
   blue footer ("scroll goes on past the footer"); Safari hides that zone behind
   its toolbar. overscroll-behavior-y: none keeps the document anchored at both
   ends. (Also disables pull-to-refresh, which is the right call for a landing
   page.) */
html,
body {
  overscroll-behavior-y: none;
}

/* =========================================================================
   TYPOGRAPHY — use Triptico's font (Outfit) everywhere.
   The CL design hardcodes 'Urbanist' (display) and 'Nunito' (body) across ~40
   rules. Rather than edit every one, alias BOTH family names to Outfit's font
   file: each CL selector keeps its `font-family` but now renders in Outfit.
   Only Outfit is loaded by the page (see home-cl.html), so these are the sole
   definitions of these names — no conflict with Google's real Urbanist/Nunito.
   ========================================================================= */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2)
    format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2)
    format('woff2');
}

/* Drop the Class League chalk decorations that depend on Amatic SC: the O/×
   glyph marks between steps and the closing "Share!" flourish. (We no longer
   load Amatic SC at all.) The plain chalk arrows/links stay. */
.cl-link-mark--glyph,
.cl-flow-goal {
  display: none !important;
}

/* Hero photograph: CL's stadium tunnel -> the Triptico classroom shot. The image
   lives on .cl-hero itself (cover, no-repeat); ::before stays the dark scrim. */
.cl-hero {
  background-image: url('/images/hero-template.webp');
  background-position: center;
  background-repeat: no-repeat;
  /* Own stacking context so the screenshot layer (z-index:-1) sits cleanly
     between this background and the ::before scrim. */
  isolation: isolate;
  /* The live site header is ~96px tall and sits in flow above the hero, so the
     hero fills exactly the remaining viewport (no gap, no overflow). */
  min-height: calc(100svh - 96px);
}

/* Rotating activity screenshots dropped into the blank screen. Each overlay is a
   full-frame, transparent-background image the SAME size as the template, with
   the screenshot pre-warped onto the screen — so they register automatically
   (identical cover sizing + position). They cross-fade via opacity, sitting
   below the scrim (z-index:-1) so they ride the hero's clean→dark fade. */
.cl-hero-screens {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.cl-hero-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* must match .cl-hero background-position */
  opacity: 0;
  transition: opacity 1.2s ease;
}
.cl-hero-shot.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cl-hero-shot {
    transition: none;
  }
}

/* Deepen the overlay a touch (CL's 0.5 -> 0.72). It still fades in via the
   cl-hero-fade animation; only the resting darkness increases. */
.cl-hero::before {
  background: rgba(6, 10, 16, 0.72);
}

/* Lift the title a little above dead-centre (the lower sub/scroll panel is
   absolutely pinned to the bottom, so this only moves the headline). Widen the
   panel from CL's 570px: the headline is ~96px type, so it needs room to keep
   each sentence ("Simple Ideas." / "Smarter Lessons.") intact on its own line
   rather than breaking mid-phrase. */
.cl-hero-panel {
  transform: translateY(-6vh);
  max-width: 1000px;
}

/* Step screenshots are 16:10-ish app captures, not 16:9 match shots — let them
   sit naturally rather than being cropped hard. (CL forces 16/9.) */
.cl-flow-shot {
  aspect-ratio: auto;
}

/* Final CTA band: CL's tunnel photo -> the new Triptico-blue hero template (same
   image + screen as the top hero). Layered exactly like the hero — template on
   the band, a rotating screenshot dropped into the blank screen (z-index:-1),
   and a ::before scrim on top so the white CTA copy stays legible. No gradient is
   baked into the image; the scrim does the darkening, same as the hero. */
.cl-final {
  background-image: url('/images/hero-template.webp');
  /* Reveal a higher slice of the photo so the image sits lower in the band. */
  background-position: center 28%;
  /* Own stacking context so the screenshot layer sits between the background and
     the ::before scrim, just like .cl-hero. */
  isolation: isolate;
}
.cl-final-screens {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.cl-final-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%; /* must match .cl-final background-position */
  opacity: 0;
  transition: opacity 1.2s ease;
}
.cl-final-shot.is-active {
  opacity: 1;
}
.cl-final::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(8, 12, 20, 0.82);
  pointer-events: none;
}
/* Lift the CTA content above the scrim (mirrors .cl-hero-panel z-index:1). */
.cl-final-inner {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cl-final-shot {
    transition: none;
  }
}

/* Balance the hero headline's line lengths. */
.cl-hero-title {
  text-wrap: balance;
}

/* Animated activity count in the final CTA heading — gold pops against the dark
   image band. inline-block + min-width keeps the heading from reflowing as the
   digits tick up. */
.cl-final .final-count {
  display: inline-block;
  text-align: center;
  color: #ffd34d;
  font-variant-numeric: tabular-nums;
}

/* The reassure pill is width:fit-content but CL never auto-centres it, so it sat
   left-of-centre while the heading and buttons centred. Centre it (and keep its
   items centred when they wrap). */
.cl-final .cl-final-reassure {
  /* CL's base pulls the pill up (-24px top) and leaves 32px below. Override for a
     clear, roughly even gap above (heading) and below (buttons). */
  margin: 30px auto 34px;
  justify-content: center;
}

/* Demo video: drop the Class League "class screen" frame (screenBck.webp) that
   sat behind the player, and the scale(0.86) inset that fitted the video inside
   it. The video now sits flush in its own rounded 16:9 box — no frame. */
.cl-video {
  background: none;
}
.cl-video-stage {
  transform: none;
}
/* Make the demo video a little smaller: trim its (wide) column share so the
   player isn't quite so dominant next to the copy. Base reverse row is
   1.35fr / 1fr; this eases the media column down to 1.1fr. */
#demo .cl-feature-inner {
  grid-template-columns: 1.1fr 1fr;
}
/* Retint the soft feature panel from CL's hardcoded teal (rgba(26,188,156,…),
   off-brand and clashing with the gold chips inside) to a faint Triptico blue. */
.cl-feature--panel .cl-feature-inner {
  background: rgba(52, 152, 219, 0.08);
}

/* =========================================================================
   Pricing — four plan cards in the CL card idiom; the Individual plan is the
   accent-bordered featured card. Token-driven, so it stays on-brand.
   ========================================================================= */
/* Pricing lives in a dialog (#pricing-dialog), not an in-flow section. It reuses
   .signin-dialog chrome but widens for the four-plan grid; the light --bg tint
   (vs the dialog's default white surface) lets the white plan cards stand out,
   matching how the old in-flow section sat on the page background. */
.cl-pricing-dialog {
  width: min(96vw, 1000px);
  padding: 40px clamp(20px, 4vw, 48px) 36px;
  background: var(--bg);
}
.cl-pricing-dialog .cl-h2 {
  text-align: center;
  margin-top: 6px;
}
/* Inline text trigger (e.g. "See prices" inside an FAQ answer) — a button that
   reads as a link within running copy. */
.cl-inline-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cl-inline-link:hover {
  text-decoration: none;
}

/* Dialog close button: the base rule pads the bottom 4px to optically centre the
   old "×" glyph. With an SVG the flexbox centres it perfectly, so drop the pad
   and size the icon. */
.signin-dialog-close {
  padding: 0;
}
.signin-dialog-close svg {
  width: 16px;
  height: 16px;
  display: block;
}
.cl-plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .cl-plans {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .cl-plans {
    grid-template-columns: 1fr;
  }
}

.cl-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 22px 26px;
}
.cl-plan--featured {
  border-color: var(--accent);
  box-shadow: 0 20px 44px -26px rgba(52, 152, 219, 0.55);
}
.cl-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 4px 13px;
  border-radius: 999px;
  white-space: nowrap;
}
.cl-plan h3 {
  font-family: 'Urbanist', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  margin: 0 0 10px;
  color: var(--ink);
}
.cl-plan-price {
  font-family: 'Urbanist', sans-serif;
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.cl-plan-price span {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 5px;
}
.cl-plan-alt {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  margin: 8px 0 0;
}
.cl-plan-note {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 10px 0 0;
}
.cl-plan ul {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 9px;
}
.cl-plan ul li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9rem;
  color: var(--ink);
}
.cl-plan ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.cl-plan .cl-btn {
  margin-top: auto;
  width: 100%;
  font-size: 0.95rem;
  padding: 11px 18px;
}
/* Accent-outline button for the non-featured plan cards (CL only ships
   --light / --ghost; --ghost is white-on-dark, wrong on white cards). */
.cl-btn--outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.cl-btn--outline:hover {
  background: rgba(52, 152, 219, 0.08);
}
.cl-plans-note {
  max-width: 640px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

/* =========================================================================
   INTERACTIVE TRIO — carousel, click-to-view, "View all" panel
   ========================================================================= */

/* Media becomes a vertical stack: framed screenshot + nav row + caption. */
.cl-flow-media {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cl-flow-media::before {
  content: none;
} /* drop CL's accent blob */

/* Front-of-class display bezel, mirroring the live site's .tier-media--framed:
   the screenshot sits on the screenBck.webp bezel, inset to 0.85 so the display
   shows around it, and scales up to fill on hover. Replaces the old accent blob
   (which carried no meaning, and which the blue nav circles vanished into). */
.cl-shots {
  position: relative;
  background: url('/images/screenBck.webp') center / 100% 100% no-repeat;
}
.cl-flow-shot {
  transform: scale(0.85);
  transform-origin: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  box-shadow:
    rgba(9, 30, 66, 0.25) 0px 1px 1px,
    rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
  transition: transform 0.25s ease;
}
.cl-shots--try .cl-flow-shot:hover {
  transform: scale(1);
}
/* Step 5 is a real classroom photo, not an app screen — keep it a clean rounded
   image, no bezel/inset. */
.cl-shots--photo {
  background: none;
}
.cl-shots--photo .cl-flow-shot {
  transform: none;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.12);
}

/* Little country flag after each testimonial's "Name · Country". Sized in em so
   it tracks the citation text; thin ring + rounded corner so it reads as a chip. */
.cl-flag {
  display: inline-block;
  width: 1.35em;
  height: auto;
  margin-left: 0.15em;
  vertical-align: -0.18em;
}

/* Carousel: stack the shots, show only the active one. */
.cl-shots--carousel .cl-flow-shot {
  display: none;
}
.cl-shots--carousel .cl-flow-shot.is-active {
  display: block;
}
/* Clickable shots (try-it-live). */
.cl-shots--try .cl-flow-shot {
  cursor: pointer;
}

/* Always-visible caption beneath the shot (activity name + "Click to View"),
   mirroring the live figcaption. Visible without hover, so touch users get the
   affordance too. The .cap spans share the carousel's data-idea index, so they
   toggle with the active screenshot. */
.cl-shot-cap {
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}
.cl-shot-cap .cap {
  display: none;
}
.cl-shot-cap .cap.is-active {
  display: inline;
}
.cl-shot-cap .cap-divider {
  margin: 0 7px;
  color: var(--border);
}
.cl-shot-cap .cap-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.cl-shot-cap .cap-link:hover {
  text-decoration: underline;
}

/* Carousel nav row: arrows + dots, beneath the shot. */
.cl-shot-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* Carousel arrows mirror the live site's .idea-arrow: a borderless, accent
   filled-circle SVG (the icon IS the circle, so no ring around it), hover
   darkens and grows slightly. */
.cl-shot-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}
.cl-shot-arrow svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}
.cl-shot-arrow:hover {
  color: #2980b9;
  transform: scale(1.12);
}

/* Reassurance "band chips" (Any Subject / Language / Age), copied verbatim from
   the live home.css and dropped above the video panel's CTA. --shadow-card isn't
   in the CL token set, so its value is inlined here. */
.band-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}
.band-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  background: #ffe9af;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  box-shadow:
    rgba(14, 63, 126, 0.06) 0px 0px 0px 1px,
    rgba(42, 51, 70, 0.04) 0px 2px 2px -1px,
    rgba(42, 51, 70, 0.04) 0px 6px 6px -3px,
    rgba(42, 51, 70, 0.03) 0px 12px 12px -6px;
}
.band-chips .chip-icon {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
  flex-shrink: 0;
}
/* In the video panel the chips fit comfortably on one row — keep them there
   (don't break 2-then-1). They re-wrap only when the panel stacks on mobile. */
.cl-feature-text .band-chips {
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-between;
}
.cl-feature-text .band-chips li {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .cl-feature-text .band-chips {
    flex-wrap: wrap;
    width: fit-content;
    justify-content: flex-start;
  }
}
.cl-shot-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background 0.15s ease;
}
.cl-shot-dot.is-active {
  background: var(--accent);
}

/* "View all … activities" link — spans the text grid's full row (like the desc
   and quote) so it doesn't widen the number column. */
.cl-see-all {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 16px 0 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
}
.cl-see-all::after {
  content: ' →';
}
.cl-see-all:hover {
  text-decoration: underline;
}

/* Try-it-live modal — self-contained (no Triptico home.css needed). */
.cl-try {
  width: min(1400px, 95vw);
  max-width: 95vw;
  height: min(90vh, 940px);
  padding: 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  background: #0b1220;
  color: #fff;
}
.cl-try::backdrop {
  background: rgba(8, 12, 20, 0.72);
}
/* Dark top bar holds the close button OUTSIDE the iframe, so it's never lost
   against white activity content (the old translucent button vanished on it). */
.cl-try-bar {
  height: 66px; /* match .cl-try-footer for a balanced frame */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cl-try-bar-label {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
}
/* The launched activity's name, appended to the bar label as "Triptico: Board"
   by home-cl-design.js. Triptico yellow against the white "Triptico:". */
.cl-try-bar-activity {
  color: #ffda79;
}
.cl-try-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cl-try-close svg {
  width: 16px;
  height: 16px;
  display: block;
}
.cl-try-close:hover {
  background: rgba(255, 255, 255, 0.24);
}
.cl-try-frame {
  width: 100%;
  height: calc(100% - 66px - 66px); /* full height minus equal bar + footer */
}
.cl-try-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}
.cl-try-footer {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
}
.cl-try-footer p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}
.cl-try-footer .cl-btn {
  padding: 9px 18px;
  font-size: 0.9rem;
  white-space: nowrap;
}

@media (max-width: 860px) {
  /* Match landing.css's reduced blob bleed on stacked mobile. */
  .cl-shots::before {
    inset: -12% -20%;
  }
  /* Once the steps + demo stack into one column, their media goes full-width —
     fine on a phone, but on tablet portrait (iPad ~768-834px) the screenshots
     and the video balloon. Cap and centre them; phones are narrower than the cap
     (min() falls back to 100%), so they're unaffected.
       - width (NOT max-width): the demo's .cl-video is an aspect-ratio block with
         no intrinsic width, so max-width + auto margins collapsed it to ~0 (the
         video "disappeared"); an explicit width gives it a size to fill.
       - override BOTH .cl-flow-media AND .cl-flow-step--reverse .cl-flow-media:
         landing.css pins the latter with margin:18px 0 + align-self:stretch at
         higher specificity, which left-aligned the reversed steps. */
  .cl-flow-media,
  .cl-flow-step--reverse .cl-flow-media {
    width: min(480px, 100%);
    align-self: center;
    margin: 18px auto;
  }
  #demo .cl-feature-media {
    width: min(480px, 100%);
    margin-inline: auto;
  }
}

/* =========================================================================
   "VIEW ALL" SLIDE-OUT PANEL
   activity-choice-panel.css supplies the cards; these overlay/slide rules live
   in Triptico's home.css (which we don't load — it has global body/.hero/svg
   rules that would fight the CL design). Copied VERBATIM from home.css so the
   panel is identical to the live site; only the Triptico colour tokens it
   references are added (their real values). Scoped to #see-all-holder /
   .see-all-panel so they can't touch the CL look.
   ========================================================================= */
:root {
  --white-colour: #fff;
  --grey-colour: #333;
  --dark-colour: #3498db;
  --light-colour: #f7f7f7;
  --yellow-colour: #ffda79;
}

/* The live cards inherit the Triptico body context (Outfit, 16px, line-height
   1.5) which the clone's CL body doesn't provide — replicate it exactly on the
   panel so the cards match the live site (font shape, wrapping AND proportions:
   the blurb's line-height drives the text-column height). The img rule is the
   home.css global the live cards rely on. */
#see-all-holder {
  font-family:
    'Outfit',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
#see-all-holder img {
  max-width: 100%;
}

.see-all-panel.resources-pane {
  background-color: var(--white-colour);
  overflow: hidden;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 9fr;
  align-items: center;
  justify-items: center;
}

/* Panel slide-out positioning */
.see-all-panel.resources-pane {
  position: fixed;
  top: 0;
  right: -100%;
  height: 100%;
  width: 100%;
  max-width: 700px;
  border-radius: 0;
  transition: right 0.3s ease;
  border-left: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
  z-index: 1001;
}

.see-all-panel.resources-pane.show {
  right: 0;
}

.see-all-panel .resources-header {
  padding: 0 3vmin;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--white-colour);
  width: 100%;
  height: 100%;
  text-wrap: balance;
}

.see-all-panel .resources-header .top-title {
  font-size: 2.5vmin;
  font-weight: 500;
  color: var(--grey-colour);
  text-transform: none;
  width: 85%;
}

.see-all-panel .all-resources {
  overflow-y: auto;
  overscroll-behavior: contain;
  height: 95%;
  width: 95%;
}

.see-all-panel .all-resources-section-title {
  font-size: 1.5vmin;
  width: 100%;
  text-align: left;
  margin-left: 10%;
  text-transform: uppercase;
  font-weight: 900;
  color: #999;
}

.see-all-panel .all-resources-section-title:first-child {
  margin-top: 0;
}

/* Backdrop */
#see-all-holder.menuHolder {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

#see-all-holder.menuHolder.visible {
  opacity: 1;
  visibility: visible;
  overflow: hidden;
  overscroll-behavior: contain;
}

/* The cards themselves are the STANDARD activity-choice-panel.css card, rendered
   as-is (no layout overrides). They look right on the live site because the live
   home.css supplies three bits of context that the CL page doesn't — so add just
   those, scoped to the panel, and nothing more:
     1. Outfit + 16px/1.5 body context (above);
     2. the blurb's 1rem size (home.css bumps it from the shared 1.4vmin);
     3. a paragraph margin reset — the title/blurb are <p> elements and the CL
        page never zeroes the UA's 1em margin, which is what pushed the blue bar
        off the top and opened gaps. */
.resource-meta .resource-blurb p {
  font-size: 1rem;
}
#see-all-holder .resource-title,
#see-all-holder .resource-blurb p {
  margin: 0;
}

@media (max-width: 768px) {
  .see-all-link {
    font-size: 3vmin;
  }

  .see-all-panel.resources-pane {
    width: 85%;
    max-width: none;
  }

  .see-all-panel .circleButton {
    width: 8vmin;
    height: 8vmin;
  }
}

/* ---------------------------------------------------------------------------
   Contact dialog: success + status states. The real form's confirmation
   (.contact-success) and status line (.form-note) are styled in the live
   home.css, which this page doesn't load — so give them CL-stack styling here.
   home.js swaps the form for .contact-success on a successful send. */
#contact-dialog .form-note {
  margin: 12px 0 0;
  font-size: 0.92rem;
  color: var(--muted, #5b6b7a);
}

/* :not([hidden]) so this display:flex doesn't override the `hidden` attribute
   home.js toggles — otherwise the success panel shows before any message sends. */
#contact-dialog .contact-success:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 28px 8px 8px;
}

#contact-dialog .contact-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #2ecc71;
}

#contact-dialog .contact-success-icon svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

#contact-dialog .contact-success-text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Student share-code activity chooser (#resource-select-holder). Shown by
   student-code-resource-panel.js when a plain list code resolves, so the
   student can pick an activity. The panel chrome (.resource-select-top/-btm,
   the cards, the circle close button) is styled by activity-choice-panel.css /
   buttons.css, but the backdrop holder + the slide-in positioning of
   .main-slide-menu live in home.css / side-menu.css, which this page doesn't
   load — so it rendered visible at the foot of the page. Re-create just those
   pieces here, scoped to #resource-select-holder so they can't touch anything
   else (same pattern as the see-all panel above). The module toggles .visible
   on the holder and .show on the inner panel. */
#resource-select-holder.menuHolder {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

#resource-select-holder.menuHolder.visible {
  opacity: 1;
  visibility: visible;
}

#resource-select-holder .main-slide-menu {
  height: 100%;
  width: 100%;
  max-width: 800px;
  background-color: var(--white-colour);
  position: absolute;
  top: 0;
  right: -100%; /* hidden off screen until .show */
  transition: right 0.4s ease;
  border-left: 2px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#resource-select-holder .main-slide-menu.show {
  right: 0;
}

/* ---------------------------------------------------------------------------
   Hero on narrow screens (≤880px): instead of cropping the wide classroom scene
   behind the headline (cluttered on a phone), drop the cover image + scrim and
   stand the WHOLE scene — teacher + the screen cycling activities — in a media
   box ABOVE the text, on Triptico-blue. The rotating overlays (.cl-hero-shot)
   are full-frame and the box matches the image's aspect ratio, so the rotation
   keeps registering. landing.css already makes .cl-hero a flex column here
   (DOM order = screens → headline → sub), so this is purely a re-skin. */
@media (max-width: 880px) {
  .cl-hero {
    min-height: auto;
    background-image: none;
    background-color: #3498db;
    background-image: linear-gradient(160deg, #46a0de 0%, #2980b9 100%);
    gap: 26px;
  }
  /* No dark scrim — the headline now sits on blue, not over the photo. */
  .cl-hero::before {
    display: none;
  }
  /* Don't pull the headline up over the image (desktop lifts it -6vh). */
  .cl-hero-panel {
    transform: none;
  }
  /* The screenshot layer becomes an in-flow media box showing the full scene.
     The template is its background; the activity overlays sit on top. Aspect
     ratio = the image's (2752×1536), so 'cover' shows the whole thing, no crop
     and no letterbox. */
  .cl-hero-screens {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    aspect-ratio: 2752 / 1536;
    border-radius: 0px;
    border: 1px solid #fff;
    overflow: hidden;
    background: url('/images/hero-template.webp') center / cover no-repeat;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 17px 10px -10px;
  }
  .cl-hero-shot {
    object-fit: cover;
  }
  /* The desktop tweak that narrows the demo video (#demo .cl-feature-inner:
     1.1fr 1fr) is id-specific, so it overrides landing.css's 1-column mobile
     rule and leaves the video squished beside the text. Force one column. */
  #demo .cl-feature-inner {
    grid-template-columns: 1fr;
  }
}