/* ============================================================
   solutions/business.html — AvoLingo Business (corporate HR & L&D).
   Rebuilt 2026-10-01 to bar-business.md: clean, short, image-led
   (Sana Learn structure, Klarna / Monzo cleanliness).
   Round 4: §4.3 hero rhythm (2.0 / 3.2 / 4rem), the team block on an inset
   Speaking-blue .box, h2 measures via [characters], cards with a 0.4rem gap.
   Round 3: §9.3.1 hero with a character measure and §5.3 top padding;
   buyer-pain hooks; one person rehearsing in every photo; both product
   cards white §9.4 cards; the closing panel is the homepage-outro /
   schools .box (sand, 0.8rem inset, 6.4rem padding, plain button).

   Loaded by this page only; every class is .bz-*. Colour, type, radii,
   buttons and pills are the site's (tokens.css / styles.css / site.css);
   this file only lays them out, with tokens only.

   Edges: every photo sits on the content column (.wrap's inner edge);
   the one panel is the house .box (§5.3), inset 0.8rem from the viewport.

   Photos (assets/business/v2): Soul 2.0 homepage recipe + Nano Banana 2
   clean-up. Imagery per §9.4 R4: --radius--2xl, no elevation.
   Product: two §9.4 cards (.bz-card) re-set from the corporate demo
   account's app screens as live HTML, labelled "Example". From 1081px
   each card clearly overlaps an edge of its photo (Key Phrases the left
   edge, the roadmap the bottom edge) and keeps >= 24px of air from
   faces, hands and phones; below that it sits under the photo and
   overlaps its bottom edge by ~30% of its own height.
   ============================================================ */

.bz { overflow: clip; }

/* ---- Shared pieces --------------------------------------------------- */

/* §4.1: the h2 row is line-height 1.0. */
.bz .h2 { line-height: 1; }

.bz-photo { position: relative; margin: 0; }
.bz-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius--2xl);
}

/* Section pill (§5.4 opener), no arrow: it labels, it doesn't link.
   Radius = the tag radius (§7). Hue only where it names a module (§3.4):
   Roleplay = Speaking rooms (blue), Roadmap = Path (pink); the other
   openers keep the default pill slot (lime), as on every sibling page. */
.bz-pill {
  padding: 0.4em 1.2em;
  border-radius: var(--radius--tag);
  font-size: max(var(--fs-body-xs), 12px);   /* 12px floor at 320 (§4.1.1) */
}
.bz-pill--speaking {
  --_theme---pills--pill-background: var(--color--blue-100);
  --_theme---pills--pill-text: var(--color--blue-1000);
}
.bz-pill--on-panel {            /* a pill on the tinted Speaking panel: white fill, panel ink */
  --_theme---pills--pill-background: var(--color--white);
  --_theme---pills--pill-text: var(--color--blue-1000);
}
.bz-pill--path {
  --_theme---pills--pill-background: var(--color--pink-100);
  --_theme---pills--pill-text: var(--color--pink-1000);
}

/* The one line under a heading: body-l, grey-800 (the opener rank). */
.bz-line,
.bz-hero__line {
  margin-top: var(--sp-20);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
  text-wrap: pretty;   /* §4.2: paragraphs are pretty, headings balance */
}
.bz-line[characters],
.bz-hero__line[characters] { margin-inline: auto; }
.bz-story__text .bz-line { margin-inline: 0; }

/* ---- §9.4 content cards over a photo --------------------------------- */

.bz-card {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius--l);
  background: var(--color--white);
  box-shadow: var(--shadow--card);
  color: var(--color--grey-800);
}
.bz-card__body { display: grid; gap: var(--sp-4); padding: var(--sp-4) var(--sp-8); }
.bz-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  padding-block: var(--sp-8);
}
.bz-card__title {
  font-size: var(--fs-h6);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--kern-heading);
  color: var(--color--grey-1000);
}
/* Chips: §9.6 tag geometry at the app-card chip size (body-s / 500,
   §4.1.1 R15, the homepage roadmap card's precedent), sentence case.
   One style on both cards. */
