/* Talkmen 24 redesign - home page (owner approved demo 1 v15, 18/10/2026): number first, carrier logos, results with the plan cards and the plan filter,
   the real logo (big with the slogan beside the form on desktop, without it beside the h1 on phones), "we also have" squares with the slow blue glow.
   Generated 1:1 from build_home.py (the new rules only; the base hero / card / section styles are in tm.css). */
.tm .numBox{margin-top:18px;max-width:900px}
.tm .numBox label{display:block;font-weight:800;font-size:19px;margin-bottom:8px}
.tm .numBox .row2{display:flex;gap:10px;align-items:center}
.tm .numBox{--go:#1D5BFF;--goDark:#1346D1}
.tm .numBox input{flex:1 1 auto;min-width:0;height:64px;padding:0 18px;border:2.5px solid var(--go);border-radius:16px;background:var(--surface);font-size:28px;font-weight:800;direction:ltr;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.1em;color:var(--ink);box-shadow:0 6px 20px rgba(18,24,38,.10)}
.tm .numBox input::placeholder{color:#9AA0AA;font-weight:600;letter-spacing:.08em}
.tm .numBox input{animation:halo 1.8s ease-in-out infinite}
@keyframes halo{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--go) 55%,transparent),0 6px 20px rgba(18,24,38,.10)}50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--go) 0%,transparent),0 0 26px 6px color-mix(in srgb,var(--go) 35%,transparent)}}
.tm .numBox input:focus{outline:none;border-color:var(--go);animation:none;box-shadow:0 0 0 5px color-mix(in srgb,var(--go) 28%,transparent),0 6px 20px rgba(18,24,38,.10)}
.tm .numBox input:not(:placeholder-shown){animation:none}
.tm .numBox input[aria-invalid=true]{border-color:var(--bad);animation:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 18%,transparent)}
.tm .numBox .next{flex:none;height:64px;padding:0 26px;border:0;border-radius:16px;background:var(--go);color:#fff;font-weight:800;font-size:20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 0 var(--goDark),0 10px 22px color-mix(in srgb,var(--go) 40%,transparent);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.tm .numBox .next svg{width:22px;height:22px}
html[dir=ltr] .tm .numBox .next svg{transform:scaleX(-1)}
.tm .numBox .next:hover{background:var(--goDark)}
.tm .numBox .next:active{transform:translateY(4px);box-shadow:0 2px 0 var(--goDark),0 4px 10px color-mix(in srgb,var(--go) 30%,transparent)}
.tm .numBox .next:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.tm .numBox input{animation:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--go) 30%,transparent)}}
.tm .numBox .err{color:var(--bad);font-weight:700;font-size:15px;margin-top:8px}
.tm .results{margin-block:22px 44px}
.tm .results .hint{color:var(--muted);font-size:16px;padding:18px 0 4px}
.tm .found{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:14px}
.tm .found .pill{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--c);border-radius:999px;padding:6px 14px 6px 6px;font-weight:800;font-size:16px}
html[dir=rtl] .tm .found .pill{padding:6px 6px 6px 14px}
.tm .found .pill img{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:50%}
.tm .found .pill b{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.tm .found button{border:0;background:none;color:var(--ink);font-weight:700;text-decoration:underline;cursor:pointer;font-size:15px;padding:4px}
.tm .pickBox{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:16px}
.tm .pickBox p{margin:0 0 10px;font-weight:700}
.tm .results h2{font-family:var(--display);font-size:clamp(24px,3vw,32px);font-weight:800;margin:0 0 10px}
.tm .plansGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tm .plansGrid .card{cursor:default}
.tm .plansGrid .card .load{margin-top:6px;border:0;border-radius:12px;background:var(--cta);color:var(--cta-ink);font-weight:800;font-size:16px;padding:12px;cursor:pointer;display:flex;justify-content:center;gap:8px;align-items:center}
.tm .plansGrid .card .load .sum{font-family:var(--display);direction:ltr;unicode-bidi:isolate}
.tm .plansGrid .card .load[aria-busy=true]{opacity:.7}
.tm .plansGrid .card[aria-disabled=true] .load{background:var(--soft);color:var(--muted);cursor:not-allowed}
.tm .hTop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tm .hTop h1{min-width:0}
.tm .heroLogo{display:none;flex:none;height:80px;width:auto}
@media (min-width:901px){
 .tm .hero .wrap{max-width:none;display:grid;grid-template-columns:minmax(0,720px) minmax(0,1fr);column-gap:24px;align-items:start;padding-inline-start:max(16px,calc((100% - 1180px) / 2 + 16px));padding-inline-end:16px}
 .tm .hero .wrap>*{grid-column:1}
 .tm .hero .wrap>.bigLogo{grid-column:2;grid-row:1 / span 4;align-self:center;justify-self:center;display:block;width:min(450px,90%);height:auto}
}
.tm .bigLogo{display:none;filter:drop-shadow(0 0 10px rgba(29,91,255,.40))}
@media (prefers-reduced-motion:no-preference){.tm .bigLogo{animation:logoHalo 4s ease-in-out infinite}}
@keyframes logoHalo{0%,100%{filter:drop-shadow(0 0 6px rgba(29,91,255,.30)) drop-shadow(0 0 0 rgba(29,91,255,0))}50%{filter:drop-shadow(0 0 14px rgba(29,91,255,.70)) drop-shadow(0 0 34px rgba(29,91,255,.45))}}
@media (max-width:900px){.tm .heroLogo{display:block}}
@media (max-width:640px){.tm .heroLogo{height:62px}}
@media (max-width:640px){.tm .numBox .row2{flex-direction:column;align-items:stretch}.tm .numBox .next{width:100%}.tm .numBox input{font-size:26px}.tm .plansGrid{grid-template-columns:1fr 1fr;gap:10px}}
@media (max-width:380px){.tm .plansGrid{grid-template-columns:1fr}}
.tm .card .tag + .amt.txt{margin-top:24px}
.tm .logos{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.tm .logos>span{color:var(--muted);font-size:14px;font-weight:700;margin-inline-end:2px}
.tm .logos .lg{width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line);background:#fff;padding:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:box-shadow .2s,border-color .2s,transform .15s}
.tm .logos .lg img{width:100%;height:100%;object-fit:contain}
.tm .logos .lg:hover{border-color:var(--c);transform:translateY(-1px)}
.tm .logos .lg[aria-pressed=true]{border-color:var(--c);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--c),0 0 18px 6px color-mix(in srgb,var(--c) 45%,transparent)}
@media (prefers-reduced-motion:no-preference){.tm .logos .lg[aria-pressed=true]{animation:lgHalo 1.6s ease-in-out infinite}}
@keyframes lgHalo{0%,100%{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--c),0 0 10px 2px color-mix(in srgb,var(--c) 35%,transparent)}50%{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--c),0 0 24px 10px color-mix(in srgb,var(--c) 55%,transparent)}}
@media (max-width:640px){.tm .logos{gap:6px}.tm .logos .lg{width:40px;height:40px;border-radius:10px}.tm .logos>span{width:100%}}
.tm .squares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;max-width:760px}
.tm .sq{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line);text-decoration:none;color:var(--ink);overflow:hidden}
.tm .sq::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--c)}
.tm .sq .ic{width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);display:flex;align-items:center;justify-content:center}
.tm .sq .ic svg{width:26px;height:26px}
.tm .sq b{display:block;font-family:var(--display);font-size:17px;font-weight:800;line-height:1.2}
.tm .sq p{margin:2px 0 0;color:var(--muted);font-size:13px;line-height:1.35}
.tm .sq .go{display:none}
.tm .sq:hover{border-color:var(--c);box-shadow:0 10px 26px color-mix(in srgb,var(--c) 18%,transparent)}
@media (max-width:640px){.tm .squares{grid-template-columns:1fr 1fr;gap:8px}.tm .sq{grid-template-columns:1fr;gap:6px;padding:10px 12px}.tm .sq .ic{width:36px;height:36px}.tm .sq .ic svg{width:22px;height:22px}.tm .sq p{display:none}}
@keyframes blueHalo{0%,40%,100%{box-shadow:0 0 0 0 rgba(29,91,255,0)}20%{box-shadow:0 0 0 3px rgba(29,91,255,.45),0 0 26px 8px rgba(29,91,255,.30)}}
@media (prefers-reduced-motion:no-preference){
.tm .squares .sq{animation:blueHalo 7s ease-in-out infinite both}
.tm .squares .sq:nth-child(2){animation-delay:3.5s}
}

