/* ==========================================================================
   argus.css — the Argus tab
   --------------------------------------------------------------------------
   Locked visual source: Figma "Argus" 899:13401 (1726 × 2866.905) and the
   opened question plates 899:13402.

   This page EXTENDS landing.css; it never restates it. The question plates
   (.lp-qcard), the painting band (.lp-band), the model constellation
   (.lp-constel), the composer group (.lp-composer) and the closing title
   (.lp-cta__title) are that sheet's components, drawn once from the Homepage
   frame and reused here at the same measures. Everything below is either a
   thing only this page draws — the Maestro hero — or the small number of
   deltas the Argus frame makes to a shared component.

   TWO artboard units, deliberately:

     --u   min(1px, 100vw / 1440)  landing.css's unit. Every shared component
                                   keeps rendering at exactly the size it
                                   renders elsewhere in the product.
     --au  min(1px, 100vw / 1726)  this frame's unit. The hero is drawn edge
                                   to edge at 1726 and is one composition, so
                                   it scales against its own frame instead of
                                   being cropped or re-flowed.

   Page colour: the frame's plate is #e7e2d9, not the Homepage's white. Setting
   --lp-canvas carries that through every landing component on this page rather
   than restating a background on each one.
   ========================================================================== */

body.lp.oc-argus {
  /* The frame unit follows the viewport through normal desktop widths. The
     hero scopes and caps it below only once that proportional height would
     exceed the ultrawide ceiling. */
  --au: calc(100vw / 1726);

  /* Frame plate — 821:21022 / 899:13327 */
  --lp-canvas: #e7e2d9;

  /* Hero — 821:21030 */
  --ar-ember: #fa4809;
  --ar-hero-ink: #1b1818;
}

/* The frame separates its sections by their own measures, not the Homepage's
   constant 46; each section below carries the gap the Argus frame draws. */
.oc-argus main {
  display: block;
}

/* ══ Navigation ═══════════════════════════════════════════════════════════
   The Argus frame draws no header — it opens on the hero. The tabs still have
   to be reachable from here, so the row is the quietest possible version of
   the Workspace's own informational nav: same links, same order, same
   unpublished treatment, sitting on the plate rather than on a bar. */

.ar-topnav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--au));
  padding: calc(28 * var(--au)) calc(84 * var(--au)) 0;
  background: var(--lp-canvas);
}

.ar-topnav__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lp-ink);
  font-family: var(--lp-display);
  font-size: max(calc(18 * var(--au)), 15px);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.ar-topnav__mark {
  display: block;
  width: max(calc(22 * var(--au)), 18px);
  height: auto;
}

/* The WORDMARK ASSET, not live type. This was a bare <span>Orcheum</span> set in
   `--lp-display` — a different face from the brand wordmark, so the lockup read
   as a near-miss of the identity rather than the identity. Sized to the approved
   proportion (wordmark height is 0.756 of the square mark's side, as in the
   workspace sidebar and the landing header) and left on the brand's own 8px gap,
   which `.ar-topnav__brand` already carried. `width: auto` keeps the drawing's
   intrinsic ratio, so the letterforms can never be stretched by the fluid scale. */
.ar-topnav__word {
  display: block;
  height: max(calc(16.6 * var(--au)), 13.6px);
  width: auto;
}

.ar-topnav__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, calc(28 * var(--au)), 28px);
}

.ar-topnav__link {
  color: rgba(36, 37, 45, 0.72);
  font-family: var(--font-sans, "Geist", Inter, system-ui, sans-serif);
  font-size: max(calc(15 * var(--au)), 13px);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: color 180ms ease;
}

.ar-topnav__link:hover,
.ar-topnav__link:focus-visible {
  color: var(--lp-accent);
}

.ar-topnav__link[aria-current="page"] {
  color: var(--lp-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--lp-accent);
}

/* Drawn, not published — the treatment the Workspace nav already gives these. */
.ar-topnav__link[aria-disabled="true"] {
  color: rgba(36, 37, 45, 0.34);
  cursor: default;
  pointer-events: none;
}

