/* Bolt How-To (help-center article) card — shared by the /support/hca/* pages.
   Matches Figma nodes 2354:7372 (iOS), 2354:7413 (Android), 2419:419 (Verizon).
   The site header/footer come from styles.css; this file styles the article. */

.hca-wrap {
  position: relative;
  min-height: calc(100vh - 105px);
  padding: 56px 20px 96px;
  background: #ffffff;
  overflow: hidden;
}
/* Faint tiled bolt watermark ("Checker Plate"), same asset the demo modal uses. */
.hca-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('/assets/demo-checker.svg') left top / 230px auto repeat;
  opacity: .06;
}

.hca-card {
  position: relative;
  z-index: 1;
  max-width: 684px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(24, 10, 83, .10);
  padding: 40px clamp(24px, 5vw, 56px) 32px;
}

.hca-card__kicker {
  font-family: 'Permanent Marker', cursive;
  font-weight: 400;
  color: #180A53;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 32px -2px;
}

.hca-card__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  color: #180A53;
  margin: 0 0 14px;
}

.hca-card__intro {
  font-size: 15px;
  line-height: 1.55;
  color: #3a3a45;
  margin: 0 0 16px;
}

/* Ordered step list — the number is a <b class="hca-num"> pinned to the left
   gutter; the li has a matching left pad so wrapped text, device screenshots and
   sub-lists all align beside the number, never hanging underneath it. */
ol.hca-steps {
  margin: 0;
  padding-left: 0;
  list-style: none;
  color: #23252b;
  font-size: 15px;
  line-height: 1.55;
}
ol.hca-steps > li { margin: 0 0 12px; padding-left: 1.9em; }
/* Inline (not absolute) so the number sits on the first text line's baseline —
   a tall inline icon on that line no longer leaves the number floating above.
   The negative margin pulls it into the gutter; the li pad keeps wraps aligned. */
