/* CueClass site — v18 type scale and section rhythm (ADV 2026-10-28 §2). Loaded last on every page:
   one set of tokens for the hero, the section heads and the body copy, and one left edge shared by the
   hero and every section head (centred only for the closing call to action and the themes page head). */

:root {
  --t-display: clamp(56px, 7vw, 100px);
  --t-h2-lg: clamp(36px, 3.2vw, 46px);
  --t-h2: clamp(30px, 2.5vw, 36px);
  --t-h3: 21px;
  --t-lead: 19px;
  --t-body: 17px;
  --t-small: 14px;
  --t-eyebrow: 13px;
  --t-btn: 15px;
  --section: clamp(72px, 8vw, 112px);
}

@media (max-width: 639px) {
  :root {
    --t-display: 44px;
    --t-h2-lg: 30px;
    --t-h2: 26px;
    --t-h3: 19px;
    --t-lead: 17px;
    --t-body: 16px;
  }
}

/* ---------------------------------------------------------------- headings */

.dk-h1 {
  font-size: var(--t-display);
  line-height: 1.08;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
  text-wrap: balance;
}

.sv-h2,
.fp-title {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  text-wrap: balance;
  max-width: 18em;
}

.sv-h2-lg {
  font-size: var(--t-h2-lg);
  line-height: 1.18;
  max-width: 16em;
}

.sv-card h3,
.sv-price h3,
.cu-card h3,
.fp-name,
.ac summary,
.th-plate h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.sv-sub,
.sv-head .sv-sub {
  max-width: 30em;
  font-size: var(--t-lead);
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.sv-more,
.sv-theme-note,
.sv-caption,
.fx-cap,
.demo-status {
  font-size: var(--t-small);
  letter-spacing: 0.02em;
}

.sv-btn {
  font-size: var(--t-btn);
  letter-spacing: 0.02em;
}

.sv-btn-lg {
  font-size: 16px;
}

/* the hero's kicker pill, carried onto white as every section's eyebrow */
.sv-eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--sv-cjk);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--sv-ink);
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.14);
}

.dk-kicker {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.12em;
}

/* ---------------------------------------------------------------- section rhythm + one left edge */

.sv-section {
  padding-block: var(--section);
}

.sv-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30em);
  align-items: end;
  gap: 12px 48px;
  max-width: none;
  margin: 0 0 40px;
  text-align: left;
}

.sv-head > .sv-eyebrow {
  grid-column: 1 / -1;
  justify-self: start;
  margin-bottom: 0;
}

.sv-head .sv-h2 {
  grid-column: 1;
}

.sv-head .sv-sub {
  grid-column: 2;
  margin: 0;
  padding-bottom: 6px;
}

.sv-head:not(:has(.sv-sub)) {
  grid-template-columns: 1fr;
}

.sv-more {
  text-align: left;
}

/* closing call to action stays centred */
.sv-finale .sv-wrap {
  text-align: center;
}

.sv-finale .sv-h2 {
  margin-inline: auto;
  font-size: var(--t-h2-lg);
}

.sv-finale .sv-sub {
  margin-inline: auto;
}

@media (max-width: 899px) {
  .sv-head {
    grid-template-columns: 1fr;
  }

  .sv-head .sv-sub {
    grid-column: 1;
    padding-bottom: 0;
  }
}

/* ---------------------------------------------------------------- inner pages: the same tokens */

.page-head h1,
.legal h1 {
  font-size: var(--t-h2-lg);
  line-height: 1.18;
  letter-spacing: 0.02em;
}

.page-head .lead,
.lead {
  font-size: var(--t-lead);
  max-width: 30em;
}

h2.section-title,
.faq-group h2,
.split-aside h2 {
  font-size: var(--t-h2);
  letter-spacing: 0.02em;
}

body {
  font-size: var(--t-body);
}

/* ---------------------------------------------------------------- footer: three small groups */

.sv-footer {
  padding-block: 48px 36px;
}

.sv-footer-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 32px 48px;
}

.sv-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 48px;
}

.sv-footer-label {
  margin: 0 0 10px;
  font-family: var(--sv-cjk);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--sv-muted);
}

.sv-footer-group .sv-footer-links {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.sv-footer-links a {
  font-size: var(--t-small);
  color: var(--sv-ink);
}

.sv-footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sv-copy {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--sv-line);
  font-size: 13px;
}

@media (max-width: 760px) {
  .sv-footer-row {
    grid-template-columns: 1fr;
  }

  .sv-footer-nav {
    gap: 32px;
    flex-wrap: wrap;
  }
}

/* decorations may bleed past the edges (hero wall, theme seams, carousel neighbours); the page never scrolls sideways */
html,
body {
  overflow-x: clip;
}

/* 404 */
.nf {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.nf-cta {
  justify-content: flex-start;
  margin-top: 28px;
}