/* SKYNET redesign, task 91. Light violet system, Home (stage 1).
   CSP forbids inline styles, so every rule of the new design lives here. */

:root{
  --bg:#F9F7FD;
  --bg-alt:#F7F4FC;
  --soft:#E6DDF9;
  --soft-strong:#CAB7E9;
  --violet:#7332DA;
  --violet-hover:#6F2BD9;
  --deep:#432C85;
  --deep-alt:#5B2CB5;
  --lav:#AD94D8;
  --lav-strong:#9071BE;
  --ink:#121A4A;
  --muted:#5A6096;
  --white:#fff;
  --line:#EAE2F8;
  --radius-card:24px;
  --radius-lg:24px;
  --radius-pill:28px;
  --r-sm:12px;
  --r-md:16px;
  --r-lg:24px;
  --hero-tail:#F6F1FB;
  --shadow-soft:0 14px 34px rgba(115,50,218,.10);
  --shadow-card:0 18px 44px rgba(67,44,133,.10);
  --shadow-violet:0 16px 32px rgba(115,50,218,.28);
  --wrap:1180px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Armenian","Noto Sans","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin-top:0}
img{max-width:100%}
.wrap{width:min(var(--wrap),calc(100% - 40px));margin:0 auto}
.muted{color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:-80px;z-index:9999;background:var(--deep);color:var(--white);padding:10px 14px;border-radius:12px}
.skip-link:focus{top:12px}
.icon{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon--fill{fill:currentColor;stroke:none}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* --- buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border-radius:var(--radius-pill);border:1px solid transparent;
  font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.btn--primary{background:var(--violet);color:var(--white);box-shadow:var(--shadow-violet)}
.btn--primary:hover{background:var(--violet-hover);transform:translateY(-1px)}
.btn--outline{background:var(--white);color:var(--deep);border-color:var(--soft-strong);box-shadow:var(--shadow-soft)}
.btn--outline:hover{border-color:var(--violet);color:var(--violet)}
.btn--light{background:var(--white);color:var(--violet);box-shadow:var(--shadow-soft)}
.btn--light:hover{background:var(--soft)}
.btn--wide{width:100%}
.btn--sm{padding:11px 20px;font-size:14px}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

/* --- header --- */
.hdr{position:sticky;top:0;z-index:600;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 2px 16px rgba(67,44,133,.06)}
.hdr-row{display:flex;align-items:center;gap:18px;height:74px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.06em}
.brand-mark{
  display:grid;place-items:center;width:36px;height:36px;border-radius:12px;
  background:linear-gradient(135deg,var(--violet),var(--deep));color:var(--white);
  font-size:18px;font-weight:800;box-shadow:var(--shadow-soft);
}
.brand-text{font-size:19px;color:var(--ink)}
.hdr-nav{display:flex;align-items:center;gap:4px;margin-left:26px}
.hdr-nav a{padding:10px 14px;border-radius:var(--r-sm);font-size:15px;font-weight:600;color:var(--muted)}
.hdr-nav a:hover{color:var(--violet);background:var(--bg-alt)}
.hdr-nav a.is-active{color:var(--violet);background:var(--soft)}
.hdr-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.hdr-search{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-sm);color:var(--deep);background:var(--bg-alt)}
.hdr-search:hover{background:var(--soft);color:var(--violet)}
.lang{display:flex;align-items:center;gap:2px;padding:4px;background:var(--bg-alt);border-radius:var(--r-sm)}
.lang a{padding:7px 9px;border-radius:10px;font-size:11px;font-weight:800;color:var(--lav-strong)}
.lang a.is-active{background:var(--violet);color:var(--white)}
.hdr-cta{padding:12px 22px;border-radius:var(--radius-pill);background:var(--violet);color:var(--white);font-weight:700;font-size:14px;box-shadow:var(--shadow-violet)}
.hdr-cta:hover{background:var(--violet-hover)}
.hdr-burger{display:none;width:44px;height:44px;border:0;background:transparent;color:var(--ink);padding:10px;border-radius:12px}
.hdr-burger span{display:block;height:2px;border-radius:2px;background:currentColor;margin:5px 0}

/* --- hero --- */
.hero{padding:34px 0 10px}
.hero-card{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;
  padding:64px 56px;border-radius:34px;
  background:
    radial-gradient(circle at 88% 12%,rgba(115,50,218,.16),transparent 46%),
    radial-gradient(circle at 6% 92%,rgba(202,183,233,.55),transparent 52%),
    linear-gradient(135deg,var(--soft) 0%,var(--bg-alt) 58%,var(--hero-tail) 100%);
}
.hero-copy{position:relative;z-index:2;max-width:560px}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--radius-pill);
  background:var(--white);color:var(--violet);font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--shadow-soft);
}
.hero-copy h1{
  margin:22px 0 18px;font-size:clamp(34px,4.4vw,60px);line-height:1.06;
  letter-spacing:-.03em;font-weight:800;color:var(--ink);
}
.hero-copy h1 span{display:block}
.hero-copy h1 .accent{color:var(--violet)}
.hero-lead{font-size:18px;color:var(--muted);max-width:480px;margin-bottom:30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-art{
  position:relative;min-height:340px;border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.75),transparent 42%),
    linear-gradient(150deg,var(--lav) 0%,var(--deep-alt) 55%,var(--deep) 100%);
  box-shadow:var(--shadow-card);
}
.hero-art img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block}
.hero-art-glow{position:absolute;border-radius:50%;filter:blur(2px)}
.hero-art-glow.one{width:190px;height:190px;right:-40px;top:-30px;background:rgba(255,255,255,.22)}
.hero-art-glow.two{width:130px;height:130px;left:12%;bottom:-26px;background:rgba(230,221,249,.35)}
.hero-art-note{
  position:absolute;left:24px;bottom:24px;right:24px;
  display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--r-md);
  background:rgba(255,255,255,.92);color:var(--ink);box-shadow:var(--shadow-soft);
}
.hero-art-note b{display:block;font-size:15px}
.hero-art-note span{font-size:13px;color:var(--muted)}
.hero-art-note .icon{color:var(--violet);width:26px;height:26px;flex:0 0 auto}

/* --- benefits under the hero CTAs --- */
.benefits{padding:26px 0 10px}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.benefit{
  display:flex;align-items:flex-start;gap:14px;padding:22px;
  background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);
}
.benefit-ico{
  display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:var(--r-md);
  background:var(--soft);color:var(--violet);
}
.benefit b{display:block;font-size:15px;margin-bottom:4px;color:var(--ink)}
.benefit span{font-size:13.5px;color:var(--muted);line-height:1.45}

/* --- section shell --- */
.section{padding:56px 0}
.section--soft{background:var(--bg-alt)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:32px}
.eyebrow{display:inline-block;color:var(--violet);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.section-head h2{font-size:clamp(26px,3vw,38px);line-height:1.15;letter-spacing:-.02em;margin:0;color:var(--ink)}
.section-head p{max-width:420px;margin:0;color:var(--muted);font-size:15.5px}

/* --- popular tariffs --- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.plan{
  display:flex;flex-direction:column;padding:28px 24px;border-radius:var(--radius-card);
  background:var(--white);box-shadow:var(--shadow-card);border:1px solid var(--line);
}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px}
.plan-name{font-size:17px;font-weight:700;margin:0;color:var(--ink)}
.plan-tag{padding:6px 12px;border-radius:var(--radius-pill);background:var(--soft);color:var(--violet);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.plan-speed{display:flex;align-items:baseline;gap:7px;margin:20px 0 6px}
.plan-speed b{font-size:38px;line-height:1;font-weight:800;letter-spacing:-.03em}
.plan-speed span{font-size:14px;color:var(--muted)}
.plan-price{display:flex;align-items:baseline;gap:6px;margin-bottom:16px}
.plan-price b{font-size:22px;font-weight:800}
.plan-price span{font-size:13.5px;color:var(--muted)}
.plan-desc{font-size:14px;color:var(--muted);margin:0 0 14px}
.plan-features{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.plan-features li{position:relative;padding-left:26px;font-size:14px;color:var(--muted)}
.plan-features li .icon{position:absolute;left:0;top:1px;width:17px;height:17px;color:var(--violet)}
.plan .btn{margin-top:auto}
.plan--popular{background:linear-gradient(160deg,var(--deep-alt),var(--deep));border-color:var(--violet);color:var(--white);box-shadow:0 22px 46px rgba(67,44,133,.32),0 0 0 1px rgba(115,50,218,.45)}
.plan--popular .plan-name,.plan--popular .plan-speed b,.plan--popular .plan-price b{color:var(--white)}
.plan--popular .plan-speed span,.plan--popular .plan-price span,.plan--popular .plan-desc,.plan--popular .plan-features li{color:rgba(255,255,255,.82)}
.plan--popular .plan-features li .icon{color:var(--lav)}
.plan--popular .plan-tag{background:rgba(255,255,255,.18);color:var(--white)}
.plans-more{display:flex;justify-content:center;margin-top:28px}
.notice{padding:18px 22px;border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow-soft);color:var(--muted)}

/* --- address check + more-than-internet --- */
.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:stretch}
.addr-card{padding:32px;border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-card);display:flex;flex-direction:column}
.addr-card h2{font-size:clamp(23px,2.4vw,30px);margin:0 0 10px;letter-spacing:-.02em}
.addr-card p{color:var(--muted);font-size:15px;margin:0 0 20px}
.addr-form{display:flex;gap:12px;flex-wrap:wrap}
.addr-input{
  flex:1 1 220px;min-width:0;padding:15px 18px;border-radius:var(--radius-pill);
  border:1px solid var(--soft-strong);background:var(--bg-alt);color:var(--ink);
  font-size:15px;font-family:inherit;
}
.addr-input::placeholder{color:var(--lav-strong)}
.addr-input:focus{outline:none;border-color:var(--violet);background:var(--white)}
.addr-hint{margin:14px 0 0;font-size:13px;color:var(--muted)}
.addr-map{
  position:relative;cursor:pointer;margin-top:22px;min-height:190px;border-radius:20px;overflow:hidden;
  background:linear-gradient(140deg,var(--soft) 0%,var(--soft-strong) 100%);
  box-shadow:var(--shadow-soft);
}
.addr-map .leaflet-container{width:100%;height:100%;min-height:190px;background:var(--soft)}
.addr-map-note{
  position:absolute;z-index:900;pointer-events:none;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:var(--radius-pill);background:rgba(255,255,255,.94);
  color:var(--deep);font-size:13px;font-weight:700;box-shadow:var(--shadow-soft);
}
.addr-map-note .icon{width:18px;height:18px;color:var(--violet)}
.more-card{padding:32px;border-radius:var(--radius-lg);background:linear-gradient(160deg,var(--deep-alt),var(--deep));color:var(--white);box-shadow:0 22px 46px rgba(67,44,133,.28)}
.more-card .eyebrow{color:var(--lav)}
.more-card h2{font-size:clamp(23px,2.4vw,30px);margin:0 0 10px;letter-spacing:-.02em;color:var(--white)}
.more-card p{color:rgba(255,255,255,.78);font-size:15px;margin:0 0 24px}
.more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.more-item{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--r-md);background:rgba(255,255,255,.10)}
.more-item .icon{flex:0 0 auto;color:var(--lav);width:22px;height:22px}
.more-item b{display:block;font-size:14.5px;font-weight:700}
.more-item span{font-size:12.5px;color:rgba(255,255,255,.72)}