.bz-card__example,
.bz-chip {
  flex: none;
  padding: calc(var(--sp-4) / 2) var(--sp-4);
  border-radius: var(--radius--tag);
  font-size: var(--fs-body-s);   /* §4.1.1 R15: app-card chips, as index.html */
  font-weight: 500;
  line-height: var(--lh-body);
}
.bz-card__example { background: var(--color--grey-50); color: var(--color--grey-800); }
.bz-card__row {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin: 0;
  padding-block: var(--sp-8);
  border-top: 1px solid var(--color--grey-100);
  font-size: var(--fs-body-s);
  font-weight: 400;
  line-height: var(--lh-body);
}
.bz-card--phrases .bz-card__row { justify-content: space-between; }
.bz-card__mark { flex: none; width: 1rem; height: 1rem; color: var(--color--grey-600); }

/* Roadmap rows: state disc, unit title, status chip. Done = one green
   family (disc green-800 with a white check, 7.3:1; chip green-100 /
   green-800). In progress = the Path hue, in the chip only. */
.bz-card__state {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: var(--radius--circle);
}
.bz-card__state svg { width: 0.9rem; height: 0.9rem; }
.bz-card__state--done { background: var(--color--green-800); color: var(--color--white); }
.bz-card__state--now  { background: var(--color--pink-100); color: var(--color--pink-1000); box-shadow: inset 0 0 0 2px var(--color--pink-800); }   /* ring >= 3:1 on white; 800 ink on its tint, §3.2 */
.bz-card__unit { display: block; }
.bz-chip { display: block; width: max-content; margin-top: calc(var(--sp-4) / 2); }
.bz-chip--done { background: var(--color--green-100); color: var(--color--green-800); }
.bz-chip--now  { background: var(--color--pink-100);  color: var(--color--pink-1000); }

/* Where each card sits (>= 1081px), measured on the photos:
   phrases — fully on the photo, bottom-left over the wooden counter,
   below and left of her hands, phone and face;
   roadmap — fully on the photo, bottom-left over the tarmac and window
   rail (the photo's left side is an outpainted extension of the native
   frame), well left of the agent's phone hand.
   Widths are fixed rem so every row stays on one line at every desktop
   width (22rem = the tablet width; Key Phrases needs only 17.5rem).
   Both cards sit one ladder step (1.2rem) in from the photo's edges. */
.bz-short { display: none; }
.bz-card--phrases { left: var(--sp-12); bottom: var(--sp-12); width: 17.5rem; }
.bz-card--path    { left: var(--sp-12); bottom: var(--sp-12); width: 22rem; }

/* ---- 1. Hero (§9.3.1): centred, one action, one wide photo ----------- */

.bz-hero { padding-block: var(--sp-40) var(--section-gap); text-align: center; }
/* §4.3 rhythm, as schools renders it: headline -> line 2.0rem,
   line -> button 3.2rem, button -> photo 4rem. */
/* §5.4 opener: the eyebrow pill sits above the headline, .pill + heading at
   --sp-8 (§4.3), the same step universities.css uses. */
.bz-hero__pill { display: inline-flex; }
.bz-hero__title { margin-inline: auto; margin-top: var(--sp-8); }
.bz-hero__line { margin-top: var(--sp-20); }
.bz-hero__cta { margin-top: var(--sp-32); }
.bz-hero__photo { margin-top: var(--sp-40); aspect-ratio: 9 / 5; }
.bz-hero__photo > img { object-position: 50% 22%; }

/* ---- 2–3. Story rows: photo | text, text | photo --------------------- */

.bz-story { padding-block: var(--section-gap); }
.bz-story__grid {
  display: grid;
  grid-template-columns: 54fr 46fr;   /* §5.2 home-grid, as schools' splits */
  gap: var(--sp-20);                 /* §5.2: 2.0rem */
  align-items: center;
}
.bz-story__media { aspect-ratio: 4 / 3; }

.bz-story--flip .bz-story__grid { grid-template-columns: 46fr 54fr; }
/* The roleplay photo is a tall 4:5 in the wide (54%) column, so the photo
   carries the section; the associate is on the right and the shelves and
   counter bottom-left, where the Key Phrases card sits fully on the photo. */
