@import url("./assets/typography.css");

:root{
  --bg:#f5f7fb; --panel:#ffffff; --muted:#94a3b8; --text:#0f172a; --line:#e2e8f0;
  --accent:#2563eb; --accent-weak:#dbeafe; --accent-strong:#1d4ed8;
  --success:#16a34a; --shadow:0 18px 36px rgba(15,23,42,.08);
  --gold:#facc15; --gold-strong:#eab308; --gold-bg:#fff8db;
  --cc-bg:#0f172a; --cc-fg:#ffffff; --cc-muted:#dbeafe; --cc-card:#ffffff; --cc-text:#0f172a;
  --cc-line:#e2e8f0; --cc-shadow:0 10px 30px rgba(15,23,42,.22); --cc-radius:14px;
  --sidebar-width:clamp(14rem, 20vw, 18rem);
  --topbar-h:clamp(3.2rem, 7vw, 4.6rem);
  
  
  
  
  
  
  
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-base);
  color:var(--text); background:var(--bg);
}
select,
option,
optgroup{
  font-family:var(--font-base);
}
h1,h2,h3,h4{
  margin:0 0 8px;
  line-height:1.3;
  letter-spacing:.01em;
  color:var(--text);
}
h1{}
h2{}
h3{}
h4{}
.shell{display:grid; grid-template-columns:minmax(0, 1fr); min-height:100dvh}
.shell > div,
.shell-main{
  min-width:0;
}
.side{
  position:fixed; top:0; bottom:0; left:0;
  height:100dvh; background:#ffffff; backdrop-filter:saturate(180%) blur(10px);
  border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:16px 12px;
  width:min(85vw, var(--sidebar-width)); overflow:auto;
  transform:translateX(-105%);
  transition:transform .2s ease;
  z-index:1000;
}
.nav-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  opacity:0;
  pointer-events:none;
  transition:.2s ease opacity;
  z-index:900;
}
body.nav-open{ overflow:hidden; }
body.nav-open .side{ transform:translateX(0); }
body.nav-open .nav-backdrop{
  opacity:1;
  pointer-events:auto;
}
.brand{display:flex; align-items:center; justify-content:center; padding:8px 10px; width:100%; text-decoration:none;}
.brand img{width:clamp(8rem, 18vw, 11rem); height:auto; object-fit:contain}
.nav{display:flex; flex-direction:column; gap:8px; width:100%; margin-top:8px}
.nav a{
  --bg1:#fff; --bg2:#f9fbff;
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--text);
  padding:12px 14px; border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  box-shadow:0 1px 0 rgba(15,23,42,.03);
  transition:.18s ease transform, .18s ease box-shadow, .18s ease border-color, .18s ease background;
}
.nav a:hover{
  transform:translateY(-1px);
  border-color:#bfd7ff;
  background:linear-gradient(180deg,#ffffff,#eef5ff);
  box-shadow:0 6px 14px rgba(37,99,235,.12);
}
.nav a.active{
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
  color:#fff; border-color:transparent;
  box-shadow:0 10px 20px rgba(37,99,235,.25);
}
.nav a svg{width:1.375rem; height:1.375rem; flex:0 0 1.375rem; opacity:.9;}
.nav a span{
  flex:1;
  font-weight:600;
  letter-spacing:.01em;
}
.nav a.active svg{ opacity:1; filter:brightness(10) }
.nav a.nav-separator{
  margin-top:18px;
  position:relative;
}
.nav a.nav-separator::before{
  content:"";
  position:absolute;
  top:-10px;
  left:14px;
  right:14px;
  height:1px;
  background:var(--line);
}
.nav a.secure{
  background:linear-gradient(180deg,var(--gold-bg),#fffef4);
  border-color:#fde68a;
  color:#854d0e;
  font-weight:600;
}
.nav a.secure:hover{
  background:linear-gradient(180deg,#fff5b1,#fffef4);
  box-shadow:0 6px 14px rgba(250,204,21,.25);
  border-color:var(--gold);
  transform:translateY(-1px);
}
.nav a.secure.active{
  background:linear-gradient(180deg,var(--gold),var(--gold-strong));
  color:#fff;
  border:none;
  box-shadow:0 10px 22px rgba(250,204,21,.35);
}
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(2.4rem, 3vw, 2.8rem);
  height:clamp(2.4rem, 3vw, 2.8rem);
  border:1px solid var(--line);
  border-radius:0.75rem;
  background:#fff;
  cursor:pointer;
}
.nav-toggle .bar{
  width:1.35rem;
  height:2px;
  background:var(--text);
  display:block;
  position:relative;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:var(--text);
}
.nav-toggle .bar::before{ top:-6px; }
.nav-toggle .bar::after{ top:6px; }
.nav-toggle:focus-visible{
  outline:3px solid rgba(37,99,235,.25);
  outline-offset:2px;
}
.section-header{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 18px;
}
.section-header h2{
  margin:0;
  
  letter-spacing:.01em;
}
.section-header .section-lead{
  margin:0;
  color:var(--muted);
  
  line-height:1.6;
}
.card.section-header{
  padding:20px;
  gap:8px;
}
.topbar{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding:clamp(0.9rem, 2vw, 1.4rem); border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:50;
}
.topbar-left h1{ margin:0;  letter-spacing:.01em }
.topbar-left p{ margin:6px 0 0; color:var(--muted); }
.product-logo{
  height:clamp(2.4rem, 3vw, 3rem);
  width:auto;
  object-fit:contain;
  flex-shrink:0;
}
main{
  padding:clamp(0.9rem, 2.2vw, 1.6rem);
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%;
  margin:0 0 40px;
}
.card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--shadow) }
.page-frame{
  padding:0;
  overflow:hidden;
}
.page-frame__body{
  padding:14px;
}
.hero{
  grid-column:1/-1; display:grid; gap:14px; text-align:center; justify-items:center; padding:clamp(1.2rem, 2.8vw, 2rem);
  background:linear-gradient(145deg, rgba(37,99,235,0.16), rgba(255,255,255,0.95)); border:1px solid rgba(37,99,235,0.2);
  max-width:min(80rem, 100%); width:100%; margin:0 auto;
}
.hero h2{ margin:0;  max-width:38rem; color:#1f2937 }
.hero .cta{
  display:inline-flex; align-items:center; gap:10px; padding:12px 24px; border-radius:999px;
  background:var(--accent); color:#fff; text-decoration:none; font-weight:600; transition:.18s ease all;
}
.hero .cta:hover{ background:var(--accent-strong); transform:translateY(-1px) }
.hero .cta svg{ width:1.125rem; height:1.125rem }
footer{ padding:clamp(0.8rem, 2vw, 1.5rem); color:var(--muted); text-align:right }

/* PPUG-derived layout primitives (shared across pages) */
.ppug-layout{
  width:100%;
  display:block;
}
.ppug-layout .ppug-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
  padding:12px;
}
.ppug-layout .ppug-card{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  gap:18px;
  background:var(--panel,#fff);
  border:1px solid var(--line,#e2e8f0);
  border-radius:18px;
  padding:22px;
  box-shadow:0 18px 32px rgba(15,23,42,.06);
}
.ppug-layout .row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
  align-items:end;
}
.ppug-layout .field{
  display:flex;
  flex-direction:column;
  gap:6px;
  
  color:#475569;
}
.ppug-layout .span-3{grid-column:span 3;}
.ppug-layout .span-4{grid-column:span 4;}
.ppug-layout .span-6{grid-column:span 6;}
.ppug-layout .span-8{grid-column:span 8;}
.ppug-layout .span-9{grid-column:span 9;}
.ppug-layout input,
.ppug-layout select,
.ppug-layout textarea,
.ppug-layout output{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line,#e2e8f0);
  background:#fff;
  font:inherit;
  color:inherit;
}
.ppug-layout input:focus,
.ppug-layout select:focus,
.ppug-layout textarea:focus{
  outline:none;
  border-color:var(--accent,#2563eb);
  box-shadow:0 0 0 3px rgba(37,99,235,.18);
}
.ppug-layout output{
  display:inline-flex;
  align-items:center;
  min-height:42px;
}
.ppug-layout .btn{
  appearance:none;
  border:1px solid var(--line,#e2e8f0);
  border-radius:12px;
  padding:10px 14px;
  font-weight:600;
  cursor:pointer;
  background:#fff;
  color:#0f172a;
  transition:.18s ease all;
}
.ppug-layout .btn:hover{
  border-color:var(--accent,#2563eb);
}
.ppug-layout .btn.primary{
  background:var(--accent,#2563eb);
  border-color:var(--accent,#2563eb);
  color:#fff;
}
.ppug-layout .btn.primary:hover{
  filter:brightness(1.05);
}
.ppug-layout .btn.ghost{
  background:transparent;
}
.ppug-layout .table-wrap{
  overflow:auto;
  border:1px solid var(--line,#e2e8f0);
  border-radius:12px;
  background:#fff;
}
.ppug-layout table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}
.ppug-layout th,
.ppug-layout td{
  padding:10px 12px;
  border-bottom:1px solid var(--line,#e2e8f0);
  text-align:left;
}
.ppug-layout thead th{
  background:#f8fafc;
  font-weight:600;
}
.ppug-layout .kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(clamp(10rem, 20vw, 12rem), 1fr));
  gap:12px;
}
.ppug-layout .kpi-tile{
  border:1px solid var(--line,#e2e8f0);
  border-radius:14px;
  padding:16px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ppug-layout .muted{
  color:var(--muted,#64748b);
}
.ppug-layout .note{
  margin:0;
}
@media (max-width: 960px){
  .ppug-layout .ppug-grid{
    grid-template-columns:1fr;
  }
  .ppug-layout .row{
    grid-template-columns:1fr;
  }
  .ppug-layout .span-3,
  .ppug-layout .span-4,
  .ppug-layout .span-6,
  .ppug-layout .span-8,
  .ppug-layout .span-9{
    grid-column:1/-1;
  }
}

.donate-badge{
  position:fixed;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  z-index:999;
  min-width:clamp(7.5rem, 12vw, 9.5rem);
  height:clamp(3.2rem, 4.2vw, 3.8rem);
  padding:0.4rem 0.85rem 0.4rem 0.6rem;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#0f172a;
  color:#facc15;
  font-weight:600;
  
  line-height:1.1;
  text-align:left;
  letter-spacing:0.02em;
  text-decoration:none;
  border:2px solid #facc15;
  box-shadow:0 12px 24px rgba(15,23,42,.22);
}
.donate-badge .donate-icon{
  width:clamp(2.1rem, 3vw, 2.5rem);
  height:clamp(2.1rem, 3vw, 2.5rem);
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(250,204,21,.12);
  border:1px solid rgba(250,204,21,.7);
  flex:0 0 clamp(2.1rem, 3vw, 2.5rem);
}
.donate-badge .donate-icon svg{
  width:1.35rem;
  height:1.35rem;
  stroke:currentColor;
  fill:none;
}
.donate-badge .donate-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.donate-badge .donate-label{
  
  font-weight:700;
}
.donate-badge .donate-sub{
  
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.donate-badge:hover{
  background:#111827;
  color:#fde047;
  box-shadow:0 14px 28px rgba(15,23,42,.28);
}
.donate-badge:focus-visible{
  outline:3px solid #facc15;
  outline-offset:3px;
}

/* Layout helpers */
.columns{
  display:flex;
  gap:1rem;
}

@media (max-width:768px){
  .donate-badge{
    position:fixed;
    right:12px;
    bottom:12px;
    top:auto;
    transform:none;
    margin:0;
    width:auto;
    max-width:calc(100% - 24px);
    min-width:7.5rem;
    height:3.2rem;
    padding:6px 12px 6px 8px;
    
  }
  .donate-badge .donate-icon{
    width:clamp(1.9rem, 4vw, 2.2rem);
    height:clamp(1.9rem, 4vw, 2.2rem);
    flex-basis:clamp(1.9rem, 4vw, 2.2rem);
  }
  .donate-badge .donate-icon svg{
    width:1.1rem;
    height:1.1rem;
  }
  .donate-badge .donate-sub{
    
  }

  .columns{
    flex-direction:column;
  }

  .navbar a{
    display:block;
    padding:0.5rem 0;
  }

}

/* Responsive */
@media (min-width: 960px){
  .shell{ grid-template-columns:var(--sidebar-width) minmax(0, 1fr); }
  .side{
    grid-column:1;
    grid-row:1;
    position:sticky;
    top:0;
    left:auto;
    bottom:auto;
    transform:none;
    width:var(--sidebar-width);
    background:#ffffffcc;
  }
  .shell-main{
    grid-column:2/-1;
    grid-row:1;
  }
  .nav-backdrop{
    grid-column:1/-1;
    grid-row:1;
  }
  .nav-backdrop{ display:none; }
  .nav-toggle{ display:none; }
}
@media (max-width: 960px){
  .topbar{
    position:sticky;
    top:0;
    z-index:10;
    gap:10px;
    background:#fff;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:clamp(0.45rem, 1.6vw, 0.75rem);
  }
  .topbar-left h1{
    font-size:var(--font-size-h3);
    line-height:1.15;
  }
  .topbar-left p{ display:none; }
  main{
    grid-template-columns:1fr;
    padding:clamp(0.7rem, 2vw, 1.2rem);
    margin:0 0 32px;
    width:100%;
  }
  .product-logo{ height:clamp(1.9rem, 4.5vw, 2.4rem); }
  .hero{ padding:clamp(1rem, 3vw, 1.4rem); }
  .page-frame__body{ padding:12px; }

  .side{
    top:var(--topbar-h);
    left:0;
    right:0;
    bottom:auto;
    height:auto;
    max-height:calc(100dvh - var(--topbar-h));
    width:100%;
    border-right:none;
    border-bottom:1px solid var(--line);
    border-radius:0 0 16px 16px;
    transform:translateY(-120%);
    box-shadow:0 18px 36px rgba(15,23,42,.18);
    opacity:0;
    pointer-events:none;
  }
  body.nav-open .side{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .nav{ margin-top:0; }
  .nav-backdrop{
    inset:var(--topbar-h) 0 0 0;
  }
}

@media (max-width:768px){
  main{
    padding-bottom:calc(clamp(0.7rem, 2vw, 1.2rem) + 4.5rem);
  }
}

/* Cookie consent */
.cc-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  z-index:9998;
}
.cc-banner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  background:var(--cc-bg);
  color:var(--cc-fg);
  border-radius:var(--cc-radius);
  box-shadow:var(--cc-shadow);
  z-index:9999;
  display:none;
}
.cc-inner{
  max-width:min(70rem, 100%);
  margin:0 auto;
  padding:16px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.cc-text{ flex:1; min-width:16rem; }
.cc-text h2{ margin:0 0 8px;  }
.cc-text p{ margin:0; line-height:1.35; color:var(--cc-muted); }
.cc-text a{ color:#fff; text-decoration:underline; }
.cc-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.cc-btn{
  border:0;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  
}
.cc-btn-primary{
  background:#fff;
  color:var(--cc-bg);
}
.cc-btn-secondary{
  background:transparent;
  color:#fff;
  border:2px solid rgba(255,255,255,.55);
}
.cc-btn-secondary:hover{ border-color:rgba(255,255,255,.9); }
.cc-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:10000;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.cc-modal-card{
  width:min(40rem, 100%);
  background:var(--cc-card);
  color:var(--cc-text);
  border-radius:var(--cc-radius);
  box-shadow:var(--cc-shadow);
  border:1px solid var(--cc-line);
  overflow:hidden;
}
.cc-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--cc-line);
}
.cc-modal-head h3{ margin:0;  }
.cc-icon-btn{
  border:0;
  background:transparent;
  cursor:pointer;
  
  padding:6px 10px;
  border-radius:10px;
}
.cc-icon-btn:hover{ background:#f1f5f9; }
.cc-modal-body{ padding:14px 16px; }
.cc-muted{ color:#5a6b76;  margin:0 0 12px; }
.cc-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid var(--cc-line);
  border-radius:12px;
  margin:10px 0;
  background:#f8fafc;
}
.cc-details{
  margin-top:10px;
  border:1px solid var(--cc-line);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.cc-details summary{ cursor:pointer; font-weight:700; }
.cc-modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:14px 16px;
  border-top:1px solid var(--cc-line);
  background:#f8fafc;
  flex-wrap:wrap;
}
.cc-switch{ position:relative; display:inline-block; width:2.875rem; height:1.625rem; }
.cc-switch input{ opacity:0; width:0; height:0; }
.cc-slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background:#cbd5e1;
  transition:.2s;
  border-radius:999px;
}
.cc-slider:before{
  position:absolute;
  content:"";
  height:1.25rem;
  width:1.25rem;
  left:3px;
  top:3px;
  background:white;
  transition:.2s;
  border-radius:999px;
}
.cc-switch input:checked + .cc-slider{ background:var(--cc-bg); }
.cc-switch input:checked + .cc-slider:before{ transform:translateX(20px); }
.cc-link-btn{
  position:fixed;
  right:16px;
  bottom:16px;
  transform:translateY(86px);
  z-index:9997;
  border:1px solid var(--cc-line);
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
@media (max-width: 720px){
  .cc-actions{ width:100%; justify-content:stretch; }
  .cc-btn{ flex:1; }
}