/* ============================================================
   solutions/business.html: corporate training, rebuilt around the real
   product (user, 2026-10-06; bar-business-ui.md). No stock photos. Every
   picture is a plain crop or screen recording of the client's corporate
   demo (assets/business/ui, build.py). It is laid out in the site's
   existing boxes:
   - the hero stage and the six feature cards are the Individuals page's
     cards (#daily: soft Lattice gradients, the site's phone frame);
   - the three steps and the admin story are the Universities page's #ops
     tiles (css/schools-ops.css, js/ks-ops.js);
   - the tabbed window borrows speechify.com's way of showing a product
     two ways (frameless recording or screenshot under pill tabs).
   Boxes whose phone or screen runs off the bottom keep their top corners
   only (user, 2026-10-06).
   ============================================================ */

.bu-section { padding-block: var(--section-gap); }
.bu-head { text-align: center; }
.bu-head .h2 { margin-inline: auto; max-width: 22ch; }
.bu-line {
  margin: var(--sp-20) auto 0;   /* §4.3: heading -> line 2.0rem, as the hero */
  max-width: 38rem;
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
  text-wrap: pretty;
}

/* ---- The phone: the frame's 848 square on top, its last rows stretched
   below (848 × 1400 units), the screen under the opening (x 143–703 from
   y 218, as the homepage's #belief tile). ---- */
.bu-phone { position: absolute; aspect-ratio: 848 / 1400; }
.bu-phone__screen {
  position: absolute;
  left: calc(143 / 848 * 100%);
  top: calc(218 / 1400 * 100%);
  width: calc(560 / 848 * 100%);
  height: auto;
  display: block;
  background: var(--color--white);
}
.bu-phone__frame { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; pointer-events: none; }
/* The frame is ONE image, phone-frame-tall.webp / phone-frame-white-tall.webp
   (848 x 1400: the 848 square with its last row baked down). The old square
   <img> + stretched-background pair resampled differently and drew a dark
   line beside the phone at the join (user, 2026-10-06). */
.bu-phone .scene__toggle { top: auto; bottom: 22%; right: 14%; }
.bu-phone:hover .scene__toggle,
.bu-phone .scene__toggle.is-user-paused { --_toggle-reveal: 1; }
.bu-phone:focus-within .scene__toggle { --_toggle-reveal: 1; transition-duration: 0s; }

/* A box tinted with one of Lattice's gradient pairs, softened to 35%
   (the Individuals cards, option B). */
.bu-tint {
  --_from: var(--color--yellow-100);
  --_to: var(--color--blue-100);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius--2xl);   /* all four corners, as the top (user, 2026-10-06) */
  background-color: var(--color--white);
  background-image: linear-gradient(180deg,
    color-mix(in oklab, var(--_from) 35%, var(--color--white)),
    color-mix(in oklab, var(--_to) 35%, var(--color--white)));
}
.bu-tint[data-tint='aqua']   { --_from: var(--color--blue-100);   --_to: var(--color--green-100); }
.bu-tint[data-tint='rose']   { --_from: var(--color--pink-100);   --_to: var(--color--purple-100); }
.bu-tint[data-tint='lime']   { --_from: var(--color--green-100);  --_to: var(--color--lime-100); }
.bu-tint[data-tint='violet'] { --_from: var(--color--purple-100); --_to: var(--color--pink-100); }
.bu-tint[data-tint='mint']   { --_from: var(--color--teal-100);   --_to: var(--color--blue-100); }

/* ---- 2. Tabs: one window, three views ---- */
/* The site's own tab group (styles.css .tabs, §9.9): a grey-50 track, the
   active tab white with the small card shadow. */
.bu-tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  gap: 0.2rem;
  margin: var(--sp-32) auto 0;
  padding: 0.2rem;
  border-radius: 3em;
  background: var(--color--grey-50);
}
.bu-tabs__tab {
  padding: 0.6em 1.3em;
  border: 0;
  border-radius: 3em;
  background: transparent;
  color: var(--color--grey-800);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-global), color var(--dur) var(--ease-global);
}
.bu-tabs__tab:hover { color: var(--color--grey-1000); }
.bu-tabs__tab[aria-selected='true'] { background: var(--color--white); color: var(--color--grey-1000); box-shadow: var(--shadow--card-small); }
.bu-tabs__tab:focus-visible { outline: 2px solid var(--color--accent); outline-offset: 3px; }
.bu-tabs__panel { margin-top: var(--sp-24); }
.bu-tabs__panel[hidden] { display: none; }
.bu-window { aspect-ratio: 1376 / 700; }
.bu-window .bu-phone { left: 50%; width: 36%; top: 8%; transform: translateX(-50%); }
.bu-window__shot {
  position: absolute;
  left: 8%;
  top: 8%;
  width: 84%;
  height: auto;
  display: block;
  border-radius: var(--radius--l) var(--radius--l) 0 0;
  box-shadow: var(--shadow--card-large);
}
.bu-tabs__caption {
  margin: var(--sp-16) auto 0;
  max-width: 40rem;
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
}

