:root {
  --ink: #17122a;
  --deep: #241c46;
  --main: #4f358c;
  --main-dark: #3d2870;
  --soft: #d9d2ec;
  --tint: #f2eff8;
  --paper: #fbfafd;
  --line: #e4dff0;
  --muted: #514a68;
  --on-deep: #ece8f7;
  --on-deep-muted: #c3bad9;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;
  --f-xs: 0.8rem;
  --f-sm: 0.9rem;
  --f-md: 1rem;
  --f-lg: 1.25rem;
  --f-xl: 1.563rem;
  --f-2xl: 1.953rem;
  --f-3xl: 2.441rem;
  --f-4xl: 3.052rem;
  --wrap: 1200px;
  --radius: 6px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--f-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--f-4xl); }
h2 { font-size: var(--f-3xl); }
h3 { font-size: var(--f-lg); }

p { margin: 0; }

a { color: inherit; }

img { display: block; max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s5);
}

.eyebrow {
  font-size: var(--f-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--main);
  margin-bottom: var(--s3);
}

.band .eyebrow { color: var(--on-deep-muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s6);
  background: var(--main);
  color: #fff;
  border: 1px solid var(--main);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--f-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn:hover { background: var(--main-dark); border-color: var(--main-dark); }

.btn-line {
  background: transparent;
  color: var(--main);
  border-color: var(--soft);
}

.btn-line:hover { background: var(--tint); color: var(--main-dark); border-color: var(--main); }

.btn-light {
  background: transparent;
  color: var(--on-deep);
  border-color: rgba(236, 232, 247, 0.45);
}

.btn-light:hover { background: rgba(236, 232, 247, 0.12); color: #fff; border-color: var(--on-deep); }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--main);
  outline-offset: 3px;
}

.band a:focus-visible, .band button:focus-visible { outline-color: var(--on-deep); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.strip {
  background: var(--ink);
  color: var(--on-deep);
  font-size: var(--f-xs);
  letter-spacing: 0.04em;
}

.strip-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-top: var(--s3);
  padding-bottom: var(--s3);
}

.strip b { color: #fff; font-weight: 500; }

.strip-meta { color: var(--on-deep-muted); }

.strip a { color: var(--soft); }

.head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 250, 253, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.head-in {
  display: flex;
  align-items: center;
  gap: var(--s6);
  min-height: 80px;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--f-lg);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brand svg { color: var(--main); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin-left: auto;
}

.nav a {
  font-size: var(--f-sm);
  text-decoration: none;
  color: var(--muted);
  padding: var(--s3) 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover, .nav a[aria-current="page"] { color: var(--main); border-bottom-color: var(--main); }

.cur {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.cur button {
  min-width: 52px;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--f-sm);
  font-weight: 500;
  cursor: pointer;
}

.cur button[aria-pressed="true"] { background: var(--main); color: #fff; }

.hero { padding: var(--s9) 0 var(--s8); }

.hero-in {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: var(--s8);
  align-items: center;
}

.hero-media { position: relative; }

.hero-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 260px 260px var(--radius) var(--radius);
}

.hero-copy h1 { margin-bottom: var(--s5); }

.hero-copy p {
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: var(--s6);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s7);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.hero-facts div span {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--f-xl);
  color: var(--main);
}

.hero-facts div small {
  font-size: var(--f-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.band {
  background: var(--deep);
  color: var(--on-deep);
  padding: var(--s9) 0;
}

.band-in {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s8);
  align-items: start;
}

.band h2 { margin-bottom: var(--s7); }

.feat {
  display: flex;
  gap: var(--s5);
  padding: var(--s5) 0;
  border-top: 1px solid rgba(236, 232, 247, 0.16);
}

.feat:first-of-type { border-top: 0; padding-top: 0; }

.feat svg { flex: none; color: var(--soft); }

.feat h3 { font-size: var(--f-md); margin-bottom: var(--s2); font-family: "Jost", sans-serif; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.feat p { color: var(--on-deep-muted); font-size: var(--f-sm); }

.terms {
  border: 1px solid rgba(236, 232, 247, 0.28);
  border-radius: var(--radius);
  padding: var(--s6);
}

.terms h3 { font-size: var(--f-xl); margin-bottom: var(--s5); }

.terms dl { margin: 0; }

.terms .row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px dashed rgba(236, 232, 247, 0.2);
  font-size: var(--f-sm);
}

.terms .row:last-of-type { border-bottom: 0; }

.terms dt { color: var(--on-deep-muted); }

.terms dd { margin: 0; font-weight: 500; }

.terms .btn { margin-top: var(--s5); width: 100%; }

.terms-note {
  margin-top: var(--s4);
  font-size: var(--f-xs);
  color: var(--on-deep-muted);
}

.section-head-light p { color: var(--on-deep-muted); }

.section { padding: var(--s9) 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s6);
  margin-bottom: var(--s7);
}

.section-head p { color: var(--muted); max-width: 44ch; }

.cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}

.cat {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--tint);
}

