/* ==========================================================================
   FinBanks Guide — design system
   Institutional / news-hybrid. Borders, not shadows. Left-aligned.
   Accent (cloudberry) appears only in: focus rings, active language,
   the "live" dot, and best/emphasis markers.
   ========================================================================== */

:root{
  --c-primary:#155C74;
  --c-primary-dark:#0A3245;
  --c-accent:#BF5615;
  --c-bg:#F6F9FA;
  --c-surface:#FFFFFF;
  --c-text:#16232B;
  --c-muted:#5B6B76;
  --c-border:#D9E1E6;
  --c-band:#EAF1F4;
  --c-zebra:#F6F9FA;

  --radius-card:10px;
  --radius-ctl:6px;
  --container:1160px;
  --focus:2px solid var(--c-accent);

  --f-head:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* --- reset-ish ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-primary);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
table{border-collapse:collapse;width:100%}

/* tabular figures for data/UI */
.num,.stat__value,.newsitem__time,.bankcard__facts dd,table .num,.compare td,.compare th{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

/* --- base ---------------------------------------------------------------- */
body{
  font-family:var(--f-body);
  font-size:16px;line-height:1.6;
  color:var(--c-text);background:var(--c-bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1 0 auto;padding-bottom:4rem}
:lang(fi){hyphens:auto}

h1,h2,h3{font-family:var(--f-head);font-weight:600;line-height:1.15;letter-spacing:-0.01em;color:var(--c-text)}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.narrow{max-width:820px}
.muted{color:var(--c-muted)}
.micro{font-size:13px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lead{font-size:1.18rem;line-height:1.55;color:var(--c-text)}

/* --- focus + skip -------------------------------------------------------- */
:focus-visible{outline:var(--focus);outline-offset:2px;border-radius:2px}
.skip-link{position:absolute;left:12px;top:-48px;background:var(--c-primary-dark);color:#fff;padding:10px 16px;border-radius:var(--radius-ctl);z-index:200;transition:top .15s}
.skip-link:focus{top:12px;text-decoration:none}

/* --- utility bar --------------------------------------------------------- */
.utilbar{background:var(--c-primary-dark);color:#D7E3E9;font-size:13px}
.utilbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px}
.utilbar__brand{display:inline-flex;align-items:center;gap:9px;color:#fff}
.utilbar__brand:hover{text-decoration:none}
.utilbar__brand .mark{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:5px;background:var(--c-primary);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em}
.utilbar__name{font-weight:600;letter-spacing:.01em}
.utilbar__right{display:flex;align-items:center;gap:18px}
.updated{display:inline-flex;align-items:center;gap:7px;color:#9FB4C0;white-space:nowrap}
.updated .dot{width:7px;height:7px;border-radius:50%;background:#4ea38a;box-shadow:0 0 0 3px rgba(78,163,138,.18)}

/* language switch */
.langsw{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.langsw a{color:rgba(255,255,255,.7);padding:6px 2px;min-width:24px;text-align:center}
.langsw a:hover{color:#fff;text-decoration:none}
.langsw a.is-active{color:#fff;border-bottom:2px solid var(--c-accent)}
.langsw .sep{color:rgba(255,255,255,.28)}

/* --- masthead / nav ------------------------------------------------------ */
.masthead{background:var(--c-surface);border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:100}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:66px}
.wordmark{font-family:var(--f-head);font-size:24px;font-weight:600;color:var(--c-text);letter-spacing:-.01em}
.wordmark:hover{text-decoration:none}
.wordmark__dot{color:var(--c-accent)}
.mainnav{display:flex;align-items:center;gap:26px}
.mainnav a{color:var(--c-text);font-weight:500;font-size:15px;padding:6px 0;border-bottom:2px solid transparent}
.mainnav a:hover{color:var(--c-primary);text-decoration:none;border-bottom-color:var(--c-border)}
.mainnav a[aria-current="page"]{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:1px solid var(--c-border);border-radius:var(--radius-ctl);padding:9px 10px}
.nav-toggle span{width:20px;height:2px;background:var(--c-text);display:block}

/* --- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:11px 20px;border-radius:var(--radius-ctl);border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;text-align:center}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--c-primary);color:#fff}
.btn--primary:hover{background:var(--c-primary-dark)}
.btn--ghost{background:transparent;border-color:var(--c-primary);color:var(--c-primary)}
.btn--ghost:hover{background:var(--c-band)}
.btn--outline{background:var(--c-surface);border-color:var(--c-border);color:var(--c-primary)}
.btn--outline:hover{border-color:var(--c-primary)}

/* --- hero ---------------------------------------------------------------- */
.hero{padding:56px 0 40px;border-bottom:1px solid var(--c-border);background:var(--c-surface)}
.hero__grid{display:grid;grid-template-columns:7fr 5fr;gap:44px;align-items:center}
.hero__title{font-size:clamp(30px,4.2vw,48px);max-width:20ch}
.hero__standfirst{margin-top:16px;font-size:1.12rem;color:var(--c-muted);max-width:56ch}
.hero__cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

.livepanel{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-card);padding:22px}
.livepanel__head{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--c-muted);font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px}
.livepanel__stats{display:flex;flex-direction:column}
.stat{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--c-border)}
.stat:last-child{border-bottom:0}
.stat__label{color:var(--c-muted);font-size:14px}
.stat__value{font-size:30px;font-weight:600;font-family:var(--f-head)}
.stat__value--sm{font-size:22px}
.dot--live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c-accent)}

/* --- sections ------------------------------------------------------------ */
.section{padding:56px 0}
.section--band{background:var(--c-band);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.section__head--sm{margin-bottom:16px}
.section__title{font-size:clamp(22px,2.6vw,30px)}
.section__sub{color:var(--c-muted);margin-top:6px;max-width:60ch}
.section__link{font-weight:600;white-space:nowrap}

/* --- bank grid / cards --------------------------------------------------- */
.bankgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bankgrid--all{grid-template-columns:repeat(3,1fr)}
.bankcard{position:relative;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-card);padding:20px;transition:border-color .15s}
.bankcard:hover{border-color:var(--c-primary)}
.bankcard__link{position:absolute;inset:0;border-radius:var(--radius-card);z-index:1}
.bankcard__mono{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-ctl);color:#fff;font-weight:700;font-size:16px;letter-spacing:.01em;margin-bottom:14px}
.bankcard__name{font-size:21px;line-height:1.2}
.bankcard__cat{color:var(--c-muted);font-size:14px;margin-top:4px}
.bankcard__facts{display:flex;gap:26px;margin-top:16px;padding-top:14px;border-top:1px solid var(--c-border)}
.bankcard__facts dt{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted)}
.bankcard__facts dd{font-size:15px;font-weight:600;margin-top:2px}
.bankcard__more{display:inline-block;margin-top:16px;color:var(--c-primary);font-weight:600;font-size:14px;position:relative;z-index:2}
.bankcard:hover .bankcard__more{text-decoration:underline}

/* --- band grid (news + promo) ------------------------------------------- */
.band-grid{display:grid;grid-template-columns:8fr 4fr;gap:40px}
.band-side{display:flex;flex-direction:column;gap:18px}
.promo{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-card);padding:22px}
.promo__title{font-size:19px}
.promo__sub{color:var(--c-muted);font-size:14px;margin:8px 0 16px}
.promo__list{display:flex;flex-direction:column;gap:8px}
.promo__list a{font-weight:500}

/* --- news list ----------------------------------------------------------- */
.newslist{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-card);overflow:hidden}
.newslist--full{max-width:860px}
.newsitem{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:16px 20px;border-bottom:1px solid var(--c-border)}
.newsitem:last-child{border-bottom:0}
.newsitem__time{color:var(--c-muted);font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px;white-space:nowrap}
.newsitem__title{font-size:16px;font-weight:600;line-height:1.35;font-family:var(--f-body)}
.newsitem__title a{color:var(--c-text)}
.newsitem__title a:hover{color:var(--c-primary)}
.newsitem__title .ext{color:var(--c-muted);font-weight:400}
.newsitem__meta{margin-top:5px;font-size:13px;color:var(--c-muted)}
.newsitem__bank{color:var(--c-muted);font-weight:600}
.newsitem__bank:hover{color:var(--c-primary)}

/* --- breadcrumb / pagehead ---------------------------------------------- */
.breadcrumb{font-size:13px;color:var(--c-muted);padding:22px 0 0}
.breadcrumb a{color:var(--c-muted)}
.breadcrumb a:hover{color:var(--c-primary)}
.pagehead{padding:14px 0 30px;border-bottom:1px solid var(--c-border);margin-bottom:30px}
.pagehead__title{font-size:clamp(28px,3.6vw,40px)}
.pagehead__intro{margin-top:12px;color:var(--c-muted);max-width:70ch;font-size:1.05rem}

/* --- bank page ----------------------------------------------------------- */
.bankhead{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:18px 0 22px}
.bankhead__mono{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:var(--radius-card);color:#fff;font-weight:700;font-size:24px}
.bankhead__cat{color:var(--c-muted);font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.bankhead__title{font-size:clamp(26px,3.4vw,38px);margin-top:2px}
.bankhead__facts{color:var(--c-muted);font-size:14px;margin-top:6px}
.bankhead__ext{white-space:nowrap}
.anchornav{position:sticky;top:66px;z-index:40;display:flex;gap:22px;background:var(--c-bg);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);padding:10px 0;margin-bottom:8px;overflow-x:auto}
.anchornav a{font-weight:600;font-size:14px;color:var(--c-muted);white-space:nowrap}
.anchornav a:hover{color:var(--c-primary);text-decoration:none}
.bank-layout{display:grid;grid-template-columns:8fr 4fr;gap:40px;padding-top:22px}
.bank-main section{scroll-margin-top:130px}
.block__title{font-size:20px;margin-bottom:14px}
.facts-block,.news-block{margin-top:34px;padding-top:30px;border-top:1px solid var(--c-border)}
.ticklist{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.ticklist li{position:relative;padding-left:24px;color:var(--c-text)}
.ticklist li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border:2px solid var(--c-primary);border-radius:3px}
.services{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.services li{position:relative;padding-left:18px;color:var(--c-text)}
.services li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--c-primary)}

.glance{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-card);padding:22px;position:sticky;top:120px}
.glance__title{font-size:17px;margin-bottom:8px}
.glance dl>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--c-border)}
.glance dl>div:last-of-type{border-bottom:0}
.glance dt{color:var(--c-muted);font-size:13px}
.glance dd{font-weight:600;font-size:14px;text-align:right;max-width:60%}
.glance__link{display:inline-block;margin-top:12px;font-weight:600;font-size:14px}
.side-note{margin-top:18px;background:var(--c-band);border:1px solid var(--c-border);border-radius:var(--radius-card);padding:18px;font-size:13px;color:var(--c-muted)}
.side-note__rev{margin-top:8px}
.side-note__report{display:inline-block;margin-top:10px;font-weight:600}