/* --- footer --- */
.ftr{background:var(--white);border-top:1px solid var(--line);padding:46px 0 54px;margin-top:10px}
.ftr-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ftr-brand p{margin:14px 0 0;color:var(--muted);font-size:14px;max-width:280px}
.ftr-links{display:flex;gap:46px;flex-wrap:wrap}
.ftr-col h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--lav-strong);margin:0 0 12px}
.ftr-col a,.ftr-col span{display:block;font-size:14.5px;color:var(--muted);margin-bottom:9px}
.ftr-col a:hover{color:var(--violet)}
.ftr-social{display:flex;gap:10px;margin-top:16px}
.ftr-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-sm);background:var(--bg-alt);color:var(--violet)}
.ftr-social a:hover{background:var(--soft)}
.ftr-bottom{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}

/* --- mobile bottom navigation --- */
.dock{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:700;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  background:var(--white);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(67,44,133,.10);
}
.dock-row{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.dock a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:var(--r-sm);color:var(--lav-strong);font-size:10.5px;font-weight:600;text-align:center}
.dock a .icon{width:21px;height:21px}
.dock a.is-active{color:var(--violet);background:var(--bg-alt)}

/* --- responsive --- */
@media (max-width:1080px){
  .hero-card{padding:48px 36px;gap:28px}
  .hdr-nav{margin-left:12px}
  .hdr-nav a{padding:10px}
}
@media (max-width:980px){
  .plans{grid-template-columns:repeat(2,1fr)}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hdr-burger{display:block;order:3}
  .hdr-nav{
    display:none;position:absolute;left:0;right:0;top:74px;flex-direction:column;
    align-items:stretch;gap:2px;margin:0;padding:14px 20px 20px;
    background:var(--white);border-bottom:1px solid var(--line);box-shadow:var(--shadow-card);
  }
  .hdr-nav.is-open{display:flex}
  .hdr-cta,.hdr-search{display:none}
  .hdr-actions{margin-left:auto;gap:8px}
  .hero-card{grid-template-columns:1fr;padding:36px 24px;border-radius:26px}
  .hero-copy{max-width:none}
  .hero-lead{max-width:none}
  .hero-art{min-height:220px;order:2}
  .hero-art img{min-height:220px}
  .duo{grid-template-columns:1fr}
  .section-head{flex-direction:column;align-items:flex-start;gap:12px}
  .section-head p{max-width:none}
}
@media (max-width:860px){
  .dock{display:block}
  body{padding-bottom:78px}
  .ftr{margin-bottom:6px}
}
@media (max-width:620px){
  .wrap{width:calc(100% - 32px)}
  .hero{padding:18px 0 4px}
  .hero-card{padding:28px 20px}
  .hero-copy h1{font-size:clamp(28px,8vw,36px)}
  .hero-lead{font-size:16px}
  .hero-actions .btn{flex:1 1 100%}
  .section{padding:38px 0}
  .plans,.benefits-grid,.more-grid{grid-template-columns:1fr}
  .addr-card,.more-card{padding:24px 20px}
  .addr-form .btn{flex:1 1 100%}
  .ftr-links{gap:28px}
  .hero-art-note{left:14px;right:14px;bottom:14px;padding:13px 14px}
}

/* --- tariffs page (stage 2): reuses the Home components, adds only the
   page header, the category chips and the 3-column plan grid --- */
.page-head{padding:38px 0 6px}
.page-head .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.page-head-copy{max-width:640px}
.page-head h1{margin:0 0 12px;font-size:clamp(30px,3.6vw,46px);line-height:1.1;letter-spacing:-.03em;font-weight:800;color:var(--ink)}
.page-head p{margin:0;color:var(--muted);font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;
  border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--white);
  color:var(--deep);font-size:14px;font-weight:700;box-shadow:var(--shadow-soft);
  transition:border-color .18s ease,color .18s ease;
}
.chip:hover{border-color:var(--violet);color:var(--violet)}
.chip b{
  display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;
  border-radius:12px;background:var(--soft);color:var(--violet);font-size:12px;font-weight:800;
}
.chip:hover b{background:var(--violet);color:var(--white)}
.plans--page{grid-template-columns:repeat(3,1fr)}
.plan-speed--flex{margin-bottom:10px}
.plan-speed--flex b{font-size:22px;line-height:1.25;letter-spacing:-.01em}
.section[id]{scroll-margin-top:92px}
@media (max-width:980px){
  .plans--page{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .page-head .wrap{flex-direction:column;align-items:flex-start;gap:18px}
  .page-head-copy{max-width:none}
}
@media (max-width:620px){
  .page-head{padding:22px 0 2px}
  .plans--page{grid-template-columns:1fr}
  .chip{padding:10px 15px;font-size:13.5px}
}

/* --- TV page (stage 4): everything above (page-head, chips, benefits, plans,
   duo) is reused as is; only the catalog poster card and its empty state are
   new, and they are built from the same tokens as the rest of the system. --- */
.tvgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tvcard{display:flex;flex-direction:column;border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow-card);overflow:hidden}
.tvcard-poster{position:relative;display:grid;place-items:center;aspect-ratio:3/2;color:var(--white);background:linear-gradient(160deg,var(--deep-alt),var(--deep))}
.tvcard-poster .icon{width:42px;height:42px;opacity:.92}
.tvcard-badge{
  position:absolute;left:14px;top:14px;padding:6px 12px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.18);color:var(--white);font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;
}
.tvcard-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.tvcard-meta{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--lav-strong)}
.tvcard-body h3{margin:0;font-size:16.5px;font-weight:700;color:var(--ink)}
.tvcard-body p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.tvcard-poster.tvp-2{background:linear-gradient(160deg,var(--violet),var(--deep))}
.tvcard-poster.tvp-3{background:linear-gradient(160deg,var(--deep),var(--ink))}
.tvcard-poster.tvp-4{background:linear-gradient(160deg,var(--lav-strong),var(--violet))}
.tvcard-poster.tvp-5{background:linear-gradient(160deg,var(--violet-hover),var(--deep-alt))}
.tvcard-poster.tvp-6{background:linear-gradient(160deg,var(--deep-alt),var(--ink))}
.tvcard-poster.tvp-7{background:linear-gradient(160deg,var(--lav),var(--deep-alt))}
.tvcard-poster.tvp-8{background:linear-gradient(160deg,var(--ink),var(--violet))}
.tv-empty{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:28px 32px;
  border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-card);
}
.tv-empty-ico{display:grid;place-items:center;width:58px;height:58px;border-radius:20px;background:var(--soft);color:var(--violet);flex:0 0 auto}
.tv-empty-ico .icon{width:28px;height:28px}
.tv-empty-copy{flex:1 1 300px}
.tv-empty-copy h3{margin:0 0 6px;font-size:19px;font-weight:700;color:var(--ink)}
.tv-empty-copy p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
@media (max-width:1080px){
  .tvgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .tvgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .tvgrid{grid-template-columns:1fr}
  .tv-empty{padding:22px;gap:16px}
}