.cat img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cat:hover img { transform: scale(1.04); }

.cat span {
  position: absolute;
  left: var(--s5);
  bottom: var(--s5);
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s5);
  background: var(--main);
  color: #fff;
  border-radius: var(--radius);
  font-size: var(--f-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--s8);
  align-items: center;
}

.split h2 { margin-bottom: var(--s5); }

.split > div > p { color: var(--muted); }

.split > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--soft);
}

.notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5);
}

.note {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s6);
}

.note svg { color: var(--main); margin-bottom: var(--s4); }

.note h3 { font-size: var(--f-lg); margin-bottom: var(--s2); }

.note p { font-size: var(--f-sm); color: var(--muted); }

.tiers {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--s7);
  align-items: start;
}

.tiers table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--f-sm);
}

.tiers th, .tiers td {
  text-align: left;
  padding: var(--s4);
  border-bottom: 1px solid var(--line);
}

.tiers thead th {
  font-family: "Jost", sans-serif;
  font-size: var(--f-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--main);
}

.tiers tbody th {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--ink);
}

.tiers td { color: var(--muted); }

.tiers .tier-off { color: var(--main); font-weight: 500; }

.tiers tbody tr:last-child th, .tiers tbody tr:last-child td { border-bottom: 0; }

.tiers tbody tr:last-child { background: var(--tint); }

.tier-notes { display: grid; gap: var(--s5); }

.note-line { border-left: 2px solid var(--main); padding-left: var(--s5); }

.note-line b {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--f-lg);
  font-weight: 600;
  margin-bottom: var(--s2);
}

.note-line p { font-size: var(--f-sm); color: var(--muted); }

.buyers-sec { background: var(--tint); border-top: 1px solid var(--line); }

.buyers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}

.buyers li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
}

.buyers b {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--f-lg);
  font-weight: 600;
  margin-bottom: var(--s2);
}

.buyers span { display: block; font-size: var(--f-sm); color: var(--muted); }

.catalogue { background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.sheet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
}

.filters { display: flex; flex-wrap: wrap; gap: var(--s2); }

.filters button {
  min-height: 40px;
  padding: 0 var(--s4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--f-sm);
  color: var(--muted);
  cursor: pointer;
}

.filters button:hover { border-color: var(--main); color: var(--main); }

.filters button[aria-pressed="true"] { background: var(--main); border-color: var(--main); color: #fff; }

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--f-sm);
  color: var(--muted);
  cursor: pointer;
}

.switch input { width: 18px; height: 18px; accent-color: var(--main); }

.card figure { position: relative; }

.case-tag {
  position: absolute;
  left: var(--s3);
  top: var(--s3);
  background: rgba(23, 18, 42, 0.86);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--s1) var(--s3);
  font-size: var(--f-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}

.card-sku {
  font-size: var(--f-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.spec {
  margin: var(--s3) 0 0;
  display: grid;
  gap: var(--s1);
  font-size: var(--f-xs);
}

.spec > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s1) 0;
  border-bottom: 1px dashed var(--line);
}

.spec dt { color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

.spec dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

.prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-top: var(--s4);
  padding: var(--s4);
  background: var(--tint);
  border-radius: var(--radius);
}

