/*
Theme Name: CamsoftAITech
Author: CamsoftAI
Description: A responsive WordPress theme for CamsoftAITech, featuring a single-page website and a standalone Privacy Policy page.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: camsoftaitech
*/

/* =====================================================================
   BEQUEST by CamsoftAI — Stylesheet
   ---------------------------------------------------------------------
   Table of contents (search for the "===" markers to jump around):
     1. Variables & resets
     2. Typography & shared utilities (gradients, eyebrows, pills)
     3. Logo / brand mark
     4. Header & navigation
     5. View switching (single-page sections)
     6. Hero section
     7. Section rule / divider row
     8. Pillars (3-up cards on home)
     9. Generic section heading
    10. Feature block ("Bequest prepares / Solicitor finalises")
    11. Steps ("How it works" 4-up)
    12. Security block
    13. Suite strip ("Part of the CamsoftAI suite")
    14. Prose / about-page text blocks
    15. Stats row (About page)
    16. Values (Products page, 3-up)
    17. Contact form + contact details
    18. Footer
    19. Responsive breakpoints
   ===================================================================== */


/* =====================================================================
   1. VARIABLES & RESETS
   ===================================================================== */
:root{
  --bg:#080C17;
  --bg-raised:#0E1424;
  --bg-panel:#131B2E;
  --text:#F4F6FB;
  --text-muted:#8A93AC;
  --cyan:#34BEE8;
  --indigo:#6E74F0;
  --violet:#9B6CF0;
  --green:#33D17A;
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.15);
  --maxw:1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Inter",system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}

/* soft ambient background glow, sits behind all content */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 460px at 84% -6%, rgba(155,108,240,0.18), transparent 60%),
    radial-gradient(680px 520px at -4% 6%, rgba(52,190,232,0.15), transparent 62%);
}

a{ color:inherit;text-decoration:none; }
h1,h2,h3,h4{ font-family:"Poppins",system-ui,sans-serif;font-weight:700;letter-spacing:-0.02em;line-height:1.08;margin:0; }
p{ margin:0; }

.wrap{ max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1; }


/* =====================================================================
   2. TYPOGRAPHY & SHARED UTILITIES
   ===================================================================== */
.grad{
  background:linear-gradient(90deg,var(--cyan),var(--indigo),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.eyebrow{ font-size:12.5px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--cyan); }

.pill{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-strong);
  border-radius:999px;padding:7px 15px;font-size:12.5px;letter-spacing:0.16em;
  text-transform:uppercase;font-weight:600;color:var(--text);background:rgba(255,255,255,0.03);
}
.pill .led{ width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green); }

