/* ==========================================================================
   FAMILY TREE DENTAL — SERVICE DETAIL PAGE
   ---------------------------------------------------------------------------
   Loaded only by /services/<slug>/. Everything shared — the chrome, the
   furniture, the hero, the section rail, the appointment band, the
   testimonials, the clinic panel, the closing call, the treatment rail — is
   in system.css and is NOT repeated here.

   What is left is the five blocks that only a treatment page has:

     05. Overview      the introduction, as an editorial spread
     06. Advantages    the bullet list, promoted
     07. Procedure     the dark chapter, and the timeline in it
     08. Alternatives  the comparison
     13. Questions     the accordion

   The numbering matches system.css's so the two files read as one document.
   ========================================================================== */


/* ==========================================================================
   05. OVERVIEW
   Copy left at a reading measure, photograph right, two glass cards
   straddling its corners, metadata under the copy. The photograph's column
   is deliberately the narrower — the sentences are the reason for the page.
   ========================================================================== */
.sv-overview {
  position: relative;
  z-index: 1;
  padding-block: clamp(2rem, 4vh, 3rem) var(--sv-pad);
  background: #eef5fd;
}
.sv-overview__inner {
  width: var(--sv-shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: var(--sv-gap);
}
.sv-overview__copy .sv-h2 { margin-top: clamp(1rem, 2vh, 1.5rem); }
.sv-overview__actions { margin-top: clamp(1.5rem, 3vh, 2rem); }

/* The holding state runs on the same grid but is shorter, so it gets a
   little more air above it rather than sitting against the rail. */
.sv-overview--brief { padding-top: clamp(3rem, 7vh, 5rem); }

/* --- Metadata -------------------------------------------------------------
   Three facts about the treatment, set as a definition list because that is
   what they are. Divided by hairlines rather than boxed — a card here would
   be a third card in a section that already has two.
   -------------------------------------------------------------------------- */
.sv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  margin-top: clamp(1.8rem, 3.6vh, 2.5rem);
  padding-top: clamp(1.25rem, 2.6vh, 1.75rem);
  border-top: 1px solid rgba(120, 170, 225, .3);
}
.sv-meta dt {
  font-family: var(--f-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.sv-meta dd {
  margin-top: .3rem;
  font-family: var(--f-display);
  font-size: 1.12rem;
  color: var(--c-blue-900);
}

.sv-overview__media { position: relative; }
.sv-overview__frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  aspect-ratio: 4 / 4.4;
  border-radius: var(--sv-r-xl);
  background: linear-gradient(120deg, #f4fafd 0%, #dceaf8 46%, #bcd8f2 100%);
  box-shadow: 0 26px 60px rgba(11, 45, 82, .15);
}
.sv-overview__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
  transition: transform 1.4s var(--ease-soft);
}
.sv-overview__frame:hover img { transform: scale(1.04); }

/* The echo — a second rounded shape offset behind the photograph. The
   homepage's device, reused so both pages frame a picture the same way. */
.sv-overview__echo {
  position: absolute;
  z-index: 1;
  inset: 7% -5% -7% 6%;
  border: 1px solid rgba(120, 170, 225, .45);
  border-radius: calc(var(--sv-r-xl) + 6px);
  pointer-events: none;
}

.sv-float--tl { top: clamp(1rem, 3vw, 2.25rem); left: clamp(-3rem, -3.5vw, -1rem); width: min(15rem, 74%); }
.sv-float--br { right: clamp(-2.5rem, -3vw, -1rem); bottom: clamp(1rem, 3vw, 2.25rem); width: min(14rem, 68%); }


/* ==========================================================================
   06. ADVANTAGES
   ---------------------------------------------------------------------------
   The supplied bullet list, promoted. Each bullet keeps its ORIGINAL sentence
   and gains a number and a pulled keyword above it — the keyword is for
   scanning, the sentence is the content.

   THE HAIRLINE GRID: one background under a 1px-gapped grid draws every
   internal rule at once. No borders to cancel on the edge cells, and no
   double lines where two cells meet.
   ========================================================================== */
.sv-adv {
  position: relative;
  z-index: 1;
  padding-block: var(--sv-pad);
  background: var(--sv-white);
}
.sv-adv__inner { width: var(--sv-shell); margin-inline: auto; }
.sv-adv__head { max-width: 44ch; }
.sv-adv__head .sv-h2 { margin-top: clamp(1rem, 2vh, 1.5rem); }

.sv-adv__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vh, 4rem);
  list-style: none;
  background: rgba(120, 170, 225, .28);
  border: 1px solid rgba(120, 170, 225, .28);
  border-radius: var(--sv-r-lg);
  overflow: hidden;
}
.sv-adv__item {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  background: var(--sv-white);
  transition: background var(--t-med) var(--ease-out);
}
.sv-adv__item:hover { background: #f7fbff; }

.sv-adv__num {
  display: block;
  font-family: var(--f-ui);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--c-blue-300);
  font-variant-numeric: var(--nums-tab);
  transition: color var(--t-med) var(--ease-out);
}
.sv-adv__item:hover .sv-adv__num { color: var(--c-accent); }

