/* Brand palette — taken from the Lottery Display logo */
:root{
  --navy:#070044; --navy2:#021768; --sky:#73CFF2; --blue:#22A6F9; --purple:#995DE3;
  --bg:#f5f7fd; --surface:#ffffff; --panel:#ffffff; --panel-b:#e2e7f5; --tint:#eef4ff;
  --text:#070044; --muted:#5b6290; --brand:#22A6F9; --brand-d:#1288d6;
  --grad:linear-gradient(120deg,#73CFF2 0%,#22A6F9 45%,#995DE3 100%);
  --grad-btn:linear-gradient(120deg,#22A6F9,#995DE3);
  --shadow:0 1px 2px rgba(7,0,68,.04),0 10px 30px -12px rgba(7,0,68,.14);
  --radius:18px; --font:'Inter',system-ui,sans-serif; --display:'Plus Jakarta Sans','Inter',sans-serif;
}








*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
b,strong{font-weight:600}
.container{width:min(1200px,100% - 32px);margin-inline:auto}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* NAV */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:.35s}
.nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--panel-b);box-shadow:0 6px 24px -16px rgba(7,0,68,.25)}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700}
.logo img{height:36px;width:auto}
.logo span{font-size:12.5px;padding:3px 10px;border-radius:99px;background:var(--tint);color:var(--navy2);border:1px solid #cfe0fb;font-weight:600}
.nav-links{display:flex;gap:28px;align-items:center;font-size:14.5px;color:var(--muted);font-weight:500}
.nav-links a:hover{color:var(--navy)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:12px;font-weight:600;font-size:14.5px;transition:transform .25s,box-shadow .25s,background .25s;cursor:pointer;border:0;font-family:inherit}
.btn-primary{background:var(--grad-btn);color:#fff!important;box-shadow:0 8px 24px -8px rgba(34,166,249,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(153,93,227,.6)}
.btn-ghost{background:var(--surface);border:1px solid var(--panel-b);color:var(--navy)}
.btn-ghost:hover{border-color:var(--blue);color:var(--brand-d)}
.burger{display:none;position:relative;width:44px;height:44px;border-radius:12px;border:1px solid var(--panel-b);background:var(--surface);cursor:pointer;box-shadow:var(--shadow);transition:background .3s,border-color .3s}
.burger span{position:absolute;left:12px;width:18px;height:2px;border-radius:2px;background:var(--navy);transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .25s,top .4s cubic-bezier(.2,.8,.2,1)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger.open{background:var(--navy);border-color:var(--navy)}
.burger.open span{background:#fff;top:21px}
.burger.open span:nth-child(1){transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.open span:nth-child(3){transform:rotate(-45deg)}

.article-card .a-in img.emoji {
	display:none !important;
}


.navrightwrap {
	display: flex;
    column-gap: 20px;
}
.vc_btn3.vc_btn3-size-md {
    font-size: 14px;
    background-color: transparent !important;
    border-color: transparent;
    padding: 5px 0;
}
.article-card h1.a-in {
	margin-bottom: 20px;
}

.singalherowrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.singalherowrap .singalcontent {
	width: 50%;
}
.singalherowrap .singalform {
	width: 30%;
}


/* HERO */

.hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    overflow: hidden;
    background: linear-gradient(180deg, #eaf3ff 0%, var(--bg) 100%);
}
.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 160px;
    background: linear-gradient(transparent, var(--bg));
    z-index: 1;
}
.hero .container {
    position: relative;
    z-index: 2;
}
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    animation: drift 18s ease-in-out infinite alternate;
}
.b1 {
    width: 520px;
    height: 520px;
    background: var(--sky);
    top: -160px;
    left: -140px;
    opacity: 0.45;
}
.b2 {
    width: 480px;
    height: 480px;
    background: var(--purple);
    bottom: -140px;
    right: 2%;
    opacity: 0.28;
    animation-duration: 22s;
}
.b3 {
    width: 360px;
    height: 360px;
    background: var(--blue);
    top: 20%;
    right: 28%;
    opacity: 0.22;
    animation-duration: 26s;
}
@keyframes drift {
    to {
        transform: translate(80px, 60px) scale(1.15);
    }
}
.grid-lines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(7, 0, 68, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(7, 0, 68, 0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 60% 40%, #000 15%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 15%, transparent 70%);
}
.hero-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 60px;
    align-items: center;
}
.eyebrow {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 99px;
    background: var(--surface);
    border: 1px solid var(--panel-b);
    color: var(--muted);
    margin-bottom: 26px;
    box-shadow: var(--shadow);
    font-weight: 500;
}
.eyebrow i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}
h1 {
    font-family: var(--display);
    font-size: clamp(40px, 7vw, 84px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    font-weight: 800;
    color: var(--navy);
}
.hero h1 {
    font-size: clamp(40px, 4.8vw, 66px);
}
.hero p.lead {
    max-width: 560px;
    color: var(--muted);
    font-size: clamp(16px, 2vw, 19px);
    margin: 22px 0 34px;
}
.search {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}
.hero-copy .search {
    margin: 0;
}
.search input {
    width: 100%;
    padding: 20px 140px 20px 56px;
    border-radius: 16px;
    border: 1px solid var(--panel-b);
    background: var(--surface);
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: 0.3s;
    box-shadow: 0 18px 40px -20px rgba(7, 0, 68, 0.25);
}
.search input::placeholder {
    color: #9aa0c3;
}
.search input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 5px rgba(34, 166, 249, 0.16);
}
.search svg {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
}
.search .btn {
    position: absolute;
    right: 8px;
    top: 8px;
    bottom: 8px;
}
.search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--panel-b);
    border-radius: 14px;
    padding: 6px;
    text-align: left;
    display: none;
    max-height: 320px;
    overflow: auto;
    z-index: 5;
    box-shadow: 0 24px 50px -20px rgba(7, 0, 68, 0.3);
}
.search-results a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 500;
}
.search-results a small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}
.search-results a:hover {
    background: var(--tint);
}
.popular {
    margin-top: 20px;
    font-size: 13.5px;
    color: var(--muted);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
	align-items: center;
	position: relative;
	z-index: -1;
}
.hero-copy .popular {
    justify-content: flex-start;
}
.popular a {
    padding: 5px 12px;
    border-radius: 99px;
    border: 1px solid var(--panel-b);
    background: var(--panel);
    transition: 0.2s;
    color: var(--navy2);
}
.popular a:hover {
    border-color: var(--blue);
    color: var(--brand-d);
}

