/* @generated by bin/sync-design.py — do not edit; overrides go in assets/css/global.css.
   Source: Specialty Source/responsive.css */
/* Site-wide responsive rules. Desktop (≥1200px) is untouched; everything here applies below it.
   Hooks: data-m="rail" (page side rails), "box" (container inner padding),
   "cta-row" (primary + secondary action row), "btn-primary" (on the DS Button). */

/* Mobile nav: hidden on desktop, replaces the desktop bar below 1200 */
[data-m~="nav-mob"] { display: none; }
[data-m~="rail-arrows"] { display: none; }

/* Tablet 768–1199 */
@media (max-width: 1199px) {
  [data-m~="stats-4"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }  /* For Investors (2026-10-21 design) */
  [data-m~="tat-row"] { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  [data-m~="tat-row"] > span:last-child { text-align: left !important; }
  [data-m~="op-bento"] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  [data-m~="op-bento"] > [data-bento="a"] { grid-column: span 2 !important; grid-row: auto !important; min-height: 320px; }
  [data-m~="hero-vid"] { max-width: 44% !important; }
  [data-m~="promise-mark"] { width: 64vw !important; right: -22vw !important; top: 80% !important; bottom: auto !important; opacity: .6; }
  [data-m~="promise-close-mark"] { width: 620px !important; right: -240px !important; top: 86% !important; }
  [data-m~="nav-desk"] { display: none !important; }
  [data-m~="nav-mob"] { display: flex !important; }
  [data-m~="box"] { padding: 30px !important; }
  [data-m~="stack"] { gap: 48px !important; }
  [data-m~="cols-1"] { grid-template-columns: minmax(0,1fr) !important; }
  [data-m~="cols-1"] > * { grid-column: 1 / -1 !important; }
  [data-m~="unstick"] { position: static !important; }
}

/* Mobile ≤767 */
@media (max-width: 767px) {
  [data-m~="stats-4"] { grid-template-columns: minmax(0,1fr) !important; }  /* For Investors (2026-10-21 design) */
  [data-m~="span-wide"] { grid-column: auto !important; }
  [data-m~="facility-shade"] { background: linear-gradient(180deg, rgba(20,28,36,.85) 0%, rgba(20,28,36,.6) 45%, rgba(20,28,36,0) 72%) !important; }
  [data-m~="tech-row"] { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; }
  [data-m~="tech-row"] [data-tp="img"] { order: 1 !important; justify-content: flex-start !important; }
  [data-m~="tech-row"] [data-tp="q"] { order: 2 !important; justify-self: start !important; }
  [data-m~="tech-row"] [data-tp] { transform: none !important; }
  [data-m~="op-bento"] { grid-template-columns: minmax(0,1fr) !important; }
  [data-m~="op-bento"] > * { grid-column: auto !important; grid-row: auto !important; }
  [data-m~="op-stack"] { grid-template-columns: minmax(0,1fr) !important; }
  [data-m~="hero-vid"] { left: auto !important; height: auto !important; top: 0 !important; bottom: auto !important; width: 100% !important; max-width: none !important; -webkit-mask-image: linear-gradient(180deg,#000 55%,transparent 100%) !important; mask-image: linear-gradient(180deg,#000 55%,transparent 100%) !important; }
  [data-m~="rail"] { padding-left: 25px !important; padding-right: 25px !important; }
  [data-m~="box"] { padding: 30px 20px !important; }
  [data-m~="hide"] { display: none !important; }
  [data-m~="m-fields"] { grid-template-columns: minmax(0,1fr) !important; }
  [data-m~="m-fields"] > * { grid-column: 1 / -1 !important; }
  [data-m~="m-cols-1"] { grid-template-columns: minmax(0,1fr) !important; }
  [data-m~="m-cols-1"] > :last-child { justify-content: space-between !important; }
  /* A grid whose columns are at least 380px wide (auto-fit, minmax(380px, 1fr)) cannot fit a phone:
     its one column stayed 380px and the right of it was cut off (2026-10-22, I76: the appliance
     pages' gallery and text, the Education hub's featured card). One column, the width of the screen. */
  [data-m~="m-1col"] { grid-template-columns: minmax(0,1fr) !important; }
  /* Home's drifting testimonial cards are 460px, wider than a phone, so no card was ever whole on
     screen (DR41, 2026-10-23). Our Promise's rail draws them min(460px, 82vw); Home does the same. */
  [data-m~="m-tcard"] { width: min(460px, 82vw) !important; }
  /* Pastel #241 (Summer, 26 October): on phones the hero's drawn brand mark runs through the copy as it scrolls; it is left out there */
  [data-m~="hero-mark"] { display: none !important; }
  /* Pastel #242 (Summer, 26 October): stacked on a phone, the story cards drop the desktop's scroll stagger; its
     offsets (48, 120, 240px down) pushed the Turnaround card over the card below it */
  [data-el="storyCards"] [data-stag] { translate: none !important; }
  /* Pastel #234, #250, #253 (Summer, 26 October): the appliance category page on phones.
     The design keeps its desktop grids here, which squeezed the products to a sliver beside the
     category list and the selection guide's description to one word a line. */
  [data-m~="appcat-split"] { grid-template-columns: minmax(0px, 1fr) !important; gap: 32px !important; }
  [data-oa] { position: static !important; gap: 0px !important; }
  [data-oa-label] { display: none; }
  [data-oa-toggle]:not([hidden]) { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0px 16px; border: 1px solid rgba(34, 44, 55, 0.12); border-radius: var(--radius-control); background: transparent; color: var(--sp-ink); font: 600 14px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
  [data-oa-toggle] svg { transition: transform 0.3s var(--ease-out); }
  [data-oa-toggle][aria-expanded="true"] svg { transform: rotate(180deg); }
  [data-oa] [data-oa-list] { margin-top: 16px; }
  [data-oa] [data-oa-toggle]:not([hidden]) + [data-oa-list]:not(.is-open) { display: none !important; }
  [data-oa] [data-oa-list] + div { display: none; }
  [data-m~="appcat-grid"] { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 32px 16px !important; }
  #compare [data-acc] { grid-template-columns: minmax(0px, 1fr) 40px !important; gap: 8px 16px !important; padding: 24px 0px !important; }
  #compare [data-acc] > span:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 16px !important; line-height: 22px !important; }
  #compare [data-acc] > span:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  #compare [data-acc] + div > div > div { grid-template-columns: minmax(0px, 1fr) !important; gap: 24px !important; padding: 0px 0px 32px !important; }
  #compare [data-acc] + div > div > div > span:last-child { display: none; }
  /* Pastel #244 (Summer): the 3D Printed comparison fits the screen; each row's label spans the
     top and the two methods sit side by side under the column headings, no sideways scroll */
  [data-m~="cmp-table"] { min-width: 0px !important; }
  [data-m~="cmp-table"] > [role="row"] { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) !important; gap: 8px 16px !important; padding: 16px 20px !important; }
  [data-m~="cmp-table"] > [role="row"] > :first-child { grid-column: 1 / -1; }
  [data-m~="cmp-table"] > [role="row"]:first-child > :first-child { display: none; }
  [data-m~="cmp-table"] > [role="row"] > [role="cell"]:not(:first-child) { font-size: 16px !important; line-height: 22px !important; }

  /* Inner columns go full width (internal hero copy column) */
  [data-m~="col-full"] { width: 100% !important; max-width: none !important; }

  /* Primary green CTAs are full width */
  button[data-m~="btn-primary"] { display: flex !important; width: 100% !important; }
  button[data-m~="btn-primary"] { flex: 0 0 auto !important; }
  /* Any row that holds a primary button wraps, so the button can take its own full-width line */
  :is(div, span, section):has(> button[data-m~="btn-primary"]),
  :is(div, span, section):has(> .sc-host-x > button[data-m~="btn-primary"]) { flex-wrap: wrap !important; }

  /* Primary + secondary: primary on top full width, secondary stacked below and centred */
  [data-m~="cta-row"] { flex-direction: column !important; align-items: stretch !important; gap: 20px !important; }
  [data-m~="cta-row"] > *, [data-m~="cta-row"] > .sc-host-x > * { align-self: center; }
  [data-m~="cta-row"] button[data-m~="btn-primary"] { align-self: stretch !important; order: -1; }
  [data-m~="cta-row"] > .sc-host-x:has(> button[data-m~="btn-primary"]) { order: -1; }

  /* Hero callouts stack into rows with horizontal rules */
  [data-m~="home-hero"] { height: auto !important; min-height: 0 !important; max-height: none !important; display: flex !important; flex-direction: column; }
  [data-m~="callouts-wrap"] { position: relative !important; bottom: auto !important; order: 2; margin-top: 88px; padding-bottom: 75px; }
  [data-m~="callouts-wrap"] > div { justify-content: stretch !important; }
  [data-m~="callouts"] { flex: 1 1 auto; flex-direction: column !important; gap: 12px !important; }
  [data-m~="callout-rule"] { width: auto !important; height: 1px !important; }
  [data-m~="callout"] { flex-direction: row !important; align-items: baseline; gap: 16px !important; }
  [data-m~="callout"] > div:first-child { flex: 0 0 104px; }
  [data-m~="hero-copy"] { order: 1; height: auto !important; min-height: calc(100svh - 88px); width: 100%; justify-content: flex-end !important; padding-top: 140px !important; padding-bottom: 0 !important; }

  /* Stacked tab labels centred */
  [data-m~="tab-label"] { justify-content: center !important; }

  /* Section vertical rhythm: 75px top and bottom (where the section has vertical padding) */
  [data-m~="pt"] { padding-top: 75px !important; }
  [data-m~="pb"] { padding-bottom: 75px !important; }

  /* Homepage hero photo: full width, subject centred */
  [data-m~="hero-par"] { left: 0 !important; right: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; }
  [data-m~="hero-img"] { object-position: 50% 0% !important; }

  /* Homepage story section: tighter heading-to-cards gap, link moves below the cards, centred */
  [data-m~="story"] { display: flex !important; flex-direction: column; }
  [data-m~="story-head"] { display: contents !important; }
  [data-m~="story-cards"] { order: 1; margin-top: 88px !important; }
  [data-m~="story-link"] { order: 2; align-self: center; margin-top: 40px; padding-bottom: 0 !important; }

  /* Decision card list: hide up/down scroll arrows (swipe to scroll) */
  [data-m~="scroll-arrows"] { display: none !important; }

  /* Wrappers around a primary button stretch so the button can go full width */
  [data-m~="btn-wrap"] { width: 100% !important; align-self: stretch !important; }

  /* Homepage appliance slider: shorter edge fade, rail-aligned track, arrows under the slider */
  [data-m~="rail-mask"] { -webkit-mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 64px),transparent 100%) !important; mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 64px),transparent 100%) !important; }
  [data-m~="rail-track"] { padding-left: 25px !important; padding-right: 64px !important; }
  [data-m~="rail-arrows"] { display: flex !important; justify-content: flex-start; }

  /* Tab graphic captions: centred at 70% width */
  [data-m~="tab-caption"] { left: 15% !important; right: 15% !important; text-align: center !important; text-wrap: balance; }

  /* Tab graphic cards: taller so heading, graphic and caption each have room */
  [data-m~="tab-card"] { aspect-ratio: 1 / 1.32 !important; }

  /* Testimonials → CTA: tighter hand-off */
  [data-m~="pb-sm"] { padding-bottom: 40px !important; }

  /* CTA banner: more room below, retainers sit in their own space at the bottom */
  [data-m~="cta-sec"] { padding-top: 0 !important; padding-bottom: 110px !important; }
  [data-m~="cta-box"] { display: block !important; min-height: 0 !important; padding: 48px 20px 300px !important; }
  [data-m~="cta-float"] { top: auto !important; left: 0 !important; width: 100% !important; height: 280px !important; }
  [data-m~="cta-img"] { top: auto !important; bottom: -10% !important; right: 0 !important; height: 136% !important; transform: none !important; }

  /* Footer: link columns stack, subscribe full width, credit left-aligned */
  [data-m~="foot-cols"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-m~="foot-sub"] { width: 100% !important; flex: 1 1 100%; }
  [data-m~="foot-powered"] { margin-left: 0 !important; flex-basis: 100%; }

  /* Internal hero: same height, content sits low (more space above than below) */
  [data-m~="ihero"] { display: flex !important; flex-direction: column; }
  [data-m~="ihero-copy"] { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 140px !important; padding-bottom: 136px !important; }
  [data-m~="ihero-img"] { object-position: 50% 50% !important; }

  /* Sidebar + content layouts (legal pages) stack; sticky sidebars release */
  [data-m~="stack"] { grid-template-columns: minmax(0,1fr) !important; gap: 40px !important; }
  [data-m~="unstick"] { position: static !important; }
  [data-m~="mt-sm"] { margin-top: 64px !important; }

  /* First section under an internal hero: the cover's 48px radius band already gives top space */
  [data-m~="pt-first"] { padding-top: 25px !important; }
  /* ...but a store page with no hero above it (My Account, Cart, Checkout, Order received) has only
     the fixed header there, so it keeps clear of it (Pastel/user 2026-10-20: the header covered
     My Account's title on phones) */
  [data-m~="pt-nohero"] { padding-top: 128px !important; }

  /* Our Promise */
  [data-m~="promise-mark"] { width: 100vw !important; right: -40vw !important; top: 84% !important; bottom: auto !important; opacity: .35; }
  [data-m~="promise-close-mark"] { width: 100vw !important; right: -45vw !important; top: 88% !important; }
  [data-m~="miss-row"] { grid-template-columns: minmax(0,1fr) !important; gap: 12px !important; padding: 28px 0 !important; }
  [data-m~="miss-note"] { margin-left: 0 !important; }
  [data-m~="panel"] { padding: 32px 24px !important; gap: 32px !important; }
}