:root{
    --navy-1:#006671;   /* deeper top gradient */
    --navy-2:#1eaebc;   /* deeper bottom gradient */
    --sky:#1bb1ff;      /* accent closer to slide highlight */
    --ink:#121a2b;      /* text dark */
    --muted:#5f6b81;    /* secondary text */
    --paper:#ffffff;    /* cards */
    --canvas:#f2f5f9;   /* page bg */
    --ring:#e2e9f2;     /* borders */
    --muted:#b9c2da;
    --line:rgba(255,255,255,.10);
    --bg:#0b1220;
    --card:#0f1a2e;
    --text:#0f1a2e;
    --muted:#b9c2da;
    --line:rgba(255,255,255,.10);
    --brand:#3aa0ff;
    --brand2:#22c55e;
    --danger:#ef4444;
    --shadow:0 12px 30px rgba(0,0,0,.35);
    --radius:18px;
    --max:1040px;
}
/* Header */
.hero{
    margin-top: 100px;
    background: linear-gradient(155deg, var(--navy-1), var(--navy-2));
    color:#fff; padding:42px 16px 56px; text-align:center; position:relative; overflow:hidden
}
*{box-sizing:border-box}

.cta-small{
    text-decoration:none;
    padding:9px 12px;
    border-radius:12px;
    background:rgba(58,160,255,.12);
    border:1px solid rgba(58,160,255,.35);
    color:var(--text);
    font-weight:700;
    font-size:14px;
    white-space:nowrap;
}
.cta-small:hover{background:rgba(58,160,255,.18)}

/* Layout */
.wrap{max-width:var(--max);margin:0 auto;padding:28px 18px 70px}

.card{
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.hero-main{padding:26px}
.kicker{
    display:inline-flex;gap:8px;align-items:center;
    padding:6px 10px;border-radius:999px;
    border:1px solid rgba(58,160,255,.35);
    background:rgba(58,160,255,.10);
    color:var(--text);
    font-size:13px;
    font-weight:700;
}
.kicker span{
    width:8px;height:8px;border-radius:99px;background:var(--brand);
    box-shadow:0 0 0 4px rgba(58,160,255,.18);
}
h1{margin:12px 0 10px;font-size:36px;line-height:1.18;letter-spacing:-.5px}
@media (max-width: 520px){ h1{font-size:30px} }
.sub{color:var(--muted);max-width:62ch;margin:0 0 16px}
.meta{
    display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
    color:var(--paper);font-size:14px;
    margin-top:20px
}
.meta .chip{
    display:inline-flex;gap:8px;align-items:center;
    padding:7px 10px;border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.03);
}
.aside{padding:18px}
.aside h3{margin:4px 0 10px;font-size:16px}
.toc{
    list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:8px;
    font-size:14px;color:var(--muted);
}
.toc a{
    text-decoration:none;
    display:block;
    padding:10px 10px;
    border-radius:12px;
    border:1px solid transparent;
    background:rgba(255,255,255,.02);
}
.toc a:hover{border-color:var(--line);color:var(--text)}
.note{
    margin-top:14px;
    padding:12px;
    border-radius:14px;
    border:1px solid rgba(34,197,94,.35);
    background:rgba(34,197,94,.08);
    color:var(--text);
    font-size:14px;
}

/* Article */
main.article{
    margin-top:18px;
    display:grid;
    grid-template-columns: 1fr;
    gap:18px;
}
.content{padding:26px}
.content h2{margin:26px 0 10px;font-size:22px}
.content h3{margin:18px 0 8px;font-size:18px}
.content p{margin:0 0 14px;color:var(--text)}
.content ul{margin:0 0 14px;padding-left:20px;list-style-type:disc;}
.content li{margin:6px 0;color:var(--text)}
.content .muted{color:var(--muted)}
.callout{
    margin:18px 0;
    padding:16px 16px;
    border-radius:16px;
    border:1px solid rgba(58,160,255,.35);
    background:rgba(58,160,255,.08);
}
.callout strong{display:block;margin-bottom:6px}
.two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin:16px 0;
}
.grid2{
    display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0;
}
@media (max-width: 700px){ .two-col{grid-template-columns:1fr} }
.mini{
    padding:14px;border-radius:16px;border:1px solid var(--navy-2);
    background:var(--card);
}
.mini h4{margin:0 0 6px;font-size:15px}
.mini p{margin:0;color:var(--paper);font-size:14px}