/* ══ 1 · MEET THE MAESTRO — 821:21021 ═════════════════════════════════════
   948 of cream, 777.596 of dark, 896 tall. The cream half IS the page plate,
   so only the dark half is a panel; the angular Union is drawn over its left
   edge in the same cream, which is what makes the cut read as a tear rather
   than as a border. */

.ar-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: calc(896 * var(--au));
  max-height: 1080px;
  overflow: clip;
  background: var(--lp-canvas);
}

/* 948 of 1725.596. A share, not a leftover: a half that merely takes what the
   other one does not need stops being the drawn half the moment the viewport
   is wider than the frame. */
.ar-hero__text {
  display: flex;
  flex: 0 0 54.9424%;
  min-width: 0;
  padding: calc(40 * var(--au)) 0 0 calc(84 * var(--au));
}

.ar-hero__column {
  width: calc(864 * var(--au));
}

/* Display — 821:21024. "Meet / The" and "Maestro" share one grid cell: the
   frame overlaps them by 17, and that collision is the composition. */
.ar-hero__display {
  display: grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  margin: 0;
  font-weight: 400;
}

.ar-hero__meet,
.ar-hero__maestro {
  grid-area: 1 / 1;
  display: block;
  font-family: var(--lp-display);
  line-height: 1.18;
}

/* 821:21025 · Safiro Bold 120 · #24252d. The frame indents "The" with spaces
   inside the string, so the face's own space advance sets the step. */
.ar-hero__meet {
  width: calc(405.798 * var(--au));
  color: var(--lp-ink);
  font-size: calc(120 * var(--au));
  font-weight: 700;
  white-space: pre-wrap;
}

/* 821:21026 · Safiro SemiBold 160 · accent, dropped 267 into the same cell. */
.ar-hero__maestro {
  width: calc(864 * var(--au));
  margin-top: calc(267 * var(--au));
  color: var(--lp-accent);
  font-size: calc(160 * var(--au));
  font-weight: 600;
}

/* 821:21027 · the rule, then 56, then the copy. */
.ar-hero__note {
  margin-top: calc(82 * var(--au));
  padding: 0 calc(4 * var(--au));
}

.ar-hero__rule {
  display: block;
  width: calc(45 * var(--au));
  height: calc(3 * var(--au));
  background: var(--lp-accent);
}

/* 821:21029 · Safiro Regular 32 / 0.94 · tracking -1 · 702 measure */
.ar-hero__copy {
  width: calc(702 * var(--au));
  margin: calc(53 * var(--au)) 0 0;
  color: var(--ar-hero-ink);
  font-family: var(--lp-display);
  font-size: calc(32 * var(--au));
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: calc(-1 * var(--au));
}

.ar-hero__copy strong {
  font-weight: 600;
}

/* ── The dark half — 821:21030 ──────────────────────────────────────────── */

/* 777.596 of 1725.596 — the other share. Held as a proportion so the panel
   keeps the plate's own 778 × 896 aspect at every width and the sculpture is
   never re-cropped to fit a box that drifted. */
.ar-hero__panel {
  position: relative;
  flex: 0 0 45.0576%;
  overflow: clip;
  background: var(--ar-ember);
}

/* 821:21031 "Illus-craft" — the frame's own plate: ember, sculpture, the mark
   over the eye and the Argus wordmark, with the two inset shadows raked over
   all of it. One surface in the frame, one image here. The asset is 778 × 896,
   the panel's exact ratio, so it fills without ever being scaled unevenly on
   one axis. */
