/* ==========================================================================
   MIT App Inventor — homepage
   --------------------------------------------------------------------------
   Everything here replaces inline style="" attributes and empty <div> spacers
   that previously lived in index.html and _layouts/home.html.

   Requires ai2-tokens.css to be loaded first.

   Contents
     1. Layout rhythm
     2. Impact figures
     3. Tutorial starter strip
     4. News & Events
     5. Carousel captions — desktop
     6. Carousel panels  — small screens
     7. Responsive show/hide
     8. Display typeface
     9. Video
    10. Get Started: next-step cards
   ========================================================================== */


/* 1. Layout rhythm ========================================================= */

/* Replaces stacks of <div style="padding: Npx"></div>. */
.ai2-band {
  padding-top: var(--ai2-space-lg);
  padding-bottom: var(--ai2-space-lg);
}

.ai2-band--tight {
  padding-top: var(--ai2-space-sm);
  padding-bottom: var(--ai2-space-sm);
}


/* 2. Impact figures ======================================================== */
/* Green circles matching the set on appinventor.org, drawn in CSS with the
   figures as live text in index.html. (The old PNGs are still in
   /landing_page_assets/green_circles/ but nothing uses them.) */

.ai2-impact {
  padding: var(--ai2-space-xl) var(--ai2-space-sm);
  text-align: center;
}

/* The measure, not the type size, is what was making this headline feel
   cramped: at 30ch it broke into three short lines in a very wide band. The
   font-size below is unchanged; only the line length is. min() keeps it from
   running edge to edge on a wide monitor. */
.ai2-impact__heading {
  max-width: min(78ch, 92%);
  margin: 0 auto var(--ai2-space-lg);
  color: var(--ai2-ink);
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.ai2-impact__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The stat circles are text, not images, so the figures are easy to update
   and browser translation reaches the labels. One size knob, --impact-size;
   the type inside scales from it, keeping the proportions of the old PNGs
   (figure about a fifth of the diameter). The green is the one on the
   appinventor.org circles, a lighter step than --ai2-brand-lime. */
.ai2-impact__circle {
  --impact-size: clamp(9.5rem, 17vw, 13rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--impact-size) * 0.04);
  flex: none;
  width: var(--impact-size);
  aspect-ratio: 1 / 1;
  /* Side padding keeps a wrapped label inside the curve. */
  padding: 0 calc(var(--impact-size) * 0.1);
  border-radius: 50%;
  background-color: var(--ai2-impact-green);
  color: var(--ai2-ink);
  text-align: center;
}

.ai2-impact__figure {
  font-family: var(--ai2-display-font);
  font-size: calc(var(--impact-size) * 0.21);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

.ai2-impact__label {
  font-family: var(--ai2-display-font);
  font-size: max(0.8rem, calc(var(--impact-size) * 0.072));
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
}


/* 3. Tutorial starter strip ================================================ */
/* Three difficulty lanes above the news band. This is the funnel: a first-time
   visitor should be able to pick a lane and be inside a tutorial in one click.
   Each lane is tinted with one of the brand colors so the lanes read as peers
   rather than as a ranking. */

.ai2-tutorials {
  max-width: var(--ai2-max-width);
  margin: 0 auto;
  padding: var(--ai2-space-lg) var(--ai2-space-sm) var(--ai2-space-md);
}

.ai2-tutorials__heading {
  margin: 0 0 var(--ai2-space-xs);
  color: var(--ai2-brand-magenta);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 700;
  text-align: center;
}

.ai2-tutorials__lede {
  max-width: 62ch;
  margin: 0 auto var(--ai2-space-lg);
  color: var(--ai2-text);
  font-size: 1.05rem;
  line-height: 1.5;
  text-align: center;
}

.ai2-tutorials__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ai2-space-md);
  align-items: stretch;
}

@media (max-width: 991px) {
  .ai2-tutorials__track { grid-template-columns: 1fr; }
}