/* --- coverage page (stage 5): everything above (page-head, chips, section,
   section-head, notice, benefits-grid, duo, addr-card, more-card,
   hero-actions) is reused as is. New here is only the two-column map layout,
   the quick-check panel and the state colours of the three result boxes that
   static/js/coverage.js fills in - all of it from the same tokens. The
   Leaflet internals (zoom, locate control, marker, route, popup) keep living
   in css/coverage.css, which the page loads after this file. --- */
.chip .icon{width:18px;height:18px;color:var(--violet)}
.cov-layout{display:grid;grid-template-columns:minmax(320px,400px) 1fr;gap:24px;align-items:stretch}
.cov-panel{display:flex;flex-direction:column;padding:28px;border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-card)}
.cov-panel [hidden]{display:none!important}
.cov-panel h2{font-size:clamp(21px,2.1vw,26px);line-height:1.2;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.cov-panel>p{margin:0 0 20px;font-size:14.5px;color:var(--muted)}
.cov-panel .btn .icon{width:20px;height:20px}
.cov-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--lav-strong);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.cov-or::before,.cov-or::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.cov-hint{margin:0;font-size:13.5px;color:var(--muted)}
.cov-adv{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.cov-adv>summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:700;color:var(--violet)}
.cov-adv>summary::-webkit-details-marker{display:none}
.cov-adv>summary:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:8px}
.cov-form{display:grid;gap:12px;margin-top:14px}
.cov-form label{display:grid;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lav-strong)}
.cov-input{width:100%;padding:13px 16px;border-radius:16px;border:1px solid var(--soft-strong);background:var(--bg-alt);color:var(--ink);font-size:15px;font-family:inherit}
.cov-input::placeholder{color:var(--lav-strong)}
.cov-input:focus{outline:none;border-color:var(--violet);background:var(--white)}
.cov-panel .notice{margin-top:16px;padding:16px 18px;box-shadow:none;background:var(--bg-alt);color:var(--ink)}
.cov-panel .notice b{display:block;font-size:14.5px;line-height:1.35;margin-bottom:4px;color:var(--ink)}
.cov-panel .notice p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.cov-panel .coverage-address.is-loading{opacity:.65}
.cov-panel .coverage-result.ok{background:#E9F7F0}
.cov-panel .coverage-result.ok b{color:#0B7A55}
.cov-panel .coverage-result.warn{background:#FBF2E2}
.cov-panel .coverage-result.warn b{color:#8A5A0F}
.cov-panel .coverage-result.danger{background:#FBECEF}
.cov-panel .coverage-result.danger b{color:#9F1F3C}
.cov-panel .coverage-cable b{color:var(--deep)}
.cov-panel .notice .coverage-cable__note{margin-top:6px;font-size:12.5px;opacity:.85}
.cov-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:auto;padding-top:22px;font-size:12.5px;color:var(--muted)}
.cov-legend span{display:inline-flex;align-items:center;gap:8px}
.cov-legend i{flex:0 0 auto;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 2px var(--white)}
.cov-legend .is-zone{background:#12A875}
.cov-legend .is-near{background:#E8A33D}
.coverage-map{position:relative;z-index:0;isolation:isolate;min-height:560px;border-radius:var(--radius-lg);overflow:hidden;background:var(--soft);box-shadow:var(--shadow-card)}
.coverage-map.leaflet-container{background:var(--soft);font-family:inherit}
.coverage-map .map-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:28px;text-align:center;font-size:14px;line-height:1.5;color:var(--deep)}
@media (max-width:1080px){
  .cov-layout{grid-template-columns:minmax(290px,340px) 1fr;gap:20px}
  .cov-panel{padding:24px}
}
@media (max-width:900px){
  .cov-layout{grid-template-columns:1fr}
  .coverage-map{min-height:440px}
}
@media (max-width:620px){
  .cov-panel{padding:22px 20px}
  .coverage-map{min-height:360px}
  .cov-legend{padding-top:18px}
}

/* --- support page (stage 6): everything above (page-head, chips, section,
   section-head, notice, duo, addr-card, more-card, btn) is reused as is. New
   here is only the contact card grid, the FAQ accordion and the security
   card - all built from the same tokens, radii and shadows. --- */
.sup-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sup-card{
  display:flex;flex-direction:column;padding:26px;border-radius:var(--radius-card);
  background:var(--white);box-shadow:var(--shadow-card);border:1px solid transparent;
  transition:border-color .16s ease,transform .16s ease;
}
a.sup-card:hover{border-color:var(--soft-strong);transform:translateY(-2px)}
.sup-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--soft);color:var(--violet);margin-bottom:16px}
.sup-ico .icon{width:24px;height:24px}
.sup-card h3{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lav-strong)}
.sup-card b{font-size:19px;font-weight:700;line-height:1.3;color:var(--ink);word-break:break-word}
.sup-card p{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.sup-pending{margin-top:20px}
.faq-list{display:grid;gap:12px}
.faq-item{
  padding:20px 24px;border-radius:var(--radius-card);background:var(--white);
  box-shadow:var(--shadow-soft);
}
.faq-q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  cursor:pointer;list-style:none;font-size:16.5px;font-weight:700;line-height:1.4;color:var(--ink);
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";flex:0 0 auto;font-size:22px;font-weight:700;line-height:1;color:var(--violet)}
.faq-item[open] .faq-q::after{content:"–"}
.faq-q:focus-visible{outline:3px solid var(--violet);outline-offset:4px;border-radius:10px}
.faq-a{margin-top:12px;padding-top:14px;border-top:1px solid var(--line)}
.faq-a p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.faq-a .btn{margin-top:16px}
.sup-safety{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:28px 32px;
  border-radius:var(--radius-lg);background:linear-gradient(160deg,var(--deep-alt),var(--deep));
  color:var(--white);box-shadow:0 22px 46px rgba(67,44,133,.28);
}
.sup-safety-ico{display:grid;place-items:center;width:58px;height:58px;border-radius:20px;background:rgba(255,255,255,.14);color:var(--white);flex:0 0 auto}
.sup-safety-ico .icon{width:28px;height:28px}
.sup-safety-copy{flex:1 1 320px}
.sup-safety-copy h2{margin:0 0 6px;font-size:clamp(20px,2.1vw,26px);letter-spacing:-.02em;color:var(--white)}
.sup-safety-copy p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.82)}
/* Design QA, task 91: the phone / e-mail / messenger cards are conditional on
   the admin settings, so the contact row can be shorter than the approved
   three columns and used to leave an empty cell on desktop. The approved
   3-up grid is kept for three cards or more; only the short row is closed. */
@media (min-width:981px){
  .sup-cards:has(.sup-card:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
  .sup-cards:has(.sup-card:only-child){grid-template-columns:minmax(0,420px);justify-content:center}
}
@media (max-width:980px){
  .sup-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .sup-cards{grid-template-columns:1fr}
  .sup-card{padding:22px 20px}
  .faq-item{padding:18px 20px}
  .faq-q{font-size:15.5px}
  .sup-safety{padding:22px 20px;gap:16px}
}

/* --- pay page (stage 7): page-head, chips, section, notice and btn are
   reused as is. New here is only the two-column pay layout, the form card
   with its fields and the dark "what we never ask" card - same tokens,
   radii and shadows as the rest of the system. --- */
.pay-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}
.pay-card{
  display:flex;flex-direction:column;padding:32px;border-radius:var(--radius-lg);
  background:var(--white);box-shadow:var(--shadow-card);
}
.pay-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-md);background:var(--soft);color:var(--violet);margin-bottom:18px}
.pay-ico .icon{width:26px;height:26px}
.pay-card h2{margin:0 0 8px;font-size:clamp(21px,2.2vw,27px);letter-spacing:-.02em;color:var(--ink)}
.pay-lead{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.pay-card .notice{
  margin:0 0 22px;padding:16px 18px;box-shadow:none;background:var(--bg-alt);color:var(--muted);
  border-left:4px solid var(--soft-strong);
}
.pay-card .notice b{display:block;margin-bottom:4px;font-size:15px;color:var(--ink)}
.pay-card .notice p{margin:0;font-size:13.5px;line-height:1.5}
.pay-card .notice.ok{border-left-color:var(--violet)}
.pay-card .notice.warn{border-left-color:var(--lav-strong)}
.pay-form{display:grid;gap:18px;margin-top:22px}
.pay-form label{display:grid;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lav-strong)}
.pay-input{width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--soft-strong);background:var(--bg-alt);color:var(--ink);font-size:15px;font-family:inherit}
.pay-input::placeholder{color:var(--lav-strong)}
.pay-input:focus{outline:none;border-color:var(--violet);background:var(--white)}
.pay-hint{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.pay-error{font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;color:#C0392B}
.pay-form .btn{margin-top:4px}
.pay-safe{
  display:flex;flex-direction:column;padding:30px;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--deep-alt),var(--deep));color:var(--white);
  box-shadow:0 22px 46px rgba(67,44,133,.28);
}
.pay-safe-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-md);background:rgba(255,255,255,.14);color:var(--white);margin-bottom:18px}
.pay-safe-ico .icon{width:26px;height:26px}
.pay-safe h2{margin:0 0 18px;font-size:clamp(19px,2vw,24px);letter-spacing:-.02em;color:var(--white)}
.pay-safe-row{padding:14px 0;border-top:1px solid rgba(255,255,255,.16)}
.pay-safe-row:last-child{padding-bottom:0}
.pay-safe-row b{display:block;font-size:15px;font-weight:700;line-height:1.35;color:var(--white)}
.pay-safe-row p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.82)}
@media (max-width:980px){
  .pay-layout{grid-template-columns:1fr}
}
@media (max-width:620px){
  .pay-card{padding:24px 20px}
  .pay-safe{padding:24px 20px}
}

