/* zeon companion screens, rebuilt in HTML in the app's current design (Theme.swift):
   ink #0A0A0A, paper #FAFAF8, fill #1A1A18, secondary #A7A7A1, red #FAFAF8 for signals only, white primary buttons. */
/* iPhone 18 Pro, front view, to scale: body 71.9 × 150 mm, 6.3" display (402 × 874 pt), same bezels as 17 Pro,
   Dynamic Island ~13.5 mm wide. Screen corner radius ≈ 55 pt. Side keys: action, volume ±, side key, Camera Control. */
.phone {
  position: relative; width: 100%; aspect-ratio: 71.9 / 150; border-radius: 16.2% / 7.8%;
  background: #000; container-type: inline-size; isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 0 0 1.5px #1d1d20, 0 0 0 2.5px #0c0c0d,
    0 60px 120px -30px rgba(0,0,0,.95);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 2.5px; border-radius: 2px; z-index: -1; }
.phone::before { /* left: action button, volume up, volume down */
  left: -3.5px; top: 21%; height: 26%; border-radius: 2px 0 0 2px;
  background: linear-gradient(to bottom, #1e1e21 0 17%, transparent 17% 35%, #1e1e21 35% 62%, transparent 62% 73%, #1e1e21 73% 100%);
}
.phone::after { /* right: side key, Camera Control */
  right: -3.5px; top: 31%; height: 39%; border-radius: 0 2px 2px 0;
  background: linear-gradient(to bottom, #1e1e21 0 28%, transparent 28% 82%, #1e1e21 82% 100%);
}
.phone > .ph { inset: 1.55% 3.5%; border-radius: 13.7% / 6.3%; overflow: hidden; }
.ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  font-size: 4.5cqw; line-height: 1.32; color: #FAFAF8; background: #0A0A0A; letter-spacing: -.01em;
  transition: opacity .3s ease;
}
.ph.is-out { opacity: 0; }
.ph svg { display: block; }
.ph-mono { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; font-size: .62em; color: #A7A7A1; }

/* status bar + island + home indicator */
.ph-sb { position: relative; z-index: 5; height: 3.3em; flex: none; display: flex; align-items: center; justify-content: space-between; padding: .5em 1.9em 0 2.2em; font-weight: 600; font-size: .92em; }
.ph-sb__icons { display: flex; gap: .35em; align-items: center; }
.ph-sb__icons svg { height: .8em; width: auto; }
.ph-island { position: absolute; z-index: 6; top: .58em; left: 50%; width: 4.3em; height: 1.85em; margin-left: -2.15em; border-radius: 2em; background: #000; }
.ph-home { position: absolute; z-index: 6; bottom: .45em; left: 50%; width: 8.6em; height: .3em; margin-left: -4.3em; border-radius: 1em; background: #FAFAF8; opacity: .85; }

/* glass */
/* Glass as the app renders it on a dark screen (SwiftUI .glassEffect / .buttonStyle(.glass)): a translucent grey
   material over a blurred backdrop, nothing more. */
.ph-glass { background: rgba(250,250,248,.13); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.ph-circle { width: 2.55em; height: 2.55em; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ph-circle svg { width: 1.05em; height: 1.05em; }
.ph-btn { display: flex; align-items: center; justify-content: center; gap: .45em; height: 2.9em; border-radius: 2em; background: #FAFAF8; color: #0A0A0A; font-weight: 600; font-size: .95em; }
.ph-btn svg { width: 1.05em; height: 1.05em; }
.ph-btn span { font-weight: 400; opacity: .8; font-variant-numeric: tabular-nums; }

/* ---------- chat ---------- */
.ph-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: .2em 1.1em .7em; }
.ph-title { text-align: center; display: grid; gap: .25em; justify-items: center; }
.ph-title b { font-weight: 600; font-size: 1.02em; }
.ph-title b sup { font-size: .55em; margin-left: .05em; }
.ph-chip { display: inline-flex; align-items: center; gap: .3em; padding: .25em .62em; border-radius: 1em; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: .66em; color: #FAFAF8; background: rgba(250,250,248,.13); }
.ph-chip svg { width: .9em; height: .9em; }
.ph-msgs {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .85em; padding: 0 1.1em .9em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  transition: opacity .5s;
}
.ph-msgs.is-fading { opacity: 0; }
.m { animation: m-in .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes m-in { from { opacity: 0; transform: translateY(.6em) scale(.98); } to { opacity: 1; transform: none; } }
.m-ai { display: grid; grid-template-columns: 1.55em minmax(0, 1fr); gap: .6em; align-items: start; font-size: 1em; line-height: 1.38; color: #E6E6E1; }
.m-av { width: 1.55em; height: 1.55em; border-radius: 50%; background: #FAFAF8; display: grid; place-items: center; margin-top: .05em; }
.m-av svg { width: 1em; color: #0A0A0A; }
.m-ai .w { opacity: 0; transition: opacity .18s; }
.m-ai .w.on { opacity: 1; }
.m-me { align-self: flex-end; max-width: 82%; background: #2A2A28; border-radius: 1.15em 1.15em .35em 1.15em; padding: .55em .85em; font-size: 1em; }
.m-photo { align-self: flex-end; width: 46%; aspect-ratio: 4 / 3; border-radius: .9em; background: #1A1A18 center / cover; border: 1px solid rgba(250,250,248,.12); }
.m-typing { display: flex; gap: .3em; padding: .55em 0 .3em 2.15em; }
.m-typing i { width: .42em; height: .42em; border-radius: 50%; background: #A7A7A1; animation: dot 1s infinite; }
.m-typing i:nth-child(2) { animation-delay: .15s; } .m-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-.15em); } }
.m-card { margin-left: 2.15em; background: #1A1A18; border: 1px solid rgba(250,250,248,.12); border-radius: 1em; padding: .85em .95em; display: grid; gap: .45em; font-size: .88em; }
.m-card__t { margin-bottom: .15em; }
.m-card__t { font-weight: 600; font-size: 1.08em; }
.m-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1em; min-height: 1.5em; }
.m-row > :first-child { color: #A7A7A1; white-space: nowrap; }
.m-row > :last-child { justify-self: end; text-align: right; white-space: nowrap; }
.m-sev { display: flex; gap: .2em; }
.m-sev i { width: 1.1em; height: .38em; border-radius: .2em; background: rgba(250,250,248,.15); }
.m-sev i.on { background: #FAFAF8; }
.m-save { align-self: flex-start; margin-left: 2.15em; font-size: .78em; font-weight: 600; padding: .45em .9em; border-radius: 2em; background: #FAFAF8; color: #0A0A0A; }
.m-spark { width: 100%; height: 3.6em; }
.m-spark path.line { fill: none; stroke: #FAFAF8; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 1.6s ease forwards .2s; }
.m-spark path.area { fill: url(#sparkfill); opacity: 0; animation: fadein .8s ease forwards 1.2s; }
.m-spark circle { fill: #FAFAF8; opacity: 0; animation: fadein .3s ease forwards 1.7s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
.m-red { color: #FAFAF8; font-weight: 600; }
.m-net { display: flex; align-items: center; gap: .5em; }
.m-net i { width: .55em; height: .55em; border-radius: 50%; background: #FAFAF8; box-shadow: 0 0 0 .2em rgba(250,250,248,.18); }

/* input bar */
.ph-input { flex: none; display: flex; align-items: center; gap: .5em; margin: 0 .6em 1.7em; padding: .6em; border-radius: 1.95em; }
.ph-input .ph-plus-btn { width: 2.7em; height: 2.7em; border-radius: 50%; background: #1A1A18; display: grid; place-items: center; flex: none; }
.ph-input .ph-plus-btn svg { width: 1.15em; height: 1.15em; }
.ph-input__field { flex: 1; min-width: 0; font-size: 1em; color: #FAFAF8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #1A1A18; border-radius: 1.35em; padding: .68em .85em; line-height: 1.32; }
.ph-input__field:empty::before { content: "Type or talk …"; color: #A7A7A1; }
.ph-input__field.is-typing::after { content: ""; display: inline-block; width: .1em; height: 1em; background: #FAFAF8; vertical-align: -.15em; margin-left: .05em; animation: caret .8s steps(1) infinite; }
.ph-mic { width: 2.7em !important; height: 2.7em !important; background: #3A3A38; color: #FAFAF8; border: 0; }

/* ---------- tab bar ---------- */
.ph-tabs { position: absolute; z-index: 4; left: .9em; right: .9em; bottom: 1.7em; display: flex; align-items: center; gap: .55em; }
.ph-tabs__bar { flex: 1; height: 3.5em; border-radius: 2em; display: flex; align-items: center; justify-content: space-around; padding: 0 .4em; }
.ph-tab { display: grid; justify-items: center; gap: .15em; font-size: .56em; color: #A7A7A1; padding: .55em .9em; border-radius: 1.6em; }
.ph-tab svg { width: 1.9em; height: 1.9em; }
.ph-tab.on { color: #FAFAF8; background: rgba(250,250,248,.14); }
.ph-plus { width: 3.5em; height: 3.5em; border-radius: 50%; background: #FAFAF8; color: #0A0A0A; display: grid; place-items: center; }
.ph-plus svg { width: 1.3em; height: 1.3em; }

/* ---------- map ---------- */
.ph-map { position: absolute; inset: 0; background: #1A1A18 center / cover; filter: saturate(.8) brightness(.85); }
.ph-attrib { position: absolute; z-index: 3; left: 1.1em; bottom: 11.9em; font-size: .5em; color: rgba(250,250,248,.7); }
.ph-map-ov { position: absolute; inset: 0; }
.ph-map-ov svg { width: 100%; height: 100%; }
.ph-fade-top { position: absolute; inset: 0 0 auto; height: 9em; background: linear-gradient(#0A0A0A, transparent); z-index: 2; }
.ph-fieldchip { position: absolute; z-index: 3; top: 4em; left: 1.1em; padding: .55em .9em; border-radius: 1.4em; font-size: .85em; }
.ph-fieldchip b { display: block; font-weight: 600; }
.ph-fieldchip span { color: #A7A7A1; font-size: .85em; }
.zone { fill: rgba(10,10,10,.78); stroke: #FAFAF8; stroke-width: 2; }
.zone-t { fill: #FAFAF8; font: 600 10px -apple-system, Inter, sans-serif; text-anchor: middle; dominant-baseline: central; }
.zone--hot { fill: #FAFAF8; stroke: #FAFAF8; }
.pulse { fill: none; stroke: #FAFAF8; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pulse 2s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.route { fill: none; stroke: #FAFAF8; stroke-width: 2.4; stroke-dasharray: 6 7; animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -26; } }
.me-dot { fill: #FAFAF8; }
.me-halo { fill: rgba(250,250,248,.25); transform-box: fill-box; transform-origin: center; animation: halo 2.4s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.5); opacity: .4; } }
.field-poly { fill: rgba(250,250,248,.10); stroke: #FAFAF8; stroke-width: 2; stroke-linejoin: round; }
.ph-sheet { position: absolute; z-index: 3; left: .9em; right: .9em; bottom: 6em; border-radius: 1.6em; padding: .95em; display: grid; gap: .7em; }
.ph-sheet__top { display: flex; justify-content: space-between; align-items: end; }
.ph-sheet__top b { display: block; font-size: 1.45em; font-weight: 600; letter-spacing: -.02em; }
.ph-sheet__top span { color: #A7A7A1; font-size: .8em; }

/* ---------- today ---------- */
.ph-pad { padding: 0 1.25em; }
.ph-h1 { font-size: 1.95em; font-weight: 700; letter-spacing: -.03em; margin: .35em 0 .15em; }
.ph-sub { color: #A7A7A1; font-size: .85em; display: flex; justify-content: space-between; }
.ph-prog { height: .3em; border-radius: 1em; background: rgba(250,250,248,.12); margin: .7em 0 1.1em; overflow: hidden; }
.ph-prog i { display: block; height: 100%; width: 14%; background: #FAFAF8; border-radius: 1em; }
.ph-next { border-radius: 1.4em; padding: 1em; display: grid; gap: .9em; }
.ph-next__row { display: flex; align-items: center; gap: .8em; }
.ph-arrow { width: 2.7em; height: 2.7em; border-radius: 50%; background: #FAFAF8; color: #0A0A0A; display: grid; place-items: center; }
.ph-arrow svg { width: 1.2em; height: 1.2em; animation: steer 3s ease-in-out infinite; }
@keyframes steer { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(14deg); } }
.ph-next__id b { display: block; font-size: 1.3em; font-weight: 600; }
.ph-next__id span { color: #A7A7A1; font-size: .78em; }
.ph-dist { margin-left: auto; font-size: 2.1em; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ph-dist small { font-size: .45em; font-weight: 500; color: #A7A7A1; margin-left: .1em; }
.ph-list { margin-top: 1.1em; }
.ph-li { display: flex; align-items: center; gap: .8em; padding: .72em 0; border-bottom: 1px solid rgba(250,250,248,.12); font-size: .88em; }
.ph-li__ring { width: 1.25em; height: 1.25em; border-radius: 50%; border: 1.5px solid #3A3A38; flex: none; }
.ph-li__ring.done { background: #FAFAF8; border-color: #FAFAF8; display: grid; place-items: center; }
.ph-li__ring.done svg { width: .8em; color: #0A0A0A; }
.ph-li b { font-weight: 600; }
.ph-li small { display: block; color: #A7A7A1; font-size: .82em; }
.ph-li__end { margin-left: auto; color: #E6E6E1; font-variant-numeric: tabular-nums; display: flex; gap: .4em; align-items: center; }
.ph-li__end svg { width: .85em; height: .85em; color: #A7A7A1; }

/* ---------- finds ---------- */
.ph-cta { margin: .4em 0 1.2em; }
.find-status { position: relative; display: inline-grid; justify-items: end; font-size: .78em; }
.find-status > * { grid-area: 1 / 1; }
.badge-new { color: #FAFAF8; font-weight: 600; animation: swapA 7s infinite; }
.badge-ok { color: #FAFAF8; font-weight: 600; opacity: 0; animation: swapB 7s infinite; }
@keyframes swapA { 0%, 45% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes swapB { 0%, 48% { opacity: 0; transform: translateY(.3em); } 55%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ring-swap { position: relative; }
.ring-swap .ph-li__ring.done { position: absolute; inset: 0; opacity: 0; animation: swapB 7s infinite; }
.muted-end { color: #A7A7A1; font-size: .78em; }

/* ---------- dot switcher (agent uses) ---------- */
.dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 30px; position: relative; z-index: 1; justify-self: center; width: 100%; }
.dot { width: 9px; height: 9px; padding: 0; border-radius: 9px; border: 1.5px solid rgba(255,255,255,.6); background: transparent; cursor: pointer; transition: width .35s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s; position: relative; overflow: hidden; }
.dot[aria-selected="true"] { width: 84px; border-color: #fff; background: rgba(255,255,255,.14); }
.dot[aria-selected="true"]::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: dotfill var(--dot-ms, 9000ms) linear forwards; }
@keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.uses { margin-top: 32px; border-top: 1px solid var(--line); }
.use {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; width: 100%; text-align: left; padding: 20px 0;
  background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text-3); cursor: pointer; transition: color .25s;
}
.use__n { font-family: var(--mono); font-size: 12px; padding-top: 5px; }
.use__t { font-size: 19px; font-weight: 600; letter-spacing: -.015em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.use__d { grid-column: 2; font-size: 15px; line-height: 1.5; color: var(--text-3); margin-top: 6px; transition: color .3s; }
.use:hover { color: var(--text-2); }
.use[aria-selected="true"] { color: #fff; }
.use[aria-selected="true"] .use__d { color: var(--text-2); }
.use[aria-selected="true"] .use__n { color: var(--key); }


@media (prefers-reduced-motion: reduce) {
  .dot[aria-selected="true"]::after { animation: none; transform: none; }
  .m-spark path.line { stroke-dashoffset: 0; }
  .m-spark path.area, .m-spark circle { opacity: 1; }
}

/* ---------- looping chat card over an image (Software hero) ---------- */
.loopchat {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(500px, 88%); height: min(480px, 88%);
  display: flex; flex-direction: column; padding: 18px 18px 14px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(30,30,34,.72), rgba(14,14,16,.78));
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08), 0 40px 100px rgba(0,0,0,.6);
  font-size: 16px; line-height: 1.45;
}
.loopchat__head { flex: none; display: flex; align-items: center; gap: 10px; color: var(--text-2); font-weight: 500; font-size: 15px; padding-bottom: 10px; }
.loopchat__head i { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.loopchat__head i svg { width: 17px; color: #000; }
.loopchat__msgs {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%); mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
}
.lc { flex: none; animation: m-in .4s cubic-bezier(.2,.8,.2,1) both; }
.lc-me { align-self: flex-end; max-width: 82%; background: #2a2a2e; padding: 10px 14px; border-radius: 18px 18px 6px 18px; }
.lc-ai { align-self: flex-start; max-width: 92%; background: rgba(255,255,255,.07); padding: 12px 14px; border-radius: 18px 18px 18px 6px; color: #ececef; }
.lc-ai .w { opacity: 0; transition: opacity .18s; } .lc-ai .w.on { opacity: 1; }
.lc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-chips span { font-size: 13.5px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.07); color: var(--text-2); }
.lc-typing { display: flex; gap: 5px; padding: 10px 2px; }
.lc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); animation: dot 1s infinite; }
.lc-typing i:nth-child(2) { animation-delay: .15s; } .lc-typing i:nth-child(3) { animation-delay: .3s; }
@media (max-width: 700px) { .composite .media { aspect-ratio: 4 / 5; } .loopchat { font-size: 14.5px; height: 86%; } }

/* Tilted iPhone: turned slightly in space so the right side of the black frame shows, like a product shot */
.phone--tilt {
  transform: perspective(2200px) rotateY(-21deg) rotateX(5deg) rotateZ(-1.5deg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 0 0 1.5px #1d1d20,
    1px 0 0 1.5px #1b1b1e, 2px 0 0 1.5px #19191c, 3px 0 0 1.5px #171719, 4px 0 0 1.5px #151517,
    5px 0 0 1.5px #131315, 6px 0 0 1.5px #111113, 7px 0 0 1.5px #0f0f10, 8px 0 0 1.5px #0d0d0e,
    9px 0 0 1.5px #26262a,
    50px 70px 110px -30px rgba(0,0,0,.95);
}
.phone--tilt::before { display: none; }
.phone--tilt::after {
  right: -11px; width: 3px; z-index: 1;
  background: linear-gradient(to bottom, #2a2a2e 0 28%, transparent 28% 82%, #2a2a2e 82% 100%);
}

/* How it works: features run through by themselves; orange line shows how long the current one plays */
.feat { position: relative; }

.feat[aria-selected="true"] .feat__n { color: var(--key); }
.dots--section { margin-top: clamp(40px, 5vw, 64px); }

/* Map without a phone frame (Scope · Our ecosystem), black and white */
.tier__map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tier__map .field-poly { fill: rgba(255,255,255,.12); }
.zone--w { fill: #FAFAF8; stroke: #FAFAF8; }
.zone-t--dark { fill: #0A0A0A; }
.pulse--w { stroke: #FAFAF8; }
.lc-media { align-self: flex-end; width: 58%; border-radius: 16px; overflow: hidden; background: #111; }
.lc-media video, .lc-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lc-media--photo { width: 44%; }
.lc-media--photo img { aspect-ratio: 4 / 3; }
.m-video { aspect-ratio: 16 / 9; width: 62%; overflow: hidden; }
.m-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-chips { display: flex; flex-wrap: wrap; gap: .35em; margin-left: 2.15em; }
.m-chips span { font-size: .78em; padding: .35em .6em; border-radius: .6em; background: #1A1A18; color: #A7A7A1; }

/* Slimmer phone UI (Peter: "viel zu fett"): lighter type, smaller controls, input grows instead of truncating */
.ph { font-size: 4.3cqw; }
.ph-circle { width: 2.15em; height: 2.15em; }
.ph-circle svg { width: .9em; height: .9em; }
.ph-head { padding: .1em 1em .6em; }
.ph-title b { font-weight: 600; font-size: .98em; }
.ph-input { gap: .4em; margin: 0 .7em 1.6em; padding: .38em; border-radius: 1.6em; align-items: flex-end; }
.ph-input .ph-plus-btn { width: 2.1em; height: 2.1em; }
.ph-input .ph-plus-btn svg { width: .95em; height: .95em; }
.ph-mic { width: 2.1em !important; height: 2.1em !important; }
.ph-mic svg { width: .95em; height: .95em; }
.ph-input__field {
  font-size: .9em; padding: .5em .8em; border-radius: 1.1em; min-height: 2.35em;
  white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.m-me { font-size: .95em; }
.m-ai { font-size: .95em; }
.ph-chip { font-size: .62em; }

/* Hot zone 07 + its pulse in the key colour (Peter 08.10.), on the B/W map card and in the phone map */
.zone--hot, .zone--w { fill: #D92D0F; stroke: #FAFAF8; }
.pulse, .pulse--w { stroke: #D92D0F; }
.zone-t--dark { fill: #FAFAF8; }

/* Navigation needle: swings like a compass, settles on the zone, pauses, searches again */
.ph-arrow svg { animation: needle 4.2s cubic-bezier(.45,.05,.35,1) infinite; transform-origin: 50% 50%; }
@keyframes needle {
  0%   { transform: rotate(-38deg); }
  16%  { transform: rotate(26deg); }
  28%  { transform: rotate(-14deg); }
  38%  { transform: rotate(7deg); }
  46%  { transform: rotate(-2deg); }
  52%, 82% { transform: rotate(0deg); }
  100% { transform: rotate(-38deg); }
}
:lang(pt) .ph-input__field:empty::before { content: "Escreva ou fale …"; }

/* iPad (11", portrait) and iPhone Duo (opened like a book), used in the App hero. Same screens as the iPhone,
   with smaller type for the larger displays. */
.phone--ipad { aspect-ratio: 177.5 / 247.6; border-radius: 7.4% / 5.3%; }
.phone--ipad > .ph { inset: 2.6% 3.7%; border-radius: 4.2% / 3%; font-size: 2.3cqw; }
.phone--duo { aspect-ratio: 146 / 152; border-radius: 6.2% / 6%; }
.phone--duo > .ph { inset: 2% 2.1%; border-radius: 4.4% / 4.2%; font-size: 2.9cqw; }
.phone--ipad .ph-island, .phone--duo .ph-island { display: none; }
.phone--tilt.phone--ipad::after { display: none; }
.phone--tilt.phone--duo::after { display: none; } /* no fold line (Peter) */