/* Shared by every hero concept. Brand v1 only: #FFD21F, #100F0D, #FFFFFF. */
.busy-note { font-size: 13px; line-height: 1.4; margin: 6px 0 0; opacity: .82; max-width: 36em; }
.hero .label { margin-bottom: clamp(8px, 1.6vh, 16px); }
.hero .pill-frame { margin-left: -8px; }  /* the pill page has 8px padding for its shadow */

/* Concept D: Try it now (situations in big type + a line to say on the call) */
.d-grid { width: 100%; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 440px); gap: clamp(32px, 5vw, 80px); align-items: center; }
.d-sits { margin: 0 0 clamp(12px, 2.4vh, 22px); display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: clamp(20px, min(2.2vw, 3.4vh), 30px); font-weight: 800; line-height: 1.1; }
.d-sits span { display: inline-block; background: var(--k); color: var(--y); padding: .3em .6em .34em; border-radius: 10px; }
.d-sits span:nth-child(1) { transform: rotate(-2deg); }
.d-sits span:nth-child(2) { transform: rotate(1.5deg); }
.d-sits span:nth-child(3) { transform: rotate(-1deg); }
.d-sits::after { content: ""; flex-basis: 100%; height: 0; order: 1; }  /* always break before 'Driving to the next job.' */
.d-sits span:nth-child(3) { order: 2; margin-top: -8px; }               /* -row gap: the empty break line adds one */
.d-h1 { font-size: clamp(40px, min(6vw, 9vh), 92px); font-weight: 900; line-height: .95; letter-spacing: -.02em; margin: 0; }
.d-sub { font-size: clamp(17px, min(1.6vw, 2.7vh), 21px); max-width: 30em; margin: clamp(12px, 2.6vh, 24px) 0 0; }
.d-try { background: var(--k); color: var(--w); border-radius: 28px; padding: clamp(20px, 3.4vh, 32px) clamp(20px, 2.4vw, 32px); }
.d-trylabel { font-weight: 700; font-size: 16px; margin: 0 0 12px; color: var(--y); }
.d-script { margin: 0 0 clamp(14px, 2.4vh, 22px); background: var(--w); color: var(--k); border-radius: 20px 20px 20px 6px; padding: 14px 18px; font-size: clamp(17px, 2.4vh, 20px); font-weight: 600; line-height: 1.35; }
.d-try .pill-frame { margin: 0 -8px; max-width: calc(100% + 16px); background: var(--y); border-radius: 48px; }  /* yellow tray so the dark pill stands out on the black card */
.d-note { font-size: 13.5px; line-height: 1.4; margin: 8px 0 0; color: rgba(255,255,255,.88); }
.hx-d .busy-note { color: rgba(255,255,255,.88); opacity: 1; }
@media (max-width: 1000px) { .d-grid { grid-template-columns: 1fr; gap: 20px; max-width: 600px; } }
@media (max-width: 760px) {
  .hx-d { justify-content: flex-start; }
  .d-sits { font-size: 16px; gap: 6px; margin-bottom: 12px; }
  .d-sits span:nth-child(3) { margin-top: -6px; }
  .d-sits span { border-radius: 8px; }
  .d-h1 { font-size: clamp(36px, min(11vw, 6vh), 52px); }
  .d-sub { font-size: 15.5px; margin-top: 8px; }
  .d-try { border-radius: 22px; padding: 16px 16px 14px; }
  .d-trylabel { font-size: 14px; margin-bottom: 8px; }
  .d-script { font-size: 15px; padding: 10px 14px; margin-bottom: 10px; }
  .d-note { font-size: 12.5px; }
  .hx-d .busy-note { font-size: 12px; }
  .hx-d .scroll-cue { display: none; }
}
@media (max-height: 820px) and (min-width: 761px) { .hx-d .scroll-cue { display: none; } }

/* Concept D2: D's copy with the call pill under the subhead, plus a pretend phone that plays the call.
   Brand v1 neutrals only (#FFD21F, #100F0D, #FFFFFF and their alpha tints); green/red only on the phone's call/end buttons. */
