/* ======================================================
   ATPLMax — COMPLETE OPTIMIZED CSS (Latest rules first)
   ====================================================== */

/* ---------- Tokens ---------- */
:root{
  --brand:#682D63;
  --brand-700:#4C2148;
  --text:#111827;
  --muted:#475569;
  --border:#e6e8eb;
  --radius:5px;          /* cap radius */
  --maxw:1160px;
  --nav-h:64px;
  --section-py:20px;     /* section padding */
  --gap:14px;
  --dark:#202020;        /* dark bars */
  --bg:#f8f6f4;          /* page background */
}

/* ---------- Global ---------- */
*{ box-sizing:border-box; }
*,*::before,*::after{ box-shadow:none !important; }  /* remove all shadows */
html{
  scroll-behavior:smooth;
  background:var(--bg);
}
body{
  margin:0; padding:0;
  color:var(--text);
  background:var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-700); }

/* ---------- Containers & Sections ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 12px;
  border-radius:var(--radius);
  background:transparent;
  border:none;
}
.container.nav,
.container.trust{
  background:#202020 !important;
  border:none !important;
}
section{
  padding:var(--section-py) 0;
  scroll-margin-top:calc(var(--nav-h) + 8px);
}

/* Utility to let grids touch edges inside a container */
.bleed-grid{ margin-left:-12px; margin-right:-12px; }
@media (max-width:480px){
  .bleed-grid{ margin-left:-8px; margin-right:-8px; }
}