.ai2-tutgroup {
  display: flex;
  flex-direction: column;
  padding: var(--ai2-space-md);
  background-color: var(--ai2-lane-tint);
  border-top: 5px solid var(--ai2-lane-accent);
  border-radius: var(--ai2-radius-card);
}

.ai2-tutgroup--beginner {
  --ai2-lane-tint: var(--ai2-tint-lime);
  --ai2-lane-accent: var(--ai2-brand-lime);
  --ai2-lane-text: var(--ai2-brand-lime-text);
}

.ai2-tutgroup--intermediate {
  --ai2-lane-tint: var(--ai2-tint-teal);
  --ai2-lane-accent: var(--ai2-brand-teal);
  --ai2-lane-text: var(--ai2-brand-teal-text);
}

.ai2-tutgroup--advanced {
  --ai2-lane-tint: var(--ai2-tint-magenta);
  --ai2-lane-accent: var(--ai2-brand-magenta);
  --ai2-lane-text: var(--ai2-brand-magenta);
}

.ai2-tutgroup__label {
  margin: 0;
  color: var(--ai2-lane-text);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* min-height reserves two lines whether the note runs to one or two, so the
   first tutorial card starts at the same y in all three lanes. */
.ai2-tutgroup__note {
  min-height: 2.66em;
  margin: 0.25rem 0 0;
  color: var(--ai2-text);
  font-size: 0.95rem;
  line-height: 1.4;
}

@media (max-width: 991px) {
  .ai2-tutgroup__note { min-height: 0; }
}

.ai2-tutgroup__list {
  display: grid;
  gap: 0.7rem;
  margin: var(--ai2-space-sm) 0 0;
  padding: 0;
  list-style: none;
}

.ai2-tut__link {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.85rem;
  align-items: center;
  padding: 0.6rem;
  background-color: var(--ai2-surface);
  border-radius: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.ai2-tut__link:hover,
.ai2-tut__link:focus-visible {
  box-shadow: 0 0 0 2px var(--ai2-lane-accent);
  color: inherit;
  text-decoration: none;
}

.ai2-tut__link:focus-visible {
  outline: 3px solid var(--ai2-focus);
  outline-offset: 2px;
}

.ai2-tut__thumb {
  width: 5.5rem;
  height: 4.25rem;
  object-fit: cover;
  background-color: var(--ai2-surface);
  border-radius: 0.5rem;
}

/* For artwork that must not be cropped — a logo, a wordmark. */
.ai2-tut__thumb--contain {
  object-fit: contain;
  padding: 0.2rem;
}

.ai2-tut__title {
  display: block;
  color: var(--ai2-ink);
  font-weight: 600;
  line-height: 1.25;
}

.ai2-tut__blurb {
  display: block;
  margin-top: 0.15rem;
  color: var(--ai2-text-muted);
  font-size: 0.875rem;
  line-height: 1.35;
}

/* margin-top:auto pins this to the bottom of the lane, so the three "see all"
   links line up across lanes of unequal height. */
.ai2-tutgroup__more {
  margin-top: auto;
  padding-top: var(--ai2-space-sm);
  color: var(--ai2-lane-text);
  font-weight: 700;
  text-decoration: none;
}

.ai2-tutgroup__more:hover,
.ai2-tutgroup__more:focus {
  color: var(--ai2-lane-text);
  text-decoration: underline;
}


/* 4. News & Events ========================================================= */

.ai2-news {
  padding-left: 10%;
  padding-right: 10%;
}

.ai2-news__heading {
  font-weight: 700;
  text-align: center;
}

/* The same 1rem between cards across and down. The cards sit in a
   two-column column-count box (mit_app_inventor.css), so the space down is
   a bottom margin on each card and the space across is the column gap. */
.mit_app_inventor .ai2-news .card-columns {
  column-gap: 1rem;
}
.mit_app_inventor .ai2-news .card-columns > .card {
  margin-bottom: 1rem;
}
/* Keeps View More 2rem below the cards (1rem card margin + 1rem here). */
.mit_app_inventor .ai2-news .card-columns + .text-center {
  margin-top: 1rem;
}

/* Blurb images carry width/height attributes (so the page does not jump as
   lazy-loaded images arrive) and inline percentage widths; this keeps their
   proportions. */
.ai2-news .card-body img {
  max-width: 100%;
  height: auto;
}

/* Card titles are h3 rather than h4 so the heading levels on a page run in
   order for screen readers (h1 page title -> h2 section -> h3 card). Bootstrap
   sizes headings by tag, so hold the size they had. */
.mit_app_inventor .news-cards .card-title {
  font-size: 1.5rem;
}

/* Publication date under each card title (same format as the News page). */
.ai2-news__date {
  margin: -0.25rem 0 0.6rem;
  color: var(--ai2-text);
  font-size: 0.9rem;
  font-weight: 500;
}

/* News card tints ----------------------------------------------------------
   Replaces the single flat #e4e4e4 with very light versions of the five brand
   colors, cycled across the cards in index.html. Specificity has to beat
   `.mit_app_inventor .news-cards .card` in mit_app_inventor.css (0,3,0), hence
   the repeated ancestors below. The hairline is an inset shadow rather than a
   border so the existing 1rem radius and box model are untouched. */

.mit_app_inventor .news-cards .card.ai2-card--orange {
  background-color: var(--ai2-tint-orange);
  box-shadow: inset 0 0 0 1px var(--ai2-tint-orange-edge);
}

.mit_app_inventor .news-cards .card.ai2-card--lime {
  background-color: var(--ai2-tint-lime);
  box-shadow: inset 0 0 0 1px var(--ai2-tint-lime-edge);
}

.mit_app_inventor .news-cards .card.ai2-card--magenta {
  background-color: var(--ai2-tint-magenta);
  box-shadow: inset 0 0 0 1px var(--ai2-tint-magenta-edge);
}

.mit_app_inventor .news-cards .card.ai2-card--slate {
  background-color: var(--ai2-tint-slate);
  box-shadow: inset 0 0 0 1px var(--ai2-tint-slate-edge);
}

.mit_app_inventor .news-cards .card.ai2-card--teal {
  background-color: var(--ai2-tint-teal);
  box-shadow: inset 0 0 0 1px var(--ai2-tint-teal-edge);
}

/* Was a <button onclick="window.open(...)">. Now a real link, so it works
   with middle-click, keyboard, and screen readers. */
.ai2-viewmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 155px;
  min-height: 45px;
  padding: 0 1.25rem;
  background-color: var(--ai2-magenta);
  color: var(--ai2-surface);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: 0.75rem;
}

.ai2-viewmore:hover,
.ai2-viewmore:focus {
  background-color: #8d1d67;
  color: var(--ai2-surface);
  text-decoration: none;
}


/* 5. Carousel captions — desktop =========================================== */

/* container-type makes this element a container-query container, so the cqw
   unit below means "percent of the slide's width" — which is also the
   artwork's width. That is what lets a caption keep its place inside a
   feature drawn into the image as the viewport changes. vw would not: it
   tracks the window, not the slide. */
.ai2-slide {
  position: relative;
  display: block;
  container-type: inline-size;
  color: inherit;
  text-decoration: none;
}

.ai2-slide:hover,
.ai2-slide:focus {
  color: inherit;
  text-decoration: none;
}

/* Summit slide carries a color wash over the photo. */
.ai2-slide__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(163, 31, 52, 0.7) 0%,
    rgba(100, 10, 20, 0.75) 100%
  );
}

