/* Phone-only fixes layered on the Claude Design home (styles.css).
   Everything sits inside max-width:720px so desktop stays identical to the design.
   Several design rules use !important, so these must too. */
/* 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; }
/* Text-message consent box on the phone step (all widths; the step is hidden at rest,
   so the landing view still matches the design). Sits on the blue form card. */
.sms-consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin: -4px 0 12px; color: rgba(255, 255, 255, .82); font-size: 12px; line-height: 1.45; text-align: left; cursor: pointer; }
.sms-consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #fff; cursor: pointer; }
.sms-consent a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* FAQ +/− button (all widths): the design flipped a text "+"/"−" 180° inside a bordered
   circle, which iPhone Safari drew as broken arcs. Draw the mark with two lines, no flip. */
.faq .acc-i .pl, .faq .acc-i.open .pl { transform: none; }
.faq .pl::before, .faq .pl::after {
  content: ""; position: absolute; left: 50%; top: 50%; display: block; width: 13px; height: 1.8px;
  margin: -.9px 0 0 -6.5px; border-radius: 2px; background: var(--ink); font-size: 0;
  transition: transform 220ms var(--ease), opacity 220ms;
}
.faq .pl::after { transform: rotate(90deg); }
.faq .acc-i.open .pl::after { transform: rotate(0deg); opacity: 0; }
.faq .acc-i.open .pl::before { content: ""; background: var(--ink); } /* an older rule paints it white-on-white */

/* Phone-only "How it works" cards that replace three long home sections (see
   scripts/mobile_deep_pages.py). Hidden on desktop, where the full sections stay inline. */
.m-deep { display: none; }

/* Menu sheet (#33): unrolls from the top bar and fades in; links rise in one after another.
   Closing plays it back faster. The menu icon's two lines turn into an ×. */
.sheet { opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity 260ms ease, clip-path 300ms cubic-bezier(.4, 0, .2, 1); }
.sheet.in { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity 240ms ease, clip-path 460ms cubic-bezier(.22, 1, .36, 1); }
.sheet .big, .sheet .sheet-cta { opacity: 0; transform: translateY(14px); transition: opacity 180ms ease, transform 180ms ease; }
.sheet.in .big, .sheet.in .sheet-cta { opacity: 1; transform: none; transition: opacity 420ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1); }
.sheet.in .big:nth-child(1) { transition-delay: 90ms; }
.sheet.in .big:nth-child(2) { transition-delay: 140ms; }
.sheet.in .big:nth-child(3) { transition-delay: 190ms; }
.sheet.in .big:nth-child(4) { transition-delay: 240ms; }
.sheet.in .sheet-cta { transition-delay: 300ms; }
.menu-btn { position: relative; transition: background 200ms ease, transform 150ms ease; }
.menu-btn:active { transform: scale(.94); }
.menu-btn svg { display: none; }
.menu-btn::before, .menu-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.8px; margin-left: -9px; border-radius: 2px; background: currentColor; transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.menu-btn::before { transform: translateY(-3.9px); }
.menu-btn::after { transform: translateY(2.1px); }
.menu-btn[aria-expanded="true"]::before { transform: translateY(-.9px) rotate(45deg); }
.menu-btn[aria-expanded="true"]::after { transform: translateY(-.9px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.in, .sheet .big, .sheet .sheet-cta, .menu-btn::before, .menu-btn::after { transition: none !important; }
}

/* Hero AI name (ChatGPT / Gemini / Claude / Grok), all widths: a step larger than the
   headline so the name reads first. The rotator measures its width from this size. */
.hero .hero-copy h1 .ai-rot { font-size: 1.15em; }

/* ---- Round 5 (Oliver 2026-09-29), phone and desktop ---- */
/* #38: "Buyers and sellers ask / AI who to hire first." */
.hero .hero-sub .sub-2 { display: block; }
/* #40: phone-only short stat copy (shown in the phone block below). */
.st3-short { display: none; }
/* #47: the form card gives a soft glow when a "Check your market" link lands on it. */
#contact.flash { animation: card-flash 1.3s cubic-bezier(.22, 1, .36, 1) 1; }
@keyframes card-flash {
  0% { box-shadow: 0 0 0 0 rgba(98, 181, 244, 0); }
  30% { box-shadow: 0 0 0 5px rgba(98, 181, 244, .5); }
  100% { box-shadow: 0 0 0 16px rgba(98, 181, 244, 0); }
}
/* #44: page-to-page moves (e.g. More about Recasi → Why Recasi) cross-fade instead of blinking. */
@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; }
  #contact.flash { animation: none; }
}

