/*! PROMOTION module (Figma salamandra-promotion 5714:24079) — title, subtitle, — copied verbatim from the demo's app.css lines 2093–2152 (commit 7df0d35). Phase 1 of demo-port: do not retype values here. */

.promotion-module{display:flex;flex-direction:column;align-items:center;gap:var(--sp-normal);min-width:0;padding:var(--sp-loose) var(--sp-normal) var(--sp-normal);border:var(--bw-thin) solid var(--border-hairline);border-radius:var(--radius-default);background:var(--bg-static-special-5);}
.promotion-module[data-bg="special-1"]{background:var(--bg-picker-special-1);}
.promotion-module[data-bg="special-2"]{background:var(--bg-picker-special-2);}
.promotion-module[data-bg="special-3"]{background:var(--bg-picker-special-3);}
.promotion-module[data-bg="special-4"]{background:var(--bg-picker-special-4);}
.promotion-module[data-bg="paper"]{background:var(--bg-basic-paper);}
.promotion-module__top{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--sp-x-tight);}/* title and subtitle are centred and editable (double-click), so they carry no
   ts-* class of their own — the ladder below owns their type */


.promotion-module__title,
.promotion-module__sub{margin:0;width:100%;text-align:center;color:var(--content-primary);}
.promotion-module__form{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--sp-tight);}/* the field is 620 wide where the column allows it, and fills the column below
   that — the Figma frames show exactly this pair of states */


.promotion-module__form .submit-field{width:100%;max-width:620px;}
.promotion-module__form .newsletter-terms{width:100%;max-width:620px;}/* Figma salamandra-promotion 5716:10943 > button-primary: fill #2b2228,
   stroke #ffffff 1px INSIDE. It shares its bound fill with the form's
   newsletter-button because both sit on the module's tint, so the CTA takes
   the same STATIC darkest surface the submit button already uses — never
   button-primary's brand signal colour, which IS the tint in eye and in ham
   and paints the button invisible. Height 40, pad 0/20, gap 5, label 700
   20/24 white and the radius already come from the existing tokens. */


.promotion-module__cta{flex:none;text-decoration:none;background:var(--bg-static-darkest);border:var(--bw-thin) solid var(--content-static-white);}
.promotion-module__cta .lbl{color:var(--content-static-white);}
/* --- the type ladder, read off the COLUMN --- */
@container card (max-width:767.98px){
  .promotion-module__title{font:var(--ts-display-md);letter-spacing:var(--ts-display-md-ls);}
  .promotion-module__sub{font:var(--ts-underline-md);letter-spacing:var(--ts-underline-md-ls);}
}
@container card (min-width:768px){
  .promotion-module__title{font:var(--ts-display-lg);letter-spacing:var(--ts-display-lg-ls);}
  .promotion-module__sub{font:var(--ts-underline-md);letter-spacing:var(--ts-underline-md-ls);}
}
@container card (min-width:1160px){
  .promotion-module__title{font:var(--ts-display-xl);letter-spacing:var(--ts-display-xl-ls);}
  .promotion-module__sub{font:var(--ts-underline-lg);letter-spacing:var(--ts-underline-lg-ls);}
}
@container card (max-width:319.98px){
  .promotion-module{gap:var(--sp-tight);padding:var(--sp-loose) var(--sp-tight) var(--sp-normal);}
  .promotion-module__title{font:var(--ts-display-sm);letter-spacing:var(--ts-display-sm-ls);}
  .promotion-module__sub{font:var(--ts-underline-xs);letter-spacing:var(--ts-underline-xs-ls);}
}
/* narrowest: no room for a form — the module falls back to its message and,
   when it has one, its button (Figma's last frame drops the form entirely) */
@container card (max-width:239.98px){
  .promotion-module{padding:var(--sp-normal) var(--sp-tight);}
  .promotion-module__title{font:var(--ts-display-xs);letter-spacing:var(--ts-display-xs-ls);}
  .promotion-module__form{display:none;}
}