/* ============================================================
   Wear Wizards — Responsive system
   Breakpoints (Figma): 360 / 720 / 1280 / 1920
   Ranges:
     360 layout → max-width 719px
     720 layout → 720–1279px
     1280 layout → 1280–1919px
     1920 layout → min-width 1920px
   ============================================================ */

:root {
  --bp-360: 360px;
  --bp-720: 720px;
  --bp-1280: 1280px;
  --bp-1920: 1920px;

  /* 360px frame (applies through 719) */
  --page-gutter: 16px;
  --content-width: 328px;
  --header-pad-x: 16px;
  --logo-width: 134px;
  --logo-height: 54px;
  --header-height-compact: 54px;
  --logo-shadow: drop-shadow(1px 2px 6px rgba(0, 0, 0, 0.32));
}

@media (min-width: 720px) {
  :root {
    --page-gutter: 32px;
    --content-width: 656px;
    --header-pad-x: 32px;
    --logo-width: 186px;
    --logo-height: 75px;
    --header-height-compact: 75px;
    --logo-shadow: drop-shadow(2px 3px 9.5px rgba(0, 0, 0, 0.4));
  }
}

@media (min-width: 1280px) {
  :root {
    --page-gutter: 40px;
    /* 4 × 260px cards + 3 × 20px gaps */
    --content-width: 1100px;
    --header-pad-x: 40px;
    --logo-width: 258px;
    --logo-height: 104px;
    --logo-shadow: drop-shadow(2px 3px 9.5px rgba(0, 0, 0, 0.4));
  }
}

@media (min-width: 1920px) {
  :root {
    --page-gutter: 80px;
    --content-width: 1100px;
    --header-pad-x: 80px;
  }
}

/* ---------- Content wrapper ---------- */
  .wrapper {
  width: 100%;
  max-width: calc(var(--content-width) + (var(--page-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  box-sizing: border-box;
}

/* ---------- Compact header (360 & 720) ---------- */
.header-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.header-menu-btn img,
.header-menu-btn svg {
  display: block;
  width: 31px;
  height: 26px;
}

.header-menu-btn[aria-expanded="true"] img,
.header-menu-btn[aria-expanded="true"] svg {
  width: 28px;
  height: 28px;
}

.header-menu-btn__close {
  display: none;
}

.header-menu-btn[aria-expanded="true"] .header-menu-btn__open {
  display: none;
}

.header-menu-btn[aria-expanded="true"] .header-menu-btn__close {
  display: block;
}

.site-header--light .header-menu-btn {
  color: #1f2933;
}

.site-header:not(.site-header--light) .header-menu-btn {
  color: #fff;
}

.mobile-nav {
  display: none;
}

/* Compact header range: < 1280 */
@media (max-width: 1279px) {
  .site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50 !important;
    height: var(--header-height-compact);
    padding-inline: var(--header-pad-x);
  }

  /* Light headers sit in document flow on desktop. Once they are fixed,
     restore that height so page content is not hidden underneath.
     Overlay pages (hero under the header) already account for this. */
  body:has(> .site-header.site-header--light) {
    padding-top: var(--header-height-compact);
  }

  body.hiw-page,
  body.faq-page,
  body.hfy-page,
  body.hfy-form-page {
    padding-top: 0;
  }

  .site-header-content {
    min-height: var(--header-height-compact);
    height: var(--header-height-compact);
  }

  .site-header .logo,
  .site-header .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .site-nav {
    display: none !important;
  }

  .header-utils [data-help-link],
  .header-utils .header-auth,
  .header-utils .user-menu {
    display: none !important;
  }

  .header-menu-btn {
    display: inline-flex;
  }

  .header-utils {
    gap: 24px;
    margin-left: auto;
  }

  .site-header--light .header-utils {
    gap: 24px;
  }

  /* Cart + menu sit on the right; logo left */
  .site-header-content {
    justify-content: space-between;
  }

  body.is-mobile-nav-open {
    overflow: hidden;
  }

  .mobile-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 55;
    padding: calc(var(--header-height-compact) + 24px) var(--header-pad-x) 48px;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.98) 48%,
      #fff 94%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.25s ease,
      visibility 0.25s ease;
  }

  .mobile-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-header.is-menu-open {
    position: fixed !important;
    z-index: 60 !important;
  }

  .site-header.is-menu-open .site-header__overlay {
    opacity: 0;
  }

  .site-header.is-menu-open > .relative,
  .site-header.is-menu-open .site-header-content {
    position: relative;
    z-index: 70;
  }

  .site-header.is-menu-open .header-menu-btn {
    color: #1f2933;
  }

  .site-header.is-menu-open .header-utils .icon-btn img {
    filter: brightness(0);
  }

  .mobile-nav__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding-top: 24px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .ww-scroll-wrap:has(> .mobile-nav__inner) {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .ww-scroll-wrap > .mobile-nav__inner.ww-scroll {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  .mobile-nav__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 0 0 auto;
  }

  .mobile-nav__links a {
    color: #6b7280;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-decoration: none;
  }

  .mobile-nav__links a:hover,
  .mobile-nav__links a.is-active,
  .mobile-nav__links a.active {
    color: #1f2933;
  }

  .mobile-nav__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    padding-top: 48px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    gap: 28px;
    flex: 0 0 auto;
  }

  .mobile-nav__help {
    display: inline-flex;
    color: #1f2933;
  }

  .mobile-nav__help img,
  .mobile-nav__help svg {
    width: 24px;
    height: 24px;
  }

  .mobile-nav__login {
    color: #1f2933;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
  }

  .mobile-nav__signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: #1f2933;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }

  .mobile-nav--logged-in .mobile-nav__actions {
    margin-top: 0;
    padding-top: 136px;
    gap: 40px;
  }

  .mobile-nav__profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1f2933;
    cursor: pointer;
    transform: translateX(8px);
  }

  .mobile-nav__profile-btn svg {
    display: block;
    width: 40px;
    height: 24px;
  }

  .mobile-nav__profile-chev {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.2s ease;
  }

  .mobile-nav__profile-btn[aria-expanded="true"] .mobile-nav__profile-chev {
    transform: rotate(180deg);
  }

  .mobile-nav__profile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .mobile-nav__profile-menu[hidden] {
    display: none !important;
  }

  .mobile-nav__profile-menu a {
    color: #6b7280;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
  }

  .mobile-nav__profile-menu a:hover,
  .mobile-nav__profile-menu a:focus-visible {
    color: #1f2933;
  }

  .mobile-nav__signup:hover {
    background: rgba(31, 41, 51, 0.7);
    color: #fff;
  }

  .mobile-nav__signup:active {
    background: rgba(31, 41, 51, 0.9);
    color: #fff;
  }

  .mobile-nav__signup:focus,
  .mobile-nav__signup:focus-visible {
    outline: none;
    background: #1f2933;
    border-color: #8f9499;
  }
}