.bz-story--flip .bz-story__media { aspect-ratio: 4 / 5; }
.bz-story--flip .bz-story__media { order: 2; }

/* §5.3 rhythm, as the sibling pages measure it: a .box panel sits 4rem
   (the plain section's own padding) from the content next to it. */

/* A deliberate two-line break in the materials heading. */
.bz-h2-split span { display: block; }

/* ---- 2b. The app your team gets (bar-business-features.md) -------------
   Monzo's "Security you can bank on" structure in AvoLingo's type, colour
   and button: a centred §5.4 opener with one primary button, then a stage
   of feature tabs · phone · feature tabs (three equal columns, the right
   one set higher, Monzo's stagger). One tab is selected: a brand-50 tint
   with its own brand inks (§3.2), and the phone shows its screen.

   The phone is the homepage's (assets/belief/phone-frame.webp, the
   #belief tile's frame): an 848-px upper square with the screen opening
   transparent at x 144–701 from y 219. The screens sit under it exactly
   as .belief__phone-video does (left 143, width 560: one unit under the
   bezel each side, so no seam), at their own 923:2000. The square ends
   at y 848, mid-phone; the frame continues below with its OWN last rows
   (844–848, identical bezel and shadow rows, measured) stretched down to
   the box's bottom, and the whole phone fades into the page over its last
   16% (mask). No hard cut, no second phone image.
   2026-10-01 (client: "핸드폰이 너무 길쭉"): the box is 848 × 1180, not
   × 1432 — the screens are cut at the box's bottom (top-anchored), so the
   phone reads about 1.8 : 1 like Monzo's instead of 2.2 : 1.
   Status bar: the frame bakes a #f7f7f7 band behind 9:41, which showed grey
   over the four white screens. assets/business/app/phone-frame-white.webp is
   the same frame with that band white (glyphs un-blended and re-composited);
   see .bz-app__frame--white.
   All phone geometry is in those 848-px units: the box is 848 × 1180. */
.bz-app { padding-block: var(--section-gap); }
.bz-app__head { text-align: center; }
.bz-app__title { margin-inline: auto; }
.bz-app__cta { margin-top: var(--sp-32); }   /* §4.3: line -> button, as the hero */

.bz-app__stage {
  --_gap: var(--sp-20);                                 /* §5.2: 2.0rem */
  --_col: calc((100% - 2 * var(--_gap)) / 3);           /* one third of the stage */
  --_w-phone: calc(var(--_col) * 1.19);                 /* = .bz-app__phone's --_w */
  display: grid;
  grid-template-areas: "stage";
  margin-top: var(--sp-32);
}
.bz-app__viewport,
.bz-app__phone { grid-area: stage; }

/* The tablist: three equal columns; the centre one is left empty for the
   phone, which overlays it. Columns centre on the phone's height. */
.bz-app__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--_gap);
  align-content: center;   /* the two columns, as one row, centre on the phone */
  align-items: center;     /* each column centred on the same line */
  height: 100%;
  padding-bottom: calc(var(--_w-phone, 0px) * 66 / 848);
}
.bz-app__col { position: relative; display: grid; gap: var(--sp-12); }
/* Both columns centre on the phone's body (client, 2026-10-01: "모든 박스 핸드폰
   가운데에 맞춰줘") — no stagger. The tab row's box starts 96 units below the
   phone box (its negative margin) and the body's visual middle sits ~605 units
   down, so the row gives up 66 units at the bottom to centre on it. */
.bz-app__col--left  { grid-column: 1; }
.bz-app__col--right { grid-column: 3; }

/* A tab: Monzo's bare text that becomes a tinted card when selected.
   Title h5 rank (500), text body (400) in the muted ink: 1.2× apart. */
