/* Premium dark layer. Loaded after style.css so it wins on equal specificity. */
:root {
  --bg: #05070d;
  --bg-2: #0a0e16;
  --bg-3: #10151f;
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);
  --ink: #f4f6f8;
  --ink-2: #a8b0bd;
  --ink-3: #7c8594;
  --brand: #39ff88;
  --brand-2: #7fdbff;
  --brand-3: #9b5cff;
  --ok: #39ff88;
  --warn: #e2b15a;
  --bad: #ff6b6b;
  --info: #7fdbff;
  --radius: 20px;
  --shadow: 0 30px 80px rgba(0, 0, 0, .45);
  --max: 1180px;
  --font: "Manrope", "Inter", "PingFang HK", "Noto Sans HK", "Microsoft JhengHei", system-ui, sans-serif;
  --display: "Syne", "Manrope", "PingFang HK", sans-serif;
}
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(900px 480px at 80% -10%, rgba(127, 219, 255, .08), transparent 55%),
    radial-gradient(700px 420px at 0% 10%, rgba(155, 92, 255, .06), transparent 50%),
    #05070d;
  background-attachment: fixed;
}
h1, h2, .hero-video h1 { font-family: var(--display); letter-spacing: -.04em; font-weight: 700; line-height: .98; }
h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); margin: .2em 0 .35em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 .6em; }
.lede { font-size: 1.15rem; max-width: 38ch; color: var(--ink-2); }
.site-header { background: rgba(5, 7, 13, .78); border-bottom: 1px solid var(--line); box-shadow: none; backdrop-filter: blur(18px); }
.nav__links a, .meganav__trigger { color: var(--ink-2); }
.meganav__trigger:hover, .meganav__top.is-open .meganav__trigger { color: var(--ink); background: rgba(255,255,255,.05); }
.meganav__panel, .meganav__featured, .nav__links { background: #0c1018; }
.meganav__item:hover { background: rgba(255,255,255,.04); }
.lang-switch, .nav__burger, .seg { background: rgba(255,255,255,.04); color: var(--ink); }
.gt-menu { display: none; }
.lang-btn.is-active { color: #04140c; background: var(--brand); }
.card, .stat, .panel, .quote-box, .accordion, .modal, .toast, .tier-card, .text-card, .shot-card {
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius);
}
.site-footer { background: #070a10; border-top: 1px solid var(--line); color: var(--ink-2); }
.footer-grid a, .site-footer a { color: var(--ink-2); }
input, select, textarea { background: #0c1018; color: var(--ink); border-color: var(--line-strong); }
.btn--primary, .btn--quote {
  background: #39ff88; color: #04140c; border: 0; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(57,255,136,.3), 0 10px 30px rgba(57,255,136,.15);
}
.btn--primary:hover, .btn--quote:hover { filter: brightness(1.05); }
.btn--demo, .btn--ghost { background: transparent; color: var(--ink); border: 1px solid rgba(255,255,255,.28); }
.btn--demo:hover, .btn--ghost:hover { border-color: rgba(127,219,255,.7); color: #fff; }
.eyebrow { background: transparent; border: 0; color: var(--brand-2); letter-spacing: .18em; padding: 0; }
.is-premium .section { padding: 96px 0; }
.page-hero { padding: 72px 0 24px; }
.page-hero__grid, .split, .install { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.narrow { max-width: 720px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.selling-bar { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 28px 0; border-block: 1px solid var(--line); }
.selling-bar li { color: var(--ink-2); font-size: .95rem; }
.wrap > .selling-bar, body > .selling-bar { max-width: var(--max); margin-inline: auto; padding-inline: 20px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.shot-card, .text-card, .tier-card, .scenario-card { padding: 18px; text-decoration: none; color: inherit; display: grid; gap: 10px; }
.shot-card h3, .text-card h3, .tier-card h3 { margin: 0; font-size: 1.25rem; font-family: var(--display); }
.shot-card p, .text-card p { margin: 0; color: var(--ink-2); }
/* Cover photos are near-black. The card is an <a>, and a link's own color can
   win over `color: inherit` in WebKit, which painted these titles the same
   colour as the photograph. Set the fill on the words themselves. */
body.is-premium a.shot-card,
body.is-premium a.shot-card:link,
body.is-premium a.shot-card:visited,
body.is-premium a.shot-card:hover,
body.is-premium a.shot-card:active,
body.is-premium .shot-card h3,
body.is-premium .text-card h3,
body.is-premium .tier-card h3,
body.is-premium article.shot-card h3 {
  color: #f7f8fa;
  -webkit-text-fill-color: #f7f8fa;
}
body.is-premium .shot-card p,
body.is-premium .text-card p,
body.is-premium article.shot-card p {
  color: #d7dee8;
  -webkit-text-fill-color: #d7dee8;
}
body.is-premium .shot-card h3,
body.is-premium .shot-card p {
  position: relative;
  z-index: 1;
  background-color: #10151f;
}
.media-frame { position: relative; z-index: 0; isolation: isolate; aspect-ratio: 4 / 3; width: 100%; border-radius: 18px; overflow: hidden; background: #10151f; }
.media-frame img, .media-frame video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; opacity: 1; }
.media-frame--contain { background: radial-gradient(circle at 50% 42%, #f7f9fb, #d5dee8 72%); }
.media-frame--contain img { object-fit: contain; inset: 6%; width: calc(100% - 12%); height: calc(100% - 12%); max-width: none; padding: 0; }
.media-fallback { aspect-ratio: 4 / 3; border-radius: 18px; background: radial-gradient(circle at 50% 40%, rgba(155,92,255,.2), #070b12 70%); }
.model-list { display: grid; gap: 28px; }
.model-card { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; padding: 22px; border: 1px solid var(--line); border-radius: 20px; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; font-weight: 500; }
.spec-table th { color: var(--ink-3); width: 34%; font-size: .86rem; }
.tag-typical { display: inline-block; margin-left: 8px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #04140c; background: var(--brand-2); border-radius: 999px; padding: 2px 7px; vertical-align: 2px; }
.typical-note { color: var(--ink-2); font-size: .92rem; margin-top: 16px; }
.hero-video { position: relative; min-height: 88vh; display: grid; align-items: end; }
.hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,13,.2) 0%, rgba(5,7,13,.35) 45%, rgba(5,7,13,.82) 100%); }
.hero-video__copy { position: relative; z-index: 1; padding: 18vh 32px 72px; }
.flow-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.flow-steps li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; font-size: 1.35rem; }
.flow-steps span { color: var(--brand-2); font-family: var(--display); }
.flow-steps--text li { align-items: start; }
.flow-steps p { margin: 4px 0 0; color: var(--ink-2); font-size: 1rem; font-family: var(--font); }
.demo-clip video { width: 100%; max-height: 520px; background: #000; border-radius: 16px; }
.demo-clip figcaption, .tiny { color: var(--ink-3); font-size: .85rem; }
.clip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.clean-list { padding-left: 1.1em; color: var(--ink-2); display: grid; gap: 8px; }
.faq-preview details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq-preview summary { cursor: pointer; font-weight: 650; }
.scenario-list { display: grid; gap: 36px; }
.scenario-card { grid-template-columns: .8fr 1.2fr; padding: 0; overflow: hidden; background: transparent; border: 0; }
.tier-card ul { margin: 0 0 16px; padding-left: 1.1em; color: var(--ink-2); }
.reveal { opacity: 0; }
.reveal.is-in { opacity: 1; transition: opacity .6s ease; }
.mobile-cta { display: none; }
/* The logo keeps its own width. Tools use whatever is left and wrap inside
   that cell, so the wordmark cannot paint over the cart or sign-in. */
body.is-premium .site-header .nav { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
body.is-premium .site-header .nav__tools { flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; justify-content: flex-end; }
body.is-premium .brand__text small { display: none; }
body.is-premium .brand-cluster {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
body.is-premium .brand-cluster .brand,
body.is-premium .site-header .brand { grid-area: auto; min-width: 0; overflow: hidden; }
body.is-premium .site-header .brand .brand__name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.is-premium .site-header .brand-cluster { grid-area: brand; }
body.is-premium .nav-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  color: #f4f6f8;
  background: rgba(255,255,255,.04);
  font-weight: 700;
  font-size: .88rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
body.is-premium .nav-home svg { width: 16px; height: 16px; flex: 0 0 16px; }
body.is-premium .nav-home:hover { border-color: #39ff88; color: #39ff88; text-decoration: none; }
body.is-premium .nav-home[aria-current="page"] { border-color: rgba(57,255,136,.7); color: #39ff88; }
body.is-premium .gt-toggle { background: rgba(255,255,255,.06); color: var(--ink); border-color: var(--line-strong); flex: 0 0 auto; }
body.is-premium #contactRoot.section.wrap { padding: 64px 32px 120px; }
.enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 28px; max-width: 820px; }
.enquiry-form > label { display: grid; gap: 6px; min-width: 0; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.enquiry-form .span-2 { grid-column: 1 / -1; }
.enquiry-form > label.check { display: flex; align-items: flex-start; }
body.is-premium .enquiry-form input[type="text"],
body.is-premium .enquiry-form input[type="email"],
body.is-premium .enquiry-form input[type="tel"],
body.is-premium .enquiry-form input[type="number"],
body.is-premium .enquiry-form select,
body.is-premium .enquiry-form textarea {
  width: 100%; box-sizing: border-box; margin: 0;
  background-color: #0c1018; color: #f4f6f8;
  border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
  padding: 12px 14px; font: inherit; font-size: 1rem; line-height: 1.4;
}
body.is-premium .enquiry-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #a8b0bd 50%), linear-gradient(135deg, #a8b0bd 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px;
}
body.is-premium .enquiry-form input:focus,
body.is-premium .enquiry-form select:focus,
body.is-premium .enquiry-form textarea:focus { border-color: #39ff88; outline: none; background-color: #10151f; }
body.is-premium .enquiry-form textarea { min-height: 140px; resize: vertical; }
body.is-premium .enquiry-form .check input { width: auto; margin-top: 3px; accent-color: #39ff88; }
body.is-premium .enquiry-form .btn { justify-self: start; }
@media (max-width: 900px) {
  .card-grid, .selling-bar, .page-hero__grid, .split, .install, .model-card, .clip-row, .scenario-card { grid-template-columns: 1fr; }
  .is-premium .section { padding: 64px 0; }
  .hero-video { min-height: 78vh; }
  body.is-premium .gt-toggle__label { display: none; }
  /* A fixed background makes iOS drop IntersectionObserver updates, and the
     cards then stay invisible. Scroll the background with the page. */
  body.is-premium { background-attachment: scroll; }
  .reveal, .reveal.is-in { opacity: 1; }
}
/* Phone and tablet: the logo row never shares space with the language pills.
   The pills are a full-width second row even when they stay inside .nav__tools,
   and the sign-in control and burger are pinned to the top corner. The translate
   globe is not part of this row — it covered the wordmark. */
@media (max-width: 1280px) {
  body.is-premium .site-header .nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 8px 12px 10px 14px;
    position: relative;
  }
  body.is-premium .site-header .brand-cluster {
    flex: 0 1 auto;
    order: 1;
    justify-content: flex-start;
    min-width: 0;
    max-width: calc(100% - 128px);
    min-height: 44px;
    position: relative;
    z-index: 1;
  }
  body.is-premium .site-header .brand-cluster .brand {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  body.is-premium .site-header .brand__text { min-width: 0; overflow: hidden; }
  body.is-premium .site-header .brand__mark { width: 32px; height: 32px; flex: 0 0 32px; }
  body.is-premium .site-header .nav-home { padding: 6px 10px; font-size: .84rem; }
  body.is-premium .site-header .brand .brand__name {
    display: block;
    background: none;
    color: #f4f6f8;
    -webkit-text-fill-color: #f4f6f8;
    font-size: 1rem;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.is-premium .site-header .nav__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: stretch;
    gap: 8px;
    order: 2;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    position: static;
  }
  body.is-premium .site-header .nav__burger {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 3;
  }
  body.is-premium .site-header #navAccount {
    position: absolute;
    top: 8px;
    right: 56px;
    z-index: 3;
    max-width: 34vw;
  }
  /* Cart sits on the language row, not on top of the wordmark. */
  body.is-premium .site-header .cart-link {
    position: absolute;
    top: auto;
    bottom: 12px;
    right: 12px;
    z-index: 3;
  }
  body.is-premium .site-header:has(.cart-link) .lang-switch { padding-right: 56px; box-sizing: border-box; }
  body.is-premium .site-header .lang-switch {
    flex: 1 0 100%;
    order: 5;
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow: visible;
    justify-content: stretch;
  }
  body.is-premium .gt-toggle { display: none !important; }
}
@media (max-width: 768px) {
  .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 160; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(5,7,13,.94); border-top: 1px solid var(--line); }
  .float-wa { display: none !important; }
  body { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  body.is-premium .hero-video__copy.wrap { padding: 16vh 22px 56px; }
  body.is-premium .page-hero .wrap { padding-left: 22px; padding-right: 22px; }
  body.is-premium #contactRoot.section.wrap { padding: 40px 22px 120px; }
  body.is-premium .chat-host { right: 12px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 165; }
  body.is-premium .chat-launch {
    width: 48px; height: 48px; padding: 0; justify-content: center; gap: 0;
  }
  body.is-premium .chat-launch [data-i18n="chat.launch"] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  body.is-premium .chat-panel { max-height: min(64vh, calc(100dvh - 210px)); }
  body.is-premium .site-header .nav { position: relative; }
  body.is-premium .site-header .nav__links {
    position: absolute; top: calc(100% + 6px); left: 12px; right: 12px; width: auto;
    margin: 0; z-index: 150; grid-area: auto; grid-column: auto; grid-row: auto;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: #0c1018; overflow-x: hidden; overflow-y: auto;
  }
  body.is-premium .site-header .nav__links.is-open { display: flex; }
  body.is-premium .nav__links.is-open .meganav__top,
  body.is-premium .nav__links.is-open .meganav__acc-body,
  body.is-premium .nav__links.is-open .meganav__trigger { position: static; }
  body.is-premium .lang-btn { flex: 1 1 0; min-height: 40px; padding: 8px 6px; }
  body.is-premium .gt-toggle { display: none; }
  body.is-premium .gt-panel {
    left: 12px; right: 12px; top: 148px; width: auto; z-index: 180;
    max-height: calc(100dvh - 220px); overflow: auto;
    background: #0c1018; color: var(--ink);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
  }
  body.is-premium .gt-panel .chip { background: #161b27; color: var(--ink); border-color: rgba(255,255,255,.16); }
  body.is-premium .nav__links.is-open .gt-menu {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px;
    margin-top: 8px; padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--line); background: transparent; color: var(--ink);
    font: inherit; font-weight: 650; text-align: left; cursor: pointer;
  }
}
@media (max-width: 720px) {
  .enquiry-form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; }
  .hero-video video, .ambience video { display: none; }
}

/* App and legacy pages share the same dark surfaces as the marketing site. */
body.is-premium:not([data-page]) h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  max-width: 22ch;
}
body.is-premium:not([data-page]) h2 { font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.2; letter-spacing: -.02em; }
body.is-premium main.wrap.section { padding: 8px 28px 96px; }
body.is-premium .page-head, body.is-premium .dash-head { margin: 8px 0 28px; }
body.is-premium .page-head h1, body.is-premium .dash-head h1 { margin-top: 0; }
body.is-premium .faq-item,
body.is-premium .faq-tools,
body.is-premium .note,
body.is-premium .empty,
body.is-premium .demo-box,
body.is-premium .account-bar,
body.is-premium .account-chip,
body.is-premium .form-sec,
body.is-premium .chapters,
body.is-premium .trigger-chip,
body.is-premium .flow__node,
body.is-premium .copy-variant,
body.is-premium .checklist li,
body.is-premium .storyboard li,
body.is-premium .plan,
body.is-premium .social-btn,
body.is-premium .tabs button,
body.is-premium .chip,
body.is-premium .pill,
body.is-premium pre,
body.is-premium .map-panel,
body.is-premium .pv-drop,
body.is-premium .pv-item,
body.is-premium .chat-panel,
body.is-premium .chat-icon,
body.is-premium .chat-foot {
  background: rgba(255,255,255,.04);
  color: var(--ink);
  border-color: var(--line);
}
body.is-premium .gt-panel {
  background: #0c1018;
  color: var(--ink);
  border-color: rgba(255,255,255,.16);
}
body.is-premium .btn--ghost,
body.is-premium .btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: rgba(255,255,255,.28);
}
body.is-premium .btn--ghost:hover,
body.is-premium .btn--quiet:hover { background: rgba(255,255,255,.06); color: #fff; }
body.is-premium input[type="text"],
body.is-premium input[type="email"],
body.is-premium input[type="tel"],
body.is-premium input[type="number"],
body.is-premium input[type="date"],
body.is-premium input[type="search"],
body.is-premium input[type="url"],
body.is-premium input[type="password"],
body.is-premium select,
body.is-premium textarea,
body.is-premium .chat-form input {
  background-color: #0c1018;
  color: #f4f6f8;
  border-color: rgba(255,255,255,.18);
}
body.is-premium table.data th { background: #10151f; color: var(--ink-3); }
body.is-premium table.data td { color: var(--ink); }
body.is-premium table.data tbody tr:hover { background: rgba(255,255,255,.04); }
body.is-premium .faq-item summary,
body.is-premium .faq-item__a,
body.is-premium .chat-msg--bot .chat-msg__body { color: var(--ink); }
body.is-premium .chat-msg--bot .chat-msg__body { background: rgba(255,255,255,.06); }
body.is-premium .chat-head { background: rgba(127,219,255,.08); }
body.is-premium .loc-card__media { background: #10151f; }
body.is-premium .loc-card__price { background: rgba(5,7,13,.88); color: var(--ink); }
body.is-premium code, body.is-premium kbd { background: #10151f; color: #d5f5e3; border-color: var(--line); }
body.is-premium pre code { background: transparent; color: inherit; }
body.is-premium .nav__links { background: #0c1018; }
body.is-premium .meganav__panel,
body.is-premium .meganav__featured { background: #0c1018; color: var(--ink); }
body.is-premium .filters { position: sticky; top: 84px; }
.ambience { position: relative; margin: 0; min-height: 280px; max-height: 420px; overflow: hidden; background: #070b12; }
.ambience img, .ambience video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ambience__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,13,.15), rgba(5,7,13,.55) 70%, #05070d); }
.install-hero { position: relative; min-height: 420px; display: grid; align-items: end; overflow: hidden; }
.install-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.install-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,13,.2), rgba(5,7,13,.82)); }
.install-hero__copy { position: relative; z-index: 1; padding: 18vh 28px 48px; }
.install-cat { margin: 56px 0 18px; }
.install-cat h2 { margin: 0; }
.install-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.install-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.035); }
.install-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #10151f; border-radius: 14px; display: block; }
.install-card h3 { margin: 0; font-size: 1.05rem; font-family: var(--display); letter-spacing: -.02em; }
.install-card p { margin: 0; color: var(--ink-3); font-size: .82rem; }
.legal-prose { max-width: 68ch; color: var(--ink-2); display: grid; gap: 14px; }
.legal-prose h2 { margin: 18px 0 0; }
@media (max-width: 900px) {
  .install-grid { grid-template-columns: 1fr 1fr; }
  .ambience { min-height: 200px; max-height: 280px; }
}
@media (max-width: 768px) {
  body.is-premium main.wrap.section { padding: 8px 22px 120px; }
  .install-grid { grid-template-columns: 1fr; }
  .install-hero__copy { padding: 16vh 22px 36px; }
}