/* ══════════════════════════════════════════════════════════════════════════
   The "Mualo for <segment>" pages — /language-schools and /bpo. Ported from
   the Claude Design canvases (Language Schools.dc.html, BPOs and Call
   Centers.dc.html), which are the same layout with different copy: the
   pitch, selling points in two ruled columns, then a design preview. The
   canvases carried their styles inline on every element; they live here
   instead, the way the rest of the site is written. Header, .eyebrow, .btn,
   .duo and the red .closing footer come from landing.css and tokens.css.
   ══════════════════════════════════════════════════════════════════════ */

.biz {
  max-width: 1560px;
  padding: 72px var(--gutter) 96px;
}

/* ── the pitch ──────────────────────────────────────────────────────────  */

.biz-eyebrow { margin-bottom: 44px; }

.biz-title {
  margin: 0; max-width: 1180px;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(36px, 5.2vw, 76px); line-height: 1.03;
  letter-spacing: -0.035em; text-wrap: pretty;
}
.biz-lede {
  margin: 36px 0 0; max-width: 760px;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5;
  color: var(--color-neutral-700); text-wrap: pretty;
}

.biz-cta { display: flex; align-items: center; gap: 20px; margin-top: 40px; flex-wrap: wrap; }
.biz-btn {
  font-weight: 600; font-size: 15px; padding: 14px 24px;
  border: 2px solid var(--color-accent); color: #fff;
}
.biz-btn:hover { border-color: var(--color-accent-600); color: #fff; }

/* The address beside the button on /business-pricing. The red and the rule
   under it come from the base `a`; this only matches the button's type. */
.biz-email { font-family: var(--font-heading); font-weight: 600; font-size: 15px; }

/* "COMING SOON" and the line explaining what booking means while it is. */
.biz-soon { display: flex; align-items: center; gap: 12px; }
.biz-badge {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: 1.4px;
  color: var(--color-bg); background: var(--color-text); padding: 6px 10px;
  white-space: nowrap;
}
.biz-badge-note { font-size: 14px; color: var(--color-neutral-700); text-wrap: pretty; }

.biz-hr { height: 2px; background: var(--color-divider); margin-top: 64px; }

/* ── what the school gets ───────────────────────────────────────────────
   One YAML list, halved by the template — the numbering runs down the left
   column and continues down the right, so the two sides cannot drift. */

.biz-points { padding-top: 44px; gap: 40px; align-items: start; }
.biz-col { display: flex; flex-direction: column; }
.biz-point {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px;
  padding: 22px 0;
  border-bottom: 2px solid var(--color-divider);
}
.biz-point-num {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: 1.4px;
  color: var(--color-accent-700); padding-top: 6px;
}
.biz-point-text {
  margin: 0;
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45;
  text-wrap: pretty;
}

/* ── design preview ─────────────────────────────────────────────────────
   Labelled as a preview twice over — in the eyebrow and under the shots —
   because these screens are designs, not a product anyone can log into. */

.biz-peek { margin-top: 72px; }
.biz-peek-eyebrow { margin-bottom: 24px; }
.biz-peek-meta { color: var(--color-accent-700); }

/* The two shots sit side by side, each half the width — which is also what
   keeps them sharp: the same 1600px file over ~650 CSS px reads at roughly
   2.5x rather than 1.2x. Each figure is a subgrid of one two-row grid, so
   the frames start on the same line and end the same size even when one
   title wraps and the other does not. The row gap is 0 because the head
   carries its own padding-bottom. */
.biz-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: 40px; row-gap: 0;
  align-items: start;
}
.biz-shot {
  margin: 0;
  display: grid; grid-template-rows: subgrid; grid-row: span 2;
}

.biz-shot-head {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: baseline; gap: 4px;
  padding-bottom: 14px;
}
.biz-shot-num {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: 1.4px; color: var(--color-accent-700);
}
.biz-shot-title { font-family: var(--font-heading); font-weight: 600; font-size: 15px; }
.biz-shot-meta { font-size: 13px; color: var(--color-neutral-600); white-space: nowrap; }

/* A fixed window on a screenshot of any height: the image fills it from the
   top and the overflow is cropped, so the page keeps its rhythm whatever
   the source is. */
.biz-shot-frame {
  aspect-ratio: 16 / 10; overflow: hidden;
  border: 2px solid var(--color-divider);
}
.biz-shot-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
.biz-peek-note {
  margin: 28px 0 0; max-width: 760px;
  font-size: 14px; line-height: 22px; color: var(--color-neutral-600);
  text-wrap: pretty;
}

/* ── entry ──────────────────────────────────────────────────────────────
   The masthead only, as on /method — everything below it is read after a
   scroll and is left alone. */

@keyframes biz-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes biz-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.biz-eyebrow .eyebrow-num { opacity: 0; animation: biz-fade 600ms cubic-bezier(.16, 1, .3, 1) 60ms both; }
.biz-rule { transform-origin: left center; animation: biz-rule 900ms cubic-bezier(.16, 1, .3, 1) 120ms both; }
.biz-eyebrow .eyebrow-ar { opacity: 0; animation: biz-fade 600ms cubic-bezier(.16, 1, .3, 1) 200ms both; }
.biz-title { opacity: 0; animation: biz-fade 700ms cubic-bezier(.16, 1, .3, 1) 180ms both; }
.biz-lede { opacity: 0; animation: biz-fade 700ms cubic-bezier(.16, 1, .3, 1) 260ms both; }
.biz-cta { opacity: 0; animation: biz-fade 700ms cubic-bezier(.16, 1, .3, 1) 340ms both; }

/* ── responsive ─────────────────────────────────────────────────────────  */

@media (max-width: 860px) {
  .biz { padding: 36px var(--gutter) 64px; }
  .biz-eyebrow { margin-bottom: 28px; }
  .biz-lede { margin-top: 24px; }
  .biz-cta { margin-top: 28px; gap: 16px; }
  .biz-hr { margin-top: 40px; }
  /* .duo has already collapsed to one column and dropped its 2px rules. */
  .biz-points { padding-top: 22px; gap: 0; }
  .biz-peek { margin-top: 48px; }
  /* One column: two half-width screenshots on a phone would be unreadable,
     so the pair stacks and the subgrid is dropped with it. */
  .biz-shots, .biz-shot { display: block; }
  .biz-shot + .biz-shot { margin-top: 32px; }
}

@media (max-width: 520px) {
  .biz-btn { flex: 1 1 100%; }
  .biz-soon { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] { animation: none !important; transform: none !important; opacity: 1 !important; }
}