/* "A call from your elf": the real flow (js/tracker-new/calls.js). Only cl-* classes live here, so
   the designer's tracker-new.css and tracker-new-logic.css stay untouched. Night-sky look to match. */
body.tnew{--cl-green:#1FA855;--cl-green-d:#168043;--cl-cream:#FFF8E8;--cl-gold:#F5C24A;--cl-ink:#0B1D4D;--cl-soft:#DCE6FF;--cl-mute:#BFD0F5;--cl-err:#FFB4BD}

/* ---------- shared bits ---------- */
.cl-face{flex:0 0 auto;width:64px;height:64px;border-radius:50%;overflow:hidden;border:3px solid #fff;background:var(--cl-cream);display:block}
.cl-face img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.cl-face.sm{width:40px;height:40px;border-width:2px}
.cl-face.xl{width:132px;height:132px;border-width:4px;margin:0 auto 18px;box-shadow:0 0 0 10px rgba(255,255,255,.1),0 0 0 20px rgba(255,255,255,.05)}
.cl-quiet{margin:0 0 14px;color:var(--cl-soft);font-size:15.5px;line-height:1.5}
.cl-fine{margin:10px 0 0;color:var(--cl-mute);font-size:13.5px;line-height:1.45}
.cl-ai{color:var(--cl-mute);font-size:13.5px;margin:12px 0 0}
.cl-note{margin:0 0 14px;padding:12px 16px;border-radius:14px;background:#FFF3D1;color:#16296A;border:2px solid var(--cl-gold);font-size:15px;line-height:1.4}
.cl-soon{border:2px dashed rgba(245,194,74,.7);border-radius:18px;padding:16px 18px;color:#fff;background:rgba(245,194,74,.08)}
.cl-soon b{display:block;font:800 19px 'Plus Jakarta Sans',sans-serif;margin-bottom:6px}
.cl-soon p{margin:0;color:var(--cl-soft);font-size:15px;line-height:1.5}
.cl-soon.big{margin-top:18px;max-width:560px}

/* ---------- the Camera room list ---------- */
.cl-panel{margin-top:22px;padding:18px;border-radius:22px;background:rgba(8,20,58,.72);border:1px solid rgba(255,255,255,.16);color:#fff}
.cl-h{margin:0 0 10px;font:800 21px/1.25 'Plus Jakarta Sans',sans-serif;color:#fff}
.cl-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start;padding:14px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);margin-bottom:12px}
.cl-card.ready{border:2px solid rgba(31,168,85,.8);background:rgba(31,168,85,.12)}
.cl-card.failed{border-color:rgba(255,180,189,.5)}
.cl-txt{min-width:0;display:grid;gap:10px}
.cl-txt>b{font:800 18px/1.3 'Plus Jakarta Sans',sans-serif;color:#fff}
.cl-card:not(.ready) .cl-txt>b{font:600 15.5px/1.45 Inter,sans-serif;color:var(--cl-soft)}
.cl-card.paid .cl-face{animation:clPulse 1.6s ease-in-out infinite}
.cl-answer{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;border:0;border-radius:999px;background:var(--cl-green);color:#fff;font:800 19px 'Plus Jakarta Sans',sans-serif;cursor:pointer;box-shadow:0 5px 0 var(--cl-green-d)}
.cl-answer svg{width:24px;height:24px}
.cl-answer:active{transform:translateY(3px);box-shadow:0 2px 0 var(--cl-green-d)}
.cl-answer:focus-visible,.cl-b:focus-visible,.cl-pick .chip:focus-visible{outline:3px solid var(--cl-gold);outline-offset:3px}
.cl-grown{display:flex;flex-wrap:wrap;gap:4px 14px}
body.tnew .cl-grown .link,body.tnew .cl-hear{color:var(--cl-cream);font-size:14.5px;padding:8px 0;min-height:40px;cursor:pointer}
.cl-listenbox{margin:0;padding:12px 14px;border-radius:14px;background:var(--cl-cream);color:var(--cl-ink);font-size:16px;line-height:1.45;font-weight:600}
.cl-buy{margin-top:6px}
.cl-side .tn-k{color:var(--cl-gold)}

/* ---------- the form ---------- */
.cl-order{max-width:1100px}
.cl-order h1{margin:4px 0 8px;font:800 32px/1.15 'Plus Jakarta Sans',sans-serif;color:#fff}
.cl-intro{margin:0 0 18px;color:var(--cl-soft);font-size:16.5px;line-height:1.5;max-width:640px}
.cl-lab{display:block;width:100%;font-weight:700;font-size:15px;color:var(--cl-soft);margin-bottom:2px}
.cl-lab small{font-weight:500;color:var(--cl-mute)}
.cl-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.cl-pick .chip{min-height:46px;padding:0 18px;border-radius:999px;border:2px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:700 16px 'Plus Jakarta Sans',sans-serif;cursor:pointer}
.cl-pick .chip[aria-pressed="true"]{background:var(--cl-cream);color:var(--cl-ink);border-color:var(--cl-gold)}
.cl-pick .chip[aria-pressed="true"]::before{content:"\2713  "}
.cl-alert{margin:0 0 14px;padding:12px 16px;border-radius:14px;background:#5A1020;border:2px solid var(--cl-err);color:#fff;font-weight:700}
.cl-grid{display:grid;gap:20px}
.cl-kids{display:grid;gap:16px}
.cl-kid{margin:0;border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:18px;background:rgba(8,20,58,.72);display:grid;gap:12px;min-width:0}
.cl-kidh{display:flex;align-items:center;gap:10px;padding:0;font:800 21px 'Plus Jakarta Sans',sans-serif;color:#fff;margin-bottom:4px}
.cl-field label{display:block;font-weight:700;font-size:14.5px;margin-bottom:5px;color:var(--cl-soft)}
.cl-field input,.cl-field select{width:100%;min-height:50px;border-radius:14px;border:2px solid #DCE5F7;background:var(--cl-cream);color:var(--cl-ink);font:600 16.5px Inter,sans-serif;padding:0 14px;box-sizing:border-box}
.cl-field input::placeholder{color:#7E8BAE;font-weight:500}
.cl-field input.bad,.cl-field select.bad{border-color:#E5243B;box-shadow:0 0 0 3px rgba(229,36,59,.3)}
.cl-err{margin:6px 0 0;color:var(--cl-err);font-size:14.5px;font-weight:700;line-height:1.4}
.cl-row{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:12px}
.cl-hear{justify-self:start;border:0;background:transparent;text-decoration:underline;font-weight:700}
.cl-script{border-radius:18px;padding:14px 16px;background:var(--cl-cream);color:#16296A;border:2px dashed var(--cl-gold)}
.cl-script .tn-k{display:block;margin-bottom:8px;color:#B3122B}
.cl-script p{margin:0 0 6px;font-size:16.5px;line-height:1.45}
.cl-sum{border-radius:22px;padding:18px;background:rgba(8,20,58,.85);border:2px solid rgba(245,194,74,.55);color:#fff;align-self:start}
body.tnew .cl-h2{margin:0 0 10px;font:800 19px 'Plus Jakarta Sans',sans-serif;color:#fff}
.cl-lines{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cl-lines li{display:flex;justify-content:space-between;gap:12px;font-size:15.5px;color:var(--cl-soft);line-height:1.35}
.cl-lines b{color:#fff;white-space:nowrap}
.cl-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:12px 0 4px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);font:800 20px 'Plus Jakarta Sans',sans-serif}
.cl-total small{display:block;font:500 13px Inter,sans-serif;color:var(--cl-mute)}
.cl-pay{margin-top:10px}
@media (min-width:900px){
  .cl-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .cl-sum{position:sticky;top:16px}
  .cl-kid{grid-template-columns:1fr 1fr;column-gap:16px}
  .cl-kid>.cl-kidh{grid-column:1/-1}
  .cl-kid>.cl-row,.cl-kid>.cl-script,.cl-kid>.cl-hear{grid-column:1/-1}
}
@media (max-width:520px){.cl-order h1{font-size:27px}.cl-row{grid-template-columns:minmax(0,1fr) 96px}}

/* ---------- back from paying ---------- */
.cl-wait{display:flex;justify-content:center}
.cl-waitcard{max-width:520px;width:100%;text-align:center;margin:18px auto 0;padding:26px 20px;border-radius:24px;background:rgba(8,20,58,.72);border:1px solid rgba(255,255,255,.16);color:#fff}
.cl-waitcard h1{margin:6px 0 10px;font:800 28px/1.2 'Plus Jakarta Sans',sans-serif;color:#fff}   /* tracker.css makes every h1 navy: unreadable on this card */
.cl-waitcard .cl-intro{margin:0 auto 18px}
.cl-face.pulse{animation:clPulse 1.6s ease-in-out infinite}
.cl-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.cl-dots i{width:12px;height:12px;border-radius:50%;background:var(--cl-gold);animation:clDot 1.2s ease-in-out infinite}
.cl-dots i:nth-child(2){animation-delay:.2s}.cl-dots i:nth-child(3){animation-delay:.4s}

@keyframes clRipple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
@keyframes clRing{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(14deg)}50%{transform:rotate(0)}}
@keyframes clPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,194,74,.6)}50%{box-shadow:0 0 0 12px rgba(245,194,74,0)}}
@keyframes clDot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-6px);opacity:1}}

/* ---------- the phone (callphone.js phoneHtml): an incoming call on a modern phone ----------
   Our own drawing (no maker's logos): rounded frame, the island, time and bars, the elf as the
   caller photo on a blurred copy of the same picture, red Decline and green Accept. */
.ip{width:100%;max-width:372px;margin:0 auto;color:#fff;-webkit-tap-highlight-color:transparent}
.ip-frame{border-radius:56px;padding:11px;background:linear-gradient(150deg,#353d4f 0%,#121722 45%,#2a3140 100%);box-shadow:0 0 0 2px #444d60,0 34px 70px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.1)}
.ip-screen{position:relative;overflow:hidden;border-radius:46px;height:clamp(540px,calc(100svh - 220px),740px);background:radial-gradient(120% 80% at 50% 0%,#2E4FA8 0%,#0B1D4D 60%,#05091A 100%);isolation:isolate}
.ip-bg{position:absolute;inset:-60px;background-size:cover;background-position:center 15%;filter:blur(44px) saturate(1.1) brightness(.6);opacity:.45;z-index:-2}
.ip-screen::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,29,77,.25) 0%,rgba(5,9,26,.35) 45%,rgba(5,9,26,.82) 100%)}
.ip-status{position:absolute;top:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 30px 0 34px;font:600 16px/1 Inter,sans-serif;font-variant-numeric:tabular-nums}
.ip-island{position:absolute;left:50%;top:12px;width:118px;height:34px;margin-left:-59px;border-radius:20px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.ip-icons{display:flex;gap:6px;align-items:center}
.ip-icons svg{height:12px;width:auto;fill:#fff;color:#fff}
.ip-caller{display:flex;flex-direction:column;align-items:center;text-align:center;padding:78px 20px 0}
.ip-photo{position:relative;width:136px;height:136px;margin-bottom:18px}
.ip-photo img{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top;border:3px solid rgba(255,255,255,.9);background:var(--cl-cream,#FFF8E8);box-sizing:border-box;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
.ip-photo i{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,255,255,.55);opacity:0}
.ip[data-stage="ringing"] .ip-photo i{animation:clRipple 2.2s ease-out infinite}
.ip[data-stage="ringing"] .ip-photo i.r2{animation-delay:1.1s}
.ip-name{margin:0;font:800 38px/1.1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;color:#fff;outline:none;max-width:100%;overflow-wrap:anywhere}
.ip-sub{margin-top:6px;font:500 18px Inter,sans-serif;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums}
.ip-cap{margin:22px 22px 0;min-height:4.3em;text-align:center;font:700 20px/1.4 'Plus Jakarta Sans',sans-serif;color:#FFF8E8;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.ip-cap:empty{visibility:hidden}
.ip-actions{position:absolute;left:34px;right:34px;bottom:58px;display:flex;justify-content:space-between;align-items:flex-start}
.ip-actions>*{flex:0 0 auto}
.ip-b{display:grid;justify-items:center;gap:9px;border:0;background:transparent;color:#fff;font:600 15px Inter,sans-serif;padding:0;cursor:pointer}
.ip-b i{width:78px;height:78px;border-radius:50%;display:grid;place-items:center}
.ip-b svg{width:34px;height:34px}
.ip-b.no i{background:#EB3B3B}
.ip-b.yes i{background:#2FBF5B;box-shadow:0 0 0 0 rgba(47,191,91,.5)}
.ip[data-stage="ringing"] .ip-b.yes i{animation:ipGlow 1.6s ease-in-out infinite}
.ip[data-stage="ringing"] .ip-b.yes svg{animation:clRing 1.6s ease-in-out infinite}
.ip-b:focus-visible{outline:none}
.ip-b:focus-visible i{outline:3px solid var(--cl-gold,#F5C24A);outline-offset:4px}
.ip-b[hidden]{display:none}
.ip[data-stage="oncall"] .ip-actions,.ip[data-stage="ended"] .ip-actions{justify-content:center}
.ip[data-stage="ended"] .ip-photo img{filter:saturate(.7)}
.ip-home{position:absolute;left:50%;bottom:9px;width:136px;height:5px;margin-left:-68px;border-radius:3px;background:rgba(255,255,255,.85)}
.ip:not(.live) .ip-screen{height:590px}
.ip:not(.live) .ip-name{font-size:32px}
.ip.still *{animation:none!important}
@keyframes ipGlow{0%,100%{box-shadow:0 0 0 0 rgba(47,191,91,.55)}60%{box-shadow:0 0 0 16px rgba(47,191,91,0)}}   /* a glow only: Accept stays level with Decline */
/* Phones (under 600px): the live call fills the whole screen like a real incoming call, no frame;
   the phone's own status bar and home bar stay, so ours hide. Safe areas kept clear. */
@media (max-width:599px){
  .ip.live{position:fixed;inset:0;z-index:1000;max-width:none;margin:0}
  .ip.live .ip-frame{height:100%;padding:0;border-radius:0;background:none;box-shadow:none}
  .ip.live .ip-screen{height:100%;border-radius:0}
  .ip.live .ip-status,.ip.live .ip-home{display:none}
  .ip.live .ip-caller{padding-top:calc(env(safe-area-inset-top,0px) + clamp(40px,9vh,90px))}
  .ip.live .ip-photo{width:clamp(110px,32vw,140px);height:clamp(110px,32vw,140px)}
  .ip.live .ip-actions{left:max(14%,calc(env(safe-area-inset-left,0px) + 32px));right:max(14%,calc(env(safe-area-inset-right,0px) + 32px));bottom:calc(env(safe-area-inset-bottom,0px) + clamp(40px,8vh,80px))}
  .ip.live .ip-cap{font-size:19px}
}
@media (max-height:700px) and (max-width:599px){.ip.live .ip-cap{min-height:3em;margin-top:14px}.ip.live .ip-name{font-size:32px}}
.ip-actions .cl-again{align-self:center}
/* ---------- the Android look (callphone.js phoneLook, Paul, 26 Oct 2026): .ip.and ----------
   Shown on Android phones (and with ?phone=android): a small punch-hole camera instead of the
   island, the clock on the left and wifi, signal and battery on the right, a small "Calling Sofia"
   line above the photo and the name near the top, round red and green buttons bottom left and
   right with a soft halo on Accept, the gesture bar instead of the home bar; on the call a wide
   red End pill in the middle. Our own drawing, no maker's icons. Same ids and focus as the iPhone look. */
.ip.and .ip-frame{border-radius:46px;padding:9px;background:linear-gradient(160deg,#2b2f38 0%,#111318 50%,#24282f 100%);box-shadow:0 0 0 2px #3a3f4a,0 34px 70px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.08)}
.ip.and .ip-screen{border-radius:38px;background:linear-gradient(180deg,#22356E 0%,#0E1A42 55%,#060A1C 100%)}
.ip.and .ip-bg{opacity:.32}
.ip.and .ip-status{height:42px;padding:0 24px 0 26px;font:500 14.5px/1 Inter,sans-serif}
.ip-punch{position:absolute;left:50%;top:13px;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;background:#000;box-shadow:0 0 0 2px rgba(255,255,255,.05)}
.ip.and .ip-icons{gap:5px}
.ip.and .ip-icons svg{height:11.5px}
.ip.and .ip-caller{padding-top:60px}
.ip.and .ip-sub{order:-1;margin:0 0 20px;font:500 15px/1.3 Inter,sans-serif;letter-spacing:.02em;color:rgba(255,255,255,.75)}
.ip.and .ip-photo{width:112px;height:112px;margin-bottom:18px}
.ip.and .ip-photo img{border-width:2px}
.ip.and .ip-name{font:600 34px/1.15 Inter,'Plus Jakarta Sans',sans-serif;letter-spacing:0}
.ip.and .ip-cap{font:600 19px/1.4 Inter,sans-serif}
.ip.and .ip-actions{left:44px;right:44px;bottom:66px}
.ip.and .ip-b{gap:10px;font:500 14px Inter,sans-serif;color:rgba(255,255,255,.9)}
.ip.and .ip-b i{width:68px;height:68px}
.ip.and .ip-b svg{width:28px;height:28px}
.ip.and .ip-b.no i{background:#E5484D}
.ip.and .ip-b.yes i{background:#1E9E57}
.ip.and[data-stage="ringing"] .ip-b.yes i{animation:andHalo 1.8s ease-out infinite}
.ip.and[data-stage="ringing"] .ip-b.no i{box-shadow:0 0 0 6px rgba(229,72,77,.16)}
.ip.and[data-stage="oncall"] .ip-b.no i{width:120px;height:58px;border-radius:999px}
.ip.and .ip-b:focus-visible i{outline-offset:5px}
.ip-gesture{width:108px;height:4px;margin-left:-54px;bottom:10px;border-radius:2px;background:rgba(255,255,255,.6)}
.ip.and:not(.live) .ip-name{font-size:30px}
@keyframes andHalo{0%{box-shadow:0 0 0 0 rgba(30,158,87,.6),0 0 0 0 rgba(30,158,87,.35)}100%{box-shadow:0 0 0 14px rgba(30,158,87,0),0 0 0 26px rgba(30,158,87,0)}}
@media (max-width:599px){
  .ip.and.live .ip-frame{padding:0;border-radius:0;background:none;box-shadow:none}   /* full screen like the iPhone look: the phone's own edges */
  .ip.and.live .ip-screen{border-radius:0}
  .ip.and.live .ip-caller{padding-top:calc(env(safe-area-inset-top,0px) + clamp(30px,6vh,64px))}
  .ip.and.live .ip-photo{width:clamp(96px,28vw,120px);height:clamp(96px,28vw,120px)}
  .ip.and.live .ip-actions{left:max(12%,calc(env(safe-area-inset-left,0px) + 28px));right:max(12%,calc(env(safe-area-inset-right,0px) + 28px));bottom:calc(env(safe-area-inset-bottom,0px) + clamp(44px,9vh,88px))}
}
@media (max-height:700px) and (max-width:599px){.ip.and.live .ip-name{font-size:29px}.ip.and.live .ip-sub{margin-bottom:12px}}
/* the elf's words on the phone: only when the parent ticked it for this call (callring.js) */
.ip-cap[hidden]{display:none}
/* the order form's tick box (callorderkid.js) and the Christmas Day details' (calldetails.js) */
.cl-tick{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:18px;border:2px solid rgba(255,255,255,.3);background:rgba(8,20,58,.62);color:#fff;font:600 15.5px/1.45 Inter,sans-serif;cursor:pointer}
.cl-tick input{flex:0 0 auto;width:26px;height:26px;margin:0;accent-color:#F5C24A;cursor:pointer}
.cl-tick input:focus-visible{outline:3px solid var(--cl-gold,#F5C24A);outline-offset:3px}
.cl-tick:has(input:checked){border-color:var(--cl-gold,#F5C24A)}
body.tnew .cl-ob .cl-tick{text-shadow:none}
.cl-order .cl-tick{margin:16px 0}
/* the checkout consent on "Check and pay" (callorder.js sumStep; legal drafts, 27 Oct 2026, Part C1):
   above Pay, unticked to start with; Pay stays the grey disabled button (#9AA6C4, navy words, 6.65:1,
   tracker-new-polish.css) until it is ticked. Contrast checked (WCAG 4.5:1) on the summary's own
   navy (rgba(8,20,58,.85)) even over a white page: the box's white words 15.7:1, the small print
   (--cl-mute #BFD0F5) 7.5:1, its links (cream #FFF8E8, underlined) 11:1. */
.cl-sum .cl-consent{margin:16px 0 0;font-size:15px;line-height:1.45}
.cl-sum .cl-consent span{color:#fff}
.cl-sum .cl-cancel{margin:8px 0 2px}
.cl-sum .cl-fine a{color:var(--cl-cream,#FFF8E8);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.cl-sum .cl-fine a:focus-visible{outline:3px solid var(--cl-gold,#F5C24A);outline-offset:2px;border-radius:4px}
.cl-sum .cl-pay:disabled{cursor:not-allowed}
/* the demo's sample recording (calldemo.js): "Sample call: your own call will use your child's name..." */
.ip-sample{display:block;max-width:280px;margin-top:10px;padding:6px 12px;border-radius:12px;background:rgba(0,0,0,.28);font:600 13.5px/1.35 Inter,sans-serif;color:#FFF8E8}
.cl-samplenote{margin:8px 0 0;color:var(--cl-mute);font-size:13.5px;line-height:1.4}
.cp-sample{margin:14px auto 0;max-width:310px;text-align:center}
.cp-sample .btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.cp-sample .btn svg{width:20px;height:20px}
.cp-sample-cap{margin:10px 0 0;min-height:2.8em;font-weight:700;line-height:1.4}
.cp-sample-cap:empty{min-height:0}
.cp-sample-note{margin:6px 0 0;font-size:13.5px;line-height:1.4;opacity:.8}
@media (max-height:700px) and (max-width:599px){.ip.live .ip-sample{margin-top:6px;font-size:12.5px}}
.cl-panel.bare{padding:0;background:none;border:0}
/* the "How it works" preview */
.cp-phonebox{margin:0}
.cp-phonebox .ip{max-width:310px}
@media (min-width:900px){.cp-phonebox{position:sticky;top:20px}}

/* ---------- the call screens: the phone, and on computers the QR hand-over beside it ---------- */
main.tk-callring,main.tk-callrun{max-width:520px}
.cl-ringwrap{display:flex;justify-content:center;align-items:center;gap:48px;max-width:780px;margin:0 auto;padding:8px 0 22px}
.cl-ringwrap.run{flex-direction:column;gap:16px;min-height:60vh}
.cl-qr{display:none}
@media (min-width:768px){   /* computers and tablets: the code beside the phone (was 1000px; Paul's desktop test, 27 Oct 2026) */
  main.tk-callring{max-width:1000px}
  .cl-ringwrap>.ip{flex:0 0 360px}
  .cl-ringwrap .ip-screen{height:clamp(540px,calc(100svh - 290px),740px)}
  .cl-qr{display:block;width:330px;padding:24px;border-radius:24px;background:var(--cl-cream,#FFF8E8);color:#16296A;box-shadow:0 24px 50px -30px rgba(0,0,0,.8);border:2px solid var(--cl-gold,#F5C24A)}
  .cl-qr h2{margin:0 0 8px;font:800 22px/1.25 'Plus Jakarta Sans',sans-serif;color:#0B1D4D}
  .cl-qr p{margin:0 0 16px;font-size:15px;line-height:1.5;color:#33467D}
  .cl-qr-code{width:264px;height:264px;margin:0 auto;padding:14px;background:#fff;border-radius:16px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #DCE5F7}
  .cl-qr-code svg{width:100%;height:100%;display:block}
  .cl-qr-code span{font-size:14px;color:#5B6B93;text-align:center}
  .cl-qr .cl-qr-note{margin:14px 0 0;font-size:13px;color:#5B6B93}
}
.cl-runmsg{max-width:420px;margin:40px auto;padding:22px;border-radius:22px;background:rgba(8,20,58,.8);border:1px solid rgba(255,255,255,.18);color:#fff;text-align:center;font-size:17px;line-height:1.5}
.cl-again{min-height:56px;padding:0 28px;border:0;border-radius:999px;background:#2FBF5B;color:#fff;font:800 18px 'Plus Jakarta Sans',sans-serif;cursor:pointer;box-shadow:0 5px 0 #168043}
.cl-again[hidden]{display:none}
.cl-again:focus-visible{outline:3px solid var(--cl-gold,#F5C24A);outline-offset:3px}

/* ---------- the feature card (callphone.js featureCard): gold edge, ringing phone, New ---------- */
.cl-feat{position:relative;margin:0 0 16px;padding:18px;border-radius:24px;color:#fff;
  background:radial-gradient(120% 90% at 0% 0%,#2E4FA8 0%,#16296A 55%,#0B1D4D 100%);border:2px solid var(--cl-gold,#F5C24A);
  box-shadow:0 0 0 4px rgba(245,194,74,.16),0 22px 44px -26px rgba(0,0,0,.85)}
.cl-feat.thanks{background:radial-gradient(120% 90% at 0% 0%,#C2263F 0%,#7A1426 55%,#3B0A16 100%)}
.cl-feat-top{display:flex;gap:14px;align-items:center}
.cl-feat-face{position:relative;flex:0 0 auto;width:74px;height:74px;border-radius:50%;border:3px solid #fff;background:var(--cl-cream,#FFF8E8)}
.cl-feat-face img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top;display:block}
.cl-feat-ring{position:absolute;right:-8px;bottom:-6px;width:36px;height:36px;border-radius:50%;background:#2FBF5B;border:3px solid #0B1D4D;display:grid;place-items:center;box-shadow:0 0 0 0 rgba(47,191,91,.5);animation:clFeatRing 2.4s ease-in-out infinite}
.cl-feat.thanks .cl-feat-ring{border-color:#3B0A16}
.cl-feat-ring svg{width:18px;height:18px}
.cl-feat-head{min-width:0}
.cl-feat-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:4px}
.cl-new{display:inline-block;padding:3px 9px;border-radius:999px;background:#E5243B;color:#fff;font:800 11.5px/1.3 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.cl-feat.thanks .cl-new{background:var(--cl-gold,#F5C24A);color:#3B0A16}
.cl-feat-k{font:800 12px/1.3 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--cl-gold,#F5C24A)}
.cl-feat h2{margin:0;font:800 22px/1.2 'Plus Jakarta Sans',sans-serif;color:#fff}
.cl-feat-body{margin:14px 0 10px;color:#DCE6FF;font-size:15.5px;line-height:1.5}
.cl-feat.thanks .cl-feat-body{color:#FFE3E8}
.cl-feat-price{margin:0 0 4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.cl-feat-price b{font:800 24px 'Plus Jakarta Sans',sans-serif;color:var(--cl-gold,#F5C24A)}
.cl-feat-price small{font-size:13.5px;color:#BFD0F5}
.cl-feat-note{margin:2px 0 0;font-size:13px;line-height:1.45;color:#BFD0F5}
.tn .btn.cl-feat-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;width:100%}
.cl-feat-btn svg{width:22px;height:22px;flex:0 0 auto}
.tn-hqmap+.cl-feat{margin-top:16px}
@keyframes clFeatRing{0%,55%,100%{transform:rotate(0) scale(1);box-shadow:0 0 0 0 rgba(47,191,91,.5)}5%,15%,25%{transform:rotate(-16deg) scale(1.08)}10%,20%,30%{transform:rotate(16deg) scale(1.08)}40%{box-shadow:0 0 0 10px rgba(47,191,91,0)}}

/* ---------- the form: themes, thank-you things ---------- */
.cl-themes,.cl-things{display:grid;gap:10px}
/* The elf's personality (CEO, 27 Oct 2026): two radio buttons styled like the tick boxes. */
.cl-mood{display:grid;gap:10px;margin:16px 0}
.cl-order .cl-mood .cl-tick{margin:0}
.cl-mood .cl-fine{margin:0}
.cl-chips{display:flex;flex-wrap:wrap;gap:8px}
.cl-theme{min-height:44px;padding:8px 14px;border-radius:999px;border:2px solid rgba(255,255,255,.35);background:transparent;color:#fff;font:600 14.5px/1.3 Inter,sans-serif;cursor:pointer;text-align:left}
.cl-theme[aria-checked="true"]{background:var(--cl-cream);color:var(--cl-ink);border-color:var(--cl-gold)}
.cl-theme[aria-checked="true"]::before{content:"\2713  ";font-weight:800}
.cl-theme:focus-visible{outline:3px solid var(--cl-gold);outline-offset:3px}
.cl-abroad{margin-top:0}
@media (min-width:900px){.cl-kid>.cl-themes,.cl-kid>.cl-things,.cl-kid>.cl-mood{grid-column:1/-1}}
/* the Camera room offer, and the Christmas cards' button */
.cl-offer{margin-top:6px;padding:16px;border-radius:18px;border:2px solid var(--cl-gold);background:rgba(245,194,74,.08)}
.cl-offer>b{display:block;font:800 19px 'Plus Jakarta Sans',sans-serif;color:#fff;margin-bottom:6px}
.cl-offer>p{margin:0 0 8px;color:var(--cl-soft);font-size:15px;line-height:1.5}
.tn .btn.tn-thx{display:inline-flex;margin-top:12px}

@media (prefers-reduced-motion:reduce){.ip *,.cl-feat-ring,.cl-face,.cl-dots i,.cl-card .cl-face{animation:none!important}}

/* ---------- Paul's packs (25 Oct 2026): the choice of call, groups per elf, Christmas Day ---------- */
.cl-packs{display:grid;gap:10px;margin:0 0 16px;max-width:640px}
.cl-pack{display:grid;gap:4px;text-align:left;width:100%;min-height:56px;padding:12px 16px;border-radius:16px;border:2px solid rgba(255,255,255,.4);background:rgba(8,20,58,.78);color:#fff;cursor:pointer}
.cl-pack b{font:800 17px/1.3 'Plus Jakarta Sans',sans-serif}
.cl-pack small{font:500 14px/1.4 Inter,sans-serif;color:var(--cl-mute)}
.cl-pack[aria-pressed="true"]{background:var(--cl-cream);border-color:var(--cl-gold)}
.cl-pack[aria-pressed="true"] b{color:var(--cl-ink)}
.cl-pack[aria-pressed="true"] small{color:#33467D}
.cl-pack[aria-pressed="true"] b::before{content:"\2713  "}
.cl-pack:focus-visible{outline:3px solid var(--cl-gold);outline-offset:3px}
.cl-group{display:grid;gap:12px;min-width:0}
.cl-card.christmas{border:2px solid rgba(245,194,74,.7);background:rgba(245,194,74,.08)}
.cl-card.christmas .cl-txt>b{font:800 17px/1.35 'Plus Jakarta Sans',sans-serif;color:#fff}
.cl-remind .link{margin-top:6px;padding:6px 0;font-weight:800;color:#16296A;text-decoration:underline;background:none;border:0;cursor:pointer}

/* ---------- the order as steps (callorder.js, Paul, 25 Oct 2026): the set-up questions' look ----------
   One thing per screen in one column (.body.center keeps frame.js from splitting it on computers),
   big cream buttons with a gold edge like the set-up number buttons, the red Next at the bottom. */
.cl-ob{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;width:100%;max-width:640px;margin:0 auto;box-sizing:border-box;min-width:0}
.cl-ob>.qback{align-self:flex-start}
.cl-ob>.k{margin-bottom:-8px}
.cl-ob .cl-note,.cl-ob .cl-alert{margin:0}
.cl-ob .btn.red{min-height:58px;font-size:18px}
.cl-ob .cl-packs{max-width:none;margin:4px 0 0;gap:14px}
.cl-ob .cl-pack{position:relative;min-height:88px;padding:16px 18px;border-radius:20px;border:3px solid var(--cl-gold);background:var(--cl-cream);color:var(--cl-ink);box-shadow:0 6px 0 #C9962E;transition:transform .1s}
.cl-ob .cl-pack:hover{border-color:#D9283E}
.cl-ob .cl-pack:active{transform:translateY(3px);box-shadow:0 3px 0 #C9962E}
.cl-ob .cl-pack b{font-size:19px;line-height:1.3;color:var(--cl-ink)}
.cl-ob .cl-pack small{font-size:15px;color:#33467D}
.cl-ob .cl-pack[aria-pressed="true"]{border-color:#D9283E;background:#FFE9EC;box-shadow:0 6px 0 #9F2328}
.cl-ob .cl-pack[aria-pressed="true"] b::before{content:"\2713  ";color:#D9283E}
.cl-ob .cl-pack.best{margin-top:10px;box-shadow:0 6px 0 #C9962E,0 0 0 5px rgba(245,194,74,.35),0 0 26px rgba(245,194,74,.45)}
.cl-ob .cl-pack.best[aria-pressed="true"]{box-shadow:0 6px 0 #9F2328,0 0 0 5px rgba(245,194,74,.35),0 0 26px rgba(245,194,74,.45)}
.cl-best{position:absolute;top:-13px;right:16px;padding:4px 12px;border-radius:999px;background:#D9283E;color:#fff;font:800 12px/1.3 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 3px 8px rgba(0,0,0,.25)}
/* (b) the children, under their elf */
.cl-elfset{display:grid;gap:4px;padding:14px 16px;border-radius:20px;background:rgba(8,20,58,.62);border:1px solid rgba(255,255,255,.18)}
body.tnew main.tk--ob .cl-elfh{display:flex;align-items:center;gap:10px;margin:0;font:800 19px 'Plus Jakarta Sans',sans-serif;color:#fff}
.cl-ob .qchips.cl-kidchips{justify-content:flex-start;margin-top:8px}
.cl-runtotal{margin:0;padding:12px 16px;border-radius:14px;background:rgba(245,194,74,.14);border:2px solid rgba(245,194,74,.6);font:700 16px/1.4 'Plus Jakarta Sans',sans-serif}
body.tnew main.tk--ob .cl-runtotal{color:#fff}
/* (c) one child */
.cl-kidtop{display:flex;align-items:center;gap:14px}
.cl-kidtop .cl-face{width:72px;height:72px;border-width:4px}
.cl-kidtxt{display:grid;gap:4px;min-width:0}
.cl-kidtxt .h{margin:0;overflow-wrap:break-word}
.cl-stepf{display:grid;gap:14px;min-width:0}
.cl-ob .cl-field label{font-size:15px;color:#fff}
.cl-ob .cl-field input,.cl-ob .cl-field select{min-height:56px;border:2px solid #E9C46A;font-size:18px;border-radius:16px}
.cl-ob .cl-row{grid-template-columns:minmax(0,1fr) 112px}
.cl-ob .cl-lab{font-size:15.5px;color:#fff}
.cl-ob .cl-lab small{display:block;margin-top:2px;font-size:14px;color:var(--cl-soft)}
.cl-ob .cl-theme{min-height:48px;font-size:15.5px;background:rgba(8,20,58,.55)}
.cl-ob .cl-theme[aria-checked="true"]{background:var(--cl-cream)}
.cl-xmasbox{padding:14px 16px;border-radius:20px;border:2px dashed rgba(245,194,74,.75);background:rgba(8,20,58,.72)}
/* (d) hear it first, the order, Pay */
.cl-sgroup{display:grid;gap:10px;padding:14px 16px;border-radius:20px;background:rgba(8,20,58,.62);border:1px solid rgba(255,255,255,.18)}
.cl-sgh{display:flex;align-items:center;gap:10px}
.cl-sgh .cl-h2{margin:0!important}
.cl-hearbtn{justify-self:start;min-height:48px;padding:0 20px;border-radius:999px;border:2px solid var(--cl-gold);background:transparent;color:#fff;font:800 16px 'Plus Jakarta Sans',sans-serif;cursor:pointer}
.cl-hearbtn[aria-expanded="true"]{background:var(--cl-cream);color:var(--cl-ink)}
.cl-hearbtn:focus-visible,.cl-ob .chip:focus-visible{outline:3px solid var(--cl-gold);outline-offset:3px}
.cl-ob .cl-sum{position:static}
.cl-ob .cl-sum .cl-fine{margin-top:10px}
@media (max-width:520px){.cl-ob .cl-row{grid-template-columns:minmax(0,1fr) 100px}.cl-ob .cl-pack b{font-size:17.5px}}
@media (min-width:1000px){
  main.tk-callorder{padding-bottom:48px}
  .cl-ob{padding-top:8px}
  .cl-ob>.fill{flex:0 0 4px}
}
body.tnew .cl-ob>:is(p,.sub,.k),body.tnew .cl-ob .cl-field label,body.tnew .cl-ob .cl-lab,body.tnew .cl-ob>.cl-fine{text-shadow:0 1px 2px rgba(8,20,58,.95),0 0 10px rgba(8,20,58,.9),0 0 22px rgba(8,20,58,.7)}
body.tnew .cl-ob>.cl-note,body.tnew .cl-ob>.cl-alert,body.tnew .cl-ob>.cl-runtotal{text-shadow:none}
body.tnew main.tk--ob .cl-script p{color:#16296A;text-shadow:none}
body.tnew main.tk--ob .cl-script .tn-k{color:#B3122B}

/* Target file: live (deploy this)/css/tracker-call.css (append at the end; bump ?v= on tracker-call.css in tracker.html).
   Fix batch A, 26 Oct 2026: the goodbye after a call, the greyed-out child who already has a call,
   the Christmas Day call's ring time picker, and the extra-child mark on the order summary. */

/* callbye (callring.js): the goodbye the child sees when a call ends. Uses .cl-wait/.cl-waitcard. */
.cl-bye .cl-waitcard{margin-top:28px}
.cl-bye h1{color:#fff}                                   /* tracker.css makes every h1 navy */
.cl-bye .cl-intro{font-size:18px;line-height:1.45;margin:0 auto 22px;max-width:360px}
.cl-bye .cl-byebtn{min-height:52px}

/* "Choose the children": a child who already has this call (callorder.js). */
.cl-kidchips .chip.cl-has{opacity:.5;cursor:not-allowed;text-decoration:line-through}
.cl-hasnote{margin:6px 0 0}

/* The Christmas Day call's ring time (callorderkid.js ringHtml, calldetails.js). */
.cl-ring{margin-top:14px}
.cl-ring .cl-row{display:flex;gap:12px;flex-wrap:wrap}
.cl-ring .cl-ringf{flex:1 1 140px;min-width:0}
.cl-ring select{width:100%}

/* The order summary: "(extra child)" after a line. */
.cl-lines .cl-extra{font-weight:600;opacity:.75}

/* ---------- QA retest (26 Oct 2026): "wrong colour text on background" ----------
   Every fix measured again with axe and the pixel check (scratchpad qa2) at 390 x 844 and 1440 x 900. */
/* (1) "Change when {elf} rings" on the Christmas Day card: tracker.css makes every .link navy, on a navy card */
body.tnew .cl-card .cl-txt>.link{justify-self:start;padding:6px 0;min-height:40px;color:var(--cl-cream);text-decoration:underline;font-weight:800;font-size:15px}
/* (2) the gold-edged note is cream: navy words (tracker-new.css turns every p in the set-up pale blue), and
   the field errors pink on the dark panel */
body.tnew main.tk--ob .cl-note,body.tnew main.tk--ob .cl-note b{color:#16296A}
body.tnew main.tk--ob .cl-err{color:var(--cl-err)}
/* (3, 14) the order steps on a dark panel like the set-up questions, so labels and small print never sit on
   the snow or the moon (phones included; the panel scrolls with the words) */
body.tnew main.tk-callorder .cl-ob{background:rgba(8,20,58,.82);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:20px 22px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (max-width:599px){body.tnew main.tk-callorder .cl-ob{padding:16px 14px;border-radius:18px}}
body.tnew main.tk-callorder .cl-ob :is(.cl-elfset,.cl-sgroup,.cl-xmasbox){background:rgba(255,255,255,.06)}
/* the Christmas Day ring time: a short date, the day box wider than the time box */
.cl-ring .cl-ringf:first-child{flex:2 1 170px}
.cl-ringsum{margin:0;color:var(--cl-soft);font-size:15px;line-height:1.45}
/* (4) the hand-over and the live call on tablets and computers: the phone keeps its own width (a column
   flex box shrank it to 170-226px, cutting off Accept and putting the clock under the island) */
@media (min-width:600px){   /* phones keep the full-screen call (.ip.live, fixed, inset 0) */
  .cl-ringwrap.run{width:100%}
  .cl-ringwrap>.ip{flex:0 0 auto;width:min(372px,100%)}
}
@media (min-width:1000px){.cl-ringwrap:not(.run)>.ip{flex:0 0 360px}}
/* (5) "Hear it again": white on a deeper green (2.41 before) */
.cl-again{background:var(--cl-green-d,#168043);box-shadow:0 5px 0 #0E5A2F}
/* (15) focusing the name or the button never scrolls the phone's screen (it left a grey strip at the bottom) */
.ip-screen{overflow:clip}
/* "Hear a sample call" under the preview phone sits on the sky: a dark backing, full-strength words */
body.tnew .cp-sample{padding:12px 14px;border-radius:18px;background:rgba(8,20,58,.8)}
body.tnew .cp-sample-note{opacity:1;color:#DCE6FF}
@media (max-width:520px){.cl-ob .cl-row{grid-template-columns:minmax(0,1fr) 116px}}   /* "Choose" fits in the age box inside the panel */

/* ---------- the hand-over choice (Paul's desktop test, 27 Oct 2026) ----------
   Computers and tablets: the ready card rings on screen and offers "Answer here" beside the phone's QR
   code ("Or scan to answer on a phone"), so nobody has to press the ringing call first. The code is big
   enough to scan from a laptop screen (200px of code, a white quiet edge). Phones keep the plain Answer. */
@media (min-width:768px) and (max-width:999px){
  .cl-ringwrap{gap:24px;max-width:none}
  .cl-ringwrap:not(.run)>.ip{flex:0 0 340px}
  .cl-qr{width:300px;padding:20px}
  .cl-qr-code{width:236px;height:236px}
}
.cl-ho{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;align-items:start}
.cl-ho-here{display:grid;gap:12px;align-content:start}
.cl-ho-ring{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:6px 12px;border-radius:999px;background:rgba(31,168,85,.22);color:#fff;font:800 14px 'Plus Jakarta Sans',sans-serif}
.cl-ho-ring svg{width:16px;height:16px;animation:clWiggle 1.2s ease-in-out infinite}
.cl-ho-qr{padding:14px;border-radius:18px;background:var(--cl-cream);border:2px solid var(--cl-gold);color:#16296A;text-align:center}
.cl-ho-qr>b{display:block;margin:0 0 10px;font:800 16px/1.3 'Plus Jakarta Sans',sans-serif;color:#0B1D4D}
.cl-ho-qr .cl-qr-code{width:216px;height:216px;margin:0 auto;padding:8px;background:#fff;border-radius:12px;display:grid;place-items:center;box-sizing:border-box}
.cl-ho-qr .cl-qr-code svg{width:100%;height:100%;display:block}
.cl-ho-qr .cl-qr-code span{font-size:13.5px;color:#4A5A86}
body.tnew .cl-ho-qr p{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:#33467D}
body.tnew .cl-ho-qr p[hidden]{display:none}
.cl-card.ringing .cl-face{animation:clRinging 1.6s ease-out infinite}
@keyframes clRinging{0%{box-shadow:0 0 0 0 rgba(31,168,85,.75)}100%{box-shadow:0 0 0 14px rgba(31,168,85,0)}}
@keyframes clWiggle{0%,60%,100%{transform:rotate(0)}10%,30%,50%{transform:rotate(-14deg)}20%,40%{transform:rotate(14deg)}}
@media (max-width:767px){.cl-ho-qr,.cl-ho-ring{display:none}.cl-ho{display:block}}
@media (prefers-reduced-motion:reduce){.cl-card.ringing .cl-face,.cl-ho-ring svg{animation:none!important}}
/* The free first app video comes with both calls (CEO, 27 Oct 2026): a line on the feature card and a badge on the 'both' pack */
.cl-feat-perk{margin:2px 0 8px;font:700 14.5px/1.4 Inter,sans-serif;color:var(--cl-gold,#F5C24A)}
.cl-free{display:inline-block;justify-self:start;margin-top:8px;padding:4px 10px;border-radius:999px;background:#1F8A4C;color:#fff;font:700 13px/1.35 Inter,sans-serif}

/* ---------- the phone hand-over (Paul's iPhone test, 27 Oct 2026; js/tracker-new/callhandover.js) ----------
   html.ew-callrun (tracker-boot.js before the first paint, app.js after): the page is the call and nothing
   else. No garland, logo, language picker, footer, snow or sandbox pill; the page never scrolls (body's
   100vh was taller than Safari's visible area, so it scrolled); and the page behind Safari's see-through
   bars is the call's own night blue, top to bottom, so the bars look part of the call. */
html.ew-callrun,html.ew-callrun:has(body.tnew){height:100%;overflow:hidden;overscroll-behavior:none;background:#090D1F linear-gradient(180deg,#283C70 0%,#141E45 50%,#090D1F 100%) no-repeat!important}
html.ew-callrun body{height:100%;min-height:0!important;overflow:hidden;overscroll-behavior:none;background:transparent!important}
html.ew-callrun body::before,html.ew-callrun body::after{display:none!important}
html.ew-callrun :is(.tn-garland,.tn-scene,.tn-snow,.xspark,.skip,.nav,.tkfoot,.tk-sandbox,.revback){display:none!important}
html.ew-callrun main#app{min-height:0;height:100%;max-width:none;margin:0;padding:0!important}
html.ew-callrun .cl-ringwrap.run{height:100%;min-height:0;padding:0;justify-content:center}
/* The pre-call screen and the goodbye: full screen in the call's look, centred, safe areas kept clear
   (they scroll inside themselves only if a small phone needs it). */
.cl-hv{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;color:#fff;text-align:center;
  background:radial-gradient(120% 80% at 50% 0%,#2E4FA8 0%,#0B1D4D 60%,#05091A 100%)}
.cl-hv-in{margin:auto;width:100%;max-width:420px;box-sizing:border-box;padding:calc(env(safe-area-inset-top,0px) + 28px) max(22px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 28px) max(22px,env(safe-area-inset-left,0px))}
.cl-hv-face{display:block;width:132px;height:132px;margin:0 auto 20px;border-radius:50%;overflow:hidden;border:4px solid #fff;background:var(--cl-cream,#FFF8E8);box-shadow:0 0 0 10px rgba(255,255,255,.1),0 0 0 20px rgba(255,255,255,.05)}
.cl-hv-face img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
body.tnew .cl-hv h1{margin:0 0 24px;font:800 28px/1.2 'Plus Jakarta Sans',sans-serif;color:#fff;outline:none;overflow-wrap:anywhere}
.cl-hv-start{display:flex;align-items:center;justify-content:center;width:100%;min-height:64px;padding:0 24px;border:0;border-radius:999px;background:var(--cl-green-d,#168043);color:#fff;font:800 21px 'Plus Jakarta Sans',sans-serif;cursor:pointer;box-shadow:0 6px 0 #0E5A2F;-webkit-tap-highlight-color:transparent}
.cl-hv-start:active{transform:translateY(3px);box-shadow:0 3px 0 #0E5A2F}
body.tnew .cl-hv .cl-hv-hand{margin:18px 0 0;font:600 18px/1.45 Inter,sans-serif;color:var(--cl-cream,#FFF8E8)}
body.tnew .cl-hv .cl-hv-fine{margin:12px 0 0;font-size:15px;line-height:1.45;color:var(--cl-mute,#BFD0F5)}
.cl-hv.bye h1{margin-bottom:8px}
.cl-hv-grown{display:grid;gap:12px;margin-top:26px;padding:18px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);text-align:center}
body.tnew .cl-hv-grown h2{margin:0;font:700 13px/1.2 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--cl-mute,#BFD0F5)}
.cl-hv-grown .cl-hv-start{min-height:56px;font-size:19px}
.cl-hv-btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 18px;border-radius:999px;border:2px solid rgba(255,255,255,.6);background:transparent;color:#fff;font:700 17px 'Plus Jakarta Sans',sans-serif;text-decoration:none;cursor:pointer;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.cl-hv-btn:disabled{opacity:.6;cursor:default}
.cl-hv-start:focus-visible,.cl-hv-btn:focus-visible{outline:3px solid var(--cl-gold,#F5C24A);outline-offset:3px}
body.tnew .cl-hv-grown .cl-hv-note{margin:0;font-size:14.5px;line-height:1.4;color:var(--cl-cream,#FFF8E8)}
.cl-hv-note[hidden]{display:none}
body.tnew .cl-hv-grown .cl-hv-fine{margin:4px 0 0}
.cl-hv .cl-runmsg{margin:0 auto}
@media (max-height:700px){.cl-hv-face{width:104px;height:104px;margin-bottom:14px}body.tnew .cl-hv h1{font-size:25px;margin-bottom:18px}}
/* "Missed call" (no answer after 45 s, or Decline on the hand-over phone): Call back on its own, centred */
.ip[data-stage="missed"] .ip-actions:has(.ip-b.no[hidden]){justify-content:center}
.ip[data-stage="missed"] .ip-photo img{filter:saturate(.7)}
/* the age column fits its words ("Choose", "Wählen", ...) at every size (Paul, 4 Nov 2026: "the word choose is cut off") */
.cl-row,.cl-ob .cl-row{grid-template-columns:minmax(0,1fr) minmax(108px,max-content)!important}
body.tnew .cl-field.cl-age select{width:auto!important;min-width:108px!important;max-width:100%}
/* The farewell call offered after the first call is tapped (Paul, 10 Nov 2026) */ .cl-up{display:grid;gap:8px;margin-top:10px;padding:14px;border-radius:16px;background:#FFF3D1;border:2px solid #F5C24A;text-align:left} .cl-up-h{margin:0;font:800 17px/1.25 'Plus Jakarta Sans',sans-serif;color:#0B1D4D} .cl-up-p{margin:0;font-size:15px;line-height:1.4;color:#26365F} .cl-up .btn{width:100%} body.tnew main .cl-up .btn.cl-up-no,.cl-up .btn.cl-up-no{background:#fff!important;color:#0B1D4D!important;border:2px solid #0B1D4D!important;box-shadow:none!important}