/* ============================================================
   TMG SECURITY — LEGAL PAGES
   Loads with tmg-home.css (tokens, header, footer) and
   tmg-services.css (shared section furniture).

   This is a LEGAL page: readability outranks spectacle. The
   visual language is the site's, but the motion budget is
   deliberately tiny — one static hero diagram, scroll reveals,
   and a scroll-spy rail. No continuous animation, no parallax,
   no pointer tracking, no canvas.
   ============================================================ */

.lgl{
  --acc:var(--cyan);
  --acc-soft:rgba(79,216,234,.12);
  --acc-line:rgba(79,216,234,.4);
}

/* Static technical grid — no scroll transform, so it costs nothing. */
.lgl-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(79,216,234,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,216,234,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 10%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 10%, transparent 70%);
}
.lgl > *{ position:relative; z-index:1; }

/* ============================================================
   HERO
   ============================================================ */
.lgl-hero{ padding-top:var(--s7); padding-bottom:var(--s5); }
.lgl-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s6); align-items:center; }
.lgl-h1{
  font-family:var(--display); font-size:clamp(34px,5vw,60px); font-weight:700;
  line-height:1.03; letter-spacing:-2px; margin:16px 0 20px;
}
.lgl-h1 span{
  background:linear-gradient(96deg, var(--cyan), var(--violet) 62%, var(--hyper));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lgl-lead{ font-size:16.5px; color:var(--ice); line-height:1.72; max-width:640px; margin-bottom:var(--s4); }
.lgl-dates{ display:flex; flex-wrap:wrap; gap:10px; }
.lgl-date{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:9px; letter-spacing:1.6px; color:var(--fog);
  border:1px solid var(--line2); border-radius:20px; padding:8px 14px; background:var(--deep);
}
.lgl-date b{ color:var(--ice); font-weight:400; }

/* Privacy architecture diagram — inline SVG, no script, no animation. */
.lgl-vis{ width:100%; max-width:440px; margin:0 auto; }
.lgl-vis svg{ width:100%; height:auto; display:block; }
@media (max-width:1000px){
  .lgl-hero-grid{ grid-template-columns:1fr; gap:var(--s5); }
  .lgl-vis{ max-width:340px; order:-1; }
}
@media (max-width:430px){ .lgl-vis{ max-width:260px; } }

/* ============================================================
   QUICK NAVIGATION
   Horizontal rail on desktop; horizontally scrollable on mobile
   so it never wraps into a wall of chips.
   ============================================================ */
.lgl-quick{
  position:sticky; top:var(--hh,68px); z-index:20;
  border-block:1px solid var(--line);
  background:rgba(4,6,12,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.lgl-quick-inner{
  display:flex; gap:6px; overflow-x:auto; padding:11px 0; scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.lgl-quick-inner::-webkit-scrollbar{ display:none; }
.lgl-quick a{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:44px;
  padding:11px 14px; border-radius:var(--r-md); border:1px solid transparent;
  font-family:var(--mono); font-size:8.5px; letter-spacing:1.4px; color:var(--fog);
  white-space:nowrap; transition:background .25s, border-color .25s, color .25s;
}
.lgl-quick a i{ font-style:normal; color:var(--line3); transition:color .25s; }
.lgl-quick a:hover{ background:var(--panel); color:var(--ice); }
.lgl-quick a.on{ border-color:var(--acc-line); background:var(--acc-soft); color:var(--acc); }
.lgl-quick a.on i{ color:var(--acc); }

/* ============================================================
   BODY — sticky index rail + content
   ============================================================ */
.lgl-wrap{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:var(--s6); align-items:start; }

.lgl-rail{ position:sticky; top:calc(var(--hh,68px) + 78px); max-height:calc(100vh - var(--hh,68px) - 120px); }
.lgl-rail-h{ font-family:var(--mono); font-size:8.5px; letter-spacing:2.2px; color:var(--fog); margin-bottom:13px; }
.lgl-rail-list{
  display:flex; flex-direction:column; gap:1px; overflow-y:auto; max-height:calc(100vh - var(--hh,68px) - 160px);
  border-left:1px solid var(--line2); overscroll-behavior:contain; scrollbar-width:thin;
}
.lgl-rail-list::-webkit-scrollbar{ width:3px; }
.lgl-rail-list::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:3px; }
.lgl-rail-list a{
  display:flex; gap:10px; padding:7px 0 7px 14px; margin-left:-1px;
  border-left:1px solid transparent; font-size:12px; line-height:1.45; color:var(--fog);
  transition:color .22s, border-color .22s;
}
.lgl-rail-list a b{ font-family:var(--mono); font-size:9px; font-weight:400; color:var(--line3); flex:none; }
.lgl-rail-list a:hover{ color:var(--ice); }
.lgl-rail-list a.on{ color:var(--acc); border-left-color:var(--acc); }
.lgl-rail-list a.on b{ color:var(--acc); }

/* --- content --- */
.lgl-body{ min-width:0; max-width:860px; }
.lgl-sec{ scroll-margin-top:calc(var(--hh,68px) + 84px); margin-bottom:var(--s6); }
.lgl-sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:20px; }
.lgl-sec-n{
  font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--acc);
  border:1px solid var(--acc-line); background:var(--acc-soft);
  border-radius:8px; padding:6px 10px; flex:none;
}
.lgl-sec h2{
  font-family:var(--display); font-size:clamp(20px,2.3vw,27px); font-weight:700;
  letter-spacing:-.6px; line-height:1.24; color:var(--white); margin:0;
}
.lgl-sec h3{
  font-family:var(--display); font-size:16px; font-weight:600; letter-spacing:-.2px;
  color:var(--white); margin:28px 0 12px;
}
.lgl-sec p{ font-size:15.5px; line-height:1.85; color:var(--ice); margin-bottom:18px; }
.lgl-sec ul{ display:flex; flex-direction:column; gap:9px; margin:0 0 20px; padding:0; }
.lgl-sec li{
  position:relative; padding-left:22px; list-style:none;
  font-size:15px; line-height:1.72; color:var(--fog);
}
.lgl-sec li::before{
  content:''; position:absolute; left:2px; top:10px; width:6px; height:6px; border-radius:1px;
  border:1px solid var(--acc-line); background:var(--acc-soft); transform:rotate(45deg);
}
.lgl-sec b, .lgl-sec strong{ color:var(--white); font-weight:600; }
.lgl-sec a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }

/* callout */
.lgl-note{
  margin:0 0 22px; padding:20px 22px; border-radius:var(--r-md);
  border:1px solid var(--line2); border-left:2px solid var(--warn);
  background:linear-gradient(100deg, rgba(245,180,78,.05), rgba(13,20,36,.5));
}
.lgl-note b{
  display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:2px;
  color:var(--warn); margin-bottom:10px;
}
.lgl-note p{ margin:0; font-size:14.5px; line-height:1.75; color:var(--ice); }

/* offices / contact */
.lgl-offices{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0 0 22px; }
.lgl-office{
  padding:20px 20px 22px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--deep);
}
.lgl-office .k{ font-family:var(--mono); font-size:8.5px; letter-spacing:1.8px; color:var(--acc); margin-bottom:11px; }
.lgl-office address{ font-style:normal; font-size:14.5px; line-height:1.75; color:var(--ice); }
.lgl-contact{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px; }
.lgl-contact a, .lgl-contact span{
  display:inline-flex; align-items:center; gap:10px; min-height:48px;
  padding:13px 17px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--deep);
  font-size:14.5px; color:var(--ice); transition:border-color .25s, background .25s;
}
.lgl-contact a:hover{ border-color:var(--acc-line); background:var(--panel); }
.lgl-contact .k{ font-family:var(--mono); font-size:8px; letter-spacing:1.6px; color:var(--fog); }
@media (max-width:640px){ .lgl-offices{ grid-template-columns:1fr; } }

/* Hidden by default; the mobile block below turns it on. Declared BEFORE
   that block so source order cannot cancel it out. */
.lgl-rail-toggle{ display:none; }

/* ============================================================
   MOBILE
   The rail becomes a collapsible index above the content; the
   quick rail keeps its horizontal scroll.
   ============================================================ */
@media (max-width:1000px){
  .lgl-wrap{ grid-template-columns:1fr; gap:var(--s4); }
  .lgl-rail{
    position:static; max-height:none; order:-1;
    border:1px solid var(--line); border-radius:var(--r-md); background:var(--deep);
  }
  .lgl-rail-h{ display:none; }
  .lgl-rail-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
    min-height:52px; padding:14px 17px; background:none; border:0; cursor:pointer;
    font-family:var(--mono); font-size:9px; letter-spacing:2px; color:var(--ice);
  }
  .lgl-rail-toggle .chev{
    width:8px; height:8px; border-right:1.5px solid var(--acc); border-bottom:1.5px solid var(--acc);
    transform:rotate(45deg); transition:transform .3s var(--ease);
  }
  .lgl-rail-toggle[aria-expanded="true"] .chev{ transform:rotate(-135deg); }
  .lgl-rail-list{ display:none; max-height:52vh; padding:0 17px 14px; border-left:0; }
  .lgl-rail-list.on{ display:flex; }
  .lgl-rail-list a{ border-left:1px solid var(--line2); min-height:44px; align-items:center; padding-top:0; padding-bottom:0; }
  .lgl-body{ max-width:none; }
}