/* Slide 1 — split band -----------------------------------------------------
   The photograph is 800px wide, which is the whole design constraint. Run it
   full-bleed at a 1440px viewport and it has to upscale 1.8x and goes soft.
   Held to the right 57% it needs 821px, so it renders at about 1.03x — near
   native — and the cream field left of it gives the headline a clean place to
   sit instead of fighting the picture.

   Keep that ratio in mind before swapping the artwork: a larger source can
   take a wider share, a smaller one cannot. */
.ai2-slide--split {
  aspect-ratio: 4 / 1;
  background-color: var(--ai2-slide-field);
}

.ai2-slide__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 57%;
  height: 100%;
  object-fit: cover;
  /* Biased above centre: the students' hands and the chart sit high in frame. */
  object-position: center 42%;
}

/* Heart slide. The source photo stacks faces above phone, so a centred crop
   loses the app. students_heart_app_wide_*.jpg is pre-cropped at 65% down to
   the 2.28:1 shape of the photo box (57% of a 4:1 slide), so it needs no
   offset here -- and ships far fewer pixels. Re-crop if the split changes. */
.ai2-slide--split.ai2-slide--heart .ai2-slide__photo {
  object-position: center;
}

/* Dissolves the photo into the field. Without it the two butt together on a
   hard vertical line and read as two images pasted side by side. */