/* --- account section (stage 8): page-head, chips, section, section-head,
   notice, eyebrow and btn are reused as is. New here is only the account
   shell - the centred login card, the two-column card+aside layout of the
   verify / dashboard screens, the feature grid and the dashboard tiles.
   Same tokens, radii and shadows as the rest of the system. --- */
.acc-narrow{max-width:560px;margin:0 auto}
.acc-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}
.acc-card{
  display:flex;flex-direction:column;padding:32px;border-radius:var(--radius-lg);
  background:var(--white);box-shadow:var(--shadow-card);
}
.acc-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-md);background:var(--soft);color:var(--violet);margin-bottom:18px}
.acc-ico .icon{width:26px;height:26px}
.acc-card h2{margin:0 0 8px;font-size:clamp(21px,2.2vw,27px);letter-spacing:-.02em;color:var(--ink)}
.acc-lead{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.acc-dest{color:var(--ink);white-space:nowrap}
.acc-email{margin:0;font-size:16px;font-weight:700;color:var(--violet);word-break:break-all}
.acc-card .notice{
  margin:0 0 22px;padding:16px 18px;box-shadow:none;background:var(--bg-alt);color:var(--muted);
  border-left:4px solid var(--soft-strong);
}
.acc-card .notice p{margin:0;font-size:13.5px;line-height:1.5}
.acc-card .notice.ok{border-left-color:var(--violet)}
.acc-card .notice.warn{border-left-color:var(--lav-strong)}

.acc-form{display:grid;gap:18px;margin-top:22px}
.acc-form label{display:grid;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lav-strong)}
.acc-input{width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--soft-strong);background:var(--bg-alt);color:var(--ink);font-size:15px;font-family:inherit}
.acc-input::placeholder{color:var(--lav-strong)}
.acc-input:focus{outline:none;border-color:var(--violet);background:var(--white)}
.acc-hint{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.acc-error{font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;color:#C0392B}
.acc-form .btn{margin-top:4px}
.acc-privacy{margin:18px 0 0;font-size:12.5px;line-height:1.55;color:var(--lav-strong)}
.acc-soon-cta{margin-top:22px}
.acc-code-label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lav-strong)}
.acc-code{
  text-align:center;font-size:30px;font-weight:800;letter-spacing:.32em;
  padding:18px 16px;text-indent:.32em;
}
.acc-resend{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.acc-linkbtn{
  padding:0;border:0;background:none;font-family:inherit;font-size:14.5px;font-weight:700;
  color:var(--violet);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.acc-linkbtn:hover{color:var(--deep)}
.acc-resend small{font-size:12.5px;line-height:1.5}
.acc-back{margin-top:16px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.acc-back:hover{color:var(--violet)}

.acc-aside{
  display:flex;flex-direction:column;padding:30px;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--deep-alt),var(--deep));color:var(--white);
  box-shadow:0 22px 46px rgba(67,44,133,.28);
}
.acc-aside-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-md);background:rgba(255,255,255,.14);color:var(--white);margin-bottom:18px}
.acc-aside-ico .icon{width:26px;height:26px}
.acc-aside h2{margin:0 0 6px;font-size:clamp(19px,2vw,24px);letter-spacing:-.02em;color:var(--white)}
.eyebrow--on-dark{color:var(--lav)}
.acc-aside-lead{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.82)}
.acc-aside-row{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
.acc-aside-row p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.82)}
.acc-aside-row small{display:block;margin-top:8px;font-size:12px;color:rgba(255,255,255,.66)}
.acc-aside-cta{align-self:flex-start;margin-top:20px}

.acc-meta{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.acc-meta li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:13.5px}
.acc-meta li span{color:var(--muted)}
.acc-meta li b{text-align:right;font-weight:700;color:var(--ink)}
.acc-meta--on-dark li span{color:rgba(255,255,255,.7)}
.acc-meta--on-dark li b{color:var(--white)}
/* Account logout: balanced full-width secondary action */
.acc-logout{margin-top:22px;width:100%}
.acc-logout .btn{
  width:100%;min-height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;letter-spacing:0;text-align:center;
  border:1.5px solid rgba(111,66,216,.28);background:#fff;color:var(--deep);
  box-shadow:0 8px 22px rgba(67,44,133,.07);
}
.acc-logout .btn:hover{background:var(--soft);border-color:rgba(111,66,216,.42);color:var(--violet)}
.acc-logout .btn:active{transform:translateY(1px)}

.acc-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.acc-feat{padding:26px 24px;border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow-soft)}
.acc-feat-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);background:var(--soft);color:var(--violet);margin-bottom:14px}
.acc-feat-ico .icon{width:22px;height:22px}
.acc-feat h3{margin:0 0 6px;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.acc-feat p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}

