:root{--bg:#030a16;--bg2:#071427;--surface:#091a31;--surface2:#0d2340;--line:#1b4264;--text:#f4f8ff;--muted:#b6c5d9;--cyan:#35d6ff;--blue:#3b82f6;--violet:#7769ff;--green:#5ef08b;--lime:#75f05c;--red:#ff5d6c;--amber:#ffcf5a;--shadow:0 24px 70px rgba(0,0,0,.42);--radius:22px;--max:1280px}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;font:16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 10% 0%,rgba(0,142,255,.13),transparent 34rem),radial-gradient(circle at 95% 20%,rgba(117,94,255,.13),transparent 36rem),linear-gradient(180deg,#030a16 0,#061224 46%,#070b17 100%);min-height:100vh}a{color:inherit}img{max-width:100%;height:auto}.wrap{width:min(var(--max),calc(100% - 36px));margin:auto}.skip{position:fixed;left:16px;top:-100px;z-index:999;padding:10px 14px;background:#fff;color:#000}.skip:focus{top:16px}.site-header{position:sticky;top:0;z-index:50;background:rgba(3,10,22,.88);backdrop-filter:blur(20px);border-bottom:1px solid rgba(113,197,255,.18)}.nav{min-height:78px;display:flex;align-items:center;gap:22px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;min-width:max-content}.brand img{width:54px;height:54px;border-radius:14px;box-shadow:0 0 24px rgba(53,214,255,.18)}.brand b{font-size:1.2rem}.brand small{display:block;letter-spacing:.14em;color:#a9bad0;font-size:.66rem;font-weight:800}.menu{display:flex;gap:4px;align-items:center;margin-left:auto}.menu a{padding:10px 11px;text-decoration:none;color:#d9e5f6;font-weight:800;font-size:.91rem;border-radius:10px}.menu a:hover,.menu a[aria-current=page]{background:#0e2744;color:white}.nav-actions{display:flex;gap:8px}.btn,.button{appearance:none;border:1px solid #28668c;background:linear-gradient(180deg,#16466b,#0d2946);color:white;padding:11px 17px;border-radius:12px;text-decoration:none;font-weight:850;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 20px rgba(0,0,0,.22)}.btn.primary,.button-primary{border-color:#4fd5ff;background:linear-gradient(180deg,#22c7ff,#2169e8 75%,#184cc7);box-shadow:inset 0 1px #d6f8ff,0 5px 0 #123a8f,0 12px 30px rgba(33,105,232,.35)}.btn.green{border-color:#64ef92;background:linear-gradient(180deg,#48e58a,#14995f);box-shadow:0 5px 0 #087047,0 14px 28px rgba(20,153,95,.3)}.btn.ghost{background:#0b1729;border-color:#28435d}.mobile-toggle{display:none;margin-left:auto}.hero{padding:70px 0 54px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}.eyebrow{display:inline-flex;gap:9px;align-items:center;color:#79e9ff;font-size:.78rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:#5ef08b;box-shadow:0 0 15px #5ef08b}.hero h1{font-size:clamp(3rem,6.2vw,6.1rem);line-height:.98;letter-spacing:-.055em;margin:18px 0 22px}.gradient-text{background:linear-gradient(90deg,#50e4ff,#65b8ff 42%,#8e7cff 72%,#6df08c);background-clip:text;color:transparent}.hero p{font-size:1.18rem;color:#c3d1e3;max-width:720px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.chip{padding:8px 11px;border:1px solid #22425f;border-radius:999px;background:rgba(8,28,49,.8);font-size:.82rem;color:#c6d6e8}.hero-logo{padding:18px;border-radius:32px;background:linear-gradient(145deg,rgba(11,28,48,.9),rgba(4,12,26,.84));border:1px solid #1d486a;box-shadow:var(--shadow),0 0 80px rgba(69,153,255,.10)}.hero-logo img{display:block;border-radius:20px}.section{padding:64px 0}.section.alt{background:linear-gradient(180deg,rgba(7,20,39,.66),rgba(9,12,30,.72));border-block:1px solid rgba(91,160,220,.12)}.section-head{text-align:center;max-width:830px;margin:0 auto 34px}.section-head h2{font-size:clamp(2rem,4.2vw,3.7rem);line-height:1.05;letter-spacing:-.04em;margin:8px 0 14px}.section-head p{color:#b7c6da;font-size:1.05rem}.grid{display:grid;gap:16px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.card{background:linear-gradient(145deg,rgba(12,32,56,.92),rgba(6,16,31,.94));border:1px solid #1d3d5b;border-radius:var(--radius);padding:24px;box-shadow:inset 0 1px rgba(255,255,255,.04),0 16px 38px rgba(0,0,0,.2)}.card:hover{border-color:#27648d}.card .num{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#0c3851;border:1px solid #24749a;color:#69e7ff;font-weight:900}.card h3{margin:18px 0 8px}.card p{color:#bdcadb;margin:0}.feature-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#0d4565,#08243d);border:1px solid #236484;font-size:1.3rem}.command{background:linear-gradient(145deg,#071a2d,#0b1230);border:1px solid #28547b;border-radius:28px;padding:26px;box-shadow:var(--shadow)}.command-tabs{display:flex;gap:8px;flex-wrap:wrap}.command-tabs button{background:#09182b;color:#dce9f9;border:1px solid #234766;padding:12px 16px;border-radius:11px;font-weight:900;cursor:pointer}.command-tabs button.active{background:linear-gradient(180deg,#27cffc,#2066e5);border-color:#63e4ff;color:#fff}.dropzone{margin-top:18px;padding:52px 24px;border:2px dashed #26789c;border-radius:23px;text-align:center;background:radial-gradient(circle at center,rgba(46,204,255,.06),transparent 60%)}.dropzone.drag{border-color:#61ef91;background:rgba(62,221,137,.07)}.dropzone input{position:absolute;opacity:0;pointer-events:none}.metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:22px}.gauge-card{min-height:236px;text-align:center;padding:18px 12px;background:linear-gradient(145deg,#08192c,#050c18);border:1px solid #1d4160;border-radius:20px}.gauge{--p:0;--c:var(--green);width:142px;height:142px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;background:radial-gradient(circle,#07101c 56%,transparent 57%),conic-gradient(var(--c) calc(var(--p)*1%),#172432 0);box-shadow:inset 0 0 18px #000,0 0 24px color-mix(in srgb,var(--c) 28%,transparent);position:relative}.gauge:before{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 3px 7px rgba(255,255,255,.05),0 3px 7px #000}.gauge strong{font-size:1.55rem;z-index:2}.gauge-card h3{font-size:.96rem;margin:5px 0}.gauge-card small{color:#8698ae}.metric-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:12px}.stat{padding:14px;border-radius:14px;background:#07111f;border:1px solid #1c3852}.stat b{font-size:1.15rem;display:block}.stat span{font-size:.76rem;color:#8fa1b8;text-transform:uppercase;letter-spacing:.08em}.app-shell{padding:36px 0 72px}.app-header{margin-bottom:18px}.app-nav{display:flex;gap:7px;overflow-x:auto;padding:7px;background:#050d19;border:1px solid #1b334a;border-radius:16px;position:sticky;top:87px;z-index:30}.app-nav a{white-space:nowrap;text-decoration:none;padding:10px 14px;border-radius:10px;font-weight:850;color:#d6e2f1}.app-nav a.active,.app-nav a:hover{background:#0e3151;color:#fff}.tool-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.panel{background:rgba(6,17,32,.93);border:1px solid #1b3d5b;border-radius:20px;padding:22px}.panel h2,.panel h3{margin-top:0}.field{display:grid;gap:7px;margin:12px 0}.field label{font-weight:850;color:#d9e9f8}.field input,.field select,.field textarea{width:100%;padding:12px 13px;border-radius:10px;border:1px solid #28506f;background:#061426;color:white}.field textarea{min-height:130px}.table-wrap{overflow:auto;border:1px solid #1b374f;border-radius:14px}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{text-align:left;padding:12px;border-bottom:1px solid #183148}.table th{color:#77e5ff;background:#071321;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em}.status{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:.72rem;font-weight:900;border:1px solid #28506c}.status.good{color:#7cf2a2;background:#092619;border-color:#17683b}.status.warn{color:#ffd873;background:#2b2108;border-color:#735315}.status.bad{color:#ff9da6;background:#2b0d12;border-color:#74242c}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.asset{background:#071321;border:1px solid #1d3d57;border-radius:14px;overflow:hidden}.asset .thumb{aspect-ratio:4/3;display:grid;place-items:center;background:#020914}.asset img{width:100%;height:100%;object-fit:contain}.asset .meta{padding:12px}.asset .meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asset .meta small{color:#8fa3bb}.result-box{padding:15px;border:1px solid #245277;background:#07192c;border-radius:13px;color:#cce5f8}.legal{max-width:940px;margin:auto}.legal h1{font-size:clamp(2.6rem,5vw,4.5rem);line-height:1}.legal h2{margin-top:36px}.legal p,.legal li{color:#c7d3e2}.legal .updated{color:#7ee9ff;font-weight:800}.site-footer{border-top:1px solid #162f47;background:#020812;padding:48px 0 24px}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}.footer-grid h4{margin:0 0 10px;color:#77e7ff}.footer-grid a{display:block;text-decoration:none;color:#aebed1;margin:5px 0}.footer-logo{display:flex;align-items:center;gap:12px}.footer-logo img{width:58px;height:58px;border-radius:14px}.footer-bottom{border-top:1px solid #13283c;margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#899bb1;font-size:.84rem}.notice{background:#091c2e;border-left:4px solid #39d7ff;padding:14px 16px;border-radius:8px;color:#caddf0}.offline-banner{display:none;position:fixed;right:18px;bottom:18px;background:#2b2108;border:1px solid #735315;color:#ffe087;padding:12px 15px;border-radius:12px;z-index:80}.offline-banner.show{display:block}
@media(max-width:1080px){.menu{display:none;position:absolute;top:78px;left:18px;right:18px;padding:12px;flex-direction:column;background:#061326;border:1px solid #21425e;border-radius:15px;align-items:stretch}.menu.open{display:flex}.mobile-toggle{display:inline-flex}.hero-grid,.tool-grid{grid-template-columns:1fr}.hero-logo{max-width:760px;margin:auto}.metrics{grid-template-columns:repeat(3,1fr)}.metric-strip{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.wrap{width:min(100% - 22px,var(--max))}.nav{min-height:68px}.brand img{width:46px;height:46px}.brand b{font-size:1rem}.nav-actions .btn:not(.primary){display:none}.hero{padding-top:42px}.hero h1{font-size:clamp(2.7rem,14vw,4.5rem)}.grid-3,.grid-4,.footer-grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}.metric-strip{grid-template-columns:repeat(2,1fr)}.gauge{width:126px;height:126px}.section{padding:48px 0}.footer-bottom{flex-direction:column}.command{padding:16px}}


/* v1.0.1 — format/width merchandising + universal PWA install experience */
.format-showcase{background:radial-gradient(circle at 18% 8%,rgba(44,161,255,.12),transparent 28%),radial-gradient(circle at 82% 18%,rgba(31,226,181,.09),transparent 24%)}
.format-badges{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}.format-badges span{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;border-radius:15px;border:1px solid rgba(93,203,255,.28);background:linear-gradient(145deg,rgba(22,64,98,.75),rgba(8,31,54,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 24px rgba(0,0,0,.16);font-weight:900;color:#e8fbff;letter-spacing:.02em}.format-badges.compact span{min-height:38px;padding:7px 12px;border-radius:11px;font-size:.86rem}.width-showcase,.format-callout,.capability-banner{margin-top:22px;padding:24px;border:1px solid rgba(85,234,198,.18);border-radius:22px;background:linear-gradient(145deg,rgba(8,31,54,.72),rgba(6,20,38,.8));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}.width-showcase h3{margin-top:0}.width-chips{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px;margin-top:16px}.width-chips span{display:grid;place-items:center;min-height:44px;padding:8px;border:1px solid rgba(91,172,255,.18);border-radius:12px;background:rgba(8,26,47,.9);color:#aeeeff;font-weight:850;font-size:.86rem}.width-chips.compact{grid-template-columns:repeat(8,minmax(0,1fr))}.pwa-promo-card{padding:36px;border:1px solid rgba(79,225,255,.22);border-radius:28px;background:radial-gradient(circle at 80% 20%,rgba(44,209,255,.14),transparent 30%),linear-gradient(145deg,#0b223d,#07182c);box-shadow:0 26px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)}
.nav-actions [data-install]{display:inline-flex}.nav-actions [data-install].is-installed{opacity:.65;cursor:default}
html.oip-install-open,html.oip-install-open body{overflow:hidden}.oip-install-overlay{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:20px;background:rgba(2,9,18,.78);backdrop-filter:blur(18px) saturate(130%);opacity:0;visibility:hidden;transition:.22s ease;overflow:auto}.oip-install-overlay.is-visible{opacity:1;visibility:visible}.oip-install-card{position:relative;width:min(620px,100%);padding:30px;border-radius:30px;border:1px solid rgba(83,214,255,.32);background:radial-gradient(circle at 50% -10%,rgba(62,173,255,.2),transparent 35%),linear-gradient(155deg,#0d2745,#061524 72%);box-shadow:0 40px 120px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.1);text-align:center;transform:translateY(18px) scale(.98);transition:.22s ease}.oip-install-overlay.is-visible .oip-install-card{transform:none}.oip-install-close{position:absolute;right:16px;top:14px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(130,196,231,.24);background:rgba(5,20,35,.72);color:#dff7ff;font-size:25px;cursor:pointer}.oip-install-logo-wrap{width:min(72vw,310px);margin:0 auto 12px;padding:8px;border-radius:22px;background:rgba(5,19,34,.66);border:1px solid rgba(97,218,255,.18);box-shadow:0 18px 50px rgba(0,0,0,.22)}.oip-install-logo{display:block;width:100%;height:auto;border-radius:16px}.oip-install-kicker{color:#64e7ff;font-size:11px;font-weight:950;letter-spacing:1.6px}.oip-install-card h2{margin:9px 0 10px;font-size:clamp(28px,5vw,42px);line-height:1.04;color:#fff}.oip-install-lead{margin:0 auto;max-width:530px;color:#bed2e4;line-height:1.65}.oip-install-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:20px 0 14px}.oip-install-grid span{padding:10px 12px;border:1px solid rgba(83,186,244,.17);border-radius:12px;background:rgba(6,25,44,.62);color:#d9f4ff;font-size:.82rem;font-weight:760}.oip-install-note{margin:14px 0;padding:13px 14px;border:1px solid rgba(87,241,170,.28);border-radius:13px;background:rgba(27,111,86,.12);color:#bff7df;line-height:1.5}.oip-install-note.is-highlighted{border-color:#65f0ad;box-shadow:0 0 24px rgba(73,240,165,.2)}.oip-install-actions{display:grid;grid-template-columns:1.55fr 1fr;gap:11px;margin-top:18px}.oip-install-primary,.oip-install-secondary{min-height:54px;padding:10px 16px;border-radius:13px;font-weight:900;cursor:pointer}.oip-install-primary{border:1px solid #78ebff;color:#031421;background:linear-gradient(180deg,#73edff,#42c9f0);box-shadow:0 13px 28px rgba(48,190,239,.23),inset 0 1px 0 rgba(255,255,255,.7)}.oip-install-secondary{border:1px solid rgba(134,183,221,.28);color:#dbeaf6;background:rgba(9,30,50,.85)}.oip-install-card small{display:block;margin-top:18px;color:#7690a8;letter-spacing:.45px;text-transform:uppercase;font-weight:800}
@media(max-width:1000px){.width-chips,.width-chips.compact{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.width-chips,.width-chips.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.oip-install-overlay{place-items:end center;padding:10px}.oip-install-card{padding:24px 16px 20px;border-radius:24px}.oip-install-grid,.oip-install-actions{grid-template-columns:1fr}.format-badges{gap:8px}.format-badges span{flex:1 1 calc(50% - 8px)}}
@media(prefers-reduced-motion:reduce){.oip-install-overlay,.oip-install-card{transition:none!important}}/* =========================================================
   OMEGA IMAGE PRO — PREMIUM SITE-WIDE FOOTER
   Applies to all pages using .site-footer
   ========================================================= */

.site-footer {
    position: relative;
    width: 100%;
    margin-top: 72px;
    padding: 64px 0 28px;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(40, 180, 220, 0.10),
            transparent 34%
        ),
        radial-gradient(
            circle at 85% 100%,
            rgba(40, 220, 170, 0.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #071526 0%,
            #06111f 48%,
            #040b13 100%
        );

    border-top: 1px solid rgba(90, 210, 235, 0.16);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025),
        0 -20px 60px rgba(0,0,0,0.18);

    overflow: hidden;
}


/* subtle top glow line */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(85, 220, 240, 0.75),
            rgba(72, 220, 178, 0.52),
            transparent
        );

    opacity: 0.72;
    pointer-events: none;
}


.site-footer .wrap {
    width: min(1180px, calc(100% - 36px));
    margin-inline: auto;
}


/* =========================================================
   MAIN FOOTER GRID
   ========================================================= */

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(150px, 1fr));

    gap: 42px;

    align-items: start;
}


/* =========================================================
   BRAND / INTRO COLUMN
   ========================================================= */

.site-footer .footer-grid > div:first-child {
    padding-right: 12px;
}


.site-footer .footer-logo {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 18px;
}


.site-footer .footer-logo img {
    flex: 0 0 auto;

    width: 58px;
    height: 58px;

    object-fit: contain;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(21, 63, 104, 0.9),
            rgba(7, 25, 46, 0.95)
        );

    border: 1px solid rgba(75, 205, 232, 0.24);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 10px 24px rgba(0,0,0,0.28),
        0 0 20px rgba(64, 200, 225, 0.08);
}


.site-footer .footer-logo b {
    display: block;

    color: #ffffff;

    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.15;

    letter-spacing: -0.02em;
}


.site-footer .footer-logo div div {
    margin-top: 4px;

    color: #8fa9bf !important;

    font-size: 0.88rem;
    font-weight: 600;

    line-height: 1.35;
}


.site-footer .footer-grid > div:first-child > p {
    max-width: 470px;

    margin: 0;

    color: #9fb4c7 !important;

    font-size: 0.98rem;
    line-height: 1.75;
}


/* =========================================================
   FOOTER COLUMN HEADINGS
   ========================================================= */

.site-footer .footer-grid h4 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;

    letter-spacing: 0.02em;
    text-transform: uppercase;

    position: relative;
}


.site-footer .footer-grid h4::after {
    content: "";

    display: block;

    width: 34px;
    height: 2px;

    margin-top: 9px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #43c9e6,
            #36d3a0
        );

    box-shadow:
        0 0 12px rgba(67, 201, 230, 0.28);
}


/* =========================================================
   FOOTER LINKS
   ========================================================= */

.site-footer .footer-grid > div:not(:first-child) {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.site-footer .footer-grid a {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    max-width: 100%;

    color: #9fb2c7;

    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.4;

    text-decoration: none;

    transition:
        color 160ms ease,
        transform 160ms ease,
        text-shadow 160ms ease;
}


.site-footer .footer-grid a::before {
    content: "";

    width: 5px;
    height: 5px;

    margin-right: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: rgba(72, 202, 228, 0.48);

    box-shadow:
        0 0 8px rgba(72, 202, 228, 0.14);

    transition:
        background 160ms ease,
        box-shadow 160ms ease;
}


.site-footer .footer-grid a:hover {
    color: #ffffff;

    transform: translateX(3px);

    text-shadow:
        0 0 10px rgba(72, 202, 228, 0.20);
}


.site-footer .footer-grid a:hover::before {
    background: #42d6b0;

    box-shadow:
        0 0 10px rgba(66, 214, 176, 0.4);
}


.site-footer .footer-grid a:focus-visible {
    outline: 2px solid rgba(72, 202, 228, 0.75);
    outline-offset: 4px;

    border-radius: 4px;
}


/* =========================================================
   FOOTER BOTTOM BAR
   ========================================================= */

.site-footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    margin-top: 46px;
    padding-top: 24px;

    border-top: 1px solid rgba(160, 190, 215, 0.10);

    color: #8097ab;

    font-size: 0.88rem;
    line-height: 1.5;
}


.site-footer .footer-bottom span {
    min-width: 0;
}


.site-footer .footer-bottom span:last-child {
    text-align: right;

    overflow-wrap: anywhere;
}


/* =========================================================
   OFFLINE BANNER
   ========================================================= */

.offline-banner {
    position: fixed;

    left: 50%;
    bottom: 18px;

    z-index: 9999;

    transform: translate(-50%, calc(100% + 40px));

    width: min(520px, calc(100% - 28px));

    padding: 13px 18px;

    border: 1px solid rgba(72, 202, 228, 0.32);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(8, 32, 55, 0.98),
            rgba(4, 19, 34, 0.98)
        );

    color: #dcebf6;

    font-size: 0.92rem;
    font-weight: 700;

    text-align: center;

    box-shadow:
        0 16px 40px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.06);

    opacity: 0;
    pointer-events: none;

    transition:
        transform 220ms ease,
        opacity 220ms ease;
}