@media (max-width: 720px) {
  .m-deep { display: block; padding-block: 40px 16px; }
  body:not(.deep-page) .services, body:not(.deep-page) #compare { display: none; }
  .m-deep .eyebrow { margin-bottom: 14px; }
  .m-deep-list { display: grid; gap: 12px; }
  .m-deep-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 20px 18px 20px 20px; border-radius: 24px; color: #fff; text-decoration: none;
    background: radial-gradient(120% 90% at 90% 0%, #2f73c4, #143e72 55%, #0f2a4a);
    box-shadow: 0 24px 44px -34px rgba(10, 30, 60, .55);
  }
  .m-deep-card:nth-child(2) { background: radial-gradient(120% 90% at 90% 0%, #65a5e7, #397dcc 55%, #245fae); }
  .m-deep-card:nth-child(3) { background: radial-gradient(120% 90% at 90% 0%, #8cc3f3, #5a9de3 55%, #3f86d6); }
  .m-deep-n { align-self: start; padding-top: 3px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; }
  .m-deep-t { display: grid; gap: 6px; min-width: 0; }
  .m-deep-t b { font-size: 19px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
  .m-deep-t span { font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .8); }
  .m-deep-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--forest); }
  .m-deep-go svg { width: 16px; height: 16px; }
  .m-deep-card:active { transform: scale(.985); }

  .sms-consent { font-size: 12.5px; }

  /* "Everything included" table (#29): fixed plan columns so headers and values never collide;
     the plan header stays pinned while the list scrolls. */
  .ov-panel { padding: 26px 20px 20px !important; border-radius: 28px !important; }
  .pt-row { grid-template-columns: minmax(0, 1fr) repeat(3, 62px) !important; min-height: 48px; font-size: 14.5px; line-height: 1.35; }
  .pt-row span { padding: 10px 2px; }
  .pt-row span:first-child { padding-right: 8px; }
  .pt-row span:not(:first-child) { font-size: 12.5px; line-height: 1.25; }
  .pt-head { position: sticky; top: 0; z-index: 2; min-height: 40px; background: rgba(244, 247, 251, .96); font-size: 10px !important; letter-spacing: .05em !important; }
  .pt-head span:not(:first-child) { font-size: 10px !important; color: var(--forest) !important; }
  .pt-yes { font-size: 16px; }

  /* Swipe row of "Get recommended" cards (#34): the row clips at its edges, and it left only
     18px under the cards, so their shadow ended in a hard grey band. Give the shadow room
     and pull the following content back up so spacing is unchanged. */
  .sw-cards .rank { box-shadow: 0 8px 18px -14px rgba(15, 42, 74, .35) !important; }
  .trio { padding-top: 14px !important; padding-bottom: 56px !important; margin-top: -9px; margin-bottom: -38px; }

  /* ChatGPT Ads "Organic / Sponsored" pair: side by side, label + title only. */
  .ads .modes { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .ads .mode { padding: 16px 14px !important; border-radius: 18px !important; }
  .ads .mode > b { display: block; font-size: 10.5px; line-height: 1.35; letter-spacing: .08em; }
  .ads .mode strong { margin-top: 8px; font-size: 16.5px; line-height: 1.2; text-wrap: balance; }
  .ads .mode p { display: none; }

  /* Pricing extras on phones (#17, #30): the three plan notes become small tags, and
     onboarding, both add-ons and both client add-ons become one list of slim rows,
     each a single line with its price or "Explore" on the right. */
  .pricing .price-how { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 22px; padding: 0; background: none; border: 0; }
  .pricing .price-how > div { display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 11px 6px 8px !important; border: 1px solid var(--line) !important; border-radius: 999px; background: #fff; }
  .pricing .price-how > div::before { content: "✓"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--sky-1); color: #fff; font-size: 9px; font-weight: 700; }
  .pricing .price-how b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
  .pricing .price-how p { display: none; }
  .pricing .price-note, .pricing .plan-addon, .pricing .client-addons .add-grid a {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center; gap: 12px;
    min-height: 58px; margin: 0 !important; padding: 12px 18px !important;
    border: 1px solid var(--line) !important; border-top-width: 0 !important; border-radius: 0 !important;
    background: #fff !important; box-shadow: none !important; transform: none !important;
  }
  .pricing .price-note { margin-top: 18px !important; border-top-width: 1px !important; border-radius: 18px 18px 0 0 !important; }
  .pricing .client-addons .add-grid a:last-child { border-radius: 0 0 18px 18px !important; }
  .pricing .price-note > div { display: contents; }
  .pricing .price-note b { font-size: 15.5px; font-weight: 600; }
  .pricing .price-note span, .pricing .price-note > p { display: none; }
  .pricing .plan-addons { display: block !important; margin: 0 !important; }
  .pricing .plan-addon { position: relative; }
  .pricing .plan-addon .addon-label, .pricing .plan-addon h3 + p, .pricing .plan-addon .addon-price span { display: none; }
  .pricing .plan-addon h3 { margin: 0; font-size: 15.5px; line-height: 1.25; }
  .pricing .plan-addon .addon-link { position: static; display: block !important; height: 0 !important; min-height: 0 !important; margin: 0; font-size: 0; }
  .pricing .plan-addon > div:first-child { min-width: 0; max-width: none !important; }
  .pricing .plan-addon h3 { white-space: nowrap; }
  .pricing .plan-addon .addon-link::after { content: ""; position: absolute; inset: 0; }
  .pricing .plan-addon .addon-price { margin: 0 !important; padding: 0 !important; border: 0 !important; text-align: right !important; }
  .pricing .plan-addon .addon-price b { font-size: 15px; white-space: nowrap; }
  .pricing .plan-addon .addon-price b::after { content: " ›"; color: var(--sky-1); }
  .pricing .client-addons { margin: 0 !important; padding: 0 !important; border: 0 !important; }
  .pricing .client-addons > p { display: none; }
  .pricing .client-addons .add-grid { display: block !important; margin: 0 !important; }
  .pricing .client-addons .add-grid a > span > span { display: none; }
  .pricing .client-addons .add-grid b { font-size: 15.5px; }
  .pricing .client-addons .add-grid em { font-size: 13.5px; }
  .pricing .client-addons .add-grid em::after { content: " ›"; }
  .sms-consent input { width: 20px; height: 20px; }

  /* Hero headline: bigger, and always the same four lines —
     "Be the top / agent that / <AI name> / recommends." — whichever AI name is showing. */
  .hero .hero-copy h1 { font-size: clamp(44px, 12.6vw, 58px); line-height: 1.02; }
  .hero .hero-copy h1 .lead-2 { display: block; }
  .hero .hero-copy h1 .hero-recommendation { display: block; white-space: nowrap; }
  .hero .hero-copy h1 .ai-rot { display: block !important; margin-inline: auto; }
  .hero .hero-copy h1 .hero-recommendation .hero-verb { display: block; }
  /* Subline: "who to hire first." on its own line instead of leaving "first." alone. */
  .hero .hero-sub { font-size: 20px; line-height: 1.35; }
  .hero .hero-sub .sub-2 { display: block; }
  /* Buttons: the secondary link sat far below the main button; pull it up as one group. */
  .hero .hero-actions { gap: 2px; margin-top: 28px; }
  .hero .hero-actions .quiet { min-height: 46px; }
  /* No iPad mockup on phones; the phone mockup alone tells the story. */
  .hero .device-stage .ipad { display: none; }
  /* Hero phone mockup: the whole ChatGPT answer shows (no "…" cut), in a shorter frame. */
  .hero .pair .iphone { aspect-ratio: auto; }
  .hero .pair .iphone .phone-screen { min-height: 0; padding-bottom: 30px !important; }
  .hero .pair .iphone .phone-answer { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .hero .pair .iphone .phone-compose { margin-top: 22px !important; }
  .hero .device-stage { min-height: 0; margin-top: 28px; }

  /* Sections are in place on arrival: no slide/fade-in on scroll (it shifted cards
     under the reader's thumb and left text half-faded). */
  .rv, .rv.in { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* "Pages built to be quoted" card: the looping tag fade and highlight sweep caught
     mid-frame (ghost tag, a box floating under a wrapped title). Show the finished state:
     solid tag, and a highlighter that follows each line of the title. */
  .bc-page > *, .bc-page::after, .bc-page b { animation: none !important; opacity: 1 !important; transform: none !important; }
  .bc-page .pg-l { transform: none !important; }
  .bc-page { padding-top: 58px !important; }
  .bc-page b {
    background: none !important;
    text-decoration-line: underline;
    text-decoration-color: rgba(98, 181, 244, .5);
    text-decoration-thickness: .34em;
    text-underline-offset: -.14em;
    text-decoration-skip-ink: none;
  }

  /* Top bar: over the blue hero the glass was white under a white logo. Tint it navy until the bar turns solid. */
  .nav:not(.scrolled)::before {
    background: rgba(12, 34, 62, .34);
    border-bottom-color: rgba(255, 255, 255, .14);
    box-shadow: none;
  }

  /* Comparison table: the design's "compact compare table" rule forced 3 columns at every width,
     crushing text to one word per line. Restore the design's own stacked phone layout. */
  .compare-panel { border-radius: 26px; }
  .compare-head { display: none !important; }
  .compare-row {
    grid-template-columns: 1fr !important;
    padding: 22px 18px 18px;
  }
  .compare-topic, .compare-gap, .compare-work { padding: 0 !important; }
  .compare-topic { display: block; margin-bottom: 14px; font-size: 18px; letter-spacing: -.01em; }
  .compare-gap, .compare-work {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 6px;
    align-items: start;
    font-size: 15.5px !important;
    line-height: 1.5;
  }
  .compare-gap { padding: 0 2px 16px !important; }
  .compare-work { margin: 0 -6px; padding: 14px 12px !important; border-radius: 16px; }
  .compare-mobile-label {
    display: block;
    grid-column: 1 / -1;
    color: var(--quiet);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .compare-work .compare-mobile-label { color: var(--sky-1); }
  .compare-gap::before { content: "\2013"; grid-column: 1; grid-row: 2; color: #9aa5b3; text-align: center; }
  .compare-gap > span:not(.compare-mobile-label),
  .compare-work > span:not(.compare-mobile-label) { grid-column: 2; grid-row: 2; min-width: 0; }
  .compare-check { grid-column: 1; grid-row: 2; margin-top: 1px; }

  /* Stat cards (#40): compact and all left-aligned — short label, number with the short
     line beside it, source under the line. Copy is the phone-only short version. */
  .st3 { gap: 12px; }
  .st3-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 4px;
    align-items: center; min-height: 0 !important; padding: 18px 20px !important; border-radius: 22px; text-align: left !important; }
  .st3-card > * { text-align: left !important; justify-self: start; margin: 0 !important; }
  .st3-k { grid-column: 1 / -1; margin-bottom: 10px !important; font-size: 11px; }
  .st3-n { grid-column: 1; grid-row: 2 / span 2; padding-top: 0 !important; font-size: 56px; line-height: .9; }
  .st3-copy { grid-column: 2; grid-row: 2; align-self: end; max-width: none; font-size: 15.5px; line-height: 1.4; }
  .st3-meter { display: none !important; }
  .st3-src { grid-column: 2; grid-row: 3; align-self: start; margin-top: 4px !important; font-size: 12px; }
  .st3-long { display: none; }
  .st3-short { display: inline; }

  /* Tap targets: footnote numbers and small text links get a 44px hit area without moving the layout. */
  .st3-n sup a, .stat-hero-number sup a, .stat-number sup a, .sx-n sup a {
    display: inline-block;
    padding: 12px 10px;
    margin: -12px -10px;
  }
  .see-all, .addon-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .see-all { margin-bottom: 10px; }

  /* Legal and Sources pages share this sheet: back link, footer links, publisher links. */
  .sub-nav .back, .sub-foot a, .sub-main a[target="_blank"] {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
  }
}

/* ---- Round 5, phones ---- */
@media (max-width: 720px) {
  /* #39: the AI name line was 1.3× tall under a 1.15× name, opening a gap above and below it.
     Tighter line; the roll steps by the same height (--rot-step, read by app.js). */
  .hero .hero-copy h1 .ai-rot { --rot-step: 1.1em; height: 1.1em !important; line-height: 1.1em !important; top: 0 !important;
    margin-block: .02em; -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent); }
  .hero .hero-copy h1 .ai-rot > .ai-reel > span { height: 1.1em !important; line-height: 1.1em !important; }
  /* #42: drop the ads intro line. */
  .ads .headline-a .lede { display: none; }
  /* #46: no "Priced by your market / Grows… / Tracking…" pills; OpenAI Ads becomes a small
     card right under the three plans, the other extras stay one list below it. */
  .pricing .price-how { display: none !important; }
  .pricing .wrap { display: flex; flex-direction: column; }
  .pricing .wrap > .price-grid { order: 1; }
  .pricing .wrap > .plan-addons { display: contents !important; }
  .pricing .wrap > .headline-a { order: 0; }
  .pricing .plan-addons > .plan-addon:nth-child(2) { order: 2; margin: 14px 0 6px !important; min-height: 0 !important;
    border-radius: 18px !important; background: linear-gradient(135deg, #0f2a4a, #1c58a8) !important; border: 0 !important; color: #fff; }
  .pricing .plan-addons > .plan-addon:nth-child(2) h3,
  .pricing .plan-addons > .plan-addon:nth-child(2) .addon-price b { color: #fff !important; }
  .pricing .plan-addons > .plan-addon:nth-child(2)::before { content: "Add-on"; display: block; grid-column: 1 / -1; margin-bottom: 2px;
    font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #99c3e8; }
  .pricing .wrap > .price-note { order: 3; }
  .pricing .plan-addons > .plan-addon:nth-child(1) { order: 4; }
  .pricing .wrap > .client-addons { order: 5; }
  /* #44: cards give a small press response before the page changes. */
  .about-link { transition: transform 160ms ease; }
  .about-link:active { transform: scale(.985); }
  /* Anchor landings clear the nav. */
  #contact { scroll-margin-top: 84px; }

  /* #41: How it works preview sheet (home-extras.js). */
  html.dsheet-lock, html.dsheet-lock body { overflow: hidden; }
  .dsheet { position: fixed; inset: 0; z-index: 90; }
  .dsheet-bg { position: absolute; inset: 0; background: rgba(8, 20, 38, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .dsheet-panel { position: absolute; inset: max(28px, env(safe-area-inset-top, 0px)) 0 0; display: flex; flex-direction: column;
    border-radius: 26px 26px 0 0; background: #f6f8fb; overflow: hidden; box-shadow: 0 -10px 40px -18px rgba(5, 20, 40, .5); }
  .dsheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; height: 58px; padding: 0 12px 0 20px;
    background: linear-gradient(135deg, #0f2a4a, #1c58a8); color: #fff; }
  .dsheet-step { display: flex; align-items: center; gap: 10px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
  .dsheet-dots { display: inline-flex; gap: 5px; }
  .dsheet-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); transition: width 260ms cubic-bezier(.22, 1, .36, 1), background 260ms; }
  .dsheet-dots i.on { width: 18px; background: #fff; }
  .dsheet-x { position: relative; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
  .dsheet-x::before, .dsheet-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.8px; margin: -.9px 0 0 -7px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
  .dsheet-x::after { transform: rotate(-45deg); }
  .dsheet-x:focus:not(:focus-visible) { outline: none; }
  .dsheet-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .dsheet-body { padding: 22px 0 6px; }
  .dsheet-body > .deep, .dsheet-body > .wrap { display: grid !important; gap: 18px; width: auto !important; margin: 0 16px !important; padding: 0 !important; }
  .dsheet-body .deep-copy, .dsheet-body .stagep { opacity: 1 !important; transform: none !important; }
  .dsheet-body .h2 { font-size: 30px !important; line-height: 1.08; }
  .dsheet-foot { padding: 6px 16px 24px; }
  .dsheet-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; width: 100%; padding: 18px 18px; border: 0;
    border-radius: 20px; text-align: left; text-decoration: none; color: #fff; background: linear-gradient(135deg, #0f2a4a, #1c58a8); font: inherit; cursor: pointer; }
  .dsheet-next .k { grid-column: 1; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #99c3e8; }
  .dsheet-next b { grid-column: 1; font: 600 17px/1.25 var(--sans); }
  .dsheet-next i { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #0f2a4a; }
  .dsheet-next i svg { width: 18px; height: 18px; }
}

/* ---- Round 5 picks (Oliver chose A, 2026-09-28): answer cards + plan switcher, phones only ---- */
.mx-ans, .mx-plans { display: none; }
@keyframes mx-pulse { 0% { box-shadow: 0 0 0 0 rgba(60, 130, 209, .5); } 70% { box-shadow: 0 0 0 8px rgba(60, 130, 209, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 130, 209, 0); } }
@keyframes mx-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes mx-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes mx-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  /* The phones and the 3-column table give way to the boxes. */
  .hero .device-stage .pair, #ads .ads-iphone, #ov-plans .plan-table { display: none !important; }
  .mx-ans { display: block; text-align: left; color: #0f1623; background: #fff; border: 1px solid rgba(15, 42, 74, .1);
    border-radius: 22px; padding: 16px; box-shadow: 0 16px 34px -22px rgba(5, 20, 40, .55); font: 400 14.5px/1.55 var(--sans, Inter, system-ui, sans-serif); }
  .mx-hero { min-height: 372px; margin-inline: auto; max-width: 440px; }
  .mx-ads { margin-top: 4px; }
  .mx-top { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #d7dee8;
    font: 600 10.5px/1.2 var(--sans, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #707b8a; }
  .mx-pulse { width: 8px; height: 8px; border-radius: 50%; background: #3c82d1; flex: none; animation: mx-pulse 2.2s ease-out infinite; }
  .mx-q { display: flex; justify-content: flex-end; }
  .mx-ads .mx-q { margin-top: 14px; }
  .mx-q p { margin: 0; max-width: 88%; min-height: 22px; background: #0f2a4a; color: #fff; border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: 14.5px; line-height: 1.4; }
  .mx-caret { display: inline-block; width: 2px; height: 14px; margin-left: 2px; vertical-align: -2px; background: #62b5f4; animation: mx-blink 1s steps(1) infinite; }
  .mx-dots { display: flex; gap: 5px; margin: 16px 0 0 4px; height: 10px; }
  .mx-dots i { width: 7px; height: 7px; border-radius: 50%; background: #b8c4d3; animation: mx-bob 620ms ease-in-out infinite alternate; }
  .mx-dots i:nth-child(2) { animation-delay: 160ms; } .mx-dots i:nth-child(3) { animation-delay: 320ms; }
  .mx-a { margin-top: 12px; animation: mx-rise 320ms cubic-bezier(.22, 1, .36, 1) both; }
  .mx-by { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font: 600 12px/1 var(--sans, Inter, sans-serif); color: #707b8a; }
  .mx-gpt { width: 18px; height: 18px; border-radius: 50%; background: #0f1623; display: grid; place-items: center; }
  .mx-gpt::after { content: ""; width: 8px; height: 8px; border: 1.6px solid #fff; border-radius: 50%; }
  .mx-body { border: 1px solid #d7dee8; border-radius: 4px 16px 16px 16px; padding: 12px 14px; }
  .mx-body strong { font-weight: 600; background: #dcebfb; box-shadow: 0 0 0 3px #dcebfb; border-radius: 2px; color: #0f2a4a; }
  .mx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #edf1f6; }
  .mx-chips span { font-size: 11px; line-height: 1.4; color: #707b8a; padding: 3px 9px; border: 1px solid #d7dee8; border-radius: 999px; white-space: nowrap; }
  .mx-note { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: #707b8a; }
  .mx-spon { margin-top: 12px; border-radius: 14px; background: #e6eef8; padding: 12px; }
  .mx-spon small { font: 600 10px/1 var(--sans, Inter, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #707b8a; }
  .mx-pick { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; }
  .mx-av { width: 32px; height: 32px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #62b5f4, #1c58a8); color: #fff; font: 600 12px/32px var(--sans, Inter, sans-serif); text-align: center; }
  .mx-pick b { display: block; font-size: 14px; line-height: 1.3; color: #1c58a8; }
  .mx-pick b + span { font-size: 12.5px; color: #56606e; }
  .mx-go { display: grid; place-items: center; min-height: 44px; border-radius: 999px; background: #0f2a4a; color: #fff !important; font: 600 13.5px/1 var(--sans, Inter, sans-serif); text-decoration: none; }
  .mx-go:active { transform: scale(.98); }

  /* Everything included: one plan at a time. */
  .mx-stale { opacity: .3; transition: opacity 300ms ease; }
  .mx-stale .mx-a { animation: none; }
  .mx-plans { display: block; width: 100%; justify-self: stretch; margin-top: 14px; }
  .mx-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: #e6eef8; }
  .mx-tiers button { appearance: none; border: 0; background: transparent; cursor: pointer; text-align: center; padding: 9px 0 8px; border-radius: 12px; min-height: 48px;
    transition: background 220ms, box-shadow 220ms; font: inherit; }
  .mx-tiers button b { display: block; font: 600 13.5px/1.1 var(--sans, Inter, sans-serif); color: #0f1623; }
  .mx-tiers button span { font: 500 12px/1.3 var(--sans, Inter, sans-serif); color: #56606e; font-variant-numeric: tabular-nums; }
  .mx-tiers button[aria-pressed="true"] { background: #fff; box-shadow: 0 2px 8px -2px rgba(15, 42, 74, .25); }
  .mx-tiers button[aria-pressed="true"] b { color: #1c58a8; }
  .mx-tiers button:focus-visible { outline: 2px solid #1c58a8; outline-offset: 1px; }
  .mx-sum { margin: 12px 2px 6px; font-size: 13px; line-height: 1.4; color: #56606e; }
  .mx-sum b { color: #0f1623; }
  .mx-feat { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
  .mx-feat li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; min-height: 42px; border-bottom: 1px solid #edf1f6; font-size: 14.5px; line-height: 1.3; color: #0f1623; }
  .mx-feat li.off { color: #aab4c1; }
  .mx-ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #e6eef8; color: #1c58a8; font-size: 11px; font-weight: 700; }
  .mx-feat li.off .mx-ic { background: transparent; color: #c3ccd7; }
  .mx-val { font-size: 12.5px; font-weight: 600; color: #1c58a8; }
  .mx-new { font: 600 10.5px/1 var(--sans, Inter, sans-serif); color: #fff; background: #3c82d1; padding: 4px 7px; border-radius: 999px; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .mx-pulse, .mx-caret, .mx-dots i, .mx-a { animation: none !important; }
}