.price-cell small {
  display: block;
  font-size: var(--f-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-case { color: var(--main); }

.card-foot { flex-wrap: wrap; row-gap: var(--s3); }

.rrp { font-size: var(--f-xs); color: var(--muted); letter-spacing: 0.04em; }

.rrp b { color: var(--ink); font-weight: 500; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.qty-on { border-color: var(--main); }

.qty-btn {
  width: 38px;
  min-height: 40px;
  border: 0;
  background: var(--tint);
  color: var(--main);
  font-family: inherit;
  font-size: var(--f-md);
  cursor: pointer;
}

.qty-btn:hover { background: var(--soft); }

.qty input {
  width: 52px;
  min-height: 40px;
  border: 0;
  text-align: center;
  font-family: inherit;
  font-size: var(--f-sm);
  color: var(--ink);
  background: transparent;
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.qty input:focus-visible { outline: 2px solid var(--main); outline-offset: -2px; }

.pricelist { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

.pricelist table { width: 100%; border-collapse: collapse; font-size: var(--f-sm); white-space: nowrap; }

.pricelist th, .pricelist td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}

.pricelist thead th {
  position: sticky;
  top: 0;
  background: var(--tint);
  font-family: "Jost", sans-serif;
  font-size: var(--f-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}

.pricelist tbody th { font-weight: 500; color: var(--ink); }

.pricelist td { color: var(--muted); font-variant-numeric: tabular-nums; }

.pricelist .mono { letter-spacing: 0.06em; color: var(--main); }

.pricelist tbody tr:hover { background: var(--tint); }

.sheet-foot { margin-top: var(--s5); font-size: var(--f-sm); color: var(--muted); }

.split-lead { margin-bottom: var(--s5); }

.logi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
}

.logi-item {
  border: 1px solid rgba(236, 232, 247, 0.28);
  border-radius: var(--radius);
  padding: var(--s5);
}

.logi-item b {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--f-lg);
  font-weight: 600;
  margin-bottom: var(--s2);
}

.logi-item p { font-size: var(--f-sm); color: var(--on-deep-muted); }

.faq { margin-top: var(--s8); max-width: 78ch; }

.faq h3 { font-size: var(--f-xl); margin-bottom: var(--s5); }

.faq details {
  border-top: 1px solid var(--line);
  padding: var(--s4) 0;
}

.faq details:last-of-type { border-bottom: 1px solid var(--line); }

.faq summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after { content: "+"; color: var(--main); font-size: var(--f-lg); line-height: 1; }

.faq details[open] summary::after { content: "\2212"; }

.faq details p { margin-top: var(--s3); font-size: var(--f-sm); color: var(--muted); }

.pad {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--ink);
  color: var(--on-deep);
  border-top: 1px solid rgba(236, 232, 247, 0.2);
}

.pad[hidden] { display: none; }

body.has-pad { padding-bottom: 112px; }

.pad-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding-top: var(--s4);
  padding-bottom: var(--s4);
}

.pad-sum { display: flex; gap: var(--s6); flex-wrap: wrap; }

.pad-sum span {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--f-lg);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.pad-sum small {
  font-size: var(--f-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-deep-muted);
}

.pad-total span { color: var(--soft); font-size: var(--f-xl); }

.pad-act { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }

.pad-warn {
  font-size: var(--f-xs);
  color: var(--on-deep-muted);
  max-width: 30ch;
}

.pad .btn-line { color: var(--on-deep); border-color: rgba(236, 232, 247, 0.4); }

.pad .btn-line:hover { background: rgba(236, 232, 247, 0.12); color: #fff; border-color: var(--on-deep); }

.pad a:focus-visible, .pad button:focus-visible { outline-color: var(--on-deep); }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.card figure {
  margin: 0;
  background: var(--soft);
  aspect-ratio: 1 / 1;
}

.card figure img { width: 100%; height: 100%; object-fit: cover; }

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  flex: 1;
  padding: var(--s5);
}

.card-kind {
  font-size: var(--f-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--main);
}

.card h3 { font-size: var(--f-lg); }

.card p { font-size: var(--f-sm); color: var(--muted); }

/* Lets the description absorb the slack so specs and prices line up across a row. */
.card-body > p { flex: 1 0 auto; }

.card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.price {
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--f-xl);
  color: var(--ink);
}