/*
 * Supports common classes JS may apply.
 * Either .show, .active or body.offline will display it.
 */
.offline-banner.show,
.offline-banner.active,
body.offline .offline-banner {
    transform: translate(-50%, 0);

    opacity: 1;
}


/* =========================================================
   LARGE TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 1050px) {

    .site-footer {
        padding-top: 56px;
    }

    .site-footer .footer-grid {
        grid-template-columns:
            minmax(280px, 1.5fr)
            repeat(2, minmax(160px, 1fr));

        gap: 34px;
    }

    /*
     * Legal becomes a full-width row beneath
     * the three upper columns.
     */
    .site-footer .footer-grid > div:nth-child(4) {
        grid-column: 1 / -1;

        display: grid;

        grid-template-columns:
            repeat(4, minmax(120px, max-content));

        column-gap: 28px;
        row-gap: 10px;

        padding-top: 8px;
    }

    .site-footer .footer-grid > div:nth-child(4) h4 {
        grid-column: 1 / -1;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

    .site-footer {
        margin-top: 56px;

        padding:
            48px
            0
            24px;
    }

    .site-footer .wrap {
        width: min(100% - 28px, 760px);
    }

    .site-footer .footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            36px
            28px;
    }

    .site-footer .footer-grid > div:first-child {
        grid-column: 1 / -1;

        padding-right: 0;
    }

    .site-footer .footer-grid > div:first-child > p {
        max-width: 620px;
    }

    .site-footer .footer-grid > div:nth-child(4) {
        grid-column: auto;

        display: flex;
        flex-direction: column;

        gap: 9px;

        padding-top: 0;
    }

    .site-footer .footer-grid > div:nth-child(4) h4 {
        grid-column: auto;
    }

    .site-footer .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        margin-top: 38px;
    }

    .site-footer .footer-bottom span:last-child {
        text-align: left;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .site-footer {
        padding:
            42px
            0
            22px;
    }

    .site-footer .wrap {
        width: min(100% - 24px, 520px);
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .site-footer .footer-grid > div:first-child {
        grid-column: auto;
    }

    .site-footer .footer-logo {
        align-items: flex-start;

        gap: 12px;
    }

    .site-footer .footer-logo img {
        width: 52px;
        height: 52px;

        border-radius: 13px;
    }

    .site-footer .footer-logo b {
        font-size: 1.12rem;
    }

    .site-footer .footer-grid > div:first-child > p {
        font-size: 0.94rem;
        line-height: 1.7;
    }

    .site-footer .footer-grid h4 {
        margin-bottom: 14px;

        font-size: 0.96rem;
    }

    .site-footer .footer-grid > div:not(:first-child) {
        padding:
            18px
            18px
            19px;

        border: 1px solid rgba(100, 200, 225, 0.10);

        border-radius: 16px;

        background:
            linear-gradient(
                145deg,
                rgba(11, 34, 57, 0.65),
                rgba(5, 20, 36, 0.62)
            );
    }

    .site-footer .footer-grid a {
        width: 100%;

        padding: 5px 0;

        font-size: 0.96rem;
    }

    .site-footer .footer-bottom {
        margin-top: 30px;
        padding-top: 20px;

        font-size: 0.82rem;

        text-align: left;
    }

    .offline-banner {
        bottom: 12px;

        width: calc(100% - 20px);

        padding: 12px 14px;

        font-size: 0.86rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 340px) {

    .site-footer .wrap {
        width: calc(100% - 18px);
    }

    .site-footer .footer-logo {
        flex-direction: column;
    }

    .site-footer .footer-grid > div:not(:first-child) {
        padding:
            16px
            14px
            17px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .site-footer .footer-grid a,
    .offline-banner {
        transition: none;
    }

    .site-footer .footer-grid a:hover {
        transform: none;
    }
}

/* ============================================================
   OMEGA IMAGE PRO
   COMPLETE SITE-WIDE ALL-DEVICE RESPONSIVE SYSTEM
   ------------------------------------------------------------
   ADD THIS ENTIRE BLOCK TO THE VERY BOTTOM OF:
   /assets/css/site.css

   PURPOSE:
   - Prevent all horizontal page overflow
   - Fully responsive header/navigation
   - Prevent Install PWA from pushing mobile layout sideways
   - Responsive hero / logo
   - Responsive cards / grids
   - Responsive gauges / metrics
   - Responsive application dashboard
   - Responsive forms / buttons / controls
   - Responsive tables
   - Responsive image libraries
   - Responsive legal/content pages
   - Responsive footer
   - Responsive PWA pop-out dialog + launcher
   - Responsive offline notification
   ============================================================ */


/* ============================================================
   1. GLOBAL RESPONSIVE FOUNDATION
   ============================================================ */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

main,
header,
footer,
section,
article,
aside,
nav,
div,
form,
fieldset {
    min-width: 0;
}

img,
picture,
video,
canvas,
svg,
iframe {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    object-fit: contain;
}

input,
select,
textarea,
button {
    max-width: 100%;
    font: inherit;
}

input,
select,
textarea {
    min-width: 0;
}

a,
button,
input,
select,
textarea {
    overflow-wrap: anywhere;
}

pre,
code {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.wrap {
    width: min(
        var(--max, 1280px),
        calc(100% - clamp(24px, 4vw, 40px))
    ) !important;

    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   2. HEADER / MAIN NAVIGATION
   ============================================================ */

.site-header {
    width: 100%;
    max-width: 100%;

    position: sticky;
    top: 0;

    z-index: 1000;

    overflow: visible;

    background: rgba(3, 10, 22, 0.92);

    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.site-header .wrap,
.site-header .nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.site-header .nav {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 78px;

    gap: clamp(8px, 1.35vw, 22px);
}


/* ============================================================
   BRAND
   ============================================================ */

.site-header .brand {
    display: flex;
    align-items: center;

    flex: 0 1 auto;

    gap: 12px;

    min-width: 0 !important;
    max-width: 100%;

    text-decoration: none;
}

.site-header .brand img {
    flex: 0 0 auto;

    width: 54px;
    height: 54px;

    max-width: 54px;

    object-fit: contain;
}

.site-header .brand span {
    min-width: 0;
}

.site-header .brand b {
    display: block;

    min-width: 0;

    white-space: nowrap;
}

.site-header .brand small {
    display: block;

    min-width: 0;

    white-space: nowrap;
}


/* ============================================================
   DESKTOP MENU
   ============================================================ */

.site-header .menu {
    display: flex;
    align-items: center;

    gap: 4px;

    margin-left: auto;

    min-width: 0;
    max-width: 100%;
}

.site-header .menu a {
    white-space: nowrap;
}


/* ============================================================
   NAV ACTION BUTTONS
   ============================================================ */

.site-header .nav-actions {
    display: flex;
    align-items: center;

    gap: 8px;

    flex: 0 0 auto;

    min-width: 0;
}

.site-header .nav-actions .btn,
.site-header .nav-actions button {
    white-space: nowrap;

    min-width: 0;
}


/* ============================================================
   3. BUTTONS
   ============================================================ */

.btn,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    max-width: 100%;

    text-align: center;

    line-height: 1.25;

    white-space: normal;

    word-break: normal;
}

.hero-actions,
.command-tabs {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}

.hero-actions > *,
.command-tabs > * {
    min-width: 0;
}


/* ============================================================
   4. HERO
   ============================================================ */

.hero {
    width: 100%;

    padding:
        clamp(42px, 6vw, 70px)
        0
        clamp(40px, 5vw, 54px);
}

.hero-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    gap: clamp(28px, 4vw, 54px);

    align-items: center;
}

.hero-grid > * {
    min-width: 0;
}

.hero h1 {
    max-width: 100%;

    font-size:
        clamp(
            2.55rem,
            6vw,
            6.1rem
        );

    overflow-wrap: normal;
    word-break: normal;
}

.hero p {
    max-width: 100%;

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.18rem
        );
}

.hero-logo {
    width: 100%;
    max-width: 100%;

    min-width: 0;
}

.hero-logo picture,
.hero-logo img {
    width: 100%;
    max-width: 100%;

    height: auto;
}


/* ============================================================
   5. TRUST / CHIP ROWS
   ============================================================ */

.trust-row,
.format-badges,
.width-chips {
    width: 100%;
    max-width: 100%;
}

.trust-row {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.chip {
    max-width: 100%;

    white-space: normal;

    text-align: center;
}


/* ============================================================
   6. SECTIONS
   ============================================================ */

.section {
    width: 100%;

    padding:
        clamp(42px, 5vw, 64px)
        0;
}

.section-head {
    width: 100%;
    max-width: min(830px, 100%);

    margin-left: auto;
    margin-right: auto;
}

.section-head h1,
.section-head h2,
.section-head h3 {
    max-width: 100%;
}

.section-head p {
    max-width: 100%;
}


/* ============================================================
   7. UNIVERSAL GRIDS
   ============================================================ */

.grid {
    width: 100%;

    display: grid;

    gap: clamp(14px, 1.7vw, 20px);
}

.grid > * {
    min-width: 0;
    max-width: 100%;
}

.grid-3 {
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
}

.grid-4 {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}


/* ============================================================
   8. CARDS
   ============================================================ */

.card {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    overflow: hidden;
}

.card h1,
.card h2,
.card h3,
.card h4,
.card p {
    max-width: 100%;

    overflow-wrap: anywhere;
}


/* ============================================================
   9. COMMAND CENTER
   ============================================================ */

.command {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    padding:
        clamp(
            18px,
            2.4vw,
            26px
        );
}

.command-tabs {
    width: 100%;
    max-width: 100%;
}

.command-tabs button {
    flex: 0 1 auto;
}


/* ============================================================
   10. APP SHELL
   ============================================================ */

.app-shell {
    width: 100%;

    padding:
        clamp(28px, 4vw, 36px)
        0
        clamp(52px, 6vw, 72px);
}

.app-header {
    width: 100%;
    max-width: 100%;
}


/* ============================================================
   APPLICATION NAVIGATION
   ============================================================ */

.app-nav {
    width: 100%;
    max-width: 100%;

    display: flex;

    gap: 7px;

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-inline: contain;

    scrollbar-width: thin;

    -webkit-overflow-scrolling: touch;
}

.app-nav a {
    flex: 0 0 auto;

    white-space: nowrap;
}


/* ============================================================
   11. TOOL / DASHBOARD GRIDS
   ============================================================ */

.tool-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 0.85fr);

    gap:
        clamp(
            14px,
            2vw,
            18px
        );
}

.tool-grid > * {
    min-width: 0;
}


/* ============================================================
   12. PANELS
   ============================================================ */

.panel {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    overflow: hidden;

    padding:
        clamp(
            17px,
            2.4vw,
            22px
        );
}

.panel > * {
    max-width: 100%;
}


/* ============================================================
   13. FORMS / INPUTS
   ============================================================ */

.field {
    width: 100%;
    max-width: 100%;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    max-width: 100%;

    min-width: 0;
}

textarea {
    resize: vertical;
}


/* ============================================================
   CHECKBOX / RADIO LABEL PROTECTION
   ============================================================ */

.field label {
    max-width: 100%;

    overflow-wrap: anywhere;
}

.field label:has(input[type="checkbox"]),
.field label:has(input[type="radio"]) {
    display: flex;
    align-items: center;

    gap: 8px;
}

.field input[type="checkbox"],
.field input[type="radio"] {
    width: auto;
    max-width: none;

    flex: 0 0 auto;
}


/* ============================================================
   14. DROP ZONE
   ============================================================ */

.dropzone {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    padding:
        clamp(
            30px,
            5vw,
            52px
        )
        clamp(
            16px,
            3vw,
            24px
        );

    overflow: hidden;
}


/* ============================================================
   15. METRIC GAUGES
   ============================================================ */

.metrics {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap:
        clamp(
            10px,
            1.4vw,
            14px
        );
}

.metrics > * {
    min-width: 0;
}

.gauge-card {
    width: 100%;

    min-width: 0;

    padding:
        clamp(
            14px,
            1.8vw,
            18px
        )
        clamp(
            8px,
            1vw,
            12px
        );
}

.gauge {
    width:
        clamp(
            104px,
            11vw,
            142px
        );

    height:
        clamp(
            104px,
            11vw,
            142px
        );

    max-width: 100%;
}


/* ============================================================
   16. METRIC STRIP
   ============================================================ */

.metric-strip {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: 10px;
}

.stat {
    width: 100%;

    min-width: 0;

    overflow: hidden;
}

.stat b,
.stat span {
    overflow-wrap: anywhere;
}


/* ============================================================
   17. PREVIEW / MEDIA ASSET GRID
   ============================================================ */

.preview-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                min(180px, 100%),
                1fr
            )
        );

    gap: 12px;
}

