/* ==========================================================================
   MAHU — page compositions.
   The illustrated scenes are built from the brand's band order: sun, hills,
   headland, sea, beach. No photography needed beyond the hero.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{position:relative;width:100%;aspect-ratio:1774/887;
  min-height:min(100svh,620px);max-height:100svh;display:flex;align-items:center;
  background:var(--teal-600);color:var(--cream-100);overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--hero-img-pos)}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(to var(--hero-scrim-dir),
    rgba(18,48,51,.92) 0%,rgba(18,48,51,.86) 26%,rgba(18,48,51,.62) 48%,
    rgba(18,48,51,.24) 74%,rgba(18,48,51,0) 100%)}
.hero__fade{position:absolute;inset-inline:0;bottom:0;height:26%;
  background:linear-gradient(to bottom,rgba(255,241,223,0) 0%,
    rgba(255,241,223,.55) 52%,var(--cream-100) 100%)}
.hero__inner{position:relative;width:100%;min-height:inherit;
  padding:clamp(24px,4vw,64px) clamp(24px,4vw,48px) clamp(90px,12vw,150px)}
/* Wide enough for the display headline to keep its authored line breaks —
   the body paragraph sets its own 42ch measure, so this only frees the h1. */
.hero__copy{position:absolute;bottom:clamp(104px,20%,200px);
  inset-inline-start:max(24px,calc(50% - 550px));
  width:min(720px,calc(100% - 48px));display:flex;flex-direction:column;
  gap:24px;align-items:flex-start;min-width:0}
.hero__title{font-size:var(--size-hero);line-height:var(--lh-display-xl);text-wrap:balance}
.hero__body{margin:0;max-width:42ch;font-size:clamp(15px,2.6svh,18px);
  line-height:1.55;color:var(--cream-100)}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:4px}
.hero__cue{position:absolute;inset-inline:0;bottom:clamp(14px,2vw,26px);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--ink-900);font-size:var(--size-caption);text-transform:uppercase;
  letter-spacing:var(--track-eyebrow)}
:root[lang="ar"] .hero__cue{text-transform:none}
.hero__cue:hover{color:var(--teal-700)}

/* Page header for the inner pages — the hero's little sibling. */
.phead{background:var(--teal-600);color:var(--cream-100);padding-top:96px}
.phead__inner{padding-block:clamp(32px,6vw,72px);display:flex;flex-direction:column;
  gap:16px;align-items:flex-start}
.phead .t-eyebrow{color:var(--sun-200)}
.phead p{margin:0;max-width:48ch;font-size:var(--size-body-l);
  line-height:1.6;color:rgba(255,241,223,.86)}

/* --------------------------------------------------------------------------
   How it works — three painted steps
   -------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:4px}
.step{min-width:0;min-height:380px;padding:28px;color:var(--ink-900);
  display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.step--1{background:var(--sun-200)}
.step--2{background:var(--sand-300)}
.step--3{background:var(--teal-400)}
.step__meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.step__title{font-size:var(--size-step-title);line-height:var(--lh-display-m)}
.step__text{display:flex;flex-direction:column;gap:14px}
.step__body{margin:0;font-size:15px;line-height:1.6}
.step__art{position:relative;height:150px;flex:0 0 auto;overflow:hidden}

/* step 1 — low sun over water */
.art-sun{position:absolute;bottom:28px;inset-inline-end:10px;width:104px;height:104px;
  border-radius:50%;background:var(--fire-opal-500)}
.art-waves{position:absolute;inset-inline:0;bottom:16px;height:14px}
/* step 2 — two cups */
.cup{position:absolute;bottom:6px;border-radius:999px;
  display:flex;align-items:center;justify-content:center}
.cup>i{border-radius:999px;display:block}
.cup--a{inset-inline-end:26px;width:22px;height:118px;background:var(--cream-100);transform:rotate(-14deg)}
.cup--a>i{width:4px;height:82px;background:var(--fire-opal-500)}
.cup--b{inset-inline-end:62px;width:20px;height:98px;background:var(--teal-600);transform:rotate(11deg)}
.cup--b>i{width:3px;height:68px;background:var(--sun-200)}
/* step 3 — headland */
.art-sun2{position:absolute;bottom:46px;inset-inline-end:18px;width:84px;height:84px;
  border-radius:50%;background:var(--sun-200)}
