/* =====================================================================
   GSM Alo — "ADVANCED TECH" display layer  (gsmalo-tech.css)
   Loads LAST (after gsmalo-emerald.css + gsmalo-home.css) so it wins.
   100% display-only: no markup, no Dhru core, no DB, no feature change.
   Rollback = delete its <link> line from gsmalo2026/header.tpl.
   No webfonts, no libraries — system + monospace stacks only.
   All motion is transform/opacity (GPU) and is disabled for users who
   ask for reduced motion.
   ===================================================================== */

:root{
  --tk-void:#04120c;          /* deepest panel */
  --tk-deep:#072115;          /* deep emerald-black */
  --tk-neon:#2ee88a;          /* emerald neon */
  --tk-cyan:#22d3ee;          /* cyan accent */
  --tk-violet:#8b8cf8;        /* violet accent */
  --tk-gold:#ffc861;
  --tk-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;
  --tk-glass:rgba(255,255,255,.06);
  --tk-hair:rgba(255,255,255,.12);
  --tk-ease:cubic-bezier(.22,1,.36,1);
}

/* =====================================================================
   1. HERO — deep-tech command deck
   ===================================================================== */
.ga-home .ga-hero{
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(34,211,238,.20), transparent 62%),
    radial-gradient(900px 480px at 6% 108%, rgba(46,232,138,.18), transparent 60%),
    linear-gradient(155deg,#04120c 0%,#072115 46%,#062b1c 100%);
  color:#dff7ea;
  isolation:isolate;
}
/* blueprint grid + horizon fade */
.ga-home .ga-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(46,232,138,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,232,138,.075) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
/* slow aurora sweep */
.ga-home .ga-hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:-25%; right:-25%; top:-55%; height:150%;
  background:conic-gradient(from 180deg at 50% 50%,
      rgba(46,232,138,0) 0deg, rgba(46,232,138,.22) 60deg,
      rgba(34,211,238,.20) 140deg, rgba(139,140,248,.16) 210deg,
      rgba(46,232,138,0) 320deg);
  filter:blur(70px); opacity:.55;
  animation:tk-spin 34s linear infinite;
}
@keyframes tk-spin{ to{ transform:rotate(360deg); } }

/* the original soft-light overlay becomes a moving scan beam */
.ga-home .ga-hero-bg{
  background:
    radial-gradient(620px 320px at 85% 8%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(520px 280px at 8% 92%, rgba(255,200,97,.10), transparent 60%);
  z-index:1;
}
.ga-home .ga-hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.055) 50%, transparent 58%);
  background-size:260% 100%;
  animation:tk-beam 9s ease-in-out infinite;
}
@keyframes tk-beam{ 0%,100%{ background-position:170% 0; } 50%{ background-position:-70% 0; } }

.ga-home .ga-hero-in{ z-index:2; padding-top:74px; padding-bottom:74px; }

/* status-pill eyebrow with a live pulse dot */
.ga-home .ga-hero-eyebrow{
  background:rgba(46,232,138,.10);
  border:1px solid rgba(46,232,138,.34);
  color:#bff5d8; font-family:var(--tk-mono); font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  padding:7px 15px 7px 30px; position:relative;
  box-shadow:0 0 0 4px rgba(46,232,138,.05), 0 10px 30px -18px rgba(46,232,138,.8);
}
.ga-home .ga-hero-eyebrow::before{
  content:""; position:absolute; left:13px; top:50%; margin-top:-3.5px;
  width:7px; height:7px; border-radius:50%; background:var(--tk-neon);
  box-shadow:0 0 0 0 rgba(46,232,138,.65); animation:tk-pulse 2.1s ease-out infinite;
}
@keyframes tk-pulse{
  0%{ box-shadow:0 0 0 0 rgba(46,232,138,.55); }
  70%{ box-shadow:0 0 0 9px rgba(46,232,138,0); }
  100%{ box-shadow:0 0 0 0 rgba(46,232,138,0); }
}