/* Desktop header (≥1280): full nav */
@media (min-width: 1280px) {
  .site-header {
    padding-inline: var(--header-pad-x);
  }

  .site-header--light .header-utils {
    gap: 40px;
  }

  .header-menu-btn,
  .mobile-nav {
    display: none !important;
  }
}

@media (min-width: 1920px) {
  .site-header {
    padding-inline: 80px;
  }
}

/* ============================================================
   Segment landing pages (0090 / 0100 / 0105)
   Hero / sections — Figma 1920·1280·720·360
   ============================================================ */

/* ---- 720–1279 ---- */
@media (min-width: 720px) and (max-width: 1279px) {
  body:has(.ms-hero) .site-header,
  body:has(.ms-hero) .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
  }

  body:has(.ms-hero) .site-header .logo,
  body:has(.ms-hero) .site-header .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .ms-hero-wrap {
    margin-top: 0;
  }

  .ms-hero__bg {
    background-position: 55% center;
  }

  .ms-hero__overlay {
    width: 592px;
    height: 100%;
    top: 0;
  }

  .ms-hero__content {
    width: 504px;
    max-width: calc(100% - 64px);
    margin-left: 32px;
    padding: 273px 0 0;
  }

  .ms-section {
    padding: 48px 0;
  }

  .ms-section__title {
    font-size: 24px;
    margin-bottom: 22px;
  }

  .core-products {
    grid-template-columns: repeat(2, var(--product-card-width));
    gap: 24px var(--product-card-gap);
    max-width: none;
    justify-content: center;
  }

  .roles-grid {
    grid-template-columns: 1fr;
    max-width: 348px;
    width: 348px;
    margin-left: calc(164px - var(--page-gutter));
    margin-right: auto;
    gap: 40px;
  }

  .design-studio__bg,
  .design-studio__bg > .wrapper {
    min-height: 314px;
  }

  .design-studio {
    flex-direction: row;
    gap: 55px;
    text-align: left;
    align-items: center;
    padding-left: 0;
    min-height: 314px;
  }

  .design-studio__content p {
    max-width: 294px;
  }

  .pre-footer-wrapper .pre-footer {
    min-height: 412px;
    padding-block: 0;
    display: flex;
    align-items: flex-end;
    padding-bottom: 40px;
  }

  .pre-footer .wrapper > .flex {
    flex-direction: column;
    gap: 32px;
  }

  .complex-banner__visual {
    justify-content: center;
  }
}

/* ---- ≤719 (360) ---- */
@media (max-width: 719px) {
  .visible-360 {
    display: block;
  }
  .ms-hero-wrap {
    margin-top: 0;
  }

  .ms-hero__bg {
    background-position: 70% center;
  }

  /* Dual overlay stack — Figma 4109:39657 + 39658 */
  .ms-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 396px;
    max-width: 110%;
    height: 631px;
    pointer-events: none;
    filter: blur(100px);
    background: radial-gradient(
      circle at -27% 167%,
      rgba(31, 41, 51, 1) 0%,
      rgba(0, 179, 45, 0.32) 25%,
      rgba(31, 41, 51, 0.4) 100%
    );
  }

  .ms-hero__overlay {
    top: 151px;
    width: 396px;
    max-width: 110%;
    height: 400px;
  }

  .ms-hero__content {
    width: 328px;
    max-width: calc(100% - 32px);
    margin-left: 16px;
    padding: 208px 0 0;
  }

  .ms-hero__content p {
    /* Figma 360 subtitle wraps to 52px / 2 lines */
    max-width: 300px;
  }

  .core-products {
    grid-template-columns: var(--product-card-width);
    max-width: var(--product-card-width);
    margin-inline: auto;
  }

  .roles-grid {
    grid-template-columns: 1fr;
    max-width: 348px;
    width: 348px;
    margin-left: calc(6px - var(--page-gutter));
    margin-right: auto;
    gap: 40px;
  }

  .design-studio {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 24px;
    padding-left: 10px; /* visual @26 with 16px gutter */
    min-height: 0;
  }

  .design-studio__content {
    padding-left: 5px; /* text @31 */
  }

  .design-studio__content p {
    max-width: 294px;
  }

  .design-studio__visual > img,
  .design-studio__hotspots > img.design-studio__product,
  .design-studio__hotspots > img {
    max-height: 285px;
  }

  .design-studio__bg,
  .design-studio__bg > .wrapper {
    min-height: 588px;
  }

  .pre-footer-wrapper .pre-footer {
    min-height: 318px;
    padding-block: 0;
    display: flex;
    align-items: flex-end;
    padding-bottom: 24px;
    flex-direction: column;
  }

  .pre-footer .wrapper > .flex {
    flex-direction: column;
    gap: 24px;
  }

  .complex-banner__text {
    max-width: 328px;
  }
}

/* ---- 1280–1919 ---- */
@media (min-width: 1280px) and (max-width: 1919px) {
  body:has(.ms-hero) .site-header,
  body:has(.ms-hero) .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
  }

  body:has(.ms-hero) .site-header .logo,
  body:has(.ms-hero) .site-header .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .ms-hero-wrap {
    /* margin-top: -104px; */
  }

  .ms-hero__bg {
    background-position: 50% center;
  }

  .ms-hero__overlay {
    width: 592px;
    height: 100%;
    top: 0;
  }

  .ms-hero__content {
    width: 504px;
    margin-left: 47px;
    padding: 273px 0 0;
  }

  .core-products {
    max-width: var(--content-width);
  }

  .design-studio {
    padding-left: 182px;
    gap: 55px;
  }

  .roles-grid {
    grid-template-columns: repeat(3, 348px);
    gap: 24px;
    justify-content: center;
    max-width: none;
  }

  .pre-footer-wrapper .pre-footer {
    min-height: 247px;
    padding-block: 61px 40px;
  }
}