.art-land{position:absolute;inset-inline:0;bottom:30px;height:52px;background:var(--pine-800);
  clip-path:polygon(0 100%,16% 34%,38% 100%,58% 46%,80% 12%,100% 100%)}
.art-waves2{position:absolute;inset-inline:0;bottom:8px;height:16px}

.how__kicker{margin-top:clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;
  align-items:center;gap:16px 28px;padding-top:24px;border-top:1px solid var(--border-hairline)}
.how__kicker b{font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:clamp(28px,3vw,38px);line-height:1;letter-spacing:var(--track-display);
  text-transform:uppercase;color:var(--teal-600)}
:root[lang="ar"] .how__kicker b{text-transform:none}

/* --------------------------------------------------------------------------
   Menu
   -------------------------------------------------------------------------- */
.drink__name{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:30px;
  line-height:var(--lh-title);letter-spacing:var(--track-display);
  text-transform:uppercase;color:var(--ink-900);margin:0}
:root[lang="ar"] .drink__name{text-transform:none}
.drink__note{margin:0;font-size:15px;line-height:1.6;color:var(--text-muted)}
.drink__proof{margin-top:auto;font-size:var(--size-caption);text-transform:uppercase;
  letter-spacing:var(--track-eyebrow);color:var(--teal-600)}
:root[lang="ar"] .drink__proof{text-transform:none;letter-spacing:0}
.drink__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;padding-top:4px}
.price{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:34px;
  line-height:1;color:var(--text-price)}
.price small{font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--size-caption);
  letter-spacing:.14em;margin-inline-start:5px}
.card__badge{position:absolute;top:14px;inset-inline-start:14px;pointer-events:none}

/* Image slot — brand-coloured stand-in until the photo lands. */
.slot{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:18px;background:
    linear-gradient(180deg,var(--cream-100) 0%,var(--cream-100) 46%,
      var(--sun-200) 46%,var(--sun-200) 58%,
      var(--teal-400) 58%,var(--teal-400) 82%,
      var(--sand-300) 82%,var(--sand-300) 100%)}
.slot span{font-size:var(--size-caption);line-height:1.4;font-weight:var(--fw-bold);
  color:var(--ink-700);background:rgba(255,241,223,.82);padding:6px 10px;
  border-radius:var(--radius-pill)}

/* Limited drop strip */
.drop{display:flex;flex-wrap:wrap;align-items:stretch;background:var(--fire-opal-500);
  color:var(--cream-100);border-radius:var(--radius-card);overflow:hidden}
.drop__media{flex:1 1 150px;min-height:150px;background:rgba(255,241,223,.22)}
.drop__media img{width:100%;height:100%;object-fit:cover;display:block}
.drop__body{flex:6 1 300px;min-width:0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:18px 28px;padding:22px clamp(20px,3vw,28px)}
.drop__text{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:8px}
.drop__title{font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:clamp(26px,3vw,32px);line-height:1.1;letter-spacing:var(--track-display);
  text-transform:uppercase}
:root[lang="ar"] .drop__title{text-transform:none}
.drop__note{font-size:var(--size-body);line-height:1.6;color:rgba(255,241,223,.9)}

/* Full menu list (menu page + board) */
.mlist{display:flex;flex-direction:column;gap:2px}
.mrow{display:flex;align-items:baseline;gap:16px;padding:18px 0;
  border-bottom:1px solid var(--border-hairline)}
.mrow__name{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:26px;
  letter-spacing:var(--track-display);text-transform:uppercase;color:var(--ink-900)}
:root[lang="ar"] .mrow__name{text-transform:none}
.mrow__note{font-size:var(--size-body-s);color:var(--text-muted)}
.mrow__dots{flex:1;border-bottom:1px dotted var(--border-hairline);min-width:20px}
.mrow__price{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:26px;
  color:var(--text-price);white-space:nowrap}
.tabs{display:flex;flex-wrap:wrap;gap:8px}

/* --------------------------------------------------------------------------
   Loyalty card
   -------------------------------------------------------------------------- */