.bz-app__tab {
  display: grid;
  gap: var(--sp-8);
  width: 100%;
  padding: var(--sp-12) var(--sp-16);
  border: 0;
  border-radius: var(--radius--l);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-global);
}
.bz-app__tab:focus-visible { border-radius: var(--radius--l); }   /* keep the card radius under the §10.1 ring */
.bz-app__tab-title {
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--kern-heading);
  color: var(--color--grey-1000);
  text-wrap: balance;   /* §4.2: titles balance */
}
.bz-app__tab-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
  text-wrap: pretty;
}
.bz-app__tab:hover { background: var(--color--grey-50); }
.bz-app__tab[aria-selected="true"] { background: var(--color--brand-50); cursor: default; }
.bz-app__tab[aria-selected="true"] .bz-app__tab-title { color: var(--color--brand-1000); }
.bz-app__tab[aria-selected="true"] .bz-app__tab-text  { color: var(--color--brand-800); }   /* 5.3:1 on brand-50 */

/* The phone: centred on the middle column. Its square is 1.19 columns
   wide so the phone's BODY (612 of 848 units) is ~86% of the column; the
   square's transparent sides reach into the gaps (pointer-events: none,
   so the tabs stay clickable under them). */
.bz-app__phone {
  position: relative;
  --_w: calc(var(--_col) * 1.19);
  justify-self: center;
  width: var(--_w);
  margin-top: calc(var(--_w) * -96 / 848);   /* the square's empty band above the phone (~110 units) */
  aspect-ratio: 848 / 1180;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, var(--color--black) 84%, transparent);
          mask-image: linear-gradient(to bottom, var(--color--black) 84%, transparent);
}
.bz-app__screens {
  position: absolute;
  left: calc(143 / 848 * 100%);
  top: calc(218 / 1180 * 100%);
  bottom: 0;
  width: calc(560 / 848 * 100%);
  overflow: hidden;
  background: var(--color--white);
}
.bz-app__screen {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;   /* cut at the bottom, where the phone fades */
  opacity: 0;
}
/* Crossfade: the incoming screen fades in ON TOP of the outgoing one,
   which holds at full opacity underneath until the fade ends (js). */
.bz-app__screen.is-leaving { opacity: 1; z-index: 1; }
.bz-app__screen.is-active  { opacity: 1; z-index: 2; transition: opacity var(--dur) var(--ease-global); }
.bz-app__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 3;
}
.bz-app__frame-ext {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(848 / 1180 * 100%);
  bottom: 0;
  z-index: 3;
  background: url("../assets/belief/phone-frame.webp") 0 100% / 100% calc(848 / 4 * 100%) no-repeat;   /* the frame's last 4 rows, stretched */
}
/* Two copies of the frame, identical but for the 9:41 status band: the
   original's #f7f7f7 and a white one. The white copy sits on top and fades
   out while a grey-topped screen (home, vocab: data-top="grey") is showing,
   so the status bar always matches the screen under it. */
.bz-app__frame--white { transition: opacity var(--dur) var(--ease-global); }
.bz-app__phone:has(.bz-app__screen.is-active[data-top="grey"]) .bz-app__frame--white { opacity: 0; }

/* Dots: phone layout only (see ≤640). */
.bz-app__dots { display: none; }

.bz-app__caption {
  margin-top: var(--sp-12);
  text-align: center;
  font-size: max(var(--fs-body-xs), 12px);   /* §4.1.1 floor */
  line-height: var(--lh-body);
  color: var(--color--grey-600);
}

/* ≤ 960 (§10.3: feature grids go to one column): phone | the six tabs in
   one list. Three columns would leave ~150px of text per tab at 768. */
@media (max-width: 960px) {
  .bz-app__stage { --_col: calc((100% - var(--_gap)) * 0.4); }
  .bz-app__tabs { grid-template-columns: 2fr 3fr; align-content: center; row-gap: var(--sp-12); padding-bottom: 0; }
  .bz-app__col--left,
  .bz-app__col--right { grid-column: 2; top: 0; }
  .bz-app__phone {   /* body centred in its column; it stays in view while the list scrolls past */
    position: sticky;
    top: calc(var(--nav-h) + var(--sp-16));
    justify-self: start;
    align-self: start;
    margin-left: calc(var(--_col) * -0.095);
  }
}

/* ≤ 640 (mechanism 6): opener, phone, then ONE card at a time on a track
   with the hero's dots (6px pips, the selected one 24px, 24px targets);
   tap a dot or swipe the card, and the phone follows. */
