/* 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 two pills (Call our AI, Start free trial) ---------- */
/* They keep their space while hidden, so the brand and the menu never move.
   25 Oct 2026: both move together (aegean.js), with opacity and a small
   transform only; no motion with reduced motion or the footer's Motion off. */
.js .header-actions .pill[data-tuck] { transition: opacity .2s var(--ease, ease), transform .2s var(--ease, ease), visibility 0s linear .2s; }
.js .header-actions .pill[data-tuck]:not(.is-shown) { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { html.js:not(.motion-off) .header-actions .pill[data-tuck]:not(.is-shown) { transform: translateY(-4px); } }
.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; } }

/* ---------- 25 Oct 2026, Viggo's review of the live site ---------- */
/* The short version: four plain facts in a calm row, no odometer. */
.facts { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; display: grid; gap: 0; grid-template-columns: 1fr; }
.facts li { padding: 18px 0; border-top: 1px solid var(--line); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.4; color: var(--fg); text-wrap: balance; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
@media (min-width: 1100px) { .facts { grid-template-columns: repeat(4, 1fr); } .facts li { padding-right: 12px; } }

/* "Call the number": three short points under the one call button. */
.call-points { list-style: none; margin: clamp(48px, 7vw, 80px) auto 0; padding: 0; display: grid; gap: 28px; max-width: 1040px; }
@media (min-width: 900px) { .call-points { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.call-points li { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line); }
.call-points .icon { width: 22px; height: 22px; color: var(--accent); stroke-width: 1.8; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.call-points h3 { margin: 4px 0 0; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; color: var(--fg); }
.call-points p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.5; }

/* Lister's own button, now in the Lister section. */
.mx-cta { margin: 24px 0 0; }

/* The trial form in "Try it free for 14 days" (TRIAL_FORM on). trial.css
   styles the form; the white card sits on the reef box, so its text and
   focus ring go back to ink on white here. */
.setup-offer .trial-inline { margin-top: 8px; width: 100%; max-width: 720px; text-align: left; }
.setup-offer .trial-inline h2 { font-size: clamp(1.35rem, 1.2rem + .8vw, 1.75rem); }
.setup-offer .trial-inline p { color: #4F5A57; max-width: none; }
.setup-offer .trial-inline .field-error { color: #A3361F; }
.setup-offer .trial-inline :focus-visible { box-shadow: none; outline: 2px solid #136B80; outline-offset: 2px; }
.setup-offer .trial-alt-inline { margin: 4px 0 0; }
.setup-offer .trial-alt-inline a { color: var(--reef-fg); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- PR B, 25 Oct 2026: one band per service (Viggo: "like Mercury") ---------- */
/* What we do: the dark section the film hands over to names the four services. */
.ov { display: grid; gap: clamp(28px, 4vw, 48px); }
.ov-head { display: grid; gap: 14px; max-width: 46em; }
.pd .ov-head .statement > span { display: block; }
.ov-head .lede { color: var(--muted); margin: 0; }
.ov-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .ov-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1180px) { .ov-grid { grid-template-columns: repeat(4, 1fr); } }
.ov-grid a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; height: 100%; box-sizing: border-box; padding: 20px; border-radius: 18px; text-decoration: none; color: var(--fg); background: color-mix(in srgb, var(--fg) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s var(--ease, ease), transform .25s var(--ease, ease); }
@media (any-hover: hover) { .ov-grid a:hover { background: color-mix(in srgb, var(--fg) 9%, transparent); transform: translateY(-2px); } }
.ov-grid .sm-icon { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.ov-grid .sm-text b { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.ov-grid .sm-text span { color: var(--muted); font-size: .9375rem; }
html.motion-off .ov-grid a { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .ov-grid a { transition: none; transform: none !important; } }

/* Each band: the service's name as a readable label, not a tiny eyebrow. */
.band-label { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 600; line-height: 1.3; color: var(--fg); }
.band-label .sm-icon { width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.band-label .sm-icon svg { width: 19px; height: 19px; }
.band-label .soon { margin-left: 2px; }
.band .mx-copy > .mx-lede, .ohq-band .pd-copy > .mx-lede { margin: 0; color: var(--muted); max-width: 34em; }
.band-more { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 0; font-weight: 600; }
/* clear separation: the page's colour changes band to band, and a thin rule
   sits at the top of each band, inside the gutters */
.band, .ohq-band { position: relative; }
.band::before, .ohq-band::before { content: ""; position: absolute; top: 0; left: max(var(--gutter, 20px), calc((100% - 1240px) / 2)); right: max(var(--gutter, 20px), calc((100% - 1240px) / 2)); height: 1px; background: var(--line); pointer-events: none; }

/* The Owner HQ band: the recordings' layout, as the Services section had it. */
.ohq-band { overflow-x: clip; }
.ohq-band .statement > span { display: block; }
.ohq-band .acc { border-top: 0; }
/* The overview is tall enough that the film has let go, and the page's colour has
   settled to its night, before the first band's colour starts to come in (blend:
   from 75% down the window): the film's hand-over gap (film.js) plus most of a
   screen. The heading stays right under the dashboard with the tiles under it; the
   room left below is where the colour moves into the first band's. */
.pd .ov { padding-bottom: clamp(56px, 8vw, 128px); box-sizing: border-box; align-content: start; min-height: calc(78vh + var(--handover-gap, 0px)); min-height: calc(78svh + var(--handover-gap, 0px)); }
/* side by side (900 px up), a wider words column, so the steps sit level with the recording */
@media (min-width: 900px) { .ohq-band .pd-grid { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); } }