/* Shared illustrative iPhone casing. The app capture remains uncropped between
   separate system bars; all sizes scale from the screen's own width. */
:where(.device-frame) { position: relative; }
.device-frame {
  padding: 0;
  border: 1px solid #484b4c;
  border-radius: 16% / 7.4%;
  background: #111314;
  box-shadow: 0 0 0 1px #a5a6a0, 0 0 0 3px #343838,
    0 32px 48px -23px rgba(23,39,29,.38), 0 7px 15px -7px rgba(23,39,29,.24);
  isolation: isolate;
}
.device-frame::before, .device-frame::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,#6f7272,#292e2d);
}
.device-frame::before { left: -4px; top: 22%; height: 9%; }
.device-frame::after { right: -4px; top: 25%; height: 11%; }
.device-frame > .device-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 95.8%;
  height: auto;
  margin: 2.1%;
  overflow: hidden;
  border-radius: 14.3% / 6.5%;
  background: #fff8eb;
  container-type: inline-size;
}
.device-frame .device-status {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 15.13cqw;
  padding: 0 7cqw;
  color: #161e1a;
  background: #fff8eb;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
.device-time { font-size: 4.15cqw; font-weight: 600; letter-spacing: -.02em; }
.device-island {
  position: absolute;
  width: 29%;
  height: 8.2cqw;
  left: 50%;
  top: 3.1cqw;
  transform: translateX(-50%);
  border-radius: 8cqw;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.device-reception { display: flex; align-items: center; gap: .45cqw; }
.device-frame .device-status img {
  width: 4.2cqw;
  height: 4.2cqw;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: brightness(0);
}
.device-frame .device-status img:last-child { width: 6.5cqw; }
.device-frame .device-capture {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
  background: #fff8eb;
}
.device-frame .device-home {
  flex: none;
  display: grid;
  place-items: center;
  height: 8.72cqw;
  padding-top: 1cqw;
  background: #fff8eb;
}
.device-home span { width: 34%; height: 1.25cqw; border-radius: 9px; background: #16221b; }

[tabindex="-1"]:focus { outline: none; }

/* Floating details share the soft glass and restrained depth of the devices. */
.chip, .flow-pill {
  border: 1px solid rgba(255,255,255,.8);
  background: linear-gradient(140deg,rgba(255,253,247,.96),rgba(247,242,225,.88));
  box-shadow: inset 0 1px 0 #fff, 0 12px 26px -17px rgba(30,49,38,.32), 0 2px 5px rgba(30,49,38,.05);
  backdrop-filter: blur(18px) saturate(1.15);
}
.chip { border-radius: 22px; gap: 12px; padding: 13px 16px; }
.chip img { width: 32px; height: 32px; padding: 6px; border-radius: 10px; background: rgba(222,233,215,.55); }
.chip small { font-size: 9px; font-weight: 600; letter-spacing: .1em; line-height: 1.45; }
.chip b { display: block; font-size: 14px; line-height: 1.5; }
.chip .live { width: 6px; height: 6px; background: #638165; box-shadow: 0 0 0 3px rgba(99,129,101,.12); }
.flow-pill { padding: 10px 14px; border-radius: 16px; font-size: 10px; letter-spacing: .07em; }
.suite-num {
  top: 18px; left: 20px;
  padding: 6px 10px;
  border-color: rgba(255,255,255,.85);
  border-radius: 12px;
  background: rgba(255,253,247,.8);
  box-shadow: inset 0 1px white, 0 5px 12px -8px rgba(30,49,38,.2);
  font-size: 18px;
}
.step, .live-point, .tile, .suite-card, .feed-card, .price-card, .persona, .business-card {
  border-color: rgba(74,97,78,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 9px 22px -16px rgba(30,49,38,.23);
}
.step-no {
  border: 1px solid rgba(98,130,103,.2);
  border-radius: 18px;
  background: linear-gradient(140deg,#f5f7ef,#dfe8d8);
  box-shadow: inset 0 1px #fff, 0 5px 12px -9px rgba(30,49,38,.22);
}
.step-no img { filter: none; }
.suite-card { border-radius: 28px; }
.suite-shot { background: radial-gradient(ellipse 75% 55% at 50% 100%,rgba(182,205,175,.3),transparent 75%),linear-gradient(160deg,#fcf8ef,#efe8d1); }
.suite-shot::before { opacity: .22; }
.suite-body { padding: 28px; }
.suite-card:hover { transform: translateY(-3px); }
.suite-phone-pair { height: 365px; }
.feed-kicker { border-radius: 12px; }
.feed-shot-label { margin-top: 16px; font-size: 10px; letter-spacing: .1em; }
.mobile-menu summary { list-style: none; display: flex; align-items: center; gap: 8px; border-color: rgba(74,97,78,.22); }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::before { content: ""; width: 12px; height: 8px; border-top: 1.5px solid; border-bottom: 1.5px solid; }
.mobile-menu[open] summary::before { height: 0; border-bottom: 0; }
.mobile-menu nav { border-radius: 20px; padding: 8px; box-shadow: 0 18px 36px -20px rgba(23,39,29,.35), inset 0 1px white; }
.btn-primary, .button:not(.secondary) { box-shadow: inset 0 1px rgba(255,255,255,.3), 0 9px 20px -13px rgba(23,39,29,.5); }
.btn-ghost, .button.secondary { box-shadow: inset 0 1px #fff, 0 5px 12px -10px rgba(23,39,29,.15); }

/* The support guide uses the same devices, with quiet presentation surfaces. */
.support-device { width: min(100%, 286px); margin-inline: auto; }
.hero-art { padding: 22px; border-radius: 32px; border-color: rgba(255,255,255,.8); background: linear-gradient(150deg,rgba(253,249,238,.88),rgba(227,236,216,.62)); box-shadow: inset 0 1px white, 0 22px 44px -32px rgba(23,39,29,.3); }
.shot-card { padding: 28px 24px 20px; border-radius: 28px; background: linear-gradient(155deg,#fcf9f1,#f0efdf); box-shadow: inset 0 1px white, 0 12px 28px -24px rgba(23,39,29,.3); }
.shot-caption { margin-top: 22px; font-size: 12px; font-weight: 500; line-height: 1.6; }
.steps-card, .contact-card, .faq-item { border-radius: 22px; border-color: rgba(74,97,78,.14); box-shadow: inset 0 1px #fff, 0 8px 20px -18px rgba(23,39,29,.28); }
.quick-grid a { border-radius: 14px; box-shadow: inset 0 1px #fff; }
.steps-card { padding: 26px; }
.tip { border-left-width: 2px; border-radius: 12px; }

@media (min-width: 900px) {
  .feed-card.premium-feed .feed-shot-stage { min-height: 620px; }
  .care-flow { min-height: 630px; }
}
@media (max-width: 639px) {
  .stage { min-height: 450px; }
  .suite-body { padding: 24px; }
  .shot-card { padding: 24px 20px 18px; }
  .steps-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .suite-card:hover, .suite-card:hover .frame, .step:hover { transform: none; }
}