/* =========================================================
   ASK NEXUS — DEMO PRESENTATION SHELL

   IMPORTANT:
   - Xpra/application viewport remains EXACTLY 402 × 874.
   - No scale / zoom.
   - Xpra iframe geometry is unchanged.
   - All guide elements are absolute siblings of the phone.
   ========================================================= */

@font-face {
  font-family: "Neue Haas Display";
  src: url("/demo/fonts/NeueHaasDisplayRoman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Display";
  src: url("/demo/fonts/NeueHaasDisplayMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --shell-font: "Neue Haas Display", "Helvetica Neue", Arial, sans-serif;

  --phone-width: 402px;
  --phone-height: 874px;
  --phone-half-width: 201px;
  --phone-half-height: 437px;
  --phone-frame: 11px;
  --phone-outer-half-width: 212px;
  --phone-outer-half-height: 448px;

  --guide-gap: clamp(24px, 3vw, 54px);
  --guide-width: clamp(
    170px,
    calc((100vw - 424px) / 2 - var(--guide-gap) - 26px),
    310px
  );

  --text-main: #f2eee8;
  --text-muted: rgba(214, 207, 198, 0.67);
  --text-soft: rgba(236, 230, 222, 0.88);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 100%;
  min-height: 100%;
}

html {
  background: #020202;
}

body {
  margin: 0;
  overflow-x: hidden;

  background:
    radial-gradient(
      ellipse 95% 80% at 50% 50%,
      #0a0908 0%,
      #070706 45%,
      #040404 72%,
      #020202 100%
    );

  color: var(--text-main);
  font-family: var(--shell-font);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      120% 120% at 50% 50%,
      rgba(0, 0, 0, 0) 52%,
      rgba(0, 0, 0, 0.22) 78%,
      rgba(0, 0, 0, 0.42) 100%
    );
}

/* ---------------------------------------------------------
   The phone remains the only in-flow child.
   All presentation copy is absolute and cannot move it.
   --------------------------------------------------------- */

.demo-page {
  position: relative;
  z-index: 1;
  isolation: isolate;

  min-height: 100vh;

  display: grid;
  place-items: center;

  padding: 24px;
}

/* Local warm light, centered on the phone itself. */
.demo-page::before {
  content: "";

  position: absolute;
  left: 50%;
  top: 50%;

  width: 720px;
  height: 980px;

  transform: translate(-50%, -50%);

  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 40% 38% at 50% 47%,
      rgba(224, 82, 17, 0.34) 0%,
      rgba(184, 55, 8, 0.27) 24%,
      rgba(116, 31, 4, 0.16) 48%,
      rgba(48, 15, 5, 0.07) 66%,
      rgba(0, 0, 0, 0) 78%
    ),
    radial-gradient(
      ellipse 68% 65% at 50% 50%,
      rgba(126, 39, 8, 0.20) 0%,
      rgba(77, 24, 7, 0.13) 42%,
      rgba(25, 10, 7, 0.05) 67%,
      rgba(0, 0, 0, 0) 82%
    );
}

/* ---------------------------------------------------------
   Visible aperture — UNCHANGED geometry.
   --------------------------------------------------------- */

.phone-viewport {
  position: relative;
  z-index: 1;
  isolation: isolate;

  width: 402px;
  height: 874px;

  overflow: hidden;
  background: #000;

  border-radius: 47px;

  box-shadow:
    0 0 0 2px #11100e,
    0 0 0 4px #8f8370,
    0 0 0 6px #c9b99b,
    0 0 0 8px #e0d3b8,
    0 0 0 10px #988a72,
    0 0 0 11px rgba(255, 255, 255, 0.16),
    0 30px 76px rgba(0, 0, 0, 0.58),
    0 10px 26px rgba(0, 0, 0, 0.34);
}

/* ---------------------------------------------------------
   Xpra — UNCHANGED geometry.
   --------------------------------------------------------- */

.xpra-frame {
  position: absolute;

  left: 0;
  top: 0;

  width: 1600px;
  height: 2000px;

  border: 0;

  transform: none;
  transform-origin: 0 0;
}

/* ---------------------------------------------------------
   Loading overlay.
   --------------------------------------------------------- */