.loycard{width:100%;max-width:420px;background:var(--cream-100);
  border:2px solid var(--pine-800);box-shadow:var(--shadow-2);
  transform:rotate(-1.5deg);overflow:hidden}
.loycard__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;background:var(--pine-800)}
.loycard__head span{font-size:var(--size-caption);text-transform:uppercase;
  letter-spacing:.16em;color:var(--sun-200)}
:root[lang="ar"] .loycard__head span{text-transform:none;letter-spacing:0}
.loycard__body{padding:26px 22px 22px;display:flex;flex-direction:column;gap:18px}
.loycard__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.loycard__rule{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:20px;
  line-height:1;letter-spacing:var(--track-display);text-transform:uppercase;color:var(--teal-600)}
:root[lang="ar"] .loycard__rule{text-transform:none}
.loycard__points{display:flex;align-items:baseline;gap:10px}
.loycard__n{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:72px;
  line-height:.9;letter-spacing:var(--track-display);color:var(--pine-800)}
.loycard__unit{font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--size-body-s);
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-700)}
:root[lang="ar"] .loycard__unit{text-transform:none;letter-spacing:0}
.loycard__bar{height:14px;background:var(--cream-200);border:2px solid var(--pine-800);overflow:hidden}
.loycard__fill{width:0;height:100%;background:var(--teal-600);
  transition:width 600ms var(--ease-standard)}
.loycard__tear{height:0;border-top:2px dashed var(--pine-800);opacity:.45}
.loycard__foot{padding:16px 22px 20px;display:flex;flex-direction:column;gap:8px}
.loycard__foot b{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:22px;
  line-height:1.15;letter-spacing:var(--track-display);text-transform:uppercase;color:var(--pine-800)}
:root[lang="ar"] .loycard__foot b{text-transform:none}
.loycard__fine{font-size:var(--size-body-s);line-height:1.5;color:var(--ink-500)}
.loyrules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px}
.loyrule{display:flex;flex-direction:column;gap:8px}
.loyrule__n{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:20px;
  color:var(--sandy-brown-500);letter-spacing:var(--track-display)}

/* --------------------------------------------------------------------------
   Story
   -------------------------------------------------------------------------- */
.story__grid{min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.story__tile{background:var(--white);border-radius:var(--radius-lg);overflow:hidden}
.story__tile--wide{grid-column:span 2}
/* These are packshots on white, not photographs — contain keeps the whole
   product in frame, and the tile is white too, so the fit is seamless. */
.story__tile img{width:100%;object-fit:contain;display:block;padding:10px}
.story__tile--wide img{aspect-ratio:8/3}
.story__tile:not(.story__tile--wide) img{aspect-ratio:4/3}

/* --------------------------------------------------------------------------
   Find us
   -------------------------------------------------------------------------- */
.branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px}
.branch{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--border-hairline);border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);overflow:hidden;
  transition:box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard)}
.branch:hover{box-shadow:var(--shadow-2);border-color:var(--teal-400)}
.branch--near{border-color:var(--teal-600)}
.branch__media{position:relative;aspect-ratio:4/3;background:var(--surface-inset)}
.branch__near{position:absolute;top:12px;inset-inline-start:12px;padding:5px 12px;
  background:var(--sun-200);color:var(--ink-900);border-radius:var(--radius-pill);
  font-size:10px;font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:var(--track-eyebrow);white-space:nowrap}
:root[lang="ar"] .branch__near{text-transform:none;letter-spacing:0}
.branch__body{flex:1 1 auto;display:flex;flex-direction:column;gap:16px;padding:20px 20px 22px}
.branch__status{display:flex;align-items:center;gap:9px;min-height:22px;
  font-size:var(--size-caption);font-weight:var(--fw-bold);text-transform:uppercase;
  letter-spacing:var(--track-eyebrow)}
:root[lang="ar"] .branch__status{text-transform:none;letter-spacing:0}
.branch__dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.branch__name{font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:clamp(28px,3vw,34px);line-height:var(--lh-display-m);
  letter-spacing:var(--track-display);text-transform:uppercase;color:var(--ink-900)}