.d2-grid { width: 100%; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 110px); align-items: center; }
.hx-d2 .d2-copy { min-width: 0; margin: 0; }
.hx-d2 .d-sits { margin-bottom: clamp(16px, 3.2vh, 30px); }
.hx-d2 .d-h1 { font-size: clamp(44px, min(6.4vw, 10.6vh), 100px); }
.hx-d2 .d-sub { max-width: 25em; font-size: clamp(18px, min(1.7vw, 2.9vh), 23px); line-height: 1.45; margin-top: clamp(16px, 3.2vh, 30px); }
.d2-subpill { width: fit-content; max-width: 100%; }
.d2-pill { position: relative; display: block; width: fit-content; margin: clamp(20px, 4.2vh, 40px) auto 0; border-radius: 48px; }  /* centered on the subhead's width; the pill's 8px shadow padding is symmetric */
.hx-d2 .d2-pill .pill-frame { margin: 0; display: block; max-width: calc(100vw - 2 * var(--pad) + 16px); }
.d2-pill::after { content: ""; position: absolute; inset: 6px; border-radius: 48px; box-shadow: 0 0 0 0 rgba(16,15,13,.55); pointer-events: none; opacity: 0; }
.d2-pill.is-nudge::after { animation: d2-ring 1.1s ease-out 3; }
@keyframes d2-ring { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,15,13,.5); } 100% { opacity: 0; box-shadow: 0 0 0 16px rgba(16,15,13,0); } }

/* ---------- Pretend phone (all drawn in CSS/SVG; sized in em so one font-size scales it) ---------- */
.d2-stage { display: flex; flex-direction: column; align-items: center; padding: 0 6px; }
.ph { --ph-green: #2EBD59; --ph-red: #EE4338; position: relative; font-size: clamp(8.4px, 1.16vh, 11px); width: 30em; height: 62em; flex: none;
  font-family: var(--font); color: var(--w); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  filter: drop-shadow(0 3.2em 3.4em rgba(16,15,13,.34)) drop-shadow(0 .8em 1em rgba(16,15,13,.22)); }