@media (max-width: 640px) {
  .bz-app__cta { width: 100%; }
  .bz-app__stage { display: flex; flex-direction: column; margin-top: var(--sp-32); }
  .bz-app__phone {
    order: 1;
    --_w: min(78%, 18rem);
    align-self: center;
    margin-left: 0;
    /* Not sticky here (the <=960 rule above): stacked, a sticky phone rode over
       the caption card while scrolling (user, 2026-10-14, iPhone). */
    position: relative;
    top: auto;
  }
  .bz-app__viewport {
    order: 2;
    margin-top: var(--sp-12);
    overflow: clip;              /* clip, not hidden: never a scroll container, so focus can't scroll it */
    touch-action: pan-y;
  }
  .bz-app__tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: auto;
    transform: translateX(calc(var(--bz-app-i, 0) * -100%));
    transition: transform var(--dur) var(--ease-global);
  }
  .bz-app__col { display: contents; }
  .bz-app__tab { flex: 0 0 100%; align-content: start; }
  .bz-app__tab:focus-visible { outline-offset: -3px; }   /* inside the clipped track */
  .bz-app__dots {
    order: 3;
    display: flex;
    justify-content: center;
    margin-top: calc(var(--sp-12) - (24px - var(--hero-pip)) / 2);
  }
  .bz-app__dot {
    display: grid;
    place-items: center;
    padding: calc((24px - var(--hero-pip)) / 2);
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
  }
  .bz-app__pip {
    display: block;
    inline-size: var(--hero-pip);
    block-size: var(--hero-pip);
    border-radius: var(--radius--s);
    background: var(--_theme---hero--dot);
    transition: inline-size var(--dur) var(--ease-global), background-color var(--dur) var(--ease-global);
  }
  .bz-app__dot[aria-current="true"] .bz-app__pip {
    inline-size: var(--hero-pip-active);
    background: var(--_theme---hero--dot-fill);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bz-app__screen.is-active,
  .bz-app__tabs,
  .bz-app__tab,
  .bz-app__pip { transition: none; }
}

:lang(ko) .bz-app__tab-title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ko) .bz-app__tab-text,
:lang(ko) .bz-app__caption { line-height: var(--lh-ko-body); }
:lang(ko) .bz-app__head .bz-line { text-wrap: balance; }

/* ---- 4. Team block: an inset .box panel (§5.3) in the Speaking family
   (§3.4 blue-50 / blue-1000, tint + own ink), Sana's large photo + three
   statement lines after the §5.4 opener line. The lines take the h4
   heading rank (§4.1 table, 500, blue-1000) at every width (§1: no
   type-size breakpoints; the fluid root scales it). */
.bz-team__box {
  padding-block: var(--panel-pad) var(--sp-64);   /* §5.3, at every width */
  background: var(--color--blue-50);
  color: var(--color--blue-1000);
}
.bz-team__grid {
  display: grid;
  grid-template-columns: 54fr 46fr;
  gap: var(--sp-20);
  align-items: center;
}
.bz-team__media { aspect-ratio: 3 / 4; }   /* tall, in the wide 54% column: the photo leads */
.bz-team__media > img { object-position: 50% 30%; }
.bz-team__text .h2,
.bz-team__text .bz-line,
.bz-team__lines .h4 { color: var(--color--blue-1000); }   /* tint + own ink, §3.2 */
.bz-team__text .bz-line { margin-inline: 0; }
.bz-team__lines { margin-top: var(--sp-24); }
.bz-team__lines .h4 { margin: 0; }
.bz-team__lines .h4 + .h4 { margin-top: var(--sp-8); }

/* ---- 5. Centred hook over one wide photo ----------------------------- */

.bz-wide { padding-block: var(--section-gap); }
.bz-wide__head { text-align: center; }
.bz-wide__head .h2 { margin-inline: auto; }
.bz-wide__media { margin-top: var(--sp-40); aspect-ratio: 9 / 5; }
.bz-wide__media > img { object-position: 50% 20%; }

/* ---- 6. Close: the house .box (§5.3 row 11, schools' outro) ---------- */

