/* Hero-only CTA comparison. Remove the switcher markup + JS after selection. */
#intro .hero-cta-review {
  --cta-paper: #f6f4e8;
  --cta-ink: #243b2e;
  --cta-soft: #d7e6cc;
  flex: none;
  width: 290px;
  max-width: 100%;
  margin-top: 32px;
  color: var(--cta-paper);
}
#intro .hero-cta-review .hero-cta-link {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 66px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: none;
  border-radius: 3px;
  -webkit-tap-highlight-color: transparent;
}
#intro .hero-cta-review [hidden] { display: none !important; }
#intro .hero-cta-link:focus-visible {
  outline: 2px solid var(--cta-paper);
  outline-offset: 7px;
}
#intro .hero-cta-face { display: flex; align-items: center; }
#intro .hero-cta-face svg { display: block; flex: none; }

/* 1 — A tactile circular dial, paired with quiet two-line typography. */
#intro .hero-cta-dial { gap: 16px; }
#intro .hero-cta-dial-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  border: 1px solid #f6f4e880;
  border-radius: 50%;
  transition: border-color 220ms, background 220ms;
}
#intro .hero-cta-dial-icon::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid #f6f4e833;
  border-radius: 50%;
}
#intro .hero-cta-dial-orbit {
  position: absolute;
  inset: -3px;
  transform: rotate(37deg);
  transition: transform 350ms cubic-bezier(.22,.61,.36,1);
}
#intro .hero-cta-dial-orbit::after {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cta-soft);
}
#intro .hero-cta-dial-copy { display: grid; gap: 5px; }
#intro .hero-cta-dial-copy strong { font: 500 17px/1.2 -apple-system,BlinkMacSystemFont,Arial,sans-serif; letter-spacing: -.02em; }
#intro .hero-cta-dial-copy small { font: 400 11px/1.4 -apple-system,BlinkMacSystemFont,Arial,sans-serif; color: var(--cta-soft); letter-spacing: .01em; }

/* 2 — An ivory paper note with a folded corner. The entire note is the link. */
#intro .hero-cta-note {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  width: 270px;
  max-width: 100%;
  height: 66px;
  padding: 11px 37px 11px 20px;
  background: var(--cta-paper);
  color: var(--cta-ink);
  clip-path: polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,0 100%);
  transition: background 220ms;
}
#intro .hero-cta-note::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 11px;
  bottom: 11px;
  border-left: 1px solid #bac5b3;
}
#intro .hero-cta-note::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 15px;
  height: 15px;
  background: #bdc9b5;
  box-shadow: -1px 1px 0 #243b2e12;
}
#intro .hero-cta-note small { font: 500 8px/1.2 -apple-system,BlinkMacSystemFont,Arial,sans-serif; letter-spacing: .16em; }
#intro .hero-cta-note strong { font: 400 21px/1.15 Georgia,'Times New Roman',serif; letter-spacing: -.025em; }

/* 3 — Editorial invitation: italic type and a fine rule, with no button shape. */
#intro .hero-cta-editorial {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  width: 275px;
  max-width: 100%;
  min-height: 66px;
  padding: 2px 0 8px;
}
#intro .hero-cta-editorial strong { font: italic 400 25px/1.15 Georgia,'Times New Roman',serif; letter-spacing: -.03em; }
#intro .hero-cta-editorial-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; }
#intro .hero-cta-editorial small { font: 400 10px/1.3 -apple-system,BlinkMacSystemFont,Arial,sans-serif; color: var(--cta-soft); letter-spacing: .05em; }
#intro .hero-cta-editorial svg { transition: transform 220ms; }
#intro .hero-cta-editorial::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #f6f4e870; transition: background 220ms; }

/* Temporary comparison controls, intentionally secondary to the CTA. */
#intro .hero-cta-switcher {
  display: flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  margin-top: 10px;
  padding: 2px;
  border: 1px solid #f6f4e82e;
  border-radius: 5px;
  background: #14291f66;
}
#intro .hero-cta-switcher button {
  appearance: none;
  min-height: 30px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #e5eadd;
  font: 400 10px/1.2 -apple-system,BlinkMacSystemFont,Arial,sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
}
#intro .hero-cta-switcher button[aria-pressed=true] { background: var(--cta-paper); color: var(--cta-ink); }
#intro .hero-cta-switcher button:focus-visible { outline: 2px solid var(--cta-paper); outline-offset: 3px; }
@media (hover: hover) {
  #intro .hero-cta-link:hover .hero-cta-dial-icon { background: #f6f4e80d; border-color: var(--cta-paper); }
  #intro .hero-cta-link:hover .hero-cta-dial-orbit { transform: rotate(115deg); }
  #intro .hero-cta-link:hover .hero-cta-note { background: #fffdf2; }
  #intro .hero-cta-link:hover .hero-cta-editorial svg { transform: translateX(4px); }
  #intro .hero-cta-link:hover .hero-cta-editorial::after { background: var(--cta-paper); }
}
@media (max-width: 1000px) and (max-aspect-ratio: 1/1) {
  #intro .hero-cta-review { margin-top: 23px; }
}
@media (max-height: 650px) and (orientation: portrait), (max-height: 550px) and (orientation: landscape) {
  #intro .hero-cta-review { margin-top: 16px; }
  #intro .hero-cta-review .hero-cta-link, #intro .hero-cta-editorial { min-height: 56px; }
  #intro .hero-cta-dial-icon { width: 52px; height: 52px; }
  #intro .hero-cta-note { height: 56px; }
  #intro .hero-cta-editorial strong { font-size: 23px; }
  #intro .hero-cta-switcher { margin-top: 8px; }
}
/* Keep the temporary controls from squeezing the existing copy in short views. */
@media (max-height: 550px) and (orientation: landscape) {
  #intro .hero-cta-review { position: relative; height: 92px; margin-top: 12px; }
  #intro .hero-cta-review .hero-cta-link, #intro .hero-cta-editorial { min-height: 48px; }
  #intro .hero-cta-dial-icon { width: 44px; height: 44px; }
  #intro .hero-cta-dial-copy strong { font-size: 15px; }
  #intro .hero-cta-note { height: 48px; padding-block: 7px; gap: 3px; }
  #intro .hero-cta-note strong { font-size: 18px; }
  #intro .hero-cta-editorial { gap: 4px; padding-block: 2px; }
  #intro .hero-cta-editorial strong { font-size: 21px; }
  #intro .hero-cta-switcher { position: absolute; top: 48px; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #intro .hero-cta-review *, #intro .hero-cta-review *::after { transition: none !important; }
  #intro .hero-cta-link:hover .hero-cta-dial-orbit { transform: rotate(37deg); }
  #intro .hero-cta-link:hover .hero-cta-editorial svg { transform: none; }
}

/* Selected Editorial CTA: center it within the former CTA + review-control area.
   Keep that area's total height so the main headline retains its position. */
#intro .hero-cta-final { box-sizing: border-box; padding-block: 23px; }
/* Aim the editorial arrow at the phone in the full-width desktop photo. */
@media (orientation: landscape), (min-width: 1001px) {
  html[data-hero-layout=full] #intro .hero-cta-final {
    margin-inline-start: max(0px, calc(58vw - 275px));
  }
}
@media (max-height: 650px) and (orientation: portrait), (max-height: 550px) and (orientation: landscape) {
  #intro .hero-cta-final { padding-block: 22px; }
}