.loading {
  position: absolute;
  inset: 0;

  z-index: 20;

  display: grid;
  place-items: center;

  padding: 24px;

  color: #aaa;
  background: #111;

  font-family: var(--shell-font);
  font-size: 14px;
  text-align: center;

  pointer-events: none;
}

.loading.hidden {
  display: none;
}

.loading.retryable {
  pointer-events: auto;
}

.loading.retryable button {
  position: relative;
  z-index: 30;
  pointer-events: auto;
}

/* =========================================================
   PRESENTATION COPY

   Every coordinate below is calculated from the fixed
   402×874 phone + 11px decorative frame.
   It is NOT anchored to browser edges.
   ========================================================= */

.demo-intro {
  position: absolute;
  z-index: 4;

  left: 50%;
  top: calc(50% - var(--phone-outer-half-height) - 54px);

  width: min(720px, calc(100vw - 40px));

  transform: translate(-50%, -50%);
  text-align: center;

  pointer-events: none;
}

.demo-intro p {
  margin: 0;

  color: rgba(244, 239, 232, 0.88);

  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.demo-explore {
  position: absolute;
  z-index: 4;

  left: 50%;
  top: calc(50% + var(--phone-outer-half-height) + 47px);

  width: min(620px, calc(100vw - 40px));

  transform: translate(-50%, -50%);
  text-align: center;

  color: rgba(214, 207, 198, 0.63);

  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.015em;

  pointer-events: none;

  transition: color 320ms ease, opacity 320ms ease;
}

/* ---------------------------------------------------------
   Side guides.

   Right edge of left guide:
   center - 201px viewport - 11px frame - gap

   Left edge of right guide:
   center + 201px viewport + 11px frame + gap
   --------------------------------------------------------- */

.guide-panel {
  position: absolute;
  z-index: 4;

  top: 50%;
  width: var(--guide-width);

  color: var(--text-main);
  font-family: var(--shell-font);

  pointer-events: none;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 300ms ease,
    transform 420ms cubic-bezier(.22, .8, .24, 1),
    visibility 300ms;
}

.guide-panel--left {
  right: calc(50% + var(--phone-outer-half-width) + var(--guide-gap));
  text-align: right;
  transform: translateY(-50%) translateX(-10px);
}

.guide-panel--right {
  left: calc(50% + var(--phone-outer-half-width) + var(--guide-gap));
  text-align: left;
  transform: translateY(-50%) translateX(10px);
}

.guide-panel.is-visible {
  opacity: 1;
  visibility: visible;
}

.guide-panel--left.is-visible,
.guide-panel--right.is-visible {
  transform: translateY(-50%) translateX(0);
}

.guide-kicker {
  margin: 0 0 10px;

  color: var(--guide-accent, #b77a55);

  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.guide-title {
  margin: 0;

  color: #f3eee7;

  font-size: clamp(25px, 2vw, 34px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.guide-lead {
  margin: 13px 0 0;

  color: var(--text-muted);

  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

.guide-steps {
  margin-top: 22px;
  display: grid;
  gap: 12px;
}

.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  color: var(--text-soft);

  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.guide-panel--left .guide-step {
  flex-direction: row-reverse;
}

.guide-step__index {
  flex: 0 0 auto;
  min-width: 20px;
  padding-top: 2px;

  color: var(--guide-accent, #b77a55);

  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.guide-step__text {
  max-width: 270px;
}

/* Less room horizontally: guides remain frame-anchored,
   only their usable width and gap contract. */
@media (max-width: 1120px) {
  :root {
    --guide-gap: 24px;
  }

  .guide-title {
    font-size: 25px;
  }

  .guide-lead,
  .guide-step {
    font-size: 12px;
  }
}

/* At this point there is physically not enough space for
   two side panels while preserving a 1:1 402px phone.
   We hide only presentation guides; Xpra is untouched. */
@media (max-width: 860px) {
  .guide-panel {
    display: none;
  }
}


/* =========================================================
   GUIDE v3 — fixed offsets from the 402×874 phone frame

   Append this AFTER the existing guide styles in demo.css.
   It intentionally removes viewport-dependent clamp/vw layout.
   ========================================================= */

@font-face {
  font-family: "Neue Haas Display";
  src: url("/demo/fonts/NeueHaasDisplayRoman.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Display";
  src: url("/demo/fonts/NeueHaasDisplayMedium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

.demo-intro,
.demo-explore,
.guide-panel {
  font-family: "Neue Haas Display", Arial, sans-serif;
}

/*
 * Fixed phone geometry:
 * viewport 402×874
 * decorative frame ≈ 11px each side
 * outer half-width  = 201 + 11 = 212px
 * outer half-height = 437 + 11 = 448px
 */

.demo-intro {
  left: 50%;
  top: calc(50% - 448px - 38px);
  width: 620px;
  transform: translateX(-50%);
}

.demo-intro p {
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.19em;
}

.demo-explore {
  left: 50%;
  top: calc(50% + 448px + 30px);
  width: 620px;
  transform: translateX(-50%);
  font-size: 13px;
}

.guide-panel {
  top: 50%;
  width: 280px;
}

.guide-panel--left {
  right: calc(50% + 212px + 48px);
  transform: translateY(-50%) translateX(-10px);
}

.guide-panel--right {
  left: calc(50% + 212px + 48px);
  transform: translateY(-50%) translateX(10px);
}

.guide-panel--left.is-visible,
.guide-panel--right.is-visible {
  transform: translateY(-50%) translateX(0);
}

.guide-title {
  font-size: 30px;
}

.guide-lead,
.guide-step {
  font-size: 13px;
}

/*
 * 2 × 280px guides + 2 × 48px gaps + 424px outer phone = 1080px.
 * Give it a little breathing room; below this, hide guides only.
 */
@media (max-width: 1160px) {
  .guide-panel {
    display: none;
  }
}

/* =========================================================
   GUIDE v5 — contextual hidden-action annotations

   Append to the END of demo.css.
   Phone/Xpra geometry is untouched.
   ========================================================= */

/* Match the typography of the application itself.
   Copy these files from smart-home-design/public/fonts/
   into /var/www/ask-archi/demo/fonts/ if they are not there yet. */
@font-face {
  font-family: "Aventa Demo";
  src: url("/demo/fonts/Aventa-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aventa Demo";
  src: url("/demo/fonts/Aventa-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Orlean Demo";
  src: url("/demo/fonts/Orlean-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --guide-ui: "Aventa Demo", "Neue Haas Display", "Helvetica Neue", Arial, sans-serif;
  --guide-display: "Orlean Demo", "Aventa Demo", "Neue Haas Display", "Helvetica Neue", Arial, sans-serif;
  --guide-frame-gap: 42px;
  --guide-panel-width: 248px;
}

/* --- Main presentation copy: fixed to the PHONE, never viewport edges. --- */
.demo-intro {
  left: 50%;
  top: calc(50% - 448px - 35px);
  width: 720px;
  transform: translate(-50%, -50%);
  font-family: var(--guide-display);
}

.demo-intro p {
  margin: 0;
  color: rgba(244, 239, 232, .90);
  font-family: var(--guide-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: none;
}

/* Replace the generic all-caps slogan visually without changing HTML. */
.demo-intro p {
  font-size: 0;
}
.demo-intro p::after {
  content: "One home. Every system. Quietly connected.";
  font-size: 19px;
}

.demo-explore {
  left: 50%;
  top: calc(50% + 448px + 31px);
  width: 620px;
  transform: translate(-50%, -50%);
  color: rgba(210, 204, 196, .60);
  font-family: var(--guide-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .02em;
}

/* --- Contextual annotations. --- */
.guide-panel {
  display: block;
  top: calc(50% - 437px + var(--guide-anchor-y, 300px));
  width: var(--guide-panel-width);
  color: #f2eee8;
  font-family: var(--guide-ui);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 240ms ease,
    transform 360ms cubic-bezier(.22,.8,.24,1),
    visibility 240ms;
}

.guide-panel--left {
  right: calc(50% + 212px + var(--guide-frame-gap));
  text-align: right;
  transform: translateY(-19px) translateX(-8px);
}

.guide-panel--right {
  left: calc(50% + 212px + var(--guide-frame-gap));
  text-align: left;
  transform: translateY(-19px) translateX(8px);
}

.guide-panel.is-visible {
  opacity: 1;
  visibility: visible;
}

.guide-panel--left.is-visible,
.guide-panel--right.is-visible {
  transform: translateY(-19px) translateX(0);
}

/* Fine leader line: attention cue, not a decorative card. */
.guide-panel::after {
  content: "";
  position: absolute;
  top: 18px;
  width: calc(var(--guide-frame-gap) - 10px);
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--guide-accent, #b77a55) 16%, transparent),
    color-mix(in srgb, var(--guide-accent, #b77a55) 78%, transparent)
  );
  opacity: .9;
}

.guide-panel::before {
  content: "";
  position: absolute;
  top: 15.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--guide-accent, #b77a55);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--guide-accent, #b77a55) 10%, transparent);
}

.guide-panel--left::after {
  right: calc(-1 * var(--guide-frame-gap) + 5px);
}
.guide-panel--left::before {
  right: calc(-1 * var(--guide-frame-gap) + 2px);
}

.guide-panel--right::after {
  left: calc(-1 * var(--guide-frame-gap) + 5px);
  transform: scaleX(-1);
}
.guide-panel--right::before {
  left: calc(-1 * var(--guide-frame-gap) + 2px);
}

.guide-kicker {
  margin: 0 0 8px;
  color: var(--guide-accent, #b77a55);
  font-family: var(--guide-ui);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.guide-title {
  margin: 0;
  color: #f4f0ea;
  font-family: var(--guide-display);
  font-size: 25px;
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
}

.guide-lead {
  max-width: 230px;
  margin: 10px 0 0;
  color: rgba(211, 204, 196, .66);
  font-family: var(--guide-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.48;
}

.guide-panel--left .guide-lead {
  margin-left: auto;
}

.guide-steps {
  margin-top: 12px;
  display: block;
}

/* v5 JS emits only genuinely useful secondary-layer notes. */
.guide-note {
  color: rgba(242, 237, 230, .90);
  font-family: var(--guide-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .015em;
}

.guide-note::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 7px 2px 0;
  border-radius: 50%;
  background: var(--guide-accent, #b77a55);
}

.guide-panel--left .guide-note::before {
  display: none;
}
.guide-panel--left .guide-note::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 0 2px 7px;
  border-radius: 50%;
  background: var(--guide-accent, #b77a55);
}

/* Neutralize old numbered-step styling if it remains earlier in demo.css. */
.guide-step,
.guide-step__index,
.guide-step__text {
  all: unset;
}

/* The fixed 402px phone remains 1:1. Guides disappear only when there is
   physically no room for them; we never shrink or move the phone. */
@media (min-width: 980px) {
  .guide-panel { display: block; }
}

@media (max-width: 1150px) and (min-width: 980px) {
  :root {
    --guide-frame-gap: 28px;
    --guide-panel-width: 220px;
  }

  .guide-title { font-size: 22px; }
  .guide-lead { font-size: 11px; }
}

@media (max-width: 979px) {
  .guide-panel { display: none !important; }
}

/* =========================================================
   GUIDE v6 — typography + hierarchy + persistent system feedback

   Append AFTER the v5 patch. It intentionally overrides v5.
   Phone/Xpra geometry remains untouched.
   ========================================================= */

:root {
  --guide-frame-gap: 46px;
  --guide-panel-width: 276px;

  /* Light-on-dark hierarchy: deliberately not pure white. */
  --guide-text-strong: rgba(238, 232, 223, .84);
  --guide-text-body: rgba(218, 211, 202, .66);
  --guide-text-soft: rgba(205, 198, 190, .52);
}

/* ---------------------------------------------------------
   TOP SLOGAN
   All caps are reserved for this short display line only.
   --------------------------------------------------------- */

.demo-intro {
  top: calc(50% - 448px - 38px);
  width: 780px;
  font-family: var(--guide-ui);
}

.demo-intro p {
  margin: 0;
  color: var(--guide-text-strong);
  font-family: var(--guide-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .20em;
  text-transform: uppercase;

  text-shadow:
    0 1px 0 rgba(255,255,255,.055),
    0 8px 22px rgba(0,0,0,.74),
    0 0 28px rgba(166,92,47,.11);
}



/* ---------------------------------------------------------
   SIDE ANNOTATIONS
   Larger type, lower luminance, same Aventa/Orlean system
   as the app.
   --------------------------------------------------------- */

.guide-panel {
  width: var(--guide-panel-width);
  color: var(--guide-text-strong);
}

.guide-panel--left {
  right: calc(50% + 212px + var(--guide-frame-gap));
}

.guide-panel--right {
  left: calc(50% + 212px + var(--guide-frame-gap));
}

.guide-kicker {
  margin-bottom: 10px;

  /* Accent remains semantic, but is softened for dark-mode use. */
  color: color-mix(
    in srgb,
    var(--guide-accent, #b77a55) 78%,
    #d8c9bb
  );

  font-family: var(--guide-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .145em;
  text-transform: uppercase;
}

.guide-title {
  color: var(--guide-text-strong);
  font-family: var(--guide-display);
  font-size: 31px;
  font-weight: 400;
  line-height: 1.01;
  letter-spacing: -.032em;

  text-shadow:
    0 8px 28px rgba(0,0,0,.42);
}

.guide-lead {
  max-width: 268px;
  margin-top: 13px;

  color: var(--guide-text-body);
  font-family: var(--guide-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.52;
  letter-spacing: -.005em;
}

.guide-steps {
  margin-top: 14px;
}

.guide-note {
  color: rgba(226, 219, 210, .72);
  font-family: var(--guide-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .005em;
}

/* Keep the leader as a cue, not as a glowing decoration. */
.guide-panel::after {
  opacity: .62;
}

.guide-panel::before {
  opacity: .86;
  box-shadow:
    0 0 0 4px color-mix(
      in srgb,
      var(--guide-accent, #b77a55) 7%,
      transparent
    );
}


/* ---------------------------------------------------------
   BOTTOM BRAND CTA
   Fixed relative to the phone, not the viewport edge.
   --------------------------------------------------------- */

.demo-explore {
  top: calc(50% + 448px + 29px);
  width: 760px;

  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 18px;

  color: var(--guide-text-soft);
  font-family: var(--guide-ui);
  line-height: 1;
  letter-spacing: 0;

  pointer-events: auto;
}

.demo-cta__slogan {
  color: rgba(224, 216, 206, .64);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .135em;
  text-transform: uppercase;
}

.demo-cta__links {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.demo-cta__link {
  position: relative;

  color: rgba(231, 224, 215, .78);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .10em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.demo-cta__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;

  background: currentColor;

  transform: scaleX(.28);
  transform-origin: left;
  opacity: .35;

  transition:
    transform 220ms ease,
    opacity 220ms ease;
}

.demo-cta__link:hover,
.demo-cta__link:focus-visible {
  color: rgba(242, 235, 226, .94);
}

.demo-cta__link:hover::after,
.demo-cta__link:focus-visible::after {
  transform: scaleX(1);
  opacity: .72;
}

.demo-cta__link:focus-visible {
  outline: 1px solid rgba(226, 215, 204, .42);
  outline-offset: 7px;
  border-radius: 2px;
}

.demo-cta__sep {
  color: rgba(210, 202, 192, .28);
}


/* ---------------------------------------------------------
   FIT — the phone never scales or moves.
   Only the annotation typography tightens if side room shrinks.
   --------------------------------------------------------- */

@media (max-width: 1180px) and (min-width: 980px) {
  :root {
    --guide-frame-gap: 30px;
    --guide-panel-width: 232px;
  }

  .guide-title {
    font-size: 27px;
  }

  .guide-lead {
    max-width: 224px;
    font-size: 14px;
  }

  .guide-note {
    font-size: 13px;
  }
}

@media (max-width: 979px) {
  .guide-panel {
    display: none !important;
  }

  .demo-explore {
    width: min(720px, calc(100vw - 36px));
    gap: 12px;
  }
}

/* =========================================================
   GUIDE v6.2 — open typography + semantic ambient glow
   Append AFTER v6.1.

   Presentation layer only.
   Does NOT modify phoneViewport dimensions, position, frame,
   Xpra iframe geometry or pointer mapping.
   ========================================================= */

/* Neue Haas is used only for small/medium presentation copy.
   Copy the user's existing files into /demo/fonts/. */
@font-face {
  font-family: "Neue Haas Guide";
  src: url("/demo/fonts/NeueHaasDisplayRoman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Guide";
  src: url("/demo/fonts/NeueHaasDisplayMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --guide-frame-gap: 50px;
  --guide-panel-width: 318px;
}

/* ---------------------------------------------------------
   SECONDARY COPY
   Keep the main Orlean action title unchanged.
   The dense small copy moves to Neue Haas and grows ~30%.
   --------------------------------------------------------- */

.guide-title {
  font-size: 31px;
}

/* DIRECT CONTROL / HOLD / OR TAP remains a compact UI label. */
.guide-kicker {
  font-size: 13px;
}

/* 17px -> 22px: ~29% increase */
.guide-lead {
  max-width: 310px;
  margin-top: 16px;

  font-family:
    "Neue Haas Guide",
    "Neue Haas Display",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 22px;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: .008em;

  color: rgba(222, 215, 206, .74);
}

/* 16px -> 21px: ~31% increase */
.guide-note {
  margin-top: 6px;

  font-family:
    "Neue Haas Guide",
    "Neue Haas Display",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 21px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;

  color: rgba(230, 222, 212, .78);
}

.guide-steps {
  margin-top: 18px;
}


/* ---------------------------------------------------------
   SYSTEM-COLOR AMBIENT LIGHT
   We do NOT alter .phone-viewport box-shadow because that
   shadow also contains the approved titanium frame rings.

   This is a separate pseudo-element BEHIND the phone.
   --------------------------------------------------------- */

.demo-page {
  --system-accent: #b68a62;
}

/* Existing warm background remains in ::before.
   ::after is reserved for the active system's ambient bounce. */
.demo-page::after {
  content: "";

  position: absolute;
  z-index: 0;

  left: 50%;
  top: calc(50% + 300px);

  width: 540px;
  height: 310px;

  transform: translate(-50%, -50%);

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 50% 54%,
      color-mix(in srgb, var(--system-accent) 30%, transparent) 0%,
      color-mix(in srgb, var(--system-accent) 16%, transparent) 32%,
      color-mix(in srgb, var(--system-accent) 7%, transparent) 52%,
      transparent 74%
    );

  filter: blur(18px);

  opacity: .18;

  transition:
    opacity 420ms ease,
    filter 420ms ease;
}

.demo-page.has-system-accent::after {
  opacity: .78;
  filter: blur(22px);
}

/* Keep the actual phone and guides above both background layers. */
.phone-viewport {
  z-index: 2;
}

.demo-intro,
.demo-explore,
.guide-panel {
  z-index: 4;
}


/* ---------------------------------------------------------
   MICRO-GLOW AT THE ANNOTATION, NOT A NEON PARAGRAPH.
   --------------------------------------------------------- */

.guide-kicker {
  text-shadow:
    0 0 16px color-mix(
      in srgb,
      var(--guide-accent, #b77a55) 22%,
      transparent
    );
}

.guide-panel::before {
  box-shadow:
    0 0 0 4px color-mix(
      in srgb,
      var(--guide-accent, #b77a55) 8%,
      transparent
    ),
    0 0 18px color-mix(
      in srgb,
      var(--guide-accent, #b77a55) 24%,
      transparent
    );
}


/* ---------------------------------------------------------
   MEDIUM DESKTOPS
   Phone remains 1:1. Only annotations tighten.
   --------------------------------------------------------- */

@media (max-width: 1260px) and (min-width: 1080px) {
  :root {
    --guide-frame-gap: 34px;
    --guide-panel-width: 270px;
  }

  .guide-lead {
    max-width: 264px;
    font-size: 19px;
  }

  .guide-note {
    font-size: 18px;
  }
}

@media (max-width: 1079px) and (min-width: 980px) {
  :root {
    --guide-frame-gap: 24px;
    --guide-panel-width: 236px;
  }

  .guide-title {
    font-size: 27px;
  }

  .guide-lead {
    max-width: 230px;
    font-size: 17px;
  }

  .guide-note {
    font-size: 17px;
  }
}


/* FINAL — remove obsolete v6 slogan duplicate */
.demo-intro p::after {
  content: none !important;
  display: none !important;
}