.asset {
    min-width: 0;
    max-width: 100%;
}

.asset .thumb {
    width: 100%;
}

.asset img {
    width: 100%;
    max-width: 100%;
}


/* ============================================================
   18. RESPONSIVE TABLES
   ============================================================ */

.table-wrap {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-inline: contain;
}

.table {
    width: 100%;

    min-width: 760px;
}

.table th,
.table td {
    vertical-align: top;
}


/* ============================================================
   19. WIDTH CHIP RESPONSIVE LADDER
   ============================================================ */

.width-showcase {
    width: 100%;
    max-width: 100%;
}

.width-chips {
    display: grid !important;

    grid-template-columns:
        repeat(
            8,
            minmax(0, 1fr)
        ) !important;

    gap:
        clamp(
            10px,
            1.4vw,
            18px
        ) !important;

    width: 100%;
    max-width: 100%;

    padding: 0 !important;
}

.width-chips span {
    display: flex !important;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;

    min-height: 58px;

    padding:
        13px
        8px;

    white-space: nowrap;

    text-align: center;
}


/* ============================================================
   20. FORMAT BADGES
   ============================================================ */

.format-badges {
    display: grid;

    grid-template-columns:
        repeat(
            8,
            minmax(0, 1fr)
        );

    gap: 12px;
}