@media (max-width:520px){
  .lgl-sec p{ font-size:15px; line-height:1.8; }
  .lgl-sec-head{ gap:12px; flex-wrap:wrap; }
  .lgl-note{ padding:17px 16px; }
  .lgl-office{ padding:17px 16px 18px; }
}

/* ============================================================
   REVEALS + REDUCED MOTION
   ============================================================ */
.lgl [data-rv]{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.lgl [data-rv].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .lgl *, .lgl *::before, .lgl *::after{ animation:none !important; transition-duration:.01ms !important; }
  .lgl [data-rv]{ opacity:1; transform:none; }
}

/* 44px minimum on every control this page owns. */
.lgl .cta-btn, .lgl .cta-ghost{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }

/* ============================================================
   COOKIE POLICY — CATEGORY CARDS + FLOW
   Two components only. Everything else on this page reuses the
   legal furniture above, so the third legal page costs no new
   layout system.
   ============================================================ */
.ckcat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0 0 24px; }
.ckcat{
  position:relative; padding:22px 22px 24px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--deep);
  transition:border-color .3s, background .3s;
}
.ckcat:hover{ border-color:var(--acc-line); background:var(--panel); }
.ckcat .k{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:8px; letter-spacing:1.7px; color:var(--acc);
  border:1px solid var(--acc-line); background:var(--acc-soft);
  border-radius:8px; padding:5px 9px; margin-bottom:13px;
}
.ckcat.pending .k{ color:var(--warn); border-color:rgba(245,180,78,.4); background:rgba(245,180,78,.07); }
.ckcat h3{ font-family:var(--display); font-size:16px; font-weight:600; margin:0 0 9px; color:var(--white); }
.ckcat p{ margin:0; font-size:14px; line-height:1.72; color:var(--fog); }
@media (max-width:640px){ .ckcat-grid{ grid-template-columns:1fr; } }

/* USER -> WEBSITE -> COOKIE/ANALYTICS -> INSIGHTS -> IMPROVEMENT */
.ckflow{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); margin:0 0 26px; }
.ckflow::before{ content:''; position:absolute; left:10%; right:10%; top:29px; height:1px; background:var(--line2); }
.ckflow-fill{
  position:absolute; left:10%; top:29px; height:1px; width:var(--kp,0%); max-width:80%;
  background:linear-gradient(90deg,var(--cyan),var(--violet)); transition:width 1.2s var(--ease);
}
.ckflow-step{ position:relative; text-align:center; padding:0 8px; }
.ckflow-dot{
  position:relative; z-index:2; width:13px; height:13px; border-radius:50%; margin:23px auto 0;
  background:var(--void); border:1px solid var(--line2); transition:border-color .5s, background .5s;
}
.ckflow-step.on .ckflow-dot{ border-color:var(--acc); background:var(--acc); }
.ckflow-n{ font-family:var(--mono); font-size:8px; letter-spacing:1.8px; color:var(--fog); }
.ckflow-step.on .ckflow-n{ color:var(--acc); }
.ckflow-t{ font-family:var(--mono); font-size:9px; letter-spacing:1.4px; color:var(--ice); margin-top:13px; line-height:1.6; }
@media (max-width:760px){
  .ckflow{ grid-template-columns:1fr; }
  .ckflow::before{ left:6px; right:auto; top:8px; bottom:8px; width:1px; height:auto; }
  .ckflow-fill{ left:6px; top:8px; width:1px !important; height:var(--kp,0%); max-width:none;
                background:linear-gradient(180deg,var(--cyan),var(--violet)); transition:height 1.2s var(--ease); }
  .ckflow-step{ text-align:left; padding:0 0 18px 28px; }
  .ckflow-dot{ position:absolute; left:0; top:3px; margin:0; }
  .ckflow-t{ margin-top:2px; }
}

/* compact summary at the foot of the policy */
.cksum{ display:flex; flex-direction:column; gap:8px; margin:0 0 22px; }
.cksum-row{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:16px; align-items:start;
  padding:15px 18px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--deep);
}
.cksum-row b{ font-family:var(--mono); font-size:9px; letter-spacing:1.6px; color:var(--acc); font-weight:400; }
.cksum-row span{ font-size:14px; line-height:1.7; color:var(--fog); }
@media (max-width:640px){ .cksum-row{ grid-template-columns:1fr; gap:6px; } }

@media (prefers-reduced-motion: reduce){
  .ckflow-step{ }
  .ckflow-fill{ transition:none; }
}


/* An unfilled legal date. Deliberately visible rather than a plausible-looking
   date: publishing an invented effective date on a privacy policy is a legal
   statement, not a formatting detail. Replace the span with the real date. */
.lgl-pending{
  font-family:var(--mono); font-size:.92em; letter-spacing:.5px;
  color:var(--warn); border-bottom:1px dashed var(--warn); padding-bottom:1px;
}