/* --- comparison table ---------------------------------------------------- */
.table-wrap{position:relative;overflow-x:auto;border:1px solid var(--c-border);border-radius:0;background:var(--c-surface)}
.table-wrap:focus-visible{outline:var(--focus)}
.compare{min-width:900px;font-size:14px}
.compare caption{text-align:left}
.compare thead th{background:var(--c-primary-dark);color:#fff;font-weight:600;font-size:13px;text-align:left;padding:12px 14px;white-space:nowrap;position:sticky;top:0}
.compare tbody th,.compare tbody td{padding:12px 14px;border-bottom:1px solid var(--c-border);text-align:left;vertical-align:top}
.compare tbody tr:nth-child(even){background:var(--c-zebra)}
.compare .col-bank{position:sticky;left:0;background:var(--c-surface);min-width:210px;font-weight:600;box-shadow:1px 0 0 var(--c-border)}
.compare tbody tr:nth-child(even) .col-bank{background:var(--c-zebra)}
.compare .col-bank a{display:flex;align-items:center;gap:10px;color:var(--c-text)}
.compare .col-bank a:hover{color:var(--c-primary)}
.mono-sm{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:5px;color:#fff;font-size:11px;font-weight:700;flex:none}
.tick{font-weight:600;font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--c-border)}
.tick--yes{color:#1f6b4f;border-color:#bfe0d2}
.tick--no{color:var(--c-muted)}
.table-caption{margin-top:12px;font-size:14px;font-weight:600}
.table-note{margin-top:6px;font-size:13px;max-width:75ch}

/* --- guides -------------------------------------------------------------- */
.guidegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.guidecard{position:relative;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-card);padding:24px;transition:border-color .15s}
.guidecard:hover{border-color:var(--c-primary)}
.guidecard__link{position:absolute;inset:0;z-index:1}
.guidecard__title{font-size:21px;line-height:1.25}
.guidecard__sum{color:var(--c-muted);margin-top:10px;font-size:15px}
.guidecard__more{display:inline-block;margin-top:16px;color:var(--c-primary);font-weight:600;font-size:14px}
.guide__head{padding:14px 0 8px;border-bottom:1px solid var(--c-border);margin-bottom:26px}
.guide__title{font-size:clamp(28px,3.6vw,40px);max-width:24ch}
.guide-layout{display:grid;grid-template-columns:4fr 8fr;gap:40px}
.guide-toc{position:sticky;top:120px;align-self:start;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-card);padding:20px}
.guide-toc__h{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--c-muted);margin-bottom:12px}
.guide-toc ol{counter-reset:toc;display:flex;flex-direction:column;gap:9px}
.guide-toc li{counter-increment:toc}
.guide-toc a{font-size:14px;font-weight:500}
.guide-note{margin-top:24px;background:var(--c-band);border:1px solid var(--c-border);border-radius:var(--radius-card);padding:16px;font-size:14px;color:var(--c-muted)}
.backlink{font-weight:600}