/* ---- ≥1920 ---- */
@media (min-width: 1920px) {
  body:has(.ms-hero) .site-header,
  body:has(.ms-hero) .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
  }

  body:has(.ms-hero) .site-header .logo,
  body:has(.ms-hero) .site-header .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .ms-hero-wrap {
    /* margin-top: -104px; */
  }

  .ms-hero__bg {
    background-position: 45% center;
  }

  .ms-hero__overlay {
    width: 912px;
    height: 100%;
    top: 0;
    background: linear-gradient(
      89deg,
      rgba(31, 41, 51, 1) 0%,
      rgba(31, 41, 51, 0.4) 100%
    );
  }

  .ms-hero__content {
    width: 504px;
    margin-left: 367px;
    padding: 273px 0 0;
  }

  .core-products {
    max-width: var(--container-wide);
  }

  .design-studio {
    padding-left: 182px;
    gap: 55px;
    max-width: none;
  }

  .roles-grid {
    grid-template-columns: repeat(3, 348px);
    gap: 24px;
    justify-content: center;
    max-width: none;
  }

  .pre-footer-wrapper .pre-footer {
    min-height: 247px;
    padding-block: 61px 40px;
  }
}

/* ============================================================
   Shared inner pages (About, HIW, FAQ, Help, HFY, Catalog)
   ============================================================ */

@media (max-width: 1279px) {
  .visible-720 {
    display: block;
  }
  .about-page .site-header--light,
  .about-page .site-header--dark,
  .hiw-page .site-header--light,
  .faq-page .site-header--light,
  .hfy-page .site-header--light,
  .hfy-form-page .site-header--light,
  .catalog-page .site-header--light,
  .cart-page .site-header--light,
  .checkout-page .site-header--light,
  .md-page .site-header--light,
  .account-page .site-header--light {
    padding-inline: var(--header-pad-x);
  }

  .about-page .site-header--light .logo,
  .about-page .site-header--light .logo img,
  .about-page .site-header--dark .logo,
  .about-page .site-header--dark .logo img,
  .hiw-page .site-header--light .logo,
  .hiw-page .site-header--light .logo img,
  .faq-page .site-header--light .logo,
  .faq-page .site-header--light .logo img,
  .hfy-page .site-header--light .logo,
  .hfy-page .site-header--light .logo img,
  .hfy-form-page .site-header--light .logo,
  .hfy-form-page .site-header--light .logo img,
  .catalog-page .site-header--light .logo,
  .catalog-page .site-header--light .logo img,
  .cart-page .site-header--light .logo,
  .cart-page .site-header--light .logo img,
  .checkout-page .site-header--light .logo,
  .checkout-page .site-header--light .logo img,
  .md-page .site-header--light .logo,
  .md-page .site-header--light .logo img,
  .account-page .site-header--light .logo,
  .account-page .site-header--light .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .catalog-page .site-header-content {
    min-height: var(--header-height-compact);
  }

  .catalog-hero {
    /* Header 75 + band 229 = 229 → 154px content */
    min-height: 154px;
    padding: 48px 32px 40px;
  }

  .catalog-section {
    padding-inline: var(--page-gutter);
    max-width: none;
  }

  .catalog-grid {
    max-width: 560px;
  }

  .about-section,
  .hiw-studio,
  .hiw-workflow,
  .hiw-delivery,
  .hiw-handled,
  .hiw-routes,
  .catalog-section,
  .why-section,
  .promise-section,
  .cert-banner,
  .faq-section,
  .hfy-section {
    padding-inline: var(--page-gutter);
  }

  .about-inner,
  .hiw-inner,
  .faq-inner {
    max-width: var(--content-width);
    width: 100%;
  }

  .team-grid,
  .when-grid,
  .why-grid,
  .delivery-grid,
  .promise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
  }

  /* About Us @720 (Figma 4109:36774): fixed card sizes + centered incomplete rows */
  .about-page .team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    grid-template-columns: none;
  }

  .about-page .why-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 632px; /* 3 × 200 + 2 × 16 */
    margin-inline: auto;
    grid-template-columns: none;
  }

  .about-page .promise-grid {
    grid-template-columns: 1fr;
    justify-items: stretch;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 390px;
    margin-inline: auto;
  }

  .about-page .promise-item {
    width: 100%;
    max-width: none;
  }

  .about-page .promise-section {
    padding-block: 40px;
    min-height: 0;
  }

  .about-page .promise-section .about-intro {
    margin-bottom: 16px;
    width: 100%;
    max-width: 390px;
    margin-inline: auto;
    text-align: left;
  }

  .about-page .partner-visual {
    max-width: var(--content-width);
    aspect-ratio: 656 / 331;
  }

  .about-page .about-sustain {
    padding-block: 51px 56px;
  }

  .about-page .about-sustain .about-intro {
    max-width: 358px;
  }

  .about-page .sustain-cards {
    max-width: 505px;
  }

  .about-page .about-people {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .about-page .site-header--light,
  .about-page .site-header-content {
    height: var(--header-height-compact);
    min-height: var(--header-height-compact);
  }

  .about-page .cert-logos {
    gap: 50px;
    flex-wrap: nowrap;
  }

  .about-page .cert-banner .about-inner {
    max-width: 100%;
  }

  .about-page .sustain-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
    justify-content: center;
  }

  .about-page .about-sustain .about-intro {
    margin-inline: auto;
  }

  .about-page .sustain-cards {
    margin-inline: auto;
  }

  .catalog-grid,
  .catalog-grid--3,
  .catalog-grid--2 {
    max-width: 560px;
    justify-content: center;
  }

  .sustain-layout,
  .steps-layout,
  .handled-cards,
  .route-grid,
  .help-body,
  .hiw-workflow__layout {
    grid-template-columns: 1fr;
  }

  .hiw-workflow__layout::before {
    display: none;
  }

  /* Hide delivery arrows only on true mobile; 720 snake keeps them */
  .delivery-card__arrow {
    display: none;
  }

  .hiw-page .delivery-card__arrow {
    display: block;
  }

  .hiw-page .delivery-card:last-child .delivery-card__arrow {
    display: none;
  }

  .hiw-hero__content {
    padding-top: 120px;
    padding-bottom: 48px;
    padding-inline: 0;
    width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
  }

  /* Figma keeps 32/48 title through 720/360 */
  .hiw-hero__content h1 {
    font-size: 32px;
    line-height: 48px;
    width: auto;
    max-width: 100%;
  }

  .hiw-hero__line {
    display: inline;
    white-space: normal;
  }

  /* HIW @720 (Figma 4109:36493): fixed card sizes, snake delivery, stacked routes */
  .hiw-page .when-grid {
    display: grid;
    grid-template-columns: repeat(2, 250px);
    gap: 32px;
    justify-content: center;
    max-width: none;
  }

  .hiw-page .when-card {
    width: 250px;
    height: 140px;
  }

  .hiw-page .delivery-grid {
    display: grid;
    grid-template-columns: 300px 300px;
    grid-template-areas:
      "design submit"
      "deliver review";
    gap: 24px;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .hiw-page .delivery-card {
    width: 300px;
    height: 279px;
  }

  .hiw-page .delivery-card:nth-child(1) {
    grid-area: design;
  }

  .hiw-page .delivery-card:nth-child(2) {
    grid-area: submit;
  }

  .hiw-page .delivery-card:nth-child(3) {
    grid-area: review;
  }

  .hiw-page .delivery-card:nth-child(4) {
    grid-area: deliver;
  }

  /* Snake arrows: Design→Submit→Review→Deliver */
  .hiw-page .delivery-card:nth-child(1) .delivery-card__arrow {
    top: 0;
    right: -24px;
    left: auto;
    bottom: auto;
    transform: none;
  }

  .hiw-page .delivery-card:nth-child(2) .delivery-card__arrow {
    top: auto;
    bottom: -29px;
    right: -5px;
    left: auto;
    transform: rotate(90deg);
    transform-origin: center;
  }

  .hiw-page .delivery-card:nth-child(3) .delivery-card__arrow {
    top: 0;
    left: -24px;
    right: auto;
    bottom: auto;
    transform: scaleX(-1);
  }

  .hiw-page .handled-cards {
    grid-template-columns: 440px;
    justify-content: center;
    gap: 48px;
  }

  .hiw-page .handled-card {
    width: 440px;
    max-width: 100%;
  }

  .hiw-page .route-grid {
    grid-template-columns: 451px;
    justify-content: center;
    gap: 24px;
  }

  .hiw-page .route-card {
    width: 451px;
    max-width: 100%;
  }

  .hiw-page .hiw-workflow__layout {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    margin-left: auto;
    grid-template-columns: 1fr;
  }

  .hiw-page .steps-list {
    position: relative;
    padding-left: 14px;
  }

  .hiw-page .steps-list::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 5px;
    bottom: 0;
    width: 0;
    border-left: 1px dashed rgba(31, 41, 51, 0.16);
  }

  .hiw-page .hiw-info {
    max-width: var(--content-width);
  }

  .hiw-page .hiw-handled .hiw-info {
    max-width: var(--content-width);
  }

  .hiw-page .site-header--light,
  .hiw-page .site-header-content {
    height: var(--header-height-compact);
    min-height: var(--header-height-compact);
  }

  .hiw-page .hiw-hero__cta .btn,
  .hiw-page .hiw-workflow__cta .btn {
    min-width: 323px;
    width: auto;
  }

  .hiw-page .hiw-handled__cta .btn {
    width: 403px;
    max-width: 100%;
  }

  /* Help & Contact @720 (Figma 4109:31617) — names stay 2-col */
  .help-page .site-header--light {
    height: var(--logo-height);
    min-height: var(--logo-height);
    padding-inline: 32px;
  }

  .help-page .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
  }

  .help-page .site-header--light .logo,
  .help-page .site-header--light .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .help-hero {
    padding: 44px 32px 24px;
  }

  .help-hero p {
    max-width: 656px;
  }

  .help-body {
    align-items: start;
    align-content: start;
  }

  .help-col {
    width: 100%;
    align-self: stretch;
  }

  .help-col--contact {
    padding: 41px 67px 58px;
    border-bottom: 8px solid #f3f4f6;
    justify-content: center;
  }

  .help-col--form {
    padding: 41px 67px 80px;
    justify-content: center;
  }

  .help-col--contact .help-col__inner {
    max-width: 520px;
    margin-inline: auto;
  }

  .help-col--form .help-col__inner {
    max-width: 600px;
    margin-inline: auto;
  }

  /* Success stacked: hug content (720 + 360) */
  .help-page--success {
    min-height: auto;
  }

  .help-page--success .help-body {
    flex: 0 0 auto;
  }

  .help-form__row {
    grid-template-columns: 280px 280px;
    gap: 40px;
  }

  .hfy-form-body {
    padding-inline: var(--page-gutter);
  }

  .hfy-form-back {
    left: var(--page-gutter);
  }
}