.format-badges span {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;

    text-align: center;
}


/* ============================================================
   21. LEGAL / TEXT CONTENT
   ============================================================ */

.legal {
    width: min(940px, 100%);

    max-width: 100%;

    margin-left: auto;
    margin-right: auto;
}

.legal h1,
.legal h2,
.legal h3,
.legal h4,
.legal p,
.legal li {
    max-width: 100%;

    overflow-wrap: anywhere;
}

.legal ul,
.legal ol {
    max-width: 100%;

    padding-left:
        clamp(
            20px,
            4vw,
            34px
        );
}


/* ============================================================
   22. RESULT / NOTICE BOXES
   ============================================================ */

.result-box,
.notice {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    overflow-wrap: anywhere;
}


/* ============================================================
   23. FOOTER FOUNDATION
   ============================================================ */

.site-footer {
    width: 100%;
    max-width: 100%;

    overflow: hidden;
}

.site-footer .wrap {
    max-width: 100%;
}

.site-footer .footer-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(260px, 1.45fr)
        repeat(
            3,
            minmax(140px, 1fr)
        );

    gap:
        clamp(
            24px,
            3vw,
            42px
        );
}

.site-footer .footer-grid > * {
    min-width: 0;
}

.site-footer .footer-logo {
    max-width: 100%;
}