.sv-adv__title {
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  font-family: var(--f-display);
  font-size: var(--sv-fs-h3);
  line-height: 1.16;
  letter-spacing: -0.012em;
  color: var(--c-blue-900);
}
.sv-adv__text { margin-top: .7rem; font-size: 0.95rem; line-height: 1.66; color: var(--c-ink-soft); }

/* The last cell. Tinted, so it reads as the end of the list rather than as a
   missing advantage. */
.sv-adv__item--cta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.1rem;
  background: linear-gradient(155deg, #eef5fd 0%, #f7fbff 100%);
}
.sv-adv__item--cta:hover { background: linear-gradient(155deg, #e7f1fd 0%, #f4faff 100%); }
.sv-adv__cta-text {
  font-family: var(--f-display);
  font-size: 1.22rem;
  line-height: 1.32;
  color: var(--c-blue-900);
}
.sv-adv__item--cta .btn { align-self: flex-start; }


/* ==========================================================================
   07. PROCEDURE — the dark chapter
   ---------------------------------------------------------------------------
   The one dark panel on the page, and it is here for rhythm: four light
   sections in a row flatten out, and the treatment itself is the moment that
   earns the change of register.

   THE TIMELINE IS HORIZONTAL ON A DESKTOP and vertical below 980px, and the
   markup does not change between them: the connecting rule is a single
   element scaled on BOTH axes by the reveal, so the same tween draws it
   whichever way round it is.
   ========================================================================== */
.sv-steps {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: var(--hero-inset);
  padding-block: clamp(4rem, 11vh, 8rem);
  color: var(--sv-on-dark);
  border-radius: var(--sv-r-xl);
  background:
    radial-gradient(70% 90% at 88% 6%, rgba(127, 227, 212, .16) 0%, rgba(127, 227, 212, 0) 60%),
    linear-gradient(155deg, var(--sv-navy) 0%, var(--sv-navy-2) 52%, var(--sv-teal) 100%);
}
.sv-steps__glow {
  position: absolute;
  z-index: -1;
  top: -20%; left: -10%;
  width: min(48vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 114, 214, .34) 0%, rgba(26, 114, 214, 0) 68%);
  pointer-events: none;
}
.sv-steps__inner { width: min(1220px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.sv-steps__head { max-width: 46ch; }
.sv-steps__head .sv-h2 { margin-top: clamp(1rem, 2vh, 1.5rem); }
.sv-steps__lede {
  max-width: 44ch;
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--sv-on-dark-soft);
}

.sv-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2.75rem, 6vh, 4.5rem);
  list-style: none;
}
.sv-step { position: relative; }
.sv-step__marker { display: flex; align-items: center; gap: .75rem; }
.sv-step__dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px; height: 52px;
  font-family: var(--f-ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--sv-on-dark-hair);
  border-radius: 50%;
  font-variant-numeric: var(--nums-tab);
  transition: background var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out);
}
.sv-step:hover .sv-step__dot {
  background: rgba(127, 227, 212, .16);
  border-color: rgba(127, 227, 212, .6);
  transform: translateY(-2px);
}
/* Scaled on BOTH axes by the reveal so the same tween works horizontally
   here and vertically on a phone. */