:root[lang="ar"] .branch__name{text-transform:none}
.branch__area{font-size:15px;line-height:1.5;color:var(--ink-500)}
.branch__km{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:18px;
  letter-spacing:var(--track-display);text-transform:uppercase;color:var(--teal-700)}
.branch__actions{margin-top:auto;display:flex;flex-direction:column;gap:9px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:20px;padding-top:28px;border-top:1px solid var(--border-hairline)}
.fact{display:flex;flex-direction:column;gap:6px}
.fact b{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:28px;
  letter-spacing:var(--track-display);text-transform:uppercase;color:var(--teal-600)}
:root[lang="ar"] .fact b{text-transform:none}

/* --------------------------------------------------------------------------
   Closing CTA — the full brand scene
   -------------------------------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:var(--sun-200);color:var(--ink-900)}
.cta__scene{position:absolute;inset:0}
.cta__sun{position:absolute;bottom:27%;inset-inline-end:13%;
  width:clamp(116px,14vw,180px);height:clamp(116px,14vw,180px);
  border-radius:50%;background:var(--fire-opal-500)}
.cta__hills{position:absolute;inset-inline:0;bottom:23%;height:15%;background:var(--teal-600);
  clip-path:polygon(0 100%,14% 30%,32% 100%,50% 46%,68% 6%,86% 100%,100% 54%,100% 100%)}
.cta__head{position:absolute;inset-inline:0;bottom:23%;height:9%;background:var(--pine-800);
  clip-path:polygon(0 100%,9% 40%,22% 100%,42% 24%,60% 100%,76% 48%,90% 100%,100% 64%,100% 100%)}
.cta__sea{position:absolute;inset-inline:0;bottom:9%;height:14%;background:var(--teal-400)}
.cta__sea svg{position:absolute;inset-inline:0;width:100%}
.cta__beach{position:absolute;inset-inline:0;bottom:0;height:9%;background:var(--sand-300)}
.cta__cup{position:absolute;bottom:4%;border-radius:999px;
  display:flex;align-items:center;justify-content:center}
.cta__cup>i{border-radius:999px;display:block}
.cta__cup--a{inset-inline-start:7%;width:24px;height:124px;background:var(--cream-100);transform:rotate(-16deg)}
.cta__cup--a>i{width:4px;height:88px;background:var(--fire-opal-500)}
.cta__cup--b{inset-inline-start:13%;width:21px;height:102px;background:var(--teal-600);transform:rotate(13deg)}
.cta__cup--b>i{width:3px;height:72px;background:var(--sun-200)}
.cta__inner{position:relative;padding:clamp(56px,8vw,104px) 0 clamp(240px,32vw,400px);
  display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.cta__title{max-width:15ch;font-size:clamp(40px,6vw,76px);
  line-height:var(--lh-display-l);text-wrap:balance}
.cta__sub{margin:0;max-width:28ch;font-size:var(--size-body-l);line-height:1.6;color:var(--ink-700)}

/* --------------------------------------------------------------------------
   Forms (jobs, franchise, order)
   -------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:var(--size-caption);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:var(--track-eyebrow);color:var(--ink-500)}
:root[lang="ar"] .field label{text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{
  min-height:50px;padding:12px 16px;background:var(--white);color:var(--ink-900);
  border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:var(--size-body);
  transition:border-color var(--dur-fast) var(--ease-standard)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--teal-600);outline:none;box-shadow:0 0 0 3px var(--teal-050)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px}
.form__wide{grid-column:1/-1}
.note{padding:14px 18px;background:var(--teal-050);color:var(--teal-700);
  border-radius:var(--radius-sm);font-size:var(--size-body-s);font-weight:var(--fw-bold)}
.note[hidden]{display:none}

/* Radio pills (pickup time, window) */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills input{position:absolute;opacity:0;width:0;height:0}
.pills label{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  background:var(--white);color:var(--ink-700);border:var(--border-width) solid var(--border-hairline);
  border-radius:var(--radius-pill);font-size:var(--size-body-s);font-weight:var(--fw-bold);
  text-transform:none;letter-spacing:0;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard)}