/* headline: bigger + tighter (gradient fill only where supported) */
.ga-home .ga-hero h1{ font-size:clamp(28px,4.3vw,54px); line-height:1.04; letter-spacing:-.035em; color:#fff; text-wrap:balance; }
.ga-home .ga-hero h1 span{ color:#7ff0bb; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ga-home .ga-hero h1{
    background:linear-gradient(180deg,#ffffff 30%,#a9ecc7 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  }
  .ga-home .ga-hero h1 span{
    background:linear-gradient(92deg,var(--tk-neon) 0%,var(--tk-cyan) 55%,var(--tk-violet) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  }
}
.ga-home .ga-hero-copy p{ color:#b6d9c7; opacity:1; font-size:16.5px; }

/* primary CTA: neon slab + shine sweep */
.ga-home .ga-h-primary{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,var(--tk-neon),#12c97b 55%,var(--tk-cyan));
  color:#04180e; border:none;
  box-shadow:0 18px 40px -18px rgba(46,232,138,.85), inset 0 1px 0 rgba(255,255,255,.45);
  letter-spacing:.005em;
}
.ga-home .ga-h-primary::after{
  content:""; position:absolute; top:0; bottom:0; width:45%;
  left:-60%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:tk-shine 4.6s ease-in-out infinite;
}
@keyframes tk-shine{ 0%,72%{ left:-60%; } 100%{ left:130%; } }
.ga-home .ga-h-primary:hover{ filter:none; transform:translateY(-2px); box-shadow:0 24px 52px -18px rgba(46,232,138,.95); }
.ga-home .ga-h-ghost{
  background:rgba(255,255,255,.05); border:1px solid rgba(46,232,138,.4);
  color:#ddfbec; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.ga-home .ga-h-ghost:hover{ background:rgba(46,232,138,.14); border-color:var(--tk-neon); transform:translateY(-2px); }

/* trust readouts → HUD numerals */
.ga-home .ga-hero-trust{ gap:0; margin-top:34px; border-top:1px solid rgba(46,232,138,.16); padding-top:20px; }
.ga-home .ga-hero-trust div{
  flex:1; min-width:96px; padding-left:18px; position:relative; color:#9fd0b8; font-size:11.5px;
  font-family:var(--tk-mono); letter-spacing:.04em; text-transform:uppercase;
}
.ga-home .ga-hero-trust div + div::before{
  content:""; position:absolute; left:0; top:2px; bottom:2px; width:1px;
  background:linear-gradient(180deg,transparent,rgba(46,232,138,.35),transparent);
}
.ga-home .ga-hero-trust div:first-child{ padding-left:0; }
.ga-home .ga-hero-trust b{
  font-family:var(--tk-mono); font-size:25px; font-weight:700; letter-spacing:-.02em;
  color:#fff; font-variant-numeric:tabular-nums; margin-bottom:2px;
  text-shadow:0 0 22px rgba(46,232,138,.45);
}

/* glass console card with corner brackets */
.ga-home .ga-hero-card{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border:1px solid rgba(46,232,138,.26);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.14);
  border-radius:22px;
}
.ga-home .ga-hero-card::before,
.ga-home .ga-hero-card::after{
  content:""; position:absolute; width:20px; height:20px; pointer-events:none;
  border:2px solid var(--tk-neon); opacity:.75;
}
.ga-home .ga-hero-card::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; border-radius:22px 0 0 0; }
.ga-home .ga-hero-card::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; border-radius:0 0 22px 0; }
.ga-home .ga-hc-badge{
  background:rgba(255,200,97,.16); color:var(--tk-gold);
  border:1px solid rgba(255,200,97,.4); font-family:var(--tk-mono);
  text-transform:uppercase; letter-spacing:.07em; font-size:10.5px;
}
.ga-home .ga-hero-card > p{ color:#a9cfbc; }
.ga-home .ga-hc-pill{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  color:#e6fbf1; position:relative; padding-right:38px;
  transition:transform .2s var(--tk-ease), background .2s, border-color .2s;
}
.ga-home .ga-hc-pill::after{
  content:"\2192"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:var(--tk-neon); font-weight:800; transition:transform .2s var(--tk-ease);
}
.ga-home .ga-hc-pill:hover{
  background:rgba(46,232,138,.14); border-color:var(--tk-neon); color:#fff; transform:translateX(4px);
}
.ga-home .ga-hc-pill:hover::after{ transform:translateY(-50%) translateX(4px); }

/* =====================================================================
   2. SECTION CHROME — blueprint canvas + mono eyebrows
   ===================================================================== */
.ga-home .ga-sec{ position:relative; }
.ga-home .ga-sec:not(.ga-cta-sec)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(15,90,46,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,90,46,.055) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%, #000, transparent 85%);
          mask-image:radial-gradient(80% 70% at 50% 50%, #000, transparent 85%);
}
.ga-home .ga-sec > .ga-wrap{ position:relative; z-index:1; }

.ga-home .ga-eyebrow{
  font-family:var(--tk-mono); font-size:11px; letter-spacing:.14em; font-weight:600;
  border:1px solid currentColor; background:transparent !important;
  padding:6px 14px; position:relative;
}
.ga-home .ga-eyebrow::before{ content:"// "; opacity:.55; }
.ga-home .ga-sec-h h2{ font-size:clamp(21px,2.7vw,34px); letter-spacing:-.032em; font-weight:900; color:#0d2c1b; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ga-home .ga-sec-h h2{
    background:linear-gradient(180deg,#0d2c1b,#1b5c39);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  }
}
.ga-home .ga-sec-h p{ font-size:15px; color:#5d7568; }

/* hairline separators with a glowing centre */
.ga-home .ga-sec.ga-alt{ border-top:none; border-bottom:none; background:#fbfefc; }
.ga-home .ga-sec.ga-alt::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(26,138,59,.45) 20%,rgba(34,211,238,.5) 50%,rgba(26,138,59,.45) 80%,transparent);
}

/* =====================================================================
   3. SUPPORT CHECKER — terminal console
   ===================================================================== */
.ga-home .ga-checker-sec{ background:linear-gradient(180deg,#eefaf3,transparent 72%); }
.ga-home .ga-checkbox{
  position:relative;
  border:1px solid rgba(15,90,46,.16); border-radius:20px; overflow:hidden;
  box-shadow:0 40px 80px -50px rgba(6,50,28,.55), 0 2px 0 rgba(255,255,255,.9) inset;
  background:#fff;
}
/* terminal title bar */
.ga-home .ga-checkbox::before{
  content:"gsmalo://device-support-check";
  display:block; font-family:var(--tk-mono); font-size:11px; letter-spacing:.05em;
  color:#8fd8b4; background:linear-gradient(90deg,#062b1c,#0a3a26 60%,#072115);
  padding:11px 16px 11px 62px; position:relative;
}
.ga-home .ga-checkbox::after{
  content:""; position:absolute; left:18px; top:15px; width:9px; height:9px; border-radius:50%;
  background:#ff6058; box-shadow:15px 0 0 #ffbd2e, 30px 0 0 var(--tk-neon);
}
.ga-home .ga-checktabs{ background:#f4faf6; border-bottom:1px solid #e2ede7; }
.ga-home .ga-checktabs button{
  background:transparent; font-family:var(--tk-mono); font-size:12.5px;
  letter-spacing:.02em; text-transform:none; position:relative;
}
.ga-home .ga-checktabs button.on{
  color:#0d6b34; background:#fff;
  box-shadow:inset 0 -3px 0 0 var(--tk-neon);
  border-bottom-color:transparent;
}
.ga-home .ga-checkrow .ga-inp{
  font-family:var(--tk-mono); font-size:14.5px; background:#f7fbf9;
  border:1.5px solid #dcebe3; letter-spacing:.01em;
}
.ga-home .ga-checkrow .ga-inp:focus{
  border-color:var(--tk-neon); background:#fff;
  box-shadow:0 0 0 4px rgba(46,232,138,.15);
}
.ga-home .ga-cbtn{
  background:linear-gradient(120deg,#0d6b34,#12b06a 55%,#0ea5b7);
  font-family:var(--tk-mono); letter-spacing:.04em; text-transform:uppercase; font-size:13px;
  box-shadow:0 14px 30px -16px rgba(18,176,106,.9);
  position:relative; overflow:hidden;
}
.ga-home .ga-cbtn:hover{ filter:brightness(1.08); }
/* scanning state (added by JS while a check runs) */
.ga-home .ga-cbtn.tk-scan::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,transparent,#eafff5,transparent);
  animation:tk-scanline .75s linear infinite;
}
@keyframes tk-scanline{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }
.ga-home .ga-chip{ font-family:var(--tk-mono); font-size:11.5px; letter-spacing:.02em; }
.ga-home .ga-rcard{ box-shadow:0 18px 40px -28px rgba(6,50,28,.5); }
.ga-home .ga-rico{ font-family:var(--tk-mono); box-shadow:0 10px 22px -12px currentColor; }
.ga-home .ga-meta span{ font-family:var(--tk-mono); font-size:12px; }
.ga-home .ga-checknote{ font-family:var(--tk-mono); font-size:11px; letter-spacing:.02em; }

/* =====================================================================
   4. STATS BAND — dark HUD strip
   ===================================================================== */
.ga-home .ga-band{
  background:linear-gradient(120deg,#04120c,#07281a 45%,#063040) !important;
  position:relative; overflow:hidden; padding:42px 0; color:#d9f6e8;
}
.ga-home .ga-band::before{
  content:""; position:absolute; inset:0; opacity:.6;
  background-image:
    linear-gradient(rgba(46,232,138,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,232,138,.10) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
}
.ga-home .ga-bandgrid{ position:relative; z-index:1; }
.ga-home .ga-b{ position:relative; padding:0 10px; }
.ga-home .ga-b + .ga-b::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg,transparent,rgba(46,232,138,.4),transparent);
}
.ga-home .ga-b b{
  font-family:var(--tk-mono); font-size:34px; font-weight:700; font-variant-numeric:tabular-nums;
  color:#eafff5; letter-spacing:-.02em; text-shadow:0 0 26px rgba(46,232,138,.45);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ga-home .ga-b b{
    background:linear-gradient(180deg,#ffffff,#7ff0bb);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; text-shadow:none;
  }
}
.ga-home .ga-b span{
  font-family:var(--tk-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#8fc4ac; opacity:1;
}

/* =====================================================================
   5. CARD SURFACES — glass, gradient edge, hover glow
   ===================================================================== */
.ga-home .ga-brand,
.ga-home .ga-quote,
.ga-home .ga-pay,
.ga-home .ga-faq details{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(15,90,46,.12);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 12px 30px -26px rgba(6,50,28,.6);
  transition:transform .22s var(--tk-ease), box-shadow .22s var(--tk-ease), border-color .22s;
}
.ga-home .ga-brand{ position:relative; overflow:hidden; }
.ga-home .ga-brand::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; transform:scaleX(0);
  background:linear-gradient(90deg,var(--tk-neon),var(--tk-cyan));
  transition:transform .28s var(--tk-ease);
}
.ga-home .ga-brand:hover::before{ transform:scaleX(1); }
.ga-home .ga-brand:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 46px -28px rgba(6,80,44,.7);
}
.ga-home .ga-bi{ filter:drop-shadow(0 6px 12px rgba(6,80,44,.28)); }
.ga-home .ga-brand span{ font-family:var(--tk-mono); font-size:10.5px; letter-spacing:.03em; }

/* steps → numbered nodes joined by a circuit line */
.ga-home .ga-steps{ position:relative; }
.ga-home .ga-step{ position:relative; padding-top:6px; }
.ga-home .ga-step .ga-n{
  font-family:var(--tk-mono); border-radius:12px; position:relative; z-index:1;
  box-shadow:0 12px 26px -14px rgba(6,80,44,.85), 0 0 0 5px rgba(46,232,138,.10);
}
.ga-home .ga-step:not(:last-child)::before{
  content:""; position:absolute; left:44px; top:24px; right:-16px; height:2px;
  background:repeating-linear-gradient(90deg, rgba(26,138,59,.42) 0 7px, transparent 7px 14px);
}
.ga-home .ga-step p{ font-size:13px; }

.ga-home .ga-quote:hover{ transform:translateY(-4px); box-shadow:0 26px 46px -30px rgba(6,80,44,.7); }
.ga-home .ga-pay{ font-family:var(--tk-mono); font-size:13px; letter-spacing:.02em; }
.ga-home .ga-pay:hover{ transform:translateY(-3px); }

/* packages → tech panels */
.ga-home #ga-packages{ background:linear-gradient(180deg,#eefaf3,#f6fdf9); }
.ga-home #ga-packages > .ga-wrap{
  border:1px solid rgba(15,90,46,.16);
  box-shadow:0 50px 100px -70px rgba(6,50,28,.8);
  position:relative; overflow:hidden;
}
.ga-home #ga-packages > .ga-wrap::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--tk-neon),var(--tk-cyan) 45%,var(--tk-violet) 75%,var(--tk-gold));
}
.ga-home .ga-pkglabel{ font-family:var(--tk-mono); letter-spacing:.12em; }
.ga-home .ga-pkg-note{ font-family:var(--tk-mono); font-size:11.5px; letter-spacing:.01em; }
.ga-home .ga-pkg{
  transition:transform .22s var(--tk-ease), box-shadow .22s var(--tk-ease), border-color .22s;
}
.ga-home .ga-pkg:hover{ transform:translateY(-6px); box-shadow:0 34px 60px -34px rgba(6,80,44,.6); }
.ga-home .ga-pkg-tag{ font-family:var(--tk-mono); letter-spacing:.12em; }
.ga-home .ga-pkg-price{ font-family:var(--tk-mono); font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.ga-home .ga-pkg-bdt{ font-family:var(--tk-mono); font-size:12.5px; }
.ga-home .ga-pkg-save{ font-family:var(--tk-mono); font-size:11px; letter-spacing:.06em; }
.ga-home .ga-pkg-rib{ font-family:var(--tk-mono); letter-spacing:.1em; box-shadow:0 10px 22px -10px rgba(6,80,44,.9); }
.ga-home .ga-pkg-buy{ box-shadow:0 12px 26px -14px rgba(6,80,44,.9); }
.ga-home .ga-pkg li{ font-size:12.8px; }
.ga-home .ga-pkg li:before{ content:"\25B8"; color:var(--tk-cyan); }
.ga-home .ga-pkg-foot{ font-family:var(--tk-mono); font-size:11.5px; }

/* FAQ → visible expand affordance (was missing entirely) */
.ga-home .ga-faq summary{ position:relative; padding-right:34px; }
.ga-home .ga-faq summary::after{
  content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  font-family:var(--tk-mono); font-size:19px; font-weight:600; line-height:1;
  color:#1a8a3b; transition:transform .22s var(--tk-ease);
}
.ga-home .ga-faq details[open] summary::after{ content:"\2212"; transform:translateY(-50%) rotate(180deg); }
.ga-home .ga-faq details[open]{ border-color:rgba(46,232,138,.45); box-shadow:0 18px 38px -30px rgba(6,80,44,.8); }

/* =====================================================================
   6. CLOSING CTA — dark beam panel
   ===================================================================== */
.ga-home .ga-cta-sec{ padding:56px 0 60px; }
.ga-home .ga-cta{
  background:linear-gradient(135deg,#04120c 0%,#07281a 42%,#053544 100%) !important;
  border:1px solid rgba(46,232,138,.28);
  position:relative; overflow:hidden; padding:52px 30px 46px;
  box-shadow:0 50px 110px -60px rgba(4,40,22,.95);
}
.ga-home .ga-cta::before{
  content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:
    linear-gradient(rgba(46,232,138,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,232,138,.10) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(90% 80% at 50% 0%, #000, transparent 80%);
          mask-image:radial-gradient(90% 80% at 50% 0%, #000, transparent 80%);
}
.ga-home .ga-cta::after{
  content:""; position:absolute; left:-30%; right:-30%; top:-120%; height:260%;
  background:conic-gradient(from 90deg at 50% 50%,
     rgba(46,232,138,0), rgba(46,232,138,.22) 70deg, rgba(34,211,238,.20) 150deg, rgba(46,232,138,0) 260deg);
  filter:blur(60px); opacity:.5; animation:tk-spin 40s linear infinite; pointer-events:none;
}
.ga-home .ga-cta > *{ position:relative; z-index:1; }
.ga-home .ga-cta-tag{
  display:inline-block; font-family:var(--tk-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#9ff0c8; border:1px solid rgba(46,232,138,.4);
  border-radius:999px; padding:6px 14px; margin-bottom:14px;
}
.ga-home .ga-cta h2{ font-size:clamp(22px,3.1vw,38px); letter-spacing:-.035em; color:#fff; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ga-home .ga-cta h2{
    background:linear-gradient(180deg,#ffffff,#a5eec9);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  }
}
.ga-home .ga-cta p{ color:#a9d6c2; font-size:15.5px; }
.ga-home .ga-btn-white{
  background:linear-gradient(120deg,var(--tk-neon),#12c97b 55%,var(--tk-cyan));
  color:#04180e; box-shadow:0 18px 40px -18px rgba(46,232,138,.9);
}
.ga-home .ga-btn-white:hover{ filter:none; transform:translateY(-2px); box-shadow:0 24px 52px -18px rgba(46,232,138,1); }
.ga-home .ga-btn-ghost{ border-color:rgba(46,232,138,.45); color:#ddfbec; }
.ga-home .ga-btn-ghost:hover{ background:rgba(46,232,138,.14); border-color:var(--tk-neon); transform:translateY(-2px); }
.ga-home .ga-cta-foot{
  display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:24px;
  padding-top:20px; border-top:1px solid rgba(46,232,138,.16);
  font-family:var(--tk-mono); font-size:11.5px; letter-spacing:.05em; color:#8fc4ac;
}

/* =====================================================================
   7. LEGACY Dhru HOME BLOCKS — bring the old CMS content + product
      strip up to the same standard (display-only)
   ===================================================================== */
.tk-home .body-container > .bg-gray{ background:transparent !important; }
.tk-home .body-container > .bg-gray .page-container{
  background:#fff; border:1px solid rgba(15,90,46,.12); border-radius:20px;
  padding:26px 24px; margin:34px auto; position:relative; overflow:hidden;
  box-shadow:0 30px 70px -55px rgba(6,50,28,.75);
}
.tk-home .body-container > .bg-gray .page-container::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--tk-neon),var(--tk-cyan) 50%,var(--tk-violet));
}
.index-products{ position:relative; padding-top:8px; }
.index-products .card-product{ border-radius:16px !important; }

/* =====================================================================
   8. SITE-WIDE tech polish (all inner pages, restrained + readable)
   ===================================================================== */
/* animated hairline under the top utility bar */
.header-top::after{
  background:linear-gradient(90deg,#e79a17,#2ee88a,#22d3ee,#e79a17) !important;
  background-size:300% 100% !important;
  animation:tk-hair 12s linear infinite;
}
@keyframes tk-hair{ to{ background-position:300% 0; } }

/* ---------------------------------------------------------------
   DATA TABLES — console-style header band.
   ⚠️ Dhru renders the service-GROUP NAME as an <h5> inside the first
   <th>. That <h5> inherits Dhru's near-black heading colour, so on a
   dark band it came out black-on-dark-green = unreadable (owner
   screenshot). The heading is therefore re-coloured explicitly and
   kept in the normal UI font/case — only the small COLUMN LABELS get
   the uppercase monospace "console" treatment.
   --------------------------------------------------------------- */
/* the gradient lives on the ROW, not on each cell — otherwise every
   <th> restarts it and the band shows visible seams between columns */
.table thead tr{
  background-image:linear-gradient(100deg,#0a4f2c 0%,#0c6a3a 46%,#0b7069 100%) !important;
  box-shadow:inset 0 -2px 0 0 rgba(255,200,97,.6);
}
.table thead th{
  background:transparent !important; background-color:transparent !important;
  color:#cdf3e0 !important; font-family:var(--tk-mono) !important;
  font-size:11.5px !important; letter-spacing:.08em !important; text-transform:uppercase;
  border-bottom:none !important; vertical-align:middle !important;
  padding:13px 12px !important; text-shadow:0 1px 2px rgba(0,0,0,.35);
}
/* neon left edge on the band */
.table thead th:first-child{ box-shadow:inset 5px 0 0 0 var(--tk-neon) !important; }
/* ✅ the readable group title */
.table thead th h1,.table thead th h2,.table thead th h3,
.table thead th h4,.table thead th h5,.table thead th h6{
  color:#ffffff !important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
  font-weight:800 !important; font-size:16.5px !important; line-height:1.35 !important;
  letter-spacing:-.005em !important; text-transform:none !important; margin:0 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.table thead th a{ color:#ffffff !important; }
.table tbody tr:hover > td{ background:#eafaf1 !important; }
/* never let a wide price table push the page sideways on small screens */
.table-responsive,.table-responsive-sm,.table-responsive-md,.table-responsive-lg{ -webkit-overflow-scrolling:touch; }
.card > .table, .card-body > .table{ margin-bottom:0 !important; }

/* prices / IMEI / order ids in monospace = instantly more technical */
.badge-success,.badge-warning,.badge-danger,.badge-info,.badge-primary{
  font-family:var(--tk-mono) !important; letter-spacing:.01em;
}

/* service cards get a neon edge on hover (extends the emerald layer) */
.card-product:hover{
  box-shadow:0 24px 48px -20px rgba(16,90,45,.42), 0 0 0 1px rgba(46,232,138,.5) !important;
}
.card-product::after{ background:linear-gradient(180deg,var(--tk-neon),var(--tk-cyan)) !important; }

/* focus ring — accessible + on-brand */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
.btn:focus-visible,summary:focus-visible{
  outline:2px solid var(--tk-neon) !important; outline-offset:2px !important; border-radius:8px;
}

/* page scrollbar */
html{ scrollbar-color:#1a8a3b #e8f2ec; scrollbar-width:thin; }
body::-webkit-scrollbar{ width:11px; }
body::-webkit-scrollbar-track{ background:#e8f2ec; }
body::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#1a8a3b,#0d9488); border-radius:9px; border:2px solid #e8f2ec; }

/* =====================================================================
   9. SCROLL REVEAL (JS adds .tk-r, then .tk-in when in view)
   ===================================================================== */
.tk-r{ opacity:0; transform:translateY(22px); }
.tk-r.tk-in{ opacity:1; transform:none; transition:opacity .6s var(--tk-ease), transform .6s var(--tk-ease); }
.tk-r:nth-child(2){ transition-delay:.05s; }
.tk-r:nth-child(3){ transition-delay:.1s; }
.tk-r:nth-child(4){ transition-delay:.15s; }
.tk-r:nth-child(5){ transition-delay:.2s; }
.tk-r:nth-child(6){ transition-delay:.25s; }

/* =====================================================================
   10. RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  .ga-home .ga-hero h1{ font-size:40px; }
  .ga-home .ga-sec-h h2{ font-size:27px; }
  .ga-home .ga-step:not(:last-child)::before{ display:none; }
  .ga-home .ga-cta h2{ font-size:29px; }
}
@media (max-width:600px){
  .ga-home .ga-hero h1{ font-size:31px; }
  .ga-home .ga-hero-in{ padding-top:50px; padding-bottom:50px; }
  .ga-home .ga-hero-trust{ gap:14px 0; }
  .ga-home .ga-hero-trust div{ flex:0 0 50%; padding-left:0; }
  .ga-home .ga-hero-trust div + div::before{ display:none; }
  .ga-home .ga-hero-trust b{ font-size:21px; }
  .ga-home .ga-b + .ga-b::before{ display:none; }
  .ga-home .ga-b b{ font-size:27px; }
  .ga-home .ga-sec-h h2{ font-size:23px; }
  .ga-home .ga-cta{ padding:36px 20px 32px; }
  .ga-home .ga-cta h2{ font-size:24px; }
  .ga-home .ga-cta-foot{ gap:12px; font-size:10.5px; }
  .ga-home .ga-checkbox::before{ font-size:10px; padding-left:58px; }
  .tk-home .body-container > .bg-gray .page-container{ padding:20px 16px; margin:24px 12px; }
}

/* =====================================================================
   11. MOTION SAFETY — everything above degrades to a static design
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .ga-home .ga-hero::after,
  .ga-home .ga-hero-bg::after,
  .ga-home .ga-h-primary::after,
  .ga-home .ga-hero-eyebrow::before,
  .ga-home .ga-cta::after,
  .ga-home .ga-cbtn.tk-scan::after,
  .header-top::after{ animation:none !important; }
  .tk-r{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}


/* =====================================================================
   12. OWNER-AUTHORED CMS BLOCKS — the homepage "helpline" panel and the
       announcement modal are admin-editable HTML full of hard-coded
       blue/yellow inline styles. Re-skin them to the emerald/tech
       system WITHOUT touching the content (admin can still edit it).
       Scoped to their own ids, so nothing else is affected.
   ===================================================================== */
#helpline-status-container{
  background:transparent !important; color:#20342a !important;
  font-family:inherit !important; padding:6px 0 !important;
}
#helpline-status-container h1,
#helpline-status-container h2,
#helpline-status-container h3{
  color:#0d2c1b !important; letter-spacing:-.02em; font-weight:800 !important;
}
#helpline-status-container h1{ font-size:26px !important; }
#helpline-status-container p{ color:#4a5f53 !important; }
/* every inline-styled panel inside it → the same soft tech panel */
#helpline-status-container > div[style]{
  background:linear-gradient(180deg,#f6fdf9,#eefaf3) !important;
  border:1px solid rgba(15,90,46,.14) !important;
  border-radius:16px !important;
  box-shadow:0 14px 34px -28px rgba(6,50,28,.7) !important;
  padding:18px 20px !important;
}
/* the flex row that holds the two clocks must stay a row, not a panel */
#helpline-status-container > div[style*="display: flex"]{
  background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important;
}
#helpline-status-container > div[style*="display: flex"] > div[style]{
  background:#fff !important; border:1px solid rgba(15,90,46,.16) !important;
  border-radius:16px !important; box-shadow:0 16px 34px -26px rgba(6,50,28,.6) !important;
}
/* clocks read like instrument displays */
#gsmalo-serverClock,#gsmalo-visitorClock{
  font-family:var(--tk-mono) !important; color:#0d6b34 !important;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
#gsmalo-serverDate,#gsmalo-visitorDate{ font-family:var(--tk-mono) !important; font-size:12.5px !important; color:#6a8377 !important; }
/* the CMS blue (#007bff) everywhere in this block → brand emerald */
#helpline-status-container a{ color:#0d6b34 !important; }
#helpline-status-container a:hover{ color:#12b06a !important; }

/* ---- announcement / advertisement modal ---- */
#advertisement .modal-content{
  border:1px solid rgba(46,232,138,.35) !important; border-radius:20px !important;
  box-shadow:0 60px 120px -60px rgba(4,30,18,.95) !important;
}
#advertisement .modal-body{ background:linear-gradient(160deg,#f7fdfa,#eef8f2) !important; }
#advertisement [data-dismiss="modal"]{
  background:#0d2c1b; color:#dff7ea; border-radius:999px; padding:5px 14px;
  font-family:var(--tk-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
#advertisement [data-dismiss="modal"]:hover{ background:#12b06a; color:#04180e; }
#advertisement div[style*="background-color: #f2f2f2"]{
  background:transparent !important; border-bottom:1px solid rgba(15,90,46,.12) !important;
}
#advertisement button[onclick*="switchLanguage"]{
  border:1px solid rgba(15,90,46,.3) !important; background:#fff !important;
  color:#0d2c1b !important; border-radius:999px !important; font-weight:700 !important;
  padding:9px 22px !important; box-shadow:0 8px 18px -12px rgba(6,50,28,.6) !important;
}
#advertisement button[onclick*="switchLanguage"]:hover{
  background:linear-gradient(120deg,#12b06a,#0ea5b7) !important; color:#fff !important; border-color:transparent !important;
}
#advertisement div[style*="background-color: #f9f9f9"]{
  background:#fff !important; border:1px solid rgba(15,90,46,.14) !important;
  border-radius:18px !important; box-shadow:0 20px 44px -34px rgba(6,50,28,.6) !important;
}
#advertisement h1,#advertisement h2,#advertisement h3{ color:#0d2c1b !important; letter-spacing:-.02em; }
#advertisement a[href*="wa.me"],#advertisement a[href*="whatsapp"]{ border-radius:12px !important; }

/* =====================================================================
   13. RESPONSIVE — one continuous scale instead of a few fixed steps.
       Headings already use clamp(); this block tunes rhythm, grids,
       touch targets and the wide price tables for every device class.
   ===================================================================== */

/* fluid gutters: 14px on a small phone → 20px on a laptop */
.ga-home .ga-wrap{ padding-left:clamp(14px,3.2vw,20px); padding-right:clamp(14px,3.2vw,20px); }
.ga-home .ga-sec{ padding-top:clamp(30px,4.4vw,52px); padding-bottom:clamp(30px,4.4vw,52px); }
.ga-home .ga-hero-in{ padding-top:clamp(42px,6vw,78px); padding-bottom:clamp(42px,6vw,78px); }

/* ---- very large screens: use the extra room instead of a narrow column ---- */
@media (min-width:1560px){
  .ga-home .ga-wrap{ max-width:1280px; }
}

/* ---- GRID LADDER — single source of truth.
        These selectors are more specific than the ones in home.css, so
        every breakpoint must restate every grid or a wider rule leaks
        down into a narrower screen. ---- */
.ga-home .ga-brands{ grid-template-columns:repeat(6,1fr); }
.ga-home .ga-steps { grid-template-columns:repeat(4,1fr); }
.ga-home .ga-quotes{ grid-template-columns:repeat(3,1fr); }
.ga-home .ga-pkgs  { grid-template-columns:repeat(3,1fr); }

/* ---- tablet landscape ---- */
@media (max-width:1024px){
  .ga-home .ga-hero-in{ gap:28px; }
  .ga-home .ga-brands{ grid-template-columns:repeat(4,1fr); }
  .ga-home .ga-pkgs{ gap:14px; }
  .ga-home .ga-pkg-price{ font-size:27px; }
  .ga-home .ga-pkg-buy{ padding:10px 14px; font-size:12.5px; }
}

/* ---- tablet portrait ---- */
@media (max-width:900px){
  .ga-home .ga-hero-card{ order:2; }
  .ga-home .ga-hero-trust{ margin-top:24px; padding-top:16px; }
  .ga-home .ga-brands{ grid-template-columns:repeat(4,1fr); }
  .ga-home .ga-steps { grid-template-columns:repeat(2,1fr); }
  .ga-home .ga-quotes{ grid-template-columns:repeat(2,1fr); }
  .ga-home .ga-pkgs  { grid-template-columns:repeat(2,1fr); }
  .ga-home #ga-packages > .ga-wrap{ padding:28px 20px 24px; }
  .ga-home .ga-checkbox::before{ padding-left:58px; }
}

/* ---- phones: everything goes single column ---- */
@media (max-width:600px){
  .ga-home .ga-brands{ grid-template-columns:repeat(3,1fr); }
  .ga-home .ga-steps,.ga-home .ga-quotes,.ga-home .ga-pkgs{ grid-template-columns:1fr; }
  .ga-home .ga-hero-eyebrow{ font-size:10.5px; padding:6px 12px 6px 26px; }
  .ga-home .ga-hero-eyebrow::before{ left:11px; }
  .ga-home .ga-hero-cta{ gap:10px; }
  .ga-home .ga-h-primary,.ga-home .ga-h-ghost{ flex:1 1 100%; text-align:center; padding:15px 20px; }
  .ga-home .ga-btn-white,.ga-home .ga-btn-ghost{ flex:1 1 100%; text-align:center; }
  .ga-home .ga-hero-card{ padding:20px; }
  .ga-home .ga-checkrow .ga-inp{ min-width:100%; }
  .ga-home .ga-cbtn{ width:100%; padding:14px 20px; }
  .ga-home .ga-b{ padding:0 4px; }
  .ga-home .ga-step:not(:last-child)::before{ display:none; }
  .ga-home .ga-pkg-note,.ga-home .ga-pkg-foot,.ga-home .ga-checknote{ font-size:11px; }
}

/* ---- small phones ---- */
@media (max-width:380px){
  .ga-home .ga-brands{ grid-template-columns:repeat(2,1fr); }
  .ga-home .ga-hero-trust div{ flex:0 0 100%; }
  .ga-home .ga-pkg-head{ flex-direction:column; align-items:flex-start; }
  .ga-home .ga-pkg-buy{ width:100%; text-align:center; }
  .ga-home .ga-cta-foot{ flex-direction:column; gap:8px; }
}

/* ---- comfortable touch targets on any touch device ---- */
@media (hover:none){
  .ga-home a.ga-hc-pill,.ga-home .ga-tbtn,.ga-home .ga-pkg-buy,
  .ga-home .ga-h-primary,.ga-home .ga-h-ghost,
  .ga-home .ga-btn-white,.ga-home .ga-btn-ghost,
  .ga-home .ga-checktabs button,.ga-home .ga-faq summary{ min-height:44px; }
  .ga-home .ga-chip{ min-height:32px; }
  /* no hover-lift on touch — it sticks after a tap */
  .ga-home .ga-brand:hover,.ga-home .ga-quote:hover,
  .ga-home .ga-pay:hover,.ga-home .ga-pkg:hover{ transform:none; }
}

/* ---- SITE-WIDE (Dhru pages): Dhru already drops columns on small
        screens, so nothing is forced to a min-width. What was missing
        is an escape hatch: our own `.card{overflow:hidden}` would CLIP
        a table that does get too wide (e.g. a very long group name),
        making those columns unreachable. Let such a card scroll. ---- */
@media (max-width:991px){
  .card.group,.card-body,.table-responsive{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .table thead th{ font-size:10.5px !important; padding:11px 8px !important; letter-spacing:.05em !important; }
  .table thead th h1,.table thead th h2,.table thead th h3,
  .table thead th h4,.table thead th h5,.table thead th h6{ font-size:14.5px !important; }
  .table td,.table th{ font-size:12.5px; }
  .page-title{ font-size:22px !important; }
}
@media (max-width:600px){
  .table thead th h1,.table thead th h2,.table thead th h3,
  .table thead th h4,.table thead th h5,.table thead th h6{ font-size:13.5px !important; }
  .tk-home .body-container > .bg-gray .page-container{ padding:18px 14px; margin:22px 10px; }
}
/* ⚠️ REMOVED — do not put an overflow guard on <body>.
   `body{overflow-x:clip}` was added here as a "last resort" against a
   sideways scrollbar. It silently broke the page: with the body clipping
   on one axis the document stopped propagating its overflow to the
   viewport, so `window.scrollTo()` and every in-page anchor jump did
   nothing (proved on the Terms page — scrollHeight 4358 in a 660px
   viewport with NO scrollable container at all).
   It was never needed: the full-site audit measured 0 px overflow on
   32 pages x 8 widths with the guard switched off. Fix real overflow at
   its source instead of masking it here. */

/* =====================================================================
   14. CLIENT AREA (logged-in) — same tech language as the public site,
       plus fixes for four real defects found by auditing while signed in.
       Everything here is display-only: no markup, no form values, no
       money-path behaviour is touched.
   ===================================================================== */

/* ---------------------------------------------------------------
   FIX 1 — place-order service initials were INVISIBLE.
   Markup is  .col-group-icon > div.bg-gray  : our colour gradient sat
   on the OUTER div while Dhru painted the INNER one #f5f5f5, so the
   white initials ended up white-on-near-white and only the outer
   padding showed any colour. Let the inner box be transparent.
   --------------------------------------------------------------- */
.col-group-icon > .bg-gray,
.col-group-icon .bg-gray{
  background:transparent !important; background-color:transparent !important;
  color:#ffffff !important; font-weight:800 !important; letter-spacing:.05em;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* ---------------------------------------------------------------
   FIX 2 — the ACTIVE settings tab was white text on a white card.
   Bootstrap sets .nav-pills .nav-link.active{color:#fff} but the
   matching background was being overridden away. Set both colour
   channels explicitly so the pill can never lose its background.
   Scoped to page content so the site header nav is untouched.
   --------------------------------------------------------------- */
.body-container .nav-pills .nav-link.active,
.body-container .nav-tabs  .nav-link.active,
.body-container ul.nav > .nav-item > .nav-link.active{
  color:#ffffff !important;
  background-color:#0d6b34 !important;
  background-image:linear-gradient(120deg,#0d6b34,#12b06a 55%,#0ea5b7) !important;
  border-color:transparent !important; border-radius:11px !important;
  box-shadow:0 12px 24px -16px rgba(6,80,44,.95) !important;
}
.body-container .nav-pills .nav-link,
.body-container .nav-tabs .nav-link{ font-weight:700 !important; border-radius:11px !important; }
.body-container .nav-pills .nav-link:not(.active):hover,
.body-container .nav-tabs  .nav-link:not(.active):hover{
  background-color:#eafaf1 !important; color:#0d6b34 !important;
}

/* ---------------------------------------------------------------
   FIX 3 — the Announcements panel clipped ~1200px of content with no
   way to reach it (our own .card{overflow:hidden} + an inner list
   taller than the card). Give the list its own scroll area.
   --------------------------------------------------------------- */
.card-announcement{ display:flex !important; flex-direction:column !important; }
.card-announcement > .tabmenu_active{
  flex:1 1 auto; min-height:0; overflow-y:auto !important; padding-right:6px;
  scrollbar-width:thin; scrollbar-color:#1a8a3b #e8f2ec;
}
.card-announcement > .tabmenu_active::-webkit-scrollbar{ width:8px; }
.card-announcement > .tabmenu_active::-webkit-scrollbar-track{ background:#eef6f1; border-radius:8px; }
.card-announcement > .tabmenu_active::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#1a8a3b,#0d9488); border-radius:8px;
}
.card-announcement .card-title{
  font-family:var(--tk-mono); font-size:12px !important; letter-spacing:.1em;
  text-transform:uppercase; color:#0d6b34 !important; font-weight:700 !important;
  padding-bottom:10px; border-bottom:1px solid rgba(15,90,46,.14); margin-bottom:10px;
}

/* ---------------------------------------------------------------
   FIX 4 — the "My Account" dropdown is 13 items / ~495px tall and had
   max-height:none + overflow:visible, so on a short screen the last
   items were unreachable. Cap it and let it scroll.
   --------------------------------------------------------------- */
header .dropdown-menu{
  max-height:min(70vh,520px) !important; overflow-y:auto !important;
  scrollbar-width:thin; scrollbar-color:#1a8a3b #eef6f1;
}
header .dropdown-menu::-webkit-scrollbar{ width:8px; }
header .dropdown-menu::-webkit-scrollbar-thumb{ background:#1a8a3b; border-radius:8px; }

/* --- balance card → the dashboard's hero readout ------------------ */
.body-container .card.h-100:has(> .text-muted + .d-row){
  background:linear-gradient(140deg,#04120c 0%,#07281a 46%,#063040 100%) !important;
  border:1px solid rgba(46,232,138,.3) !important;
  box-shadow:0 30px 60px -40px rgba(4,40,22,.95) !important;
  position:relative; overflow:hidden;
}
.body-container .card.h-100:has(> .text-muted + .d-row)::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(46,232,138,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,232,138,.10) 1px, transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(85% 90% at 20% 0%, #000, transparent 78%);
          mask-image:radial-gradient(85% 90% at 20% 0%, #000, transparent 78%);
}
.body-container .card.h-100:has(> .text-muted + .d-row) > *{ position:relative; z-index:1; }
.body-container .card.h-100:has(> .text-muted + .d-row) .text-muted{
  color:#8fd8b4 !important; font-family:var(--tk-mono); font-size:11px !important;
  letter-spacing:.1em; text-transform:uppercase; font-weight:600;
}
.body-container .card.h-100:has(> .text-muted + .d-row) .d-row{
  color:#ffffff !important; font-family:var(--tk-mono); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; text-shadow:0 0 26px rgba(46,232,138,.4);
}
.body-container .card.h-100:has(> .text-muted + .d-row) .btn-primary{
  background:linear-gradient(120deg,var(--tk-neon),#12c97b 55%,var(--tk-cyan)) !important;
  color:#04180e !important; border:none !important; font-weight:800 !important;
  box-shadow:0 14px 28px -14px rgba(46,232,138,.9) !important;
}

/* --- the other money cards: instrument-style numerals ------------- */
.card-unpaid-balance .aftercounter,
.card-othercredit .aftercounter,
.card-area-status .py-3,
.card-area-status .cursor-pointer{
  font-family:var(--tk-mono) !important; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.card-area-status .text-muted{
  font-family:var(--tk-mono); font-size:11px !important; letter-spacing:.07em;
  text-transform:uppercase;
}

/* --- technical values read as data, not prose -------------------- */
.table tbody .col-orderid,
.table tbody .col-credit,
.table tbody .col-date,
.table tbody td.position-relative{
  font-family:var(--tk-mono) !important; font-variant-numeric:tabular-nums;
  font-size:12.5px !important; letter-spacing:.01em;
}
/* tbody only — the same class also exists on the <th>, where dark green
   would be invisible against the dark header band */
.table tbody .col-orderid{ color:#0d6b34 !important; font-weight:700 !important; }
/* the filter inputs that sit inside the dark table header */
.table thead th .form-control,
.table thead th input{
  background:rgba(255,255,255,.96) !important; color:#14231a !important;
  border:1px solid rgba(255,255,255,.5) !important; border-radius:9px !important;
  font-family:var(--tk-mono) !important; font-size:12px !important;
}
.table thead th input::placeholder{ color:#6a8377 !important; opacity:1 !important; }
.table thead th input:focus{ box-shadow:0 0 0 3px rgba(46,232,138,.35) !important; }

/* --- ADD FUNDS ---------------------------------------------------- */
/* Dhru renders the gateway radio with a completely EMPTY <label>, so the
   customer sees an unnamed radio button sitting next to an unlabelled
   dropdown and cannot tell what is being chosen.
   ⚠️ The label itself must not be touched: Bootstrap draws the radio
   dot with its ::before/::after (verified — ::after carries an SVG).
   So the caption goes on the surrounding .form-group instead. */
.body-container .form-group:has(select[name="method"])::before{
  content:"Payment method"; display:block; font-family:var(--tk-mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#6a8377; font-weight:700; margin-bottom:7px;
}
.body-container select[name="method"]{
  font-weight:600 !important; border-radius:10px !important;
  border-color:#dfeae3 !important; min-width:230px;
}
#label-payment-gateway{ cursor:pointer; }
/* the deposit amount is the most important field on the page */
.body-container input[name="amount"]{
  font-family:var(--tk-mono) !important; font-variant-numeric:tabular-nums;
  font-weight:700 !important; letter-spacing:-.01em;
  border:1.5px solid #dfeae3 !important; border-radius:12px !important;
  background:#f7fbf9 !important;
}
.body-container input[name="amount"]:focus{
  border-color:var(--tk-neon) !important; background:#fff !important;
  box-shadow:0 0 0 4px rgba(46,232,138,.16) !important;
}
/* deposit summary reads like a receipt */
.body-container table tr td:last-child{ font-variant-numeric:tabular-nums; }

/* --- form labels: one consistent, readable style ------------------ */
.body-container .form-group > label:not(.custom-control-label):not(.form-check-label):not(.btn){
  display:block; font-family:var(--tk-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:#6a8377; font-weight:700; margin-bottom:5px;
}

/* --- alerts get a left accent so notices are scannable ------------ */
.body-container .alert{ position:relative; padding-left:18px !important; }
.body-container .alert::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:4px; border-radius:4px;
  background:linear-gradient(180deg,var(--tk-neon),var(--tk-cyan));
}
.body-container .alert-warning::before{ background:linear-gradient(180deg,#e79a17,#f5b73d); }
.body-container .alert-danger::before{ background:linear-gradient(180deg,#e0455e,#f2709c); }
.body-container .alert-info::before{ background:linear-gradient(180deg,#0ea5b7,#6366f1); }

/* ---------------------------------------------------------------
   FIX 5 — ⚠️ MONEY PATH. On the invoice page the payment-method
   dropdown (Chosen.js, position:absolute) was being CUT OFF, so a
   customer could not see or pick all the payment options.
   Cause: OUR OWN `.card{overflow:hidden}` (added for rounded corners)
   clipped it — the card was the only clipping ancestor.
   A card must never clip a dropdown that belongs to it. `:has()` keeps
   the rounding everywhere else; tech.js repeats this defensively so
   the fix cannot depend on one CSS feature on a payment screen.
   --------------------------------------------------------------- */
.card:has(.chosen-container),
.card:has([data-toggle="dropdown"]),
.card-body:has(.chosen-container),
.tk-nocliP{ overflow:visible !important; }
/* readable, on-brand dropdown list */
.chosen-container .chosen-drop{
  border:1px solid rgba(15,90,46,.22) !important; border-radius:12px !important;
  box-shadow:0 26px 50px -22px rgba(6,50,28,.55) !important; overflow:hidden;
  margin-top:4px; z-index:1080 !important;
}
.chosen-container .chosen-results{ max-height:280px !important; padding:6px !important; margin:0 !important; }
.chosen-container .chosen-results li{ border-radius:9px; padding:9px 12px !important; font-weight:600; }
.chosen-container .chosen-results li.highlighted{
  background:linear-gradient(120deg,#0d6b34,#12b06a) !important; color:#fff !important;
}
.chosen-container .chosen-results li.result-selected{ color:#0d6b34 !important; font-weight:800; }
/* selected AND hovered at once must stay white on the green fill */
.chosen-container .chosen-results li.result-selected.highlighted{ color:#ffffff !important; }
.chosen-container .chosen-search input{
  border:1.5px solid #dfeae3 !important; border-radius:9px !important; font-family:var(--tk-mono) !important;
}
.chosen-container-single .chosen-single{
  border:1.5px solid #dfeae3 !important; border-radius:10px !important;
  height:auto !important; padding:10px 14px !important; font-weight:600;
}
.chosen-container-active .chosen-single{
  border-color:var(--tk-neon) !important; box-shadow:0 0 0 4px rgba(46,232,138,.16) !important;
}

/* ---------------------------------------------------------------
   FIX 6 — header menu overflowed the page between 992px and ~1200px
   (iPad landscape / small laptops). Dhru only switches to the
   hamburger below 992px, but the desktop menu measured 1133px inside
   a 1011px viewport → every page scrolled sideways by ~150px.
   Tighten the bar in that band and let it wrap as a hard guarantee,
   so it can never overflow no matter how many menu items exist.
   --------------------------------------------------------------- */
@media (min-width:992px) and (max-width:1279.98px){
  .header-middle nav,
  .header-middle .d-none.d-lg-block{ min-width:0 !important; max-width:100% !important; }
  /* Goal: ONE row at 1024px, and never an overflow at any width.
     `wrap` is kept as the guarantee — it only triggers if the row truly
     cannot fit, so it is a safety net, not the normal state. The size
     reductions below are what make one row the normal state. */
  .header-middle .navbar-mastermenu{
    flex-wrap:nowrap !important; justify-content:flex-end !important;
    font-size:12.5px;
  }
  /* menu labels stay whole — they must never read as "Client Ar…" */
  .header-middle .navbar-mastermenu > .nav-item{ flex:0 0 auto; }
  .header-middle .navbar-mastermenu > .nav-item > .nav-link{ white-space:nowrap; }
  /* the account chip was 265px — the single widest item. Cap it and
     ellipsise only the CUSTOMER NAME, which frees ~75px and lets every
     real menu label render in full on one row. */
  .header-middle .navbar-mastermenu > .nav-item:last-child{ min-width:0; flex-shrink:1; }
  /* The account chip is the single widest item (265px). Dhru gives its
     <li> the class `profile` — a plain class selector, far more reliable
     than :last-child (which did not match — the list has trailing nodes)
     or :has(). Shrinking its type shrinks the chip naturally.
     Safe: the account dropdown is a sibling of this <a>, not a child. */
  .header-middle .navbar-mastermenu > .nav-item.profile{ min-width:0; }
  /* max-width needs !important — Dhru's own nav rules reset it otherwise */
  .header-middle .navbar-mastermenu > .nav-item.profile > .nav-link{
    max-width:186px !important; overflow:hidden !important;
    padding-right:.25rem !important; font-size:12px !important;
  }
  .header-middle .navbar-mastermenu > .nav-item.profile .d-flex,
  .header-middle .navbar-mastermenu > .nav-item.profile .d-flex > div{ min-width:0; max-width:100%; }
  .header-middle .navbar-mastermenu > .nav-item.profile span:not(.avatar-img){
    display:inline-block; max-width:140px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;
  }
  .header-middle .navbar-mastermenu > .nav-item.profile .user-balance{
    font-size:10.5px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .header-middle .navbar-mastermenu > .nav-item:last-child span:not(.avatar-img){
    display:inline-block; max-width:150px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;
  }
  .header-middle .navbar-mastermenu > .nav-item > .nav-link{
    padding-left:.5rem !important; padding-right:.5rem !important;
    font-size:13px !important; letter-spacing:-.005em;
  }
  .header-middle .navbar-brand img{ max-height:40px; width:auto; }
  /* the account chip (name + balance) is the widest single item */
  .header-middle .navbar-mastermenu .nav-item.login .nav-link,
  .header-middle .navbar-mastermenu > .nav-item:last-child > .nav-link{
    max-width:230px;
  }
}
/* extra squeeze at the narrow end of the band so the single row still fits.
   Measured: at 1024 a no-wrap row needed 5px more than it had; this frees
   ~90px, which also clears 992px with room to spare. */
@media (min-width:992px) and (max-width:1090px){
  .header-middle .navbar-mastermenu > .nav-item > .nav-link{
    font-size:12px !important; padding-left:.35rem !important; padding-right:.35rem !important;
  }
  .header-middle .navbar-mastermenu > .nav-item.profile > .nav-link{ max-width:158px !important; }
  .header-middle .navbar-mastermenu > .nav-item.profile span:not(.avatar-img){ max-width:118px; }
  .header-middle .navbar-brand img{ max-height:34px; }
}

/* --- wide tables on a phone: make it OBVIOUS they scroll sideways ---
   Dhru already wraps order history in .table-responsive (1006px of
   table inside a 313px phone), but nothing told the customer it could
   be swiped. A soft right-hand fade + a visible slim scrollbar. */
.table-responsive{
  position:relative; overscroll-behavior-x:contain;
  scrollbar-width:thin; scrollbar-color:#1a8a3b #e8f2ec;
  -webkit-overflow-scrolling:touch;
}
.table-responsive::-webkit-scrollbar{ height:9px; }
.table-responsive::-webkit-scrollbar-track{ background:#eef6f1; border-radius:8px; }
.table-responsive::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,#1a8a3b,#0d9488); border-radius:8px;
}
@media (max-width:991px){
  /* fade hint pinned to the scroll container's right edge */
  .card:has(> .table-responsive),
  .page-container:has(.table-responsive){ position:relative; }
  .card:has(> .table-responsive)::after{
    content:""; position:absolute; top:0; bottom:14px; right:0; width:34px;
    pointer-events:none; z-index:3; border-radius:0 16px 16px 0;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92));
  }
  /* the two filter boxes inside the header ate 342px of the width */
  .table thead th .form-control,
  .table thead th input{ min-width:96px !important; max-width:150px; }
}

/* --- client-area responsive ---------------------------------------- */
@media (max-width:991px){
  .body-container .nav-pills,.body-container .nav-tabs{
    overflow-x:auto !important; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .body-container .nav-pills::-webkit-scrollbar,
  .body-container .nav-tabs::-webkit-scrollbar{ display:none; }
  .body-container .nav-pills .nav-link,.body-container .nav-tabs .nav-link{ white-space:nowrap; }
  .card-announcement{ max-height:70vh; }
  header .dropdown-menu{ max-height:min(62vh,440px) !important; }
}

/* =====================================================================
   15. SUPPORT TICKETS — Dhru ships this area almost unstyled. Make the
       three screens (list → new ticket → conversation) read as one
       professional, obvious flow. Display-only, from our own folder.
   ===================================================================== */

/* ---- 1. the tab bar: make "Add New Ticket" look like the action it is */
body.page-settings .nav-pills .nav-link[href="#newticket"]{
  background:linear-gradient(120deg,var(--tk-neon),#12c97b 55%,var(--tk-cyan)) !important;
  color:#04180e !important; font-weight:800 !important;
  box-shadow:0 12px 24px -14px rgba(46,232,138,.9) !important;
}
body.page-settings .nav-pills .nav-link[href="#newticket"]::before{ content:"\002B  "; font-weight:900; }
body.page-settings .nav-pills .nav-link[href="#newticket"]:hover{ filter:brightness(1.06); }
/* it is a tab, but it is also the primary action — push it to the right */
body.page-settings .nav-pills > .nav-item:has(> .nav-link[href="#newticket"]){ margin-left:auto; }

/* ---- 2. department chooser (step 1) → real cards, not bare links ---- */
.page-container .card .row > [class*="col-"] > .border.p-3{
  border:1px solid rgba(15,90,46,.16) !important; border-radius:18px !important;
  background:linear-gradient(180deg,#ffffff,#f6fdf9) !important;
  box-shadow:0 14px 34px -28px rgba(6,50,28,.6);
  transition:transform .2s var(--tk-ease), box-shadow .2s var(--tk-ease), border-color .2s;
  height:100%; display:flex; flex-direction:column; justify-content:center; padding:26px 20px !important;
  position:relative; overflow:hidden;
}
.page-container .card .row > [class*="col-"] > .border.p-3::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--tk-neon),var(--tk-cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--tk-ease);
}
.page-container .card .row > [class*="col-"] > .border.p-3:hover{
  transform:translateY(-4px); border-color:rgba(46,232,138,.55) !important;
  box-shadow:0 26px 48px -30px rgba(6,80,44,.7);
}
.page-container .card .row > [class*="col-"] > .border.p-3:hover::before{ transform:scaleX(1); }
.page-container .card .row > [class*="col-"] > .border.p-3 h5{ margin:0 0 6px; }
.page-container .card .row > [class*="col-"] > .border.p-3 h5 a{
  color:#0d2c1b !important; font-weight:800; font-size:17px; letter-spacing:-.01em; text-decoration:none;
}
.page-container .card .row > [class*="col-"] > .border.p-3 .info{ color:#5d7568; font-size:13px; line-height:1.6; }
/* ⚠️ Dhru prints the department icon with no size limit, so the logo
   rendered ~430px tall and swallowed the card. Cap it. */
.page-container .card .row > [class*="col-"] > .border.p-3 img{
  max-height:54px !important; width:auto !important; max-width:80% !important;
  margin:6px auto 10px; display:block; border-radius:10px;
}

/* ---- 3. new-ticket form (step 2) ---------------------------------- */
#contact .form-group > label{ margin-bottom:6px; }
#contact input[name="subject"],
#contact textarea[name="message"]{
  border:1.5px solid #dfeae3 !important; border-radius:12px !important; background:#f7fbf9 !important;
}
#contact input[name="subject"]:focus,
#contact textarea[name="message"]:focus,
#contact select:focus{
  border-color:var(--tk-neon) !important; background:#fff !important;
  box-shadow:0 0 0 4px rgba(46,232,138,.16) !important;
}
#contact textarea[name="message"]{ min-height:170px; line-height:1.65; }
#contact button#send{
  background:linear-gradient(120deg,var(--tk-neon),#12c97b 55%,var(--tk-cyan)) !important;
  color:#04180e !important; border:none !important; font-weight:800 !important;
  padding:13px 30px !important; border-radius:12px !important;
  box-shadow:0 16px 32px -16px rgba(46,232,138,.9) !important;
}
#contact button#send:hover{ filter:brightness(1.06); transform:translateY(-1px); }
/* the location map is decoration on a support form — keep it, but small
   and inside a card so it stops taking half the screen */
.mapouter{ height:210px !important; border-radius:14px; overflow:hidden;
  border:1px solid rgba(15,90,46,.14); box-shadow:0 14px 30px -26px rgba(6,50,28,.6); }
.gmap_canvas{ height:210px !important; }
@media (max-width:991px){ .mapouter,.gmap_canvas{ height:170px !important; } }

/* ---- 4. the conversation view → a real chat thread ----------------- */
/* staff bubble */
.page-container .card .p-3.rounded.bg-dark{
  background:linear-gradient(140deg,#07281a,#0d3d28) !important; color:#e8fbf1 !important;
  border:1px solid rgba(46,232,138,.24); border-radius:16px 16px 4px 16px !important;
  box-shadow:0 16px 34px -26px rgba(4,40,22,.9);
}
/* customer bubble */
.page-container .card .p-3.rounded.bg-light{
  background:linear-gradient(180deg,#f4fbf7,#eef8f2) !important; color:#1d2b23 !important;
  border:1px solid rgba(15,90,46,.14); border-radius:16px 16px 16px 4px !important;
  box-shadow:0 14px 30px -26px rgba(6,50,28,.5);
}
.page-container .card .p-3.rounded p{ font-size:14.5px !important; line-height:1.7; margin:0; white-space:pre-line; }
.page-container .card .p-1.text-muted small{
  font-family:var(--tk-mono); font-size:11px; letter-spacing:.02em; color:#7a8f83 !important;
}
/* ticket header strip (subject / status / date / priority) */
.page-container .card .row.border-bottom{
  background:linear-gradient(180deg,#f6fdf9,#eef8f2); border:1px solid rgba(15,90,46,.14) !important;
  border-radius:14px; padding:16px 18px !important; margin:0 0 22px !important;
}
/* reply box */
.page-container .card form textarea[name="message"]{
  border:1.5px solid #dfeae3 !important; border-radius:12px !important; background:#f7fbf9 !important;
  min-height:130px; line-height:1.65;
}
.page-container .card form textarea[name="message"]:focus{
  border-color:var(--tk-neon) !important; background:#fff !important;
  box-shadow:0 0 0 4px rgba(46,232,138,.16) !important;
}
.page-container .card form button[name="reply"]{
  background:linear-gradient(120deg,var(--tk-neon),#12c97b 55%,var(--tk-cyan)) !important;
  color:#04180e !important; border:none !important; font-weight:800 !important;
  border-radius:12px !important; padding:12px 26px !important;
  box-shadow:0 14px 28px -16px rgba(46,232,138,.9) !important;
}
.page-container .card form button[name="close"]{
  background:#fff !important; color:#5d7568 !important;
  border:1.5px solid #dfeae3 !important; border-radius:12px !important; padding:12px 22px !important; font-weight:700 !important;
}
.page-container .card form button[name="close"]:hover{ border-color:#e0455e !important; color:#c22e45 !important; }

/* ---- 5. ticket list: subject links + empty state ------------------- */
.table tbody td a[data-toggle="tooltip"]{ color:#0d6b34 !important; font-weight:600; }
.table tbody td a[data-toggle="tooltip"]:hover{ color:#12b06a !important; text-decoration:underline; }
.table tbody td[colspan]{ color:#7a8f83 !important; font-style:italic; padding:26px 12px !important; }

/* injected by tech.js — a short explainer above the department cards */
.tk-help{
  background:linear-gradient(180deg,#f6fdf9,#eef8f2); border:1px solid rgba(15,90,46,.14);
  border-left:4px solid var(--tk-neon); border-radius:12px; padding:14px 16px; margin:0 0 20px;
  font-size:13.5px; color:#33463b; line-height:1.65;
}
.tk-help b{ color:#0d2c1b; }
.tk-help .tk-help-t{
  display:block; font-family:var(--tk-mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:#0d6b34; font-weight:700; margin-bottom:5px;
}

@media (max-width:600px){
  body.page-settings .nav-pills > .nav-item:has(> .nav-link[href="#newticket"]){ margin-left:0; }
  .page-container .card .p-3.rounded p{ font-size:14px !important; }
}

/* ---- department cards: the WHOLE card is the button ---------------- */
.page-container .border.tk-dept{ cursor:pointer; }
.page-container .border.tk-dept *{ cursor:pointer; }
.page-container .border.tk-dept:focus-visible{
  outline:2px solid var(--tk-neon); outline-offset:3px;
}
.tk-dept-go{
  display:inline-block; margin-top:14px; padding:10px 20px; border-radius:11px;
  background:linear-gradient(120deg,#0d6b34,#12b06a 55%,#0ea5b7); color:#fff;
  font-weight:800; font-size:13.5px; letter-spacing:.01em;
  box-shadow:0 12px 24px -14px rgba(6,80,44,.9);
  transition:transform .18s var(--tk-ease), filter .18s var(--tk-ease);
}
.page-container .border.tk-dept:hover .tk-dept-go{ transform:translateY(-1px); filter:brightness(1.07); }

/* ---- ticket screenshot attachments (our own endpoint) -------------- */
.tk-att{ margin:10px 0 14px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.tk-att-btn{
  background:#fff; color:#0d6b34; border:1.5px solid rgba(15,90,46,.3);
  border-radius:11px; padding:10px 18px; font-weight:800; font-size:13.5px;
  cursor:pointer; transition:all .18s var(--tk-ease);
}
.tk-att-btn:hover:not(:disabled){
  border-color:var(--tk-neon); background:#f2fdf7; transform:translateY(-1px);
  box-shadow:0 10px 22px -14px rgba(6,80,44,.7);
}
.tk-att-btn:disabled{ opacity:.55; cursor:progress; }
.tk-att-hint{ font-family:var(--tk-mono); font-size:11px; color:#7a8f83; letter-spacing:.02em; }
.tk-att-list{ flex:1 1 100%; }
.tk-att-item{
  font-size:12.5px; padding:8px 12px; border-radius:10px; margin-top:7px;
  background:#f4faf7; color:#33463b; border:1px solid rgba(15,90,46,.12);
}
.tk-att-item.tk-att-busy{ font-family:var(--tk-mono); color:#0d6b34; }
.tk-att-item.tk-att-good{ background:#eafaf0; color:#116b2f; border-color:rgba(46,232,138,.45); font-weight:600; }
.tk-att-item.tk-att-bad{ background:#fdeef1; color:#a12238; border-color:rgba(224,69,94,.4); font-weight:600; }
.tk-att-note{
  margin:10px 0 0; padding:11px 14px; border-radius:11px; font-size:12.5px; line-height:1.6;
  background:#f4faf7; color:#33463b; border:1px solid rgba(15,90,46,.12); border-left:3px solid var(--tk-neon);
}
/* the chip a reader sees inside a ticket message */
.tk-att-chip{
  display:inline-block; margin:6px 0; padding:8px 14px; border-radius:10px;
  background:linear-gradient(120deg,#0d6b34,#12b06a); color:#fff !important;
  font-weight:700; font-size:13px; text-decoration:none !important;
  box-shadow:0 10px 20px -12px rgba(6,80,44,.8);
}
.tk-att-chip:hover{ filter:brightness(1.08); }
.p-3.rounded.bg-dark .tk-att-chip{ background:linear-gradient(120deg,var(--tk-neon),var(--tk-cyan)); color:#04180e !important; }
@media (max-width:600px){
  .tk-att-btn{ width:100%; }
  .tk-att-hint{ flex:1 1 100%; }
  /* Dhru's long "if you resolve your problem please close ticket" button
     is wider than a phone — let both ticket actions stack full width */
  .page-container form button[name="reply"],
  .page-container form button[name="close"]{
    display:block; width:100%; margin:8px 0 0; white-space:normal; line-height:1.35;
  }
}

/* =====================================================================
   16. TERMS & CONDITIONS — legal text that is actually readable.
       The document itself stays in Dhru's CMS (owner-editable); this is
       only presentation, keyed off the page's own [data-lang] blocks.
   ===================================================================== */
body.page-pages [data-lang]{ max-width:none !important; }
.tk-terms-bar{
  position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between; margin:0 0 22px;
  padding:14px 18px; border-radius:16px;
  background:linear-gradient(135deg,#04120c 0%,#07281a 45%,#053544 100%);
  border:1px solid rgba(46,232,138,.28);
  box-shadow:0 22px 46px -34px rgba(4,40,22,.95);
}
.tk-terms-title{
  font-family:var(--tk-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:#9ff0c8; font-weight:700;
}
.tk-terms-langs{ display:flex; gap:8px; }
.tk-lang{
  border:1px solid rgba(46,232,138,.4); background:rgba(255,255,255,.06); color:#ddfbec;
  border-radius:999px; padding:8px 20px; font-weight:800; font-size:13px; cursor:pointer;
  transition:all .18s var(--tk-ease); font-family:inherit;
}
.tk-lang:hover{ background:rgba(46,232,138,.16); }
.tk-lang.on{
  background:linear-gradient(120deg,var(--tk-neon),#12c97b 55%,var(--tk-cyan));
  color:#04180e; border-color:transparent;
  box-shadow:0 12px 24px -14px rgba(46,232,138,.9);
}
/* the CMS ships its own blue buttons — ours replace them */
body.page-pages [data-lang] ~ div > button[onclick*="toggleLanguage"],
body.page-pages button[onclick*="toggleLanguage"]{ display:none !important; }

/* jump list */
.tk-toc{
  margin:0 0 26px; padding:16px 18px; border-radius:14px;
  background:#f6fdf9; border:1px solid rgba(15,90,46,.14); border-left:4px solid var(--tk-neon);
}
.tk-toc-h{
  display:block; font-family:var(--tk-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:#0d6b34; font-weight:700; margin-bottom:10px;
}
.tk-toc ol{ margin:0; padding-left:20px; columns:2; column-gap:26px; }
.tk-toc li{ margin:0 0 7px; break-inside:avoid; }
.tk-toc a{ color:#2b6b45; font-size:13.5px; text-decoration:none; }
.tk-toc a:hover{ color:#12b06a; text-decoration:underline; }
@media (max-width:700px){ .tk-toc ol{ columns:1; } }

/* the legal text itself */
body.page-pages [data-lang] h1{
  font-size:clamp(24px,3vw,34px) !important; letter-spacing:-.03em; color:#0d2c1b !important;
  border-bottom:2px solid rgba(15,90,46,.18) !important;
}
body.page-pages [data-lang] h2{ scroll-margin-top:96px; letter-spacing:-.01em; }
/* brief highlight so the reader sees where the jump landed */
body.page-pages [data-lang] h2.tk-jumped{
  animation:tk-jump 1.4s var(--tk-ease);
}
@keyframes tk-jump{
  0%,100%{ background:transparent; box-shadow:none; }
  15%,55%{ background:rgba(46,232,138,.18); box-shadow:0 0 0 8px rgba(46,232,138,.18); border-radius:8px; }
}
@media (prefers-reduced-motion: reduce){ body.page-pages [data-lang] h2.tk-jumped{ animation:none; } }
body.page-pages [data-lang] p,
body.page-pages [data-lang] li{ line-height:1.85 !important; }
body.page-pages [data-lang] > div{
  transition:box-shadow .2s var(--tk-ease), transform .2s var(--tk-ease);
}
body.page-pages [data-lang] > div:hover{
  box-shadow:0 20px 40px -34px rgba(6,50,28,.55);
}
.tk-terms-updated{
  margin-top:26px; padding-top:16px; border-top:1px solid rgba(15,90,46,.14);
  font-family:var(--tk-mono); font-size:11.5px; color:#7a8f83; letter-spacing:.02em;
}
@media print{
  .tk-terms-bar,.tk-toc,header,footer{ display:none !important; }
  body.page-pages [data-lang]{ display:block !important; }
}
@media (max-width:600px){
  .tk-terms-bar{ padding:12px 14px; }
  .tk-lang{ padding:8px 16px; font-size:12.5px; }
}

/* ---- branded stand-in for an image that cannot be loaded ----------- */
.tk-imgfall{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:8px;
  background:linear-gradient(135deg,#0d6b34,#12b06a 55%,#0ea5b7);
  color:#fff; font-weight:800; font-size:15px; letter-spacing:.04em;
  border-radius:12px; box-shadow:0 10px 22px -14px rgba(6,80,44,.8);
  font-family:var(--tk-mono); text-transform:uppercase; overflow:hidden;
}

/* GA-TECH-LAYER-ACTIVE */

/* the logo is now a real link home — make that feel true */
.tk-brand-link{ cursor:pointer; transition:transform .18s cubic-bezier(.22,1,.36,1), filter .18s; display:inline-block; }
.tk-brand-link:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.tk-brand-link:focus-visible{ outline:2px solid #2ee88a; outline-offset:3px; border-radius:8px; }

/* =====================================================================
   Support Checker — rich Hello/iCloud Bypass result card (.ga-hr*)
   Light card that sits inside the terminal-styled checker body; uses the
   .ga-home palette (--good/--bad/--warn/--line…) + tk mono for accents.
   ===================================================================== */
.ga-home .ga-hr{ border-radius:16px; border:1.5px solid var(--line); overflow:hidden;
  background:var(--panel); box-shadow:0 18px 40px -30px rgba(6,50,28,.55); }
.ga-home .ga-hr-head{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px; }
.ga-home .ga-hr-ico{ width:46px; height:46px; border-radius:13px; flex:none; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:23px; font-weight:800;
  font-family:var(--tk-mono); box-shadow:0 10px 22px -12px currentColor; }
.ga-home .ga-hr-verdict{ margin:0 0 2px; font-size:17px; font-weight:800; letter-spacing:-.01em;
  font-family:var(--tk-mono); }
.ga-home .ga-hr-model{ margin:0 0 3px; font-size:13.5px; font-weight:700; color:var(--ink); }
.ga-home .ga-hr-sub{ margin:0; font-size:13px; color:var(--ink2); line-height:1.5; }
.ga-home .ga-hr-sub b{ color:var(--ink); }

/* verdict colours */
.ga-home .ga-hr-ok{ border-color:rgba(18,146,78,.45); }
.ga-home .ga-hr-ok .ga-hr-head{ background:linear-gradient(180deg,var(--good-bg),transparent); }
.ga-home .ga-hr-ok .ga-hr-ico{ background:linear-gradient(135deg,var(--good),#0e7c41); }
.ga-home .ga-hr-ok .ga-hr-verdict{ color:var(--good); }
.ga-home .ga-hr-no{ border-color:rgba(211,58,48,.45); }
.ga-home .ga-hr-no .ga-hr-head{ background:linear-gradient(180deg,var(--bad-bg),transparent); }
.ga-home .ga-hr-no .ga-hr-ico{ background:linear-gradient(135deg,var(--bad),#b52a22); }
.ga-home .ga-hr-no .ga-hr-verdict{ color:var(--bad); }
.ga-home .ga-hr-warn{ border-color:rgba(181,115,10,.45); }
.ga-home .ga-hr-warn .ga-hr-head{ background:linear-gradient(180deg,var(--warn-bg),transparent); }
.ga-home .ga-hr-warn .ga-hr-ico{ background:linear-gradient(135deg,var(--warn),#8a5807); }
.ga-home .ga-hr-warn .ga-hr-verdict{ color:var(--warn); }
.ga-home .ga-hr-info{ border-color:rgba(13,148,136,.4); }
.ga-home .ga-hr-info .ga-hr-head{ background:linear-gradient(180deg,#e6f6f4,transparent); }
.ga-home .ga-hr-info .ga-hr-ico{ background:linear-gradient(135deg,#0d9488,#0f766e); }
.ga-home .ga-hr-info .ga-hr-verdict{ color:#0f766e; }

/* method sub-cards */
.ga-home .ga-hr-methods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px; padding:0 18px 4px; }
.ga-home .ga-hr-m{ position:relative; border:1px solid var(--line); border-radius:12px;
  background:var(--panel2); padding:13px 14px 14px; }
.ga-home .ga-hr-m::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px;
  border-radius:3px; background:linear-gradient(180deg,var(--good),#0d9488); }
.ga-home .ga-hr-mtop{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ga-home .ga-hr-mtop b{ font-size:13.5px; color:var(--ink); font-weight:800; }
.ga-home .ga-hr-need{ font-family:var(--tk-mono); font-size:10px; letter-spacing:.02em;
  background:rgba(181,115,10,.14); color:var(--warn); border:1px solid rgba(181,115,10,.35);
  padding:2px 7px; border-radius:999px; text-transform:uppercase; }
.ga-home .ga-hr-ios{ font-family:var(--tk-mono); font-size:11.5px; color:#0f766e; margin:5px 0 8px;
  letter-spacing:.01em; }
.ga-home .ga-hr-caps{ list-style:none; margin:0 0 9px; padding:0; }
.ga-home .ga-hr-caps li{ position:relative; padding:2px 0 2px 22px; font-size:12.5px; color:var(--ink2);
  line-height:1.45; }
.ga-home .ga-hr-caps li::before{ position:absolute; left:0; top:1px; font-weight:800;
  font-family:var(--tk-mono); font-size:13px; }
.ga-home .ga-hr-caps li.y::before{ content:"\2713"; color:var(--good); }
.ga-home .ga-hr-caps li.n::before{ content:"\2715"; color:var(--bad); }
.ga-home .ga-hr-caps li.n{ color:var(--mut); }
.ga-home .ga-hr-tools{ font-family:var(--tk-mono); font-size:11px; color:var(--mut);
  border-top:1px dashed var(--line); padding-top:8px; letter-spacing:.01em; }
.ga-home .ga-hr-tools span{ display:inline-block; background:var(--gl); color:var(--gd);
  border-radius:5px; padding:1px 6px; margin-right:6px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; font-size:9.5px; }
.ga-home .ga-hr-dim{ opacity:.62; }
.ga-home .ga-hr-dim::before{ background:linear-gradient(180deg,#9aa8a0,#c3cec8); }
.ga-home .ga-hr-dimnote{ font-size:11px; color:var(--warn); margin-top:6px; font-style:italic; }

/* footer call to action */
.ga-home .ga-hr-cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 18px 16px; border-top:1px solid var(--line); margin-top:6px; }
.ga-home .ga-hr-order{ display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  background:linear-gradient(135deg,var(--g),var(--gd)); color:#fff; font-weight:800; font-size:13px;
  padding:10px 18px; border-radius:11px; font-family:var(--tk-mono); letter-spacing:.02em;
  box-shadow:0 12px 26px -14px rgba(18,146,78,.8); transition:transform .18s var(--tk-ease), filter .18s; }
.ga-home .ga-hr-order:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.ga-home .ga-hr-hint{ font-size:11.5px; color:var(--mut); }

@media (max-width:560px){
  .ga-home .ga-hr-methods{ grid-template-columns:1fr; }
  .ga-home .ga-hr-head{ padding:14px; }
  .ga-home .ga-hr-cta{ padding:14px; }
  .ga-home .ga-hr-order{ width:100%; justify-content:center; }
}

/* --- iOS support: green ✓ pills + muted ✕ not-supported pills --------- */
.ga-home .ga-hr-ios{ margin:6px 0 10px; }
.ga-home .ga-ios-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ga-home .ga-ios-ok{ display:inline-flex; align-items:center; gap:2px; font-family:var(--tk-mono);
  font-size:11px; font-weight:700; color:var(--good); background:var(--good-bg);
  border:1px solid rgba(18,146,78,.38); border-radius:999px; padding:3px 10px; letter-spacing:.01em; }
.ga-home .ga-ios-all{ font-size:11.5px; }
.ga-home .ga-ios-match{ font-family:var(--tk-mono); font-size:10.5px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#0d9488,#0f766e); border:none; border-radius:999px; padding:3px 10px;
  letter-spacing:.02em; box-shadow:0 7px 16px -9px #0f766e; }
.ga-home .ga-ios-no{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:6px; }
.ga-home .ga-ios-nolab{ font-family:var(--tk-mono); font-size:9px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--mut); }
.ga-home .ga-ios-nx{ font-family:var(--tk-mono); font-size:9.5px; color:var(--bad); background:var(--bad-bg);
  border:1px solid rgba(211,58,48,.26); border-radius:999px; padding:2px 8px; opacity:.9; }

/* --- "All supported models" — slim, collapsed-by-default ------------- */
.ga-home .ga-coverage{ margin-top:14px; }
.ga-home .ga-cov-toggle{ width:100%; display:flex; align-items:center; gap:10px; cursor:pointer;
  background:linear-gradient(180deg,#f2faf5,var(--panel2)); border:1px solid var(--line); border-radius:12px;
  padding:10px 14px; font-family:var(--tk-mono); color:var(--ink);
  transition:border-color .15s, background .15s, box-shadow .15s; }
.ga-home .ga-cov-toggle:hover{ border-color:var(--gl2); background:#edf7f0; box-shadow:0 8px 18px -14px rgba(18,146,78,.5); }
.ga-home .ga-cov-tl{ font-size:12px; font-weight:700; letter-spacing:.01em; }
.ga-home .ga-cov-tr{ font-size:10.5px; color:var(--mut); margin-left:auto; }
.ga-home .ga-cov-caret{ font-size:11px; color:var(--gd); transition:transform .2s var(--tk-ease); }
.ga-home .ga-cov-toggle.on .ga-cov-caret{ transform:rotate(180deg); }
.ga-home .ga-cov-toggle.on{ border-radius:12px 12px 0 0; border-bottom-color:transparent; }
.ga-home .ga-cov-body{ border:1px solid var(--line); border-top:none; border-radius:0 0 12px 12px;
  background:var(--panel2); padding:6px 14px 12px; }
.ga-home .ga-cov-g{ padding:9px 0 2px; border-top:1px dashed var(--line); }
.ga-home .ga-cov-g:first-child{ border-top:none; padding-top:6px; }
.ga-home .ga-cov-gh{ display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; margin-bottom:7px; }
.ga-home .ga-cov-gh b{ font-size:11.5px; color:var(--gd); font-weight:800; }
.ga-home .ga-cov-gh span{ font-family:var(--tk-mono); font-size:9.5px; color:#0f766e; letter-spacing:.01em; }
.ga-home .ga-cov-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.ga-home .ga-cov-chip{ font-family:var(--tk-mono); font-size:10.5px; font-weight:700; color:var(--gd);
  background:var(--gl); border:1px solid var(--gl2); border-radius:7px; padding:3px 8px; cursor:pointer;
  transition:transform .12s var(--tk-ease), background .12s, color .12s; }
.ga-home .ga-cov-chip:hover{ background:linear-gradient(135deg,var(--g),var(--gd)); color:#fff; transform:translateY(-1px); }
.ga-home .ga-cov-chip:focus-visible{ outline:2px solid var(--g); outline-offset:2px; }

/* ===== Support Checker — "future digital feature" polish (2026-08-06) === */
/* LIVE indicator in the terminal title bar */
.ga-home .ga-hud-live{ position:absolute; top:9px; right:14px; z-index:3;
  display:inline-flex; align-items:center; gap:6px; font-family:var(--tk-mono);
  font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:#7fe9b3; padding:3px 9px; border:1px solid rgba(46,232,138,.35);
  border-radius:999px; background:rgba(46,232,138,.10); pointer-events:none; }
.ga-home .ga-hud-live i{ width:6px; height:6px; border-radius:50%; background:var(--tk-neon);
  box-shadow:0 0 6px 1px rgba(46,232,138,.85); animation:ga-live 1.9s ease-out infinite; }
@keyframes ga-live{ 0%{ box-shadow:0 0 0 0 rgba(46,232,138,.55);} 70%{ box-shadow:0 0 0 7px rgba(46,232,138,0);} 100%{ box-shadow:0 0 0 0 rgba(46,232,138,0);} }

/* soft neon aura on the panel + a faint digital dot-grid behind the body */
.ga-home .ga-checkbox{ box-shadow:0 40px 80px -50px rgba(6,50,28,.55), 0 0 0 1px rgba(46,232,138,.07), 0 2px 0 rgba(255,255,255,.9) inset; }
.ga-home .ga-checkbody{ background-image:radial-gradient(rgba(13,107,52,.045) 1px, transparent 1.4px); background-size:22px 22px; background-position:-1px -1px; }

/* input: brighter neon focus */
.ga-home .ga-checkrow .ga-inp:focus{ box-shadow:0 0 0 4px rgba(46,232,138,.16), 0 0 22px -6px rgba(46,232,138,.5); }

/* result reveal: staggered rise-in + a single scan-sweep across the card */
.ga-home .ga-hr{ position:relative; }
.ga-home .ga-result.ga-show > .ga-hr{ animation:ga-rise .34s var(--tk-ease) both; }
.ga-home .ga-result.ga-show > .ga-hr::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(100deg,transparent 42%,rgba(46,232,138,.16) 50%,transparent 58%);
  transform:translateX(-120%); animation:ga-sweep .85s var(--tk-ease) .08s 1; }
@keyframes ga-sweep{ to{ transform:translateX(120%);} }
.ga-home .ga-hr-methods .ga-hr-m{ animation:ga-rise .42s var(--tk-ease) both; }
.ga-home .ga-hr-methods .ga-hr-m:nth-child(2){ animation-delay:.07s; }
.ga-home .ga-hr-methods .ga-hr-m:nth-child(3){ animation-delay:.13s; }
@keyframes ga-rise{ from{ opacity:0; transform:translateY(9px);} to{ opacity:1; transform:none;} }
.ga-home .ga-hr-m{ transition:transform .18s var(--tk-ease), box-shadow .18s var(--tk-ease), border-color .18s; }
.ga-home .ga-hr-m:hover{ transform:translateY(-2px); border-color:rgba(46,232,138,.5);
  box-shadow:0 18px 32px -22px rgba(18,146,78,.75); }

@media (prefers-reduced-motion: reduce){
  .ga-home .ga-hud-live i{ animation:none; }
  .ga-home .ga-result.ga-show > .ga-hr, .ga-home .ga-hr-methods .ga-hr-m{ animation:none; }
  .ga-home .ga-result.ga-show > .ga-hr::after{ display:none; }
}

/* --- Permanent iCloud Unlock: region "Provide" list + eligibility panel --- */
.ga-home .ga-hr-req{ margin-top:2px; }
.ga-home .ga-hr-reqh{ display:block; font-family:var(--tk-mono); font-size:9px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mut); margin-bottom:5px; }
.ga-home .ga-hr-req ul{ list-style:none; margin:0; padding:0; }
.ga-home .ga-hr-req li{ font-size:12px; color:var(--ink2); padding:3px 0; line-height:1.45; }
.ga-home .ga-hr-reqk{ display:inline-block; font-family:var(--tk-mono); font-size:10px; font-weight:700;
  color:var(--gd); background:var(--gl); border:1px solid var(--gl2); border-radius:6px;
  padding:1px 7px; margin-right:6px; }
.ga-home .ga-hr-elig{ margin-top:12px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg,#f2faf5,var(--panel2)); padding:12px 14px 13px; }
.ga-home .ga-hr-eligh{ font-family:var(--tk-mono); font-size:11px; letter-spacing:.02em; font-weight:700;
  color:var(--ink); margin-bottom:8px; }
.ga-home .ga-hr-elig .ga-hr-caps{ margin:0 0 7px; }
.ga-home .ga-hr-elignote{ margin:0; font-size:11.5px; color:var(--mut); line-height:1.55; }