/* Phone System for HVAC: "the call that answers itself on the roof". Graphite night with the phone's answer green as
   the only accent and faint signal rings spreading from the call card. Hero layout: a full-width headline on top,
   then the short pitch LEFT and a wide live-call card RIGHT, so it reads differently from Leads (sunset), Ads (royal
   blue technician), SEO Audit (teal AI card right), Rank Tracker (violet dusk leaderboard), Review Manager (charcoal
   phone left), Smart Inbox (wine, centered copy over a wide window), Pipeline (evergreen, sticky notes, full-bleed
   board), Ignite (daylight map) and Scheduling (navy, three columns, clock face).
   Below the hero it is the same road-map system as hvac-scheduling.css: phones stack the stops along a vertical road;
   from 1280px each stop is a full-width row and hvac-phone.js draws the winding road from measured positions. */

.rb-phone-page {
  --rb-bg: #0c1016;
  background: var(--rb-bg);
  color: #eef3f0;
}
.ph-main { min-width: 0; }
.ph-main > footer { width: auto; margin: 0; padding-inline: 24px; }
.ph :is(a, button, summary, input, select, label):focus-visible { outline: 3px solid #86efac; outline-offset: 3px; }

/* ---------------------------------------------------------------- shared */
.ph {
  --ink: #141b2b;
  --ink2: #3a4458;
  --muted: #647089;
  --night: #0c1016;
  --green: #22c55e;
  --green-deep: #15803d;
  --green-soft: #86efac;
  --ice: #b9c6de;
  --go: #16a34a;
  --asphalt: #464b55;
  --road-edge: #f8f9fc;
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  background:
    radial-gradient(ellipse 40% 30% at 0% 30%, rgba(34, 197, 94, .07), transparent 70%),
    radial-gradient(ellipse 40% 30% at 100% 64%, rgba(20, 184, 166, .06), transparent 70%),
    linear-gradient(180deg, #f2f4f9 0%, #f8f9fc 40%, #f3f5f9 72%, #edf0f6 100%);
}
.ph *, .ph *::before, .ph *::after { box-sizing: border-box; }
:where(.ph) :where(h1, h2, h3, p, ul, ol, dl, dd, dt, figure, blockquote, fieldset, legend) { margin: 0; padding: 0; }
:where(.ph) :where(ul, ol) { list-style: none; }
:where(.ph) fieldset { border: 0; min-width: 0; }
.ph img { display: block; max-width: none; }
.ph svg { display: block; overflow: visible; }
.ph h1, .ph h2, .ph h3, .ph-pin b, .ph-brand__logo {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.ph h1 em, .ph h2 em { font-family: inherit; font-style: normal; letter-spacing: inherit; }
.ph-i { width: 22px; height: 22px; flex: 0 0 auto; }
.ph-cap { color: var(--muted); font-size: 12px; }
.ph button { font-family: inherit; cursor: pointer; }
.ph [hidden] { display: none !important; }

.ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(180deg, #4ee58a 0%, #1fbf5f 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 10px 24px rgba(34, 197, 94, .32);
  color: #06140b;
  font: 700 16px/1.1 "DM Sans", sans-serif;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ph-btn:hover { color: #06140b; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .32) inset, 0 14px 30px rgba(34, 197, 94, .45); }
.ph-btn .ph-i { width: 18px; height: 18px; }
.ph-btn--ghost { border-color: rgba(185, 198, 222, .5); background: rgba(12, 16, 22, .35); box-shadow: none; color: #fff; }
.ph-btn--ghost:hover { color: #fff; }
.ph-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); box-shadow: none; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ph-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green-deep); font-size: 15px; font-weight: 700; text-decoration: none; }
.ph-link:hover { text-decoration: underline; }
.ph-link .ph-i { width: 16px; height: 16px; }

.ph-note { font-family: "Caveat", cursive; font-weight: 700; font-size: 30px; line-height: .95; color: #10241a; }
.ph-note u { color: var(--green-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.ph-checks { display: flex; flex-direction: column; gap: 9px; }
.ph-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; font-weight: 500; line-height: 1.3; }
.ph-checks svg { width: 20px; height: 20px; flex: 0 0 auto; }
.ph-ok { color: var(--go); }
.ph-no { color: #b6bdca; }
.ph-try { display: flex; align-items: center; gap: 8px; color: var(--green-deep); font-size: 15px; font-weight: 700; }
.ph-try .ph-i { width: 20px; height: 20px; }

/* Dark cards with crisp UI inside (house style): graphite with a green hairline for this page. */
.ph-dark {
  border: 1px solid rgba(134, 239, 172, .18);
  border-radius: 16px;
  background: linear-gradient(160deg, #1c222b 0%, #161b22 55%, #0e1218 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 4px rgba(12, 16, 22, .18), 0 16px 30px -8px rgba(12, 16, 22, .4), 0 36px 64px -20px rgba(12, 16, 22, .5);
  color: #eef2fa;
}
.ph-dark .ph-cap { color: #9aa6bf; }
.ph-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; font: 700 13px/1 "Space Grotesk", sans-serif; }
.ph-tag { padding: 3px 8px; border-radius: 999px; background: var(--green); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; }

/* ---------------------------------------------------------------- road + steps (phones first) */
.ph-course { position: relative; }
.ph .ph-road, .ph .ph-drive { display: none; }
.ph-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 20px; max-width: 780px; margin: 0 auto; padding: 34px 16px 34px 76px; }
.ph-step::before, .ph-finish::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 22px; background: var(--asphalt); box-shadow: 0 0 0 2.5px var(--road-edge), 0 0 0 3.5px #d3d8e2; }
.ph-step::after, .ph-finish::after { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; border-left: 2px dashed #fff; }
.ph-step > * { min-width: 0; }
.ph-pin { position: absolute; z-index: 1; left: 0; top: 20px; width: 62px; height: 78px; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .3)); }
.ph-pin svg { width: 100%; height: 100%; color: var(--pin); }
.ph-pin b { position: absolute; left: 0; right: 0; top: 8px; color: #fff; font-size: 36px; text-align: center; }
@keyframes ph-pin-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.ph-step.is-in .ph-pin, .ph:not(.ph-motion) .ph-pin { animation: ph-pin-bob 2.6s ease-in-out infinite; }
.ph-step:nth-of-type(even) .ph-pin { animation-delay: -1.3s; }
.ph h2 { font-size: clamp(26px, 6.4vw, 32px); line-height: 1.08; }
.ph-intro { display: grid; gap: 12px; align-content: start; }
.ph-aside { display: grid; gap: 14px; justify-items: start; }
.ph-sub { color: var(--ink2); font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.ph-visual { display: grid; gap: 12px; min-width: 0; container-type: inline-size; }


/* Finish band */
.ph-finish { position: relative; display: grid; gap: 16px; max-width: 780px; margin: 0 auto; padding: 30px 16px 44px 76px; }
.ph-finish > * { position: relative; z-index: 2; }
.ph-bigcard { position: relative; display: grid; gap: 2px; width: 190px; padding: 0 0 14px; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 16px 30px rgba(20, 27, 43, .16), 0 0 0 1px rgba(20, 27, 43, .06); text-align: center; transform: rotate(-3deg); }
.ph-bigcard small { display: block; padding: 7px 0; background: var(--green); color: #06140b; font-size: 13px; font-weight: 800; }
.ph-bigcard b { margin-top: 8px; font: 700 30px/1 "Space Grotesk", sans-serif; }
.ph-bigcard span { color: var(--ink2); font-size: 13.5px; font-weight: 600; }
.ph-bigcard em { display: inline-flex; align-items: center; justify-self: center; gap: 4px; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: #16a34a; color: #fff; font-size: 12.5px; font-style: normal; font-weight: 800; }
.ph-bigcard em .ph-i { width: 14px; height: 14px; }
.ph-finish__copy { display: grid; gap: 10px; }
.ph-finish__copy h2 { font-size: clamp(24px, 5.6vw, 30px); }
.ph-finish__copy p { color: var(--ink2); font-size: 15.5px; line-height: 1.45; }
.ph-note--out { justify-self: end; transform: rotate(-5deg); }

/* ---------------------------------------------------------------- sample reviews (same design as the other road pages) */
.ph-reviews { position: relative; z-index: 3; display: grid; gap: 26px; padding: 48px 16px 56px; background: linear-gradient(180deg, #edf0f6 0%, #f8f9fc 100%); scroll-margin-top: 186px; }
.ph-reviews__head, .ph-get__head { display: grid; justify-items: center; gap: 10px; max-width: 760px; margin: 0 auto; text-align: center; }
.ph-reviews__label { padding: 4px 12px; border-radius: 999px; background: rgba(20, 27, 43, .06); color: var(--muted); font-size: 13px; font-weight: 600; }
.ph-reviews__grid { display: grid; gap: 18px; width: 100%; max-width: 1280px; margin: 0 auto; }
.ph-review { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px 22px 22px; border-radius: 18px; background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%); box-shadow: 0 16px 34px rgba(20, 27, 43, .1), 0 2px 6px rgba(20, 27, 43, .05), 0 0 0 1px rgba(20, 27, 43, .06); }
.ph-review::before { content: ""; position: absolute; inset: 0 22px auto; height: 3px; border-radius: 0 0 3px 3px; background: var(--av); opacity: .85; }
.ph-review::after { content: "\201C"; position: absolute; top: 6px; right: 18px; color: color-mix(in srgb, var(--av) 16%, transparent); font: 700 84px/1 Georgia, serif; pointer-events: none; }
.ph-review blockquote { flex: 1 1 auto; }
.ph-review blockquote p { color: var(--ink); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.ph-review figcaption { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(20, 27, 43, .08); }
.ph-review__av { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: var(--av); color: #fff; font: 700 15px/1 "Space Grotesk", sans-serif; }
.ph-review figcaption b { display: block; color: var(--ink); font-size: 16px; }
.ph-review figcaption small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.35; }

/* ---------------------------------------------------------------- FAQ */
.ph-close { position: relative; z-index: 3; padding: 44px 16px 52px; background: linear-gradient(180deg, #161b22 0%, #0c1016 100%); color: #fff; }
.ph-faq { display: grid; gap: 10px; max-width: 980px; margin: 0 auto; }
.ph-faq h2 { margin-bottom: 6px; color: #fff; font-size: clamp(24px, 5.4vw, 30px); }
.ph-faq details { border: 1px solid rgba(134, 239, 172, .16); border-radius: 10px; background: rgba(255, 255, 255, .04); }
.ph-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; color: #fff; font-size: 16px; font-weight: 700; list-style: none; cursor: pointer; }
.ph-faq summary::-webkit-details-marker { display: none; }
.ph-faq .ph-plus { flex: 0 0 auto; width: 18px; height: 18px; color: #ffb3b7; transition: transform .25s ease; }
.ph-faq details[open] .ph-plus { transform: rotate(45deg); }
.ph-faq details p { padding: 0 16px 15px; color: #d3dbea; font-size: 16px; line-height: 1.55; }

/* ---------------------------------------------------------------- how you get it */
.ph-get { position: relative; z-index: 3; display: grid; gap: 26px; padding: 52px 16px 56px; background: #fbfcfe; scroll-margin-top: 186px; }
.ph-vs { display: grid; width: 100%; max-width: 980px; margin: 0 auto; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px rgba(20, 27, 43, .08), 0 0 0 1px rgba(20, 27, 43, .07); }
.ph-vs__head, .ph-vs__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ph-vs__head span { padding: 12px 16px; color: var(--muted); font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ph-vs__head span:last-child { background: var(--night); color: var(--green-soft); }
.ph-vs__row span { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(20, 27, 43, .07); font-size: 16px; line-height: 1.4; }
.ph-vs__row span:first-child { color: var(--muted); }
.ph-vs__row span:last-child { background: #effcf3; color: var(--ink); font-weight: 600; }
.ph-vs__row svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.ph-plan { display: grid; gap: 20px; width: 100%; max-width: 980px; margin: 0 auto; padding: 24px; border-radius: 18px; background: linear-gradient(160deg, #1c222b 0%, #161b22 60%, #0e1218 100%); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .45); color: #eef2fa; }
.ph-plan h3 { color: #fff; font-size: 24px; line-height: 1.15; }
.ph-plan__copy { display: grid; gap: 14px; }
.ph-plan__list { display: grid; gap: 10px; }
.ph-plan__list li { display: flex; align-items: flex-start; gap: 10px; color: #d3dbea; font-size: 15.5px; line-height: 1.45; }
.ph-plan__list b { color: #fff; }
.ph-plan__list .ph-ok { width: 20px; height: 20px; margin-top: 2px; color: var(--green-soft); }

/* ---------------------------------------------------------------- motion */
.ph-motion .ph-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s cubic-bezier(.22, .8, .24, 1), transform .6s cubic-bezier(.22, .8, .24, 1); }
.ph-motion .ph-reveal.is-in { opacity: 1; transform: none; }
.ph-motion .ph-pin { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), filter .4s ease; }
.ph-motion .ph-step:not(.is-in) .ph-pin { transform: translateY(-28px) scale(.8); filter: grayscale(1) opacity(.55); }

/* Page overrides of the shared pieces above */
.ph-tag { background: var(--green); color: #06140b; }
.ph-tag--soft { background: #e7f8ee; color: #15803d; }
.ph-av { background: linear-gradient(135deg, #22c55e, #15803d); color: #06140b; }
.ph-i { width: 22px; height: 22px; flex: 0 0 auto; }
.ph-cap { color: var(--muted); font-size: 12px; }
.ph button { font-family: inherit; cursor: pointer; }
.ph [hidden] { display: none !important; }

/* Text bubbles and the "text landed" card */
.ph-bub { max-width: 92%; padding: 9px 12px; border-radius: 16px 16px 16px 5px; background: #e9edf2; color: #172019; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.ph-bub--me { justify-self: end; border-radius: 16px 16px 5px 16px; background: #22c55e; color: #06140b; font-weight: 600; }
.ph-text { display: grid; gap: 5px; padding: 12px 14px; border-radius: 16px 16px 16px 5px; background: #fff; color: #172019; box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .6), 0 0 0 1px rgba(12, 16, 22, .06); }
.ph-text__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.ph-text__meta b { color: #15803d; }
.ph-text__meta span { color: var(--muted); }
.ph-text__body { font-size: 13.5px; line-height: 1.42; overflow-wrap: anywhere; }

/* Transcript */
.ph-tx { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.ph-tx li { display: block; max-width: 88%; padding: 8px 11px; border-radius: 13px; font-size: 14px; line-height: 1.38; }
.ph-tx li b { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ph-tx__ai { align-self: flex-start; border-bottom-left-radius: 4px; background: rgba(34, 197, 94, .14); box-shadow: inset 0 0 0 1px rgba(134, 239, 172, .22); color: #e6f7ec; }
.ph-tx__ai b { color: #86efac; }
.ph-tx__them { align-self: flex-end; border-bottom-right-radius: 4px; background: rgba(255, 255, 255, .08); color: #eef3f0; }
.ph-tx__them b { color: #aab4c2; }
.ph-tx mark { padding: 0 3px; border-radius: 4px; background: #f59e0b; color: #1a1204; font-weight: 700; }
.ph-tx li.is-off { display: none; }
.ph-tx li.is-new { animation: ph-rise .45s cubic-bezier(.22, .8, .24, 1); }
@keyframes ph-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ph-tx__typing { display: inline-flex !important; grid-auto-flow: column; gap: 4px !important; padding: 11px 13px !important; }
.ph-tx__typing i { width: 6px; height: 6px; border-radius: 50%; background: #86efac; animation: ph-dot 1s ease-in-out infinite; }
.ph-tx__typing i:nth-child(2) { animation-delay: .15s; }
.ph-tx__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ph-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* Ringing phone icon (hero, stops 4 and 6) */
.ph-call__ring { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: #22c55e; color: #06140b; }
.ph-call__ring .ph-i { width: 22px; height: 22px; }
.ph-call__ring::before, .ph-call__ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #22c55e; opacity: 0; }
.is-ringing .ph-call__ring::before, .is-ringing .ph-call__ring::after,
[data-state="ringing"] .ph-call__ring::before, [data-state="ringing"] .ph-call__ring::after { animation: ph-ring 1.3s ease-out infinite; }
.is-ringing .ph-call__ring::after, [data-state="ringing"] .ph-call__ring::after { animation-delay: .45s; }
@keyframes ph-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
[data-state="ringing"] .ph-call__ring .ph-i, .is-ringing .ph-call__ring .ph-i { animation: ph-wiggle 1.3s ease-in-out infinite; }
@keyframes ph-wiggle { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }

/* ---------------------------------------------------------------- hero */
.ph-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 0 44px;
  background:
    radial-gradient(ellipse 40% 45% at 76% 62%, rgba(34, 197, 94, .2), transparent 70%),
    radial-gradient(ellipse 35% 30% at 6% 8%, rgba(20, 184, 166, .1), transparent 70%),
    linear-gradient(180deg, #0c1016 0%, #10151c 60%, #131920 100%);
  color: #fff;
}
/* Faint signal rings spreading from the call card. */
.ph-hero__rings {
  position: absolute;
  left: 76%;
  top: 62%;
  width: min(1300px, 190vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 62px, rgba(134, 239, 172, .08) 63px 64px, transparent 65px 96px);
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle, #000 0%, #000 30%, transparent 70%);
  pointer-events: none;
}
.ph-hero__in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "top" "copy" "call" "note";
  gap: 24px;
  width: min(100% - 32px, 1320px);
  margin: 0 auto;
}
.ph-hero__top { grid-area: top; display: grid; gap: 16px; }
.ph-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.ph-brand__logo { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 28px; line-height: 1; letter-spacing: -0.02em; }
.ph-brand__logo svg { width: 34px; height: 34px; }
.ph-eyebrow { padding-left: 16px; border-left: 2px solid rgba(134, 239, 172, .4); color: var(--green-soft); font-size: 14px; font-weight: 600; line-height: 1.3; }
.ph h1 { margin: 0; max-width: 1180px; color: #fff; font-size: clamp(31px, 7.6vw, 48px); line-height: 1.04; letter-spacing: -0.028em; text-wrap: balance; }
.ph h1 em { display: block; margin-top: 8px; color: #4ee58a; font-size: .74em; line-height: 1.1; }
.ph-hero__copy { grid-area: copy; display: grid; gap: 18px; align-content: start; }
.ph-hero__sub { max-width: 560px; color: #d3dbe2; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.ph-signals { display: grid; gap: 10px; }
.ph-signals li { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 700; }
.ph-signals .ph-ok { width: 22px; height: 22px; color: var(--green-soft); }

.ph-hcall { grid-area: call; position: relative; display: grid; align-content: start; align-self: start; gap: 12px; width: 100%; max-width: 640px; justify-self: center; }
.ph-hcall__cap { color: #97a3b1; font-size: 12px; }
.ph-call {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(134, 239, 172, .22);
  border-radius: 22px;
  background: linear-gradient(160deg, #1c232c 0%, #141a21 55%, #0f1419 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 6px rgba(34, 197, 94, .05);
}
.ph-call__head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ph-call__who { display: grid; min-width: 0; }
.ph-call__who b { font: 700 19px/1.15 "Space Grotesk", sans-serif; }
.ph-call__who small, .ph-call__clock small { color: #97a3b1; font-size: 12.5px; }
.ph-call__clock { display: grid; justify-items: end; margin-left: auto; text-align: right; }
.ph-call__clock b { font: 700 22px/1 "Space Grotesk", sans-serif; color: #fff; }
.ph-call__status { display: grid; justify-self: start; }
.ph-call__status span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; opacity: 0; transition: opacity .3s ease; }
.ph-call__status .ph-i { width: 15px; height: 15px; }
.ph-call__status [data-s="ringing"] { background: rgba(255, 255, 255, .1); color: #fff; }
.ph-call__status [data-s="talking"] { background: rgba(34, 197, 94, .18); color: #86efac; }
.ph-call__status [data-s="booked"] { background: #22c55e; color: #06140b; }
[data-state="ringing"] .ph-call__status [data-s="ringing"], [data-state="talking"] .ph-call__status [data-s="talking"], [data-state="booked"] .ph-call__status [data-s="booked"] { opacity: 1; }
.ph-call .ph-tx { height: 262px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 44px); mask-image: linear-gradient(180deg, transparent 0, #000 44px); }
.ph-call__booked { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px; background: rgba(34, 197, 94, .14); box-shadow: inset 0 0 0 1px rgba(134, 239, 172, .35); transition: opacity .35s ease, transform .35s ease; }
.ph-call__booked > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #22c55e; color: #06140b; }
.ph-call__booked > span .ph-i { width: 20px; height: 20px; }
.ph-call__booked b { font-size: 15px; }
.ph-call__booked small { margin-left: auto; color: #b5e9c7; font-size: 12.5px; }
.ph-call:not([data-state="booked"]) .ph-call__booked { opacity: 0; transform: translateY(6px); }
.ph-hcall .ph-text { transition: opacity .4s ease, transform .4s ease; }
.ph-hcall .ph-text.is-off { opacity: 0; transform: translateY(8px); }
/* On wider screens the summary text drops in over the top of the finished call, like a phone notification. */
@media (min-width: 700px) {
  .ph-hcall .ph-text { position: absolute; z-index: 3; top: -14px; left: 50%; width: min(88%, 460px); translate: -50% 0; border-radius: 16px; box-shadow: 0 22px 44px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(134, 239, 172, .35); }
  .ph-hcall .ph-text.is-off { transform: translateY(-16px); }
}
.ph-note--hero { grid-area: note; justify-self: center; color: #d7f7e2; transform: rotate(-3deg); }
.ph-note--hero u { color: var(--green-soft); }

/* ---------------------------------------------------------------- stop 1: missed call text back */
.ph-miss { display: grid; gap: 14px; padding: 18px; }
.ph-miss__label { color: #97a3b1; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ph-miss__call { display: grid; gap: 10px; align-content: start; }
.ph-miss__num { display: flex; align-items: center; gap: 10px; }
.ph-miss__num b { font: 700 18px/1.1 "Space Grotesk", sans-serif; }
.ph-miss__num small { margin-left: auto; color: #97a3b1; font-size: 13px; }
.ph-miss__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; transition: background .3s ease; }
.ph-miss__ico .ph-i { width: 20px; height: 20px; }
[data-state="ringing"] .ph-miss__ico { background: #22c55e; color: #06140b; animation: ph-wiggle 1.3s ease-in-out infinite; }
.ph-miss:not([data-state="ringing"]) .ph-miss__ico { background: #ef4444; transform: rotate(135deg); }
.ph-miss__status { display: grid; }
.ph-miss__status span { grid-area: 1 / 1; justify-self: start; padding: 5px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 800; transition: opacity .3s ease; }
.ph-miss__status [data-s="ringing"] { background: rgba(255, 255, 255, .1); color: #fff; }
.ph-miss__status [data-s="missed"] { background: #ef4444; color: #fff; }
.ph-miss[data-state="ringing"] [data-s="missed"], .ph-miss:not([data-state="ringing"]) [data-s="ringing"] { opacity: 0; }
.ph-miss__arrow { justify-self: center; color: #86efac; transform: rotate(90deg); transition: opacity .3s ease; }
.ph-miss__arrow .ph-i { width: 28px; height: 28px; }
.ph-miss__thread { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 16px; background: #fff; color: #172019; }
.ph-miss__thread .ph-miss__label { color: #6b7684; }
.ph-miss__sent { display: inline-flex; align-items: center; gap: 5px; justify-self: end; color: #15803d; font-size: 12.5px; font-weight: 800; }
.ph-miss__sent .ph-i { width: 15px; height: 15px; }
.ph-miss [data-ph-mtext], .ph-miss [data-ph-msent], .ph-miss [data-ph-mreply], .ph-miss__arrow { transition: opacity .4s ease, transform .4s ease; }
.ph-miss:is([data-state="ringing"], [data-state="missed"]) :is([data-ph-mtext], [data-ph-msent], .ph-miss__arrow),
.ph-miss:not([data-state="replied"]) [data-ph-mreply] { opacity: 0; transform: translateY(8px); }

/* ---------------------------------------------------------------- stop 2: when the AI answers */
.ph-when { display: grid; gap: 14px; padding: 18px; }
.ph-when__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.ph-when__tabs button { min-height: 46px; padding: 8px 6px; border: 0; border-radius: 10px; background: transparent; color: #c8d1db; font-size: 14.5px; font-weight: 700; line-height: 1.15; transition: background .25s ease, color .25s ease; }
.ph-when__tabs button:hover { color: #fff; }
.ph-when__tabs button[aria-pressed="true"] { background: #22c55e; color: #06140b; }
.ph-when__hours { color: #97a3b1; font-size: 13.5px; font-weight: 600; }
.ph-when__calls { display: grid; gap: 8px; }
.ph-when__calls li { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.ph-when__calls time { color: #fff; font-size: 14px; font-weight: 800; }
.ph-when__calls span { color: #aab4c2; font-size: 14px; }
.ph-who { display: grid; justify-items: end; }
.ph-who i { grid-area: 1 / 1; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-style: normal; font-weight: 800; white-space: nowrap; opacity: 0; transform: scale(.94); transition: opacity .3s ease, transform .3s ease; }
.ph-who__team { background: rgba(255, 255, 255, .12); color: #fff; }
.ph-who__ai { background: #22c55e; color: #06140b; }
.ph-who__both { background: rgba(34, 197, 94, .16); box-shadow: inset 0 0 0 1.5px #22c55e; color: #bdf5d0; }
[data-mode="always"] .ph-who__ai,
[data-mode="after"] [data-at="open"] .ph-who__team,
[data-mode="after"] [data-at="closed"] .ph-who__ai,
[data-mode="overflow"] .ph-who__both { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- stop 3: emergencies */
.ph-esc { display: grid; gap: 16px; padding: 18px; }
.ph-esc__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ph-esc__clock { padding: 4px 10px; border-radius: 8px; background: #f59e0b; color: #1a1204; font: 700 14px/1.1 "Space Grotesk", sans-serif; }
.ph-esc__head b { font-size: 15px; }
.ph-tx--short li { max-width: 94%; }
.ph-esc__steps { display: grid; gap: 8px; }
.ph-esc__steps li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); opacity: .4; transition: opacity .35s ease, background .35s ease; }
.ph-esc__steps li i { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: rgba(255, 255, 255, .12); font: 700 14px/1 "Space Grotesk", sans-serif; font-style: normal; transition: background .35s ease, color .35s ease; }
.ph-esc__steps b { display: block; font-size: 15px; line-height: 1.2; }
.ph-esc__steps small { color: #aab4c2; font-size: 12.5px; }
.ph-esc__steps li.is-on { opacity: 1; background: rgba(34, 197, 94, .1); }
.ph-esc__steps li.is-on i { background: #22c55e; color: #06140b; }
.ph-esc .ph-text { transition: opacity .4s ease, transform .4s ease; }
.ph-esc .ph-text.is-off { opacity: 0; transform: translateY(8px); }

/* ---------------------------------------------------------------- stop 4: caller card */
.ph-pop { display: grid; gap: 10px; max-width: 560px; }
.ph-pop__bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(160deg, #1c232c 0%, #0f1419 100%); color: #fff; box-shadow: 0 16px 30px -10px rgba(12, 16, 22, .5); }
.ph-pop__bar b { display: block; font-size: 15.5px; }
.ph-pop__bar small { color: #aab4c2; font-size: 13px; }
.ph-pop__go { margin-left: auto; padding: 8px 16px; border-radius: 999px; background: #22c55e; color: #06140b; font-size: 14px; font-weight: 800; }
.ph-pop__card { display: grid; gap: 14px; padding: 18px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 18px 38px rgba(12, 16, 22, .14), 0 0 0 1px rgba(12, 16, 22, .07); transition: opacity .45s ease, transform .45s cubic-bezier(.22, .8, .24, 1); }
.ph-pop__card.is-off { opacity: 0; transform: translateY(-14px); }
.ph-pop__name { display: flex; align-items: center; gap: 12px; }
.ph-pop__name .ph-av { width: 46px; height: 46px; font-size: 16px; }
.ph-pop__name b { display: block; font: 700 19px/1.15 "Space Grotesk", sans-serif; }
.ph-pop__name small { color: var(--muted); font-size: 13px; }
.ph-pop__name .ph-tag { margin-left: auto; font-size: 12px; }
.ph-pop__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ph-pop__facts div { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: #f3f6f4; }
.ph-pop__facts dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.ph-pop__facts dd { font: 700 17px/1.15 "Space Grotesk", sans-serif; }
.ph-pop__last { display: grid; gap: 2px; font-size: 14px; color: var(--ink2); }
.ph-pop__last b { color: var(--muted); font-size: 12px; }
.ph-pop__links { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-pop__links span { padding: 7px 14px; border-radius: 10px; background: #f0fdf4; box-shadow: inset 0 0 0 1px #bbf7d0; color: #15803d; font-size: 13.5px; font-weight: 800; }

/* ---------------------------------------------------------------- stop 5: summary on the record */
.ph-sum { display: grid; gap: 12px; }
.ph-sum__rec { display: grid; gap: 12px; padding: 16px 18px; }
.ph-sum__head { display: flex; align-items: center; gap: 10px; }
.ph-sum__head b { font-size: 15.5px; }
.ph-sum__head small { margin-left: auto; color: #aab4c2; font-size: 13px; }
.ph-sum__dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .2); }
.ph-wave { display: flex; align-items: center; gap: 4px; height: 38px; }
.ph-wave i { flex: 1 1 0; height: 30%; border-radius: 3px; background: #86efac; opacity: .55; }
.ph-wave i:nth-child(3n) { height: 70%; }
.ph-wave i:nth-child(4n+1) { height: 45%; }
.ph-wave i:nth-child(5n+2) { height: 90%; }
.ph-wave i:nth-child(7n) { height: 55%; }
.ph-sum__status { display: grid; }
.ph-sum__status span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; opacity: 0; transition: opacity .3s ease; }
.ph-sum__status .ph-i { width: 15px; height: 15px; }
.ph-sum__status [data-s="rec"] { background: rgba(255, 255, 255, .1); color: #fff; }
.ph-sum__status [data-s="work"] { background: rgba(34, 197, 94, .18); color: #86efac; }
.ph-sum__status [data-s="done"] { background: #22c55e; color: #06140b; }
[data-state="rec"] [data-s="rec"], [data-state="work"] [data-s="work"], [data-state="done"] [data-s="done"] { opacity: 1; }
[data-state="work"] .ph-wave i { animation: ph-wave 1.1s ease-in-out infinite; }
[data-state="work"] .ph-wave i:nth-child(2n) { animation-delay: -.4s; }
[data-state="work"] .ph-wave i:nth-child(3n) { animation-delay: -.7s; }
@keyframes ph-wave { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.ph-sum__card { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 18px 38px rgba(12, 16, 22, .14), 0 0 0 1px rgba(12, 16, 22, .07); transition: opacity .45s ease, transform .45s cubic-bezier(.22, .8, .24, 1); }
.ph-sum:not([data-state="done"]) .ph-sum__card { opacity: 0; transform: translateY(14px); }
.ph-sum__where { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ph-sum__where .ph-tag { letter-spacing: 0; text-transform: none; }
.ph-sum__title { display: flex; align-items: center; gap: 8px; font: 700 17px/1.2 "Space Grotesk", sans-serif; }
.ph-sum__title .ph-i { width: 18px; height: 18px; color: #15803d; }
.ph-sum__text { color: var(--ink2); font-size: 15px; line-height: 1.5; }
.ph-sum__todo b { font-size: 13px; }
.ph-sum__list { display: grid; gap: 6px; }
.ph-sum__list li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.4; }
.ph-sum__list li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 7px; height: 7px; border-radius: 2px; background: #22c55e; }

/* ---------------------------------------------------------------- stop 6: ring group */
.ph-ring { display: grid; gap: 16px; padding: 18px; }
.ph-ring__line { display: flex; align-items: center; gap: 12px; }
.ph-ring__line b { display: block; font-size: 16px; }
.ph-ring__line small { color: #aab4c2; font-size: 13px; }
.ph-ring__devs { display: grid; gap: 8px; }
.ph-ring__devs li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: background .3s ease, box-shadow .3s ease, opacity .3s ease; }
.ph-ring__devs b { font-size: 15px; }
.ph-ring__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; }
.ph-ring__st { display: grid; justify-items: end; }
.ph-ring__st i { grid-area: 1 / 1; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-style: normal; font-weight: 800; opacity: 0; transition: opacity .3s ease; }
.ph-ring__st [data-s="ringing"] { background: rgba(34, 197, 94, .18); color: #86efac; }
.ph-ring__st [data-s="answered"] { background: #22c55e; color: #06140b; }
.ph-ring__st [data-s="stopped"] { background: rgba(255, 255, 255, .08); color: #97a3b1; }
[data-state="ringing"] .ph-ring__st [data-s="ringing"],
[data-state="answered"] .ph-ring__st [data-s="answered"],
[data-state="answered"] .ph-ring__st [data-s="stopped"] { opacity: 1; }
[data-state="ringing"] .ph-ring__ico { animation: ph-wiggle 1.3s ease-in-out infinite; color: #86efac; }
[data-state="answered"] .ph-ring__devs li:not(.is-winner) { opacity: .5; }
[data-state="answered"] .ph-ring__devs .is-winner { background: rgba(34, 197, 94, .12); box-shadow: inset 0 0 0 1.5px #22c55e; }
[data-state="answered"] .ph-ring__devs .is-winner .ph-ring__ico { background: #22c55e; color: #06140b; }
.ph-ring__out { display: flex; align-items: flex-start; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); color: #d3dbe2; font-size: 14.5px; line-height: 1.4; transition: opacity .4s ease; }
.ph-ring__out .ph-i { width: 18px; height: 18px; margin-top: 1px; color: #86efac; }
.ph-ring__out b { color: #fff; }
[data-state="ringing"] .ph-ring__out { opacity: 0; }

/* ---------------------------------------------------------------- container layouts for the widgets */
@container (min-width: 600px) {
  .ph-miss { grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr); align-items: center; column-gap: 16px; padding: 22px; }
  .ph-miss__arrow { transform: none; }
  .ph-esc { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; column-gap: 18px; padding: 22px; }
  .ph-esc .ph-text { grid-column: 1 / -1; }
  .ph-sum { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .ph-ring__devs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-ring__devs li { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 16px 10px; text-align: center; }
  .ph-ring__st { justify-items: center; }
  .ph-when { padding: 22px; }
}
@container (max-width: 420px) {
  .ph-when__calls li { grid-template-columns: minmax(0, 1fr) auto; }
  .ph-when__calls span { grid-column: 1; grid-row: 2; font-size: 13px; }
  .ph-when__calls .ph-who { grid-row: 1 / span 2; grid-column: 2; }
  .ph-when__tabs button { font-size: 13px; }
  .ph-pop__name .ph-tag { display: none; }
  .ph-pop__facts dd { font-size: 15px; }
}

/* ---------------------------------------------------------------- tablets */
@media (min-width: 700px) {
  .ph-hero { padding-top: 40px; }
  .ph-finish { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 28px; }
  .ph-note--out { grid-column: 1 / -1; }
  .ph-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-plan { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 30px; }
  .ph-plan .ph-actions { flex-direction: column; }
  .ph-close { padding: 52px clamp(24px, 5vw, 64px) 60px; }
}
@media (min-width: 1100px) { .ph-reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }

/* ---------------------------------------------------------------- desktop rows */
@media (min-width: 1280px) {
  /* Headline across the top, pitch left, the live call right. */
  .ph-hero { padding: 34px 0 44px; }
  .ph-hero__in { width: auto; margin: 0 clamp(28px, 3.5vw, 80px); grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-areas: "top top" "copy call" "note call"; column-gap: clamp(32px, 4vw, 80px); row-gap: 22px; }
  .ph h1 { font-size: clamp(40px, 3.3vw, 62px); }
  .ph-hero__copy { align-self: start; padding-top: 8px; }
  .ph-hero__sub { font-size: clamp(17px, 1.1vw, 19px); }
  .ph-hcall { max-width: 720px; justify-self: end; }
  .ph-note--hero { align-self: start; justify-self: start; margin-left: 8px; font-size: 34px; }

  .ph-course { --edge: 92px; max-width: 1680px; margin: 0 auto; padding: 36px var(--edge) 0; }
  .ph .ph-road { position: absolute; left: 0; top: 0; z-index: 1; display: block; pointer-events: none; }
  .ph-road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .ph-road__edge { stroke: var(--road-edge); stroke-width: 36; filter: drop-shadow(0 2px 3px rgba(20, 27, 43, .25)); }
  .ph-road__top { stroke: var(--asphalt); stroke-width: 30; }
  .ph-road__line { stroke: #fff; stroke-width: 2; stroke-dasharray: 12 10; stroke-linecap: butt !important; }
  .ph .ph-drive { position: absolute; z-index: 4; left: 0; top: 0; display: block; width: 140px; visibility: hidden; filter: drop-shadow(0 7px 5px rgba(20, 27, 43, .28)); pointer-events: none; will-change: transform; }
  .ph .ph-drive.is-placed { visibility: visible; }
  .ph-drive img { width: 100%; height: auto; }
  .ph-drive__right, .ph-drive.is-right .ph-drive__left { display: none !important; }
  .ph-drive.is-right .ph-drive__right { display: block !important; }

  .ph-step {
    z-index: 2;
    grid-template-columns: minmax(330px, .72fr) minmax(0, 1.45fr);
    grid-template-areas: "intro visual";
    align-items: start;
    column-gap: clamp(28px, 3vw, 56px);
    max-width: none;
    margin: 0;
    padding: 58px 36px 58px 104px;
  }
  .ph-intro { grid-area: intro; padding-top: 14px; }
  .ph-visual { grid-area: visual; }
  .ph-step::before, .ph-step::after, .ph-finish::before, .ph-finish::after { content: none; }
  .ph-pin { left: 17px; top: 28px; width: 80px; height: 100px; }
  .ph-pin b { top: 12px; font-size: 42px; }
  .ph h2 { font-size: clamp(27px, 1.95vw, 34px); line-height: 1.06; }

  .ph-finish {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "card copy note";
    align-items: center;
    column-gap: clamp(24px, 3vw, 48px);
    max-width: none;
    margin: 10px 0 0 104px;
    padding: 30px 32px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 36px rgba(20, 27, 43, .1), 0 0 0 1px rgba(20, 27, 43, .05);
  }
  .ph-bigcard { grid-area: card; }
  .ph-finish__copy { grid-area: copy; }
  .ph-finish__copy h2 { font-size: clamp(24px, 1.7vw, 30px); }
  .ph-note--out { grid-column: auto; grid-area: note; font-size: 34px; }
  .ph-course::after { content: ""; display: block; height: 96px; }

  .ph-reviews, .ph-get { gap: 30px; padding: 64px clamp(40px, 5vw, 96px) 72px; }
  .ph-close { padding: 60px clamp(40px, 5vw, 96px) 68px; }
}

@media (min-width: 1280px) and (max-width: 1799px) {
  /* With the side panel open the course is ~1150px wide: visuals get the full row under a two-column intro. */
  .ph-step { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "visual"; row-gap: 26px; }
  .ph-step .ph-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .ph-step .ph-intro > :is(h2, .ph-sub) { grid-column: 1; }
  .ph-step .ph-intro > .ph-aside { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .ph-finish { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "card copy" "card note"; row-gap: 8px; }
  .ph-note--out { justify-self: end; }
  /* Keep the hero's buttons and the call above the fold at 1440x900 with the side panel open. */
  .ph-hero { padding: 24px 0 30px; }
  .ph-hero__in { row-gap: 16px; column-gap: 32px; }
  .ph-hero__top { gap: 12px; }
  .ph h1 { font-size: clamp(34px, 2.75vw, 46px); }
  .ph-hero__copy { gap: 14px; }
  .ph-hero__sub { font-size: 16px; }
  .ph-signals li { font-size: 14.5px; }
  .ph-call { padding: 14px; gap: 10px; }
  .ph-call .ph-tx { height: 200px; }
  .ph-call__head { padding-bottom: 10px; }
  .ph-note--hero { font-size: 30px; }
}

@media (max-width: 1180px) { .ph-step, .ph-reviews, .ph-get { scroll-margin-top: 236px; } }
@media (min-width: 1181px) { .ph-step { scroll-margin-top: 186px; } }
@media (max-width: 850px) { .ph-step, .ph-reviews, .ph-get { scroll-margin-top: 218px; } }
@media (max-width: 699px) {
  .ph-vs__head span:first-child { display: none; }
  .ph-vs__head, .ph-vs__row { grid-template-columns: minmax(0, 1fr); }
  .ph-vs__row span:first-child { padding-bottom: 4px; border-top: 1px solid rgba(20, 27, 43, .07); font-size: 14px; }
  .ph-vs__row span:last-child { border-top: 0; }
  .ph-eyebrow { padding-left: 0; border-left: 0; flex-basis: 100%; }
  .ph-call .ph-tx { height: 280px; }
  .ph-call__booked small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-btn, .ph-faq .ph-plus, .ph-call__status span, .ph-call__booked, .ph-text, .ph-miss *, .ph-who i, .ph-esc__steps li, .ph-pop__card, .ph-sum__card, .ph-ring__devs li, .ph-ring__st i, .ph-ring__out, .ph-when__tabs button { transition: none !important; }
  .ph-pin, .ph-call__ring::before, .ph-call__ring::after, .ph-call__ring .ph-i, .ph-miss__ico, .ph-wave i, .ph-ring__ico, .ph-tx li, .ph-tx__typing i { animation: none !important; }
  .ph-motion .ph-reveal, .ph-motion .ph-pin { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ph-motion .ph-pin { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .3)) !important; }
}