/* ==========================================================================
   TESORIN — Compare hub and one-competitor alternative pages
   compare.html (hub), monarch-alternative.html, ynab-alternative.html,
   rocket-money-alternative.html.

   Built on assets/css/marketing-sections.css (ms-), which every page links LAST.
   Any rule here that adjusts an ms- component therefore carries a page-scoped
   selector with higher specificity. Page classes use the cmp- prefix.
   ========================================================================== */

.cmp-page {
  --cmp-focus: var(--accent-olive, #737C47);
}

html[data-theme="dark"] .cmp-page {
  --cmp-focus: #A6AF78;
}

/* Visible keyboard focus. The CTA band keeps its own light outline
   (html body .ms-cta .btn:focus-visible is more specific). */
.cmp-page main :is(a, button, summary, input):focus-visible {
  outline: 2px solid var(--cmp-focus);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   1. Alternative-page hero: copy beside a phone held in hand
   -------------------------------------------------------------------------- */
.ms-section.cmp-hero {
  padding-bottom: clamp(24px, 3vw, 44px);
}

.cmp-hero .ms-split {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 5vw, 80px);
}

.cmp-hero .ms-split__text {
  max-width: 590px;
}

.cmp-hero .ms-split__text h1 {
  max-width: 17ch;
  font-size: var(--text-title);
  line-height: var(--text-title-leading);
  letter-spacing: -.028em;
}

.cmp-hero .ms-split__text > .cmp-hero__proof {
  color: var(--ink);
}

.cmp-hero .ms-split__media {
  justify-items: stretch;
}

/* Static recreation of the homepage hand: the phone sits in front of
   /assets/motion/phone-hand-clean.png, scaled from the phone width with the
   same proportions home.css uses (hand = 2.76 x phone, top = -1.012 x phone,
   shifted -48.2%). The forearm is cropped by this box and faded out below
   the phone, so nothing overflows the column. */
.cmp-hand {
  --cmp-phone: clamp(260px, 23vw, 300px);
  --cmp-top: 8px;
  position: relative;
  width: 100%;
  height: calc(var(--cmp-phone) * 2.62 + var(--cmp-top));
  overflow: hidden;
  overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--cmp-phone) * .42), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--cmp-phone) * .42), transparent 100%);
}

/* Soft olive halo behind the phone; stays inside the box. */
.cmp-hand::before {
  content: "";
  position: absolute;
  top: calc(var(--cmp-phone) * .5);
  left: 50%;
  width: calc(var(--cmp-phone) * 1.5);
  height: calc(var(--cmp-phone) * 1.5);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(115, 124, 71, .12), rgba(115, 124, 71, 0));
  transform: translateX(-50%);
  pointer-events: none;
}

.cmp-hand .ms-device {
  --ms-phone-width: var(--cmp-phone);
  height: 100%;
  padding: var(--cmp-top) 0 0;
  align-items: start;
}

.cmp-hand .ms-device::before {
  display: none;
}

html body .cmp-hand .ms-device .tesorin-device-stage {
  z-index: 2;
  width: var(--cmp-phone);
}

.cmp-hand__img {
  position: absolute;
  z-index: 1;
  top: calc(var(--cmp-top) - var(--cmp-phone) * 1.012);
  left: 50%;
  display: block;
  width: calc(var(--cmp-phone) * 2.76);
  max-width: none;
  height: auto;
  transform: translateX(-48.2%);
  clip-path: inset(32.5% 18.5% 0 19.5%);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 960px) {
  .cmp-hero .ms-split {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 6vw, 56px);
  }

  .cmp-hero .ms-split__text {
    max-width: 640px;
  }

  /* Bleed into the page gutter so the fingers and thumb never clip. */
  .cmp-hand {
    --cmp-phone: min(280px, 62vw);
    width: calc(100% + var(--gutter, 18px) * 2);
    margin-inline: calc(var(--gutter, 18px) * -1);
  }
}

@media (max-width: 560px) {
  .cmp-hero .ms-split__text h1 {
    max-width: none;
  }
}


/* --------------------------------------------------------------------------
   2. Two-column comparison (ms-compare) additions
   -------------------------------------------------------------------------- */
.ms-section.cmp-compare {
  padding-top: clamp(40px, 5vw, 72px);
}