.sv-step__link {
  display: block;
  flex: 1 1 auto;
  height: 2px;
  background: repeating-linear-gradient(90deg,
              rgba(174, 207, 246, .4) 0 8px,
              rgba(174, 207, 246, 0) 8px 16px);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
/* Nothing follows the last marker, so its run is a short tail rather than a
   line to a circle that is not there. */
.sv-step__link--end {
  flex: 0 0 clamp(1rem, 3vw, 2.5rem);
  background: linear-gradient(90deg, rgba(174, 207, 246, .4), rgba(174, 207, 246, 0));
}

.sv-step__body { margin-top: clamp(1.1rem, 2.4vw, 1.6rem); }
.sv-step__title {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.2;
  color: #fff;
}
.sv-step__text { margin-top: .6rem; font-size: 0.925rem; line-height: 1.68; color: var(--sv-on-dark-soft); }

.sv-steps__media {
  position: relative;
  overflow: hidden;
  margin-top: clamp(3rem, 7vh, 5rem);
  border-radius: var(--sv-r-lg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
}
.sv-steps__media img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  object-position: 50% 55%;
  transition: transform 1.6s var(--ease-soft);
}
.sv-steps__media:hover img { transform: scale(1.03); }
.sv-steps__media figcaption {
  position: absolute;
  left: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  max-width: min(30rem, 74%);
  padding: clamp(.9rem, 1.6vw, 1.2rem) clamp(1rem, 1.8vw, 1.4rem);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--glass-brd);
  border-radius: var(--sv-r-md);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
}
.sv-steps__media figcaption span {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--f-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-blue-700);
}


/* ==========================================================================
   08. ALTERNATIVES — the comparison
   ---------------------------------------------------------------------------
   The recommended treatment is stated ONCE, prominently, and sticks to the
   viewport while the alternatives scroll past it — so whatever you are
   comparing, the thing you are comparing it TO is still on screen.
   ========================================================================== */
.sv-alt {
  position: relative;
  z-index: 1;
  padding-block: var(--sv-pad);
  background: var(--sv-ivory);
}
.sv-alt__inner { width: var(--sv-shell); margin-inline: auto; }
.sv-alt__head { max-width: 52ch; }
.sv-alt__head .sv-h2 { margin-top: clamp(1rem, 2vh, 1.5rem); }
.sv-alt__lede {
  max-width: 56ch;
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink-soft);
}

.sv-alt__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 5vh, 4rem);
}

.sv-alt__lead {
  position: sticky;
  /* Clears the header pill AND the section rail above it — the rail's own
     offset, plus the rail's height, plus a breath. */
  top: calc(var(--hero-inset) + var(--hero-pad) + 62px + 112px);
  padding: clamp(1.6rem, 2.8vw, 2.4rem);
  color: #fff;
  border-radius: var(--sv-r-lg);
  background:
    radial-gradient(80% 90% at 84% 8%, rgba(127, 227, 212, .2) 0%, rgba(127, 227, 212, 0) 60%),
    linear-gradient(150deg, var(--c-blue-700) 0%, var(--c-blue-900) 62%, #06213a 100%);
  box-shadow: 0 26px 60px rgba(10, 44, 82, .28);
}
.sv-alt__lead-title {
  margin-top: 1.1rem;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: -0.014em;
  color: #fff;
}
.sv-alt__lead-text { margin-top: .9rem; font-size: 0.95rem; line-height: 1.7; color: var(--sv-on-dark-soft); }
.sv-alt__points {
  margin: 1.4rem 0 1.75rem;
  padding: 1.25rem 0 0;
  list-style: none;
  border-top: 1px solid var(--sv-on-dark-hair);
}
.sv-alt__points li {
  position: relative;
  padding-left: 1.65rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}
.sv-alt__points li + li { margin-top: .7rem; }
.sv-alt__points li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 9px; height: 9px;
  background: var(--c-mint);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(127, 227, 212, .16);
}

.sv-alt__others { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
.sv-alt__card {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  padding-left: clamp(3.75rem, 6vw, 5.25rem);
  background: var(--sv-white);
  border: 1px solid var(--sv-card-brd);
  border-radius: var(--sv-r-lg);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out);
}
.sv-alt__card:hover {
  transform: translateY(-3px);
  border-color: var(--c-blue-300);
  box-shadow: var(--sh-md);
}
.sv-alt__num {
  position: absolute;
  top: clamp(1.5rem, 2.6vw, 2.1rem);
  left: clamp(1.4rem, 2.4vw, 2rem);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  font-family: var(--f-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-blue-700);
  background: rgba(26, 114, 214, .09);
  border-radius: 50%;
}
.sv-alt__card-title {
  font-family: var(--f-display);
  font-size: var(--sv-fs-h3);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--c-blue-900);
}
.sv-alt__card-text { margin-top: .75rem; font-size: 0.935rem; line-height: 1.7; color: var(--c-ink-soft); }