/* Photo showcase */
.showcase {
    position: relative;
    height: 460px;
}
.shot-card {
    position: absolute;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    cursor: zoom-in;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--panel-b);
    box-shadow: 0 30px 60px -24px rgba(7, 0, 68, 0.45);
    transition: box-shadow 0.4s;
}
.shot-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.shot-card:hover {
    box-shadow:
        0 40px 80px -24px rgba(34, 166, 249, 0.55),
        0 0 0 2px var(--blue);
    z-index: 5;
}
.shot-card:hover img {
    transform: scale(1.06);
}
.shot-card figcaption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    font-size: 13px;
    color: var(--navy);
}
.shot-card figcaption span {
    font-size: 11.5px;
    color: #fff;
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--grad-btn);
    font-weight: 600;
}
.s1 {
    width: 90%;
    aspect-ratio: 1162/548;
    top: 9%;
    right: 0;
    z-index: 3;
}
.s2 {
    width: 62%;
    aspect-ratio: 1046/571;
    bottom: 9%;
    left: 0;
    z-index: 2;
}
.s3 {
    width: 56%;
    aspect-ratio: 1046/571;
    bottom: 2%;
    right: 2%;
    z-index: 4;
}
.float-chip {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 500;
    background: var(--surface);
    border: 1px solid var(--panel-b);
    box-shadow: 0 16px 36px -14px rgba(7, 0, 68, 0.35);
    color: var(--navy);
}
.float-chip i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}
.c1 {
    top: 15%;
    left: 2%;
}
.c2 {
    top: 52%;
    left: -6%;
}