.acc-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.acc-tile{display:flex;flex-direction:column;padding:26px 24px;border-radius:var(--radius-card);background:var(--white);box-shadow:var(--shadow-soft)}
.acc-tile.is-pending{background:var(--bg-alt);box-shadow:none;border:1px dashed var(--soft-strong)}
.acc-tile-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.acc-tile-code{
  display:grid;place-items:center;min-width:44px;height:28px;padding:0 9px;border-radius:10px;
  background:var(--soft);color:var(--violet);font-size:11px;font-weight:800;letter-spacing:.08em;
}
.acc-tile-head h3{margin:0;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
.acc-tile-pending{margin:0 0 4px;font-size:13.5px;color:var(--muted)}
.acc-tile small{font-size:12.5px;line-height:1.5}
.acc-foot{margin:26px 0 0;font-size:12.5px;line-height:1.55;text-align:center}

@media (max-width:980px){
  .acc-layout{grid-template-columns:1fr}
  .acc-feats,.acc-tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .acc-card{padding:24px 20px}
  .acc-aside{padding:24px 20px}
  .acc-feats,.acc-tiles{grid-template-columns:1fr}
  .acc-code{font-size:26px;letter-spacing:.24em;text-indent:.24em}
  .acc-meta li{flex-direction:column;gap:2px}
  .acc-meta li b{text-align:left}
}

/* --- error pages (stage 9): the page shell, the centred card (.acc-narrow +
   .acc-card), the icon badge (.acc-ico), the lead text (.acc-lead) and the
   buttons are all reused from the earlier stages as they are. New here is only
   the error code numeral and the action row, built from the same tokens. --- */
.err{padding:64px 0 72px}
.err-card{align-items:center;text-align:center}
.err-code{
  margin:0 0 10px;font-size:clamp(54px,9vw,84px);line-height:1;
  font-weight:800;letter-spacing:-.04em;color:var(--soft-strong);
}
.err-card h1{margin:0 0 10px;font-size:clamp(23px,2.4vw,30px);letter-spacing:-.02em;color:var(--ink)}
.err-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
@media (max-width:620px){
  .err{padding:36px 0 48px}
  .err-actions{width:100%}
  .err-actions .btn{flex:1 1 100%}
}


/* --- Design QA round after NEEDS_FIX (task 91). Only the points the designer
   raised are addressed here. The approved light-violet palette is NOT changed:
   no brand colour is redefined, the hero gradient only swaps its cold tail for
   the neighbouring violet, as asked. This block is last in the file, so it can
   also soften a few of the rules above without rewriting them. --- */

/* 1. Typography. The stack declared in :root is now system-only and carries
   Armenian (Noto Sans Armenian / Segoe UI / system-ui), so no web font is
   downloaded and no font CDN is referenced anywhere. Heading weights stay
   600/700/800 and no heading line-height drops below 1.08. */
h1,h2,h3{line-height:1.12}
.hero-copy h1,.page-head h1{line-height:1.1}

/* 6. One background, one decoration and one rhythm for .hero and .page-head -
   the two page openings of the system. */
.page-head{
  padding:38px 0 34px;
  background:
    radial-gradient(circle at 88% 0%,rgba(115,50,218,.12),transparent 48%),
    linear-gradient(180deg,var(--soft) 0%,var(--hero-tail) 62%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
}

/* 9. Designed empty / disabled states for /tv, /pay and /account: the existing
   card keeps its icon badge, title and short text and gains the dashed
   not-ready border plus an action row. The CTAs point only at sections that
   really work today - provider readiness, auth availability and the business
   logic behind them are not touched. */
.state{border:1px dashed var(--soft-strong);box-shadow:var(--shadow-soft);border-radius:var(--r-lg)}
.state-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.tv-empty.state{background:var(--white)}

/* 2, 3, 7. Mobile below 680px: one-column footer that clears the dock,
   full-width actions, hero headline around 40px. */
@media (max-width:680px){
  .hero-copy h1{font-size:clamp(30px,7.4vw,40px);line-height:1.1}
  .plan-speed b{font-size:40px}
  .hero-actions{gap:12px}
  .hero-actions .btn{flex:1 1 100%;width:100%}
  .page-head{padding:24px 0 26px}
  .page-head .chips{width:100%}
  .page-head .chip{flex:1 1 100%;justify-content:center}
  .state-actions .btn,.err-actions .btn{flex:1 1 100%;width:100%}
  body{padding-bottom:0}
  .ftr{padding:38px 0 110px;margin-bottom:0}
  .ftr-grid{flex-direction:column;gap:28px}
  .ftr-brand p{max-width:none}
  .ftr-links{flex-direction:column;gap:22px}
  .ftr-col a,.ftr-col span{margin-bottom:10px}
  .ftr-bottom{margin-top:26px}
}

/* --- Design QA round 3 (task 91, 17.09.2026): full staging pass over the
   checklist from Ara - visual integrity, spacing, Android / iPhone / desktop,
   readability, the light-violet palette, one button / card / type system,
   hover / focus / error / loading states, HY / RU / EN.
   Appended at the very end like every stage before it: nothing above this
   line is rewritten, no brand colour is redefined and no page is redesigned.
   Only the defects listed below are closed. --- */

/* D1 READABILITY. --lav-strong (#9071BE) is the text colour of every small
   label in the system - form labels, footer headings, support card headings,
   TV card meta, the mobile dock, the language switcher and the input
   placeholders - and it lands at 3.7:1 on white and 4.0:1 on --bg-alt, under
   the 4.5:1 minimum for text below 18px. A darker sibling of the same
   lavender hue is introduced for TEXT ONLY: 5.1:1 on white, 4.7:1 on
   --bg-alt. --lav-strong itself keeps its exact value, so the tvp-4 poster
   gradient, the input borders and the warn accent are untouched. */
:root{--label:#7A62A8}
.lang a,
.ftr-col h3,
.dock a,
.tvcard-meta,
.cov-or,
.cov-form label,
.sup-card h3,
.pay-form label,
.acc-form label,
.acc-code-label,
.acc-privacy{color:var(--label)}
.addr-input::placeholder,
.cov-input::placeholder,
.pay-input::placeholder,
.acc-input::placeholder{color:var(--label)}

/* D2 RESPONSIVE GAP. The burger replaces the desktop navigation at 900px,
   and that hides the header Account button and the header search. The mobile
   dock only started at 860px, so between 861px and 900px neither the header
   nor the dock offered /pay and /account. The dock now starts at the same
   breakpoint as the burger, so the chrome always carries them. */
@media (max-width:900px){
  .dock{display:block}
  body{padding-bottom:78px}
  .ftr{margin-bottom:6px}
}

/* D3 LOADING / DISABLED. .btn had no disabled and no busy state. /coverage
   disables its "My location" button while geolocation is in flight, and
   disables it for good when the browser has no geolocation at all - until now
   that button still rendered as a fully enabled primary button. The map
   control already had is-busy in coverage.css; the panel button now speaks
   the same language. The pressed state is shared by every button. */
.btn:disabled,
.btn[aria-disabled="true"]{cursor:not-allowed;opacity:.55;box-shadow:none;transform:none}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover{transform:none}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"]{background:var(--lav)}
.btn--outline:disabled:hover{border-color:var(--soft-strong);color:var(--deep)}
.btn[aria-busy="true"]{cursor:progress}
.btn:active{transform:translateY(1px)}

/* D4 HOVER. .more-item is a link and appears on five pages, but it was the
   only interactive card in the system without hover feedback (.chip, .btn,
   .sup-card and the header links all have one). */
.more-item{transition:background .16s ease,transform .16s ease}
.more-item:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}

/* D5 FOCUS ON DARK SURFACES. The global ring is --violet, which all but
   disappears against the deep-violet cards of the system. Keyboard focus
   inside them turns white instead. */
.more-card :focus-visible,
.pay-safe :focus-visible,
.acc-aside :focus-visible,
.sup-safety :focus-visible,
.plan--popular :focus-visible,
.tvcard-poster :focus-visible{outline-color:var(--white)}

/* D6 ANCHOR OFFSET. #safe on /pay is a div, so it never picked up the offset
   that .section[id] gets and the chip jump parked its heading under the
   sticky header. Applied to every anchor target, which also keeps focused
   form fields clear of the header. */
[id]{scroll-margin-top:92px}

/* D8 REDUCED MOTION. v2.css had no guard at all, while coverage.css already
   had one. Smooth scrolling and the lift transforms are dropped for users who
   ask for less motion. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .btn:hover,.btn:active,.sup-card:hover,.more-item:hover{transform:none}
}

/* D4b HOVER. The language switcher was the last interactive control in the
   header without hover feedback. The active language keeps its violet pill. */
.lang a{transition:background .16s ease,color .16s ease}
.lang a:not(.is-active):hover{background:var(--white);color:var(--violet)}


/* --- Task 92 (17.09.2026): Home rebuilt against the reference approved by Ara.
   Appended at the very end like every stage before it: nothing above this line
   is rewritten, no brand colour is redefined, no other page is redesigned.
   Only the Home composition of the reference is added or overridden here. --- */

/* R1 HEADER. The reference carries a white rounded bar floating on the light
   page background instead of a full-bleed white strip with a border. The bar
   is the existing .hdr-row, so the markup does not change. */
.hdr{background:var(--bg);border-bottom:0;box-shadow:none;padding:14px 0}
.hdr-row{height:66px;padding:0 14px 0 22px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-pill);box-shadow:0 12px 30px rgba(67,44,133,.10)}
.hdr-nav{margin-left:16px}

/* R2 HERO. The card now stacks two parts: the main row (copy + photo) and the
   compact benefits strip along its bottom edge. Grid areas are used so that
   mobile can put the photo between the headline and the CTA row, exactly as
   the reference does, without duplicating the markup. */
.hero{padding:20px 0 12px}
.hero-card{display:block;padding:46px 48px 34px;border-radius:38px}
.hero-main{
  display:grid;grid-template-columns:1.02fr .98fr;
  grid-template-areas:"copy art" "actions art";
  align-items:center;gap:0 46px;
}
.hero-copy{grid-area:copy;max-width:600px}
.hero-actions{grid-area:actions;margin-top:28px}
.hero-art{grid-area:art}
.hero-copy h1{margin:20px 0 16px;font-size:clamp(38px,5vw,66px);line-height:1.02;letter-spacing:-.035em}
.hero-lead{font-size:17.5px;max-width:480px;margin-bottom:0}
.hero-actions .btn{padding:16px 32px;font-size:15.5px}

/* R3 HERO PHOTO SLOT. The reference puts a family lifestyle photograph in a
   violet atmosphere on the right. The picture itself is not on the server yet,
   so no external URL is embedded and no family is faked in CSS: the slot shows
   a purely photographic violet placeholder with no text. As soon as
   /admin/settings gets home_hero_image, .has-photo hides the placeholder and
   the image fills exactly the same box - the layout does not change. */
.hero-art{position:relative;margin:0;min-height:430px;border-radius:30px;overflow:hidden;background:var(--deep);box-shadow:var(--shadow-card)}
.hero-ph{position:absolute;inset:0;display:block;background:linear-gradient(152deg,#9A6BF0 0%,#7332DA 40%,#4A2394 78%,#2E1560 100%)}
.hero-ph-a,.hero-ph-b,.hero-ph-c{position:absolute;display:block;border-radius:50%}
.hero-ph-a{left:-14%;top:-22%;width:74%;height:66%;background:radial-gradient(circle at 42% 44%,rgba(255,255,255,.55),rgba(255,255,255,0) 68%)}
.hero-ph-b{right:-18%;bottom:-24%;width:82%;height:74%;background:radial-gradient(circle at 50% 50%,rgba(202,183,233,.60),rgba(202,183,233,0) 70%)}
.hero-ph-c{left:20%;bottom:10%;width:48%;height:48%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.20),rgba(255,255,255,0) 72%);filter:blur(8px)}
.hero-art .hero-photo{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;object-fit:cover;object-position:center;display:block}
.hero-art.has-photo .hero-ph{opacity:0}
.hero-script{
  position:absolute;z-index:2;left:30px;right:30px;top:26px;margin:0;
  color:var(--white);font-size:clamp(20px,2.2vw,30px);line-height:1.18;font-weight:600;
  font-family:"Segoe Script","Bradley Hand","Snell Roundhand","Comic Sans MS",cursive;
  text-shadow:0 8px 22px rgba(30,16,70,.50);pointer-events:none;
}
.hero-art-note{z-index:2;left:22px;right:22px;bottom:22px;border-radius:18px;background:rgba(255,255,255,.94)}

/* R4 HERO BENEFITS. Four compact items with violet line icons along the bottom
   edge of the hero card, as in the reference. The old .benefits section under
   the hero is gone from Home; .benefit itself stays for the other pages. */
.hero-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px;padding-top:26px;border-top:1px solid rgba(115,50,218,.16)}
.hbn{display:flex;align-items:flex-start;gap:12px;min-width:0}
.hbn-ico{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.72);color:var(--violet);box-shadow:0 8px 18px rgba(115,50,218,.12)}
.hbn-ico .icon{width:22px;height:22px}
.hbn b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.hbn span{display:block;font-size:13px;color:var(--muted);line-height:1.4}