/* Trade-off tags. A plus and a dash rather than colour alone — colour is not
   available to every reader, and "green means good" does not survive a
   greyscale screenshot. */
.sv-alt__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; list-style: none; }
.sv-alt__tags li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
  font-family: var(--f-ui);
  font-size: 0.79rem;
  font-weight: 500;
  border-radius: 100px;
}
.sv-alt__tags li::before { font-weight: 700; }
.sv-alt__tags .is-plus { color: #0d6b53; background: rgba(24, 160, 125, .1); }
.sv-alt__tags .is-plus::before { content: "+"; }
.sv-alt__tags .is-minus { color: #8a5320; background: rgba(255, 107, 44, .1); }
.sv-alt__tags .is-minus::before { content: "–"; }


/* ==========================================================================
   13. QUESTIONS
   ---------------------------------------------------------------------------
   Native <details>/<summary>. With no JS every row still opens, closes and is
   reachable by keyboard; site.js only takes over the height animation and
   closes the sibling that was open.

   THE MARKER IS REMOVED IN THREE DIALECTS — the WebKit pseudo-element, the
   standard list-item route and `list-style: none` — because no single one of
   them covers every engine in use.
   ========================================================================== */
.sv-faq {
  position: relative;
  z-index: 1;
  padding-block: var(--sv-pad);
  background: var(--sv-white);
}
.sv-faq__inner {
  width: var(--sv-shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: start;
  gap: var(--sv-gap);
}
.sv-faq__copy .sv-h2 { margin-top: clamp(1rem, 2vh, 1.5rem); }
.sv-faq__list { margin-top: clamp(2rem, 4vh, 3rem); }

.sv-faq__item { border-top: 1px solid rgba(120, 170, 225, .35); }
.sv-faq__item:last-of-type { border-bottom: 1px solid rgba(120, 170, 225, .35); }

.sv-faq__q {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.5rem);
  padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
  list-style: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out);
}
.sv-faq__q::-webkit-details-marker { display: none; }
.sv-faq__q::marker { content: ""; }

.sv-faq__n {
  flex: none;
  font-family: var(--f-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--c-blue-300);
  font-variant-numeric: var(--nums-tab);
  transition: color var(--t-fast) var(--ease-out);
}
.sv-faq__qt {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-display);
  font-size: clamp(1.08rem, 0.95rem + 0.6vw, 1.4rem);
  line-height: 1.3;
  color: var(--c-blue-900);
}

/* The plus, drawn from two bars so it becomes a minus by rotating one of
   them. No icon swap, no second glyph, and it transitions. */
.sv-faq__sign {
  position: relative;
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid rgba(120, 170, 225, .5);
  border-radius: 50%;
  transition: background var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out);
}
.sv-faq__sign::before,
.sv-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.6px;
  background: var(--c-blue-700);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--t-med) var(--ease-out),
              background var(--t-med) var(--ease-out);
}
.sv-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.sv-faq__q:hover .sv-faq__n { color: var(--c-accent); }
.sv-faq__q:hover .sv-faq__sign { background: rgba(26, 114, 214, .07); border-color: var(--c-blue-300); }

.sv-faq__item[open] .sv-faq__sign { background: var(--c-blue-500); border-color: var(--c-blue-500); }
.sv-faq__item[open] .sv-faq__sign::before,
.sv-faq__item[open] .sv-faq__sign::after { background: #fff; }
.sv-faq__item[open] .sv-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.sv-faq__item[open] .sv-faq__n { color: var(--c-accent); }

/* site.js animates this element's height; the padding lives on the child so
   the collapse is a clean 0 rather than a 0-plus-padding. */
.sv-faq__panel { overflow: hidden; }
.sv-faq__a { padding: 0 0 clamp(1.25rem, 2.4vw, 1.75rem) calc(0.8rem + 2.6rem); max-width: 66ch; }
.sv-faq__a p { font-size: 0.955rem; line-height: 1.75; color: var(--c-ink-soft); }

.sv-faq__help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(1.75rem, 3.4vh, 2.5rem);
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.4vw, 1.75rem);
  background: linear-gradient(150deg, #eef5fd, #f8fbff);
  border-radius: var(--sv-r-lg);
}
.sv-faq__help p { font-size: 0.95rem; line-height: 1.5; color: var(--c-blue-900); }

