/* Sabal page composition. Brand colours and typography come from the vendored package. */
.sabal-byline { color: var(--rani); font-size: 18px; margin: 0 0 20px; }
.sabal-page .shot-copy h1 { max-width: 660px; font-size: clamp(2.125rem, 1.45rem + 2.4vw, 3.625rem); line-height: 1.12; margin: 0 0 24px; }
.sabal-page .shot-copy > p:not(.sabal-byline) { max-width: 630px; }
.sabal-section-intro { max-width: 760px; margin-bottom: 34px; }
.sabal-reading-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 80px); }
.sabal-reading-columns article { padding-top: 24px; border-top: 1px solid var(--border-mid); }
.sabal-reading-columns h3, .sabal-pack-explanation h3 { font-size: 28px; margin: 0 0 14px; }
.sabal-reading-columns p, .sabal-pack-explanation p { margin-top: 0; margin-bottom: 20px; }
.sabal-language-section {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 48px;
  align-items: center;
  border-top: 1px solid var(--border-mid);
  border-bottom: 1px solid var(--border-mid);
}
.sabal-language-copy { max-width: 680px; }
.sabal-language-example { text-align: center; padding: 20px; }
.sabal-kolam { width: 100px; height: 100px; margin: 0 auto 18px; background: url('/design-system/v1/patterns/kolam.svg') center / contain no-repeat; opacity: .6; }
.sabal-language-example blockquote { margin: 0; }
.sabal-language-example blockquote p { color: var(--rani); font-family: var(--f-script); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.6; margin: 0 0 12px; }
.sabal-language-example > p { font-family: var(--f-essay); color: var(--ink-soft); margin: 0; font-size: 18px; }
.sabal-packs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.sabal-bhojan-card { padding: clamp(24px, 3vw, 36px); background: var(--deep); border: 1px solid var(--border-mid); border-radius: 16px; }
.sabal-bhojan-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sabal-bhojan-top h3 { font-size: 36px; margin: 0; }
.sabal-coming-soon { color: var(--rani); font-size: 17px; margin: 0; }
.sabal-bhojan-card > p { margin: 0 0 18px; }
.sabal-bhojan-card > p:last-child { color: var(--ink-mute); margin-bottom: 0; font-size: 16px; }
.sabal-closing { display: flex; align-items: center; gap: 40px; justify-content: space-between; border-top: 1px solid var(--border-mid); }
.sabal-closing > div { max-width: 720px; }
.sabal-closing .site-button { flex-shrink: 0; }
.sabal-footer-intro { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-bottom: 24px; }
.sabal-footer-intro p { margin: 0; }

@media (max-width: 900px) {
  .sabal-language-section { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sabal-language-example { max-width: 480px; margin-inline: auto; }
  .sabal-closing { align-items: flex-start; flex-direction: column; gap: 16px; }
}
@media (max-width: 620px) {
  .sabal-reading-columns, .sabal-packs-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sabal-language-example { padding-inline: 0; }
}