.hca-num { display: inline-block; width: 1.9em; margin-left: -1.9em; font-weight: 700; color: #111318; }
.hca-steps b, .hca-steps strong { font-weight: 700; color: #111318; }
.hca-steps em { font-style: italic; }

/* Inline app icons that sit in the step text (Settings, Phone, etc.) */
.hca-ic {
  display: inline-block;
  height: 20px;
  width: auto;
  vertical-align: -5px;
  margin: 0 1px;
}
.hca-ic--menu { vertical-align: -3px; }
/* 2.5x app icons (iOS + Verizon pages; Android blue Phone) — Figma 2354:7372 / 2419:419 / 2354:7413. */
.hca-ic--lg { height: 30px; vertical-align: middle; margin: 0 4px; }

/* Nested a./b./c. sub-steps */
ol.hca-sub {
  margin: 6px 0 0;
  padding-left: 20px;
  list-style: lower-alpha;
}
ol.hca-sub > li { margin: 0 0 4px; }
ol.hca-sub--wide > li { margin: 0 0 12px; }

/* The "After you have completed your test call…" lead-in */
.hca-afterhead { font-weight: 700; text-decoration: underline; }

/* Device screenshots (already carry the red highlight, baked in from Figma) */
.hca-shot {
  display: block;
  margin: 10px 0 4px;
  width: 208px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
/* Verizon Live-Voicemail shot needs the red highlight drawn here (it was a
   separate layer in Figma, not baked into the image). */
.hca-shotbox { position: relative; display: inline-block; margin: 10px 0 4px; }
.hca-shotbox .hca-shot { margin: 0; }
.hca-shotbox__hl {
  position: absolute;
  left: 1.5%; right: 1.5%; top: 57%; height: 36%;
  border: 2px solid #e5484d;
  border-radius: 8px;
  pointer-events: none;
}

/* Gray callout (Android → Samsung special instructions) */
.hca-callout {
  background: #f2f3f5;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 4px 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: #23252b;
}
.hca-callout__title { font-weight: 700; color: #111318; margin: 0 0 4px; }
.hca-callout ol { margin: 0; padding-left: 20px; list-style: lower-alpha; }
.hca-callout ol > li { margin: 0 0 3px; }

/* Blue "Back" button */
.hca-back {
  display: block;
  width: 100%;
  margin: 28px 0 0;
  padding: 14px 20px;
  background: #2b7ffd;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.hca-back:hover { background: #1f6fe6; }

.hca-help {
  margin: 18px 0 0;
  text-align: center;
  font-size: 14px;
  color: #8a8f98;
}
.hca-help a { color: #2b7ffd; text-decoration: none; }
.hca-help a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .hca-wrap { padding: 24px 14px 64px; }
  .hca-card { padding: 26px 20px 24px; border-radius: 16px; }
  .hca-card__kicker { font-size: 30px; margin-bottom: 20px; }
  .hca-card__title { font-size: 23px; line-height: 1.25; margin-bottom: 18px; }
  .hca-card__intro { font-size: 16px; }
  ol.hca-steps { font-size: 17px; line-height: 1.5; padding-left: 0; }
  ol.hca-steps > li { margin-bottom: 18px; padding-left: 2.1em; }
  .hca-num { width: 2.1em; margin-left: -2.1em; }
  ol.hca-sub { font-size: 17px; }
  ol.hca-sub--wide > li { margin-bottom: 14px; }
  .hca-ic { height: 24px; vertical-align: -6px; }
  .hca-ic--menu { vertical-align: -4px; }
  .hca-ic--lg { height: 60px; vertical-align: middle; }
  /* Device screenshots go full-width on mobile (Figma 2520:1811/1974/2102). */
  .hca-shot { width: 100%; max-width: 320px; margin: 12px 0 6px; }
  .hca-shotbox { display: block; width: 100%; max-width: 320px; }
  .hca-callout { font-size: 16px; }
  .hca-back { font-size: 17px; padding: 15px 20px; }
  .hca-help { font-size: 15px; }
}

/* ============================================================
   VIDEO REDESIGN — Figma 2354:7413 (Android spam blocker) +
   2586:1229 (iPhone Live Voicemail). Everything is scoped to
   .hca-card--media so the other /support/hca/* pages are
   completely unaffected. Desktop = two columns (device-frame
   video on the left, article body on the right); mobile stacks
   the device above the body.
   ============================================================ */
.hca-card--media { max-width: 1040px; }
.hca-card--media .hca-card__title {
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.18;
  margin: 0 0 24px;
}

.hca-media {
  display: grid;
  grid-template-columns: minmax(232px, 300px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.hca-media__body { min-width: 0; }
/* Bold lead-in inside the body column (iPhone page only, per node 2586:1285). */
.hca-media__subtitle {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: #111318;
  margin: 0 0 12px;
}
.hca-media__body .hca-steps { margin-top: 0; }
/* Back + help live under the body column (Figma), so no extra top gap. */
.hca-media__body .hca-back { margin-top: 22px; }

/* Device frame: a transparent-screen iPhone PNG (assets/support/phone-frame.png,
   1112x2305) sits ON TOP of the video; the black screen box + video sit behind
   and show through the frame's screen opening. The frame is
   pointer-events:none so play/seek/volume/fullscreen reach the iframe.

   --clip-w: the demo clips are portrait screen-recordings exported inside a
   16:9 file, pillar-boxed. --clip-w is the recording's width as a share of the
   file's width, measured from the video itself (Android vedtix 322/1280 =
   0.2516; iPhone ez9956 and kboews 502/1920 = 0.2615). Each page sets it on
   its .hca-device next to the embed; a new video needs it re-measured. */
.hca-device {
  --clip-w: 0.2516;
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 2px auto 0;
  aspect-ratio: 1112 / 2305;
}
/* AFMBP-2080 — the screen box IS the frame's opening, so no page shows
   between the video and the bezel. The opening was measured from the PNG's
   alpha channel (x 37–1074, y 27–2274, smooth ~156px corners); the box is that
   opening pushed 8 frame px further under the opaque bezel, so sub-pixel
   rounding at any phone size still leaves no sliver. Solved against the PNG:
   it covers every transparent pixel of the opening and never reaches past the
   phone's outer edge (valid corner radii at this margin: 128–184 frame px;
   156 is the middle). Percentages, so it scales with the device. The old box
   (inset 1.5% 4.7%, 30px corners) stopped ~15 frame px short of each side. */
.hca-device__screen {
  position: absolute;
  inset: 0.824% 2.608% 0.954%;
  background: #000;
  border-radius: 14.8% / 6.89%;
  overflow: hidden;
  z-index: 1;
}
/* The 16:9 iframe is scaled so the recording column is exactly the screen
   box's width, centred: the pillar-box bars overflow and are clipped, and the
   recording's soft edge pixels land in the box's 8px tuck under the bezel, out
   of sight. Height follows the 16:9 aspect and always covers the screen: the
   iPhone recordings (h/w 2.151) match the screen (2.148) almost exactly; the
   taller Android one (2.236) loses ~2% top and bottom under the bezel. */
.hca-device__screen iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% / var(--clip-w));
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
}
.hca-device__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 860px) {
  /* Stack: device (video) above the article body. */
  .hca-media { grid-template-columns: 1fr; gap: 22px; }
  .hca-device { max-width: 264px; }
  .hca-card--media .hca-card__title { font-size: clamp(20px, 6.4vw, 26px); }
  .hca-media__subtitle { font-size: 18px; }
}