/* --- prose --------------------------------------------------------------- */
.prose{max-width:72ch;color:var(--c-text)}
.prose h1{font-size:clamp(28px,3.6vw,40px);margin-bottom:14px}
.prose h2{font-size:22px;margin:32px 0 12px}
.prose p{margin-bottom:14px}
.prose ul{margin:0 0 16px;display:flex;flex-direction:column;gap:8px}
.prose ul li{position:relative;padding-left:20px}
.prose ul li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--c-primary)}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose .lead{margin-bottom:18px}
.legal h2{font-size:19px}
.legal-precedence{margin-top:28px;padding-top:16px;border-top:1px solid var(--c-border);font-size:13px}

/* --- sources ------------------------------------------------------------- */
.sources{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.source-item{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-card);padding:18px}
.source-item__h{font-size:17px;margin-bottom:10px}
.source-links{display:flex;flex-direction:column;gap:6px;font-size:14px}
.source-links a{word-break:break-word}
.source-feeds{margin-top:10px;font-size:12px}

/* --- contact form -------------------------------------------------------- */
.contact-form{max-width:620px;margin-top:8px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.field input,.field textarea{width:100%;font:inherit;padding:11px 13px;border:1px solid var(--c-border);border-radius:var(--radius-ctl);background:var(--c-surface);color:var(--c-text)}
.field input:focus,.field textarea:focus{outline:var(--focus);outline-offset:1px;border-color:var(--c-primary)}
.field-note{font-size:13px;margin-bottom:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{padding:14px 18px;border-radius:var(--radius-ctl);margin-bottom:22px;font-weight:500}
.notice--ok{background:#e7f4ee;border:1px solid #bfe0d2;color:#1f6b4f}
.notice--err{background:#fbeae6;border:1px solid #f0c8bd;color:#a13618}
.contact-direct{margin-top:34px;padding-top:22px;border-top:1px solid var(--c-border)}
.linkbtn{background:none;border:0;color:var(--c-primary);text-decoration:underline;padding:0;font:inherit}

/* --- cookie table -------------------------------------------------------- */
.cookie-table{font-size:13px;margin:12px 0 8px;border:1px solid var(--c-border)}
.cookie-table th,.cookie-table td{border:1px solid var(--c-border);padding:8px 10px;text-align:left}
.cookie-table thead th{background:var(--c-band)}

/* --- trust bar ----------------------------------------------------------- */
.trustbar{background:var(--c-band);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
.trustbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;flex-wrap:wrap}
.trustbar__text{font-size:13.5px;color:var(--c-text);max-width:70ch}
.trustbar__meta{color:var(--c-muted);margin-left:6px}
.trustbar__links{display:flex;gap:18px;font-size:13.5px;font-weight:600}

/* --- footer -------------------------------------------------------------- */
.site-footer{flex-shrink:0;background:var(--c-primary-dark);color:#D7E3E9;padding:44px 0 28px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.footcol__h{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#8FA6B2;margin-bottom:12px;font-family:var(--f-body);font-weight:600}
.footcol li{margin-bottom:8px}
.footcol a{color:#D7E3E9;font-size:14px}
.footcol a:hover{color:#fff}
.footer-bottom{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.footer-disclaimer{font-size:12.5px;color:#8FA6B2;max-width:100%;margin-bottom:10px;line-height:1.55}
.footer-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#9FB4C0;margin-top:8px}
.langsw--dark a{color:rgba(255,255,255,.7)}
.langsw--dark a.is-active{color:#fff}

/* --- cookie banner ------------------------------------------------------- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--c-surface);border-top:1px solid var(--c-border);box-shadow:0 -8px 24px rgba(10,50,69,.10)}
.cookie-banner__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0;flex-wrap:wrap}
.cookie-banner__text{font-size:13.5px;max-width:64ch}
.cookie-banner__text strong{display:block;margin-bottom:2px}
.cookie-banner__text p{color:var(--c-muted)}
.cookie-banner__actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-reopen{position:fixed;left:16px;bottom:16px;z-index:120;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-ctl);padding:8px 14px;font-size:13px;color:var(--c-primary);font-weight:600}

/* --- error page ---------------------------------------------------------- */
.errorpage{text-align:center;padding:60px 0}
.errorpage__code{font-family:var(--f-head);font-size:64px;color:var(--c-primary);font-weight:600}
.errorpage__title{font-size:28px;margin:8px 0 10px}
.errorpage__text{color:var(--c-muted);margin-bottom:24px}
.errorpage .hero__cta{justify-content:center}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr;gap:28px}
  .band-grid{grid-template-columns:1fr;gap:28px}
  .bank-layout{grid-template-columns:1fr;gap:28px}
  .guide-layout{grid-template-columns:1fr;gap:24px}
  .glance,.guide-toc{position:static}
  .bankgrid,.bankgrid--all{grid-template-columns:repeat(2,1fr)}
  .sources{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav-toggle{display:flex}
  .mainnav{position:absolute;left:0;right:0;top:100%;background:var(--c-surface);border-bottom:1px solid var(--c-border);flex-direction:column;align-items:stretch;gap:0;padding:6px 24px 14px;display:none}
  .mainnav.is-open{display:flex}
  .mainnav a{padding:12px 0;border-bottom:1px solid var(--c-border)}
  .mainnav a[aria-current="page"]{border-bottom-color:var(--c-border)}
  .masthead__in{position:relative}
  .section{padding:40px 0}
  .hero{padding:36px 0 28px}
  .bankgrid,.bankgrid--all,.guidegrid{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .bankhead{grid-template-columns:auto 1fr;row-gap:14px}
  .bankhead__ext{grid-column:1 / -1}
  .utilbar__name{display:none}
  .updated{font-size:12px}
  .newsitem{grid-template-columns:1fr;gap:6px}
  .newsitem__time{order:2}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .section__head{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:420px){
  .footer-grid{grid-template-columns:1fr}
  .container{padding-inline:18px}
}

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   Dark scheme (follows the visitor's OS setting)
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root{
    --c-primary:#4C97B3;
    --c-primary-dark:#0B1B23;
    --c-accent:#E0782F;
    --c-bg:#0F1A21;
    --c-surface:#16232B;
    --c-text:#E6EDF1;
    --c-muted:#93A5B0;
    --c-border:#26343E;
    --c-band:#12212A;
    --c-zebra:#12202A;
  }
  .btn--primary{color:#08151b}
  .compare thead th{background:#0B2430}
  .tick--yes{color:#7fd3b3;border-color:#2c4a44}
  .notice--ok{background:#12332a;border-color:#2c4a44;color:#7fd3b3}
  .notice--err{background:#3a201a;border-color:#5c342a;color:#e6a58f}
  .cookie-banner{box-shadow:0 -8px 24px rgba(0,0,0,.4)}
  .utilbar__brand .mark{background:#0B2430}
}

.news-editorial{max-width:75ch;margin-bottom:26px}
.news-editorial p{margin-bottom:12px}

/* --- bank login section -------------------------------------------------- */
.login-block{margin-top:34px;padding-top:30px;border-top:1px solid var(--c-border)}
.login-block>p{max-width:72ch}
.login-facts{display:flex;gap:32px;flex-wrap:wrap;margin:16px 0 18px}
.login-facts dt{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted)}
.login-facts dd{font-weight:600;margin-top:3px}
.login-warning{background:var(--c-band);border:1px solid var(--c-border);border-left:3px solid var(--c-accent);border-radius:var(--radius-ctl);padding:14px 16px;font-size:14px;color:var(--c-text);margin:16px 0 10px;max-width:72ch}

/* --- home intro paragraph ------------------------------------------------ */
.section--intro{padding-top:38px;padding-bottom:0}
.home-intro{max-width:74ch;color:var(--c-text)}