/* Success @720 only (Figma 4109:35451) */
@media (min-width: 720px) and (max-width: 1279px) {
  .help-page--success .help-col--contact {
    padding: 41px 100px 58px;
  }

  .help-page--success .help-col--form {
    /* Figma: btn ends y951, footer y1064 → 113px */
    padding: 41px 100px 113px;
  }

  .help-page--success .help-col--contact .help-col__inner,
  .help-page--success .help-col--form .help-col__inner {
    max-width: 520px;
    margin-inline: auto;
  }

  .help-page--success .help-col--form h2 {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .help-page--success .help-success {
    /* Figma: icon y715, title ends y675 → 40px */
    padding: 40px 0 0;
  }
}

@media (max-width: 719px) {
  .team-grid,
  .when-grid,
  .why-grid,
  .delivery-grid,
  .promise-grid,
  .help-form__row {
    grid-template-columns: 1fr;
  }

  /* Help & Contact @360 (Figma 4109:37038) */
  .help-page .site-header--light {
    height: var(--logo-height);
    min-height: var(--logo-height);
    padding-inline: 16px;
  }

  .help-page .site-header-content {
    min-height: 54px;
  }

  .help-page .site-header--light .logo,
  .help-page .site-header--light .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .help-hero {
    padding: 44px 16px 24px;
  }

  .help-hero p {
    max-width: 328px;
  }

  .help-col--contact {
    padding: 41px 16px 33px;
    justify-content: center;
  }

  .help-col--form {
    padding: 41px 16px 80px;
    justify-content: center;
  }

  .help-col--contact .help-col__inner {
    max-width: 328px;
    margin-inline: auto;
  }

  .help-col--form .help-col__inner {
    max-width: 300px;
    margin-inline: auto;
  }

  /* Success @360 (Figma 4109:38511) */
  .help-page--success .help-body {
    flex: 0 0 auto;
  }

  .help-page--success .help-col--contact {
    padding: 41px 16px 33px;
  }

  .help-page--success .help-col--contact .help-col__inner {
    max-width: 328px;
    margin-inline: auto;
  }

  .help-page--success .help-col--form {
    /* Figma: btn ends y950, footer y1014 → 64px */
    padding: 41px 16px 64px;
    justify-content: center;
  }

  .help-page--success .help-col--form .help-col__inner {
    max-width: 328px;
    margin-inline: auto;
  }

  .help-page--success .help-col--form h2 {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .help-page--success .help-success__text {
    width: 328px;
  }

  .help-page--success .help-success {
    /* Figma: icon y714, title ends y674 → 40px */
    padding: 40px 0 0;
  }

  .help-form > .help-files {
    /* Figma 360: ~99px from file row to upload (vs desktop 24px) */
    margin-top: -16px;
    margin-bottom: 67px;
  }

  .help-form > .form-group:has(.help-captcha) {
    /* Figma 360: 48px after upload hint (vs form gap 32) */
    margin-top: 16px;
  }

  .help-form > .help-form__submit {
    /* Figma 360: ~47px after checkbox (vs desktop 24px) */
    margin-top: 15px;
  }

  .help-form__row {
    grid-template-columns: 280px;
    gap: 32px;
  }

  .help-form__row .form-input {
    width: 280px;
    max-width: 280px;
  }

  .help-form > .form-group .form-input,
  .help-form > .form-group .form-select,
  .help-form > .form-group .form-textarea,
  .help-form > .form-group .ww-select,
  .help-form > .form-group .ww-select__trigger {
    width: 300px;
    max-width: 100%;
  }

  .help-form > .form-group .form-textarea {
    height: 103px;
    min-height: 103px;
  }

  .contact-card--email {
    height: auto;
    min-height: 118px;
  }

  .contact-card--hq {
    height: 143px;
    min-height: 143px;
  }

  .contact-card__value {
    overflow-wrap: anywhere;
  }

  .help-captcha {
    flex-wrap: wrap;
    column-gap: 32px;
    row-gap: 24px;
  }

  .help-captcha .form-input {
    order: 3;
    width: 280px;
    flex: 0 0 280px;
    max-width: 280px;
  }

  .help-captcha__image {
    order: 1;
  }

  .help-captcha__actions {
    order: 2;
  }

  .help-check {
    width: 300px;
    max-width: 100%;
    gap: 4px;
  }

  .help-check > span:last-child {
    flex: 1;
    min-width: 0;
  }

  .help-form__submit {
    margin-inline: auto;
  }

  /* About Us @360 (Figma 4109:38573) */
  .about-page .site-header--light,
  .about-page .site-header--dark {
    height: var(--logo-height);
    min-height: var(--logo-height);
    padding-inline: 16px;
  }

  .about-page .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
  }

  .about-page .site-header--light .logo,
  .about-page .site-header--light .logo img,
  .about-page .site-header--dark .logo,
  .about-page .site-header--dark .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .about-page .team-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .about-page .why-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 200px;
  }

  .about-page .partner-visual {
    max-width: 328px;
    aspect-ratio: 328 / 165;
  }

  .about-page .about-sustain .about-intro,
  .about-page .sustain-cards {
    max-width: 328px;
    width: 100%;
  }

  .about-page .sustain-card {
    min-height: 131px;
  }

  .about-page .sustain-card:last-child {
    min-height: 151px;
  }

  .about-page .cert-banner h2 {
    margin-bottom: 40px;
    max-width: 328px;
    margin-inline: auto;
  }

  .about-page .promise-section {
    min-height: 0;
    padding-block: 40px;
  }

  .about-page .promise-section .about-intro {
    max-width: 328px;
    margin-inline: auto;
    text-align: left;
  }

  .about-page .promise-grid {
    gap: 20px;
    justify-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 328px;
    margin-inline: auto;
  }

  .about-page .promise-item {
    max-width: none;
    width: 100%;
  }

  .about-page .promise-item p {
    max-width: none;
  }

  .about-page .site-header--light .logo,
  .about-page .site-header--dark .logo {
    width: var(--logo-width);
  }

  /* HIW @360 (Figma 4109:38230) */
  .hiw-page .site-header--light {
    height: var(--logo-height);
    min-height: var(--logo-height);
    padding-inline: 16px;
  }

  .hiw-page .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
  }

  .hiw-page .site-header--light .logo,
  .hiw-page .site-header--light .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .hiw-page .site-header--light .logo {
    width: var(--logo-width);
  }

  .hiw-page .when-grid {
    grid-template-columns: 250px;
    gap: 32px;
    justify-content: center;
  }

  .hiw-page .delivery-grid {
    grid-template-columns: 300px;
    grid-template-areas: none;
    gap: 24px;
    width: max-content;
    margin-inline: auto;
  }

  .hiw-page .delivery-card {
    width: 300px;
    grid-area: auto;
  }

  .hiw-page .delivery-card:nth-child(1),
  .hiw-page .delivery-card:nth-child(2),
  .hiw-page .delivery-card:nth-child(3),
  .hiw-page .delivery-card:nth-child(4) {
    grid-area: auto;
  }

  .hiw-page .delivery-card__arrow {
    display: none !important;
  }

  .hiw-page .handled-cards {
    grid-template-columns: 328px;
    gap: 30px;
  }

  .hiw-page .handled-card {
    width: 328px;
    min-height: 156px;
    height: auto;
  }

  .hiw-page .route-grid {
    grid-template-columns: minmax(0, 328px);
  }

  .hiw-page .route-card {
    width: 100%;
    max-width: 328px;
  }

  .hiw-page .hiw-handled__cta .btn,
  .hiw-page .hiw-hero__cta .btn,
  .hiw-page .hiw-workflow__cta .btn {
    width: 100%;
    max-width: 323px;
    min-width: 0;
  }

  .hiw-page .hiw-delivery__note {
    max-width: 300px;
    margin-inline: auto;
  }

  .hiw-page .hiw-handled__intro {
    max-width: 328px;
  }

  .catalog-grid,
  .catalog-grid--3,
  .catalog-grid--2 {
    max-width: var(--product-card-width);
    justify-content: center;
  }

  .catalog-hero {
    /* Header 54 + band 220 → 166px content */
    min-height: 166px;
    padding: 48px 16px 36px;
  }

  .catalog-page .site-header--light {
    height: var(--logo-height);
    min-height: var(--logo-height);
    padding-inline: 16px;
  }

  .catalog-page .site-header--light .logo,
  .catalog-page .site-header--light .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .catalog-page .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
  }

  .hiw-handled__cta .btn,
  .hiw-hero__cta .btn,
  .hiw-workflow__cta .btn {
    width: 100%;
    max-width: 323px;
  }
}

