/* Phone-only tap-target fixes for the inner pages (AI SEO, Why Recasi, Video, Paid).
   Hit areas grow with padding + matching negative margin, so nothing moves visually. */
/* Phones draw a grey box over anything tapped (and a tilted one over the rotated close
   button). Turn that off everywhere; buttons get their own gentle press state instead. */
* { -webkit-tap-highlight-color: transparent; }
.cx-x:focus:not(:focus-visible) { outline: none; }
.cx-x:focus-visible { outline: 2px solid var(--sky-1); outline-offset: 3px; }
/* ---- Round 5 (Oliver 2026-09-29), phone and desktop ---- */
/* Page-to-page moves cross-fade (#44), matching home-mobile.css. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 160ms ease both; }
::view-transition-new(root) { animation: vt-in 340ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
/* Why Recasi anchors land clear of the nav when arriving from the home cards. */
#who, #team, #close-title { scroll-margin-top: 88px; }

/* AI SEO "Search, then / AI, now" (#48): three search rows, no extra caption. */
.cmp .slinks .srow:nth-child(n+4) { display: none; }
.cmp .cmp-card .kicker { display: none; }
/* "Who should I hire" answer graphics (#49): navy question bubble, solid navy "you" row. */
.aicard .aicard-q { justify-self: end; max-width: 92%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: #0f2a4a; color: #fff; font-weight: 500; }
.aicard .alist li { background: #eef2f7; }
.aicard .alist li.you { opacity: 1 !important; transform: none !important; background: #0f2a4a; box-shadow: 0 12px 26px -16px rgba(15, 42, 74, .6); }
.aicard .alist li.you b { color: #fff; }
.aicard .alist li.you em { background: #62b5f4; color: #0f2a4a; }
.tchat .tq { background: #0f2a4a; color: #fff; }
.tchat .ta b { background: #dcebfb; box-shadow: 0 0 0 3px #dcebfb; border-radius: 2px; color: #0f2a4a; }
/* "Only real estate. Only AI search." (#50): a contained navy card instead of a lone heading. */
#different .split-head { padding: clamp(26px, 4vw, 56px); border-radius: clamp(24px, 3vw, 34px); color: #fff;
  background: radial-gradient(60% 80% at 100% 0%, rgba(98, 181, 244, .35), transparent 70%), linear-gradient(140deg, #0f2a4a, #1c58a8); }
#different .split-head .h2 { color: #fff; }
#different .split-head .eyebrow { color: #99c3e8; }
#different .split-head .h2-q { color: rgba(255, 255, 255, .82); }
#different .split-head .lnk { margin-top: 14px; padding: 0 20px; min-height: 46px; border-radius: 999px; background: #fff; color: #0f2a4a; font-weight: 600; }

/* Why Recasi "One team, the whole job" (#52): Recasi vs one competitor at a time (inner-extras.js). */
.vs[data-pick] tr > :nth-child(n+3) { display: none; }
.vs[data-pick="3"] tr > :nth-child(3), .vs[data-pick="4"] tr > :nth-child(4), .vs[data-pick="5"] tr > :nth-child(5) { display: table-cell; }
.vs[data-pick] col.c-feat { width: 46%; }
.vs-pick { display: grid; justify-items: center; gap: 10px; margin: 0 auto 22px; }
.vs-pick-k { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-1, #1c58a8); }
.vs-pick-row { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(15, 42, 74, .12); }
.vs-pick button { appearance: none; border: 0; border-radius: 999px; padding: 10px 18px; background: transparent; color: #28313f;
  font: 600 14px/1 var(--sans, Inter, system-ui, sans-serif); cursor: pointer; white-space: nowrap; transition: background 220ms, color 220ms; }
.vs-pick button[aria-pressed="true"] { background: #0f2a4a; color: #fff; }
.vs-pick button:focus-visible { outline: 2px solid #3c82d1; outline-offset: 2px; }
.vs-pick .vs-s { display: none; }

@media (max-width: 720px) {
  /* Why Recasi hero (#36): whole headline white, and a shorter fade to white at the bottom
     (the sky itself gets more clouds and a deeper blue low down, in the page's shader). */
  #hero .h1 span { color: #fff !important; text-shadow: 0 2px 22px rgba(8, 30, 60, .38) !important; }
  #hero::after { height: 36px !important; }
  /* Shadows cut off by their container (#34): swipe rows get room under the cards;
     pictures inside cropped frames get a tighter shadow that fits. */
  .trio { padding-bottom: 56px !important; margin-bottom: -38px !important; }
  .stagep .gl-w, .t-vis .gl-w, .t-vis .tphone, .cta-sky .gl { box-shadow: 0 12px 24px -18px rgba(15, 42, 74, .38) !important; }
  /* Phone mockups inside blue cards: the 110px shadow was sliced at the card edge. */
  .stagep .phone, .hero .phone { box-shadow: 0 22px 34px -22px rgba(5, 20, 40, .55) !important; }
  /* Blue cards: the drifting blurred cloud layer spilled past the rounded edge as faint
     grey rectangles. Clip to the rounded shape, hold the clouds still, soften the card shadow. */
  .stagep { clip-path: inset(0 round 28px); box-shadow: none !important; }
  .clouds::before { animation: none !important; }
  .foot a, .only a {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }
  .tip { position: relative; }
  .tip::after { content: ""; position: absolute; inset: -13px; }

  /* ---- Round 5, phones ---- */
  /* #48: Search, then / AI, now side by side and small. */
  .cmp { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .cmp .cmp-card { gap: 10px; padding: 14px 12px 12px; border-radius: 20px; }
  .cmp .cmp-card h3 { font-size: 16px; }
  .cmp .slinks { gap: 6px; }
  .cmp .srow { gap: 5px; padding: 8px 9px; border-radius: 10px; }
  .cmp .aicard { gap: 7px; padding: 9px; border-radius: 14px; }
  .cmp .aicard .aicard-q { font-size: 12px; line-height: 1.35; padding: 7px 9px; }
  .cmp .alist { gap: 5px; }
  .cmp .alist li { min-height: 30px; padding: 5px 7px; gap: 6px; border-radius: 9px; }
  .cmp .alist .pic { width: 20px; height: 20px; font-size: 8px; }
  .cmp .alist b { font-size: 12px; white-space: nowrap; }
  .cmp .alist em { display: none; }
  .cmp .cap { font-size: 13px; line-height: 1.3; }
  #different .split-head { gap: 6px; }

  /* #52 switcher at phone width: three equal buttons across. */
  .vs-pick, .vs-pick-row { width: 100%; }
  .vs-pick-row { display: grid; grid-template-columns: repeat(3, 1fr); }
  .vs-pick button { padding: 11px 4px; font-size: 13px; white-space: nowrap; line-height: 1.2; }
  .vs-pick .vs-l { display: none; }
  .vs-pick .vs-s { display: inline; }
  .vs[data-pick] col.c-feat { width: 52%; }
}