.unit { font-size: var(--f-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s7);
}

.step { border-top: 2px solid var(--main); padding-top: var(--s4); }

.step b {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: var(--f-lg);
  margin-bottom: var(--s2);
}

.step p { font-size: var(--f-sm); color: var(--muted); }

.foot {
  background: var(--ink);
  color: var(--on-deep);
  padding: var(--s9) 0 var(--s6);
}

.foot-in {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s8);
}

.foot .brand { color: var(--on-deep); margin-bottom: var(--s4); }

.foot .brand svg { color: var(--soft); }

.foot p, .foot li { color: var(--on-deep-muted); font-size: var(--f-sm); }

.foot h4 {
  font-family: "Jost", sans-serif;
  font-size: var(--f-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--on-deep);
  margin-bottom: var(--s4);
}

.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }

.foot a { color: var(--on-deep-muted); text-decoration: none; }

.foot a:hover { color: #fff; text-decoration: underline; }

.foot-note {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid rgba(236, 232, 247, 0.16);
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  font-size: var(--f-xs);
  color: var(--on-deep-muted);
}

.social { display: flex; gap: var(--s4); }

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(236, 232, 247, 0.28);
}

.page-head {
  background: var(--deep);
  color: var(--on-deep);
  padding: var(--s9) 0;
}

.page-head p { color: var(--on-deep-muted); max-width: 56ch; margin-top: var(--s4); }

.doc { padding: var(--s8) 0 var(--s9); max-width: 78ch; }

.doc h2 {
  font-size: var(--f-xl);
  margin: var(--s8) 0 var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.doc h2:first-of-type { margin-top: var(--s5); }

.doc h3 { font-size: var(--f-md); margin: var(--s5) 0 var(--s2); }

.doc p, .doc li { color: var(--muted); }

.doc p { margin-bottom: var(--s4); }

.doc ul, .doc ol { margin: 0 0 var(--s4); padding-left: var(--s5); }

.doc li { margin-bottom: var(--s2); }

.doc strong { color: var(--ink); font-weight: 500; }

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s5);
  font-size: var(--f-sm);
}

.doc th, .doc td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  color: var(--muted);
}

.doc th { background: var(--tint); color: var(--ink); font-weight: 500; }

.doc .lead { font-size: var(--f-lg); color: var(--ink); }

.stamp {
  display: inline-block;
  font-size: var(--f-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--main);
  border: 1px solid var(--soft);
  border-radius: var(--radius);
  padding: var(--s2) var(--s4);
  margin-bottom: var(--s5);
}

@media (max-width: 980px) {
  :root { --f-4xl: 2.441rem; --f-3xl: 1.953rem; }
  .hero-in, .band-in, .split, .foot-in, .tiers { grid-template-columns: 1fr; gap: var(--s7); }
  .hero-media img { aspect-ratio: 4 / 3; border-radius: 200px 200px var(--radius) var(--radius); }
  .cats, .grid, .steps, .buyers, .logi { grid-template-columns: repeat(2, 1fr); }
  .section, .band, .hero, .page-head { padding: var(--s8) 0; }
  .head-in { flex-wrap: wrap; gap: var(--s4); min-height: 0; padding: var(--s4) 0; }
  .nav { margin-left: 0; width: 100%; flex-wrap: wrap; gap: var(--s4); }
  .cur { margin-left: auto; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .pad-sum { gap: var(--s5); }
  body.has-pad { padding-bottom: 172px; }
}

@media (max-width: 620px) {
  .cats, .grid, .steps, .notes, .buyers, .logi { grid-template-columns: 1fr; }
  .hero-facts { flex-wrap: wrap; gap: var(--s5); }
  .strip-in { justify-content: flex-start; }
  .pad-in { gap: var(--s3); }
  .pad-sum { gap: var(--s4); font-size: var(--f-sm); }
  .pad-sum span { font-size: var(--f-md); }
  .pad-total span { font-size: var(--f-lg); }
  .pad-act { width: 100%; }
  .pad-act .btn { flex: 1; padding: 0 var(--s4); }
  .pad-warn { width: 100%; max-width: none; }
  body.has-pad { padding-bottom: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}