/* Decision-only variant. It is loaded exclusively by index-hero-sector-colors.html. */
.hero-sector {
  --sector-rgb: 29,217,105;
  --sector-text: #00132d;
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(88% 78% at 68% 34%, rgba(255,255,255,.68) 0%, rgba(255,255,255,.34) 29%, transparent 69%),
    radial-gradient(76% 92% at 10% 25%, rgba(var(--sector-rgb),.86) 0%, rgba(var(--sector-rgb),.56) 46%, transparent 82%),
    linear-gradient(180deg, rgba(var(--sector-rgb),.68) 0%, rgba(var(--sector-rgb),.36) 43%, rgba(var(--sector-rgb),.12) 72%, rgba(244,246,243,0) 100%);
  transition:background .7s ease;
}
.hero-sector--hospital { --sector-rgb: 28,142,244; }
.hero-sector--school { --sector-rgb: 240,180,41; }
.hero-sector::before { display:none !important; }
.hero-sector-wash { position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(48% 62% at 74% 47%, rgba(255,255,255,.12), transparent 77%); }
.hero-sector .hero-grid,.hero-sector .hero-partners { position:relative; z-index:1; }
.hero-sector .hero-sub,.hero-sector .hero-partners-label { color:var(--ink-soft); }
.hero-sector .hero-partners-label { opacity:.5; }
.hero-sector--senior .hero-cta .btn-primary { background:#fff; color:#00132d; box-shadow:0 10px 26px rgba(0,19,45,.16); }
.hero-sector--senior .hero-cta .btn-primary svg { color:#00132d !important; }
.hero-sector--school .hero-cta .btn-primary { background:#fff; color:#00132d; box-shadow:0 10px 26px rgba(0,19,45,.16); }
.hero-sector--school .hero-cta .btn-primary svg { color:#00132d !important; }
.hero-sector-header .hero-sector-burger,.hero-sector-mobile-menu,.hero-sector-mobile-trial { display:none; }
.hero-sector-mobile-logo { display:none; }
.hero-sector-mobile-grid { display:none; }

@media (max-width:1020px) {
  .hero-sector-header .hdr-actions { display:none; }
  .hero-sector-header .hero-sector-burger { min-width:128px; height:46px; margin-left:auto; display:grid; grid-auto-flow:column; grid-template-columns:auto 19px; place-content:center; gap:9px; padding:0 16px; border:1px solid rgba(255,255,255,.9); border-radius:999px; background:transparent; box-shadow:var(--shadow-sm); }
  .hero-sector-header .hero-sector-burger,
  .hero-sector-header .hero-sector-burger:hover,
  .hero-sector-header .hero-sector-burger:focus-visible { border-color:rgba(255,255,255,.9) !important; color:#fff !important; background:transparent !important; }
  .hero-sector-header .hero-sector-burger-label { color:#fff !important; }
  .hero-sector-burger-lines { display:grid; gap:4px; }
  .hero-sector-burger i { display:block; width:19px; height:2px; border-radius:2px; background:#fff !important; transition:transform .2s ease,opacity .2s ease; }
  .hero-sector-header.menu-open .hero-sector-burger i:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .hero-sector-header.menu-open .hero-sector-burger i:nth-child(2) { opacity:0; }
  .hero-sector-header.menu-open .hero-sector-burger i:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .hero-sector-mobile-menu { display:block; position:absolute; top:calc(100% + 8px); left:16px; right:16px; z-index:20; padding:18px; border:1px solid rgba(19,45,70,.1); border-radius:20px; background:rgba(255,255,255,.97); box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .2s ease,transform .2s ease,visibility .2s; }
  .hero-sector-header.menu-open .hero-sector-mobile-menu { opacity:1; visibility:visible; transform:translateY(0); }
  .hero-sector-mobile-menu nav { display:grid; }
  .hero-sector-mobile-menu nav a { padding:12px 6px; color:var(--ink-soft); font:600 16px var(--body); border-bottom:1px solid var(--line-soft); }
  .hero-sector-mobile-menu nav a.on { color:var(--ink); font-weight:800; }
  .hero-sector-mobile-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; }
  .hero-sector-mobile-actions .btn { padding:13px 17px; font-size:14px; }
  .hero-sector { background:
    radial-gradient(108% 58% at 52% 28%, rgba(255,255,255,.54) 0%, transparent 68%),
    linear-gradient(180deg, rgba(var(--sector-rgb),.70) 0%, rgba(var(--sector-rgb),.30) 48%, rgba(244,246,243,0) 91%); }
}

@media (max-width:600px) {
  .hero-sector { padding-bottom:12px; }
  .hero-sector .hero-partners { margin-top:28px; }
  .hero-sector .hero-partners-logos { gap:22px; }
  .hero-sector .hero-partners-label { width:100%; }
}

/*
 * The production canvas makes every section transparent.  These selectors are
 * intentionally scoped to the decision page and use the active slide itself
 * as a fallback, so the sector colour cannot be lost during a carousel swap.
 */
.hero-sector-demo .hero:has(.slide-senior),
.hero-sector.hero-sector--senior {
  background:
    radial-gradient(88% 104% at 75% 39%, rgba(255,255,255,.70) 0%, rgba(255,255,255,.28) 38%, transparent 76%),
    radial-gradient(112% 106% at 7% 8%, rgba(29,217,105,.98) 0%, rgba(29,217,105,.80) 43%, rgba(29,217,105,.34) 73%, transparent 100%),
    linear-gradient(180deg, #1dd969 0%, rgba(29,217,105,.58) 57%, rgba(244,246,243,0) 100%) !important;
}

.hero-sector-demo .hero:has(.slide-hospital),
.hero-sector.hero-sector--hospital {
  background:
    radial-gradient(88% 104% at 75% 39%, rgba(255,255,255,.70) 0%, rgba(255,255,255,.28) 38%, transparent 76%),
    radial-gradient(112% 106% at 7% 8%, rgba(28,142,244,.98) 0%, rgba(28,142,244,.80) 43%, rgba(28,142,244,.34) 73%, transparent 100%),
    linear-gradient(180deg, #1c8ef4 0%, rgba(28,142,244,.58) 57%, rgba(244,246,243,0) 100%) !important;
}

.hero-sector-demo .hero:has(.slide-school),
.hero-sector.hero-sector--school {
  background:
    radial-gradient(88% 104% at 75% 39%, rgba(255,255,255,.70) 0%, rgba(255,255,255,.28) 38%, transparent 76%),
    radial-gradient(112% 106% at 7% 8%, rgba(240,180,41,.98) 0%, rgba(240,180,41,.80) 43%, rgba(240,180,41,.34) 73%, transparent 100%),
    linear-gradient(180deg, #f0b429 0%, rgba(240,180,41,.58) 57%, rgba(244,246,243,0) 100%) !important;
}

/* White CTAs retain a clear contrast on the green and school variants. */
.hero-sector-demo .hero:has(.slide-senior) .hero-cta .btn-primary,
.hero-sector-demo .hero:has(.slide-school) .hero-cta .btn-primary {
  background:#fff;
  color:#00132d;
  box-shadow:0 10px 26px rgba(0,19,45,.16);
}

.hero-sector-demo .hero:has(.slide-senior) .hero-cta .btn-primary svg,
.hero-sector-demo .hero:has(.slide-school) .hero-cta .btn-primary svg { color:#00132d !important; }

@media (max-width:1020px) {
  .hero-sector-demo .hero:has(.slide-senior),
  .hero-sector.hero-sector--senior {
    background:radial-gradient(110% 65% at 55% 30%, rgba(255,255,255,.54), transparent 70%), linear-gradient(180deg, #1dd969 0%, rgba(29,217,105,.56) 56%, rgba(244,246,243,0) 96%) !important;
  }
  .hero-sector-demo .hero:has(.slide-hospital),
  .hero-sector.hero-sector--hospital {
    background:radial-gradient(110% 65% at 55% 30%, rgba(255,255,255,.54), transparent 70%), linear-gradient(180deg, #1c8ef4 0%, rgba(28,142,244,.56) 56%, rgba(244,246,243,0) 96%) !important;
  }
  .hero-sector-demo .hero:has(.slide-school),
  .hero-sector.hero-sector--school {
    background:radial-gradient(110% 65% at 55% 30%, rgba(255,255,255,.54), transparent 70%), linear-gradient(180deg, #f0b429 0%, rgba(240,180,41,.56) 56%, rgba(244,246,243,0) 96%) !important;
  }
}

/*
 * Final colour treatment for the decision prototype:
 * - a radial field, rather than a vertical band, so its lower edge dissolves
 *   naturally into the page canvas;
 * - multiply removes the white matte baked into the illustration PNGs.  The
 *   people and device remain unchanged, while the surrounding white adopts
 *   the active sector colour instead of creating a rectangular panel.
 */
.hero-sector-demo .hero:has(.slide-senior),
.hero-sector.hero-sector--senior { --sector-rgb: 29,217,105; }
.hero-sector-demo .hero:has(.slide-hospital),
.hero-sector.hero-sector--hospital { --sector-rgb: 28,142,244; }
.hero-sector-demo .hero:has(.slide-school),
.hero-sector.hero-sector--school { --sector-rgb: 240,180,41; }

.hero-sector-demo .hero,
.hero-sector {
  overflow:hidden;
  background:
    radial-gradient(78% 82% at 78% 39%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.13) 34%, transparent 74%),
    linear-gradient(180deg, rgba(var(--sector-rgb),.96) 0%, rgba(var(--sector-rgb),.82) 37%, rgba(var(--sector-rgb),.48) 65%, rgba(var(--sector-rgb),.15) 84%, #f4f6f3 100%) !important;
}

.hero-sector-demo .phero-illus,
.hero-sector .phero-illus {
  mix-blend-mode:multiply;
  opacity:.98;
  -webkit-mask-image:radial-gradient(ellipse 84% 82% at 62% 55%, #000 20%, rgba(0,0,0,.98) 46%, rgba(0,0,0,.68) 68%, transparent 96%);
  mask-image:radial-gradient(ellipse 84% 82% at 62% 55%, #000 20%, rgba(0,0,0,.98) 46%, rgba(0,0,0,.68) 68%, transparent 96%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

/* Transparent scene reconstruction: environment → people → device + UI. */
.hero-sector .phero-env,
.hero-sector .phero-person {
  position:absolute;
  left:50%;
  height:auto;
  max-width:none;
  transform:translateX(-50%);
  pointer-events:none;
}
.hero-sector .phero-env { z-index:1; }
.hero-sector .phero-person { z-index:2; }

/* Phone scenes: match the former visual footprint while using the new assets. */
.hero-sector .slide-hospital .phero-env { width:280%; left:43%; bottom:calc(28% - 70px); }
.hero-sector .slide-hospital .phero-person { width:210%; left:50%; bottom:calc(35% - 100px); }
.hero-sector .slide-school .phero-env { width:300%; left:42%; bottom:0; }
.hero-sector .slide-school .phero-person { width:160%; left:50%; bottom:7%; }

/* The tablet slide has a wider visual field; these offsets preserve the
   established device alignment while letting the circular photo fade freely. */
.hero-sector .slide-senior .phero-env { width:180%; left:42%; bottom:calc(-28% - 100px); }
.hero-sector .slide-senior .phero-person { width:117%; left:calc(54% - 30px); bottom:calc(8% - 30px); }

@media (max-width:1020px) {
  .hero-sector .slide-hospital .phero-env { width:285%; }
  .hero-sector .slide-hospital .phero-person { width:215%; }
  .hero-sector .slide-school .phero-env { width:305%; }
  .hero-sector .slide-school .phero-person { width:165%; }
  .hero-sector .slide-senior .phero-env { width:185%; }
  .hero-sector .slide-senior .phero-person { width:120%; }
}

/* The trust row belongs to the hero rhythm, not the very bottom edge. */
/* Keep the trust line outside the interaction zone of the carousel controls. */
@media (min-width:601px) {
  .hero-sector .hero-partners {
    transform:none;
    margin-top:28px;
  }
}

/* Senior slide: preserve the validated internal device alignment while giving
   the complete desktop hero a little more vertical breathing room. */
@media (min-width:601px) {
  .hero-sector-demo .hero-grid:has(.slide-senior) { transform:translateY(10px); }
  .hero-sector-demo .hero-grid:has(.slide-senior) .hero-copy { transform:translateY(-10px); }
  .sol-solution-hero.hero-sector--senior .hero-grid { transform:translateY(10px); }
  .hero-sector .slide-senior .phero-frame,
  .hero-sector .slide-senior .phero-ui { transform:translateX(-10px); }
}

/* Desktop school scene: keep the device alignment, only shift its two image layers. */
@media (min-width:601px) {
  .hero-sector .slide-school .phero-env { bottom:-30px; }
  .hero-sector .slide-school .phero-person { bottom:27px; }
}

/* Sector-only header treatments. */
.hero-sector .hero-badge {
  background:rgba(255,255,255,.3) !important;
  background-image:none !important;
  border-color:rgba(255,255,255,.68);
}
@media (min-width:900px) {
  .hero-sector-header .hdr-logo-img { width:204px !important; }
}

/* Disabled in favour of the continuous vertical colour blend above. */
.hero-sector-demo .hero::after,
.hero-sector::after {
  content:none;
}

@media (max-width:1020px) {
  .hero-sector-demo .hero,
  .hero-sector {
    background:
      radial-gradient(120% 86% at 56% 28%, rgba(var(--sector-rgb),.92) 0%, rgba(var(--sector-rgb),.56) 48%, rgba(var(--sector-rgb),.16) 76%, transparent 100%) !important;
  }
}

/* Mobile-only composition: information first, visual safely below the CTAs. */
@media (max-width:600px) {
  .hero-sector-demo .btn { justify-content:center; text-align:center; }
  .hero-sector-header { padding:10px 0; }
  .hero-sector-header.scrolled { padding:8px 0; background:rgba(244,246,243,.92); }
  .hero-sector-header .hdr-inner { gap:8px; }
  .hero-sector-header .hdr-logo-img { width:188px !important; }
  .hero-sector-mobile-trial,
  .hero-sector-header .hero-sector-burger {
    display:inline-flex;
    height:46px;
    align-items:center;
    justify-content:center;
    flex:1 1 0;
    min-width:0;
    border-radius:999px;
    font:700 13px var(--body);
    text-align:center;
  }
  .hero-sector-mobile-trial { color:#fff; background:var(--ink); box-shadow:var(--shadow-sm); }
  .hero-sector-header .hero-sector-burger {
    width:auto;
    margin-left:0;
    grid-auto-flow:column;
    grid-template-columns:auto 19px;
    gap:9px;
    padding:0 16px;
    border:1px solid rgba(255,255,255,.9) !important;
    border-radius:999px;
    background:transparent !important;
    box-shadow:var(--shadow-sm);
  }
  .hero-sector-header .hero-sector-burger-label { color:#fff !important; }
  .hero-sector-header .hero-sector-burger-lines i { background:#fff !important; }
  .hero-sector-burger-lines { display:grid; gap:4px; }
  .hero-sector-header .hero-sector-burger i { width:19px; height:2px; }
  .hero-sector-header.menu-open .hero-sector-burger i:nth-child(1),
  .hero-sector-header.menu-open .hero-sector-burger i:nth-child(2),
  .hero-sector-header.menu-open .hero-sector-burger i:nth-child(3) { transform:none; opacity:1; }
  .hero-sector-header.menu-open .hero-sector-burger-lines i:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .hero-sector-header.menu-open .hero-sector-burger-lines i:nth-child(2) { opacity:0; }
  .hero-sector-header.menu-open .hero-sector-burger-lines i:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

  .hero-sector { padding:86px 0 0; }
  .hero-sector-mobile-grid {
    display:block;
    position:absolute;
    z-index:0;
    pointer-events:none;
    top:58px;
    left:50%;
    width:142vw;
    height:960px;
    transform:translateX(-50%);
    opacity:.30;
    background-image:linear-gradient(rgba(19,45,70,.19) 1px, transparent 1px), linear-gradient(90deg, rgba(19,45,70,.19) 1px, transparent 1px);
    background-size:54px 54px;
    -webkit-mask-image:radial-gradient(ellipse 58% 48% at 58% 42%, #000 8%, rgba(0,0,0,.62) 55%, transparent 100%);
    mask-image:radial-gradient(ellipse 58% 48% at 58% 42%, #000 8%, rgba(0,0,0,.62) 55%, transparent 100%);
  }
  .hero-sector .hero-grid { display:flex; flex-direction:column; gap:0; align-items:stretch; }
  .hero-sector .hero-copy { max-width:none; text-align:center; }
  .hero-sector .hero-cta .btn-navy,
  .hero-sector .hero-partners,
  .hero-sector .phero-ui,
  .hero-sector .phero-flash { display:none; }
  .hero-sector .hero-h1 { max-width:100%; margin-top:0; font-size:clamp(36px,10.25vw,45px); line-height:1.04; }
  .hero-sector .hero-sub { max-width:calc(100vw - 32px); margin:17px auto 0; font-size:15px; line-height:1.45; }
  .hero-sector .hero-cta { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:24px; }
  .hero-sector .hero-cta .btn { justify-content:center; text-align:center; }
  .hero-sector .hero-cta .btn-primary { width:100%; min-height:56px; font-size:16px; }
  .hero-sector .hero-dots { justify-content:center; margin-top:22px; }
  .hero-sector .hero-visual { order:2; margin-top:42px; min-height:0; justify-content:center; }
  .hero-sector .phero-stage.device-phone { width:min(84vw,330px); max-width:none; }
  .hero-sector .phero-stage.device-tablet { width:min(100%,460px); max-width:none; }
  .hero-sector .hero-partners { justify-content:center; text-align:center; gap:14px; margin-top:24px; padding:26px 12px 26px; transform:none; border-top:1px solid rgba(19,45,70,.18); }
  .hero-sector .hero-partners-label { width:100%; }
  .hero-sector .hero-partners-logos { width:100%; justify-content:center; gap:22px; margin-left:0; }
  .hero-sector .hero-partner { height:28px; }
  .hero-sector-mobile-menu { text-align:center; }
  .hero-sector-mobile-menu .btn { justify-content:center; text-align:center; }

  /* Header is action-first over the hero, then becomes a compact sticky bar. */
  .hero-sector-header .hdr-logo { display:none; }
  .hero-sector-header.scrolled .hdr-logo { display:inline-flex; }
  .hero-sector-header.scrolled .hero-sector-mobile-trial { display:none; }
  .hero-sector-header.scrolled .hero-sector-burger { flex:0 0 auto; min-width:128px; margin-left:auto; }

  /* The brand and the product descriptor lead into the headline on mobile. */
  .hero-sector .hero-sector-mobile-logo-link { display:block; width:188px !important; margin:0 auto 34px; }
  .hero-sector .hero-sector-mobile-logo { display:block; width:100%; height:auto; }
  .hero-sector .hero-badge {
    display:inline-flex;
    width:calc(100vw - 32px);
    max-width:390px;
    min-height:40px;
    margin:0 auto 16px;
    padding:8px 12px;
    justify-content:center;
    gap:6px;
    font-size:11px;
    line-height:1.25;
    text-align:center;
    white-space:nowrap;
  }

  /* Full capture interface, identical to desktop: unit, guest/meal, focus,
     recognised dish, and the capture flash. */
  .hero-sector .phero-ui { display:block; }
  .hero-sector .phero-chips { display:flex; }
  .hero-sector .phero-brackets,
  .hero-sector .phero-dish,
  .hero-sector .phero-flash { display:block; }

  /* The video remains the single large in-hero action, but with a lighter footprint. */
  .hero-sector .hero-cta .btn-primary { width:60%; min-height:48px; font-size:14px; }

  /* Partners remain visible, while their introductory label stays secondary. */
  .hero-sector .hero-partners { display:flex; }
  .hero-sector .hero-partners-label { font-size:14px; }
  .hero-sector .hero-partner { height:42px; }

  /* Per-slide mobile calibration: scene movement never shifts the copy above. */
  .hero-sector .slide-senior { transform:translateY(80px); }
  .hero-sector .hero-visual:has(.slide-senior) { margin-top:102px; margin-bottom:140px; }
  .hero-sector .slide-hospital .phero-env,
  .hero-sector .slide-hospital .phero-person { transform:translate(-50%, 0); }

  /* Keep the tablet/device anchored. Only the senior environment and people
     grow upward from their existing lower alignment. */
  .hero-sector .slide-senior .phero-env { width:240%; }
  .hero-sector .slide-senior .phero-person { width:152%; }
}

/* Decorative grid and image bleed must never create a horizontal page scroll. */
html, body { overflow-x:clip; }
@media (max-width:600px) {
  .hero-sector .hero-visual,
  .hero-sector .phero-stage { max-width:100%; }
  .onb, .portal, .pricing, .legacy-testimonial, .legacy-faq { max-width:100%; }
}

/* The phone scenes are physically taller than the senior tablet. Reserve the
   same desktop canvas for every slide so the content below never jumps while
   the carousel advances. Padding creates breathing room without shifting the
   already-approved internal scene alignment. */
@media (min-width:1021px) {
  .hero-sector.hero { padding:72px 0 12px; }
  .hero-sector .hero-grid {
    box-sizing:border-box;
    min-height:680px;
    padding-block:0;
  }
}

/* On small phones the hospital and school capture groups are intentionally
   smaller than the senior tablet composition: environment, people and device
   share the same stage and therefore scale together. */
@media (max-width:600px) {
  .hero-sector .hero-visual:has(.slide-hospital) .phero-stage.device-phone,
  .hero-sector .hero-visual:has(.slide-school) .phero-stage.device-phone {
    width:min(58.8vw,231px);
  }
}

/* Bring the desktop grid accents back on mobile, scaled to the single-column
   composition and kept below the content. */
@media (max-width:600px) {
  .onb, .portal, .pricing, .legacy-testimonial, .legacy-faq { position:relative; overflow:visible; isolation:isolate; }
  .onb > .wrap-wide, .portal > .wrap-wide, .pricing > .wrap-wide, .legacy-testimonial > .wrap, .legacy-faq > .wrap { position:relative; z-index:1; }
  .onb-transition-grid, .portal-transition-grid, .pricing-transition-grid, .testi-transition-grid, .faq-grid-field {
    display:block;
    position:absolute;
    z-index:0;
    pointer-events:none;
    width:112vw;
    height:390px;
    opacity:.34;
    background-image:linear-gradient(rgba(19,45,70,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(19,45,70,.18) 1px, transparent 1px);
    background-size:54px 54px;
    -webkit-mask-image:radial-gradient(ellipse 70% 70% at 54% 48%, #000 0%, rgba(0,0,0,.70) 48%, transparent 96%);
    mask-image:radial-gradient(ellipse 70% 70% at 54% 48%, #000 0%, rgba(0,0,0,.70) 48%, transparent 96%);
  }
  .onb-transition-grid { right:-42vw; bottom:-220px; }
  .portal-transition-grid { left:-42vw; bottom:-220px; }
  .pricing-transition-grid { right:-42vw; bottom:-220px; }
  .testi-transition-grid { left:50%; bottom:-220px; transform:translateX(-50%); }
  .legacy-faq .sec-head, .legacy-faq-list { position:relative; z-index:1; }
  .faq-grid-field { top:80px; left:50%; height:560px; transform:translateX(-50%); }
}

/* Once the navigation becomes sticky on a light surface, switch the mobile
   control back to Skeal navy for reliable contrast. */
@media (max-width:1020px) {
  .hero-sector-header.scrolled .hero-sector-burger,
  .hero-sector-header.scrolled .hero-sector-burger:hover,
  .hero-sector-header.scrolled .hero-sector-burger:focus-visible {
    border-color:rgba(0,19,45,.16) !important;
    background:transparent !important;
    color:#00132d !important;
  }
  .hero-sector-header.scrolled .hero-sector-burger-label { color:#00132d !important; }
  .hero-sector-header.scrolled .hero-sector-burger-lines i { background:#00132d !important; }
}

/* iPad portrait uses the same action-first header as a phone.  Keeping this
   separate from the desktop/tablet content breakpoint avoids the former
   circular control at 820px. */
@media (min-width:601px) and (max-width:1020px) and (orientation:portrait) {
  .hero-sector-header { padding:10px 0; }
  .hero-sector-header .hdr-inner { gap:16px; }
  .hero-sector-header .hdr-logo { display:none; }
  .hero-sector-header .hero-sector-mobile-trial,
  .hero-sector-header .hero-sector-burger {
    display:inline-flex;
    height:46px;
    min-width:0;
    flex:1 1 0;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    font:700 15px var(--body);
  }
  .hero-sector-header .hero-sector-mobile-trial { color:#fff; background:var(--ink); box-shadow:var(--shadow-sm); }
  .hero-sector-header .hero-sector-burger { margin-left:0; padding:0 18px; grid-auto-flow:column; grid-template-columns:auto 20px; gap:10px; border-color:rgba(255,255,255,.9) !important; background:transparent !important; }
  .hero-sector-header .hero-sector-burger-label { color:#fff !important; }
  .hero-sector-header .hero-sector-burger-lines i { width:20px; background:#fff !important; }
  .hero-sector-header.scrolled .hdr-logo { display:inline-flex; }
  .hero-sector-header.scrolled .hero-sector-mobile-trial { display:none; }
  .hero-sector-header.scrolled .hero-sector-burger { flex:0 0 auto; min-width:132px; margin-left:auto; }
}

/* Landscape iPads retain the two-column story, but with its content pulled
   away from the viewport edges and a shorter, lower first viewport. */
@media (min-width:1021px) and (max-width:1180px) and (orientation:landscape) {
  .hero-sector.hero { min-height:0; padding:112px 0 18px !important; }
  .hero-sector .hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; min-height:510px; padding-inline:44px; }
  .hero-sector .hero-copy { max-width:31rem; }
  /* Explicit stage widths are essential here: max-width alone let the phone
     coordinate system overflow its grid cell and leave only a thin sliver at
     the right edge on 1024px iPads. */
  .hero-sector .hero-visual { width:100%; max-width:none; justify-self:stretch; justify-content:center; }
  .hero-sector .phero-stage.device-phone { width:280px; max-width:280px; }
  .hero-sector .phero-stage.device-tablet { width:min(100%,480px); max-width:480px; }
}