/* ==========================================================================
   Brand type.
   League Spartan, self-hosted. Loading it from fonts.googleapis.com would make
   this site a third-party host in its own scanner and leak visitor IPs to
   Google, which is the exact thing the product argues against. SIL OFL 1.1,
   licence in assets/fonts/OFL.txt.
   ========================================================================== */
@font-face {
    font-family: "League Spartan";
    src: url("../fonts/league-spartan.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Orbix Compliance, Malaysia. Landing page.
   Two-column everywhere: label column left, content column right.
   Softer-bold palette: warm cream ground, muted indigo, sage, clay, butter.
   Self-contained: no framework, no build, no webfont, no external requests.
   ========================================================================== */

:root {
    --ink:        #1b1d2e;
    --ink-2:      #262a40;
    --ink-3:      #3a3f5c;
    --cream:      #faf7f2;
    --cream-2:    #f2ede4;
    --white:      #ffffff;

    --indigo:     #5d5fef;
    --indigo-2:   #4a4cd6;
    --indigo-soft:#ecedfd;

    --sage:       #3fa87a;
    --sage-soft:  #e0f1e8;
    --clay:       #dd6b5c;
    --clay-soft:  #fbeae7;
    --butter:     #f5d97a;
    --butter-soft:#fdf5e0;

    --fg:         #1b1d2e;
    --fg-mut:     #565a72;
    --fg-sub:     #7c8098;
    --line:       #e6e1d7;
    --line-dark:  rgba(255,255,255,0.14);

    --r:   4px;
    --r-lg:4px;
    --r-xl:4px;
    --shadow:    0 2px 8px rgba(27,29,46,0.06);
    --shadow-md: 0 14px 34px -14px rgba(27,29,46,0.24);
    --shadow-lg: 0 30px 70px -26px rgba(27,29,46,0.40);

    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --maxw: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0; background: var(--cream); color: var(--fg-mut);
    font-family: var(--font); font-size: 16.5px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
h1,h2,h3,h4 { margin: 0; color: var(--fg); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.2rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.pad  { padding: clamp(58px, 8vw, 96px) 0; }

/* ---------- the 2-column spine ---------- */
.two { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 5vw, 68px); align-items: start; }
.two.mid { align-items: center; }
.col-label { position: sticky; top: 92px; }

.eyebrow {
    display: inline-block; font-family: var(--mono);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--indigo); margin-bottom: 14px;
}
.lead { font-size: 1.02rem; line-height: 1.6; margin-top: 16px; color: var(--fg-mut); }

/* section skins */
.sk-cream  { background: var(--cream); }
.sk-white  { background: var(--white); }
.sk-ink    { background: var(--ink); }
.sk-indigo { background: var(--indigo); }
.sk-butter { background: var(--butter-soft); }

.sk-ink h1,.sk-ink h2,.sk-ink h3,.sk-indigo h1,.sk-indigo h2,.sk-indigo h3 { color: #fff; }
.sk-ink, .sk-indigo { color: rgba(255,255,255,0.74); }
.sk-ink .eyebrow, .sk-indigo .eyebrow { color: var(--butter); }
.sk-ink .lead, .sk-indigo .lead { color: rgba(255,255,255,0.74); }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1;
    padding: 14px 22px; border-radius: var(--r); border: 1.5px solid transparent;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.btn:active { transform: translateY(1px); }
.b-ink   { background: var(--ink); color: #fff; }
.b-ink:hover { background: var(--ink-2); }
.b-indigo{ background: var(--indigo); color: #fff; }
.b-indigo:hover { background: var(--indigo-2); }
.b-wa    { background: #25D366; color: #06331a; }
.b-wa:hover { background: #1eb85a; }

/* Bare WhatsApp glyph, the way orbixtech.my does it: no chip, no label. */
.wa-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; color: #25D366; text-decoration: none;
    transition: transform .18s, opacity .18s;
}
.wa-icon svg { width: 24px; height: 24px; }
.wa-icon:hover { transform: scale(1.08); }
/* quieter inline WhatsApp action: glyph + label, no fill */
.wa-text {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: #128C4A; text-decoration: none;
}
.wa-text svg { width: 18px; height: 18px; color: #25D366; }
.wa-text:hover { color: #0d6b39; }
.b-line  { background: transparent; color: var(--fg); border-color: var(--line); }
.b-line:hover { border-color: var(--ink); }
.sk-ink .b-line, .sk-indigo .b-line { color: #fff; border-color: rgba(255,255,255,0.34); }
.sk-ink .b-line:hover, .sk-indigo .b-line:hover { border-color: #fff; }
.b-white { background: #fff; color: var(--ink); }
.b-sm { padding: 10px 16px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 90; background: rgba(250,247,242,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.hdr .wrap { display: flex; align-items: center; gap: 12px; height: 64px; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 800; font-size: 15.5px; color: var(--fg); letter-spacing: -0.02em; }
.logo .mark { width: 26px; height: 26px; color: var(--ink); flex-shrink: 0; }
.ftr .logo .mark { color: #fff; }
.logo em { font-style: normal; color: inherit; font-weight: inherit; }
.hdr nav { display: flex; gap: 20px; margin-left: 18px; }
.hdr nav a { font-size: 14.5px; font-weight: 500; color: var(--fg-mut); text-decoration: none; }
.hdr nav a:hover { color: var(--fg); }
.hdr .acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.burger { display: none; margin-left: auto; background: none; border: 1.5px solid var(--line); border-radius: 4px; padding: 8px 10px; cursor: pointer; }

/* ---------- hero ---------- */
.hero { padding: clamp(46px, 6vw, 80px) 0 clamp(56px, 7vw, 88px); }
.hero h1 span { color: var(--indigo); }
.hero .lead { font-size: 1.12rem; max-width: 40ch; }
.trustline { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 13.5px; color: var(--fg-sub); }
.trustline b { color: var(--sage); }

/* ---------- inline form ---------- */
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); }
.sk-ink .form-card, .sk-indigo .form-card { border-color: transparent; }
.f-row { display: grid; gap: 10px; margin-bottom: 10px; }
.f-row.two-up { grid-template-columns: 1fr 1fr; }
.field { display: block; }
.field span { display: block; font-size: 12.5px; font-weight: 600; color: var(--fg); margin-bottom: 5px; }
.field input, .field select, .field textarea {
    width: 100%; font-family: inherit; font-size: 15px; color: var(--fg);
    background: var(--cream); border: 1.5px solid var(--line); border-radius: 4px;
    padding: 11px 13px; outline: 0;
}
.field textarea { resize: vertical; min-height: 74px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--indigo); background: #fff; }
.f-note { font-size: 12.5px; color: var(--fg-sub); margin-top: 10px; }

/* ---------- everyday explainer rows ---------- */
.plain { display: grid; gap: 14px; }
.plain-row { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.sk-ink .plain-row { background: rgba(255,255,255,0.06); border-color: var(--line-dark); }
.plain-row .em { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.plain-row h4 { font-size: 15.5px; margin-bottom: 3px; }
.sk-ink .plain-row h4 { color: #fff; }
.plain-row p { font-size: 14px; color: var(--fg-sub); line-height: 1.55; }
.sk-ink .plain-row p { color: rgba(255,255,255,0.62); }

/* ==========================================================================
   ANIMATION 1: browser + cookie banner + cursor
   ========================================================================== */
.brow { background: var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.brow-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--ink-2); }
.brow-bar i { width: 8px; height: 8px; border-radius: 50%; background: #4a4f6d; }
.brow-bar span { margin-left: 8px; flex: 1; background: #171a2b; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; color: #6d7391; padding: 5px 11px; text-align: center; }
.brow-body { position: relative; padding: 20px; min-height: 296px; background: var(--ink); }

.sk-l { height: 8px; border-radius: 4px; background: #2e3350; margin-bottom: 9px; }
.sk-l.t { height: 13px; width: 44%; background: #3a4064; margin-bottom: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.chips span {
    font-family: var(--mono); font-size: 10.5px; font-weight: 600;
    padding: 6px 10px; border-radius: 999px;
    background: rgba(221,107,92,0.18); color: #f0a196; border: 1px solid rgba(221,107,92,0.38);
    transition: background .4s, color .4s, border-color .4s, opacity .4s;
}
.demo.done .chips span { background: rgba(255,255,255,0.05); color: #5b6080; border-color: var(--line-dark); opacity: .65; }
.chips span::after { content: ''; display: inline-block; width: 0; height: 1px; background: currentColor; vertical-align: middle; margin-left: 0; transition: width .35s ease .1s, margin-left .35s ease .1s; }
.demo.done .chips span::after { width: 100%; margin-left: -100%; }

.cbanner {
    position: absolute; left: 14px; right: 14px; bottom: 14px;
    background: #fff; color: var(--ink); border-radius: var(--r); padding: 14px 15px;
    box-shadow: 0 18px 44px -12px rgba(0,0,0,0.55);
    transition: transform .45s cubic-bezier(.5,0,.2,1), opacity .3s;
}
.cbanner p { font-size: 12.5px; line-height: 1.45; color: #4b5068; margin-bottom: 11px; }
.cbanner p b { color: var(--ink); }
.cbanner .row { display: flex; gap: 7px; }
.cbtn { font-size: 11.5px; font-weight: 700; padding: 9px 13px; border-radius: 4px; border: 1.5px solid #e2e0da; background: #fff; color: var(--ink); transition: transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s; }
.cbtn.fill { background: var(--indigo); border-color: var(--indigo); color: #fff; margin-left: auto; }
.demo.hover .cbtn.reject { transform: translateY(-2px) scale(1.05); border-color: var(--indigo); color: var(--indigo); box-shadow: 0 8px 16px -6px rgba(93,95,239,0.45); }
.demo.click .cbtn.reject { transform: scale(.94); background: var(--indigo); color: #fff; }
.demo.done .cbanner { transform: translateY(150%); opacity: 0; }

.cursor {
    position: absolute; z-index: 5; left: 68px; bottom: 20px; width: 26px; height: 26px;
    pointer-events: none; transform: translate(300px, -140px);
    transition: transform 1.05s cubic-bezier(.45,.05,.25,1), opacity .3s;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
}
.demo.move .cursor  { transform: translate(0,0); }
.demo.click .cursor { transform: translate(0,0) scale(.82); transition-duration: .12s; }
.demo.done .cursor  { opacity: 0; }
.ripple { position: absolute; z-index: 4; left: 65px; bottom: 40px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--sage); opacity: 0; pointer-events: none; }
.demo.click .ripple { animation: ring .6s ease-out; }
@keyframes ring { 0% { opacity: .9; transform: scale(.4);} 100% { opacity: 0; transform: scale(3.6);} }

.won {
    position: absolute; top: 16px; right: 16px; z-index: 6;
    display: flex; align-items: center; gap: 7px;
    background: var(--sage); color: #fff; font-size: 12px; font-weight: 700;
    padding: 8px 13px; border-radius: 999px;
    opacity: 0; transform: translateY(-8px) scale(.9);
    transition: opacity .3s, transform .3s cubic-bezier(.2,1.4,.4,1);
}
.demo.done .won { opacity: 1; transform: none; }

/* ==========================================================================
   ANIMATION 2: the shoe ad that follows you around
   ========================================================================== */
.follow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mini { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.mini-bar { background: var(--cream-2); padding: 7px 9px; font-family: var(--mono); font-size: 9px; color: var(--fg-sub); border-bottom: 1px solid var(--line); text-align: center; }
.mini-body { padding: 11px; min-height: 118px; position: relative; }
.mini-l { height: 6px; border-radius: 4px; background: var(--cream-2); margin-bottom: 6px; }
.shoe { display: flex; justify-content: center; margin: 2px 0 8px; }
.shoe .ico { width: 34px; height: 34px; color: var(--ink); }

.adbox {
    position: absolute; left: 9px; right: 9px; bottom: 9px;
    background: var(--indigo); color: #fff; border-radius: 4px;
    padding: 7px 8px; font-size: 9.5px; font-weight: 700; text-align: center;
    opacity: 0; transform: translateY(8px) scale(.94);
    transition: opacity .35s, transform .35s cubic-bezier(.2,1.4,.4,1);
}
.adbox em { font-style: normal; display: block; font-size: 8px; font-weight: 500; opacity: .8; margin-top: 2px; }
.follow.s1 .m1 .adbox { opacity: 1; transform: none; }
.follow.s2 .m1 .adbox, .follow.s2 .m2 .adbox { opacity: 1; transform: none; }
.follow.s3 .m1 .adbox, .follow.s3 .m2 .adbox, .follow.s3 .m3 .adbox { opacity: 1; transform: none; }
.mini.lit { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); }

.follow-cap { margin-top: 16px; font-size: 14px; color: var(--fg-sub); text-align: center; }
.follow-cap b { color: var(--ink); }

/* ==========================================================================
   ANIMATION 3: the "delete my data" email and its clock
   ========================================================================== */
.inbox { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.inbox-hd { background: var(--cream-2); padding: 11px 15px; font-size: 12.5px; font-weight: 700; color: var(--fg); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 9px; }
.inbox-hd .ico { width: 20px; height: 20px; color: var(--ink); flex-shrink: 0; }
.inbox-hd .cnt { margin-left: auto; background: var(--clay); color: #fff; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; }
.mail { display: flex; gap: 11px; padding: 13px 15px; border-bottom: 1px solid var(--line); align-items: flex-start; opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .4s; }
.mail:last-child { border-bottom: 0; }
.inbox.in1 .m-1, .inbox.in2 .m-1, .inbox.in3 .m-1 { opacity: 1; transform: none; }
.inbox.in2 .m-2, .inbox.in3 .m-2 { opacity: 1; transform: none; }
.inbox.in3 .m-3 { opacity: 1; transform: none; }
.mail .av { width: 30px; height: 30px; border-radius: 50%; background: var(--indigo-soft); color: var(--indigo); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.mail h5 { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; color: var(--fg); }
.mail p { font-size: 12.5px; color: var(--fg-sub); line-height: 1.45; }
.mail .clock { margin-left: auto; text-align: right; flex-shrink: 0; }
.mail .clock b { display: block; font-family: var(--mono); font-size: 12px; }
.mail .clock small { font-size: 10px; color: var(--fg-sub); }
.c-ok b { color: var(--sage); }
.c-warn b { color: var(--clay); }

/* ---------- tool cards ---------- */
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tool { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s, border-color .2s; }
.tool:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #d9d3c7; }
.tool .em { margin-bottom: 15px; }
.ico { width: 40px; height: 40px; color: var(--ink); display: block; }
.tool.feature .ico { color: #fff; }
.tool.feature .ico [fill^="var"], .tool.feature .ico [stroke^="var"] { }
.tool h3 { margin-bottom: 7px; }
.tool .says { font-size: 14.5px; color: var(--fg-mut); line-height: 1.55; margin-bottom: 12px; }
.tool .techie { font-family: var(--mono); font-size: 11px; color: var(--fg-sub); background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; display: inline-block; margin-bottom: 16px; align-self: flex-start; }
.tool .go { margin-top: auto; }
.tool.feature { background: var(--ink); border-color: var(--ink); }
.tool.feature h3 { color: #fff; }
.tool.feature .says { color: rgba(255,255,255,0.72); }
.tool.feature .techie { background: rgba(255,255,255,0.07); border-color: var(--line-dark); color: rgba(255,255,255,0.6); }

/* ---------- pricing ---------- */
.plans { display: grid; gap: 14px; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.plan.hot { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); }
.plan h3 { margin-bottom: 5px; }
.plan p { font-size: 14px; color: var(--fg-sub); line-height: 1.5; }
.plan .price { text-align: right; }
.plan .price b { display: block; font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.plan .price small { font-size: 12px; color: var(--fg-sub); }
.plan .tagme { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo); background: var(--indigo-soft); border-radius: 999px; padding: 3px 9px; margin-bottom: 8px; }

/* ---------- faq ---------- */
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 10px; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 44px 16px 18px; position: relative; font-weight: 700; font-size: 15.5px; color: var(--fg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 18px; top: 12px; font-size: 22px; font-weight: 400; color: var(--indigo); }
.faq details[open] summary::after { content: '\2013'; }
.faq .a { padding: 0 44px 18px 18px; font-size: 14.5px; color: var(--fg-mut); line-height: 1.65; }

/* ---------- footer ---------- */
.ftr { background: var(--ink); color: rgba(255,255,255,0.6); padding: 62px 0 28px; }
.ftr-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; margin-bottom: 44px; }
.ftr h5 { margin: 0 0 14px; font-size: 12.5px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: 9px; }
.ftr a { font-size: 13.5px; color: rgba(255,255,255,0.6); text-decoration: none; }
.ftr a:hover { color: #fff; }
.ftr .about p { font-size: 13.5px; margin-top: 14px; max-width: 260px; line-height: 1.6; }
.ftr .logo { color: #fff; }
.ftr .logo em { color: inherit; }
.ftr-btm { border-top: 1px solid var(--line-dark); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 12.5px; }
.ftr-btm .sp { margin-left: auto; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .two { grid-template-columns: 1fr; gap: 28px; }
    .col-label { position: static; }
    .tools { grid-template-columns: 1fr; }
    .ftr-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .ftr .about { grid-column: 1 / -1; }
    .hdr nav { display: none; }
    .burger { display: block; }
    .hdr nav.open { display: flex; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--cream); border-bottom: 1px solid var(--line); padding: 6px 24px 14px; margin: 0; }
    .hdr nav.open a { padding: 11px 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 620px) {
    body { font-size: 16px; }
    .f-row.two-up { grid-template-columns: 1fr; }
    .plan { grid-template-columns: 1fr; }
    .plan .price { text-align: left; }
    .follow { grid-template-columns: 1fr; }
    .follow .mini:nth-child(n+3) { display: none; }
    .brow-body { min-height: 268px; padding: 16px; }
    .hdr .acts .btn:not(.b-wa) { display: none; }
    .btn-row .btn { width: 100%; }
    .mail .clock { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ==========================================================================
   Our own cookie banner. Narrow and tall rather than wide, translucent so the
   page still reads behind it, and expandable for people who want the detail.
   ========================================================================== */
.cc {
    position: fixed; z-index: 200;
    right: 20px; bottom: 20px;   /* right side: the left column carries every heading and CTA */
    width: 336px; max-width: calc(100vw - 40px);
    background: rgba(20, 23, 38, 0.86);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.72);
    border-radius: 4px;
    padding: 18px;
    box-shadow: 0 20px 50px -16px rgba(0,0,0,0.55);
    transform: translateY(calc(100% + 28px));
    transition: transform .45s cubic-bezier(.5,0,.2,1), opacity .3s;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.cc.show { transform: translateY(0); }
.cc.gone { transform: translateY(calc(100% + 28px)); opacity: 0; }


.cc h4 { margin: 0 0 5px; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.cc p { font-size: 13px; line-height: 1.5; margin: 0 0 14px; }

.cc-row { display: grid; gap: 7px; }
.cc-btn {
    font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1;
    padding: 12px 14px; border-radius: 4px; cursor: pointer; width: 100%;
    border: 1.5px solid rgba(255,255,255,0.20);
    background: transparent; color: #fff;
    transition: background .18s, border-color .18s;
}
.cc-btn:hover { border-color: rgba(255,255,255,0.5); }
.cc-btn.yes { background: var(--indigo); border-color: var(--indigo); }
.cc-btn.yes:hover { background: #4a4cd6; border-color: #4a4cd6; }

/* the expander */
.cc-more {
    width: 100%; margin-top: 14px; padding: 0; cursor: pointer;
    background: none; border: 0; border-top: 1px solid rgba(255,255,255,0.10);
    padding-top: 12px;
    display: flex; align-items: center; gap: 6px;
    font: inherit; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.62);
}
.cc-more:hover { color: #fff; }
.cc-more svg { width: 11px; height: 11px; transition: transform .25s; margin-left: auto; }
.cc.open .cc-more svg { transform: rotate(180deg); }

.cc-detail { display: none; margin-top: 12px; }
.cc.open .cc-detail { display: block; }

.cc-cat { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.cc-cat:last-of-type { border-bottom: 0; }
.cc-cat .t { flex: 1; min-width: 0; }
.cc-cat strong { display: block; font-size: 12.5px; font-weight: 600; color: #fff; }
.cc-cat small { font-size: 11px; color: rgba(255,255,255,0.48); }
.cc-cat .fixed { font-size: 10.5px; color: rgba(255,255,255,0.4); white-space: nowrap; }

/* small switch */
.cc-sw {
    flex-shrink: 0; width: 32px; height: 18px; border-radius: 999px; cursor: pointer;
    background: rgba(255,255,255,0.18); border: 0; padding: 0; position: relative;
    transition: background .2s;
}
.cc-sw::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%; background: #fff;
    transition: left .2s;
}
.cc-sw[aria-checked="true"] { background: var(--indigo); }
.cc-sw[aria-checked="true"]::after { left: 16px; }

.cc-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.10); }
.cc-links a { font-size: 11.5px; color: rgba(255,255,255,0.6); text-decoration: underline; text-underline-offset: 2px; }
.cc-links a:hover { color: #fff; }

/* Every banner we install carries this line. Here it points at what we sell. */
.cc-by {
    display: flex; align-items: center; gap: 7px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.10);
    font-size: 11px; color: rgba(255,255,255,0.42); text-decoration: none;
    transition: color .18s;
}
.cc-by .mark { width: 13px; height: 13px; color: inherit; flex-shrink: 0; transition: color .18s; }
.cc-by:hover .mark { color: #fff; }
.cc-by b { color: rgba(255,255,255,0.72); font-weight: 700; }
.cc-by:hover, .cc-by:hover b { color: #fff; }

.cc-prefs { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.cc-prefs:hover { color: #fff; }

@media (max-width: 620px) {
    .cc { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; padding: 16px; }
}

/* Close means reject the non-essential, never "ask me later". Anything else
   would be a dark pattern, and this page criticises those two sections down. */
.cc-x {
    position: absolute; top: 12px; right: 12px;
    width: 26px; height: 26px; padding: 0; cursor: pointer;
    background: transparent; border: 0; border-radius: 4px;
    color: rgba(255,255,255,0.45);
    display: grid; place-items: center;
    transition: color .18s, background .18s;
}
.cc-x svg { width: 13px; height: 13px; }
.cc-x:hover { color: #fff; background: rgba(255,255,255,0.10); }
.cc h4 { padding-right: 30px; }

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(44px,7vw,80px) 24px 90px; }
.legal .eyebrow { margin-bottom: 10px; }
.legal h1 { font-size: clamp(2rem,4.4vw,3rem); margin-bottom: 10px; }
.legal .updated { font-family: var(--mono); font-size: 12.5px; color: var(--fg-sub); margin-bottom: 30px; }
.legal .tldr {
    background: var(--white); border: 1px solid var(--line); border-radius: 4px;
    padding: 22px 24px; margin-bottom: 40px;
}
.legal .tldr h2 { font-size: 15px; margin-bottom: 12px; letter-spacing: -0.01em; }
.legal .tldr ul { list-style: none; padding: 0; margin: 0; }
.legal .tldr li { position: relative; padding-left: 22px; font-size: 14.5px; margin-bottom: 9px; line-height: 1.55; }
.legal .tldr li:last-child { margin-bottom: 0; }
.legal .tldr li::before {
    content: ''; position: absolute; left: 1px; top: 8px; width: 6px; height: 3px;
    border-left: 1.8px solid var(--indigo); border-bottom: 1.8px solid var(--indigo);
    transform: rotate(-45deg);
}
.legal h2 { font-size: 1.2rem; margin: 38px 0 10px; }
.legal h3 { font-size: 15px; margin: 22px 0 6px; }
.legal p { font-size: 15.5px; line-height: 1.75; margin-bottom: 14px; color: var(--fg-mut); }
.legal ul.body { padding-left: 20px; margin: 0 0 16px; }
.legal ul.body li { font-size: 15.5px; line-height: 1.7; margin-bottom: 8px; color: var(--fg-mut); }
.legal a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--indigo-2); }
.legal .box {
    background: var(--butter-soft); border: 1px solid #eadfb8; border-radius: 4px;
    padding: 18px 20px; margin: 24px 0; font-size: 14.5px; line-height: 1.7;
}
.legal .box b { color: var(--ink); }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0 22px; font-size: 14.5px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-sub); font-weight: 600; }
.legal .back { display: flex; width: fit-content; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--fg-mut); text-decoration: none; margin-bottom: 26px; }
.legal .back:hover { color: var(--ink); }

/* Verifiable claims only. No logos, no testimonials, no invented numbers. */
.proof { list-style: none; padding: 0; margin: 22px 0 0; }
.proof li {
    position: relative; padding-left: 24px; margin-bottom: 9px;
    font-size: 14px; color: var(--fg-mut); line-height: 1.55;
}
.proof li::before {
    content: ''; position: absolute; left: 2px; top: 7px; width: 6px; height: 3px;
    border-left: 1.8px solid var(--sage); border-bottom: 1.8px solid var(--sage);
    transform: rotate(-45deg);
}
.proof b { color: var(--ink); }
.proof a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }

/* ==========================================================================
   Scan page
   ========================================================================== */
.scanwrap { max-width: 880px; margin: 0 auto; padding: clamp(40px,6vw,70px) 24px 90px; }
.scanwrap h1 { font-size: clamp(2rem,4.4vw,3rem); margin-bottom: 10px; }
.scanwrap .lead { max-width: 56ch; margin-bottom: 26px; }

.scanbar2 {
    display: flex; gap: 8px; flex-wrap: wrap;
    background: var(--white); border: 1.5px solid var(--border-strong);
    border-radius: 4px; padding: 8px 8px 8px 16px; box-shadow: var(--shadow-sm);
}
.scanbar2 .pfx { align-self: center; font-family: var(--mono); font-size: 13.5px; color: var(--fg-faint); }
.scanbar2 input {
    flex: 1; min-width: 180px; border: 0; outline: 0; background: transparent;
    font-family: var(--mono); font-size: 15px; color: var(--fg); padding: 12px 0;
}
.scanbar2 input::placeholder { color: var(--fg-faint); }
.scanbar2 button { flex-shrink: 0; }
.try { margin-top: 12px; font-size: 13.5px; color: var(--fg-sub); }
.try button {
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
    color: var(--indigo); text-decoration: underline; text-underline-offset: 2px;
}

.state { margin-top: 34px; }
.spin {
    display: flex; align-items: center; gap: 12px;
    background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 20px 22px;
    font-size: 15px;
}
.spin i {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    border: 2.5px solid var(--indigo-soft); border-top-color: var(--indigo);
    animation: sp .7s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }
.err {
    background: var(--clay-soft); border: 1px solid #f3cfc9; border-radius: 4px;
    padding: 18px 20px; font-size: 15px; color: #8f3d33;
}

.res-verdict { border-left: 3px solid var(--fg-sub); background: var(--white); border-radius: 4px; padding: 20px 22px; margin-bottom: 10px; }
.res-verdict.bad { border-left-color: var(--clay); }
.res-verdict.ok { border-left-color: var(--sage); }
.res-verdict.warn { border-left-color: #b8860b; }
.res-verdict b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 5px; letter-spacing: -0.02em; }
.res-verdict p { font-size: 14.5px; margin: 0; }

.res-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 28px; }
.res-stats div { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 14px 18px; min-width: 118px; }
.res-stats b { display: block; font-size: 25px; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
.res-stats span { font-size: 12px; color: var(--fg-sub); }

.res-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; font-size: 14px; }
.res-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.res-table tr:last-child td { border-bottom: 0; }
.res-table tr.grp td { background: var(--cream-2, #f2ede4); padding-top: 15px; }
.res-table tr.grp b { color: var(--ink); font-size: 13px; }
.res-table .cdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.res-table .why { font-size: 12.5px; color: var(--fg-sub); display: block; margin-top: 3px; margin-left: 16px; }
.res-table td.v { font-weight: 600; color: var(--ink); width: 32%; }
.res-table td.ck { font-family: var(--mono); font-size: 12px; width: 34%; }
.res-table td.ev { font-size: 12px; color: var(--fg-sub); }
.res-note { background: var(--butter-soft); border: 1px solid #eadfb8; border-radius: 4px; padding: 16px 18px; margin-top: 20px; font-size: 14px; line-height: 1.65; }
.res-cta { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width:620px){
    .scanbar2 { padding: 10px; }
    .scanbar2 input { width: 100%; }
    .scanbar2 button { width: 100%; }
    .res-table td.v, .res-table td.ck { width: auto; }
    .res-table td.ev { display: none; }
}

/* ==========================================================================
   Live banner variants.
   The base .cc rules above are the corner card. These override position and
   layout so the same markup can render as any of the five styles, chosen with
   ?banner= at runtime.
   ========================================================================== */

/* --- bar: compact, centred, content kept together --- */
.cc.cc-bar {
    /* bottom-left */
    left: 20px; right: auto; margin: 0; bottom: 20px;
    width: min(560px, calc(100vw - 40px));
    max-width: none;
    display: block;
    padding: 13px 15px;
}
.cc.cc-bar .cc-x { position: absolute; top: 11px; right: 11px; width: 20px; height: 20px; }
/* title and sub share one line so the bar stays short even with three actions */
.cc.cc-bar .cc-txt { padding-right: 26px; margin-bottom: 11px; }
.cc.cc-bar h4 { display: inline; font-size: 13.5px; margin: 0; padding: 0; }
.cc.cc-bar h4::after { content: ' '; }
.cc.cc-bar p { display: inline; font-size: 12.5px; margin: 0; }
/* buttons sit directly under the text, not shoved to the far edge with a void
   between. Three actions, because Accept and Reject alone give nobody a way to
   pick some and refuse the rest. */
.cc.cc-bar .cc-row { display: flex; flex-wrap: wrap; gap: 7px; }
.cc.cc-bar .cc-btn { width: auto; padding: 9px 14px; font-size: 12.5px; }
.cc.cc-bar .cc-by { margin-top: 12px; padding-top: 10px; font-size: 10.5px; }

/* --- mini: two lines, side-by-side buttons, no expander --- */
.cc.cc-mini { width: 300px; padding: 15px; }
.cc.cc-mini h4 { font-size: 14px; }
.cc.cc-mini p { font-size: 12.5px; margin-bottom: 12px; }
.cc.cc-mini .cc-row { display: flex; gap: 7px; }
.cc.cc-mini .cc-btn { flex: 1; padding: 10px 8px; font-size: 12px; }
.cc.cc-mini .cc-more, .cc.cc-mini .cc-detail { display: none; }

/* --- detailed: categories open from the start --- */
.cc.cc-detailed { width: 348px; }
.cc.cc-detailed .cc-detail { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.10); }
.cc.cc-detailed .cc-more { display: none; }

/* --- modal: centred, page dimmed --- */
.cc.cc-modal {
    left: 50%; right: auto; top: 50%; bottom: auto;
    width: 360px; max-width: calc(100vw - 32px);
    padding: 24px;
    background: rgba(20,23,38,0.97);
    transform: translate(-50%, -50%) scale(.96);
    opacity: 0;
}
.cc.cc-modal.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cc.cc-modal.gone { transform: translate(-50%, -50%) scale(.96); opacity: 0; }
.cc-scrim {
    position: fixed; inset: 0; z-index: 199;
    background: rgba(11,13,22,0.55); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .35s; pointer-events: none;
}
.cc-scrim.show { opacity: 1; }

@media (max-width: 760px) {
    .cc.cc-bar {
        grid-template-columns: 1fr auto;
        grid-template-areas: "txt close" "btns btns" "more by" "detail detail";
        row-gap: 10px;
    }
    .cc.cc-bar .cc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .cc.cc-bar .cc-btn { width: 100%; }
    .cc.cc-bar .cc-more, .cc.cc-bar .cc-by { margin-top: 0; }
    .cc.cc-bar { left: 12px; right: 12px; width: auto; }
    .cc.cc-mini, .cc.cc-detailed { left: 12px; right: 12px; width: auto; }
}

/* ==========================================================================
   Pricing plans with expandable feature lists.
   "Requests handled" means nothing on its own, so every tier opens.
   ========================================================================== */
.plan { display: block; padding: 0; }
.plan-head {
    display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
    padding: 22px 22px 18px;
}
.plan-more {
    width: 100%; display: flex; align-items: center; gap: 7px;
    padding: 13px 22px; cursor: pointer;
    background: none; border: 0; border-top: 1px solid var(--line);
    font: inherit; font-size: 13px; font-weight: 600; color: var(--fg-mut); text-align: left;
}
.plan-more:hover { color: var(--ink); }
.plan-more svg { width: 11px; height: 11px; margin-left: auto; transition: transform .25s; }
.plan.open .plan-more svg { transform: rotate(180deg); }
.plan-feat { display: none; padding: 2px 22px 20px; }
.plan.open .plan-feat { display: block; }
.plan-feat ul { list-style: none; padding: 0; margin: 0; }
.plan-feat li {
    position: relative; padding-left: 24px; margin-bottom: 9px;
    font-size: 14px; line-height: 1.55; color: var(--fg-mut);
}
.plan-feat li::before {
    content: ''; position: absolute; left: 2px; top: 7px; width: 6px; height: 3px;
    border-left: 1.8px solid var(--sage); border-bottom: 1.8px solid var(--sage);
    transform: rotate(-45deg);
}
.plan-feat li.inherit { color: var(--fg-sub); font-style: italic; }
.plan-feat li.inherit::before { border-color: var(--fg-faint); }
.plan-feat b { color: var(--ink); font-weight: 600; }

/* what a consent record actually holds */
.record {
    background: var(--ink); color: rgba(255,255,255,.72);
    border-radius: 4px; padding: 24px 26px; margin-top: 22px;
}
.record h3 { color: #fff; font-size: 16px; margin-bottom: 6px; }
.record > p { font-size: 14px; margin-bottom: 16px; }
.record table { width: 100%; border-collapse: collapse; font-size: 13px; }
.record td { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.09); vertical-align: top; }
.record tr:last-child td { border-bottom: 0; }
.record td.k { font-family: var(--mono); font-size: 11.5px; color: #fff; width: 42%; padding-right: 14px; }
.record td.d { color: rgba(255,255,255,.6); }
.record .foot { margin-top: 16px; font-size: 12.5px; color: rgba(255,255,255,.5); line-height: 1.6; }
@media (max-width: 620px) {
    .plan-head { grid-template-columns: 1fr; }
    .record td.k { width: 50%; }
}


/* ==========================================================================
   Sticky footer.
   Short pages (the scan page before a result) left the footer floating in the
   middle with dead cream below it. Push it to the bottom when content is short,
   let it sit naturally when content is long.
   ========================================================================== */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main, main.legal, main.scanwrap { flex: 1 0 auto; }
body > .ftr, body > .site-footer { flex-shrink: 0; margin-top: auto; }

/* The plain-English label leads; the technical example is demoted to a whisper. */
.record td.k { font-family: var(--font); font-size: 13.5px; font-weight: 600; color: #fff; width: 32%; }
.record td.d { font-size: 13.5px; line-height: 1.6; }
.record .ex {
    display: block; margin-top: 5px;
    font-family: var(--mono); font-size: 11.5px;
    color: rgba(255,255,255,.42);
}


/* ==========================================================================
   Choosing preferences.
   Accept all and Reject all are the two fast paths. "Choose" is the third, and
   it has to exist: without it nobody can allow analytics but refuse ads, which
   is exactly the granular consent the PDPA contemplates.
   ========================================================================== */
.cc-btn.ghost { display: inline-flex; align-items: center; gap: 6px; }
.cc-btn.ghost svg { width: 10px; height: 10px; transition: transform .25s; }
.cc.open .cc-btn.ghost svg { transform: rotate(180deg); }

.cc-how {
    font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.55);
    margin: 0 0 14px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

/* the actual cookies, because "Analytics" alone does not tell anyone what is
   being set on their device */
.cc-ck { width: 100%; border-collapse: collapse; margin: 0 0 6px; }
.cc-ck td { padding: 4px 0; font-size: 11px; vertical-align: top; color: rgba(255,255,255,.5); }
.cc-ck td.n { font-family: var(--mono); color: rgba(255,255,255,.8); width: 27%; padding-right: 8px; }
.cc-ck td.w { width: 30%; padding-right: 8px; }
.cc-ck td.t { width: 43%; }

.cc-save { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.09); }
.cc-save .cc-btn { width: 100%; }


/* ==========================================================================
   The Orbix Compliance lockup.
   League Spartan, uppercase, mark hard against the left edge and optically the
   same height as the capitals. League Spartan's cap height is about 0.72em, so
   the mark is sized to that rather than to the full em box, which would leave
   it looking oversized next to the letters.
   ========================================================================== */
.logo, .brand, .cc-by {
    font-family: "League Spartan", var(--font);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.logo { gap: 8px; }
.logo, .logo .brand-name, .logo > span:not(.brand-ver) { font-weight: 800; }
/* One word. The mark keeps its gap; the two halves of the name do not get one,
   which is why they live inside a single .wm rather than as sibling flex items. */
.wm { display: inline; white-space: nowrap; }
.wm em { font-style: normal; }
.logo .mark, .brand .mark, .cc-by .mark {
    width: 0.78em; height: 0.78em;      /* cap height, not em box */
    align-self: center;
    flex-shrink: 0;
}
/* Both words are the wordmark, so both carry the same weight, colour and
   opacity. Greying "compliance" made it read as a tagline rather than half the
   name. */
.logo em, .brand em { font-weight: inherit; opacity: 1; color: inherit; }
.brand-ver { text-transform: none; letter-spacing: 0; font-family: var(--mono); }
/* the powered-by credit keeps sentence case, it is a sentence not a wordmark */
.cc-by { text-transform: none; letter-spacing: 0; font-family: var(--font); }
.cc-by b { font-family: "League Spartan", var(--font); text-transform: uppercase; letter-spacing: .05em; }