.ph-frame { position: absolute; inset: 0; border-radius: 5.4em; padding: .42em;
  background: radial-gradient(120% 60% at 20% 0%, rgba(255,255,255,.38), rgba(255,255,255,0) 60%), linear-gradient(160deg, #100F0D, #100F0D);
  box-shadow: inset 0 0 0 .14em rgba(255,255,255,.34), inset 0 0 0 .3em #100F0D, inset .2em .3em .5em rgba(255,255,255,.16), inset -.2em -.3em .6em rgba(0,0,0,.6); }
.ph-screen { position: relative; height: 100%; border-radius: 5em; overflow: hidden; background: #100F0D; box-shadow: 0 0 0 .62em #100F0D; display: flex; flex-direction: column; isolation: isolate; }
.ph-frame::after { content: ""; position: absolute; inset: .9em; border-radius: 4.6em; pointer-events: none; z-index: 5;
  background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 100%); }
.ph-side { position: absolute; width: .5em; border-radius: .3em; background: linear-gradient(90deg, #100F0D, rgba(255,255,255,.42) 45%, #100F0D); }
.ph-side-a { left: -.34em; top: 10.4em; height: 2.9em; }
.ph-side-vu { left: -.34em; top: 15.4em; height: 5.2em; }
.ph-side-vd { left: -.34em; top: 21.6em; height: 5.2em; }
.ph-side-p { right: -.34em; top: 17em; height: 8.4em; }
.ph-island { position: absolute; z-index: 4; top: 1.15em; left: 50%; width: 9.6em; height: 2.85em; margin-left: -4.8em; border-radius: 2em; background: #000; }
.ph-cam { position: absolute; right: 1em; top: .82em; width: 1.2em; height: 1.2em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.22), rgba(255,255,255,.04) 45%, #000 70%); }
.ph-status { position: relative; z-index: 3; flex: none; height: 5.1em; display: flex; align-items: center; justify-content: space-between; padding: .3em 2.6em 0 3.3em; font-size: 1em; }
.ph-time { font-weight: 700; font-size: 1.55em; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ph-icons { display: flex; align-items: center; gap: .55em; }
.ph-icons svg { display: block; fill: currentColor; }
.ph-sig { width: 1.75em; height: 1.15em; }
.ph-wifi { width: 1.6em; height: 1.2em; }
.ph-batt { width: 2.6em; height: 1.25em; }
.ph-batt .ph-batt-o { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.1; }
.ph-batt .ph-batt-n { fill: rgba(255,255,255,.45); }
.ph-home { position: absolute; z-index: 4; bottom: .75em; left: 50%; width: 11.6em; height: .46em; margin-left: -5.8em; border-radius: 1em; background: rgba(255,255,255,.86); }
.ph-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ph-view[hidden] { display: none; }
.ph button { font: inherit; color: inherit; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ph button:focus-visible { outline: .22em solid var(--y); outline-offset: .2em; }

/* Dialer */
.ph-top { flex: 1; min-height: 8em; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 1.6em 1.9em; text-align: center; }
.ph-contact { margin: 0 0 .25em; font-size: 1.5em; font-weight: 600; line-height: 1.2; color: var(--y); min-height: 1.2em; }
.ph-contact.is-ended { color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }
.ph-num { margin: 0; font-size: 3.2em; font-weight: 400; font-stretch: 96%; letter-spacing: .005em; line-height: 1.15; min-height: 1.15em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ph-num.is-long { font-size: 2.6em; min-height: 1.42em; }
.ph-keys { flex: none; display: grid; grid-template-columns: repeat(3, 6.7em); justify-content: center; gap: 1.15em 2.3em; }
.ph-key { width: 6.7em; height: 6.7em; border-radius: 50%; background: rgba(255,255,255,.15) !important; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background-color .25s; }
.ph-key:active, .ph-key.is-press { background: rgba(255,255,255,.42) !important; transition: none; }
.ph-key b { font-weight: 400; font-size: 3em; line-height: 1; margin-top: -.06em; }
.ph-key i { font-style: normal; font-weight: 700; font-size: .98em; letter-spacing: .16em; line-height: 1; margin-top: .22em; padding-left: .16em; color: rgba(255,255,255,.92); min-height: 1em; }
.ph-key .ph-vm svg { display: block; width: 1.5em; height: .7em; fill: none; stroke: currentColor; stroke-width: 1.4; }
.ph-key-sym b { font-size: 3.2em; margin-top: .02em; }
.ph-key[data-k="*"] b { font-size: 4em; margin-top: .26em; }
.ph-row { flex: none; display: grid; grid-template-columns: repeat(3, 6.7em); justify-content: center; align-items: center; gap: 0 2.3em; margin: 1.15em 0 0; }
.ph-go { width: 6.7em; height: 6.7em; border-radius: 50%; background: var(--ph-green) !important; display: flex; align-items: center; justify-content: center; transition: filter .2s, transform .2s; }
.ph-go:active { filter: brightness(1.12); transform: scale(.96); }
.ph-go svg { width: 3.4em; height: 3.4em; fill: var(--w); }
.ph-del { width: 6.7em; height: 6.7em; display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.ph-del svg { width: 2.8em; height: 2em; }
.ph-del .ph-del-o { fill: rgba(255,255,255,.88); }
.ph-del .ph-del-x { fill: none; stroke: #100F0D; stroke-width: 2.2; stroke-linecap: round; }
.ph-del.is-off { opacity: 0; pointer-events: none; }
.ph-tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 1em 1.2em 2.5em; margin-top: 1.2em; border-top: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); }
.ph-tabs span { display: flex; flex-direction: column; align-items: center; gap: .25em; font-size: .95em; font-weight: 600; color: rgba(255,255,255,.5); }
.ph-tabs svg { width: 2.3em; height: 2.3em; fill: currentColor; }
.ph-tabs .ph-tab-l { fill: none; stroke: #100F0D; stroke-width: 1.8; stroke-linecap: round; }
.ph-tabs span:nth-child(5) .ph-tab-l { stroke: currentColor; }
.ph-tabs .is-on { color: var(--y); }

/* Calling screen */
.ph-call { position: relative; padding: 0 2.2em 3.6em; align-items: center;
  background: radial-gradient(90% 55% at 50% 22%, rgba(255,210,31,.26), rgba(255,210,31,0) 70%), radial-gradient(80% 50% at 50% 100%, rgba(255,255,255,.1), rgba(255,255,255,0) 70%), #100F0D; }
.ph-dial { animation: ph-in .28s ease-out; }
.ph-call:not([hidden]) { animation: ph-in .32s ease-out; }
@keyframes ph-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.ph-who { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 3em; }
.ph-avatar { width: 8.4em; height: 8.4em; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.14)); font-size: 1em; font-weight: 800; letter-spacing: .02em; }
.ph-avatar { font-size: 3.2em; width: 2.6em; height: 2.6em; }
.ph-cname { margin: .55em 0 0; font-size: 2.4em; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
.ph-cstat { margin: .4em 0 0; font-size: 1.65em; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; min-height: 1.3em; }
.ph-ctl { flex: none; display: grid; grid-template-columns: repeat(3, 7.2em); gap: 2em 2.2em; justify-content: center; margin-bottom: 4.6em; }
.ph-cb { display: flex; flex-direction: column; align-items: center; gap: .55em; font-size: 1.2em !important; font-weight: 600; color: var(--w); }
.ph-cbi { width: 6em; height: 6em; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); transition: background-color .2s, color .2s; }
.ph-cbi svg { width: 2.6em; height: 2.6em; fill: currentColor; }
.ph-cbi .ph-l { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.ph-cbi .ph-slash { display: none; }
.ph-cb[aria-pressed="true"] .ph-cbi { background: rgba(255,255,255,.94); color: #100F0D; }
#ph-mute[aria-pressed="true"] .ph-slash { display: inline; }
.ph-cb[aria-disabled="true"] { cursor: default; }
.ph-cb.ph-dim { opacity: .45; }
.ph-end { flex: none; width: 7.1em; height: 7.1em; border-radius: 50%; background: var(--ph-red) !important; display: flex; align-items: center; justify-content: center; transition: filter .2s, transform .2s; }
.ph-end:active { filter: brightness(1.1); transform: scale(.96); }
.ph-end svg { width: 3.4em; height: 3.4em; fill: var(--w); transform: rotate(135deg); }

@media (prefers-reduced-motion: reduce) {
  .d2-pill.is-nudge::after { animation: none; opacity: 1; box-shadow: 0 0 0 4px rgba(16,15,13,.85); }
  .ph-dial, .ph-call:not([hidden]) { animation: none; }
  .ph-key, .ph-go, .ph-end, .ph-cbi, .ph-del { transition: none; }
}

@media (max-width: 1100px) { .d2-grid { gap: 40px; } .ph { font-size: clamp(8px, 1.05vh, 10px); } }
@media (max-width: 860px) {
  .d2-grid { grid-template-columns: 1fr; gap: 28px; max-width: 600px; }
  .d2-stage { padding: 6px 0 calc(var(--bar-h) + 12px); }
  .ph { font-size: 9.4px; }
}
@media (max-width: 760px) {
  .hx-d2 .d-sits { margin-bottom: 14px; }
  .hx-d2 .d-h1 { font-size: clamp(38px, min(11.5vw, 6.4vh), 54px); }
  .hx-d2 .d-sub { font-size: 16.5px; margin-top: 12px; }
  .d2-subpill { width: auto; }
  .d2-pill { margin-top: 20px; }
  .ph { font-size: min(9.2px, calc((100vw - 2 * var(--pad)) / 32)); }
}

/* landing-d2b: only the green Call and red End buttons act. The other phone buttons are drawn only: they keep a
   pointer and press feedback so the phone looks real, but they are marked aria-disabled and do nothing. */
.ph-key[aria-disabled="true"], .ph-del[aria-disabled="true"], .ph-cb[aria-disabled="true"] { cursor: pointer; }
.ph-cb:active .ph-cbi { background: rgba(255,255,255,.34); transition: none; }
.ph-del:active { opacity: .6; }

/* Small screens (max-width 760px, the hero's own mobile breakpoint): no drawn phone, only the call pill.
   display:none takes it out of the layout and stops its animations; phone.js pauses its timers to match.
   With the phone gone, card 1 is one screen tall, so its text and pill sit in the middle instead of the top. */
@media (max-width: 760px) {
  .hx-d2 .d2-stage { display: none; }
  .hx-d.hx-d2 { justify-content: center; }
}