.pills label:hover{background:var(--teal-050)}
.pills input:checked+label{background:var(--teal-600);color:var(--cream-100);border-color:var(--teal-600)}
.pills input:focus-visible+label{outline:3px solid var(--focus-ring);outline-offset:2px}

/* --------------------------------------------------------------------------
   Order app
   -------------------------------------------------------------------------- */
.order__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:900px){.order__grid{grid-template-columns:1fr}}
.basket{position:sticky;top:96px;background:var(--white);
  border:1px solid var(--border-hairline);border-radius:var(--radius-card);
  box-shadow:var(--shadow-2);overflow:hidden}
.basket__head{padding:18px 20px;background:var(--pine-800);color:var(--cream-100);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.basket__body{padding:20px;display:flex;flex-direction:column;gap:16px}
.line{display:flex;align-items:center;gap:12px}
.line__name{flex:1;min-width:0;font-weight:var(--fw-bold);font-size:var(--size-body-s)}
.line__price{font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:20px;color:var(--text-price);white-space:nowrap}
.stepper{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--border-hairline);
  border-radius:var(--radius-pill);overflow:hidden;background:var(--cream-100)}
.stepper button{width:34px;height:34px;display:grid;place-items:center;background:transparent;
  border:none;color:var(--teal-700);font-size:18px;font-weight:var(--fw-bold);cursor:pointer}
.stepper button:hover{background:var(--teal-050)}
.stepper span{min-width:28px;text-align:center;font-weight:var(--fw-bold);font-size:var(--size-body-s)}
.basket__total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:16px;border-top:1px solid var(--border-hairline)}
.ticket{text-align:center;padding:40px 24px;display:flex;flex-direction:column;
  gap:16px;align-items:center;animation:mahuPop var(--dur-slow) var(--ease-out) both}
.ticket__code{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:64px;
  line-height:1;letter-spacing:var(--track-display);color:var(--pine-800)}

/* --------------------------------------------------------------------------
   Menu board (in-store screen)
   -------------------------------------------------------------------------- */
.board{min-height:100vh;background:var(--pine-800);color:var(--cream-100);
  display:flex;flex-direction:column}
.board__head{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(20px,3vw,36px) clamp(24px,4vw,56px)}
.board__cols{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(24px,4vw,56px);padding:0 clamp(24px,4vw,56px) clamp(24px,4vw,48px)}
.board__col h2{font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:clamp(28px,3vw,40px);letter-spacing:var(--track-display);
  text-transform:uppercase;color:var(--sun-200);margin:0 0 18px;
  padding-bottom:12px;border-bottom:2px solid rgba(255,241,223,.24)}
:root[lang="ar"] .board__col h2{text-transform:none}
.board__row{display:flex;align-items:baseline;gap:14px;padding:12px 0}
.board__name{font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:clamp(22px,2.2vw,30px);letter-spacing:var(--track-display);text-transform:uppercase}
:root[lang="ar"] .board__name{text-transform:none}
.board__note{font-size:var(--size-body-s);color:rgba(255,241,223,.66)}
.board__price{margin-inline-start:auto;font-family:var(--font-display);
  font-weight:var(--fw-bold);font-size:clamp(22px,2.2vw,30px);color:var(--sun-200)}

/* --------------------------------------------------------------------------
   Design system reference page
   -------------------------------------------------------------------------- */
.ds-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ds-swatch{border:1px solid var(--border-hairline);border-radius:var(--radius-sm);overflow:hidden;
  background:var(--white)}
.ds-swatch__chip{height:72px}
.ds-swatch__meta{padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.ds-swatch__name{font-size:var(--size-caption);font-weight:var(--fw-bold);color:var(--ink-900)}
.ds-swatch__hex{font-family:var(--font-mono);font-size:11px;color:var(--ink-500)}
.ds-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:22px;background:var(--white);border:1px solid var(--border-hairline);
  border-radius:var(--radius-card)}
.ds-row--dark{background:var(--pine-800);border-color:transparent}
.ds-block{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(32px,5vw,56px)}
.ds-spec{font-family:var(--font-mono);font-size:12px;color:var(--ink-500)}
.ds-scale{display:flex;flex-direction:column;gap:10px}
.ds-scale>div{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--border-hairline)}