/* ---------- Typography ---------- */
h1,h2,h3{ line-height:1.2; margin:0 0 8px; letter-spacing:-.015em; }
h2{
  color:#404742 !important;
  font-size:40px !important;
  font-weight:bold !important;
}
@media (max-width:600px){
  h2{ font-size:30px !important; }
}
.feature2 h2{ color:#404742 !important; }

p{
  margin:8px 0 8px;
  color:var(--muted);
  font-size:20px;
  line-height:32px;
  font-weight:400;
}
li{
  font-size:20px;
  font-weight:400;
  text-align:left;
  line-height:30px;
}

/* ---------- Top Navigation (dark) ---------- */
.nav-wrap{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:var(--dark); color:#fff; border-bottom:1px solid #2b2b2b;
  backdrop-filter:saturate(140%) blur(6px);
}
.nav{
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ display:none; }
.brand img{ display:block; width:auto; max-width:120px; }
.brand h1{ font-size:18px; font-weight:800; color:#fff; }
.menu{ display:flex; align-items:center; gap:8px; }
.menu a{
  padding:8px 10px; border-radius:var(--radius);
  font-weight:600; color:#fff; border:1px solid transparent;
}
.menu a:hover{ background:#2a2a2a; border-color:#333; }
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:var(--radius); font-weight:800;
  background:var(--brand); color:#fff; border:1px solid var(--brand);
}
.btn-primary:hover{ background:var(--brand-700); }
.burger{ display:none; width:40px; height:40px; border-radius:var(--radius); border:1px solid #333; background:#1c1c1c; }
.burger span{ display:block; width:22px; height:2px; background:#fff; margin:7px auto; border-radius:2px; }
.menu-mobile{
  display:none; flex-direction:column; gap:6px; padding:8px; margin:8px 0 0;
  border:1px solid #333; border-radius:var(--radius); background:#1b1b1b;
}
.menu-mobile a{ padding:8px 10px; border-radius:var(--radius); color:#fff; font-weight:600; border:1px solid transparent; }
.menu-mobile a:hover{ background:#2a2a2a; border-color:#333; }
@media (max-width:980px){
  .menu{ display:none; }
  .burger{ display:block; }
  .menu-mobile.show{ display:flex; }
}

/* ---------- Banner ---------- */
.banner{ border-bottom:1px solid var(--border); }
.banner-img{
  width:100%; height:580px; object-fit:cover; object-position:center; display:block;
}

/* ---------- Stats Band ---------- */
.stats-band{
  background:#eff0ef;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
  align-items:stretch; justify-items:stretch;
}
@media (max-width:900px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .stats{ grid-template-columns:1fr; } }
.stat{
  text-align:center; border:1px solid var(--border); background:#fff;
  padding:12px; border-radius:var(--radius);
}
.stat .big{ font-size:clamp(26px,4vw,38px); font-weight:900; color:var(--brand); }
.stat p{ font-weight:700; color:#111827; }

/* ---------- Trust Band (dark) ---------- */
.trust-band{
  background:var(--dark);
  border-top:1px solid #2b2b2b; border-bottom:1px solid #2b2b2b;
  color:#fff;
}
.trust{ text-align:center; padding:12px 0; }
.trust h2{ color:#fff !important; }
.trust p{ color:rgba(255,255,255,.9); }

/* ---------- Feature (text + image) ---------- */
.feature{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--gap); align-items:center;
  border:1px solid var(--border); background:#fff;
  padding:12px; border-radius:var(--radius);
}
.feature img{ border-radius:var(--radius); }
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:var(--radius); font-weight:800; color:#111827;
  border:1px solid var(--border); background:#fff;
}
.btn-outline:hover{ background:#fafafa; }
@media (max-width:980px){ .feature{ grid-template-columns:1fr; } .feature .block-right{ order:-1; } }

/* ---------- Feature2 (light card w/ border) ---------- */
.feature2{
  border:1px solid #2b2b2b;
  background:#fff;
  color:#000;
  padding:27px;
  border-radius:var(--radius);
}
.feature2 h2{ color:#404742 !important; }
.feature2 p{ color:#5e5e5e; }
.feature2 p span{
  display:block; position:relative;
  padding-left:28px; margin:6px 0;
  color:#5e5e5e;
  font-size:20px;
}

/* ---------- Pricing ---------- */
.pricing-grid{
  display:grid; gap:var(--gap); grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1024px){ .pricing-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .pricing-grid{ grid-template-columns:1fr; } }

.card{
  position:relative;
  border:1px solid var(--border); border-radius:var(--radius);
  background:#fff; overflow:hidden;
  transform:translateZ(0);
  transition:transform .18s ease, border-color .18s ease;
}
.card:hover{ transform:scale(1.03); border-color:#dadde3; }

.ribbon{
  position:absolute; top:12px; right:-38px;
  background:linear-gradient(90deg,var(--brand-700),var(--brand));
  color:#fff; padding:4px 40px; font-weight:800; font-size:.78rem;
  transform:rotate(30deg); border-radius:3px;
}

/* card header/body spacing & styles */
.card-header{
  padding-block:clamp(18px, 3.2vw, 30px);
  padding-inline:clamp(14px, 2.2vw, 20px);
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#fff 0%,#f4fbf8 100%);
}
.card-header h3{
  margin:0;
  font-size:clamp(20px, 2.4vw, 30px);
  line-height:1.2;
  color:#111827;
}
.card-body{
  padding:clamp(18px, 3.5vw, 30px);
}

.price-row{ display:flex; align-items:flex-end; gap:8px; margin:8px 0 6px; }
.price{ font-size:46px; font-weight:900; line-height:1; letter-spacing:-.015em; color:var(--brand); }
.price-info{ color:#111827; font-weight:700; font-size:18px; }

.features{ list-style:none; padding:0; margin:8px 0 12px; }
.features li{
  position:relative;
  padding-left:28px;
  margin:6px 0;
  color:#5e5e5e;
}
.features strong{ color:#404742; }
.total{
  display:inline-block; font-weight:500; background:green; color:#fff;
  padding:0 10px; font-size:14px; border-radius:5px;
}

/* CTA button */
.subscription-link.btn{
  display:inline-block; width:100%; padding:10px 12px; border-radius:var(--radius);
  background:var(--brand); color:#fff !important; border:1px solid var(--brand);
  font-weight:800; text-align:center; text-decoration:none;
  transition:filter .12s ease, transform .1s ease;
}
.subscription-link.btn:hover{ filter:saturate(95%); transform:translateY(-1px); }

/* Emphasize 12-month card */
.card.is-featured{ border:2px solid var(--brand); }
.card.is-featured .card-header{
  background:linear-gradient(90deg,var(--brand) 0%, var(--brand-700) 100%);
  color:#fff; border-bottom-color:var(--brand);
}
.card.is-featured .card-header h3{ color:#fff; }

/* ---------- Reviews ---------- */
.reviews-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .reviews-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .reviews-grid{ grid-template-columns:1fr; } }
.review{
  position:relative;
  border:1px solid var(--border); background:#fff;
  padding:10px; border-radius:var(--radius);
  overflow:hidden; transition:transform .2s ease;
}
.review:hover{ transform:translateY(-2px); }
.review::before{
  content:""; position:absolute; inset:0; background:rgba(104,45,99,.08);
  transform:translateX(-100%); transition:transform .25s ease;
}
.review:hover::before{ transform:translateX(0); }
.review-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.avatar{ width:50px; height:50px; border-radius:999px; overflow:hidden; border:2px solid rgba(104,45,99,.25); }
.review-name{ font-weight:900; color:#404742; }
.stars{ display:inline-flex; gap:2px; }
.stars svg{ width:16px; height:16px; fill:#f59e0b; }

/* ---------- FAQ Accordion (Smooth) ---------- */
.faq{ max-width:var(--maxw); margin:0 auto; }
.accordion{ border:1px solid var(--border); border-radius:var(--radius); background:#fff; overflow:hidden; }
.acc-item + .acc-item{ border-top:1px solid var(--border); }

.acc-btn{
  width:100%; text-align:left; background:#fff; border:0; padding:12px;
  font-weight:800; font-size:20px; color:#404742; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
}
.acc-btn:focus{ outline:2px solid var(--brand); outline-offset:2px; }

.acc-panel{
  overflow:hidden;
  max-height:0;
  padding:0 12px;           /* collapsed (no vertical padding) */
  opacity:0;
  transition:
    max-height .35s ease,
    opacity .25s ease,
    padding .25s ease;
  will-change:max-height, opacity, padding;
  background:#fff;
}
.acc-item.open .acc-panel{
  padding:12px;
  opacity:1;
}

/* ---------- Footer (dark) ---------- */
footer{
  padding:20px 0 24px; border-top:1px solid #2b2b2b;
  background:var(--dark); color:#e5e5e5;
}
.foot{
  display:grid; gap:14px; grid-template-columns:1.2fr .8fr .8fr;
}
.foot h4{ margin-bottom:8px; color:#fff; }
.foot p{ color:#d8cfe0; margin:6px 0; line-height:1.6; }
.foot a{ color:#e9d7ec; }
.foot a:hover{ color:#fff; text-decoration:underline; }
.foot small{ color:#bdbdbd; }
@media (max-width:820px){ .foot{ grid-template-columns:1fr; } }

/* ---------- Edge bleed helpers ---------- */
.pricing-grid.bleed-grid,
.reviews-grid.bleed-grid{ margin-left:-12px; margin-right:-12px; }
@media (max-width:480px){
  .pricing-grid.bleed-grid,
  .reviews-grid.bleed-grid{ margin-left:-8px; margin-right:-8px; }
}

/* ---------- Check icons (pure CSS — no Font Awesome needed) ---------- */
.features li::before,
.feature2 p span::before{
  content:"";
  position:absolute;
  left:0; top:0.35em;
  width:14px; height:14px;
  background-color: var(--brand);
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\
<path fill="%23000" d="M6.173 12.727a1 1 0 0 1-.707-.293L2.232 9.2a1 1 0 1 1 1.414-1.414l2.527 2.527 6.181-6.181a1 1 0 1 1 1.414 1.414l-6.888 6.888a1 1 0 0 1-.707.293z"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\
<path fill="%23000" d="M6.173 12.727a1 1 0 0 1-.707-.293L2.232 9.2a1 1 0 1 1 1.414-1.414l2.527 2.527 6.181-6.181a1 1 0 1 1 1.414 1.414l-6.888 6.888a1 1 0 0 1-.707.293z"/></svg>') no-repeat center / contain;
}

/* Footer base size everywhere */
footer { font-size:14px; line-height:1.6; }

/* Ensure common elements inherit the 14px */
footer p,
footer a,
footer small,
footer li { font-size:14px; line-height:1.6; }

/* Keep footer headings a touch larger for hierarchy */
footer h4 { font-size:16px; line-height:1.4; }

/* 14px legal content */
.legal p,
.legal li,
.legal ul,
.legal ol,
.legal table,
.legal small { font-size:14px; line-height:1.65; }

/* Optional: headings tuned down a bit on legal pages */
.legal h2 { font-size:24px !important; line-height:1.3; }
.legal h3 { font-size:16px !important; line-height:1.35; margin:6px 0; }

/* If your legal lists feel tight, add spacing: */
.legal li { margin:6px 0; }