.clear-installer-notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
  width: min(680px, 92vw);
  margin-top: 14px;
  padding: clamp(14px, 1.7vw, 22px);
  border: 1px solid var(--field-border, rgba(152, 112, 49, 0.45));
  border-radius: 16px;
  background: var(--composer-bg, rgba(249, 246, 237, 0.94));
  color: var(--composer-ink, #27333a);
  box-shadow: 0 18px 54px var(--composer-shadow, rgba(76, 54, 24, 0.25)),
    inset 0 1px 0 var(--field-lift, rgba(255, 255, 255, 0.74));
  backdrop-filter: blur(18px) saturate(1.08);
}

/* Public acquisition pages retain a governed browser-chrome preview for
   Founder and red-team review. Native actions still fail closed without the
   installed CLEAR bridge. */
body[data-clear-surface="website-launcher"] {
  --clear-titlebar-height: 48px;
  --clear-active-titlebar-height: 48px;
}

.clear-installer-notice__copy {
  display: grid;
  gap: 5px;
  text-align: left;
}

.clear-installer-notice__copy strong {
  font: 600 clamp(13px, 1vw, 16px) / 1.2 var(--clear-ui-font, Arial, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clear-installer-notice__copy span {
  font: 400 clamp(11px, 0.85vw, 14px) / 1.45 var(--clear-ui-font, Arial, sans-serif);
  opacity: 0.82;
}

.clear-installer-notice a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--field-border, rgba(152, 112, 49, 0.45));
  border-radius: 999px;
  color: var(--composer-ink, #27333a);
  background: var(--field-shell, rgba(249, 247, 239, 0.8));
  font: 650 12px / 1 var(--clear-ui-font, Arial, sans-serif);
  letter-spacing: 0.14em;
  text-decoration: none;
  box-shadow: 0 8px 22px var(--field-shadow, rgba(95, 70, 30, 0.18)),
    inset 0 1px 0 var(--field-lift, rgba(255, 255, 255, 0.74));
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.clear-installer-notice a:hover,
.clear-installer-notice a:focus-visible {
  transform: translateY(-1px);
  border-color: var(--field-icon-active, #007e91);
  background: var(--field-hover, rgba(255, 255, 255, 0.42));
}

.clear-acquisition-dialog {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 30px);
  background: rgba(2, 7, 12, 0.76);
  backdrop-filter: blur(12px) saturate(0.82);
  -webkit-backdrop-filter: blur(12px) saturate(0.82);
}

.clear-acquisition-dialog[hidden] {
  display: none;
}

.clear-acquisition-dialog__card {
  position: relative;
  width: min(680px, 100%);
  max-height: min(88vh, 780px);
  overflow: auto;
  padding: clamp(26px, 5vw, 52px);
  border: 1px solid var(--field-border, rgba(152, 112, 49, 0.45));
  border-radius: clamp(18px, 3vw, 30px);
  background: var(--composer-bg, rgba(249, 246, 237, 0.97));
  color: var(--composer-ink, #27333a);
  box-shadow: 0 28px 100px var(--composer-shadow, rgba(0, 0, 0, 0.44)),
    inset 0 1px 0 var(--field-lift, rgba(255, 255, 255, 0.74));
  font: 400 clamp(13px, 1.6vw, 16px) / 1.65 var(--clear-ui-font, Arial, sans-serif);
}

.clear-acquisition-dialog__card h2 {
  max-width: 90%;
  margin: 8px 0 18px;
  color: var(--field-icon-active, #007e91);
  font: 500 clamp(25px, 5vw, 46px) / 1.08 var(--clear-ui-font, Arial, sans-serif);
  letter-spacing: 0.035em;
}

.clear-acquisition-dialog__eyebrow {
  margin: 0;
  color: var(--footer-active, #007e91);
  font: 700 10px / 1.3 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.22em;
}

.clear-acquisition-dialog__x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  color: currentColor;
  background: transparent;
  font: 300 34px / 1 var(--clear-ui-font, Arial, sans-serif);
  cursor: pointer;
}

.clear-acquisition-dialog__x:hover,
.clear-acquisition-dialog__x:focus-visible {
  color: var(--field-icon-active, #007e91);
  outline: 2px solid var(--field-icon-active, #007e91);
  outline-offset: -5px;
}

.clear-acquisition-dialog__policy {
  color: var(--field-icon-active, #007e91);
  font: 700 10px / 1.45 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.16em;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.clear-living-pages-dialog__copy {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.clear-living-pages-dialog__copy p {
  margin: 0;
}

.clear-acquisition-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.clear-acquisition-dialog__actions a,
.clear-acquisition-dialog__actions button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border: 1px solid var(--field-border, rgba(152, 112, 49, 0.45));
  border-radius: 999px;
  color: var(--composer-ink, #27333a);
  background: var(--field-shell, rgba(249, 247, 239, 0.8));
  font: 700 11px / 1 var(--clear-ui-font, Arial, sans-serif);
  letter-spacing: 0.13em;
  text-decoration: none;
  cursor: pointer;
}

.clear-acquisition-dialog__actions a:hover,
.clear-acquisition-dialog__actions a:focus-visible,
.clear-acquisition-dialog__actions button:hover,
.clear-acquisition-dialog__actions button:focus-visible {
  border-color: var(--field-icon-active, #007e91);
  color: var(--field-icon-active, #007e91);
}

body[data-room="lightroom"] .clear-acquisition-dialog__card {
  color: #26343a;
  background: #fffdf6;
}

body[data-room="lightroom"] .clear-acquisition-dialog__eyebrow,
body[data-room="lightroom"] .clear-acquisition-dialog__policy {
  color: #006f81;
}

body[data-room="lightroom"] .clear-acquisition-dialog__actions a,
body[data-room="lightroom"] .clear-acquisition-dialog__actions button {
  border-color: #806333;
  color: #392b18;
  background: #f4efe3;
}

/*
 * HALL acquisition composition.
 *
 * The HALL browser shell itself is native-only. On the public acquisition
 * site we retain the approved artwork and safe floating acquisition controls,
 * but never draw native titlebar chrome. The site has no native authority,
 * CLARITY engine, service worker, or device admission.
 */
body[data-clear-model="lighthall"] .room__scene,
body[data-clear-model="darkhall"] .room__scene {
  width: 100vw;
  height: 100vh;
  background-size: cover;
}

body[data-clear-model="lighthall"] {
  --room-art: url("/continuarium-premier/continuarium-archive-light.png");
}

body[data-clear-model="darkhall"] {
  --room-art: url("/continuarium-premier/continuarium-archive-dark.png");
}

body[data-clear-model="lighthall"] .room__scene::before,
body[data-clear-model="darkhall"] .room__scene::before {
  position: absolute;
  z-index: 2;
  top: 22.5%;
  left: 50%;
  width: min(72vw, 1040px);
  aspect-ratio: 40 / 9;
  content: "";
  background: url("/wordart/clear-approved-title.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 12px var(--room-shadow, rgba(0, 0, 0, 0.42)));
  transform: translateX(-50%);
}

body[data-clear-model="lighthall"] .room__scene::before {
  filter: contrast(1.18) saturate(1.04) brightness(.58)
    drop-shadow(0 1px 0 rgba(255, 248, 220, .38))
    drop-shadow(0 2px 2px rgba(64, 42, 8, .55));
}

body[data-clear-model="darkhall"] .room__scene::before {
  filter: contrast(1.16) saturate(1.08) brightness(1.03)
    drop-shadow(0 2px 3px rgba(0, 0, 0, .72))
    drop-shadow(0 0 8px rgba(231, 198, 110, .16));
}

body[data-clear-model="lighthall"] .room__ethos,
body[data-clear-model="darkhall"] .room__ethos {
  top: 44.5%;
  left: 25%;
  width: 50%;
}

body[data-clear-model="lighthall"] .room__search,
body[data-clear-model="darkhall"] .room__search {
  top: 53.5%;
  left: 50%;
  width: min(58vw, 860px);
  transform: translateX(-50%);
}

body[data-clear-model="lighthall"] .room__tm,
body[data-clear-model="darkhall"] .room__tm {
  display: block;
  top: calc(22.5% + 2px);
  left: calc(50% + min(36vw, 520px) - 8px);
}

@media (max-width: 760px) {
  body[data-clear-model="lighthall"] .room__ethos,
  body[data-clear-model="darkhall"] .room__ethos {
    left: 8%;
    width: 84%;
  }

  body[data-clear-model="lighthall"] .room__search,
  body[data-clear-model="darkhall"] .room__search {
    left: 50%;
    width: 92vw;
  }
}

@media (max-width: 620px), (orientation: portrait) and (max-width: 820px) {
  body[data-clear-model="lighthall"] .room__scene,
  body[data-clear-model="darkhall"] .room__scene {
    /* Both Hall paintings are exactly bilateral around their source center.
       Preserve that 50% axis when the cover crop becomes portrait. */
    background-position: 50% center;
    --clear-mobile-title-top: calc(22.5% + 100px);
  }

  /* Keep the governed word art, subtitle, and search surface on one responsive
     vertical lockup. Moving only the word art allowed the subtitle to collide
     with it on tall, narrow devices. */
  body[data-clear-model="lighthall"] .room__scene::before,
  body[data-clear-model="darkhall"] .room__scene::before {
    /* Read the Hall's own re-anchor above rather than restating its arithmetic.
       Same computed value; one place to change the Hall lockup. */
    top: var(--clear-mobile-title-top);
  }

  body[data-clear-model="lighthall"] .room__ethos,
  body[data-clear-model="darkhall"] .room__ethos {
    top: calc(var(--clear-mobile-title-top) + var(--clear-mobile-title-height) + var(--clear-mobile-subtitle-gap));
  }

  body[data-clear-model="lighthall"] .room__search,
  body[data-clear-model="darkhall"] .room__search {
    top: calc(var(--clear-mobile-title-top) + var(--clear-mobile-title-height) + var(--clear-mobile-search-gap));
  }

  body[data-clear-model="lighthall"] .room__tm,
  body[data-clear-model="darkhall"] .room__tm {
    top: calc(var(--clear-mobile-title-top) + clamp(1px, .4vw, 4px));
    left: calc(50% + min(39vw, 210px) - clamp(4px, 1vw, 9px));
  }
}

@media (max-width: 620px) {
  .clear-installer-notice { grid-template-columns: 1fr; }
  .clear-installer-notice a { width: 100%; }
  .clear-acquisition-dialog__actions { display: grid; grid-template-columns: 1fr; }
}

@media (max-width: 760px), (max-height: 520px) {
  body[data-clear-model="lighthall"] .room__scene,
  body[data-clear-model="darkhall"] .room__scene {
    height: auto;
    min-height: inherit;
  }
}