/* ============================================================
   Figma-accurate page refinements (board 4109:31339)
   ============================================================ */

/* Desktop 1280: less outward padding than 1920 */
@media (min-width: 1280px) and (max-width: 1919px) {
  .about-page .site-header--light,
  .about-page .site-header--dark,
  .hiw-page .site-header--light,
  .hfy-page .site-header--light,
  .faq-page .site-header--light,
  .hfy-form-page .site-header--light,
  .help-page .site-header--light,
  .catalog-page .site-header--light,
  .pd-page .site-header--light,
  .sys-page .site-header--light,
  .cart-page .site-header--light,
  .checkout-page .site-header--light,
  .md-page .site-header--light,
  .account-page .site-header--light {
    padding-inline: 40px;
  }

  .catalog-section {
    padding-inline: 40px;
  }

  .about-section,
  .about-people,
  .promise-section,
  .cert-banner,
  .why-section {
    padding-inline: 40px;
  }

  /* HIW @1280 (Figma 4109:35029): when-cards stay 4-col; delivery becomes 2×2 snake */
  .hiw-page .delivery-grid {
    grid-template-columns: 300px 300px;
    grid-template-areas:
      "design submit"
      "deliver review";
    gap: 24px;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }

  .hiw-page .delivery-card {
    width: 300px;
    height: 279px;
  }

  .hiw-page .delivery-card:nth-child(1) {
    grid-area: design;
  }

  .hiw-page .delivery-card:nth-child(2) {
    grid-area: submit;
  }

  .hiw-page .delivery-card:nth-child(3) {
    grid-area: review;
  }

  .hiw-page .delivery-card:nth-child(4) {
    grid-area: deliver;
  }

  .hiw-page .delivery-card:nth-child(1) .delivery-card__arrow {
    top: 0;
    right: -24px;
    left: auto;
    bottom: auto;
    transform: none;
  }

  .hiw-page .delivery-card:nth-child(2) .delivery-card__arrow {
    top: auto;
    bottom: -29px;
    right: -5px;
    left: auto;
    transform: rotate(90deg);
    transform-origin: center;
  }

  .hiw-page .delivery-card:nth-child(3) .delivery-card__arrow {
    top: 0;
    left: -24px;
    right: auto;
    bottom: auto;
    transform: scaleX(-1);
  }

  .hiw-page .delivery-card:last-child .delivery-card__arrow {
    display: none;
  }
}

