/* Clean hero (founder 2026-10-09: "I want the HERO section clean ... don't remove the features"). Layout and looks only. */
/* Left: the app announcement as one calm card */
.hero-copy .app-launch { margin: 0 0 30px; padding: 16px 18px 14px; max-width: 520px; border: 1px solid rgba(34,197,94,.45); background: rgba(34,197,94,.07); box-shadow: none; }
.hero-copy .app-launch .hx-glare { display: none; }
.hero-copy .app-launch-tag { font-size: .66rem; letter-spacing: .16em; }
.hero-copy .app-launch h2 { margin: 8px 0 4px; font-size: 1.18rem; }
.hero-copy .app-launch p { margin: 0 0 12px; font-size: .9rem; line-height: 1.5; }
.hero-copy .app-launch-btns a { padding: 10px 18px; font-size: .84rem; }
.hero-copy .app-launch-desk { margin-top: 12px; padding-top: 0; border-top: 0; font-size: .82rem; gap: 6px 14px; }
.hero-copy .app-launch-desk span { font-weight: 500; }
.hero-copy .app-launch-desk a { padding: 0; border: 0; background: none; font-size: .84rem; color: #86efac; }
.hero-copy .app-launch-desk a:hover, .hero-copy .app-launch-desk a:focus-visible { background: none; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero-copy .app-launch-desk svg { width: 14px; height: 14px; }
/* Left: headline, one line of AI examples without a box, the button and the live line */
.hero-copy .lede { max-width: 540px; }
.hero-copy .ai-prompt { margin-top: 22px; padding: 0; border: 0; background: none; box-shadow: none !important; max-width: 520px; display: flex; align-items: center; gap: 10px; }
.hero-copy .ai-prompt-icon { width: 26px; height: 26px; flex: none; }
.hero-copy .ai-prompt-icon svg { width: 14px; height: 14px; }
.hero-copy .ai-prompt-label { font-size: .95rem; font-weight: 400; letter-spacing: 0; text-transform: none; flex: none; }
.hero-copy .ai-prompt-label::after { content: ":"; }
.hero-copy .ai-prompt-line { flex: 1; min-width: 0; }
.hero-copy .ai-prompt-text { color: #4ade80; }
.hero-copy .hero-howto { margin-top: 24px !important; }
#heroLive { margin-top: 12px; }
#heroLive .hl-rot-line { font-size: .84rem; opacity: .85; }
@media (min-width: 900px) {
  /* Right: under the map, three tidy rows instead of five */
  .hero-map { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; align-content: start; }
  .hero-map > * { grid-column: 1 / -1; min-width: 0; }
  .hero-map > .map-legend { grid-column: 1; grid-row: 4; justify-content: flex-start; align-items: center; margin-top: 14px; margin-bottom: 0; gap: 16px; font-size: .82rem; }
  .hero-map > .mw-row { grid-column: 2; grid-row: 4; margin-top: 14px; margin-bottom: 0; justify-content: flex-end; }
  .hero-map > .map-legend span { margin: 0; }
  .hero-map > .map-times { grid-row: 5; }
  .hero-map > .mh { grid-row: 6; }
  .hero-map > .map-panel { grid-row: 1; }
  .hero-map > .wow-below { grid-row: 2; }
  .hero-map > .mh-rail { grid-row: 3; }
  /* one stats strip: a single frame, thin dividers, a quiet Watch us grow */
  .hero-map .mh-rail { gap: 0; margin-top: 14px; border: 1px solid rgba(148,163,184,.22); background: rgba(10,16,34,.55); grid-auto-rows: minmax(48px, auto); }
  /* each piece keeps a solid fill, so the newest message still covers the one under it */
  .hero-map .mh-rail > * { border: 0 !important; background: #0b1328 !important; box-shadow: none !important; }
  .hero-map .mh-rail > *::before { display: none; }
  .hero-map .mh-rail > * + * { border-left: 1px solid rgba(148,163,184,.18) !important; }
  .hero-map .mh-rail > .wow-grow-btn:not(.on) { color: #ffd23f; }
  .hero-map .mh-rail > .wow-grow-btn:not(.on):hover { background: #1a1a22 !important; }
  .hero-map .mw-find { min-height: 32px; }
  /* class times: one quiet line */
  .hero-map .map-times { margin-top: 12px; padding: 8px 12px; border: 1px solid rgba(148,163,184,.16); background: rgba(10,16,34,.4); max-width: none !important; }
  .hero-map .map-times-head { font-size: .82rem; }
  .hero-map .ct-open-btn { min-height: 30px; }
  /* tool row: the same calm outline buttons */
  .hero-map .mh { margin-top: 12px; }
  .hero-map .mh-btn, .hero-map .mh-find input { background: rgba(10,16,34,.4) !important; border-color: rgba(148,163,184,.22) !important; }
  .hero-map .mh-btn:hover { border-color: #22c55e !important; }
}
/* Phones: a shorter card */
@media (max-width: 640px) {
  .hero-copy .app-launch { padding: 14px; margin-bottom: 26px; }
  .hero-copy .app-launch h2 { font-size: 1.12rem; }
  .hero-copy .app-launch p { font-size: .88rem; }
  .hero-copy .app-launch-btns a { padding: 11px 10px; }
  .hero-copy .app-launch-desk span { flex-basis: auto; }
  .hero-copy .app-launch-desk a { flex: none; padding: 0; }
  .hero-copy .ai-prompt { flex-wrap: wrap; row-gap: 2px; }
  .hero-copy .ai-prompt-line { flex-basis: 100%; padding-left: 36px; }
}
/* Light theme: darker greens so the links and the typed text stay easy to read */
:root[data-theme="light"] .hero-copy .app-launch-desk a { color: #15803d; }
:root[data-theme="light"] .hero-copy .app-launch-desk a:hover, :root[data-theme="light"] .hero-copy .app-launch-desk a:focus-visible { color: #14532d; }
:root[data-theme="light"] .hero-copy .ai-prompt-text { color: #15803d; }
/* The announcement is short now: the card fits its text (founder 2026-10-09: "Reduce the container size as well since it's short now") */
@media (min-width: 641px) { .hero-copy .app-launch { width: fit-content; max-width: 100%; padding: 14px 22px 14px 18px; } }
/* "About" badges under the photo: each stays on one line (founder 2026-10-09: "Put this in one row: 14+ Years in Software Engineering") */
#about .badge-row .badge { white-space: nowrap; }
/* Student Stories heading: the box is as wide as its text and resizes with it (founder 2026-10-09: "The container size should be the text size here") */
#testimonials .section-head { width: fit-content; max-width: min(980px, 100%); }
/* Student Stories: every box fits its content (founder 2026-10-09: "No long container that's not needed. Every container should be the text size there").
   The story card is as tall as its quote (no longer stretched to the names list); on desktop the 18 names sit in two columns of name-sized rows. */
#testimonials .stories { align-items: start; }
#testimonials .stories-stage { min-height: 0; }
@media (min-width: 901px) {
  #testimonials .stories { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  #testimonials .stories-people { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 6px 10px; align-items: start; }
  #testimonials .stories-person { width: auto; max-width: 100%; padding: 8px 14px 8px 8px; }
  #testimonials .stories-person > span:last-child { min-width: 0; }
}

/* Fewer buttons in the hero (founder 2026-10-10: "REMOVE IT"): Join them, Watch us grow, Find me on the map,
   List view, Country Cup and Share card are hidden on the page. They all come back in the full-screen map. */
.hero-map:not(.map-fs):not(:fullscreen) .map-card-join,
.hero-map:not(.map-fs):not(:fullscreen) .wow-grow-btn,
.hero-map:not(.map-fs):not(:fullscreen) .mw-find,
.hero-map:not(.map-fs):not(:fullscreen) .mh-btn { display: none !important; }

/* App panel: smaller sign-in buttons, kept to the right (founder 2026-10-18: "Make this
   buttons smaller and move it to the right"). On wide screens hero-stack.css stretches the
   pair across the panel (grid 1fr 1fr, width:100%, 13px padding), which made them the
   heaviest thing in the hero. They now size to their own text and sit against the right
   edge, with the desktop-app line under them following the same edge. The heading and the
   sentence stay left, so the panel reads left to right and the actions gather in one place.
   Only >=1240px: below that hero-stack's grid never applies and the pair already fills the
   narrower panel, so there is nothing to move. The extra .hero beats hero-stack.css, which
   loads after this file. */
@media (min-width: 1240px) {
  .hero .hero-copy .app-launch-btns { grid-template-columns: auto auto; justify-content: end; gap: 8px; }
  .hero .hero-copy .app-launch-btns a { width: auto; padding: 9px 15px; font-size: .78rem; letter-spacing: .03em; }
  .hero .hero-copy .app-launch-btns a svg { width: 15px; height: 15px; }
  .hero .hero-copy .app-launch-desk { justify-content: flex-end; }
}

/* Hero headline and the sentence under it: kept, but smaller (founder 2026-10-18, first
   "REMOVE THIS ...", then "Keep this ... but make it smaller"). They were briefly hidden;
   that is undone here.
   The headline came out at 57.6px on a 1440px screen, which left it competing with the app
   panel beside it. It is now 36.8px there, and the sentence 15.2px, so the hero reads
   headline -> sentence -> typed AI line -> How it works without one part shouting over the
   rest. The copy column goes from 513px tall to 411px.
   Sizing stays in the same shape as hero-live.css:73, clamp() on container units, so it
   still scales with the column instead of the viewport: the middle value is what moves
   (8cqi -> 5.4cqi) and the ceiling comes down with it. The floor is barely touched so small
   screens, which were never the problem, look as they did.
   Note for anyone tempted to delete these two elements rather than resize them: that h1 is
   the ONLY one on the homepage, and ai-fx.js anchors the typed AI line on the lede
   (`lede.parentNode.insertBefore(box, lede.nextSibling)`, returning early when it is
   missing), so removing the paragraph takes the typed line with it. */
.hero .hero-copy .hero-title { font-size: clamp(1rem, 5.4cqi, 2.3rem); }
.hero .hero-copy > .lede { font-size: .95rem; }

/* ===== Your Instructor: one premium container (founder 2026-10-18: "Put this in a container
   and give that section ultra premium design"). The section used to sit straight on the page
   background with no surface of its own, and the copy ran the full 918px column, so the lines
   were long and the whole thing read as loose.
   The treatment follows premium.css, which nginx injects last on every page as the house
   "ultra premium glow": the SAME --pg-shadow / --pg-ring tokens, so this card matches every
   other container on the site and follows light and dark theme on its own. Like that file it
   stays glow-only - no backdrop-filter and no animated ring, because dozens of blurred layers
   jank on the mid-range Android most students are on.
   Nothing here moves or resizes anything: the grid, the photo, the badges and the buttons are
   untouched. It adds a surface, a ring, padding and depth, caps the card at 1120px so the
   text is not stranded against a wide empty right side, and caps the paragraphs at 58ch for a
   comfortable line. The eyebrow gets a small accent rule to start the card off.
   No corner radius on purpose: square.css, which nginx also injects after every page's CSS,
   sets `border-radius: 0 !important` on everything but true circles (founder 2026-10-06,
   "Remove border radius from any button or panel that doesn't need it"). Square is the house
   shape here, so asking for a radius would only be overridden.
   No HTML change: .about-grid is already the wrapping div. */
#about .about-grid {
  position: relative;
  isolation: isolate;                 /* keeps the ::after glow behind the content, not the page */
  max-width: 1120px;
  padding: clamp(26px, 3vw, 52px);
  border: 1px solid var(--pg-ring, var(--border));
  background:
    radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface) 66%, transparent));
  box-shadow: var(--pg-shadow);
  transition: box-shadow .35s ease, border-color .35s ease;
}
#about .about-grid:hover { box-shadow: var(--pg-shadow-hi); border-color: var(--pg-ring-hi); }
#about .about-grid::after {           /* a second, cooler glow in the far corner, static */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%);
}
#about .about-copy .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
#about .about-copy .eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
#about .about-copy > p { max-width: 58ch; }
@media (max-width: 900px) {
  /* .container's own 24px side padding becomes the card's inner padding once it is a card, so
     give it its own margin or it would touch both screen edges. */
  #about .about-grid { margin-left: 16px; margin-right: 16px; padding: 24px 20px; }
}

/* Nothing in the instructor card may run past its edge (founder 2026-10-18: "make sure the
   texts don't overflow here"). Two real overflows, found by measuring every element in the
   card against the card's own box from 320px to 1920px:
   1. The badges. styles.css sizes the photo column with fr units, and hero-clean.css:74 keeps
      each badge on one line (founder 2026-10-09, "Put this in one row: 14+ Years in Software
      Engineering"). A badge that cannot wrap cannot shrink either, so the longest one needed
      293px in a 246px column and, because .about-photo-wrap centres its children, hung ~24px
      off BOTH sides - 4px of it outside the card. minmax(min-content, ...) lets the column
      grow to whatever the widest badge needs, so the words stay on one line AND stay inside.
      The ratios are repeated from styles.css:670 / :693 because only the first value changes.
   2. The four buttons. .about-actions is flex with nowrap and they add up to 759px in a 738px
      row, so this was ALREADY 21px over before this card existed; narrowing the column made
      it worse. They now wrap onto a second line, the same as .badge-row already does.
   Re-checked at 320, 360, 390, 414, 480, 640, 768, 900, 1024, 1100, 1260, 1440, 1680 and
   1920: nothing crosses the card edge and the page never scrolls sideways. */
@media (min-width: 900px) {
  #about .about-grid { grid-template-columns: minmax(min-content, 0.8fr) minmax(0, 1.2fr); }
}
@media (min-width: 1260px) {
  #about .about-grid { grid-template-columns: minmax(min-content, 0.5fr) minmax(0, 1.5fr); }
}
#about .about-actions { flex-wrap: wrap; }