/* site glue */
.tm .bigLogo img,.tm .heroLogo img{display:block;width:100%;height:auto}
.tm .heroLogo{width:auto}.tm .heroLogo img{height:100%;width:auto}
.tm .tmBuyHidden{margin-top:8px}
.tm .tmBuyHidden .phone-error-message{color:var(--bad);font-weight:700;font-size:15px}
.tm .results .tmPlans[hidden],.tm .results [hidden]{display:none!important}
.tm .plansGrid .card{display:grid}

/* 19/10/2026 (owner approved colour version 9, demo 1 v21): the top part is night blue with white type; its bottom melts into the page
   background over a soft zone under the carrier logos (eased stops, no visible line). Every text stays on the dark blue (AA); the header is plain white. */
.tm .homeFade{position:relative;z-index:0}
.tm .homeFade .hero{--fz:150px;padding:30px 0 calc(var(--fz) + 6px);background:
 linear-gradient(180deg,transparent 0,transparent calc(100% - var(--fz)),rgba(248,248,246,.10) calc(100% - var(--fz)*.80),rgba(248,248,246,.32) calc(100% - var(--fz)*.58),rgba(248,248,246,.62) calc(100% - var(--fz)*.36),rgba(248,248,246,.88) calc(100% - var(--fz)*.16),var(--bg) 100%),
 linear-gradient(160deg,#0B1B3F 0%,#12306E 100%)}
@media (max-width:900px){.tm .homeFade .hero{--fz:110px}}
.tm .homeFade .hero h1,.tm .homeFade .numBox label{color:#fff}
.tm .homeFade .eyebrow,.tm .homeFade .logos>span{color:#C9D6F5}
.tm .homeFade .numBox .next{box-shadow:0 6px 0 #0A2E8A,0 0 0 2px rgba(255,255,255,.25)}
.tm .homeFade .bigLogo{filter:drop-shadow(0 0 18px rgba(80,150,255,.75))}
.tm .homeFade .results .hint{color:#1F2430}
/* 18/10/2026 (owner): a card with one detail line keeps its price and button at the bottom, level with the other cards of the row */
.tm .plansGrid .card{display:flex;flex-direction:column;gap:8px}
.tm .plansGrid .card .price{margin-top:auto}
/* 18/10/2026 (owner): the carrier's plans title and the plan-type chips stand centred above the (centred) filter */
.tm .tmPlans>h2{text-align:center}
.tm .tmPlans>.filters{justify-content:center}
/* 20/10/2026 (owner, phone): no WhatsApp bar at the bottom of the HOME page on phones - the header already has the WhatsApp button (this file loads on the home page only) */
@media (max-width:1024px){.tm .WhatsappIcon{display:none}body.tm{padding-bottom:0}}
/* 20/10/2026 (owner, Rami Levy demo EPmDSkU): the "new" tag of a carrier on the home logo button and its chip */
.tm .logos .lg{position:relative}
.tm .logos .lg .newtag{position:absolute;top:-9px;inset-inline-end:-9px;background:#E0198F;color:#fff;font-weight:800;font-size:10px;line-height:1;padding:3px 5px;border-radius:999px;box-shadow:0 3px 8px rgba(224,25,143,.45)}
.tm .chips .chip{position:relative}
.tm .chips .chip .newtag{position:absolute;top:-8px;inset-inline-end:-6px;background:#E0198F;color:#fff;font-weight:800;font-size:11px;line-height:1;padding:3px 7px;border-radius:999px}