/* Compact: about sections */
@media (max-width: 1279px) {
  .about-section,
  .about-people,
  .promise-section,
  .cert-banner,
  .why-section {
    padding-inline: var(--page-gutter);
  }

  .promise-section {
    padding-block: 48px;
    min-height: 569px;
  }

  .promise-grid {
    grid-template-columns: 1fr;
    max-width: var(--content-width);
    gap: 20px;
  }

  .about-page .promise-grid {
    gap: 20px;
    max-width: 390px;
    margin-inline: auto;
    justify-items: stretch;
    justify-content: center;
  }

  .about-page .promise-section .about-intro {
    max-width: 390px;
    margin-inline: auto;
  }

  .cert-banner {
    min-height: 349px;
    padding-block: 48px;
  }

  .cert-logos {
    flex-wrap: wrap;
    gap: 24px 32px;
  }

  .faq-body {
    width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
    margin-inline: auto;
  }

  .faq-hero {
    padding-inline: var(--page-gutter);
  }

  .faq-page .site-header--light,
  .hiw-page .site-header--light,
  .hfy-page .site-header--light,
  .hfy-form-page .site-header--light,
  .pd-page .site-header--light,
  .cart-page .site-header--light,
  .checkout-page .site-header--light,
  .md-page .site-header--light,
  .account-page .site-header--light {
    height: var(--header-height-compact);
    min-height: var(--header-height-compact);
  }

  .faq-page .site-header-content,
  .hiw-page .site-header-content,
  .hfy-page .site-header-content,
  .hfy-form-page .site-header-content,
  .pd-page .site-header-content,
  .cart-page .site-header-content,
  .checkout-page .site-header-content,
  .md-page .site-header-content,
  .account-page .site-header-content {
    height: var(--header-height-compact);
    min-height: var(--header-height-compact);
  }

  .hiw-inner {
    width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
  }

  .hfy-form-body,
  .hfy-form-hero {
    padding-inline: var(--page-gutter);
  }

  .hfy-form-page .site-header--light {
    padding-inline: var(--header-pad-x);
  }

  /* Design Studio: below 720 height → 588; keep 316 at 720–1920 */
  .design-studio__bg,
  .design-studio__bg > .wrapper {
    min-height: 314px;
  }

  /* Complex project / pre-footer: 720–360 → height 318 */
  .pre-footer {
    min-height: 318px;
    padding-block: 40px;
    background-size: cover;
    background-position: center;
  }
}

@media (max-width: 719px) {
  .promise-section {
    min-height: 609px;
    padding-block: 40px;
  }

  .about-page .promise-section {
    min-height: 609px;
    padding-block: 48px;
  }

  .cert-banner {
    min-height: 721px;
    padding-block: 56px 40px;
  }

  .cert-logos {
    flex-direction: column;
    align-items: center;
  }

  .design-studio__bg,
  .design-studio__bg > .wrapper {
    min-height: 588px;
  }

  .faq-hero {
    padding-top: 110px;
  }

  .about-page .site-header--light,
  .about-page .site-header--dark {
    height: var(--logo-height);
    min-height: var(--logo-height);
    padding-inline: 16px;
  }

  .about-page .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
  }

  .about-page .site-header--light .logo,
  .about-page .site-header--light .logo img,
  .about-page .site-header--dark .logo,
  .about-page .site-header--dark .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .hiw-page .site-header--light {
    height: var(--logo-height);
    min-height: var(--logo-height);
    padding-inline: 16px;
  }

  .hiw-page .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
  }

  .hiw-page .site-header--light .logo,
  .hiw-page .site-header--light .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .hiw-page .site-header--light .logo {
    width: var(--logo-width);
  }
}

