@import url('./funnels.css');

/* The voicemail guide (save-a-voicemail.html): the phone switch and its steps on the
   first screen, then the drop box of memories.html on a dark band of its own. */

/* Without the script all three sets of steps stand one after another, so each set after
   the first needs room above it. */
.voicemail-phone + .voicemail-phone { margin-top:30px; padding-top:24px; border-top:1px solid var(--hair-dark); }
/* With the script, one set shows at a time and needs none of that. */
.voicemail-guide:has(> .voicemail-phone[hidden]) .voicemail-phone { margin-top:0; padding-top:0; border-top:0; }
.voicemail-phone h2 { margin-bottom:4px; }
.voicemail-phone > p { margin:14px 0 0; }
.voicemail-guide .tool-steps > li:first-child { border-top:0; }

/* Links inside a sentence carry an underline: the house style gives links none. */
.voicemail-guide p a,.questions-list p a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.voicemail-guide p a { color:var(--snow); }
.questions-list p a { color:var(--coal); }
.voicemail-guide p a:hover,.questions-list p a:hover { text-decoration-thickness:2px; }

/* The check band: the headline sits closer to the drop box than a section heading does. */
.voicemail-check .section-head { margin-bottom:0; }
.voicemail-check .hero-actions { margin-top:40px; }

@media (max-width:480px) {
  /* "No save button" may wrap to two lines rather than push the page sideways. */
  #phone-switch button { padding:0 10px; line-height:1.2; }
}