/* ---- 6. Statement + comparison ---- */
.bu-compare__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-20);
  margin-top: var(--sp-40);
}
.bu-compare__card {
  padding: var(--sp-40);
  border-radius: var(--radius--l);   /* §7 card radius */
  background: var(--color--grey-50);
}
.bu-compare__card--ours { background: var(--color--brand-50); }
.bu-compare__title {
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--kern-heading);
  color: var(--color--grey-1000);
}
.bu-compare__list { list-style: none; margin: var(--sp-24) 0 0; padding: 0; display: grid; gap: var(--sp-16); }
.bu-compare__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
}
.bu-compare__list svg { flex: none; width: 1.4em; height: 1.4em; margin-top: 0.05em; }
.bu-compare__card .i-no  { color: var(--color--grey-400); }
.bu-compare__card .i-yes { color: var(--color--brand-600); }

/* ---- Responsive (§10.3) ---- */
@media (max-width: 960px) {
  .bu-window { aspect-ratio: 4 / 5; }
  .bu-window .bu-phone { width: 70%; }
  .bu-window__shot { left: 6%; width: 160%; }
  .bu-compare__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bu-compare__card { padding: var(--sp-32) var(--sp-24); }
}

/* §4.1.2 Hangul */
:lang(ko) .bu-section h2,
:lang(ko) .bu-compare__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); word-break: keep-all; }
:lang(ko) .bu-section p,
:lang(ko) .bu-compare__list li { line-height: var(--lh-ko-body); word-break: keep-all; }

/* The #ops section's pill and Hangul setting, as css/schools.css gives
   them on the K-12 page (that file is not loaded here). */
.ks-section { scroll-margin-top: calc(var(--nav-h) + var(--sp-8)); }
.ks-pill { padding: 0.4em 1.2em; border-radius: 1rem; font-size: max(var(--fs-body-xs), 12px); }
:lang(ko) .ks-section h2 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); word-break: keep-all; }
:lang(ko) .ks-section p { line-height: var(--lh-ko-body); word-break: keep-all; }

/* Four admin cards, not the Universities five: the sticky grid's rows
   follow the count, so no empty row is left under the last card. */
@media (min-width: 1081px) {
  #admin .ks-ops__cards { grid-template-rows: repeat(4, 1fr) auto; }
}
.bz-hero__line { max-width: 40rem; margin-inline: auto; }

/* The run-off ruling (user, 2026-10-06): a screen that runs off a tile's
   bottom keeps only its top corners rounded. */
#admin .ks-ops__tile { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* §4.1.2: labels keep the Latin row in KO. */
:lang(ko) .bu-section .ks-ops__label { line-height: var(--lh-body); }
.bu-head .pill { margin-bottom: 0; }   /* §4.3/§5.4: pill -> heading 0.8rem, as #admin */

/* ============ Round 2 (craft review: read the product, big) ============ */

/* Tab window: shorter, so the dashboard shows its KPIs and charts and stops
   above the list of groups; the staff-app view holds three phones. */
.bu-window { aspect-ratio: 1376 / 600; }
.bu-window--phones .bu-phone { top: 9%; width: 30%; transform: none; }
.bu-window--phones .bu-phone:nth-child(1) { left: 6%; top: 15%; }
.bu-window--phones .bu-phone:nth-child(2) { left: 35%; }
.bu-window--phones .bu-phone:nth-child(3) { left: 64%; top: 15%; }

@media (max-width: 960px) {
  .bu-window { aspect-ratio: 4 / 5; }
  .bu-window--phones .bu-phone:nth-child(1),
  .bu-window--phones .bu-phone:nth-child(3) { display: none; }
  .bu-window--phones .bu-phone:nth-child(2) { left: 50%; width: 76%; transform: translateX(-50%); }
}

/* Round 3 (system review): tabs stay one row on phones; the dashboard and
   builder screens run off their window's bottom at every width. */
@media (max-width: 960px) {
  .bu-window { aspect-ratio: 1 / 1; }
  .bu-window__shot { left: 6%; width: 190%; }
}
@media (max-width: 640px) {
  .bu-tabs__list { flex-wrap: nowrap; }
  .bu-tabs__tab { padding: 0.55em 0.9em; font-size: var(--fs-body-xs); white-space: nowrap; }
}