/* Round 6 (Viggo on his iPhone, 23 Oct 2026): the homepage fits the phone.
   The same rules he approved for the subpages in round 5, on the homepage:
   - one Start free trial on screen at a time: the header's steps aside
     while the page's own is on screen (aegean.js), on every width;
   - at 390 x 844 every animated card, demo panel and image fits in 60% of
     the screen (506 px). Shrink, don't cut. Phones only: desktop and the
     iPad stay as they are.
   Its own file, so the lines of aegean.css that the subpages copy stay put. */

/* ---------- The header's Start free trial ---------- */
/* It keeps its space while hidden, so the brand and the menu never move. */
.js .header-actions .pill[data-tuck] { transition: opacity .2s var(--ease, ease), visibility 0s linear .2s; }
.js .header-actions .pill[data-tuck]:not(.is-shown) { opacity: 0; visibility: hidden; pointer-events: none; }
.js .header-actions .pill[data-tuck].is-shown { transition-delay: 0s; }
html.motion-off .header-actions .pill[data-tuck] { transition: none; }
@media (prefers-reduced-motion: reduce) { .header-actions .pill[data-tuck] { transition: none; } }

/* ---------- Services: the price list became one link ---------- */
.pd .products > .text-link { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 600px) { .pd .products { margin-top: 20px; padding-top: 14px; } }

/* ---------- The two cards under "Built for businesses": a little shorter ---------- */
/* The cards sit a little higher, so Play again and Pause sit clear under them. */
@media (max-width: 600px) {
  #catch .tile { aspect-ratio: 4 / 3.5; }
  #catch .replay, #catch .scene-pause { bottom: 10px; }
  #catch .story { top: calc(50% - 24px); padding: 13px; gap: 8px; font-size: 13.5px; }
  #catch .story .ui-band { padding-top: 9px; padding-bottom: 9px; }
  #catch .float-cal { top: calc(50% - 24px); padding: 13px 14px; }
  #catch .fc-grid { row-gap: 5px; }
  #catch .fc-slot { height: 32px; }
  #catch .fc-foot { margin-top: 9px; }
}

/* ---------- Phone answering: the call story plays in one space ---------- */
/* On a phone its two halves, the call (ring, words, name, need, address)
   and the booking (booked, calendar, Owner HQ), share one space; the open
   step says which shows (aegean.js sets data-view). The first line ("Your
   line rings after hours") sits where the words will come, so the card
   keeps one height from the first step to the last. */
@media (max-width: 639.98px) {
  .mx .cs-grid { grid-template-areas: "stage"; gap: 0; }
  .mx .cs-call, .mx .cs-out { grid-area: stage; transition: opacity .45s var(--o-ease), visibility 0s linear .45s; }
  .mx .call-story .cs-out, .mx .call-story[data-view="out"] .cs-call { opacity: 0; visibility: hidden; }
  .mx .call-story[data-view="out"] .cs-out { opacity: 1; visibility: visible; transition-delay: 0s; }
  .mx .cs-out { align-content: center; }
  .mx .cs-log { position: relative; }
  .mx .cs-log .cs-pre { position: absolute; left: 12px; right: 12px; top: 10px; }
  /* before the details are taken, their rows wait as faint blanks (Name,
     Need, Address), so the card is a call sheet about to be filled, not an
     empty box */
  .js .mx .call-story.cs-play:not(.s3) .cs-fields > div { opacity: .45; transform: none; }
  .js .mx .call-story.cs-play .cs-fields dd { transition: opacity .5s var(--o-ease); }
  .js .mx .call-story.cs-play:not(.s3) .cs-fields dd { opacity: 0; }
  .js .mx .call-story.s3 .cs-fields > div:nth-child(2) dd { transition-delay: .35s; }
  .js .mx .call-story.s3 .cs-fields > div:nth-child(3) dd { transition-delay: .7s; }
}
@media (prefers-reduced-motion: reduce) { .mx .cs-call, .mx .cs-out { transition: none !important; } }
html.motion-off .mx .cs-call, html.motion-off .mx .cs-out { transition: none !important; }
@media (max-width: 600px) {
  .mx .call-story { padding: 12px; border-radius: 20px; }
  .mx .cs-strip { padding: 10px 12px; gap: 10px; }
  .mx .cs-log { padding: 10px 12px; gap: 5px; }
  .mx .cs-line { font-size: 13px; line-height: 1.4; }
  .mx .cs-fields > div { padding: 7px 11px; grid-template-columns: 62px 1fr; }
  .mx .cs-link { height: 14px; }
  .mx .cs-cal { padding: 10px 12px; }
  .mx .cs-foot { gap: 8px; margin-top: 12px; }
  .mx .cs-sample { font-size: 11px; line-height: 1.25; min-width: 0; }
  .mx .cs-controls { gap: 6px; flex: none; }
}

/* ---------- Website chat: one row of businesses, a tighter window ---------- */
/* The kinds of business sit on one row that scrolls sideways; the replies
   still wait in their own places, so nothing moves while it types. */