.btn{
  font-family:"Inter",sans-serif;font-size:15.5px;font-weight:600;padding:14px 26px;border-radius:12px;
  cursor:pointer;border:1px solid transparent;transition:transform .15s,filter .2s,border-color .2s,color .2s;
  display:inline-flex;gap:9px;align-items:center;
}
.btn:focus-visible{ outline:2px solid var(--indigo);outline-offset:3px; }
.btn-primary{ background:linear-gradient(90deg,var(--cyan),var(--indigo),var(--violet));color:#fff; }
.btn-primary:hover{ transform:translateY(-1px);filter:brightness(1.08); }
.btn-ghost{ border-color:var(--line-strong);color:#000000;  }
.btn-ghost:hover{ border-color:var(--indigo);color:#000000; }

.link{ color:var(--cyan);border-bottom:1px solid rgba(52,190,232,0.45);transition:color .2s,border-color .2s; }
.link:hover{ color:var(--violet);border-color:var(--violet); }


/* =====================================================================
   3. LOGO / BRAND MARK
   ---------------------------------------------------------------------
   .mark-svg      = the animated dotted "globe" graphic (hero + security section)
   .brand-logo    = the CamsoftAI PNG logo used in the header nav + footer
   ===================================================================== */
.mark-svg{ display:block; }
@media (prefers-reduced-motion: no-preference){
  .mark-svg.spin #mark-graphic,.mark-svg.spin g{ transform-origin:50% 50%; }
  .hero-mark .mark-svg.spin{ animation:spin 90s linear infinite;transform-origin:50% 50%; }
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.brand-logo{ display:block;height:48px;width:auto;object-fit:contain;flex:none; }
.foot-brand .brand-logo{ height:78px; }


/* =====================================================================
   4. HEADER & NAVIGATION
   ===================================================================== */
header.nav{
  position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);
  background:linear-gradient(to bottom,rgba(8,12,23,0.9),rgba(8,12,23,0.66));
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex;align-items:center;justify-content:space-between;height:74px; }
.brand{ display:flex;align-items:center;gap:12px;cursor:pointer; }
.brand .word{ font-family:"Poppins",sans-serif;font-size:21px;font-weight:700;letter-spacing:-0.01em; }
.brand .sub{ font-size:9.5px;letter-spacing:0.2em;color:var(--text-muted);text-transform:uppercase;margin-top:1px;font-weight:600; }

nav.links{ display:flex;gap:4px;align-items:center; }
nav.links button,
nav.links a{
  background:none;border:0;cursor:pointer;color:var(--text-muted);font-family:"Inter",sans-serif;
  font-size:15px;font-weight:500;padding:9px 16px;border-radius:999px;transition:color .2s,background .2s;
}
nav.links button:hover,nav.links a:hover{ color:var(--text); }
nav.links button[aria-current="page"],nav.links a[aria-current="page"]{ color:var(--text);background:rgba(110,116,240,0.16); }
nav.links button:focus-visible,nav.links a:focus-visible{ outline:2px solid var(--indigo);outline-offset:2px; }


/* =====================================================================
   5. VIEW SWITCHING (single-page sections toggled by js/script.js)
   ===================================================================== */
.view{ display:none;padding-top:30px;padding-bottom:96px; }
.view.is-active{ display:block; }
@media (prefers-reduced-motion: no-preference){
  .view.is-active{ animation:viewin .5s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes viewin{ from{ opacity:0;transform:translateY(10px); } to{ opacity:1;transform:none; } }
}


/* =====================================================================
   6. HERO SECTION (Home)
   ===================================================================== */
.hero{ padding:52px 0 36px;display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center; }
.hero h1{ font-size:clamp(40px,5.6vw,50px);font-weight:800;margin:22px 0 0; }
.hero .lede{ margin-top:24px;font-size:19px;color:#C4CBDC;max-width:36ch; }
.hero .thesis{
  margin-top:26px;font-family:"Poppins",sans-serif;font-weight:600;font-size:19px;
  padding-left:18px;border-left:2px solid var(--indigo);
}
.cta-row{ display:flex;gap:14px;margin-top:34px;flex-wrap:wrap; }

.hero-mark{ display:flex;justify-content:center;align-items:center; }
.hero-mark .mark-svg{ width:min(320px,78%);height:auto;filter:drop-shadow(0 20px 60px rgba(110,116,240,0.28)); }


/* =====================================================================
   7. SECTION RULE / DIVIDER ROW  (e.g. "Secure by design ⋄ Solicitor finalised")
   ===================================================================== */
.rule-row{ display:flex;align-items:center;gap:20px;margin-top:30px;color:var(--text-muted); }
.rule-row .hr{ flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent); }
.rule-row .dot{ width:7px;height:7px;transform:rotate(45deg);background:linear-gradient(135deg,var(--cyan),var(--violet));flex:none; }
.rule-row span{ font-size:11px;letter-spacing:0.2em;text-transform:uppercase;font-weight:600; }


/* =====================================================================
   8. PILLARS (Home, 3-up: Guided / Secured / Finalised)
   ===================================================================== */
.pillars{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px; }
.pillar{ border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:linear-gradient(180deg,var(--bg-raised),rgba(14,20,36,0.35)); }
.pillar .k{ font-size:11px;letter-spacing:0.16em;text-transform:uppercase;font-weight:600; }
.pillar h3{ font-size:22px;margin:14px 0 8px;font-weight:700; }
.pillar p{ color:var(--text-muted);font-size:15.5px; }


/* =====================================================================
   9. GENERIC SECTION HEADING (used on Home, About, Products)
   ===================================================================== */
.section{ margin-top:78px; }
.section-head{ max-width:58ch; }
.section-head h2{ font-size:clamp(30px,3.8vw,44px);margin-top:16px;font-weight:800; }
.section-head p{ margin-top:18px;color:#C4CBDC;font-size:18px; }
.lead{ font-family:"Poppins",sans-serif;font-weight:600;font-size:clamp(21px,2.5vw,28px);line-height:1.3; }


/* =====================================================================
   10. FEATURE BLOCK (Home — "Bequest prepares / Solicitor finalises")
   ===================================================================== */
.feature{
  margin-top:40px;border:1px solid var(--line-strong);border-radius:22px;overflow:hidden;
  background:radial-gradient(1000px 380px at 100% 0%, rgba(110,116,240,0.12), transparent 55%),var(--bg-raised);
  padding:44px;
}
.feature .grid{ display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start; }

.balance{ display:grid;gap:18px; }
.balance .row{ display:flex;gap:16px;align-items:flex-start; }
.balance .badge{
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;color:#fff;
  background:linear-gradient(90deg,var(--cyan),var(--indigo));border-radius:7px;padding:6px 10px;
  flex:none;margin-top:3px;min-width:104px;text-align:center;
}
.balance .badge.alt{ background:transparent;color:var(--violet);border:1px solid var(--violet); }
.balance .row p{ color:#CBD2E2;font-size:16px; }
.balance .row p b{ color:var(--text);font-weight:600; }


/* =====================================================================
   11. STEPS (Products — "How it works", 4-up)
   ===================================================================== */
.steps{ display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border-top:1px solid var(--line); }
.step{ padding:30px 22px 10px;border-right:1px solid var(--line);position:relative; }
.step:last-child{ border-right:0; }
.step .num{ font-family:"Poppins",sans-serif;font-weight:700;font-size:15px; }
.step h4{ font-size:20px;margin:14px 0 10px;font-weight:600; }
.step p{ color:var(--text-muted);font-size:15px; }
.step::before{
  content:"";position:absolute;top:-1px;left:0;width:38px;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
}


/* =====================================================================
   12. SECURITY BLOCK (Products page)
   ===================================================================== */
.secure{
  margin-top:44px;border-radius:22px;border:1px solid var(--line-strong);
  background:linear-gradient(160deg,#0D1526,#0A0F1D);padding:46px 44px;position:relative;overflow:hidden;
}
.secure .tag{ font-size:12px;letter-spacing:0.22em;text-transform:uppercase;font-weight:600;color:var(--cyan);display:flex;align-items:center;gap:10px; }
.secure h2{ font-size:clamp(28px,3.4vw,40px);margin:16px 0 0;max-width:20ch;font-weight:800; }
.secure .intro{ margin-top:18px;color:#C4CBDC;font-size:18px;max-width:60ch; }

.secure-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px; }
.sec-card{ border:1px solid var(--line);border-radius:14px;padding:22px;background:rgba(14,20,36,0.55); }
.sec-card .code{ font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;color:var(--indigo); }
.sec-card h4{ font-size:19px;margin:12px 0 8px;font-weight:600; }
.sec-card p{ color:var(--text-muted);font-size:14.5px; }

.vault{ position:absolute;right:-46px;top:-46px;width:220px;opacity:0.25; }


/* =====================================================================
   13. SUITE STRIP ("Part of the CamsoftAI suite" — Products page)
   ===================================================================== */
.suite{
  margin-top:44px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  border:1px dashed var(--line-strong);border-radius:16px;padding:22px 26px;
}
.suite .lbl{ font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted);font-weight:600; }
.suite .chip{ font-size:14px;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:7px 15px; }
.suite .chip b{ font-weight:600; }


/* =====================================================================
   14. PROSE (About / Products long-form text blocks)
   ===================================================================== */
.prose{ max-width:66ch; }
.prose p{ color:#CBD2E2;font-size:17.5px;margin-top:20px; }
.prose p:first-child{ margin-top:0; }
.prose p b{ color:var(--text);font-weight:600; }


/* =====================================================================
   15. STATS ROW (About page — 20+ / 2008 / Legal / 100%)
   ===================================================================== */
.stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px; }
.stat{ border-top:2px solid;border-image:linear-gradient(90deg,var(--cyan),var(--violet)) 1;padding-top:18px; }
.stat .fig{ font-family:"Poppins",sans-serif;font-weight:800;font-size:clamp(30px,4vw,44px);line-height:1; }
.stat .lab{ color:var(--text-muted);font-size:14px;margin-top:10px; }


/* =====================================================================
   16. VALUES (Products page, 3-up: Security / Human / Plain language)
   ===================================================================== */
.values{ display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px; }
.value{ border-left:1px solid var(--line);padding-left:22px; }
.value .n{ font-size:12px;font-weight:700;letter-spacing:0.14em; }
.value h3{ font-size:21px;margin-top:6px;font-weight:700; }
.value p{ color:var(--text-muted);font-size:15.5px;margin-top:10px; }


/* =====================================================================
   17. CONTACT (form + contact details panel)
   ===================================================================== */
.contact-grid{ display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:40px;align-items:start; }
.field{ margin-bottom:18px; }
label{ display:block;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;font-weight:600; }
input,textarea{
  width:100%;background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:11px;
  color:var(--text);font-family:"Inter",sans-serif;font-size:16px;padding:13px 15px;transition:border-color .2s;
}
input:focus,textarea:focus{ outline:none;border-color:var(--indigo); }
textarea{ min-height:130px;resize:vertical; }

.contact-detail{ border:1px solid var(--line);border-radius:18px;padding:30px;background:var(--bg-raised); }
.contact-detail .row{ padding:16px 0;border-bottom:1px solid var(--line); }
.contact-detail .row:last-child{ border-bottom:0;padding-bottom:0; }
.contact-detail .k{ font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--cyan);font-weight:600; }
.contact-detail .v{ font-size:16.5px;margin-top:6px; }
.contact-detail .v a:hover{ color:var(--cyan); }
.note{ font-size:13.5px;color:var(--text-muted);margin-top:14px; }


/* =====================================================================
   18. FOOTER
   ===================================================================== */
footer.site{ border-top:1px solid var(--line);margin-top:20px;padding:44px 0 60px;position:relative;z-index:1; }
.foot-grid{ display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start; }
.foot-brand{ max-width:34ch; }
.foot-brand p{ color:var(--text-muted);font-size:14px;margin-top:14px; }

.foot-links{ display:flex;gap:34px;flex-wrap:wrap; }
.foot-col h5{ font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px;font-weight:600; }
.foot-col a,.foot-col button{
  display:block;color:var(--text-muted);font-size:14.5px;margin-bottom:10px;background:none;
  border:0;padding:0;cursor:pointer;font-family:inherit;text-align:left;
}
.foot-col a:hover,.foot-col button:hover{ color:var(--text); }

.disclaimer{ margin-top:36px;padding-top:22px;border-top:1px solid var(--line);color:var(--text-muted);font-size:12.5px;max-width:92ch;line-height:1.7; }
.disclaimer b{ color:#B9C1D3;font-weight:600; }


/* =====================================================================
   19. RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr;gap:8px; }
  .hero-mark{ order:-1;justify-content:flex-start; }
  .hero-mark .mark-svg{ width:140px; }
  .pillars,.secure-grid,.values,.steps,.feature .grid,.contact-grid,.stats{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .steps{ border-top:0; }
  .step{ border-right:0;border-top:1px solid var(--line); }
  .step::before{ display:none; }
  .feature,.secure{ padding:30px 24px; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  .nav-inner{ height:64px; }
  .brand .sub{ display:none; }
  nav.links button,nav.links a{ padding:8px 11px;font-size:14px; }
  .wrap{ padding:0 20px; }
  .stats{ grid-template-columns:1fr 1fr; }
}


/* ==========================================================
   CONTACT FORM 7
   ========================================================== */

.contact-form-wrapper {
    width: 100%;
}

.contact-form-wrapper .wpcf7 {
    width: 100%;
}

.contact-form-wrapper .field {
    margin-bottom: 18px;
}

.contact-form-wrapper .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.contact-form-wrapper input:not([type="submit"]),
.contact-form-wrapper textarea {
    width: 100%;
    background: var(--bg-raised);
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    color: var(--text);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    padding: 13px 15px;
    transition: border-color 0.2s;
}

.contact-form-wrapper input:not([type="submit"]):focus,
.contact-form-wrapper textarea:focus {
    outline: none;
    border-color: var(--indigo);
}

.contact-form-wrapper textarea {
    min-height: 130px;
    resize: vertical;
}

.contact-form-wrapper .wpcf7-submit {
    width: auto;
    border: 0;
}

.contact-form-wrapper .wpcf7-submit:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.contact-form-wrapper .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: #ff8d8d;
    font-size: 13px;
}

.contact-form-wrapper form .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 12px 15px;
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    color: var(--text);
    font-size: 14px;
}

.contact-form-wrapper form.sent .wpcf7-response-output {
    border-color: var(--green);
}

.contact-form-wrapper form.invalid .wpcf7-response-output,
.contact-form-wrapper form.failed .wpcf7-response-output,
.contact-form-wrapper form.unaccepted .wpcf7-response-output {
    border-color: #ff8d8d;
}

.contact-form-wrapper .wpcf7-spinner {
    margin: 0 0 0 12px;
}


/* =====================================================================
   20. STANDALONE PRIVACY POLICY PAGE
   ===================================================================== */
.legal-page{ padding-top:54px;padding-bottom:100px; }
.legal-hero{ max-width:820px; }
.legal-hero h1{ font-size:clamp(42px,6vw,68px);font-weight:800;margin-top:16px; }
.legal-intro{ max-width:720px;margin-top:22px;color:#C4CBDC;font-size:19px;line-height:1.7; }
.legal-meta{ display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:24px;color:var(--text-muted);font-size:13px; }
.legal-rule{ margin-top:46px; }

.legal-layout{ display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;margin-top:54px;align-items:start; }
.legal-toc{
  position:sticky;top:102px;border:1px solid var(--line);border-radius:16px;
  padding:22px;background:linear-gradient(180deg,var(--bg-raised),rgba(14,20,36,0.55));
}
.legal-toc-title{ margin-bottom:14px;color:var(--cyan);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; }
.legal-toc a{ display:block;padding:7px 0;color:var(--text-muted);font-size:13.5px;line-height:1.35;transition:color .2s,transform .2s; }
.legal-toc a:hover{ color:var(--text);transform:translateX(2px); }
.legal-toc a:focus-visible{ outline:2px solid var(--indigo);outline-offset:3px;border-radius:3px; }

.legal-content{ min-width:0; }
.legal-section{ position:relative;scroll-margin-top:104px;padding:0 0 48px;margin:0 0 48px;border-bottom:1px solid var(--line); }
.legal-section:last-child{ margin-bottom:0; }
.legal-number{ font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:9px; }
.legal-section h2{ font-size:clamp(27px,3vw,36px);font-weight:750;margin-bottom:20px; }
.legal-section h3{ font-size:18px;line-height:1.35;margin-bottom:10px; }
.legal-section p{ color:#C4CBDC;font-size:16.5px;line-height:1.78;margin-top:14px; }
.legal-section p:first-of-type{ margin-top:0; }
.legal-section strong{ color:var(--text); }
.legal-section ul{ margin:18px 0 0;padding-left:22px;color:#C4CBDC; }
.legal-section li{ padding-left:4px;margin-bottom:10px;line-height:1.65; }
.legal-section li::marker{ color:var(--cyan); }

.legal-cards{ display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px; }
.legal-card{ border:1px solid var(--line);border-radius:15px;padding:22px;background:rgba(14,20,36,.72); }
.legal-card p{ color:var(--text-muted);font-size:14.5px;line-height:1.65;margin-top:0; }
.legal-note{ margin-top:22px;padding:18px 20px;border-left:2px solid var(--indigo);background:rgba(110,116,240,.09);border-radius:0 12px 12px 0;color:#C4CBDC;font-size:15px;line-height:1.7; }

.legal-table-wrap{ margin-top:24px;overflow-x:auto;border:1px solid var(--line);border-radius:14px; }
.legal-table{ width:100%;border-collapse:collapse;min-width:620px;background:rgba(14,20,36,.55); }
.legal-table th,.legal-table td{ text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6; }
.legal-table th{ color:var(--cyan);font-size:11px;letter-spacing:.13em;text-transform:uppercase;background:rgba(255,255,255,.025); }
.legal-table td:first-child{ width:180px;color:var(--text);font-weight:600; }
.legal-table tr:last-child td{ border-bottom:0; }

.legal-contact{ border:1px solid var(--line-strong);border-radius:20px;padding:30px;background:radial-gradient(700px 280px at 100% 0%,rgba(110,116,240,.15),transparent 65%),var(--bg-raised); }
.legal-contact .btn{ margin-top:24px; }
.foot-col a[aria-current="page"]{ color:var(--text); }

@media (max-width:900px){
  .legal-layout{ grid-template-columns:1fr;gap:34px; }
  .legal-toc{ position:relative;top:auto;display:grid;grid-template-columns:1fr 1fr;gap:0 20px; }
  .legal-toc-title{ grid-column:1/-1; }
}

@media (max-width:620px){
  .legal-page{ padding-top:38px;padding-bottom:72px; }
  .legal-intro{ font-size:17px; }
  .legal-rule span{ display:none; }
  .legal-layout{ margin-top:38px; }
  .legal-toc{ grid-template-columns:1fr;padding:20px; }
  .legal-cards{ grid-template-columns:1fr; }
  .legal-section{ padding-bottom:38px;margin-bottom:38px; }
  .legal-contact{ padding:24px 20px; }
}