/* Secondary line inside a cell, e.g. "USD and CAD accounts are recommended." */
.ms-compare__table td > p.cmp-meta {
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.ms-compare__table td > p.cmp-price strong {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

/* Competitor price in the Pricing row links to that app's pricing source.
   It lives in the body (not the header) so it stays visible and reachable
   when the header is hidden at <=760px. */
.cmp-rival-link {
  display: inline;
  padding-block: 3px;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}

.cmp-rival-link strong {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(115, 124, 71, .55);
  text-underline-offset: 5px;
  transition: text-decoration-color .2s ease;
}

html[data-theme="dark"] .cmp-rival-link strong {
  text-decoration-color: rgba(166, 175, 120, .6);
}

.cmp-rival-link__icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  vertical-align: .05em;
  color: var(--ink-3);
  transition: transform .2s ease, color .2s ease;
}

.cmp-rival-link:hover strong {
  text-decoration-color: currentColor;
}

.cmp-rival-link:hover .cmp-rival-link__icon {
  color: var(--ink);
  transform: translate(1px, -1px);
}


/* --------------------------------------------------------------------------
   Review drop: below 900px each rail scrolls sideways and receives
   tabindex="0" from the page script; keep its focus ring inside the screen.
   -------------------------------------------------------------------------- */
.cmp-drop .ms-review-drop__rail:focus-visible {
  outline: 2px solid var(--cmp-focus);
  outline-offset: -3px;
}


/* --------------------------------------------------------------------------
   3. Hub: three link cards
   -------------------------------------------------------------------------- */
.cmp-hub .ms-head h1 em.serif {
  color: var(--accent-olive, #737C47);
}

html[data-theme="dark"] .cmp-hub .ms-head h1 em.serif {
  color: #A6AF78;
}

.cmp-hub__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.cmp-hub__list > li {
  display: flex;
  min-width: 0;
}

.cmp-hub__card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 300px;
  padding: clamp(26px, 2.6vw, 36px);
  border: 1px solid var(--site-card-border, var(--hair));
  border-radius: var(--site-card-radius, 32px);
  background: var(--site-card-bg, var(--paper));
  box-shadow: var(--site-card-shadow, none);
  color: var(--ink);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cmp-hub__card:hover {
  border-color: rgba(115, 124, 71, .38);
  box-shadow: var(--site-card-shadow-hover, var(--site-card-shadow, none));
  transform: translateY(-2px);
}

.cmp-page main .cmp-hub__card:focus-visible {
  outline-offset: 4px;
}

.cmp-hub__art {
  align-self: flex-start;
  width: auto;
  height: 92px;
  max-width: 70%;
  margin-bottom: 34px;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
}

.cmp-hub__title {
  font-family: var(--font-serif, var(--serif));
  font-size: clamp(26px, 2.3vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}

.cmp-hub__more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 28px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ink);
}

.cmp-hub__arrow {
  display: inline-block;
  color: var(--accent-terracotta, #BD6038);
  transition: transform .25s ease;
}

.cmp-hub__card:hover .cmp-hub__arrow {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .cmp-hub__list {
    grid-template-columns: minmax(0, 1fr);
    max-width: 620px;
  }

  .cmp-hub__card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 26px;
    row-gap: 10px;
    align-items: center;
    min-height: 0;
  }

  .cmp-hub__art {
    grid-row: 1 / span 2;
    width: 100%;
    max-width: none;
    height: 88px;
    margin: 0;
    object-position: center;
  }

  .cmp-hub__title {
    align-self: end;
  }

  .cmp-hub__more {
    align-self: start;
    margin-top: 0;
    padding-top: 0;
  }
}

@media (max-width: 420px) {
  .cmp-hub__card {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 18px;
    padding: 22px;
  }

  .cmp-hub__art {
    height: 64px;
  }

  .cmp-hub__title {
    font-size: 24px;
  }
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cmp-rival-link strong,
  .cmp-rival-link__icon,
  .cmp-hub__card,
  .cmp-hub__arrow {
    transition: none;
  }

  .cmp-rival-link:hover .cmp-rival-link__icon,
  .cmp-hub__card:hover,
  .cmp-hub__card:hover .cmp-hub__arrow {
    transform: none;
  }
}