/* Help & Contact stacked columns ≤1279 — center content boxes */
@media (max-width: 1279px) {
  .help-body {
    grid-template-columns: 1fr !important;
  }

  .help-col--contact,
  .help-col--form,
  .help-page--success .help-col--contact,
  .help-page--success .help-col--form {
    display: flex;
    justify-content: center;
  }

  .help-col--contact .help-col__inner,
  .help-col--form .help-col__inner,
  .help-page--success .help-col--contact .help-col__inner,
  .help-page--success .help-col--form .help-col__inner {
    width: 100%;
    margin-inline: auto;
  }

  .help-page--success .help-col--form h2 {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Help & Contact @1280 (Figma 4109:31500) */
@media (min-width: 1280px) and (max-width: 1919px) {
  .help-col--form {
    padding: 41px 11px 80px 25px;
  }

  /* Success @1280 (Figma 4109:35391): cards @76, title @684, success column-centered */
  .help-page--success .help-col--contact {
    padding: 41px 40px 80px;
  }

  .help-page--success .help-col--form {
    padding: 41px 0 80px;
  }

  .help-page--success .help-col--form h2 {
    margin-left: 40px;
  }

  .help-page--success .help-success {
    /* Column center matches Figma @1280 — use symmetric pad */
    padding-left: 0;
    padding-right: 0;
  }
}

/* HFY marketing pages (Figma 4109:34351 / 34537 / 36318 / 38055) */
@media (max-width: 1279px) {
  /* @720: expect 2×2 @250; compare stacked @429; workflow stacked */
  .hfy-page .hfy-hero {
    padding-top: 125px;
  }

  .hfy-page .hfy-hero__bg {
    height: 505px;
  }

  .hfy-page .hfy-hero__media {
    width: min(656px, 100%);
    aspect-ratio: 656 / 220;
  }

  .hfy-page .hfy-hero__copy {
    max-width: 656px;
  }

  .hfy-page .hfy-hero__copy br {
    display: none;
  }

  .hfy-page .hfy-expect__grid {
    grid-template-columns: repeat(2, 250px);
    max-width: 532px;
  }

  .hfy-page .hfy-compare__grid {
    grid-template-columns: 429px;
    max-width: 429px;
  }

  .hfy-page .hfy-compare-card {
    width: 429px;
    height: 257px;
  }

  .hfy-page .hfy-workflow__layout {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
    width: 476px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hfy-page .hfy-workflow__layout::before {
    display: block;
    left: 14px;
    top: 173px;
    height: 335px;
  }

  .hfy-page .hfy-workflow__intro {
    width: 342px;
    max-width: 100%;
  }

  .hfy-page .hfy-workflow__steps {
    padding-top: 0;
    width: 100%;
  }

  .hfy-page .hfy-focus {
    width: 656px;
  }

  .hfy-page .hfy-bottom__lead {
    max-width: 529px;
  }

  .hfy-page .hfy-bottom__note {
    max-width: 551px;
  }
}

@media (max-width: 719px) {
  /* @360 (Figma 4109:38055) */
  .hfy-page .site-header--light {
    height: var(--logo-height);
    min-height: var(--logo-height);
    padding-inline: 16px;
  }

  .hfy-page .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
  }

  .hfy-page .site-header--light .logo,
  .hfy-page .site-header--light .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .hfy-page .site-header--light .logo {
    width: var(--logo-width);
  }

  .hfy-page .hfy-hero {
    padding-top: 104px;
  }

  .hfy-page .hfy-hero__bg {
    height: 449px;
  }

  .hfy-page .hfy-hero__title {
    max-width: 328px;
  }

  .hfy-page .hfy-hero__lead {
    margin-top: 8px;
  }

  .hfy-page .hfy-hero__lead,
  .hfy-page .hfy-hero__sub,
  .hfy-page .hfy-hero__content {
    max-width: 328px;
  }

  .hfy-page .hfy-hero__media {
    width: min(328px, 100%);
    aspect-ratio: 328 / 110;
    margin-top: 23px;
  }

  .hfy-page .hfy-hero__copy {
    max-width: 328px;
  }

  .hfy-page .hfy-hero__copy br {
    display: none;
  }

  .hfy-page .hfy-expect {
    padding-bottom: 32px;
  }

  .hfy-page .hfy-compare {
    padding-bottom: 48px;
  }

  .hfy-page .hfy-expect__grid {
    grid-template-columns: 250px;
    max-width: 250px;
  }

  .hfy-page .hfy-compare__grid {
    grid-template-columns: 328px;
    max-width: 328px;
  }

  .hfy-page .hfy-compare-card {
    width: 328px;
    height: auto;
    min-height: 257px;
    padding: 24px 16px 28px;
  }

  .hfy-page .hfy-compare-card--yes {
    min-height: 298px;
  }

  .hfy-page .hfy-compare-card li {
    grid-template-columns: 21px minmax(0, 1fr);
  }

  .hfy-page .hfy-workflow {
    padding-block: 40px;
  }

  .hfy-page .hfy-workflow__layout {
    width: 100%;
    max-width: 328px;
    row-gap: 40px;
  }

  .hfy-page .hfy-workflow__layout::before {
    left: 14px;
    top: 173px;
  }

  .hfy-page .hfy-workflow__intro {
    width: 100%;
    max-width: 342px;
  }

  .hfy-page .hfy-step ul {
    margin-left: 0;
    max-width: none;
  }

  .hfy-page .hfy-focus {
    width: 328px;
  }

  .hfy-page .hfy-bottom {
    padding-bottom: 40px;
  }

  .hfy-page .hfy-bottom__lead {
    max-width: 328px;
  }

  .hfy-page .hfy-bottom__lead br {
    display: none;
  }

  .hfy-page .hfy-bottom__ask {
    max-width: 328px;
  }

  .hfy-page .hfy-bottom__note {
    max-width: 328px;
  }
}

/* HFY form pages (Figma 4109:34061 / 34206 / 36184 / 37921) */
@media (min-width: 1280px) and (max-width: 1919px) {
  .hfy-form-page .hfy-form-back {
    left: 40px;
  }
}

@media (max-width: 1279px) {
  .hfy-form-page .hfy-form-hero {
    padding-top: 123px;
    min-height: 245px;
  }

  .hfy-form-page .hfy-form-back {
    top: 123px;
    left: 32px;
  }

  .hfy-form-page .hfy-form-hero__lead {
    max-width: 656px;
  }

  .hfy-form-page .hfy-form-body {
    max-width: 656px;
    padding-inline: 0;
    width: min(656px, calc(100% - 64px));
  }

  .hfy-form-page .hfy-form-note--tip {
    min-height: 118px;
  }

  .hfy-form-page .hfy-form-btn {
    width: 308px;
  }

  .hfy-form-page .hfy-form-actions {
    flex-direction: row;
    gap: 40px;
  }

  .hfy-form-page .hfy-form-success__btn {
    width: 308px;
    max-width: 100%;
  }
}

@media (max-width: 719px) {
  .hfy-form-page .site-header--light {
    height: var(--logo-height);
    min-height: var(--logo-height);
    padding-inline: 16px;
  }

  .hfy-form-page .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
  }

  .hfy-form-page .site-header--light .logo,
  .hfy-form-page .site-header--light .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .hfy-form-page .site-header--light .logo {
    width: var(--logo-width);
  }

  .hfy-form-page .hfy-form-hero {
    padding-top: 146px;
    padding-bottom: 10px;
    min-height: 272px;
  }

  .hfy-form-page .hfy-form-back {
    top: 102px;
    left: 16px;
  }

  .hfy-form-page .hfy-form-hero__lead {
    max-width: 328px;
  }

  .hfy-form-page .hfy-form-body {
    max-width: 328px;
    width: min(328px, calc(100% - 32px));
    padding-inline: 0;
  }

  .hfy-form-page .hfy-form-note--tip {
    min-height: 178px;
    margin-bottom: 16px;
    padding: 16px 12px 16px 15px;
  }

  .hfy-form-page .hfy-form-note--tip .hfy-form-note__text {
    max-width: 274px;
  }

  .hfy-form-page .hfy-form-note--prod {
    min-height: 120px;
    margin-top: 30px;
    margin-bottom: 40px;
  }

  .hfy-form-page .hfy-form-files {
    gap: 12px;
  }

  .hfy-form-page .hfy-form-file__name {
    line-height: 18px;
  }

  .hfy-form-page .hfy-form-actions {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .hfy-form-page .hfy-form-btn,
  .hfy-form-page .hfy-form-success__btn {
    width: 308px;
    max-width: 100%;
  }

  .hfy-form-page .hfy-form-success {
    padding-top: 120px;
  }
}

/* ============================================================
   Product Details (0440) — Figma 4109:23325 / 23507 / 23860 / 23686
   ============================================================ */

/* ---- 1280–1919 ---- */
@media (min-width: 1280px) and (max-width: 1919px) {
  .pd-main {
    max-width: 1280px;
    width: 100%;
    margin-inline: auto;
  }

  .pd-back {
    left: 83px;
  }

  .pd-info {
    left: 129px;
  }

  .pd-hero {
    left: 500px;
  }

  .pd-thumbs {
    left: 1184px;
  }

  .pd-colors {
    left: 558px;
  }

  .pd-nav--prev {
    left: 40px;
  }

  .pd-nav--next {
    left: 1220px;
  }
}

/* ---- 720–1279: stacked layout ---- */
@media (min-width: 720px) and (max-width: 1279px) {
  .pd-page .site-header--light {
    height: var(--logo-height);
    min-height: var(--logo-height);
    padding-inline: 32px;
  }

  .pd-page .site-header--light .logo,
  .pd-page .site-header--light .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
    max-width: 200px;
  }

  .pd-page .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
    max-width: none;
  }

  .pd-main {
    min-height: 0;
    max-width: none;
    overflow: visible;
    padding-bottom: 80px;
    background:
      linear-gradient(
        0deg,
        rgba(245, 245, 245, 0.56) 0%,
        rgba(245, 245, 245, 0.56) 100%
      ),
      url("../images/product-details/stage-bg.png") lightgray center top / cover
        no-repeat;
  }

  .pd-stage {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 45px;
  }

  .pd-back,
  .pd-info,
  .pd-purchase,
  .pd-hero,
  .pd-thumbs,
  .pd-colors {
    position: relative;
    left: auto;
    top: auto;
  }

  .pd-back {
    margin: 85px 0 0 83px;
  }

  .pd-info {
    margin: 40px 0 0 129px;
    width: auto;
    max-width: 571px;
  }

  .pd-info__title,
  .pd-info__lead,
  .pd-info__body,
  .pd-info__extra {
    width: auto;
    max-width: 100%;
  }

  .pd-info__title {
    max-width: 571px;
  }

  .pd-info__lead {
    max-width: 438px;
  }

  .pd-info__body {
    max-width: 448px;
  }

  .pd-hero {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .pd-hero img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .pd-nav {
    top: 339px;
  }

  .pd-nav--prev {
    left: 32px;
  }

  .pd-nav--next {
    left: auto;
    right: 32px;
  }

  .pd-thumbs {
    flex-direction: row;
    margin: 57px 0 0 58px;
  }

  .pd-colors {
    margin: 28px 0 0 58px;
    width: 605px;
    max-width: calc(100% - 116px);
  }

  .pd-info .pd-purchase {
    margin: 42px 0 0;
  }
}

/* ---- ≤719: 360 stacked layout ---- */
@media (max-width: 719px) {
  .pd-page .site-header--light {
    height: var(--logo-height);
    min-height: var(--logo-height);
    padding-inline: 16px;
  }

  .pd-page .site-header--light .logo,
  .pd-page .site-header--light .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
    max-width: var(--logo-width);
  }

  .pd-page .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
    max-width: none;
  }

  .pd-main {
    min-height: 0;
    max-width: none;
    overflow: visible;
    padding-bottom: 80px;
    background:
      linear-gradient(
        0deg,
        rgba(245, 245, 245, 0.56) 0%,
        rgba(245, 245, 245, 0.56) 100%
      ),
      url("../images/product-details/stage-bg.png") lightgray center top / cover
        no-repeat;
  }

  .pd-stage {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 31px;
  }

  .pd-back,
  .pd-info,
  .pd-purchase,
  .pd-hero,
  .pd-thumbs,
  .pd-colors {
    position: relative;
    left: auto;
    top: auto;
  }

  .pd-back {
    margin: 84px 0 0 16px;
    gap: 40px;
  }

  .pd-info {
    margin: 24px 16px 0;
    width: auto;
    max-width: 328px;
  }

  .pd-info__title {
    width: 328px;
    max-width: 100%;
    height: auto;
    min-height: 60px;
  }

  .pd-info__lead,
  .pd-info__body {
    width: 328px;
    max-width: 100%;
  }

  .pd-hero {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .pd-hero img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .pd-nav {
    top: 159px;
  }

  .pd-nav--prev {
    left: 16px;
  }

  .pd-nav--next {
    left: auto;
    right: 16px;
  }

  .pd-thumbs {
    flex-direction: row;
    margin: 40px 0 0 16px;
  }

  .pd-colors {
    margin: 32px 0 0 16px;
    width: auto;
    max-width: 328px;
    min-height: 103px;
  }

  .pd-colors__swatches {
    flex-wrap: wrap;
    align-content: flex-start;
    width: 300px;
    max-width: 100%;
    height: auto;
    column-gap: 13px;
    row-gap: 14px;
  }

  .pd-info .pd-purchase {
    margin: 51px 0 0;
  }
}

/* ============================================================
   System status pages (0710 / 0720 / 0730)
   ============================================================ */

@media (max-width: 1279px) {
  .sys-page .site-header--light {
    height: var(--logo-height);
    min-height: var(--logo-height);
    padding-inline: 32px;
  }

  .sys-page .site-header-content {
    height: var(--logo-height);
    min-height: var(--logo-height);
  }

  .sys-page .site-header--light .logo,
  .sys-page .site-header--light .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .sys-main {
    padding: 40px 24px;
  }
}

@media (max-width: 719px) {
  .sys-page .site-header--light {
    height: var(--logo-height);
    min-height: var(--logo-height);
    padding-inline: 16px;
  }

  .sys-page .site-header-content {
    min-height: 54px;
  }

  .sys-page .site-header--light .logo,
  .sys-page .site-header--light .logo img {
    width: var(--logo-width);
    height: var(--logo-height);
    max-width: var(--logo-width);
    max-height: var(--logo-height);
  }

  .sys-main {
    padding: 32px 16px;
  }

  .sys-status__btn {
    width: 100%;
    max-width: 240px;
  }
}