@media (max-width: 600px) {
  .mx .cw { gap: 10px; }
  .mx .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 2px 14px; scroll-padding: 0 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mx .chips::-webkit-scrollbar { display: none; }
  .mx .chip { flex: none; padding: 6px 13px; }
  .mx .chatwin-top { padding: 9px 12px; }
  .mx .chatwin-top div span { font-size: .75rem; }
  .mx .chat-body { gap: 6px; padding: 10px 12px; min-height: 0; }
  .mx .msg { max-width: 92%; padding: 7px 10px; font-size: .8125rem; line-height: 1.38; }
  .mx .chat-pre { left: 12px; right: 12px; top: 10px; font-size: .8125rem; }
  .mx .msg.typing { left: 12px; padding: 10px 11px; }
  .mx .record { margin: 0 12px 12px; padding: 8px 10px; font-size: .75rem; }
  .mx .record-head { margin-bottom: 4px; }
  .mx .record dl { gap: 4px 8px; }
  .mx .record dt { font-size: .6875rem; }
  .mx .cw-note { font-size: .75rem; }
}

/* ---------- Lister: the photos in a row over the draft ---------- */
@media (max-width: 600px) {
  .mx .lq-top { padding: 9px 12px; }
  .mx .lq-body { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 11px 12px 12px; }
  .mx .lq-photos { grid-template-columns: repeat(3, 52px) minmax(0, 1fr); gap: 6px; align-items: end; }
  .mx .lq-photos .ph { width: 52px; aspect-ratio: 4 / 5; }
  .mx .lq-photos p { align-self: end; }
  .mx .lq-draft { gap: 5px; }
  .mx .lq-title { font-size: 1.125rem; line-height: 1.18; }
  .mx .lq-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; font-size: .75rem; }
  .mx .lq-specs dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mx .lq-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .75rem; }
  .mx .lq-price { gap: 10px; padding: 7px 10px; }
  .mx .lq-range strong { font-size: 1.25rem; }
  .mx .lq-comps { font-size: .6875rem; }
  .mx .lq-approve, .mx .lq-ask { padding: 6px 14px; font-size: .8125rem; }
  .mx .lq-post { gap: 6px; padding-top: 8px; }
  .mx .lq-status { font-size: .75rem; }
  .mx .lq-copy { gap: 4px; font-size: .6875rem; }
  .mx .lq-copy b { padding: 2px 7px; }
}

/* ---------- How it works: the set-up checklist ---------- */
@media (max-width: 600px) {
  .mx .su { padding: 14px; border-radius: 18px; }
  .mx .su-top { margin-bottom: 10px; }
  .mx .su-steps li { gap: 10px; padding: 10px 0; }
  .mx .su-steps li:not(:last-child)::before, .mx .su-steps li:not(:last-child)::after { top: 40px; }
}

/* ---------- The closing: the two product tiles ---------- */
@media (max-width: 600px) {
  .closing .tile.product-tile { min-height: 0; padding: 14px; gap: 10px; }
  .closing .tile-label { font-size: 2rem; margin-bottom: 0; }
  .closing .tile-sample { top: 16px; right: 14px; }
  .closing .pc-summary { padding: 12px 14px; gap: 7px; font-size: 12.5px; }
  .closing .pc-t { font-size: 18px; }
  .closing .pc-widget { margin-top: -26px; }
  /* Lister's draft: smaller photos and title, the specs two pairs a row, the description two lines */
  .closing .lister-tile .lr-photos .ph { width: 46px; height: 56px; }
  .closing .lister-tile .lr-draft { padding: 12px 13px; gap: 6px; }
  .closing .lister-tile .lr-title { font-size: 1.125rem; }
  .closing .lister-tile .lr-price { padding: 8px 10px; gap: 2px; }
  .closing .lister-tile .lr-price > div { display: flex; align-items: baseline; gap: 8px; }
  .closing .lister-tile .lr-price strong { font-size: 1.25rem; }
  .closing .lister-tile .lr-price p { font-size: 12px; }
  .closing .lister-tile .lr-specs { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 3px 10px; font-size: 12.5px; }
  .closing .lister-tile .lr-specs dd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .closing .lister-tile .lr-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
}

