/* =========================================================================
   Diwa X - diwaxapp.app
   Layout, type and component anatomy clone the ALL DIWA GAME reference.
   The accent is this brand's own teal; everywhere the reference paints
   #cc1ca8, this paints --accent.
   ========================================================================= */

:root{
  --accent:#0A7F84;        /* fills, chrome, 2px card rule. 4.83:1 on white  */
  --accent-deep:#065E62;   /* hover / pressed                                */
  --accent-soft:#E3F3F4;   /* tints                                          */
  --accent-ink:#06696D;    /* accent used as text at body size               */
  --page:#e6e9ef;
  --surface:#fff;
  --tint:#f7f8fa;
  --ink:#4c4c4c;
  --ink-strong:#444;
  --meta:#a7a7a7;
  --line:#eaeaea;
  --dark:#1d222d;
  --dark-deep:#13161d;
  --gold:#f9bd00;
  --track:#d4dae2;
  --dl-green:#5edd1f;
  --tg-blue:#006fa7;
  --shadow:2px 2px 2px 0 #e3e3e3;
  --r-box:20px;
  --r-pill:50px;
  --r-icon:25px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:'Open Sans',Arial,sans-serif;font-size:13px;line-height:25px;font-weight:400;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink);text-decoration:none;cursor:pointer;transition:color .2s ease}