.ar-hero__plate {
  position: absolute;
  inset: 0;
  background-color: var(--ar-ember);
  background-image: url("../assets/argus/hero-plate.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 821:21035 · the Union — the cream tear between the halves. */
.ar-hero__edge {
  position: absolute;
  left: calc(-110 * var(--au));
  top: calc(-59.26 * var(--au));
  z-index: 2;
  display: block;
  width: calc(251.354 * var(--au));
  height: calc(1000.839 * var(--au));
}

/* Above 2080px the frame-proportional hero would exceed 1080px. Freeze only
   the hero's artboard unit here: the split remains unchanged, while every
   internal measure (type, divider and copy) continues to scale as one capped
   composition. The plate keeps its native 778:896 ratio and anchors right in
   the wider dark field, so the sculpture is neither stretched nor cropped. */
@media (min-width: 2081px) {
  .ar-hero {
    --au: calc(1080px / 896);
  }

  .ar-hero__panel {
    background: #000;
  }

  .ar-hero__plate {
    left: auto;
    width: calc(778 * var(--au));
    background-size: contain;
  }
}

/* ══ 2 · QUESTION PLATES — 899:13314 / 899:13402 ══════════════════════════
   The plates are landing.css's; this section places them and adds the opened
   state the Argus frame draws — the row goes full width, the title rises to
   69.5, and the answer arrives at 196 in the accent. */

.ar-plates {
  display: flex;
  justify-content: center;
  padding: calc(80 * var(--u)) calc(52 * var(--u)) 0;
  background: var(--lp-canvas);
}

/* The row is 1336 and stays 1336. Two plates of 660 with a 16 between them,
   or ONE plate holding the whole width — it never becomes a column, and it
   never gets taller. */
.ar-qrow {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc(16 * var(--u));
  width: calc(1336 * var(--u));
  height: calc(337 * var(--u));
  transition: gap 420ms cubic-bezier(0.22, 0.8, 0.24, 1);
}

/* With one plate open there is no second plate to sit beside, so the gap that
   separated them goes too — the open plate lands on exactly the 1336 the
   closed pair occupied. */
.ar-qrow.is-open {
  gap: 0;
}

/* The trigger IS the title: the plate opens from the words it asks. */
.ar-qcard .lp-qcard__title {
  padding: 0;
}

.ar-qcard__trigger {
  display: block;
  width: 100%;
  padding: 0 calc(109 * var(--u));
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.lp-qcard--b .ar-qcard__trigger {
  padding: 0 calc(159 * var(--u));
}

.ar-qcard__trigger:focus-visible {
  outline: calc(2 * var(--u)) solid var(--lp-accent);
  outline-offset: calc(6 * var(--u));
  border-radius: calc(6 * var(--u));
}

/* Closed, the plate is exactly 899:13315: the question alone, centred. Hover
   must not open it — opening rearranges the row, and a row should not
   rearrange itself because a pointer crossed it. */
.ar-qcard {
  flex: 0 0 auto;
  width: calc(660 * var(--u));
  transition:
    width 420ms cubic-bezier(0.22, 0.8, 0.24, 1),
    padding 420ms cubic-bezier(0.22, 0.8, 0.24, 1),
    opacity 200ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.ar-qcard .lp-qcard__body,
.ar-qcard:hover .lp-qcard__body {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
}

/* 899:13403 / 899:13409 — the opened plate IS the row: 1336 wide, still 337
   tall, the question risen to 69.5 and the answer under it at 196. */
.ar-qcard.is-open {
  width: calc(1336 * var(--u));
  justify-content: flex-start;
  padding-top: calc(41 * var(--u));
}

.ar-qcard.is-open .lp-qcard__body {
  max-height: calc(200 * var(--u));
  margin-top: calc(44 * var(--u));
  opacity: 1;
}

/* The plate that is not open steps aside rather than stacking under. It keeps
   its place in the row — it is collapsed, not removed — so closing brings it
   back to exactly where it stood. */
.ar-qrow.is-open .ar-qcard:not(.is-open) {
  width: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
}

/* Open, both plates set their question and answer on the same 277 axis. */
.ar-qcard.is-open .ar-qcard__trigger,
.ar-qcard.is-open .lp-qcard__body {
  padding-left: calc(271 * var(--u));
  padding-right: calc(80 * var(--u));
}

.ar-qcard.is-open .lp-qcard__title {
  color: var(--lp-ink);
}

/* 899:13408 / 899:13414 · Geist SemiBold 30 / 1 in the accent. */
.ar-qcard .lp-qcard__body p {
  color: var(--lp-accent);
  font-family: var(--font-sans, "Geist", Inter, system-ui, sans-serif);
  font-size: calc(30 * var(--u));
  font-weight: 600;
  line-height: 1;
}

.ar-qcard.lp-qcard--a .lp-qcard__body p { width: calc(750 * var(--u)); }
.ar-qcard.lp-qcard--b .lp-qcard__body p { width: calc(844 * var(--u)); }

/* The decor is drawn against the 660 plate; at 1336 the frame holds it to the
   same two corners rather than letting it drift into the middle. */
.ar-qcard.is-open.lp-qcard--a .lp-qcard__decor--pill { left: auto; right: calc(-99 * var(--u)); }
.ar-qcard.is-open.lp-qcard--a .lp-qcard__decor--ring { left: calc(-74 * var(--u)); }
.ar-qcard.is-open.lp-qcard--b .lp-qcard__decor--pill { left: calc(-112 * var(--u)); }
.ar-qcard.is-open.lp-qcard--b .lp-qcard__decor--ring { left: auto; right: calc(-70 * var(--u)); }

/* ══ 3 · MODEL ECOSYSTEM — 894:13196 / 892:12852 ══════════════════════════ */

.ar-models {
  padding: calc(76 * var(--u)) calc(80 * var(--u)) calc(112 * var(--u));
}

/* This frame exports each mark at its own tight bounding box, not padded to
   the square its tile draws — a stretched fill would widen Grok and squash
   DeepSeek. The mark is held at its own proportions inside the tile instead. */
.ar-models .lp-constel__tile {
  align-items: center;
  justify-content: center;
}

.ar-models .lp-constel__tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ar-composer .oc-studio-chip__icon {
  object-fit: contain;
}

.ar-models .lp-models__title {
  margin-bottom: calc(76 * var(--u));
}

/* ══ 4 · THE DIVIDER — 892:12919 ══════════════════════════════════════════
   Full-bleed, 118 tall, and — unlike the Homepage band — with no Figure
   caption and an ember glow raked along its floor. */

/* Full-bleed at the frame's width, so it carries the frame's unit: the crop
   the painting ships at IS the drawn crop, and it scales as one piece. */
.ar-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: calc(118 * var(--au));
  padding: 0 calc(80 * var(--au)) calc(13 * var(--au));
  overflow: clip;
}

/* The asset is already cropped to 1726 × 118 — it fills, never re-crops. */
.ar-band__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

/* rgba(0,0,0,.2) over the painting, and the ember raked up off the floor. */
.ar-band__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 calc(-29 * var(--au)) calc(53.8 * var(--au)) calc(-27 * var(--au))
    rgba(240, 88, 34, 0.31);
}

/* 892:12922 · Safiro SemiBold 32 / 44 · tracking -1.5 · white */
.ar-band__text {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  color: #fff;
  font-family: var(--lp-display);
  font-size: calc(32 * var(--au));
  font-weight: 600;
  line-height: calc(44 * var(--au));
  letter-spacing: calc(-1.5 * var(--au));
}

/* ══ 5 · THE CLOSE — 899:13327 ════════════════════════════════════════════ */

.ar-cta {
  padding: calc(80 * var(--u));
  background: var(--lp-canvas);
}

/* 899:13328 · Safiro Bold 40 / 55 */
.ar-cta .lp-cta__title {
  margin-bottom: calc(38 * var(--u));
}

/* 899:13329 · the group is drawn on this plate, so it keeps the frame's
   white veil, hairline and lift rather than the Homepage's transparent CTA. */
.ar-composer {
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid #fff;
  box-shadow: 0 calc(18 * var(--u)) calc(37.5 * var(--u)) calc(-19 * var(--u))
    rgba(0, 0, 0, 0.25);
}

.ar-composer__host {
  width: 100%;
}

/* 899:13331 · the drawn chatbox is the canonical Composer. Its surface,
   hairline and every other measure are UI kit §4 (158:948), stated once in
   components/chat/composer.css — the white fill and 2px stroke that stood
   here were this page redrawing a component it does not own. */

.ar-composer .lp-composer__chips-label {
  color: var(--lp-ink);
}

/* ══ Reduced motion ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ar-qcard,
  .ar-qcard .lp-qcard__body,
  .ar-topnav__link {
    transition: none !important;
  }
}

/* ══ Below the frame ══════════════════════════════════════════════════════
   The hero scales as one piece down to 1024, where the split stops being a
   split: the type takes the column and the panel becomes a band under it, at
   a height that keeps the sculpture's impact. Everything else on the page is
   a landing.css component and keeps that sheet's own re-flow. */

@media (max-width: 1023px) {

  .ar-topnav {
    padding: 20px 24px 0;
  }

  .ar-hero {
    flex-direction: column;
    height: auto;
  }

  /* Stacked, the halves are rows: the shares that split the width across must
     be released, or flex-basis starts sizing their HEIGHT. */
  .ar-hero__text,
  .ar-hero__panel {
    flex: 0 0 auto;
    width: 100%;
  }

  .ar-hero__text {
    padding: 40px 24px 36px;
  }

  .ar-hero__column {
    width: 100%;
  }

  .ar-hero__display {
    grid-template-columns: 1fr;
  }

  .ar-hero__meet {
    width: 100%;
    font-size: clamp(44px, 11.2vw, 108px);
  }

  .ar-hero__maestro {
    width: 100%;
    margin-top: calc(2.22 * clamp(44px, 11.2vw, 108px));
    font-size: clamp(58px, 14.9vw, 144px);
  }

  .ar-hero__note {
    margin-top: 40px;
    padding: 0;
  }

  .ar-hero__rule {
    width: 45px;
    height: 3px;
  }

  .ar-hero__copy {
    width: 100%;
    max-width: 640px;
    margin-top: 24px;
    font-size: clamp(17px, 2.6vw, 26px);
    line-height: 1.18;
    letter-spacing: -0.4px;
  }

  .ar-hero__panel {
    width: 100%;
    height: clamp(360px, 62vw, 560px);
  }

  /* One column turns the panel from a tall half into a wide band. The plate
     still covers — the crop moves, the sculpture's proportions never do. */
  .ar-hero__plate {
    background-position: center 24%;
  }

  /* The tear keeps cutting the panel; on one column it cuts down its left. */
  .ar-hero__edge {
    left: -7vw;
    top: -6%;
    width: 16vw;
    height: 112%;
  }

  /* Plates — one column, both answers standing open, no geometry to change. */
  .ar-plates {
    padding: 44px 20px 0;
  }

  /* Under 1024 the 1336 row cannot exist, so side-by-side becomes one column
     and the horizontal swap has nothing to swap: each plate opens in place,
     both may stand open, and neither has to step aside for the other. */
  .ar-qrow,
  .ar-qrow.is-open {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    height: auto;
  }

  .ar-qcard,
  .ar-qcard.lp-qcard--b,
  .ar-qcard.is-open,
  .ar-qrow.is-open .ar-qcard:not(.is-open) {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 32px 0;
    border-width: 4px;
    border-radius: 34px;
    opacity: 1;
    pointer-events: auto;
  }

  .ar-qcard .lp-qcard__title,
  .ar-qcard.lp-qcard--b .lp-qcard__title {
    padding: 0;
    font-size: clamp(26px, 4.2vw, 40px);
    white-space: normal;
  }

  .ar-qcard__trigger,
  .lp-qcard--b .ar-qcard__trigger,
  .ar-qcard.is-open .ar-qcard__trigger,
  .ar-qcard .lp-qcard__body,
  .ar-qcard.lp-qcard--b .lp-qcard__body,
  .ar-qcard.is-open .lp-qcard__body {
    padding: 0 28px;
  }

  .ar-qcard.is-open .lp-qcard__body {
    max-height: 420px;
    margin-top: 16px;
  }

  .ar-qcard .lp-qcard__body p,
  .ar-qcard.lp-qcard--a .lp-qcard__body p,
  .ar-qcard.lp-qcard--b .lp-qcard__body p {
    width: 100%;
    font-size: clamp(16px, 2.3vw, 22px);
    line-height: 1.35;
  }

  .ar-qcard .lp-qcard__decor--pill {
    width: 240px;
    height: 130px;
    border-width: 10px;
  }

  .ar-qcard .lp-qcard__decor--ring {
    width: 240px;
    height: 240px;
    border-width: 8px;
  }

  .ar-qcard.lp-qcard--a .lp-qcard__decor--pill,
  .ar-qcard.is-open.lp-qcard--a .lp-qcard__decor--pill { left: auto; right: -70px; top: auto; bottom: -56px; }
  .ar-qcard.lp-qcard--a .lp-qcard__decor--ring,
  .ar-qcard.is-open.lp-qcard--a .lp-qcard__decor--ring { left: -112px; right: auto; top: -128px; }
  .ar-qcard.lp-qcard--b .lp-qcard__decor--pill,
  .ar-qcard.is-open.lp-qcard--b .lp-qcard__decor--pill { left: -108px; right: auto; top: -84px; }
  .ar-qcard.lp-qcard--b .lp-qcard__decor--ring,
  .ar-qcard.is-open.lp-qcard--b .lp-qcard__decor--ring { left: auto; right: -104px; top: auto; bottom: -120px; }

  /* Ecosystem — the constellation is a fixed composition; it scales whole. */
  .ar-models {
    padding: 44px 20px 40px;
  }

  .ar-models .lp-models__title {
    width: 100%;
    max-width: 620px;
    margin-bottom: 24px;
    font-size: clamp(28px, 4.4vw, 42px);
    line-height: 1.18;
    letter-spacing: -0.8px;
  }

  .ar-models .lp-constel-wrap {
    position: relative;
    width: 100%;
    height: calc(511.53px * var(--lp-constel-scale, 0.62));
  }

  .ar-models .lp-constel {
    position: absolute;
    left: 50%;
    top: 0;
    width: 712px;
    height: 511.53px;
    margin-left: -356px;
    transform: scale(var(--lp-constel-scale, 0.62));
    transform-origin: top center;
  }

  /* Divider — the band keeps its painting; only the line stops shrinking. */
  .ar-band {
    height: 104px;
    padding: 0 24px 12px;
  }

  .ar-band__text {
    font-size: clamp(15px, 2.3vw, 24px);
    line-height: 1.36;
    letter-spacing: -0.4px;
  }

  .ar-band__scrim {
    box-shadow: inset 0 -24px 44px -22px rgba(240, 88, 34, 0.31);
  }

  /* The close — the composer keeps its usable width, not its drawn one. */
  .ar-cta {
    padding: 44px 20px 56px;
  }

  .ar-cta .lp-cta__title {
    width: 100%;
    max-width: 640px;
    margin-bottom: 26px;
    font-size: clamp(24px, 3.6vw, 36px);
    line-height: 1.34;
  }

  .ar-composer {
    width: 100%;
    max-width: 640px;
    border-radius: 18px;
  }

  .ar-composer .lp-composer__chips {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 0 16px;
  }

  .ar-composer .lp-composer__chips-label {
    font-size: 15px;
  }

  .ar-composer .oc-studio-chips {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 599px) {
  .ar-topnav {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 0;
  }

  .ar-topnav__nav {
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .ar-hero__text {
    padding: 28px 20px 30px;
  }

  .ar-hero__panel {
    height: clamp(320px, 92vw, 420px);
  }

  .ar-hero__edge {
    left: -9vw;
    width: 22vw;
  }

  .ar-qcard,
  .ar-qcard.lp-qcard--b,
  .ar-qcard.is-open {
    padding: 26px 0;
    border-radius: 28px;
  }

  .ar-qcard__trigger,
  .lp-qcard--b .ar-qcard__trigger,
  .ar-qcard .lp-qcard__body,
  .ar-qcard.lp-qcard--b .lp-qcard__body {
    padding: 0 22px;
  }

  .ar-models .lp-constel-wrap {
    height: calc(511.53px * var(--lp-constel-scale, 0.44));
  }

  .ar-models .lp-constel {
    transform: scale(var(--lp-constel-scale, 0.44));
  }

  .ar-band {
    height: 92px;
    padding: 0 18px 10px;
  }
}