/* Phone and small-tablet styles for pages. Loaded only at max-width 900px or short touch screens; the desktop view never sees this file. */
/* Owns the page sections around the viewers: header and menu, home sections, product heroes, HX page layout, pricing, forms, blog and articles. */

/* ── Touch basics ─────────────────────────────────────────────── */
/* Form fields at 16px stop iOS Safari zooming the page on focus. */
.demo-form input,.demo-form select,.demo-form textarea,.search-field input {
  font-size:16px
}
.demo-form input,.demo-form select {
  min-height:48px
}
/* Hover lifts stick after a tap on touch screens; keep them for mice only. */
@media (hover:none) {
  .button:hover,.start-live:hover {
    transform:none;
    filter:none
  }
}
/* The local preview badge sits in the page flow instead of floating over content. */
.preview-label {
  position:static;
  width:max-content;
  max-width:calc(100% - var(--gutter) * 2);
  margin:0 var(--gutter) 16px
}

/* ── Header and menu ──────────────────────────────────────────── */
.nav-inner>.brand {
  padding-block:4px
}
/* The open menu scrolls inside the screen, so every link stays reachable under the sticky header. */
.mobile-nav {
  max-height:calc(100vh - 77px);
  max-height:calc(100dvh - 77px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:4px var(--gutter) 20px
}
.mobile-nav a {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:0;
  font-size:17px;
  font-weight:500;
  letter-spacing:-.01em
}
/* The two live products carry the same Live tag as the desktop menu. */
.mobile-nav a[href="/pressure-vessels"]::after,.mobile-nav a[href="/heat-exchangers"]::after {
  content:"Live";
  padding:3px 7px;
  border-radius:3px;
  background:var(--on-accent);
  color:var(--yellow);
  font-size:12px;
  font-weight:600;
  letter-spacing:0
}
.mobile-nav a[aria-current="page"]::before {
  content:"";
  flex:none;
  width:7px;
  height:7px;
  background:var(--yellow)
}
/* Let's talk closes the menu as the yellow call to action. */
.mobile-nav a[href="/contact"] {
  justify-content:center;
  margin-top:18px;
  border:1px solid var(--on-accent);
  border-radius:6px;
  background:var(--yellow);
  color:var(--on-accent);
  font-size:15px;
  font-weight:600
}

/* ── Home: hero ───────────────────────────────────────────────── */
@media (max-width:600px) {
  .hero.hero-cover {
    min-height:min(600px,calc(100vh - 110px));
    min-height:min(600px,calc(100svh - 110px));
    margin-top:12px;
    padding:32px 22px 54px
  }
  /* The fade starts lower so the copy and button keep the dark image behind them. */
  .hero-cover-image,.hero-cover::after {
    -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent);
    mask-image:linear-gradient(to bottom,#000 88%,transparent)
  }
  .hero-cover .hero-copy {
    margin-bottom:0
  }
  /* Sized so the longest word, "infrastructure.", always fits the card. */
  :root[data-theme] .hero-cover h1 {
    max-width:none;
    font-size:clamp(30px,calc(14.5vw - 13px),52px);
    line-height:1
  }
  .hero-cover .hero-description {
    margin-top:18px;
    font-size:15.5px
  }
  .hero-cover .hero-actions {
    margin-top:24px
  }
  .hero-cover .hero-actions .button {
    min-height:50px;
    padding:14px 18px;
    gap:16px;
    font-size:14px
  }
}

/* ── Home: sectors ────────────────────────────────────────────── */
/* Touch screens have no hover, so a card blooms into colour while it crosses the middle of the screen (pages.js). */
.sector.is-lit>img {
  transform:scale(1.06);
  filter:grayscale(0) brightness(.92)
}
@media (prefers-reduced-motion:reduce) {
  .sector>img {
    filter:grayscale(0) brightness(.92)
  }
}
@media (max-width:600px) {
  .sectors-intro {
    gap:18px;
    margin-bottom:22px
  }
  .sectors-intro h2 {
    font-size:clamp(26px,8vw,32px);
    line-height:1.08
  }
  /* The three words read as one line, like a tagline. */
  .sectors-pitch .answer-words {
    flex-wrap:nowrap;
    margin-bottom:10px;
    font-size:clamp(19px,calc((100vw - 44px) / 14.2),30px)
  }
  .sectors-pitch .answer-close {
    font-size:15px
  }
  .sector-grid {
    gap:12px
  }
  .sector {
    height:auto;
    aspect-ratio:4/3;
    border-radius:18px
  }
  .sector>div {
    left:20px;
    right:20px;
    bottom:18px
  }
  .sector h3 {
    font-size:26px
  }
}

/* ── Home: stack, start and the workflow heading ──────────────── */
@media (max-width:600px) {
  .stack-section {
    padding-block:28px 12px
  }
  .stack-frame {
    gap:26px;
    padding:28px 20px
  }
  .stack-frame::before,.stack-frame::after {
    top:-16px;
    bottom:-16px
  }
  .stack-head h2 {
    font-size:clamp(26px,8vw,32px)
  }
  .stack-head p {
    font-size:15px
  }
  /* Four logos over three, the short row centred. */
  .stack-logos {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:22px 18px
  }
  .stack-logos img {
    width:calc((100% - 54px) / 4);
    height:26px
  }
  .start-section h2 {
    margin-bottom:16px;
    font-size:clamp(22px,6.6vw,26px);
    line-height:1.25
  }
  .flow .section-heading {
    margin-bottom:14px
  }
}
/* Each live product is a card: tag, name over category, arrow. One column on phones, two from 601px. */
.start-section .start-track {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-content:stretch;
  gap:10px
}
.start-live {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:14px;
  min-height:64px;
  padding:11px 18px 11px 11px;
  border-radius:16px;
  text-align:left
}
.start-tag {
  grid-column:1;
  grid-row:1/3
}
.start-live strong {
  grid-column:2;
  grid-row:1;
  align-self:end;
  font-size:17px;
  line-height:1.25
}
.start-what {
  grid-column:2;
  grid-row:2;
  align-self:start;
  font-size:13px;
  line-height:1.35
}
.start-live .icon {
  grid-column:3;
  grid-row:1/3
}
@media (min-width:601px) {
  .start-section .start-track {
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:760px;
    margin-inline:auto
  }
}
/* Long section headings stay inside narrow screens. */
@media (max-width:600px) {
  .section-heading h2 {
    font-size:clamp(28px,calc(9.6vw - 3px),36px)
  }
  .section-heading>p {
    font-size:14.5px;
    line-height:1.65
  }
}

/* ── Product band and its 3D vessel ───────────────────────────── */
/* A vertical swipe over a model scrolls the page; a sideways drag still turns the vessel. */
.vessel-canvas {
  touch-action:pan-y
}
@media (max-width:600px) {
  .product-band-inner {
    gap:4px;
    padding-block:8px 36px
  }
  .product-drawing {
    height:min(78vw,300px)
  }
  .product-band-copy {
    padding-bottom:0
  }
  .product-band-copy h2 {
    font-size:clamp(28px,8.6vw,36px);
    line-height:1.15
  }
  .product-band-copy p {
    margin-top:18px;
    font-size:15px;
    line-height:1.65
  }
  .product-band .check-list {
    gap:12px;
    margin:22px 0 26px;
    font-size:14px
  }
  .product-band .hero-actions {
    display:grid;
    gap:10px;
    margin-top:0
  }
  .product-band .hero-actions .button {
    min-height:52px;
    padding:14px 20px;
    font-size:14px
  }
}

/* ── Built by engineers from ──────────────────────────────────── */
/* The strip is not inside a .wide container, so it takes the page gutter here; it follows the product band's own border. */
.team-strip {
  margin-top:0;
  padding-inline:var(--gutter);
  border-top:0
}
@media (max-width:600px) {
  .team-strip {
    padding-block:28px 34px
  }
  .team-logos {
    gap:14px 20px;
    margin-top:20px
  }
  .team-logos img {
    max-width:140px;
    height:58px
  }
}
@media (min-width:601px) {
  /* Four over three, the short row centred. */
  .team-logos {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px 28px
  }
  .team-logos li {
    flex:0 0 calc((100% - 84px) / 4)
  }
  .team-logos img {
    height:64px
  }
}

/* ── Footer ───────────────────────────────────────────────────── */
.footer-bottom>div>a {
  min-height:44px
}
.footer-bottom>.brand {
  display:flex;
  align-items:center;
  min-height:44px
}
@media (max-width:600px) {
  .footer-top h2 {
    font-size:clamp(28px,calc(11.2vw - 5px),40px)
  }
  .footer-top .button {
    min-height:52px;
    font-size:14px
  }
  .footer-bottom {
    gap:14px;
    padding-top:22px
  }
  .footer-bottom>div {
    gap:22px
  }
}

/* ── PVSuperAgent hero and its intro ──────────────────────────── */
@media (max-width:600px) {
  .product-hero {
    padding-top:26px;
    gap:12px
  }
  .product-hero h1 {
    font-size:clamp(34px,calc(13.2vw - 6px),56px);
    line-height:1.08
  }
  .product-hero .hero-description {
    margin-top:18px;
    font-size:15.5px
  }
  .product-hero .hero-actions {
    margin-top:24px
  }
  .product-hero .hero-actions .button {
    min-height:50px;
    padding:14px 18px;
    font-size:14px
  }
  .product-hero-art {
    height:min(108vw,460px)
  }
}
/* The description reflows freely in narrow columns. */
@media (max-width:600px),(max-height:500px) and (pointer:coarse) {
  .product-hero .hero-description br {
    display:none
  }
}
/* While the datasheet is read the drawing sits in the left half, so every leader line runs clear of the card.
   The drawing is placed by its box, not a transform, so the lines are measured where it really is. */
.vessel-figure[data-intro] .vessel-blueprint {
  inset:4% 50% 8% 0;
  transition:opacity .9s ease,transform 1.2s cubic-bezier(.4,0,.2,1),top 1.2s cubic-bezier(.4,0,.2,1),right 1.2s cubic-bezier(.4,0,.2,1),bottom 1.2s cubic-bezier(.4,0,.2,1),left 1.2s cubic-bezier(.4,0,.2,1)
}
.vessel-figure[data-intro].is-link .vessel-blueprint {
  transform:none
}
/* The drawing then centres for its own scan, and finally settles behind the model, inside the frame. */
.vessel-figure[data-intro].is-settle .vessel-blueprint,.vessel-figure[data-intro].is-gadscan .vessel-blueprint {
  inset:4% 2% 12%
}
.vessel-figure[data-intro].is-ready .vessel-blueprint {
  inset:6% 36% 12% 0;
  transform:none
}
.intro-sheet {
  top:4%;
  right:0;
  width:min(54%,300px)
}
/* The art is a query container: the datasheet card compacts whenever the figure is narrow,
   whether that is a portrait phone or the right-hand column of a landscape one. */
.product-hero-art {
  container:vessel-art/inline-size
}
@container vessel-art (max-width:520px) {
  .intro-sheet {
    width:56%;
    padding:11px 10px 8px;
    border-radius:12px
  }
  .intro-title {
    gap:6px;
    margin-bottom:8px;
    font-size:12.5px
  }
  .intro-title .doc-badge {
    font-size:11px
  }
  .intro-sheet dl>div {
    gap:6px;
    padding:5px 6px;
    font-size:11.5px;
    line-height:1.3
  }
}

/* ── Feature cards and FAQ ────────────────────────────────────── */
@media (max-width:600px) {
  .feature-grid {
    gap:12px
  }
  /* Icon beside the title keeps each card short. */
  .feature-card {
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    column-gap:16px;
    padding:22px 22px 24px
  }
  .feature-card>.icon {
    grid-row:1/3;
    margin:2px 0 0
  }
  .feature-card h3 {
    font-size:19px;
    line-height:1.3
  }
  .feature-card p {
    margin-top:8px;
    font-size:14px;
    line-height:1.6
  }
  .faq-section {
    gap:20px
  }
  .faq-heading h2 {
    font-size:clamp(28px,8.6vw,36px)
  }
  .faq-list summary {
    font-size:16px;
    line-height:1.45
  }
  .faq-list details>p {
    font-size:14.5px
  }
}
/* The whole question row is the tap target, not just its text. */
.faq-list details {
  padding:0
}
.faq-list summary {
  min-height:60px;
  padding-block:16px
}
.faq-list details>p {
  margin-top:0;
  padding:0 32px 20px 0
}

/* ── HXSuperAgent: intro and the in-page viewer ───────────────── */
@media (max-width:600px) {
  .hx-intro {
    gap:16px;
    padding-block:26px 20px
  }
  .hx-intro h1 {
    font-size:clamp(34px,calc(13.2vw - 6px),56px);
    line-height:1.04
  }
  .hx-intro .hero-description {
    margin:0;
    font-size:15.5px
  }
  .hx-intro .hero-actions {
    margin-top:22px
  }
  .hx-intro .hero-actions .button {
    min-height:50px;
    padding:14px 18px;
    font-size:14px
  }
}
/* Everything below is scoped to the in-page viewer; the landscape overlay styles its own copy.
   The viewer is a query container, so its stage and controls follow the viewer's width. */
.hx-viewer:not(.is-landscape) {
  container:hx-viewer/inline-size;
  gap:10px
}
.hx-viewer:not(.is-landscape) .hx-canvas {
  touch-action:pan-y!important
}
.hx-viewer:not(.is-landscape) .hx-stage {
  height:auto;
  min-height:0;
  aspect-ratio:16/10
}
.hx-viewer:not(.is-landscape) .hx-zoom button {
  width:42px;
  height:42px
}
.hx-viewer:not(.is-landscape) .hx-hint {
  right:70px
}
.hx-viewer:not(.is-landscape) .hx-control input[type="range"] {
  height:40px;
  margin:-6px 0
}
.hx-viewer:not(.is-landscape) .hx-switch {
  width:52px;
  height:30px;
  border-radius:15px
}
/* An invisible margin around the switch gives it a full-size tap target. */
.hx-viewer:not(.is-landscape) .hx-switch::after {
  content:"";
  position:absolute;
  inset:-8px
}
.hx-viewer:not(.is-landscape) .hx-switch i {
  width:24px;
  height:24px
}
.hx-viewer:not(.is-landscape) .hx-switch[aria-pressed="true"] i {
  transform:translateX(22px)
}
.hx-viewer:not(.is-landscape) .hx-parts button {
  min-height:44px
}
/* Wide viewer: exploded and section side by side, the parts below in four columns. */
.hx-viewer:not(.is-landscape) .hx-panel {
  grid-template-columns:1fr 1fr
}
.hx-viewer:not(.is-landscape) .hx-control:last-child {
  grid-column:1/-1
}
.hx-viewer:not(.is-landscape) .hx-parts {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px
}
/* Narrow viewer: a landscape-shaped frame that still shows the whole exchanger, the controls stacked, the parts as chips. */
@container hx-viewer (max-width:560px) {
  .hx-viewer:not(.is-landscape) .hx-stage {
    aspect-ratio:5/4;
    border-radius:18px
  }
  .hx-viewer:not(.is-landscape) .hx-zoom {
    right:10px;
    bottom:10px
  }
  .hx-viewer:not(.is-landscape) .hx-hint {
    left:16px;
    bottom:14px;
    right:64px;
    font-size:12px;
    line-height:1.4;
    text-wrap:balance
  }
  .hx-viewer:not(.is-landscape) .hx-panel {
    grid-template-columns:minmax(0,1fr);
    gap:10px
  }
  .hx-viewer:not(.is-landscape) .hx-control {
    gap:8px;
    padding:14px 16px;
    border-radius:14px
  }
  .hx-viewer:not(.is-landscape) .hx-parts {
    grid-template-columns:1fr 1fr;
    gap:6px
  }
  .hx-viewer:not(.is-landscape) .hx-parts button {
    gap:8px;
    padding:8px 10px;
    border:1px solid var(--line);
    font-size:13.5px;
    line-height:1.25
  }
}
@media (max-width:600px) {
  .hx-viewer:not(.is-landscape) {
    padding-bottom:30px
  }
}

/* ── Pricing ──────────────────────────────────────────────────── */
@media (max-width:600px) {
  .pricing-layout {
    gap:14px;
    padding-bottom:20px
  }
  .plan-card {
    padding:26px 22px 22px
  }
  .plan-card h2 {
    margin-top:14px;
    font-size:clamp(28px,8.4vw,34px)
  }
  .plan-card>p {
    margin-top:14px;
    font-size:14.5px
  }
  .plan-card .check-list {
    gap:12px;
    margin:22px 0 24px;
    font-size:14px
  }
  .pricing-two .hero-actions {
    gap:6px;
    margin-top:0
  }
  .plan-card .button {
    min-height:52px;
    font-size:14px
  }
  .pricing-note h2 {
    font-size:clamp(26px,8vw,32px)
  }
  .pricing-note p {
    font-size:15px
  }
}
/* The secondary link gets a full tap height. */
.plan-card .text-link {
  min-height:44px;
  margin-top:8px;
  padding-block:10px
}
/* Tablets have room for the two plans side by side, their buttons level at the foot of each card. */
@media (min-width:640px) {
  .pricing-layout.pricing-two {
    grid-template-columns:1fr 1fr!important;
    align-items:stretch
  }
  .pricing-two .plan-card {
    display:flex;
    flex-direction:column
  }
  .pricing-two .plan-card .hero-actions {
    margin-top:auto
  }
}

/* ── Page headings, contact and waitlist ──────────────────────── */
@media (max-width:600px) {
  .page-heading h1 {
    font-size:clamp(36px,calc(14.8vw - 7px),56px)
  }
  .page-heading>p {
    font-size:14px
  }
  .contact-copy h1 {
    font-size:clamp(34px,calc(14.5vw - 6px),56px)
  }
  .contact-panel {
    padding:24px 20px
  }
  .demo-form label {
    font-size:13px
  }
  .demo-form .button {
    min-height:52px;
    font-size:15px
  }
}

/* ── Blog library ─────────────────────────────────────────────── */
/* Horizontal strips (category filters, article contents) bleed to the screen edge and fade on a side
   only while there is more to scroll that way; pages.js sets the two classes. */
.is-more-start,.is-more-end {
  --fade-start:0px;
  --fade-end:0px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent);
  mask-image:linear-gradient(to right,transparent,#000 var(--fade-start),#000 calc(100% - var(--fade-end)),transparent)
}
.is-more-start {
  --fade-start:36px
}
.is-more-end {
  --fade-end:36px
}
@media (max-width:600px) {
  .category-filters {
    align-self:stretch;
    flex-wrap:nowrap;
    overflow-x:auto;
    margin:-8px calc(var(--gutter) * -1);
    padding:8px var(--gutter);
    scroll-padding-inline:var(--gutter);
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .category-filters::-webkit-scrollbar {
    display:none
  }
  .category-filters button {
    flex:none;
    scroll-snap-align:start;
    font-size:13px
  }
}
.search-field {
  padding-block:2px
}
.search-field input {
  min-height:44px
}

/* ── Articles ─────────────────────────────────────────────────── */
.back-link {
  display:inline-flex;
  align-items:center;
  min-height:44px
}
@media (max-width:600px) {
  .back-link {
    margin-bottom:12px
  }
  .article-heading {
    padding-top:14px
  }
  .article-toc nav {
    margin:-8px calc(var(--gutter) * -1) 0;
    padding:8px var(--gutter);
    scroll-padding-inline:var(--gutter);
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .article-toc nav::-webkit-scrollbar {
    display:none
  }
  .article-toc a {
    display:flex;
    align-items:center;
    min-height:44px;
    scroll-snap-align:start
  }
  .article-toc a.active {
    border-color:var(--paper);
    color:var(--paper)
  }
  .article-content {
    font-size:16px;
    line-height:1.75
  }
  .article-content>p {
    line-height:1.75
  }
}
/* Two-column tables fit the screen; wider ones keep their width and scroll inside their own box. */
.article-content table:not(:has(tr>:nth-child(3))) {
  min-width:0
}
.article-content table:has(tr>:nth-child(5)) {
  min-width:680px
}
/* Shadows at the edges show that a table or formula scrolls sideways. */
.article-content .tw,.article-content .math,.article-content pre {
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  background-image:linear-gradient(to right,var(--ink),var(--ink)),linear-gradient(to right,var(--ink),var(--ink)),linear-gradient(to right,#0606071f,transparent),linear-gradient(to left,#0606071f,transparent);
  background-position:left center,right center,left center,right center;
  background-size:20px 100%,20px 100%,14px 100%,14px 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll
}
.article-content .math,.article-content pre {
  background-color:var(--raised);
  background-image:linear-gradient(to right,var(--raised),var(--raised)),linear-gradient(to right,var(--raised),var(--raised)),linear-gradient(to right,#0606071f,transparent),linear-gradient(to left,#0606071f,transparent)
}

/* ── Tablets ──────────────────────────────────────────────────── */
@media (min-width:601px) and (max-width:900px) {
  /* Titles take the full width with their line below, so a two-line title never breaks mid-phrase. */
  .page-heading:not(.uc-heading) {
    flex-direction:column;
    align-items:start;
    gap:18px
  }
  /* All seven tool logos fit one row. */
  .stack-logos {
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:22px
  }
}

/* ── Landscape phones ─────────────────────────────────────────── */
/* Short touch screens: the phone menu replaces the desktop links, and each section fits the height of the screen. */
@media (max-height:500px) and (pointer:coarse) {
  .desktop-nav,.nav-contact {
    display:none
  }
  .menu-toggle {
    display:flex
  }
  .mobile-nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:28px;
    max-height:calc(100vh - 91px);
    max-height:calc(100dvh - 91px)
  }
  .mobile-nav a[href="/contact"] {
    grid-column:1/-1
  }
  .hero.hero-cover {
    min-height:calc(100vh - 100px);
    min-height:calc(100svh - 100px);
    margin-top:12px;
    padding:26px 36px 40px;
    align-items:flex-end
  }
  :root[data-theme] .hero-cover h1 {
    max-width:none;
    font-size:clamp(30px,5.2vw,46px);
    line-height:1
  }
  .hero-cover .hero-description {
    margin-top:14px;
    max-width:520px;
    font-size:15px
  }
  .hero-cover .hero-actions {
    margin-top:20px
  }
  .sector-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .sector {
    height:min(240px,calc(100vh - 140px));
    aspect-ratio:auto
  }
  .stack-head {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }
  .stack-logos {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:22px
  }
  .stack-logos img {
    width:100%;
    height:30px
  }
  /* All seven logos in one row. */
  .team-logos {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px 24px
  }
  .team-logos li {
    flex:0 0 calc((100% - 6 * 24px) / 7)
  }
  .team-logos img {
    height:56px
  }
  /* Drawing beside the copy, like the desktop band. */
  .product-band-inner {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:28px;
    padding-block:20px
  }
  .product-drawing {
    height:min(300px,calc(100vh - 110px))
  }
  .product-band-copy h2 {
    font-size:clamp(26px,4vw,34px)
  }
  .product-band-copy p {
    margin-top:14px;
    font-size:14px
  }
  .product-band .check-list {
    margin:18px 0 22px
  }
  /* PV and HX heroes: copy beside the art. */
  .product-hero {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    padding-block:18px 10px;
    gap:24px
  }
  .product-hero h1 {
    font-size:clamp(28px,5.4vw,50px)
  }
  .product-hero-art {
    height:min(320px,calc(100vh - 100px))
  }
  .hx-intro {
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    align-items:center;
    padding-block:22px 16px;
    gap:28px
  }
  .hx-intro h1 {
    font-size:clamp(28px,5.4vw,50px)
  }
  .hx-intro .hero-description {
    margin:0;
    font-size:15px
  }
  .hx-viewer:not(.is-landscape) {
    grid-template-columns:1fr
  }
  .hx-viewer:not(.is-landscape) .hx-stage {
    aspect-ratio:auto;
    height:calc(100vh - 110px);
    height:calc(100svh - 110px);
    min-height:240px
  }
  .faq-section {
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)
  }
}