/* ==========================================================================
   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
    11. "All you need is a web browser"
    12. Global Appathon slide and panel ("Join today!")
   ========================================================================== */


/* 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 ======================================================== */
/* Moved to /css/ai2-impact.css (November 2026) so the About Us page can
   share the same circles. _layouts/home.html links it right after this
   file; the markup is _includes/impact-figures.html. */


/* 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;
  text-wrap: balance;
}

/* /get-started only (pick-something.html signin=true): a way in without a
   tutorial. Pulled up under the lede, which keeps its big bottom margin on
   the homepage. */
.ai2-tutorials__direct {
  max-width: 62ch;
  margin: calc(var(--ai2-space-md) * -1) auto var(--ai2-space-lg);
  color: var(--ai2-text);
  font-size: 1.05rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
/* Same colour as the YouTube link under the lanes. */
.ai2-tutorials__direct a {
  color: var(--ai2-brand-magenta);
  font-weight: 600;
  white-space: nowrap;
}

/* "Opens in App Inventor": marks the entries that open a starter project in
   the editor with the tutorial in its sidebar. Entries without it go to a
   tutorial page on this site. The fallbacks cover use outside a lane. */
.ai2-tut__opens {
  display: inline-block;
  margin-top: 0.3rem;
  padding: 0.05rem 0.5rem;
  /* Round ends on one line; a rounded box, not a blob, if it wraps. */
  border-radius: 0.8em;
  background-color: var(--ai2-lane-tint, var(--ai2-tint-lime));
  color: var(--ai2-lane-text, var(--ai2-brand-lime-text));
  /* Sized to fit a card's text column on one line at desktop widths. */
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}
/* In a card the label is the link's third grid item, on its own row
   across the full width of the card. Beside the thumbnail, the text column
   is too narrow for it on phones and at 992-1199px, where it broke onto
   three lines. */
.ai2-tut__link { row-gap: 0.35rem; }
.ai2-tut__link > .ai2-tut__opens {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 0;
}

.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;
}

/* News cards: an even grid (Oct 2026). Two equal columns; the two cards in a
   row are always the same height, and every card has the same parts in the
   same order (index.html): picture if the item has one, title, date, summary,
   link. So the cards line up across and down. Each row is as tall as its
   taller card, so a row of two text-only cards is shorter than a row with
   pictures instead of padding them with empty space. (For identical sizes
   everywhere, set grid-auto-rows: 1fr.) This replaced a two-column "column-count" box, which stacked cards of
   different heights and left them staggered. 1rem between cards both ways.
   One column at 798px and below, where cards keep their own height. */
.ai2-news__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 798px) {
  .ai2-news__grid { grid-template-columns: minmax(0, 1fr); }
}
/* Keeps View More 2rem below the cards. */
.mit_app_inventor .ai2-news__grid + .text-center {
  margin-top: 2rem;
}
.ai2-news-card {
  display: flex;
  flex-direction: column;
  margin: 0;
}
/* The picture: inside the card body under the date, with rounded corners
   like the blurb pictures used to have, and the same 3:2 shape on every
   card (cropped to fit). The img is placed absolutely so its own
   width/height attributes can't stretch the box. */
.ai2-news-card__media {
  position: relative;
  flex: none;
  aspect-ratio: 3 / 2;
  margin: 0.15rem 0 0.9rem;
  border-radius: 1rem;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.55);
}
.ai2-news-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ai2-news-card .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
/* Summary: at most four lines, so one long blurb can't stretch its row. */
.ai2-news-card__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
/* Cards with no picture: the summary fills the card down to the link,
   however tall the picture card beside it makes the row, and fades out at
   the bottom if there's more text than room. flex-basis 0 stops the text
   itself from making the row taller; min-height keeps a row of two
   text-only cards from collapsing (about seven lines). */
.ai2-news-card--text .ai2-news-card__summary {
  display: block;
  flex: 1 1 0;
  min-height: 11.5em;
  -webkit-line-clamp: none;
  line-clamp: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2em), transparent);
}
/* One column: each card keeps its own height, so give text-only cards a
   fixed eight lines instead. */
@media (max-width: 798px) {
  .ai2-news-card--text .ai2-news-card__summary {
    display: -webkit-box;
    flex: none;
    min-height: 0;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* The link sits at the bottom of every card, level across a row. */
.ai2-news-card__link {
  margin-top: auto;
  margin-bottom: 0;
}
/* 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; }

.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__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%; }

.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__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); }
}


/* 12. Global Appathon slide and panel ===================================== */
/* The banner came with "JOIN TODAY!" drawn into a green pill. The pill was
   taken out of the artwork (Oct 2026) and is drawn here instead, over the
   space it left, so the words are live text that Google Translate can
   translate. The art without the pill:
     landing_page_assets/carousel_banners_full/GlobalAppathon_join_*.jpg
     landing_page_assets/carousel_banners_small/GlobalAppathon_join_mobile_732.jpg
   (each has a *_notext.png master for future edits).

   The banner master is 2000x500 (4:1, like the other slides); the web
   copies are 1600x400 and 960x240. The pill sits where the old one did:
   33.78% across and 49.2% down the banner, 50.3% across and 25.6% down the
   phone card. Sizes are in cqw
   (percent of the slide's or panel's width: .ai2-slide and .ai2-panel__media
   are size containers), so it scales with the art. It grows sideways for a
   longer translation and wraps onto a second line only if it must. The
   HTML says "Join today!"; the capitals come from text-transform, so a
   translation reads as a normal sentence. */
/* width: max-content, because an absolutely placed box otherwise shrinks
   to the room between its left edge and the art's right edge (half the
   card, on phones) and wraps far too early. max-width then decides when a
   long translation really does need two lines. */
.ai2-ga-join {
  position: absolute;
  transform: translate(-50%, -50%);
  width: max-content;
  padding: 0.2em 0.85em 0.16em;
  border-radius: 999px;
  background: #d5f6a6;
  box-shadow: 0.07em 0.13em 0 #e3878b;
  color: #0c5caf;
  font-family: var(--ai2-display-font);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

/* The slide's image. height:auto matters: the img's height="400"
   attribute otherwise holds it at 400px while width:100% narrows it, which
   squeezes the art sideways on any screen under 1600px. */
.ai2-slide__art {
  display: block;
  width: 100%;
  height: auto;
}
.ai2-slide__pic { display: block; }

.ai2-ga-join--slide {
  left: 33.78%;
  top: 49.2%;
  max-width: 44cqw;
  font-size: 3.35cqw;
}

.ai2-ga-join--panel {
  left: 50.34%;
  top: 25.62%;
  max-width: 82cqw;
  font-size: 7cqw;
}

.ai2-slide:hover .ai2-ga-join,
.ai2-slide:focus-visible .ai2-ga-join,
.ai2-panel__media:hover .ai2-ga-join,
.ai2-panel__media:focus-visible .ai2-ga-join {
  background: #c4ee85;
}