.site-footer .footer-logo img {
    flex: 0 0 auto;
}

.site-footer .footer-grid a,
.site-footer p,
.site-footer span {
    max-width: 100%;

    overflow-wrap: anywhere;
}

.site-footer .footer-bottom {
    width: 100%;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;
}


/* ============================================================
   24. OFFLINE BANNER
   ============================================================ */

.offline-banner {
    max-width:
        calc(
            100vw - 28px
        );

    overflow-wrap: anywhere;
}


/* ============================================================
   25. PWA INSTALL POP-UP
   OVERRIDES JAVASCRIPT-INJECTED PWA STYLES
   ============================================================ */

.oip-pwa-overlay {
    width: 100vw !important;
    max-width: 100vw !important;

    min-height: 100dvh;

    padding:
        max(
            12px,
            env(safe-area-inset-top)
        )
        max(
            12px,
            env(safe-area-inset-right)
        )
        max(
            12px,
            env(safe-area-inset-bottom)
        )
        max(
            12px,
            env(safe-area-inset-left)
        ) !important;

    overflow-y: auto;
    overflow-x: hidden;
}

.oip-pwa-card {
    width:
        min(
            620px,
            calc(
                100vw -
                28px
            )
        ) !important;

    max-width: 100% !important;

    max-height:
        calc(
            100dvh -
            28px
        ) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain;

    padding:
        clamp(
            20px,
            4vw,
            38px
        ) !important;
}