a:hover{color:var(--accent-deep)}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3{margin:0}
ul{margin:0;padding:0}
.ic{width:24px;height:24px;flex:0 0 auto}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 var(--r-box) 0}
.skip:focus{left:0;color:#fff}

/* ---- One measure for header, content, footer and disclaimer (D1) ------- */
.container{max-width:1220px;margin:0 auto;padding:0 10px;position:relative}
#main-site>.container{display:flex;align-items:flex-start}
#main-site>.container.is-block{display:block}

/* ---------------------------------- header ----------------------------- */
#header{position:fixed;inset:0 0 auto 0;z-index:90;height:60px;background:var(--dark);border-bottom:2px solid var(--accent)}
#header .container{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center}
.logo img{height:40px;width:auto;object-fit:contain}
.menu-main-menu-container .menu{display:flex;align-items:center;list-style:none;gap:2px}
.menu-item a{display:block;padding:0 15px;line-height:35px;font-size:13px;font-weight:600;color:#fff;border-radius:var(--r-pill)}
.menu-item a:hover{color:#fff;background:rgba(255,255,255,.08)}
.menu-item.current-menu-item>a{background:var(--accent);color:#fff}
.menu-cta a{background:var(--accent);color:#fff}
.menu-cta a:hover{background:var(--accent-deep);color:#fff}
.menu-cta.current-menu-item>a{background:var(--accent-deep)}
.nav-tog{display:none;width:40px;height:40px;align-items:center;justify-content:center;color:#fff;border-radius:var(--r-box)}
.nav-tog-c{display:none}
.nav-open .nav-tog-o{display:none}
.nav-open .nav-tog-c{display:block}

/* --------------------------------- hero band --------------------------- */
#subheader{position:relative;padding:90px 0 40px;margin:0 0 20px;background:#000;color:#fff;text-align:center;border-bottom:2px solid var(--accent);overflow:hidden}
#subheader .imgbg{position:absolute;inset:0;overflow:hidden}
#subheader .imgbg img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120%;max-width:none;opacity:.3;object-fit:cover;height:100%}
#subheader::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.8) 100%)}
.subcontainer{position:relative;z-index:2;max-width:730px;margin:0 auto;padding:0 10px}
#subheader h1{font-size:40px;line-height:46px;font-weight:300;padding:0 0 20px;color:#fff}
#subheader h2{font-size:16px;line-height:30px;font-weight:300;color:#fff}

/* search */
#searchBox{position:relative;max-width:600px;margin:30px auto 0;display:flex}
.sb_search{flex:1;height:44px;border:0;border-radius:var(--r-pill);background:#f2f2f2;color:#43454b;font:400 16px/44px Arial,sans-serif;padding:0 90px 0 20px;box-shadow:inset 0 1px 1px rgba(0,0,0,.125);width:100%}
.sb_submit{position:absolute;right:0;top:0;width:70px;height:44px;border-radius:var(--r-pill);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.sb_submit:hover{background:var(--accent-deep)}
.sb-res{position:absolute;top:50px;left:0;right:0;z-index:20;background:#fff;border-radius:var(--r-box);box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden;text-align:left;display:none}
.sb-res.on{display:block}
.sb-res a{display:flex;align-items:center;gap:10px;padding:8px 14px;color:var(--ink);font-size:13px}
.sb-res a:hover,.sb-res a:focus{background:var(--accent-soft)}
.sb-res img{width:30px;height:30px;border-radius:8px}
.sb-none{padding:10px 14px;color:var(--meta);font-size:13px}

/* category row */
.cat-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:26px 0 0;list-style:none;position:relative;z-index:2}
.cat-row a{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.cat-row .cat-ic{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:.5;transition:opacity .2s ease,transform .2s ease}
.cat-row a:hover{color:#fff}
.cat-row a:hover .cat-ic,.cat-row a:focus-visible .cat-ic{opacity:1;transform:translateY(-2px)}
.cat-row .ic{width:20px;height:20px;color:#fff}

/* --------------------------------- sections ---------------------------- */
.sections{flex:1;min-width:0}
.section{margin:0 0 30px}
.title-section{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:400;line-height:1.3;color:var(--ink);margin:3px 10px 10px;padding:0 0 10px;border-bottom:1px solid var(--line)}
.title-section::before{content:"";width:34px;height:3px;border-radius:2px;background:var(--accent);flex:0 0 auto}
.baps{display:flex;flex-wrap:wrap}

/* grid tile */
.bav{padding:10px;text-align:center}
.bav1{width:16.6667%}
.bav-l{display:block;color:inherit}
.bav1 .bloque-imagen{display:block;position:relative;margin:0 15px;border-radius:var(--r-box);overflow:hidden;background:var(--tint);padding-bottom:calc(100% - 30px);box-shadow:var(--shadow)}
.bav1 .bloque-imagen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bav .title{display:block;font-size:14px;font-weight:600;color:var(--ink-strong);height:20px;line-height:20px;margin:10px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bav .version,.bav .developer{display:block;font-size:12px;line-height:18px;height:18px;color:var(--meta);margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bav1{border-bottom:2px solid transparent;transition:border-color .2s ease,transform .2s ease}
.bav1:hover{border-bottom-color:var(--accent);transform:translateY(-2px)}
.bav-l:hover .title{color:var(--accent-ink)}

/* wide tile */
.bav2{width:33.3333%;text-align:left}
.bav2 .bav-l{display:flex;gap:10px;align-items:flex-start}
.bav2 .bloque-imagen{flex:0 0 75px;width:75px;height:75px;border-radius:var(--r-box);overflow:hidden;background:var(--tint);box-shadow:var(--shadow)}
.bav2 .bloque-imagen img{width:75px;height:75px;object-fit:cover}
.bav2 .bap-c{min-width:0;flex:1}
.bav2 .title,.bav2 .version,.bav2 .developer{text-align:left}
.bav2{border-bottom:2px solid transparent;transition:border-color .2s ease}
.bav2:hover{border-bottom-color:var(--accent)}

/* rating */
.px-postmeta{margin:3px 0 0}
.bav1 .px-postmeta{display:flex;justify-content:center}
.box-rating{height:15px}
.rating{position:relative;display:inline-block;width:75px;height:15px;line-height:0;vertical-align:middle}
.rt-bg,.rt-fg{display:flex;position:absolute;left:0;top:0;height:15px}
.rt-bg{color:var(--track)}
.rt-fg{color:var(--gold);overflow:hidden}
.rating .st{width:15px;height:15px;flex:0 0 15px}

/* view more */
.more{display:block;width:225px;margin:10px auto 0;line-height:40px;border-radius:var(--r-pill);background:var(--accent);color:#fff;text-align:center;text-transform:uppercase;font-size:14px;font-weight:600;border-bottom:1px solid rgba(0,0,0,.3);transition:background .2s ease}
.more:hover{background:var(--accent-deep);color:#fff}

/* --------------------------------- sidebar ----------------------------- */
#sidebar{width:300px;flex:0 0 300px;margin:0 0 0 20px;position:sticky;top:20px;align-self:flex-start}
.widget{background:var(--surface);border-radius:var(--r-box);box-shadow:var(--shadow);padding:20px;margin:0 0 20px}
.widget-h{font-size:17px;font-weight:700;text-transform:uppercase;color:#ababab;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.widget-h::before{content:"";width:34px;height:3px;border-radius:2px;background:var(--accent);flex:0 0 auto}
.w-list{list-style:none}
.w-list li+li{margin-top:10px}
.w-list a{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:13px}
.w-list a:hover{color:var(--accent-ink)}
.w-list img{width:40px;height:40px;border-radius:12px;flex:0 0 auto;object-fit:cover;background:var(--tint)}
.w-list .wl-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.w-cats{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.w-cats a{display:inline-block;padding:3px 12px;border-radius:var(--r-box);background:var(--accent);color:#fff;font-size:13px;font-weight:600}
.w-cats a:hover{background:var(--accent-deep);color:#fff}

/* ------------------------------ editorial (C11) ------------------------ */
.box{background:var(--surface);border-radius:var(--r-box);box-shadow:var(--shadow);padding:20px 25px;margin:0 0 20px}
.ed-lede{margin:0 0 6px}
.ed-h1{font-size:38px;line-height:48px;font-weight:700;color:var(--ink);margin:0 0 12px}
.ed-lede p{font-size:15px;line-height:27px;margin:0 0 14px}
.ed-head{font-size:21px;line-height:27px;font-weight:700;color:var(--ink);text-align:start;margin:28px 0 6px;display:flex;align-items:center;gap:10px}
.ed-head::before{content:"";width:34px;height:3px;border-radius:2px;background:var(--accent);flex:0 0 auto}
.ed-intro p,.ed-prose p,.ed-pane p,.ed-body p{font-size:14px;line-height:25px;margin:0 0 15px}
.ed-intro{margin:0 0 6px}

.ed-grid{display:grid;gap:14px;margin:14px 0 8px}
.ed-grid.c4{grid-template-columns:repeat(4,1fr)}
.ed-grid.c3{grid-template-columns:repeat(3,1fr)}
.ed-card{background:var(--tint);outline:1px solid rgba(2,6,23,.08);border-radius:var(--r-box);padding:18px;border-bottom:2px solid var(--accent)}
.ed-card h3{font-size:15px;line-height:22px;font-weight:700;color:var(--ink-strong);margin:10px 0 8px}
.ed-card .ed-body p:last-child{margin-bottom:0}
.ed-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--accent-deep)}
.ed-ic .ic{width:20px;height:20px}

.ed-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 8px}
.ed-pane{background:var(--tint);outline:1px solid rgba(2,6,23,.08);border-radius:var(--r-box);padding:18px;border-bottom:2px solid var(--accent)}
.ed-pane p:last-child{margin-bottom:0}

.cta-band{position:relative;margin:30px 0 6px;padding:34px 30px;border-radius:var(--r-box);background:var(--dark);color:#fff;overflow:hidden;text-align:center}
.cta-band::after{content:"";position:absolute;width:420px;height:420px;right:-160px;top:-200px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 68%);opacity:.5}
.cta-band>*{position:relative;z-index:2}
/* .entry h2 sets text-align:start, so the band heading is centred explicitly. */
.cta-h{font-size:24px;line-height:32px;font-weight:700;color:#fff;margin:0 0 12px;text-align:center}
.cta-copy p{font-size:14px;line-height:25px;color:rgba(255,255,255,.82);margin:0 0 12px;text-align:center}
.cta-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:20px 0 0}
/* Scoped past .entry a so the label never renders accent-on-accent. */
.entry .hx-btn,a.hx-btn,.cta-acts a.hx-btn{display:inline-block;padding:0 26px;line-height:44px;border-radius:var(--r-pill);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;transition:background .2s ease,color .2s ease}
.entry .hx-pri,a.hx-pri,.cta-acts a.hx-pri{background:var(--accent);color:#fff}
.entry .hx-pri:hover,a.hx-pri:hover{background:#fff;color:var(--accent-deep)}
.entry .hx-gho,a.hx-gho,.cta-acts a.hx-gho{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.entry .hx-gho:hover,a.hx-gho:hover{background:#fff;color:var(--dark)}

/* FAQ accordion */
.faq{margin:14px 0 6px;display:grid;gap:10px}
.faq-i{background:var(--tint);outline:1px solid rgba(2,6,23,.08);border-radius:var(--r-box);border-bottom:2px solid var(--accent);overflow:hidden}
.faq-i>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;cursor:pointer;list-style:none}
.faq-i>summary::-webkit-details-marker{display:none}
.faq-i>summary::marker{content:""}
.faq-i>summary h3{font-size:15px;line-height:22px;font-weight:700;color:var(--ink-strong);margin:0}
.faq-cv{width:20px;height:20px;flex:0 0 auto;color:var(--accent-deep);transform:rotate(90deg);transition:transform .2s ease}
.faq-i[open]>summary .faq-cv{transform:rotate(-90deg)}
.faq-i>summary:hover h3{color:var(--accent-ink)}
.faq-a{padding:0 18px 14px}
.faq-a p{font-size:14px;line-height:25px;margin:0 0 10px}
.faq-a p:last-child,.faq-a ul:last-child{margin-bottom:0}

/* --------------------------- APK single page --------------------------- */
#subheader.sub-slim{padding:75px 25px 15px;margin:0 0 20px;background:var(--surface);border-bottom:0;border-radius:0 0 var(--r-box) var(--r-box);box-shadow:var(--shadow);text-align:left}
#subheader.sub-slim::after{display:none}
#subheader.sub-slim #searchBox{margin:0 auto;max-width:100%}

#subheader.sub-slim .cat-row a{color:var(--ink)}
#subheader.sub-slim .cat-row .cat-ic{opacity:.85}
.rate-row{flex-wrap:wrap;line-height:16px}
.breadcrumb{font-size:12px;color:var(--meta);margin:0 0 6px}
.breadcrumb a{color:var(--meta)}
.breadcrumb a:hover{color:var(--accent-ink)}

.app-s{flex:1;min-width:0}
.app-head{display:flex;gap:20px;align-items:flex-start}
/* Title block is emitted BEFORE the icon column in the DOM, then ordered
   back to the right, so the H1 precedes the download button for readers. */
.app-spe{order:2;flex:1;min-width:0}
.app-icb{order:1;flex:0 0 150px;width:150px}
.image-single{width:150px;height:150px;border-radius:var(--r-icon);overflow:hidden;background:var(--tint);box-shadow:var(--shadow)}
.image-single img{width:150px;height:150px;object-fit:cover}
.buttond{display:flex;align-items:center;gap:8px;position:relative;width:150px;min-height:33px;margin:10px 0 0;padding:8px 5px 8px 38px;border-radius:var(--r-box);font-size:12px;font-weight:700;text-transform:uppercase;color:#fff;transition:filter .2s ease}
.buttond:hover{filter:brightness(1.08);color:#fff}
.buttond .ic{position:absolute;left:0;top:0;bottom:0;width:30px;height:100%;padding:6px;background:rgba(0,0,0,.1);border-radius:var(--r-box) 0 0 var(--r-box)}
.downloadAPK{background:var(--dl-green)}
.buttond.t{background:var(--tg-blue)}
.link-report{display:block;width:150px;margin:10px 0 0;text-align:center;font-size:13px;color:#4d535f}
.rate-row{display:flex;align-items:center;gap:8px;width:150px;margin:12px 0 0;font-size:12px;color:var(--meta)}

h1.main-box-title{font-size:38px;line-height:48px;font-weight:700;color:var(--ink);margin:0 0 6px}
.app-spe .version{display:inline-block;font-size:20px;font-weight:600;color:#bbb}
.meta-cats{margin:10px 0 6px;display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.meta-cats a,.tags a{display:inline-block;padding:2px 12px 3px;border-radius:var(--r-box);background:var(--accent);color:#fff;font-size:12px;font-weight:600}
.meta-cats a:hover,.tags a:hover{background:var(--accent-deep);color:#fff}
.descripcion{font-size:13px;line-height:21px;margin:14px 0 6px;text-align:justify}

.data-app{display:flex;flex-wrap:wrap;margin:0 0 15px}
.da-s{width:33.3333%;padding:0 10px 0 0;margin:8px 0 0}
.da-s .da-k{display:block;font-size:12px;color:var(--meta);text-transform:uppercase;letter-spacing:.03em;line-height:16px}
.da-s .da-v{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:18px}

.box-social{margin:8px 0 0}
.botones_sociales{display:flex;flex-wrap:wrap;list-style:none;margin:0 -5px}
.botones_sociales li{margin:5px}
.botones_sociales a{display:flex;align-items:center;gap:6px;width:104px;min-height:31px;padding:0 10px 0 6px;border-radius:var(--r-box);font-size:11px;color:#fff;transition:filter .2s ease}
.botones_sociales a:hover{filter:brightness(1.12);color:#fff}
.botones_sociales .ic{width:16px;height:16px}
.s-fb{background:#4864a0}.s-tw{background:#1d9bf0}.s-pi{background:#bd081c}.s-tg{background:#229ed9}.s-wa{background:#25d366}

.box-title{font-size:17px;font-weight:700;text-transform:uppercase;color:#ababab;margin:0 0 15px;display:flex;align-items:center;gap:10px}
.box-title::before{content:"";width:34px;height:3px;border-radius:2px;background:var(--accent);flex:0 0 auto}
.new-badge{position:static;display:inline-block;margin:0 0 0 10px;padding:2px 12px;border-radius:var(--r-box);background:var(--accent);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;vertical-align:middle}

.entry{font-size:14px;line-height:25px}
.entry h2{font-size:21px;line-height:25px;font-weight:700;color:var(--ink);text-align:start;margin:20px 0}
.entry h3{font-size:17px;line-height:24px;font-weight:700;color:var(--ink-strong);margin:18px 0 8px}
.entry p{margin:0 0 15px}
.entry ul{margin:0 0 20px 15px;padding:0 0 0 18px;list-style:disc}
.entry li{margin:0 0 5px}
.entry a{color:var(--accent-ink)}
.entry .ed-head{margin-top:24px}

.rlat .baps{margin:0 -10px}
.rlat .bav1{width:20%}

/* --------------------------------- footer ------------------------------ */
#footer{background:var(--dark);color:#fff;border-top:2px solid var(--accent);margin:30px 0 0}
.footer-bottom{display:flex;flex-wrap:wrap;gap:30px;padding:34px 0}
.f-brand{display:flex;gap:14px;align-items:flex-start;flex:1 1 300px;min-width:260px}
.f-brand img{width:52px;height:52px;border-radius:14px;flex:0 0 auto}
.f-name{display:block;font-size:17px;font-weight:700;color:#fff}
.f-tag{font-size:13px;line-height:22px;color:rgba(255,255,255,.55);margin:4px 0 0}
.f-cols{display:flex;flex-wrap:wrap;gap:30px;flex:2 1 520px}
.f-col{flex:1 1 150px;min-width:150px}
.f-trust{flex:1.6 1 240px}
.f-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin:0 0 12px}
.f-col ul{list-style:none}
.f-col li+li{margin-top:8px}
.f-col a{color:rgba(255,255,255,.6);font-size:13px}
.f-col a:hover{color:#fff}
.f-trust-l li{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.6);font-size:13px;line-height:20px}
.f-trust-l .ic{width:18px;height:18px;color:var(--accent);margin-top:1px}
.f-base{background:var(--dark-deep);padding:14px 0}
.copy{margin:0;font-size:12px;line-height:20px;color:rgba(255,255,255,.4)}

.disclaimer-band{background:var(--dark-deep);border-top:1px solid rgba(255,255,255,.06);padding:16px 0 90px}
.disclaimer-band p{margin:0;display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:20px;color:rgba(255,255,255,.45)}
.disclaimer-band strong{color:rgba(255,255,255,.75)}
.disclaimer-band .ic{width:18px;height:18px;color:var(--accent);flex:0 0 auto;margin-top:1px}

/* floating CTA + back to top */
.tg-center-btn{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:10px;padding:13px 22px;border-radius:var(--r-pill);background:linear-gradient(135deg,#00c6ff,#0072ff,#8e2de2,#ff0080);background-size:300% 300%;color:#fff;font-size:15px;font-weight:800;box-shadow:0 10px 30px rgba(0,114,255,.45);animation:tgshift 9s ease infinite}
.tg-center-btn:hover{color:#fff}
.tg-center-btn .ic{width:20px;height:20px}
@keyframes tgshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
#backtotop{position:fixed;right:15px;bottom:80px;z-index:80;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:none;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.28)}
#backtotop.on{display:flex}
#backtotop:hover{background:var(--accent-deep)}

/* card reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .35s ease}
.rv.in{opacity:1;transform:none}

/* 404 */
.nf{text-align:center;padding:40px 0}
.nf h1{font-size:64px;line-height:1.1;font-weight:800;color:var(--accent)}
.nf p{font-size:15px;margin:10px 0 22px}

/* ------------------------------- responsive ---------------------------- */
@media (max-width:1439px){
  .bav1{width:20%}
}
@media (max-width:1199px){
  .bav1{width:25%}
  .ed-grid.c4{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1023px){
  #main-site>.container{display:block}
  #sidebar{position:static;width:auto;flex:none;margin:20px 0 0}
  .ed-grid.c4,.ed-grid.c3{grid-template-columns:repeat(3,1fr)}
  .bav1{width:25%}
  .rlat .bav1{width:33.3333%}
  .bav2{width:50%}
  #subheader h1{font-size:32px;line-height:40px}
}
@media (max-width:767px){
  body{font-size:16px;line-height:26px}
  .nav-tog{display:flex}
  /* The panel keeps its natural height and is hidden with visibility, not a
     max-height animation, so it can never get stuck collapsed. */
  .menu-main-menu-container{position:fixed;inset:60px 0 auto 0;background:var(--dark);border-bottom:2px solid var(--accent);max-height:calc(100dvh - 60px);overflow:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
  .nav-open .menu-main-menu-container{opacity:1;visibility:visible;transform:none}
  .menu-main-menu-container .menu{flex-direction:column;align-items:stretch;gap:0;padding:8px 10px 14px}
  .menu-item a{line-height:44px;font-size:16px;border-radius:12px}
  #subheader{padding:80px 0 34px}
  #subheader h1{font-size:28px;line-height:36px}
  #subheader h2{font-size:15px}
  .ed-grid.c4,.ed-grid.c3{grid-template-columns:repeat(2,1fr)}
  .ed-duo{grid-template-columns:1fr}
  .bav1{width:33.3333%}
  .rlat .bav1{width:33.3333%}
  .bav2{width:100%}
  .ed-h1{font-size:28px;line-height:36px}
  .ed-head,.entry h2{font-size:19px;line-height:26px}
  .entry,.entry p,.entry li,.ed-intro p,.ed-prose p,.ed-pane p,.ed-body p,.faq-a p{font-size:16px;line-height:26px}
  .app-head{flex-direction:column}
  .app-icb{order:1;flex:none;width:100%;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
  .app-spe{order:2}
  .image-single{width:120px;height:120px}
  .image-single img{width:120px;height:120px}
  .buttond,.link-report,.rate-row{width:calc(50% - 5px);margin-top:0}
  h1.main-box-title{font-size:28px;line-height:36px}
  .da-s{width:50%}
  .box,.widget{padding:18px 16px}
  .tg-center-btn{font-size:13px;padding:11px 18px}
}
@media (max-width:767px){
  .disclaimer-band{padding-bottom:104px}
}
@media (max-width:519px){
  .ed-grid.c4,.ed-grid.c3{grid-template-columns:1fr}
  .bav1,.rlat .bav1{width:50%}
  #subheader h1{font-size:24px;line-height:32px}
  .buttond,.link-report,.rate-row{width:100%}
  .da-s{width:100%}
  .cta-band{padding:26px 18px}
  .cta-acts a.hx-btn{width:100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ghost button on a light surface (404 / inline CTAs) */
.entry .hx-gho-l,a.hx-gho-l{display:inline-block;padding:0 26px;line-height:44px;border-radius:var(--r-pill);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--accent-deep);box-shadow:inset 0 0 0 2px var(--accent);transition:background .2s ease,color .2s ease}
.entry .hx-gho-l:hover,a.hx-gho-l:hover{background:var(--accent);color:#fff}
.nf .hx-btn,.nf .hx-gho-l{margin:0 4px}
.hi-note{margin:22px 0 0}
.hi-more{margin:16px 0 0;text-align:center}

/* -------------------------------------------------------------------------
   Specificity guards.
   `.entry h2` is (0,1,1) and beats a bare single-class heading rule, which
   silently repainted the CTA heading dark-on-dark, flattened the section
   heads and reset the uppercase box titles. Each of these is scoped under
   .entry so it out-specifies that rule.
   ------------------------------------------------------------------------- */
.entry h2.cta-h,h2.cta-h{font-size:24px;line-height:32px;font-weight:700;color:#fff;margin:0 0 12px;text-align:center}
.entry h2.ed-head,h2.ed-head{font-size:21px;line-height:27px;font-weight:700;color:var(--ink);text-align:start;margin:28px 0 6px;display:flex;align-items:center;gap:10px}
.entry h2.box-title,h2.box-title{font-size:17px;line-height:24px;font-weight:700;text-transform:uppercase;color:#ababab;margin:0 0 15px;display:flex;align-items:center;gap:10px;text-align:start}
.entry .widget-h,h2.widget-h{font-size:17px;line-height:24px;font-weight:700;text-transform:uppercase;color:#ababab;margin:0 0 14px}
.entry h2.f-h{font-size:12px}

/* one brand colour per category icon (reference anatomy) */
.cat-1{background:#0A7F84}.cat-2{background:#c2410c}.cat-3{background:#b45309}
.cat-4{background:#1d4ed8}.cat-5{background:#9333ea}.cat-6{background:#be123c}.cat-7{background:#047857}

/* Card CTA. Points at the detail page (C3), drawn in the reference's own
   pill language so it still reads as part of that card anatomy. */
.bav-btn{display:block;margin:8px 0 0;line-height:26px;border-radius:var(--r-box);background:var(--accent-soft);color:var(--accent-deep);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;text-align:center;transition:background .2s ease,color .2s ease}
.bav-btn:hover{background:var(--accent);color:#fff}
.bav2 .bav-btn{margin-top:10px}
@media (max-width:767px){.bav-btn{font-size:12px;line-height:30px}}