/* CTA */
.cta{
    padding:22px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    background: var(--card);
}
@media (max-width: 720px){ .cta{flex-direction:column;align-items:stretch} }
.cta h3{margin:0 0 6px;font-size:18px}
.cta p{margin:0;color:var(--paper);max-width:70ch}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:12px 14px;border-radius:14px;
    border:1px solid transparent;
    text-decoration:none;
    font-weight:800;
    font-size:14px;
    cursor:pointer;
    white-space:nowrap;
}
.btn.primary{
    background: linear-gradient(135deg, #05abba, #0fc0d3);
    cursor: pointer;
    /*box-shadow: 0 10px 25px rgb(202 255 254);*/
    box-shadow: 5px 5px rgba(0, 98, 90, 0.4), 10px 10px rgba(0, 98, 90, 0.3), 15px 15px rgba(0, 98, 90, 0.2), 20px 20px rgba(0, 98, 90, 0.1), 25px 25px rgba(0, 98, 90, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    color:#ffffff;
}
.btn.primary:hover{filter:brightness(1.05)}
.btn.secondary{
    background:rgba(255,255,255,.04);
    border-color:var(--line);
    color:var(--text);
}
.btn.secondary:hover{border-color:rgba(255,255,255,.22)}
.related{
    padding:22px;
}
.related h3{margin:0 0 10px;font-size:18px}
.rel-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
}
@media (max-width: 920px){ .rel-grid{grid-template-columns:1fr} }
.rel{
    display:block;
    padding:14px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    text-decoration:none;
}
.rel:hover{border-color:rgba(255,255,255,.22)}
.rel .t{font-weight:800;margin-bottom:6px}
.rel .d{color:var(--muted);font-size:14px}

.brand{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:6px}
.title{color:#ffffff !important; font-size:28px;font-weight:700;margin:8px 0 4px; letter-spacing:.2px}
.subtitle{opacity:.9; font-size:15px}
/* Container & Card */
.wrap{max-width:980px;margin:20px auto 60px;padding:0 14px}
.privacy-card{background:var(--paper); border:1px solid var(--ring); border-radius:14px; box-shadow:0 10px 30px rgba(10,30,60,.06); padding:28px}
/* TOC */
.toc{display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin:18px 0 8px}
.toc a{display:block; padding:12px 14px; border:1px solid var(--ring); border-radius:10px; background:#fff; box-shadow:0 4px 12px rgba(10,30,60,.04)}
.toc a b{color:var(--navy-2)}
/* Headings & accents */
h3{margin:24px 0 8px; font-size:18px; color:var(--navy-2)}
.eyebrow{display:inline-block; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:#0f3b5f; background:#e6f4ff; border:1px solid #cfe6ff; padding:2px 8px; border-radius:999px; margin-bottom:8px}
hr{border:0; border-top:1px solid var(--ring); margin:26px 0}
/* Tables */
table{width:100%; border-collapse:collapse; margin:10px 0 18px}
th,td{border:1px solid var(--ring); padding:10px 12px; vertical-align:top}
th{background:#f7faff;color:#0e2d55}
/* Badge list */
.badges{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0; justify-content:center}
.badge{font-size:12px; border:1px solid #63c6ff33; color:#e8f6ff; padding:4px 8px; border-radius:999px; background:#ffffff14}

.content img {
    max-width: 100%;
    height: auto;
    display: block; /* Images are inline by default; change to block for margin: auto to work */
    margin: 0 auto; /* Sets top/bottom margin to 0, and left/right margin to auto */
}