.oip-pwa-logo-shell {
    width:
        min(
            330px,
            78%
        ) !important;

    max-width: 100%;
}

.oip-pwa-logo-shell img,
.oip-pwa-logo-shell picture {
    width: 100%;
    max-width: 100%;

    height: auto;
}

.oip-pwa-card h2 {
    max-width: 100%;

    font-size:
        clamp(
            1.8rem,
            5vw,
            2.65rem
        ) !important;

    overflow-wrap: normal;
}

.oip-pwa-lead,
.oip-pwa-note,
.oip-pwa-foot {
    max-width: 100%;
}

.oip-pwa-benefits {
    width: 100%;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        ) !important;
}

.oip-pwa-benefits span {
    min-width: 0;

    overflow-wrap: anywhere;
}

.oip-pwa-actions {
    width: 100%;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(0, 1fr) !important;
}

.oip-pwa-actions button {
    width: 100%;

    min-width: 0;

    white-space: normal;
}


/* ============================================================
   26. FLOATING PWA INSTALL BUTTON
   ============================================================ */

.oip-pwa-launcher {
    max-width:
        min(
            300px,
            calc(
                100vw -
                24px
            )
        ) !important;

    right:
        max(
            12px,
            env(safe-area-inset-right)
        ) !important;

    bottom:
        max(
            12px,
            env(safe-area-inset-bottom)
        ) !important;

    white-space: normal !important;
}