/* The artwork's own 428:362 again — the caption is set INTO the picture. It
   also sticks, so the image stays beside the question you are reading rather
   than scrolling away at the third answer. */
.sv-faq__media {
  position: sticky;
  top: calc(var(--hero-inset) + var(--hero-pad) + 62px + 112px);
  overflow: hidden;
  aspect-ratio: 428 / 362;
  border-radius: var(--sv-r-xl);
  background: linear-gradient(120deg, #f4fafd, #dceaf8);
  box-shadow: var(--sh-lg);
}
.sv-faq__media img { width: 100%; height: 100%; object-fit: cover; }
.sv-faq__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 114, 214, .16) 0%, rgba(26, 114, 214, 0) 55%);
  pointer-events: none;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .sv-adv__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(2rem, 4vw, 3rem); }
  /* Three across means every third marker ends a row: its run would point at
     nothing, so it becomes the short tail instead. */
  .sv-step:nth-child(3n) .sv-step__link,
  .sv-step:last-child .sv-step__link {
    flex: 0 0 clamp(1rem, 3vw, 2.5rem);
    background: linear-gradient(90deg, rgba(174, 207, 246, .4), rgba(174, 207, 246, 0));
  }
}

@media (max-width: 980px) {
  .sv-overview__inner,
  .sv-faq__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.25rem, 6vw, 3.5rem);
  }

  .sv-overview__frame { aspect-ratio: 16 / 11; }
  /* The echo hangs 5% past the photograph's right edge, which is fine while
     that photograph has a gutter beside it. Stacked, the column IS the page
     and those 5% become a horizontal scrollbar. */
  .sv-overview__echo { inset: 5% 2% -5% 2%; }

  .sv-faq__media { position: static; order: 2; max-width: 30rem; }

  .sv-alt__grid { grid-template-columns: minmax(0, 1fr); }
  .sv-alt__lead { position: static; }

  /* --- The timeline turns vertical -------------------------------------
     Same markup, same tween: the marker column becomes the full height of
     the row and the dashed run rotates to join each circle to the one below
     it. The reveal scales BOTH axes, which is why it draws either way. */
  .sv-track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sv-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(1rem, 4vw, 1.5rem);
  }
  .sv-step__marker { flex-direction: column; align-items: center; height: 100%; }
  .sv-step__link {
    width: 2px;
    height: auto;
    flex: 1 1 auto;
    min-height: 1.5rem;
    margin: .6rem 0 0;
    transform-origin: 50% 0;
    background: repeating-linear-gradient(180deg,
                rgba(174, 207, 246, .4) 0 8px,
                rgba(174, 207, 246, 0) 8px 16px);
  }
  .sv-step__link--end,
  .sv-step:nth-child(3n) .sv-step__link,
  .sv-step:last-child .sv-step__link {
    flex: 1 1 auto;
    background: repeating-linear-gradient(180deg,
                rgba(174, 207, 246, .4) 0 8px,
                rgba(174, 207, 246, 0) 8px 16px);
  }
  .sv-step:last-child .sv-step__link { display: none; }
  .sv-step__body {
    margin-top: 0;
    padding-bottom: clamp(1.75rem, 5vw, 2.5rem);
    /* Optically centres the title against its circle rather than aligning
       box tops, which reads as the text sitting low. */
    padding-top: calc((52px - 1.5em) / 2);
  }
  .sv-step:last-child .sv-step__body { padding-bottom: 0; }
}

@media (max-width: 560px) {
  .sv-adv__list { grid-template-columns: minmax(0, 1fr); }
  .sv-overview__media { display: flex; flex-direction: column; gap: .9rem; }
  .sv-faq__a { padding-left: 0; }
  .sv-faq__q { gap: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-overview__frame img,
  .sv-steps__media img { transition: none; }
  .sv-overview__frame:hover img,
  .sv-steps__media:hover img,
  .sv-alt__card:hover { transform: none; }
}

@media print {
  .sv-faq__panel { height: auto !important; }
  .sv-steps,
  .sv-alt__lead { color: #000 !important; background: none !important; }
  .sv-step__title,
  .sv-alt__lead-title { color: #000 !important; }
  .sv-step__text,
  .sv-alt__lead-text,
  .sv-alt__points li,
  .sv-steps__lede { color: #333 !important; }
}