/* ---------- Second pass at 390 px: the last few lines that wrapped ---------- */
@media (max-width: 600px) {
  /* chat: the business's name on one line, the lead-sheet row in two */
  .mx .chatwin-top strong { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mx .chatwin-top > div { min-width: 0; }
  .mx .chatwin-top .tag { padding: 3px 8px; font-size: .6875rem; }
  .mx .chat-body { gap: 5px; padding: 8px 10px; }
  .mx .msg { padding: 6px 9px; }
  .mx .chat-pre { left: 10px; right: 10px; top: 8px; }
  .mx .msg.typing { left: 10px; }
  .mx .record dl > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; }
  /* Lister: Coming soon on the eBay line, the other places as plain words */
  .mx .lq-photos .ph { width: 46px; }
  .mx .lq-photos { grid-template-columns: repeat(3, 46px) minmax(0, 1fr); }
  .mx .lq-status { flex-wrap: nowrap; white-space: nowrap; }
  .mx .lq-status .soon { font-size: .625rem; padding: 2px 7px; }
  .mx .lq-copy { display: block; line-height: 1.4; }
  .mx .lq-copy span { margin-right: 4px; }
  .mx .lq-copy b { padding: 0; box-shadow: none; background: none; font-weight: 600; }
  .mx .lq-copy b:not(:last-child)::after { content: ", "; }
  .mx .lq-approve, .mx .lq-ask { padding: 5px 12px; }
  .mx .lq-comps { gap: 0; }
  /* the closing's Phone + chat: tighter cards, the chat over the summary's foot */
  .closing .pc-summary { gap: 6px; padding: 11px 13px; }
  .closing .pc-summary .kv { gap: 3px 12px; font-size: 12.5px; }
  .closing .pc-summary .ui-band { padding-top: 7px; padding-bottom: 7px; }
  .closing .pc-widget { width: 94%; margin-top: -30px; }
  .closing .widget-head { padding: 8px 12px; }
  .closing .widget-body { padding: 9px 10px; gap: 5px; }
  .closing .widget-body .msg { padding: 6px 9px; font-size: 12.5px; line-height: 1.35; max-width: 90%; }
  /* the closing's Lister: the category and Ready for you on one line, Coming soon on the eBay line */
  .closing .lister-tile { padding: 12px; }
  .closing .lister-tile .lr-cat { font-size: 10.5px; letter-spacing: .03em; }
  .closing .lister-tile .lr-ready { flex: none; font-size: 10.5px; padding: 2px 8px; }
  .closing .lister-tile .lr-draft { padding: 11px 12px; }
  .closing .lister-tile .lr-post { flex-wrap: nowrap; font-size: 12px; }
  .closing .lister-tile .lr-post b { min-width: 0; }
  .closing .lister-tile .lr-post .soon { flex: none; font-size: 10.5px; padding: 2px 7px; }
  .closing .lister-tile .lr-actions .lr-approve, .closing .lister-tile .lr-actions .lr-change { height: 30px; }
  /* the last few pixels */
  .mx-card.mx-sand { padding: 10px; }
  .mx .lq-top { padding: 7px 12px; }
  .mx .lq-body { gap: 7px; }
  .mx .lq-status { font-size: .6875rem; gap: 6px; }
  .mx .lq-comps { line-height: 1.3; font-size: .65625rem; }
  .mx .lq-price { padding: 6px 10px; }
  .mx .lq-post { padding-top: 7px; gap: 5px; }
  .mx .cw { gap: 8px; }
  .mx .chatwin-top { padding: 7px 12px; }
  .mx .msg { line-height: 1.32; }
  .mx .record { padding: 6px 10px; }
  .closing .tile.product-tile { padding: 12px; }
  .closing .tile-label { font-size: 1.75rem; }
  .mx .lq-desc { -webkit-line-clamp: 1; }
  .mx .lq-title { font-size: 1.0625rem; }
  .mx .lq-copy { font-size: .65625rem; }
  .mx-card.mx-shell { padding: 10px; }
  .mx .chips { margin: 0 -10px; padding: 2px 10px; scroll-padding: 0 10px; }
  .mx .cw { gap: 6px; }
  .mx .record { margin: 0 10px 10px; }
  .closing .widget-head > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
  .closing .pc-t { font-size: 17px; }
  .closing .lister-tile .lr-desc { -webkit-line-clamp: 1; font-size: 12.5px; }
  .closing .lister-tile .lr-draft { gap: 5px; }
  .closing .lister-tile .lr-copy { font-size: 11px; line-height: 1.35; }
  .closing .lister-tile .lr-photos .ph { width: 42px; height: 52px; }
}

/* ---------- Narrow phones: the hero's call pill fits its line ---------- */
/* (the film used to clip it; the card layout shows the whole row) */
@media (max-width: 379.98px) { .hero-actions .btn-call { padding: 0 18px; gap: 8px; font-size: .9375rem; } }
@media (max-width: 339.98px) { .hero-actions .btn-call { padding: 0 14px; gap: 7px; font-size: .875rem; } }


/* ---------- The call's waveform shows on phones too (part 2) ---------- */
/* aegean.css hides it under 421 px; Viggo (24 Oct): every animation plays on
   the phone as on desktop, only sized down. Slimmer bars, so it fits beside
   "Incoming call · 9:04 PM". */
@media (max-width: 420px) {
  .mx .cs-wave { display: flex; gap: 1.5px; height: 20px; }
  .mx .cs-wave i { width: 2.5px; }
  .mx .cs-wave i:nth-child(n+10) { display: none; }
  .mx .cs-strip { gap: 9px; }
  .mx .cs-strip b { font-size: 13px; }
  .mx .cs-ring { width: 34px; height: 34px; }
}
@media (max-width: 359px) { .mx .cs-wave i:nth-child(n+9) { display: none; } }