.ai2-slide__feather {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--ai2-slide-field) 0%,
    var(--ai2-slide-field) 40%,
    var(--ai2-slide-field-fade) 54%
  );
}

/* Slide 1 headline. Lives in the cream field, left of the photo.
   It stays live HTML text rather than being set into the artwork, so Google
   Translate localizes it like any other text on the page. The measure is in
   ch rather than px for the same reason: German and Finnish run ~30% longer
   than English and need to wrap inside the field, not over the photo. */
.carousel-caption.ai2-caption--overview {
  top: 50%;
  right: 45%;
  bottom: auto;
  /* Clears the prev control, which Bootstrap gives the left 15% of the
     carousel. At left:3% the arrow sat on top of the headline. */
  left: 17%;
  transform: translateY(-50%);
  z-index: 2;
  padding: 0;
  text-align: left;
}

.ai2-caption__headline {
  margin: 0;
  max-width: 14ch;
  color: var(--ai2-slide-field-ink);
  font-weight: 700;
  /* Sized to stay on ONE line inside the empty band at the top of the
     artwork. Do not add a max-width here: a second line runs over the
     blocks screenshot. */
  font-size: clamp(0.95rem, 2.9cqw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.ai2-caption--summit { bottom: 13%; text-align: center; }

/* Slide 3 — this caption has to sit inside the green pill drawn into the
   artwork. GA2026_Meet_winners_Destop.png is 2243x562; the pill occupies
   x 27.6%-72.5% and y 38.3%-60.9% of it. Those four numbers are the box
   below, so the caption tracks the pill at every width. Re-measure them if
   the artwork is ever replaced. */
.carousel-caption.ai2-caption--winners {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 38.3%;
  right: 27.5%;
  bottom: auto;
  left: 27.6%;
  height: 22.6%;
  padding: 0;
  text-align: center;
}

.ai2-caption__eyebrow {
  width: calc(12rem + 120 * ((100vw - 320px) / 960));
  margin: auto;
  color: #e9e9e9;
  font-weight: 700;
  font-size: calc(0.3rem + 12 * ((100vw - 320px) / 960));
  line-height: 140%;
  letter-spacing: 2px;
}

.ai2-caption__title {
  margin: auto;
  color: #e9e9e9;
  font-weight: 900;
  font-size: calc(0.6rem + 12 * ((100vw - 320px) / 680));
  line-height: 100%;
  letter-spacing: 4px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.ai2-caption__title--winners {
  color: #0b5cad;
  font-weight: 900;
  font-size: clamp(0.85rem, 3.4cqw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  /* A little air between MEET, THE and WINNERS!. Still only about 78% of
     the pill's width at every size. */
  word-spacing: 0.22em;
  white-space: nowrap;
  text-shadow: none;
}

.ai2-caption__body {
  margin: auto;
  color: #e9e9e9;
  font-weight: 350;
  font-size: calc(0.7rem + 6 * ((100vw - 320px) / 680));
}

.ai2-caption__cta {
  width: calc(3rem + 120 * ((100vw - 320px) / 960));
  margin: auto;
  color: #8a1a2c;
  background-color: #fbfcf9;
  font-weight: 700;
  line-height: 2.5em;
  border-radius: 0.2rem;
}

.ai2-caption__gap { height: 1vw; }
.ai2-caption__gap--sm { height: 0.4vw; }


/* 6. Carousel panels — small screens ======================================= */

.ai2-panel {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ai2-panel + .ai2-panel {
  margin-top: 10px;
}

/* The anchor, not the panel, is the positioning context, and it is exactly as
   wide as the artwork. That is what makes the caption percentages below
   percentages OF THE IMAGE. They used to be measured against .ai2-panel while
   the image was 90% of it and centered, which put every caption 5% off. */
.ai2-panel__media {
  position: relative;
  display: block;
  width: 90%;
  margin: 0 auto;
  container-type: inline-size;
  /* The panel is an <a>, so without this the headline inside it inherits the
     browser's default link blue and underline. .ai2-slide does the same on
     the desktop side. */
  color: inherit;
  text-decoration: none;
}

.ai2-panel__media:hover,
.ai2-panel__media:focus {
  color: inherit;
  text-decoration: none;
}

.ai2-panel__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ai2-radius-card);
}

.ai2-panel__caption {
  position: absolute;
  text-align: center;
}

/* Panel 1 — the same slide, unstacked. Below 768px the split stops being a
   split: headline in the cream field, photo full width beneath it. That also
   shows the whole frame rather than the desktop crop, so all four students
   are visible. */
.ai2-panel__media--split {
  background-color: var(--ai2-slide-field);
  border-radius: var(--ai2-radius-card);
  overflow: hidden;
}

.ai2-panel__field {
  padding: 1.15rem 1rem 0.9rem;
}

.ai2-panel__media--split img {
  border-radius: 0;
}

.ai2-panel__caption--summit { left: 14.4%; right: 13.4%; bottom: 10%; }

/* Meet_winners_Mobile.png is 878x750; the pill is x 20.3%-78.6%,
   y 35.7%-64.0%. Same treatment as the desktop slide. */
.ai2-panel__caption--winners {
  display: flex;
  align-items: center;
  justify-content: center;
  left: 20.3%;
  right: 21.4%;
  top: 35.7%;
  height: 28.3%;
}

.ai2-panel__headline {
  margin: 0 auto;
  color: var(--ai2-slide-field-ink);
  font-weight: 700;
  font-size: clamp(1rem, 6.4cqw, 2.25rem);
  line-height: 1.15;
  text-wrap: balance;
}

.ai2-panel__title {
  margin: auto;
  color: #e3e2e2;
  font-weight: 900;
  font-size: 1.3em;
  line-height: 100%;
  letter-spacing: 3.5px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.ai2-panel__title--winners {
  margin: 0;
  color: #0b5cad;
  font-size: clamp(1.1rem, 9cqw, 3rem);
  /* Phones stack MEET THE over WINNERS!, so the extra room is both
     between the words and between the two lines. */
  line-height: 1.12;
  letter-spacing: -0.02em;
  word-spacing: 0.22em;
  text-shadow: none;
}

.ai2-panel__body {
  margin: auto;
  color: #e3e2e2;
  font-weight: 500;
  font-size: 1.1em;
  line-height: 100%;
}

.ai2-panel__cta {
  width: calc(8rem + 80 * ((100vw - 320px) / 960));
  margin: auto;
  color: #8a1a2c;
  background-color: #fbfcf9;
  font-weight: 800;
  line-height: 2em;
  border-radius: 0.2rem;
}

.ai2-panel__gap--sm { height: 0.5vw; }
.ai2-panel__gap--lg { height: 2.3vw; }


/* 7. Responsive show/hide for the two carousel treatments ================== */
/* Replaces four near-identical media queries that were inline in home.html,
   two of which had byte-identical bodies. */

.ai2-carousel-desktop { display: none; }
.ai2-carousel-mobile { display: block; }

@media (min-width: 768px) {
  .ai2-carousel-desktop { display: block; }
  .ai2-carousel-mobile { display: none; }
}

/* Was .mobile-spacer, used by the old header markup. Kept because deeper
   pages may still reference it. */
.mobile-spacer {
  padding-top: 20px;
}


/* 8. Display typeface ====================================================== */
/* One face for every big line of friendly text on the page. The family and
   weight are tokens (ai2-tokens.css) so the ?font= preview can swap them. */

.ai2-caption__headline,
.ai2-panel__headline,
.ai2-caption__sub,
.ai2-panel__sub,
.ai2-impact__heading,
.ai2-tutorials__heading,
.ai2-tutorials__lede,
.ai2-news__heading,
.ai2-video__heading {
  font-family: var(--ai2-display-font);
}

.ai2-caption__headline,
.ai2-panel__headline,
.ai2-impact__heading,
.ai2-tutorials__heading,
.ai2-news__heading,
.ai2-video__heading {
  font-weight: var(--ai2-display-weight);
  letter-spacing: 0;
}

/* The deck under "Pick something to build" and the hero sublines: same face,
   lighter, a touch larger because rounded faces run small. */
.ai2-tutorials__lede {
  font-size: 1.2rem;
  font-weight: 500;
}

/* Keeps each short sentence of a headline on one line, so "Your idea. Your
   app. Your phone." breaks between sentences rather than inside them. */
.ai2-nowrap { white-space: nowrap; }

/* Hero sublines -- the plain-language promise under the heart headline. */
.ai2-caption__sub {
  max-width: 24ch;
  margin-top: 0.6em;
  color: var(--ai2-slide-field-ink);
  font-size: clamp(0.7rem, 1.35cqw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}

.ai2-panel__sub {
  max-width: 30ch;
  margin: 0.4rem auto 0;
  color: var(--ai2-slide-field-ink);
  font-size: clamp(0.9rem, 3.6cqw, 1.25rem);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}

.ai2-panel__media picture { display: block; }


/* 9. Video ================================================================= */
/* Click-to-play facade; see js/ai2-video.js. The frame holds its 16:9 shape
   before and after the swap, so nothing below it moves. */

.ai2-video {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--ai2-space-md) var(--ai2-space-sm) var(--ai2-space-sm);
  text-align: center;
}

.ai2-video__heading {
  margin: 0 0 var(--ai2-space-sm);
  color: var(--ai2-brand-teal-text);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.ai2-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--ai2-ink);
  border-radius: var(--ai2-radius-card);
}

/* Phone-shaped clips (the purple button video is 9:16). */
.ai2-video__frame--portrait {
  aspect-ratio: 9 / 16;
  max-width: 320px;
  margin: 0 auto;
}

.ai2-video__play,
.ai2-video__player {
  display: block;
  width: 100%;
  height: 100%;
}

.ai2-video__play {
  position: relative;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.ai2-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai2-video__badge {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem 0.7rem 1rem;
  background-color: var(--ai2-brand-orange);
  color: var(--ai2-ink);
  font-family: var(--ai2-display-font);
  font-size: 1.1rem;
  font-weight: var(--ai2-display-weight);
  border-radius: var(--ai2-radius-pill);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease;
}

.ai2-video__play:hover .ai2-video__badge,
.ai2-video__play:focus-visible .ai2-video__badge {
  transform: translate(-50%, -50%) scale(1.06);
}

.ai2-video__play:focus-visible {
  outline: 3px solid var(--ai2-focus);
  outline-offset: 3px;
}

.ai2-video__frame.is-loading .ai2-video__badge span::after {
  content: "\2026";
}

.ai2-video__error {
  margin: 0.6rem 0 0;
  color: var(--ai2-text-muted);
  font-size: 0.875rem;
}

.ai2-video__error { color: #9b1c1c; }

@media (prefers-reduced-motion: reduce) {
  .ai2-video__badge { transition: none; }
}


/* On /get-started a hairline under the menu separates it from the help
   cards below. */
.ai2-getstarted-menu .ai2-tutorials {
  margin-bottom: var(--ai2-space-lg);
  border-bottom: 1px solid var(--ai2-rule);
}



/* YouTube pointer under the three lanes (homepage and /get-started). One
   quiet line: no embed, so it costs no bandwidth. */
.ai2-tutorials__video {
  margin: var(--ai2-space-md) 0 0;
  color: var(--ai2-text);
  font-family: var(--ai2-display-font);
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
}

.ai2-tutorials__video a {
  color: var(--ai2-brand-magenta);
  font-weight: 600;
}


/* 10. Get Started: next-step cards ======================================== */

.gs-next {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ai2-space-md);
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--ai2-space-sm);
}

@media (max-width: 991px) {
  .gs-next { grid-template-columns: 1fr; }
}

.gs-card {
  padding: var(--ai2-space-md);
  background: var(--gs-tint);
  border-left: 5px solid var(--gs-accent);
  border-radius: var(--ai2-radius-card);
  color: var(--ai2-text);
  font-size: 1.05rem;
  line-height: 1.55;
}

.gs-card--lime   { --gs-tint: var(--ai2-tint-lime);   --gs-accent: var(--ai2-brand-lime); }
.gs-card--orange { --gs-tint: var(--ai2-tint-orange); --gs-accent: var(--ai2-brand-orange); }
.gs-card--teal   { --gs-tint: var(--ai2-tint-teal);   --gs-accent: var(--ai2-brand-teal); }

.mit_app_inventor .gs-card h2,
.mit_app_inventor .gs-more h2 {
  margin: 0 0 0.6rem;
  color: var(--ai2-ink);
  font-family: var(--ai2-display-font);
  font-size: 1.4rem;
  font-weight: var(--ai2-display-weight);
}

.gs-card p { margin: 0 0 0.75rem; }
.gs-card p:last-child { margin-bottom: 0; }

.gs-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.gs-card a { font-weight: 600; }

a.gs-btn {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  background: var(--ai2-brand-orange);
  color: var(--ai2-ink);
  border-radius: var(--ai2-radius-pill);
  text-decoration: none;
}

a.gs-btn:hover,
a.gs-btn:focus-visible {
  background: var(--ai2-orange-dark);
  color: var(--ai2-ink);
  text-decoration: none;
}

.gs-more {
  max-width: 760px;
  margin: var(--ai2-space-lg) auto var(--ai2-space-xl);
  padding: 0 var(--ai2-space-sm);
  font-size: 1.05rem;
  line-height: 1.6;
}

.gs-more ul { margin: 0; padding-left: 1.2rem; }
.gs-more li + li { margin-top: 0.35rem; }
.gs-more a { font-weight: 600; }


/* 11. "All you need is a web browser" ===================================== */
/* The setup note just above "Pick something to build" (homepage and
   /get-started); markup in _includes/all-you-need.html. One tinted card,
   narrower than the menu so it reads as a note, not a fourth lane. */

.ai2-setup {
  max-width: 860px;
  margin: var(--ai2-space-md) auto 0;
  padding: var(--ai2-space-md);
  background: var(--ai2-tint-lime);
  border-left: 5px solid var(--ai2-brand-lime);
  border-radius: var(--ai2-radius-card);
  color: var(--ai2-text);
  font-size: 1.05rem;
  line-height: 1.55;
}

.mit_app_inventor .ai2-setup h2 {
  margin: 0 0 0.6rem;
  color: var(--ai2-ink);
  font-family: var(--ai2-display-font);
  font-size: 1.4rem;
  font-weight: var(--ai2-display-weight);
}

.ai2-setup p { margin: 0 0 0.6rem; }
.ai2-setup p:last-child { margin-bottom: 0; }
.ai2-setup strong { color: var(--ai2-ink); }
.ai2-setup a { font-weight: 600; }

/* Narrower than the card plus a margin (phones, small tablets): keep it
   off the screen edges. */
@media (max-width: 891.98px) {
  .ai2-setup { margin-left: var(--ai2-space-sm); margin-right: var(--ai2-space-sm); }
}