/* SECTIONS */
section{padding:110px 0}
.section-head{text-align:center;max-width:640px;margin:0 auto 60px}
.section-head .tag{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);font-weight:700}
h2{font-family:var(--display);font-size:clamp(30px,4.4vw,50px);letter-spacing:-.03em;line-height:1.1;margin:12px 0 14px;color:var(--navy)}
.section-head p{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{position:relative;padding:30px 26px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--panel-b);overflow:hidden;box-shadow:var(--shadow);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(115,207,242,.22),transparent 45%);opacity:0;transition:.3s}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.card:hover{transform:translateY(-6px);border-color:#c9dcfb;box-shadow:0 30px 60px -28px rgba(7,0,68,.35)}
.card:hover::before{opacity:1}
.card:hover::after{transform:scaleX(1)}
.card .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;background:linear-gradient(135deg,#e3f5fd,#efe6fb);border:1px solid var(--panel-b);font-size:24px}
.card h3{font-family:var(--display);font-size:20px;margin-bottom:8px;position:relative;color:var(--navy)}
.card p{color:var(--muted);font-size:14.5px;margin-bottom:22px;position:relative}
.card .more{font-weight:600;font-size:14px;color:var(--brand-d);display:inline-flex;gap:6px;position:relative;transition:gap .25s}
.card:hover .more{gap:10px}

.topics{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;
}
.topics .iconwrap {
    width: 40px;
    position: relative;
    top: 5px;
}
.topics .iconwrap img {
	width: 100% !important;
	height: 100% !important;
}
.topics .iconContentwrap {
	width: 250px;
	line-height: 20px;
}
.topics .n.iconContentwrap {
	width: auto;
}
.topic{display:flex;gap:16px;align-items:start;padding:20px;border-radius:16px;background:var(--surface);border:1px solid var(--panel-b);box-shadow:var(--shadow);transition:.3s}
.topic:hover{border-color:var(--blue);transform:translateY(-3px)}
.topic b{font-family:var(--display);display:block;color:var(--navy); margin-bottom: 8px;}
.topic small{color:var(--muted); line-height: 1.3;}
.topic .n{margin-left:auto;font-size:12px;color:var(--navy2);padding:3px 10px;border-radius:99px;background:var(--tint);font-weight:600;
	position: absolute;
    right: 20px;
    top: 15px;
}

.cta{position:relative;border-radius:28px;padding:70px 40px;text-align:center;overflow:hidden;background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);color:#fff}
.cta::before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(115,207,242,.45),transparent 65%);top:-250px;left:-120px}
.cta::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(153,93,227,.5),transparent 65%);bottom:-220px;right:-100px}
.cta>*{position:relative;z-index:1}
.cta h2{color:#fff}
.cta p{color:#c4c9ec;max-width:520px;margin:0 auto 28px}
.subscribe{display:flex;gap:10px;max-width:460px;margin:0 auto}
.subscribe input{flex:1;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;font-family:inherit;font-size:15px;outline:none}
.subscribe input::placeholder{color:#aab0dd}
.subscribe input:focus{border-color:var(--sky)}

/* FOOTER */
footer{border-top:1px solid var(--panel-b);padding:70px 0 30px;margin-top:40px;background:var(--surface)}
.foot{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:30px}
.foot h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:16px}
.foot a{display:block;font-size:14.5px;padding:4px 0;color:var(--muted)}
.foot a:hover{color:var(--brand-d)}
.foot p{color:var(--muted);font-size:14px;margin-top:14px;max-width:260px}
.copy{display:flex;justify-content:space-between;margin-top:50px;padding-top:24px;border-top:1px solid var(--panel-b);color:var(--muted);font-size:13px;flex-wrap:wrap;gap:10px}
.copy a:hover{color:var(--brand-d)}

.reveal{opacity:0;transform:translateY(30px)}

/* ===== DOCS ===== */
.doc-hero{padding:130px 0 40px;position:relative;overflow:hidden;background:linear-gradient(180deg,#e8f2ff,var(--bg))}
.doc-hero::before{content:"";position:absolute;width:760px;height:420px;left:55%;top:-170px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(115,207,242,.45),rgba(153,93,227,.18) 45%,transparent 70%);pointer-events:none}
.crumbs{font-size:13.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;position:relative}
.crumbs a:hover{color:var(--brand-d)}
.doc-hero h1{font-size:clamp(32px,5vw,54px);margin:14px 0 10px;position:relative}
.doc-hero p{color:var(--muted);position:relative;max-width:560px}
.doc-hero .search{margin:28px 0 0;max-width:100%}
.doc-hero .search input{padding:15px 18px 15px 50px;font-size:15px}
.doc-hero .search svg{left:18px}

.doc-layout{
	display:grid;
	grid-template-columns:300px minmax(0,1fr) 0px;
	gap:0px;
	padding-bottom:80px;
	align-items:start
}
.sidebar{position:sticky;top:92px;max-height:calc(100vh - 110px);overflow:auto;padding:18px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--panel-b);box-shadow:var(--shadow);scrollbar-width:thin}
.side-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:0 6px}
.side-top b{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.expand-btn{font-size:12.5px;font-weight:600;color:var(--brand-d);background:var(--tint);border:1px solid #cfe0fb;padding:5px 11px;border-radius:8px;cursor:pointer;font-family:inherit}
.expand-btn:hover{background:#e0ecff}
.cat{margin-bottom:2px}
.cat-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:10px;background:none;border:0;color:var(--navy);font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;text-align:left;transition:.2s}
.cat-head:hover{background:var(--bg)}
.cat-head .ci{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,#e3f5fd,#efe6fb);font-size:14px;flex:none}
.cat-head .chev{margin-left:auto;transition:transform .3s;opacity:.6}
.cat.open .cat-head .chev{transform:rotate(90deg)}
.cat-head .count{font-size:11px;color:var(--muted);font-weight:500}
.cat-body{overflow:hidden;height:0}
.cat-body ul{list-style:none;margin:2px 0 8px 23px;border-left:1px solid var(--panel-b);padding-left:6px}
.cat-body a{display:block;padding:7px 12px;font-size:14px;color:var(--muted);border-radius:8px;position:relative;transition:.2s}
.cat-body a:hover{color:var(--navy);background:var(--bg)}
.cat-body a.active{color:var(--navy2);font-weight:600;background:linear-gradient(90deg,rgba(34,166,249,.14),rgba(153,93,227,.05))}
.cat-body a.active::before{content:"";position:absolute;left:-7px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--grad-btn)}
.cat-body .sub{padding-left:12px;font-size:13.5px}
.cat-head.active{background:var(--tint)}

.article{
	padding-left: 30px;
	min-height:60vh
}
.article-card{padding:44px;border-radius:22px;background:var(--surface);border:1px solid var(--panel-b);box-shadow:var(--shadow)}
.meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin:6px 0 28px}
.meta span{display:inline-flex;gap:6px;align-items:center}
.article h1{font-size:clamp(28px,4vw,42px);letter-spacing:-.03em}
.article h2{font-size:24px;margin:36px 0 12px;scroll-margin-top:100px}
.article p{color:#3b416e;margin-bottom:16px;font-size:16px}
.article ol.steps{list-style:none;counter-reset:s;margin:20px 0}
.article ol.steps>li{counter-increment:s;position:relative;padding:0 0 30px 56px;border-left:1px dashed #cdd5ee;margin-left:18px}
.article ol.steps>li:last-child{border-color:transparent}
.article ol.steps>li::before{content:counter(s);position:absolute;left:-19px;top:-4px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;background:var(--grad-btn);box-shadow:0 6px 18px -6px rgba(34,166,249,.8)}
.article ol.steps h3{font-family:var(--display);font-size:17px;margin-bottom:6px;color:var(--navy)}
.shot{margin:16px 0 4px;border-radius:14px;overflow:hidden;border:1px solid var(--panel-b);background:#fff;cursor:zoom-in;transition:transform .35s,box-shadow .35s}
.shot:hover{transform:scale(1.01);box-shadow:0 20px 40px -20px rgba(7,0,68,.35)}
.video-card{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;margin:0 0 28px;cursor:pointer;background:linear-gradient(135deg,var(--navy),var(--navy2));box-shadow:0 30px 60px -30px rgba(7,0,68,.55);scroll-margin-top:100px}
.video-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.video-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,0,68,.15),rgba(7,0,68,.75))}
.video-card:hover img{transform:scale(1.04)}
.video-card .play{position:absolute;left:50%;top:50%;z-index:2;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:0;cursor:pointer;color:#fff;display:grid;place-items:center;background:var(--grad-btn);box-shadow:0 0 0 10px rgba(255,255,255,.18),0 20px 40px -10px rgba(34,166,249,.8);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.video-card .play svg{margin-left:4px}
.video-card .play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.5);animation:pulse 2s ease-out infinite}
@keyframes pulse{from{transform:scale(.9);opacity:1}to{transform:scale(1.5);opacity:0}}
.video-card:hover .play{transform:scale(1.08)}
.video-card .v-info{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:10px;color:#fff;font-size:15px}
.video-card .v-info span{font-size:12.5px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.video-card.playing{cursor:default;background:#000}
.video-card.playing::after{display:none}
.video-card iframe,.video-card video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.has-video{color:#fff;background:var(--grad-btn);padding:2px 10px;border-radius:99px;font-weight:600}
.vid-dot{font-size:9px;margin-left:6px;padding:2px 5px;border-radius:5px;color:#fff;background:var(--grad-btn);vertical-align:2px}
.callout{display:flex;gap:14px;padding:18px 20px;border-radius:14px;margin:20px 0;background:#eaf6fe;border:1px solid #bfe5fb;font-size:15px;color:#0b4a73}
.callout.warn{background:#fff8e6;border-color:#fbe0a0;color:#7a5200}
.feedback{margin-top:40px;padding:22px;border-radius:14px;background:var(--bg);border:1px solid var(--panel-b);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.feedback div{display:flex;gap:8px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.pager a{padding:18px 20px;border-radius:14px;border:1px solid var(--panel-b);background:var(--surface);transition:.25s;font-weight:600;color:var(--navy)}
.pager a:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow)}
.pager small{color:var(--muted);display:block;font-size:12px;font-weight:400}
.pager .next{text-align:right}
.related{margin-top:22px}
.related h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.related .rl{display:flex;flex-wrap:wrap;gap:8px}
.related a{font-size:14px;padding:7px 13px;border-radius:99px;border:1px solid var(--panel-b);background:var(--surface)}
.related a:hover{border-color:var(--blue);color:var(--brand-d)}
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
.cat-grid a{padding:18px;border-radius:14px;border:1px solid var(--panel-b);background:var(--bg);transition:.25s;display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:500}
.cat-grid a:hover{border-color:var(--blue);background:var(--tint);color:var(--navy2)}

.toc{position:sticky;top:92px;font-size:13.5px}
.toc h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc a{display:block;padding:6px 0 6px 14px;color:var(--muted);border-left:2px solid var(--panel-b);transition:.2s}
.toc a.on,.toc a:hover{color:var(--navy);border-color:var(--blue)}
.toc .help{margin-top:26px;padding:18px;border-radius:14px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff}
.toc .help p{color:#c4c9ec;font-size:13px;margin:6px 0 12px}

.side-toggle,.scrim{display:none}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--grad);width:0;z-index:60}
.lightbox{position:fixed;inset:0;background:rgba(7,0,68,.82);backdrop-filter:blur(6px);display:none;place-items:center;z-index:100;padding:24px;cursor:zoom-out}
.lightbox img{max-height:90vh;border-radius:12px}

/* MODAL */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-scrim{position:absolute;inset:0;background:rgba(7,0,68,.55);backdrop-filter:blur(8px)}
.modal-box{position:relative;width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:24px;padding:36px;background:var(--surface);box-shadow:0 40px 120px -20px rgba(7,0,68,.55)}
.modal-box::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.modal-box.wide{width:min(1000px,100%);padding:0;overflow:hidden}
.modal-box.wide .modal-body{display:grid;grid-template-columns:1.6fr 1fr}
.modal-box.wide img{width:100%;height:100%;object-fit:cover;min-height:320px}
.modal-box.wide .mtext{padding:36px 30px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.modal-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:12px;border:1px solid var(--panel-b);background:var(--surface);color:var(--navy);font-size:20px;cursor:pointer;z-index:2;transition:.2s}
.modal-x:hover{background:var(--navy);color:#fff;transform:rotate(90deg)}
.modal h3{font-family:var(--display);font-size:26px;letter-spacing:-.02em;margin-bottom:6px;color:var(--navy)}
.modal .sub{color:var(--muted);font-size:15px;margin-bottom:24px}
.mform{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mform label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--navy2);font-weight:600}
.mform .full{grid-column:1/-1}
.mform input,.mform select,.mform textarea{padding:13px 14px;border-radius:12px;border:1px solid var(--panel-b);background:var(--bg);color:var(--text);font:inherit;font-size:15px;outline:none;transition:.2s}
.mform textarea{min-height:110px;resize:vertical}
.mform input:focus,.mform select:focus,.mform textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(34,166,249,.16)}
.mform .btn{justify-content:center;padding:14px}
.m-success{text-align:center;padding:20px 0}
.m-success .tick{width:72px;height:72px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;font-size:32px;color:#fff;background:var(--grad-btn)}
body.modal-lock{overflow:hidden}

/* RESPONSIVE */
@media (max-width:1100px){
  .doc-layout{grid-template-columns:270px minmax(0,1fr)}
  .toc{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:repeat(3,1fr)}
  .foot>div:first-child{grid-column:1/-1}
}
@media (max-width:1000px){
  .hero-split{grid-template-columns:1fr;gap:50px;text-align:center}
  .hero p.lead{margin-inline:auto}
  .hero-copy .search{margin:0 auto}
  .hero-copy .popular{justify-content:center}
  .showcase{height:auto;aspect-ratio:1.25;max-width:640px;width:100%;margin:0 auto}
  .c2{left:0}
}
@media (max-width:860px){
  .nav-links{display:none;position:absolute;top:72px;left:16px;right:16px;flex-direction:column;align-items:stretch;gap:4px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--panel-b);box-shadow:0 24px 50px -20px rgba(7,0,68,.35)}
  .nav-links.open{display:flex}
  .nav-links a{padding:10px}
  .burger{display:block}
  .topics{grid-template-columns:1fr 1fr}
  .doc-layout{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(330px,86vw);max-height:none;border-radius:0 18px 18px 0;z-index:70;transform:translateX(-105%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .sidebar.open{transform:none}
  .side-toggle{display:inline-flex;margin-bottom:18px}
  .scrim{position:fixed;inset:0;background:rgba(7,0,68,.45);z-index:65}
  .scrim.on{display:block}
  .article-card{padding:28px 22px}
}
@media (max-width:700px){
  .modal{align-items:flex-end;padding:0}
  .modal-box{width:100%;border-radius:24px 24px 0 0;padding:30px 20px 24px;max-height:92vh}
  .modal-box.wide{overflow:auto}
  .modal-box.wide .modal-body{grid-template-columns:1fr}
  .modal-box.wide img{min-height:0;aspect-ratio:16/9}
  .modal-box.wide .mtext{padding:22px 20px 28px}
  .mform{grid-template-columns:1fr}
  .shot-card figcaption{left:8px;right:8px;bottom:8px;padding:6px 10px;font-size:11.5px}
  .shot-card figcaption span{display:none}
  .float-chip{font-size:12px;padding:7px 11px}
	.singalherowrap { 
		flex-direction: column;
	}
	.singalherowrap .singalcontent {
		width: 100%;
	}
	.singalherowrap .singalform {
		width: 100%;
	}
}
@media (max-width:600px){
  section{padding:80px 0}
  .cards,.topics,.cat-grid,.pager{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .search input{padding:17px 16px 17px 48px}
  .search .btn{display:none}
  .subscribe{flex-direction:column}
  .cta{padding:50px 22px}
  .article ol.steps>li{padding-left:36px}
  .logo img{height:30px}
	.article {
		padding-left:0px;
	}
	.topics .iconContentwrap {
		width: 200px;
	}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}

/* ===== WordPress additions ===== */
.cat-head{text-decoration:none}
.lead-text{font-size:18px;color:var(--muted);margin:10px 0 0}
.admin-bar .nav{top:32px}
@media (max-width:782px){.admin-bar .nav{top:46px}}
.page-body{padding-bottom:80px}
.result-list{display:grid;gap:12px}
.result{display:block;padding:20px 22px;border-radius:16px;background:var(--surface);border:1px solid var(--panel-b);box-shadow:var(--shadow);transition:.25s}
.result:hover{border-color:var(--blue);transform:translateY(-2px)}
.result b{display:block;font-family:var(--display);font-size:18px;color:var(--navy)}
.result small{display:inline-block;margin:4px 0 6px;font-size:12px;color:var(--brand-d);font-weight:600}
.result span{display:block;color:var(--muted);font-size:14.5px}
.m-error{color:#b42318;background:#fef3f2;border:1px solid #fecdca;border-radius:10px;padding:10px 12px;font-size:14px;margin:0}
.btn[disabled]{opacity:.7;pointer-events:none}
.nav-links .menu-item{list-style:none}

/* Gutenberg article content */
.entry-content{margin-top:15px}
.entry-content>*+*{margin-top:16px}
.entry-content h2{font-family:var(--display);font-size:24px;letter-spacing:-.02em;margin:36px 0 12px;scroll-margin-top:100px;color:var(--navy)}
.entry-content h3{font-family:var(--display);font-size:19px;margin:26px 0 8px;color:var(--navy)}
.entry-content p,.entry-content li{color:#3b416e;font-size:16px}
.entry-content a{color:var(--brand-d);text-decoration:underline;text-underline-offset:3px}
.entry-content ul,.entry-content ol{padding-left:22px}
.entry-content li+li{margin-top:6px}
.entry-content figure{margin:20px 0}
.entry-content img{border-radius:14px;border:1px solid var(--panel-b);height:auto}
.entry-content img.zoomable{cursor:zoom-in}
.entry-content figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:8px}
.entry-content .wp-block-embed,.entry-content .wp-block-video{border-radius:16px;overflow:hidden}
.entry-content blockquote{border-left:3px solid var(--blue);padding:6px 0 6px 18px;color:var(--muted)}
.entry-content code{background:var(--tint);padding:2px 6px;border-radius:6px;font-size:.9em}
.entry-content table{width:100%;border-collapse:collapse;font-size:15px}
.entry-content td,.entry-content th{border:1px solid var(--panel-b);padding:10px}

/* Block style: Numbered steps (List block → Styles → Numbered steps) */
.entry-content ol.is-style-ld-steps,.entry-content ul.is-style-ld-steps{list-style:none;counter-reset:s;padding:0;margin:24px 0}
.is-style-ld-steps>li{counter-increment:s;position:relative;padding:4px 0 28px 56px;border-left:1px dashed #cdd5ee;margin:0 0 0 18px!important}
.is-style-ld-steps>li:last-child{border-color:transparent}
.is-style-ld-steps>li::before{content:counter(s);position:absolute;left:-19px;top:-4px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;background:var(--grad-btn);box-shadow:0 6px 18px -6px rgba(34,166,249,.8)}
.is-style-ld-steps>li strong:first-child{display:block;font-family:var(--display);font-size:17px;color:var(--navy);margin-bottom:4px}
.is-style-ld-steps img{margin-top:12px}

/* Block styles: Info / Warning note (Group block → Styles) */
.is-style-ld-note,.is-style-ld-warning{padding:18px 20px 18px 52px!important;border-radius:14px;position:relative;margin:20px 0}
.is-style-ld-note{background:#eaf6fe;border:1px solid #bfe5fb}
.is-style-ld-warning{background:#fff8e6;border:1px solid #fbe0a0}
.is-style-ld-note::before,.is-style-ld-warning::before{position:absolute;left:18px;top:17px;font-size:18px}
.is-style-ld-note::before{content:"ℹ️"}
.is-style-ld-warning::before{content:"⚠️"}
.is-style-ld-note p,.is-style-ld-warning p{margin:0;color:inherit}
.is-style-ld-note{color:#0b4a73}.is-style-ld-warning{color:#7a5200}

/* Block style: Screenshot (Image block → Styles) */
.is-style-ld-shot img{box-shadow:0 20px 40px -24px rgba(7,0,68,.45)}

/* ===== WPBakery ===== */
/* Homepage: let the LD elements run full width even inside WPBakery rows/columns */
.ldh-builder>.vc_row,.ldh-builder .vc_row.wpb_row{margin-left:0;margin-right:0}
.ldh-builder .vc_column_container>.vc_column-inner{padding-left:0;padding-right:0;padding-top:0}
.ldh-builder .wpb_content_element,.ldh-builder .vc_column-inner>.wpb_wrapper>*{margin-bottom:0}
.ldh-builder>.vc_row:not(:has(.hero,.ldh-cards,.ldh-topics,.ldh-signup)){width:min(1200px,100% - 32px);margin-inline:auto}
.ldh-topics,.ldh-signup{padding-top:20px}
.btn-lg{padding:15px 28px;font-size:16px}
/* Articles written with WPBakery */
.entry-content .vc_row{margin-left:-15px;margin-right:-15px}
.entry-content .wpb_content_element{margin-bottom:20px}
.entry-content .wpb_text_column p:last-child{margin-bottom:0}
.entry-content .wpb_single_image img{border-radius:14px}
.entry-content .vc_video-bg-container,.entry-content .wpb_video_widget .wpb_video_wrapper{border-radius:16px;overflow:hidden}
@media (max-width:767px){.entry-content .vc_row{margin-left:0;margin-right:0}}

/* ===== Popups with Gravity Forms ===== */
.modal-head{margin-bottom:8px;padding-right:40px}
.modal .gform_wrapper{margin:0!important}
.modal .gform_wrapper .gform_title,.modal .gform_wrapper .gform_description{display:none}
.modal .gform_wrapper .gfield_label,.modal .gform_wrapper legend.gfield_label{font-size:13px!important;font-weight:600!important;color:var(--navy2)!important;margin-bottom:6px!important}
.modal .gform_wrapper input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),.modal .gform_wrapper select,.modal .gform_wrapper textarea{
  width:100%;padding:13px 14px!important;border-radius:12px!important;border:1px solid var(--panel-b)!important;background:var(--bg)!important;color:var(--text)!important;font:inherit!important;font-size:15px!important;box-shadow:none!important;transition:.2s}
.modal .gform_wrapper input:focus,.modal .gform_wrapper select:focus,.modal .gform_wrapper textarea:focus{border-color:var(--blue)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(34,166,249,.16)!important;outline:none}
.modal .gform_wrapper .gform_footer{margin-top:10px!important;padding:0!important}
.modal .gform_wrapper .gform_button,.modal .gform_wrapper input[type=submit]{width:100%;padding:14px 20px!important;border:0!important;border-radius:12px!important;background:var(--grad-btn)!important;color:#fff!important;font-weight:600!important;font-size:15px!important;cursor:pointer;box-shadow:0 8px 24px -8px rgba(34,166,249,.7)}
.modal .gform_wrapper .gform_confirmation_message{text-align:center;padding:24px 0;font-size:16px;color:var(--navy)}
.modal .gform_wrapper .validation_message,.modal .gform_wrapper .gform_validation_errors{border-radius:10px}

/* ===== Header tools: dark/light toggle ===== */
.nav-tools{display:flex;align-items:center;gap:10px}
.nav .container{gap:16px}
.theme-toggle{position:relative;width:42px;height:42px;border-radius:12px;border:1px solid var(--panel-b);background: var(--grad);;color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow);transition:background .3s,border-color .3s,color .3s}
.theme-toggle:hover{border-color:var(--blue);color: #070044;}
.theme-toggle svg{grid-area:1/1}
.theme-toggle .i-sun,[data-theme="dark"] .theme-toggle .i-moon{display:none}
[data-theme="dark"] .theme-toggle .i-sun{display:block}
.logo .logo-dark,[data-theme="dark"] .logo .logo-light{display:none}
[data-theme="dark"] .logo .logo-dark{display:block}
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{transition:background-color .4s ease,border-color .4s ease,color .4s ease,fill .4s ease!important}

/* Old-theme videos turned into players (inc/legacy.php) */
.ldh-embed{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;margin:20px 0;box-shadow:0 24px 50px -28px rgba(7,0,68,.55)}
.ldh-embed iframe,.ldh-embed video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ===== Dark mode ===== */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#070b1a; --surface:#0f1531; --panel:#0f1531; --panel-b:#232a52; --tint:#18204a;
  --text:#e9ecf8; --muted:#9ba3cc; --navy:#eef0ff; --navy2:#c9d6ff; --brand-d:#5cc1fb;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.6);
}
[data-theme="dark"] body{background:var(--bg)}
[data-theme="dark"] .nav.scrolled{background:rgba(7,11,26,.82)}
[data-theme="dark"] .logo span,[data-theme="dark"] .expand-btn{border-color:#2d3770}
[data-theme="dark"] .expand-btn:hover{background:#222b5c}
[data-theme="dark"] .hero{background:linear-gradient(180deg,#0b1233 0%,var(--bg) 100%)}
[data-theme="dark"] .doc-hero{background:linear-gradient(180deg,#0b1233,var(--bg))}
[data-theme="dark"] .grid-lines{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
[data-theme="dark"] .blob{opacity:.3}
[data-theme="dark"] .search input::placeholder{color:#6f78a8}
[data-theme="dark"] .shot-card figcaption{background:rgba(15,21,49,.88);color:var(--text)}
[data-theme="dark"] .card:hover{border-color:#34407e}
[data-theme="dark"] .card .ico,[data-theme="dark"] .cat-head .ci{background:linear-gradient(135deg,#16305a,#2a1f55)}
[data-theme="dark"] .article p,[data-theme="dark"] .entry-content p,[data-theme="dark"] .entry-content li{color:#c3c9e8}
[data-theme="dark"] .article ol.steps>li,[data-theme="dark"] .is-style-ld-steps>li{border-color:#2d3770}
[data-theme="dark"] .callout,[data-theme="dark"] .is-style-ld-note{background:#0e2a44;border-color:#1d4a70;color:#bfe5fb}
[data-theme="dark"] .callout.warn,[data-theme="dark"] .is-style-ld-warning{background:#2d2410;border-color:#5c4718;color:#f7e1a6}
[data-theme="dark"] .m-error{background:#3a1414;border-color:#6e2424;color:#ffb4ab}
[data-theme="dark"] .mform input:focus,[data-theme="dark"] .mform select:focus,[data-theme="dark"] .mform textarea:focus,
[data-theme="dark"] .modal .gform_wrapper input:focus,[data-theme="dark"] .modal .gform_wrapper select:focus,[data-theme="dark"] .modal .gform_wrapper textarea:focus{background:var(--surface)!important}
/* Places where navy is a background colour stay dark navy */
[data-theme="dark"] .cta,[data-theme="dark"] .toc .help{background:linear-gradient(135deg,#1a1460,#0b2a52);border:1px solid #2d3770}
[data-theme="dark"] .video-card{background:linear-gradient(135deg,#070044,#021768)}
[data-theme="dark"] .burger.open{background:var(--blue);border-color:var(--blue)}
[data-theme="dark"] .burger.open span{background:#fff}
[data-theme="dark"] .modal-x:hover{background:var(--blue);color:#fff}
[data-theme="dark"] .modal-scrim{background:rgba(0,0,0,.65)}
[data-theme="dark"] .entry-content img,[data-theme="dark"] .shot{border-color:#2d3770}
/* Plain WPBakery text that had a dark colour set inline */
[data-theme="dark"] .entry-content [style*="color: #000"],[data-theme="dark"] .entry-content [style*="color:#000"],[data-theme="dark"] .entry-content [style*="color: rgb(0, 0, 0)"]{color:var(--text)!important}

/* ===== Search suggestions ===== */
/* The hero areas clip sideways only, so the suggestions list can hang below them */
.hero,.doc-hero{overflow:visible;overflow-x:clip}
.doc-hero{z-index:5}
.hero-copy{position:relative;z-index:4}
.search{z-index:20}
.search-results{z-index:60;max-height:min(420px,60vh);overscroll-behavior:contain}
.search-results a{display:flex;flex-direction:column;gap:2px}
.search-results a.on,.search-results a:hover{background:var(--tint)}
.search-results small{display:flex;gap:6px;align-items:center}
.search-results .snip{display:block;font-size:12.5px;color:var(--muted);font-weight:400;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-results mark{background:rgba(34,166,249,.18);color:inherit;border-radius:3px;padding:0 2px}
.search-results .s-note{padding:10px 14px;font-size:13px;color:var(--muted)}
.search-results .s-all{border-top:1px solid var(--panel-b);margin-top:4px;font-weight:600;color:var(--brand-d)}
.search .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}