/* GW Email CTA — Figma 32:926 (desktop 1440) / 32:1884 (mobile 390).
   Mobile-first: base = mobile 390 exact, >=1025 desktop 1440 exact. Four things
   change across the breakpoint — section padding (64/16 -> 96/48/64), root
   axis (column gap 32 -> row gap 104), the content cap (fluid -> 1344px) and
   the heading (32 -> 40). Desktop bottom padding is 64, NOT the frame's 128:
   QA (BugHerd #24) flagged the 128 plus the benefit bar's 32 as too much white
   space; 64 leaves 96 to the benefit row, matching the 96 top. The 16px
   within-group gap, the 64px control height, the input padding and the 108px
   button are invariant in both frames, so they are declared once and never
   overridden.
   NO font-family is declared: the section uses semantic tags and inherits the
   merchant's type settings, which are ebgaramond_n4 for both header and body —
   the design's only family. The gw-faq / gw-why-us precedent. `inherit` IS set
   on the input and button, which otherwise fall back to the UA font.
   line-height is `normal` throughout: every Figma text node emits
   leading-[normal], NOT the lineHeight:100 the style definitions carry.
   Measured: 21px at 16px (~1.3), 156px/3 lines at 40px.
   No background is declared in either frame, so --gw-ec-bg defaults to
   transparent and the band inherits the page. */
.gw-email-cta{padding:64px 16px;background:var(--gw-ec-bg,transparent)}
.gw-email-cta *,.gw-email-cta *::before,.gw-email-cta *::after{box-sizing:border-box}
.gw-email-cta__wrap{display:flex;flex-direction:column;gap:32px;align-items:center}
.gw-email-cta__copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start;width:100%}
.gw-email-cta__heading{margin:0;font-size:32px;font-weight:400;line-height:normal;letter-spacing:0;text-transform:none;color:var(--gw-ec-heading-color,#000000)}
.gw-email-cta__accent{color:var(--gw-ec-accent-color,#897244)}
.gw-email-cta__body{margin:0;font-size:16px;font-weight:400;line-height:normal;letter-spacing:0;color:var(--gw-ec-body-color,#414444)}
.gw-email-cta__form{width:100%}
.gw-email-cta__row{display:flex;gap:16px;align-items:center}
.gw-email-cta input.gw-email-cta__input{flex:1 0 0;min-width:0;height:64px;margin:0;padding:16px 24px;border:1px solid var(--gw-ec-input-border,#F2EAD8);border-radius:0;background:transparent;box-shadow:none;font-family:inherit;font-size:16px;font-weight:400;line-height:normal;color:var(--gw-ec-body-color,#414444)}
.gw-email-cta input.gw-email-cta__input::placeholder{color:var(--gw-ec-body-color,#414444);opacity:1}
.gw-email-cta button.gw-email-cta__button{flex:0 0 auto;width:108px;height:64px;margin:0;padding:12px 24px;border:0;border-radius:0;background:var(--gw-ec-button-bg,#4A3B1F);color:var(--gw-ec-button-text,#FFFFFF);font-family:inherit;font-size:16px;font-weight:400;line-height:normal;letter-spacing:0;text-transform:none;text-align:center;cursor:pointer}
.gw-email-cta input.gw-email-cta__input:focus-visible,.gw-email-cta button.gw-email-cta__button:focus-visible{outline:2px solid var(--gw-ec-accent-color,#897244);outline-offset:2px}
.gw-email-cta__message{margin:0 0 16px;font-size:16px;line-height:normal;color:var(--gw-ec-body-color,#414444)}
.gw-email-cta__placeholder{padding:24px;border:1px dashed var(--gw-ec-input-border,#F2EAD8);font-size:16px;line-height:normal;color:var(--gw-ec-body-color,#414444);text-align:center}
@media (prefers-reduced-motion:no-preference){.gw-email-cta__button{transition:opacity .2s ease}}
@media (hover:hover){.gw-email-cta button.gw-email-cta__button:hover{opacity:.85}}
@media screen and (min-width:1025px){
.gw-email-cta{padding:96px 48px 64px}
.gw-email-cta__wrap{flex-direction:row;gap:104px;justify-content:center;align-items:center;max-width:1344px;margin-inline:auto}
.gw-email-cta__copy{flex:1 0 0;min-width:0;justify-content:center}
.gw-email-cta__form{flex:1 0 0;min-width:0;width:auto}
.gw-email-cta__heading{font-size:40px}
}
/* Band layout (gw_layout = band) — Figma 112:1351 (desktop 1440) / 112:2838
   (mobile 390): a compact dark strip. Colours stay instance settings.
   Vertical padding is 48 at both breakpoints. Mobile centres the copy;
   desktop is a 756 copy | 32 | 512 form row capped at 1300 and centred, so
   1440 keeps the frame's 70px insets, and both columns shrink in proportion
   between 1025 and 1439. The heading is capitalised as the Figma node is
   (its copy is stored in sentence case). The field pads 15/23 because Figma
   measures its 16/24 from the outer edge, with the 1px stroke drawn inside. */
.gw-email-cta.gw-email-cta--band{padding:48px 16px}
.gw-email-cta--band .gw-email-cta__copy{align-items:center;text-align:center}
.gw-email-cta--band .gw-email-cta__heading{text-transform:capitalize}
.gw-email-cta--band input.gw-email-cta__input{padding:15px 23px}
@media screen and (min-width:1025px){
.gw-email-cta.gw-email-cta--band{padding:48px}
.gw-email-cta--band .gw-email-cta__wrap{gap:32px;max-width:1300px}
.gw-email-cta--band .gw-email-cta__copy{flex:0 1 756px;align-items:flex-start;text-align:left}
.gw-email-cta--band .gw-email-cta__form{flex:0 1 512px}
}