/* R5 POPULAR PLANS. White block, four cards in one row, one saturated violet
   featured card and a text link to the full price list. The featured card used
   the deep navy-violet gradient of the dark cards; the reference asks for the
   saturated brand violet, so only this gradient is restated. */
.section--white{background:var(--white)}
.section-head--link{align-items:center}
.section-head--link>div{max-width:660px}
.section-head--link p{max-width:none;margin:10px 0 0}
.link-more{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  color:var(--violet);font-weight:700;font-size:15px;padding:10px 2px;
  transition:gap .16s ease,color .16s ease;
}
.link-more .icon{width:20px;height:20px}
.link-more:hover{gap:12px;color:var(--violet-hover)}
.plan--popular{background:linear-gradient(158deg,#8C4DEA 0%,#7332DA 46%,#5A22B4 100%);border-color:transparent;box-shadow:0 24px 48px rgba(115,50,218,.34)}

/* R6 COVERAGE PREVIEW. The reference marks the map preview with a violet pin
   and a violet round arrow that reads as "open the coverage map". Both sit
   above the Leaflet panes and never take a click: the whole tile is the link. */
.addr-map{min-height:210px}
.addr-pin{
  position:absolute;z-index:900;left:50%;top:50%;width:38px;height:38px;margin:-46px 0 0 -19px;
  display:grid;place-items:center;border-radius:50%;background:var(--violet);color:var(--white);
  box-shadow:0 12px 24px rgba(115,50,218,.45);pointer-events:none;
}
.addr-pin .icon{width:20px;height:20px}
.addr-map-go{
  position:absolute;z-index:900;right:14px;bottom:14px;width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;background:var(--violet);color:var(--white);
  box-shadow:var(--shadow-violet);pointer-events:none;
}
.addr-map-go .icon{width:20px;height:20px}

/* R7 INTERNET + TV PROMO. Part of the mobile composition of the reference and
   hidden on desktop, where the "more than internet" card carries the same
   ground. The price, when it is shown at all, is the minimum price of the
   active internet_tv packages from the admin panel. */
.promo{display:none;padding:2px 0 10px}
.promo-card{
  display:flex;align-items:center;gap:16px;padding:20px;border-radius:var(--radius-card);
  background:linear-gradient(150deg,var(--violet) 0%,var(--deep) 100%);color:var(--white);
  box-shadow:0 20px 40px rgba(67,44,133,.26);transition:transform .16s ease;
}
.promo-card:hover{transform:translateY(-1px)}
.promo-ico{display:grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.16);color:var(--white)}
.promo-ico .icon{width:26px;height:26px}
.promo-copy{display:block;min-width:0;flex:1 1 auto}
.promo-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--lav)}
.promo-card b{display:block;font-size:17px;margin:5px 0 4px}
.promo-text{display:block;font-size:13px;line-height:1.4;color:rgba(255,255,255,.80)}
.promo-price{display:inline-block;margin-top:9px;padding:6px 13px;border-radius:var(--radius-pill);background:rgba(255,255,255,.18);font-size:12.5px;font-weight:700}
.promo-go{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18)}
.promo-go .icon{width:20px;height:20px}
.promo-card :focus-visible{outline-color:var(--white)}

/* R8 FOOTER. The reference footer is compact. Only the rhythm is tightened -
   the columns, the links and the social row keep their structure. The mobile
   clearance for the fixed dock is restated below, because this rule would
   otherwise win over the 680px block written in an earlier stage. */
.ftr{padding:34px 0 40px}
.ftr-brand p{margin:12px 0 0}
.ftr-col h3{margin-bottom:10px}
.ftr-col a,.ftr-col span{font-size:14px;margin-bottom:7px}
.ftr-bottom{margin-top:24px;padding-top:16px}

/* R9 RESPONSIVE for the Home reference. */
@media (max-width:1080px){
  .hero-card{padding:38px 32px 28px}
  .hero-main{gap:0 32px}
  .hero-art{min-height:370px}
  .hdr-row{padding:0 12px 0 18px}
}
@media (max-width:980px){
  .hero-benefits{gap:14px}
  .hbn{align-items:center}
  .hbn b{margin-bottom:0}
  .hbn span{display:none}
}

/* R10 ACCOUNT ACCESS BETWEEN 861px AND 900px. The header Account button and
   the header search disappear at 900px together with the desktop navigation,
   so the fixed dock has to be on screen from exactly the same width. The rule
   is restated here, after every earlier .dock and body rule in this file, so
   that no later stage can reopen the gap; the 860px block above is now dead
   weight but is left untouched by convention. The open burger panel is also
   repositioned, because the header is a floating bar now and no longer ends
   at 74px. */