.bz-close__box {
  padding-block: var(--sp-64);
  text-align: center;
}
/* Client 2026-10-01: no brown (sand-1000) type. */
.bz-close__title { margin-inline: auto; color: var(--color--grey-1000); }
.bz-close__line { margin-inline: auto; color: var(--color--grey-800); }
.bz-close__cta { margin-top: var(--sp-32); }

/* ---- Responsive (§10.3) ---------------------------------------------- */

/* Under 1081px the photos are too narrow to hold a card on free space:
   the card sits in the photo's bottom-left corner and hangs exactly 4rem
   below it (translate), and the figure reserves that 4rem (margin), so
   the gap after the section is the normal section gap at every width. */
@media (max-width: 1080px) {
  .bz-shot { display: grid; aspect-ratio: auto; margin-bottom: var(--sp-40); }
  .bz-story--flip .bz-story__media.bz-shot { aspect-ratio: auto; }
  .bz-shot > img,
  .bz-shot > .bz-card { grid-area: 1 / 1; }
  .bz-story__media.bz-shot > img { aspect-ratio: 4 / 5; height: auto; }
  .bz-wide__media.bz-shot > img { aspect-ratio: 9 / 5; height: auto; }
  .bz-card--phrases,
  .bz-card--path {
    position: relative;
    inset: auto;
    align-self: end;
    justify-self: start;
    width: min(84%, 22rem);
    margin: 0 var(--sp-12);
    transform: translateY(var(--sp-40));
  }
}

@media (max-width: 860px) {
  /* Stacked: each section reads pill -> heading -> line, then its photo,
     so a photo never sits between one section's text and the next. */
  .bz-story__grid,
  .bz-story--flip .bz-story__grid,
  .bz-team__grid { grid-template-columns: 1fr; gap: var(--sp-32); }
  .bz-story__media,
  .bz-story--flip .bz-story__media,
  .bz-team__media { order: 2; }
  .bz-team__media > img { object-position: 50% 30%; }
  .bz-hero__photo,
  .bz-story__media { aspect-ratio: 4 / 5; }
  .bz-story__media.bz-shot > img,
  .bz-wide__media.bz-shot > img { aspect-ratio: 4 / 5; }
  .bz-hero__photo > img { object-position: 45% 50%; }
  .bz-story__media > img { object-position: 50% 30%; }
  .bz-story--flip .bz-story__media > img { object-position: 72% 50%; }
  .bz-wide__media > img { object-position: 62% 50%; }
}

@media (max-width: 640px) {
  .bz-hero__cta,
  .bz-close__cta { width: 100%; }
  /* Phones: every card row stays on one line. Shorter row copy (same
     meaning as the app's), and the status chips step out because they
     do not fit beside the unit on one line (the discs carry the state). */
  .bz-card--phrases,
  .bz-card--path { width: min(18rem, 100% - 2 * var(--sp-12)); }   /* rem, as schools */
  .bz-long { display: none; }
  .bz-short { display: inline; }
  .bz-card--path .bz-chip { display: none; }
  .bz-card__row, .bz-card__title { white-space: nowrap; }
}

/* ---- Korean page (ko/solutions/business.html) — §4.1.2 Hangul setting --
   Sizes and weights unchanged; only leading and tracking move, to the
   published Hangul row. word-break: keep-all is set site-wide on
   :lang(ko) body (css/site.css), so lines break between words. */
:lang(ko) .bz .headline,
:lang(ko) .bz .h2,
:lang(ko) .bz .h4 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ko) .bz-line,
:lang(ko) .bz-hero__line { line-height: var(--lh-ko-body); letter-spacing: 0; }
/* Centred KO lines balance so line lengths are even (Hangul, keep-all). */
:lang(ko) .bz-hero__line,
:lang(ko) .bz-wide__head .bz-line,
:lang(ko) .bz-close__line { text-wrap: balance; }
/* KO lines with two sentences: each sentence starts its own line. */
:lang(ko) .bz-s { display: block; }

/* 2026-10-10: the new FAQ (plain section before the sand close panel). */
.bz-faq { padding-bottom: var(--sp-64); }