.oip-pwa-launcher span {
    min-width: 0;

    overflow-wrap: anywhere;
}


/* ============================================================
   27. LARGE DESKTOP
   ============================================================ */

@media (min-width: 1400px) {

    .width-chips {
        grid-template-columns:
            repeat(
                8,
                minmax(0, 1fr)
            ) !important;
    }

    .format-badges {
        grid-template-columns:
            repeat(
                8,
                minmax(0, 1fr)
            );
    }
}


/* ============================================================
   28. LAPTOP / SMALL DESKTOP
   ============================================================ */

@media (max-width: 1200px) {

    .metrics {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .metric-strip {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .grid-4 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .width-chips {
        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            ) !important;
    }

    .format-badges {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }
}


/* ============================================================
   29. HEADER COLLAPSE / TABLET LANDSCAPE
   ============================================================ */

@media (max-width: 1080px) {

    .site-header .nav {
        min-height: 72px;

        gap: 9px;
    }

    .site-header .brand {
        flex: 1 1 auto;

        max-width:
            calc(
                100% -
                96px
            );
    }

    .site-header .menu {
        display: none;

        position: absolute;

        top:
            calc(
                100% +
                7px
            );

        left: 0;
        right: 0;

        z-index: 1002;

        width: 100%;
        max-width: 100%;

        margin: 0;

        padding: 12px;

        flex-direction: column;
        align-items: stretch;

        background:
            linear-gradient(
                145deg,
                rgba(
                    7,
                    26,
                    46,
                    .99
                ),
                rgba(
                    4,
                    15,
                    29,
                    .99
                )
            );

        border:
            1px solid
            rgba(
                72,
                202,
                228,
                .32
            );

        border-radius: 15px;

        box-shadow:
            0
            18px
            45px
            rgba(
                0,
                0,
                0,
                .45
            );

        overflow: hidden;
    }

    .site-header .menu.open {
        display: flex;
    }

    .site-header .menu a {
        width: 100%;

        padding:
            12px
            14px;

        white-space: normal;

        text-align: left;
    }

    .site-header .mobile-toggle {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        flex: 0 0 auto;

        margin-left: auto;

        white-space: nowrap;
    }


    /*
       CRITICAL:
       REMOVE INSTALL PWA BUTTON FROM HORIZONTAL
       TABLET/MOBILE HEADER SO IT CANNOT PUSH PAGE.
    */

    .site-header
    .nav-actions
    [data-install] {
        display: none !important;
    }

    .site-header .nav-actions {
        flex: 0 0 auto;
    }

    .tool-grid {
        grid-template-columns:
            1fr;
    }

    .footer-grid,
    .site-footer .footer-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .width-chips {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;
    }
}


/* ============================================================
   30. TABLET
   ============================================================ */

@media (max-width: 900px) {

    .hero-grid {
        grid-template-columns:
            1fr;

        gap: 34px;
    }

    .hero-logo {
        max-width: 720px;

        margin-left: auto;
        margin-right: auto;
    }

    .grid-3 {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .metrics {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .metric-strip {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .format-badges {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    .footer-grid,
    .site-footer .footer-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .site-footer
    .footer-grid
    > div:first-child {
        grid-column:
            1 /
            -1;
    }
}


/* ============================================================
   31. LARGE MOBILE / PORTRAIT TABLET
   ============================================================ */

@media (max-width: 720px) {

    .wrap {
        width:
            calc(
                100% -
                24px
            ) !important;
    }


    /* ---------------- HEADER ---------------- */

    .site-header .nav {
        min-height: 66px;

        gap: 8px;
    }

    .site-header .brand {
        max-width:
            calc(
                100% -
                80px
            );
    }

    .site-header .brand img {
        width: 44px;
        height: 44px;

        max-width: 44px;
    }

    .site-header .brand b {
        max-width: 100%;

        font-size: .98rem;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }

    .site-header .brand small {
        display: none;
    }

    /*
       Hide all top-right actions on phones.
       The PWA remains available via:
       - popout
       - floating installer
       - PWA page
    */

    .site-header .nav-actions {
        display: none !important;
    }

    .site-header .mobile-toggle {
        display: inline-flex;

        min-width: 60px;

        justify-content: center;
    }


    /* ---------------- HERO ---------------- */

    .hero {
        padding:
            38px
            0
            34px;
    }

    .hero h1 {
        font-size:
            clamp(
                2.2rem,
                11vw,
                4rem
            );

        line-height: 1.02;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-actions {
        display: grid;

        grid-template-columns:
            1fr;

        gap: 10px;
    }

    .hero-actions .btn,
    .hero-actions button {
        width: 100%;
    }

    .trust-row {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .trust-row .chip {
        width: 100%;
    }


    /* ---------------- CONTENT ---------------- */

    .section {
        padding:
            42px
            0;
    }

    .grid-3,
    .grid-4 {
        grid-template-columns:
            1fr;
    }

    .metrics {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .metric-strip {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .gauge {
        width:
            clamp(
                108px,
                34vw,
                142px
            );

        height:
            clamp(
                108px,
                34vw,
                142px
            );
    }

    .preview-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .width-chips {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;
    }

    .format-badges {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    /* ---------------- FOOTER ---------------- */

    .footer-grid,
    .site-footer .footer-grid {
        grid-template-columns:
            1fr;
    }

    .site-footer
    .footer-grid
    > div:first-child {
        grid-column: auto;
    }

    .footer-bottom,
    .site-footer .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 9px;
    }

    .site-footer
    .footer-bottom
    span:last-child {
        text-align: left;
    }


    /* ---------------- PWA POPUP ---------------- */

    .oip-pwa-overlay {
        place-items:
            end
            center !important;

        padding:
            10px !important;
    }

    .oip-pwa-card {
        width:
            100% !important;

        max-height:
            calc(
                100dvh -
                20px
            ) !important;

        border-radius:
            22px
            22px
            14px
            14px !important;

        padding:
            24px
            17px
            20px !important;
    }

    .oip-pwa-benefits {
        grid-template-columns:
            1fr !important;
    }

    .oip-pwa-actions {
        grid-template-columns:
            1fr !important;
    }

    .oip-pwa-actions button {
        min-height: 54px;
    }

    .oip-pwa-launcher {
        max-width:
            calc(
                100vw -
                24px
            ) !important;
    }
}


/* ============================================================
   32. STANDARD MOBILE
   ============================================================ */

@media (max-width: 560px) {

    .wrap {
        width:
            calc(
                100% -
                20px
            ) !important;
    }

    .panel,
    .card,
    .command {
        padding:
            18px;
    }

    .section-head {
        margin-bottom:
            26px;
    }

    .section-head h2 {
        font-size:
            clamp(
                1.8rem,
                9vw,
                2.65rem
            );
    }

    .metrics {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 10px;
    }

    .gauge-card {
        min-height: 205px;
    }

    .metric-strip {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .preview-grid {
        grid-template-columns:
            1fr;
    }

    .width-chips {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .width-chips span {
        min-height: 54px;

        font-size: 1rem;
    }

    .format-badges {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .table-wrap {
        border-radius: 11px;
    }

    .app-nav {
        border-radius: 12px;
    }

    .offline-banner {
        width:
            calc(
                100% -
                20px
            ) !important;

        left: 50% !important;

        right: auto !important;

        bottom:
            max(
                10px,
                env(
                    safe-area-inset-bottom
                )
            ) !important;

        transform:
            translate(
                -50%,
                calc(
                    100% +
                    40px
                )
            );
    }

    .offline-banner.show,
    .offline-banner.active,
    body.offline
    .offline-banner {
        transform:
            translate(
                -50%,
                0
            );
    }
}


/* ============================================================
   33. SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .site-header .nav {
        min-height: 62px;
    }

    .site-header .brand {
        max-width:
            calc(
                100% -
                72px
            );
    }

    .site-header .brand img {
        width: 39px;
        height: 39px;
    }

    .site-header .brand b {
        font-size: .88rem;
    }

    .site-header .mobile-toggle {
        min-width: auto;

        padding:
            9px
            10px;

        font-size: .8rem;
    }

    .hero h1 {
        font-size:
            clamp(
                2rem,
                11vw,
                3rem
            );
    }

    .eyebrow {
        font-size: .69rem;

        letter-spacing: .11em;
    }

    .trust-row {
        grid-template-columns:
            1fr;
    }

    .metrics {
        grid-template-columns:
            1fr;
    }

    .metric-strip {
        grid-template-columns:
            1fr;
    }

    .gauge-card {
        min-height: auto;

        padding:
            18px
            12px;
    }

    .gauge {
        width: 138px;
        height: 138px;
    }

    .format-badges {
        grid-template-columns:
            1fr
            1fr;
    }

    .width-chips {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .footer-logo {
        align-items: flex-start;
    }

    .oip-pwa-card h2 {
        font-size:
            1.75rem !important;
    }

    .oip-pwa-logo-shell {
        width:
            min(
                250px,
                72%
            ) !important;
    }

    .oip-pwa-launcher {
        right:
            max(
                10px,
                env(
                    safe-area-inset-right
                )
            ) !important;

        bottom:
            max(
                10px,
                env(
                    safe-area-inset-bottom
                )
            ) !important;

        max-width:
            calc(
                100vw -
                20px
            ) !important;

        min-height: 46px !important;

        padding:
            8px
            11px !important;

        font-size:
            12px !important;
    }

    .oip-pwa-launcher img {
        width: 30px !important;
        height: 30px !important;
    }
}


/* ============================================================
   34. VERY SMALL DEVICES
   ============================================================ */

@media (max-width: 340px) {

    .wrap {
        width:
            calc(
                100% -
                16px
            ) !important;
    }

    .site-header .brand img {
        width: 36px;
        height: 36px;
    }

    .site-header .brand b {
        font-size: .8rem;
    }

    .site-header .mobile-toggle {
        padding:
            8px
            8px;
    }

    .hero h1 {
        font-size: 1.9rem;
    }

    .panel,
    .card,
    .command {
        padding:
            15px;
    }

    .format-badges {
        grid-template-columns:
            1fr;
    }

    .width-chips {
        grid-template-columns:
            1fr !important;
    }

    .footer-logo {
        flex-direction: column;
    }
}


/* ============================================================
   35. LARGE / ULTRAWIDE SCREENS
   ============================================================ */

@media (min-width: 1800px) {

    :root {
        --max: 1380px;
    }

    .hero-grid {
        gap: 64px;
    }

    .section {
        padding:
            74px
            0;
    }
}


/* ============================================================
   36. LANDSCAPE MOBILE
   ============================================================ */

@media (
    max-height: 520px
)
and
(
    orientation: landscape
) {

    .site-header {
        position: relative;
    }

    .oip-pwa-card {
        max-height:
            calc(
                100dvh -
                14px
            ) !important;

        padding:
            16px
            18px !important;
    }

    .oip-pwa-logo-shell {
        width: 150px !important;

        margin-bottom:
            10px !important;
    }

    .oip-pwa-benefits {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }
}


/* ============================================================
   37. SAFE AREA SUPPORT
   iPHONE / NOTCH DEVICES
   ============================================================ */

@supports (
    padding:
        max(
            0px
        )
) {

    .site-header .wrap {
        padding-left:
            env(
                safe-area-inset-left
            );

        padding-right:
            env(
                safe-area-inset-right
            );
    }

    .site-footer {
        padding-bottom:
            max(
                24px,
                env(
                    safe-area-inset-bottom
                )
            );
    }
}


/* ============================================================
   38. TOUCH DEVICES
   ============================================================ */

@media (
    hover: none
)
and
(
    pointer: coarse
) {

    .btn,
    .button,
    .menu a,
    .app-nav a,
    .command-tabs button {
        min-height: 44px;
    }

    .site-footer a {
        min-height: 36px;
    }

    .card:hover {
        transform: none;
    }
}


/* ============================================================
   39. REDUCED MOTION
   ============================================================ */

@media (
    prefers-reduced-motion:
        reduce
) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}