@media (max-width:900px){
  .dock{display:block}
  body{padding-bottom:78px}
  .ftr{margin-bottom:6px}
  .hdr-nav{top:calc(100% - 4px);left:16px;right:16px;padding:12px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
  .hero-card{padding:30px 22px 24px;border-radius:28px}
  .hero-main{grid-template-columns:1fr;grid-template-areas:"copy" "art" "actions";align-items:stretch;gap:22px 0}
  .hero-copy{max-width:none}
  .hero-actions{margin-top:0}
  .hero-actions .btn{flex:1 1 100%;width:100%}
  .hero-art{min-height:320px}
  .promo{display:block}
  .section-head--link{align-items:flex-start}
}
@media (max-width:680px){
  /* restated: the compact footer above would otherwise cancel the clearance
     the fixed dock needs on phones. */
  .ftr{padding:32px 0 110px;margin-bottom:0}
  body{padding-bottom:0}
}
@media (max-width:620px){
  .hero{padding:12px 0 6px}
  .hero-card{padding:24px 18px 20px;border-radius:26px}
  .hero-art{min-height:260px}
  .hdr{padding:10px 0}
  .hdr-row{height:60px;padding:0 10px 0 14px}
  .hero-script{left:20px;right:20px;top:18px}
  .hero-benefits{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:24px;padding-top:20px}
  .hbn{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .hbn-ico{width:40px;height:40px;border-radius:13px}
  .hbn-ico .icon{width:20px;height:20px}
  .hbn b{font-size:11.5px;line-height:1.25}
  .promo-card{padding:16px;gap:13px}
  .promo-ico{width:44px;height:44px;border-radius:14px}
  .promo-card b{font-size:16px}
  .link-more{font-size:14.5px}
}

/* Location-first coverage mode: Ara 2026-09-17.
   Tapping “My location” promotes the map to the primary, large view; the
   existing panel remains immediately below it. */
.cov-layout.is-location-mode{grid-template-columns:1fr}
.cov-layout.is-location-mode .coverage-map{order:-1;min-height:min(76vh,760px)}
@media (max-width:900px){
  .cov-layout.is-location-mode{gap:16px}
  .cov-layout.is-location-mode .coverage-map{min-height:calc(100dvh - 150px);scroll-margin-top:10px;border-radius:20px}
}
@media (max-width:620px){
  .cov-layout.is-location-mode .coverage-map{min-height:calc(100dvh - 118px);width:calc(100% + 0px)}
}
/* Account: passwordless Google sign-in. */
.google-signin{display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;border:1px solid #ded6ed;background:#fff;color:#232442;font-size:16px;font-weight:750;text-decoration:none;border-radius:14px;transition:box-shadow .15s,border-color .15s}
.google-signin:not([disabled]):hover{border-color:#7350e8;box-shadow:0 8px 18px #7350e820}
.google-signin[disabled]{opacity:.55;cursor:not-allowed}
.google-signin svg{flex:none}

.acc-google-status.is-linked{display:inline-flex;align-items:center;gap:7px;color:#187447}.acc-google-g{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid #dadce0;border-radius:50%;font-weight:800;color:#4285f4;background:white;font-size:14px;flex-shrink:0}


/* Unified mobile dock — same geometry and behavior as Home/Tariffs */
@media (max-width:900px){
  .dock{
    display:grid!important;grid-template-columns:repeat(5,1fr)!important;
    position:fixed;z-index:700;left:0;right:0;bottom:0;
    height:66px!important;min-height:66px!important;
    padding:0 0 env(safe-area-inset-bottom)!important;
    background:rgba(255,255,255,.97)!important;
    border-top:1px solid #e7ddf4!important;
    box-shadow:0 -6px 20px rgba(46,24,80,.08)!important;
  }
  .dock a{
    display:flex!important;flex-direction:column;justify-content:center;align-items:center;
    gap:2px!important;padding:0!important;border-radius:0!important;
    color:#474567!important;font-size:18px!important;font-weight:400!important;
    text-decoration:none;text-align:center;min-width:0;
  }
  .dock a span{font-size:9px!important;font-weight:700!important;line-height:1.1}
  .dock a.active{color:#8910F5!important;background:transparent!important}
  body{padding-bottom:66px!important}
}
@media (max-width:420px){
  .dock a{font-size:17px!important}
  .dock a span{font-size:8.5px!important}
}

/* 2026-09-25: full mobile adaptation for all five public sections */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%;font:inherit}
.wrap,.hdr-row,.hero-card,.section,.ftr .wrap{min-width:0}

@media (max-width:900px){
  .wrap{width:min(100% - 24px,var(--wrap));margin-inline:auto}
  .hdr{padding-top:max(8px,env(safe-area-inset-top))}
  .hdr-row{min-height:62px;padding:0 10px 0 14px;gap:8px}
  .brand{min-width:0}.brand-name{font-size:clamp(18px,5.2vw,26px)}
  .lang{flex-shrink:0}.burger{flex-shrink:0}
  .page-hero,.account-hero,.support-hero,.pay-hero{padding-left:0;padding-right:0}
  h1{overflow-wrap:anywhere}
  .acc-shell,.account-public-layout,.pay-layout,.support-grid,.dash-layout{min-width:0}
  .acc-main,.account-main-card,.pay-card,.support-card,.dash-card{min-width:0}
  .btn,.acc-phone-primary,.acc-phone-resend,.input{width:100%;max-width:100%}
  .acc-phone-input-row{grid-template-columns:auto minmax(0,1fr)}
  .acc-phone-prefix{white-space:nowrap}
  .acc-phone-input-row input{min-width:0}
  .dock{padding-left:max(0px,env(safe-area-inset-left))!important;padding-right:max(0px,env(safe-area-inset-right))!important}
}

@media (max-width:680px){
  .wrap{width:min(100% - 20px,var(--wrap))}
  .hdr-row{min-height:58px;padding:0 8px 0 12px}
  .brand-mark{width:42px;height:42px;border-radius:14px}
  .brand-name{font-size:clamp(18px,6vw,23px)}
  .hdr-actions{gap:6px}
  .hdr-lang{padding:7px 9px}
  .hero-card,.account-main-card,.pay-card,.support-card,.dash-card,.acc-card{border-radius:22px}
  .account-main-card,.pay-card,.support-card,.dash-card,.acc-card{padding:22px}
  .acc-phone{padding-left:0;padding-right:0}
  .acc-phone-head{gap:12px}
  .acc-phone-head h3{font-size:clamp(20px,6vw,27px)}
  .acc-phone-hint{font-size:clamp(14px,4vw,18px);line-height:1.5}
  .acc-phone-input-row{min-height:56px;border-radius:18px;overflow:hidden}
  .acc-phone-prefix{padding:0 14px;font-size:clamp(14px,4.5vw,18px)}
  .acc-phone-input-row input{font-size:clamp(16px,5vw,21px);padding:0 14px}
  .acc-phone-primary{min-height:56px;border-radius:18px;font-size:clamp(15px,4.5vw,18px)}
  .acc-logout .btn{min-height:54px;border-radius:18px}
  .dock{height:68px!important;min-height:68px!important}
  .dock a{font-size:17px!important}
  .dock a span{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  body{padding-bottom:68px!important}
}

@media (max-width:430px){
  .wrap{width:min(100% - 16px,var(--wrap))}
  .hdr-row{min-height:56px;padding:0 6px 0 10px}
  .brand-mark{width:38px;height:38px;border-radius:12px}
  .brand-name{font-size:20px}
  .hdr-lang{padding:6px 8px;font-size:12px}
  .burger{width:42px;height:42px}
  .hero-card,.account-main-card,.pay-card,.support-card,.dash-card,.acc-card{padding:18px;border-radius:19px}
  .acc-phone-head h3{font-size:22px}
  .acc-phone-hint{font-size:15px}
  .acc-phone-prefix{padding:0 10px;font-size:15px}
  .acc-phone-input-row input{padding:0 10px;font-size:17px}
  .dock{height:66px!important;min-height:66px!important}
  .dock a{font-size:16px!important}
  .dock a span{font-size:8px!important}
  body{padding-bottom:66px!important}
}

@media (max-width:360px){
  .wrap{width:min(100% - 12px,var(--wrap))}
  .brand-name{font-size:18px}
  .brand-mark{width:35px;height:35px}
  .hdr-lang{padding:5px 6px;font-size:11px}
  .burger{width:38px;height:38px}
  .hero-card,.account-main-card,.pay-card,.support-card,.dash-card,.acc-card{padding:15px;border-radius:17px}
  .acc-phone-head{align-items:flex-start}
  .acc-phone-symbol{width:42px;height:42px;flex:0 0 42px}
  .acc-phone-head h3{font-size:20px}
  .acc-phone-hint{font-size:14px}
  .acc-phone-input-row{grid-template-columns:104px minmax(0,1fr)}
  .acc-phone-prefix{padding:0 8px;font-size:14px}
  .acc-phone-input-row input{font-size:16px;padding:0 8px}
  .acc-phone-primary{font-size:15px;min-height:54px}
  .dock{height:64px!important;min-height:64px!important}
  .dock a{font-size:15px!important}
  .dock a span{font-size:7.5px!important}
  body{padding-bottom:64px!important}
}

@media (min-width:431px) and (max-width:900px){
  .hero-card,.account-main-card,.pay-card,.support-card,.dash-card,.acc-card{max-width:760px;margin-inline:auto}
}

/* 2026-09-25: larger balanced bottom navigation */
@media (max-width:900px){
  .dock{
    height:76px!important;min-height:76px!important;
    padding:4px 0 calc(4px + env(safe-area-inset-bottom))!important;
  }
  .dock a{
    min-height:68px!important;
    gap:5px!important;
    font-size:22px!important;
    justify-content:center!important;
  }
  .dock a span{
    font-size:11.5px!important;
    font-weight:800!important;
    line-height:1.05!important;
  }
  body{padding-bottom:76px!important}
}
@media (max-width:430px){
  .dock{height:74px!important;min-height:74px!important}
  .dock a{min-height:66px!important;font-size:21px!important}
  .dock a span{font-size:11px!important}
  body{padding-bottom:74px!important}
}
@media (max-width:360px){
  .dock{height:72px!important;min-height:72px!important}
  .dock a{min-height:64px!important;font-size:20px!important}
  .dock a span{font-size:10px!important}
  body{padding-bottom:72px!important}
}


/* 2026-09-25: compact mobile account entry — login visible immediately */
@media (max-width:680px){
  .account-entry-head{
    padding:14px 0 10px;
    background:
      radial-gradient(circle at 88% 8%,rgba(139,72,235,.13),transparent 42%),
      linear-gradient(180deg,#f5efff 0%,#fbf9ff 100%);
    border-bottom:1px solid var(--line);
  }
  .account-entry-head .wrap{
    gap:12px;
  }
  .account-entry-head .page-head-copy{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"eyebrow eyebrow" "title hint";
    align-items:end;
    width:100%;
    gap:2px 10px;
  }
  .account-entry-head .eyebrow{
    grid-area:eyebrow;
    margin:0;
    font-size:11px;
    letter-spacing:.11em;
  }
  .account-entry-head h1{
    grid-area:title;
    margin:0;
    font-size:clamp(25px,7vw,31px);
    line-height:1.04;
    letter-spacing:-.035em;
  }
  .account-entry-head .page-head-copy>p{
    grid-area:hint;
    margin:0 0 2px;
    font-size:12px;
    line-height:1.2;
    max-width:135px;
    text-align:right;
    color:var(--muted);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .account-entry-head .chips{
    width:100%;
    display:grid;
    grid-template-columns:1.45fr .72fr .88fr;
    gap:7px;
  }
  .account-entry-head .chip{
    justify-content:center;
    min-width:0;
    padding:9px 8px;
    font-size:12px;
    line-height:1.05;
    box-shadow:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .account-entry-head .chip .icon{
    width:16px;
    height:16px;
    flex:0 0 auto;
  }

  .account-entry-login{
    padding:14px 0 24px;
  }
  .account-entry-login .acc-narrow{
    max-width:none;
  }
  .account-entry-login .acc-card{
    padding:20px 18px;
    border-radius:22px;
  }
  .account-entry-login .acc-ico{
    width:46px;
    height:46px;
    border-radius:15px;
    margin-bottom:12px;
  }
  .account-entry-login .acc-ico .icon{
    width:23px;
    height:23px;
  }
  .account-entry-login .eyebrow{
    margin-bottom:8px;
    font-size:11px;
  }
  .account-entry-login .acc-card h2{
    margin-bottom:7px;
    font-size:clamp(23px,6.7vw,29px);
    line-height:1.06;
  }
  .account-entry-login .acc-lead{
    font-size:14px;
    line-height:1.42;
  }
  .account-entry-login .google-signin{
    min-height:52px;
    margin-top:14px;
    font-size:15px;
    border-radius:16px;
  }
  .account-entry-login .acc-privacy{
    margin-top:13px;
    font-size:12px;
    line-height:1.42;
  }
}
@media (max-width:430px){
  .account-entry-head{
    padding:10px 0 8px;
  }
  .account-entry-head .page-head-copy>p{
    display:none;
  }
  .account-entry-head .page-head-copy{
    display:block;
  }
  .account-entry-head .eyebrow{
    display:block;
    margin-bottom:3px;
  }
  .account-entry-head h1{
    font-size:26px;
  }
  .account-entry-head .chips{
    gap:6px;
  }
  .account-entry-head .chip{
    padding:8px 6px;
    font-size:11px;
  }
  .account-entry-login{
    padding-top:10px;
  }
}


/* 2026-09-25: compact mobile dashboard — phone/SMS above the fold */
@media (max-width:680px){
  .account-dash-head{
    padding:10px 0 8px;
    background:
      radial-gradient(circle at 88% 5%,rgba(139,72,235,.12),transparent 44%),
      linear-gradient(180deg,#f4eeff 0%,#faf8ff 100%);
  }
  .account-dash-head .wrap{
    gap:8px;
  }
  .account-dash-head .page-head-copy{
    width:100%;
  }
  .account-dash-head .eyebrow{
    font-size:10.5px;
    margin-bottom:2px;
  }
  .account-dash-head h1{
    margin:0 0 4px;
    font-size:clamp(24px,7vw,30px);
    line-height:1.02;
  }
  .account-dash-head .page-head-copy>p{
    margin:0;
    font-size:12.5px;
    line-height:1.28;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .account-dash-head .chips{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .account-dash-head .chip{
    justify-content:center;
    padding:8px 10px;
    min-height:38px;
    font-size:12px;
    box-shadow:none;
  }

  .account-dash-main{
    padding:10px 0 22px;
  }
  .account-dash-main .acc-layout{
    gap:14px;
  }
  .account-dash-card{
    padding:16px!important;
    border-radius:20px!important;
  }
  .account-dash-card>.acc-ico{
    width:42px;
    height:42px;
    margin-bottom:9px;
    border-radius:14px;
  }
  .account-dash-card>.acc-ico .icon{
    width:21px;
    height:21px;
  }
  .account-dash-card>.eyebrow{
    margin-bottom:3px;
    font-size:10.5px;
  }
  .account-dash-card>h2{
    margin:0 0 2px;
    font-size:20px;
    line-height:1.08;
  }
  .account-dash-card>.acc-email{
    margin:0 0 8px;
    font-size:12.5px;
    line-height:1.2;
    opacity:.72;
  }
  .account-dash-card>.acc-meta{
    margin:0;
    padding:9px 10px;
    border-radius:14px;
    background:#faf8ff;
    gap:5px;
  }
  .account-dash-card>.acc-meta li{
    padding:0;
    border:0;
    font-size:11.5px;
    line-height:1.25;
  }
  .account-dash-card>.acc-meta li:nth-child(1){
    display:none;
  }
  .account-dash-card>.acc-meta li span{
    font-size:11px;
  }
  .account-dash-card>.acc-meta li b{
    font-size:11.5px;
  }
  .account-dash-card>.acc-meta .acc-google-g{
    width:18px;
    height:18px;
    font-size:11px;
  }

  .account-dash-card .acc-phone{
    margin-top:12px;
    padding-top:14px;
  }
  .account-dash-card .acc-phone-head{
    gap:9px;
  }
  .account-dash-card .acc-phone-symbol{
    width:38px;
    height:38px;
    flex-basis:38px;
    border-radius:12px;
    font-size:20px;
  }
  .account-dash-card .acc-phone-head h3{
    font-size:18px;
    line-height:1.15;
  }
  .account-dash-card .acc-phone-hint{
    margin:8px 0 10px;
    font-size:12.5px;
    line-height:1.35;
  }
  .account-dash-card .acc-phone-form{
    gap:8px;
  }
  .account-dash-card .acc-phone-form label{
    font-size:11.5px;
  }
  .account-dash-card .acc-phone-input-row{
    min-height:50px;
    border-radius:15px;
  }
  .account-dash-card .acc-phone-prefix{
    padding:0 10px;
    font-size:13px;
  }
  .account-dash-card .acc-phone-input-row input{
    height:50px;
    padding:0 10px;
    font-size:16px;
  }
  .account-dash-card .acc-phone-primary{
    min-height:50px;
    border-radius:15px;
    font-size:14.5px;
  }
  .account-dash-card .acc-logout{
    margin-top:10px;
  }
  .account-dash-card .acc-logout .btn{
    min-height:46px;
  }
  .account-dash-main .acc-aside{
    margin-top:0;
  }
}
@media (max-width:430px){
  .account-dash-head{
    padding:8px 0 6px;
  }
  .account-dash-head h1{
    font-size:25px;
  }
  .account-dash-head .page-head-copy>p{
    -webkit-line-clamp:1;
    font-size:11.5px;
  }
  .account-dash-head .chip{
    min-height:36px;
    padding:7px 8px;
    font-size:11.5px;
  }
  .account-dash-main{
    padding-top:8px;
  }
  .account-dash-card{
    padding:14px!important;
  }
  .account-dash-card>.acc-ico{
    width:38px;
    height:38px;
    margin-bottom:7px;
  }
  .account-dash-card>h2{
    font-size:19px;
  }
  .account-dash-card>.acc-email{
    font-size:11.5px;
    margin-bottom:6px;
  }
  .account-dash-card>.acc-meta{
    padding:8px 9px;
  }
  .account-dash-card .acc-phone{
    margin-top:10px;
    padding-top:12px;
  }
  .account-dash-card .acc-phone-head h3{
    font-size:17px;
  }
  .account-dash-card .acc-phone-hint{
    margin:7px 0 9px;
    font-size:12px;
  }
}

/* 2026-09-25: raise dashboard phone verification even higher */
@media (max-width:680px){
  .account-dash-head{padding:6px 0 4px!important}
  .account-dash-head .wrap{gap:5px!important}
  .account-dash-head .eyebrow{font-size:9.5px!important;margin-bottom:1px!important}
  .account-dash-head h1{margin:0 0 2px!important;font-size:23px!important;line-height:1!important}
  .account-dash-head .page-head-copy>p{font-size:11px!important;line-height:1.15!important;-webkit-line-clamp:1!important;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  .account-dash-head .chips{gap:5px!important}
  .account-dash-head .chip{min-height:34px!important;padding:6px 8px!important;font-size:11px!important}

  .account-dash-main{padding:6px 0 18px!important}
  .account-dash-card{padding:12px!important}
  .account-dash-card>.acc-ico{width:34px!important;height:34px!important;margin-bottom:5px!important;border-radius:11px!important}
  .account-dash-card>.acc-ico .icon{width:18px!important;height:18px!important}
  .account-dash-card>.eyebrow{font-size:9.5px!important;margin-bottom:1px!important}
  .account-dash-card>h2{font-size:17px!important;margin-bottom:1px!important}
  .account-dash-card>.acc-email{font-size:11px!important;margin-bottom:5px!important}
  .account-dash-card>.acc-meta{padding:7px 8px!important;gap:3px!important}
  .account-dash-card>.acc-meta li{font-size:10.5px!important}
  .account-dash-card>.acc-meta li:nth-child(2){display:none!important}
  .account-dash-card>.acc-meta li span{font-size:10px!important}
  .account-dash-card>.acc-meta li b{font-size:10.5px!important}

  .account-dash-card .acc-phone{margin-top:8px!important;padding-top:9px!important}
  .account-dash-card .acc-phone-head{gap:7px!important}
  .account-dash-card .acc-phone-symbol{width:34px!important;height:34px!important;flex-basis:34px!important;font-size:18px!important}
  .account-dash-card .acc-phone-head h3{font-size:16px!important;line-height:1.1!important}
  .account-dash-card .acc-phone-hint{margin:5px 0 7px!important;font-size:11.5px!important;line-height:1.25!important}
  .account-dash-card .acc-phone-form label{font-size:10.5px!important}
  .account-dash-card .acc-phone-input-row{min-height:46px!important}
  .account-dash-card .acc-phone-input-row input{height:46px!important;font-size:15px!important}
  .account-dash-card .acc-phone-primary{min-height:46px!important;font-size:14px!important}
  .account-dash-card .acc-logout{margin-top:7px!important}
  .account-dash-card .acc-logout .btn{min-height:42px!important}
}
@media (max-width:430px){
  .account-dash-head h1{font-size:22px!important}
  .account-dash-card{padding:11px!important}
  .account-dash-card .acc-phone-head h3{font-size:15.5px!important}
}