/* ===== ARTICLE DESIGN · approved liquid glass ===== */
.article-page{
  padding-top:12px!important;
  padding-bottom:98px!important;
  background:
    radial-gradient(circle at 82px 120px,rgba(146,202,255,.28),transparent 190px),
    radial-gradient(circle at 92% 280px,rgba(96,171,244,.20),transparent 230px),
    linear-gradient(180deg,#f7fbff 0%,#eef6fd 48%,#f8fbfe 100%);
  min-height:100vh;
}
.article-appbar{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.article-round-btn{
  width:42px;height:42px;min-width:42px;border:1px solid rgba(255,255,255,.78);
  border-radius:50%;background:rgba(255,255,255,.54);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 7px 18px rgba(45,92,137,.08);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:grid;place-items:center;color:#0b315e;font-size:28px;line-height:1;
}
.article-round-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.article-round-btn.saved{background:rgba(211,235,255,.82);color:#075aa5}
.article-bell{position:relative}
.article-bell i{position:absolute;right:5px;top:4px;width:8px;height:8px;border-radius:50%;background:#1595dc;border:2px solid #eef7ff}
.article-brand{min-width:0;flex:1}
.article-brand-name{
  font-size:25px;line-height:1;letter-spacing:2.6px;font-weight:400;color:#0b2347;
}
.article-brand-sub{
  margin-top:5px;font-size:6.5px;letter-spacing:2.2px;font-weight:700;color:#74879b;white-space:nowrap
}
.article-app-actions{display:flex;gap:6px}

.article-glass-hero{
  position:relative;min-height:220px;overflow:hidden;border-radius:24px;
  padding:22px 19px 18px;
  display:flex;align-items:stretch;
  border:1px solid rgba(255,255,255,.82);
  background:
    radial-gradient(circle at 20% 0%,rgba(255,255,255,.96),transparent 42%),
    radial-gradient(circle at 90% 80%,rgba(33,132,224,.72),transparent 48%),
    linear-gradient(135deg,rgba(246,252,255,.96),rgba(194,226,255,.70) 58%,rgba(63,151,232,.74));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35),
    0 18px 42px rgba(40,91,139,.12);
}
.article-glass-hero:before,.article-glass-hero:after{
  content:"";position:absolute;border-radius:40px;transform:rotate(-35deg);pointer-events:none
}
.article-glass-hero:before{
  width:210px;height:70px;right:-40px;top:-22px;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.62),rgba(104,180,244,.16));
  filter:blur(.2px)
}
.article-glass-hero:after{
  width:260px;height:82px;right:-55px;bottom:-24px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.46),rgba(35,126,212,.18))
}
.article-hero-copy{position:relative;z-index:3;width:67%;display:flex;flex-direction:column;align-items:flex-start}
.article-badge{
  display:inline-flex;padding:6px 11px;border-radius:999px;
  background:rgba(209,236,255,.78);border:1px solid rgba(255,255,255,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  color:#1670b4;font-size:9px;letter-spacing:1.1px;font-weight:800
}
.article-glass-hero h1{
  margin:14px 0 14px;font-size:27px;line-height:1.05;letter-spacing:-.65px;color:#071d42;max-width:100%
}
.article-meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:9px 13px;color:#4c6580;font-size:10px}
.article-meta span{display:inline-flex;align-items:center;gap:5px}
.article-meta svg{width:15px;height:15px;fill:none;stroke:#315f8c;stroke-width:1.7}

.article-hero-art{position:absolute;right:7px;bottom:4px;width:42%;height:92%;z-index:2}
.glass-doc{
  position:absolute;border:1px solid rgba(255,255,255,.62);
  background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(199,229,255,.22));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 12px 30px rgba(22,80,137,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.glass-doc-back{width:94px;height:126px;right:3px;top:20px;border-radius:16px;transform:rotate(10deg)}
.glass-doc-front{width:101px;height:137px;right:25px;top:42px;border-radius:17px;transform:rotate(7deg);padding:31px 18px}
.glass-doc-front i{display:block;height:4px;border-radius:99px;background:rgba(55,137,211,.35);margin-bottom:10px}
.glass-doc-front i:nth-child(2){width:82%}.glass-doc-front i:nth-child(3){width:62%}
.glass-check{
  position:absolute;right:15px;bottom:18px;width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;font-size:27px;color:#fff;
  border:1px solid rgba(255,255,255,.76);
  background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(75,163,239,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 8px 20px rgba(26,104,177,.20);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)
}

.article-lead{
  padding:15px 11px 9px;color:#536a83;font-size:14px;line-height:1.52;
}
.article-lead:empty{display:none}
.liquid-article{font-size:13px;line-height:1.52;color:#334c67}
.liquid-article.reading-large{font-size:15px;line-height:1.6}
.liquid-article > p{margin:8px 8px 12px}
.liquid-article > h2{
  position:relative;margin:12px 0 10px;padding:17px 54px 15px 64px;min-height:62px;
  border-radius:21px;color:#0a2349;font-size:15px;line-height:1.25;
  background:
    radial-gradient(circle at 94% 20%,rgba(154,206,250,.20),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.82),rgba(247,251,255,.66));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 10px 25px rgba(44,89,132,.075);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.liquid-article > h2:before{
  content:attr(data-step);
  position:absolute;left:16px;top:14px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:#075ba6;font-size:15px;font-weight:800;
  background:linear-gradient(145deg,rgba(228,244,255,.92),rgba(204,231,255,.70));
  border:1px solid rgba(255,255,255,.88);
  box-shadow:inset 0 1px 0 #fff
}
.liquid-article > h2:after{
  content:"";position:absolute;right:16px;top:15px;width:34px;height:34px;border-radius:12px;
  background:
    linear-gradient(135deg,rgba(227,242,255,.96),rgba(241,248,255,.70));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff
}
.liquid-article > h2 + p,
.liquid-article > h2 + ul,
.liquid-article > h2 + ol,
.liquid-article > h2 + blockquote{
  margin-top:-22px;padding:25px 18px 16px 64px;border-radius:0 0 21px 21px;
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(249,252,255,.60));
  border:1px solid rgba(255,255,255,.88);border-top:0;
  box-shadow:0 10px 25px rgba(44,89,132,.055)
}
.liquid-article ul,.liquid-article ol{margin:8px 8px 13px;padding-left:22px}
.liquid-article li{margin:5px 0}
.liquid-article li::marker{color:#62aee9}
.liquid-article strong{color:#0b2d55}
.liquid-article blockquote{
  margin:13px 0;padding:15px 16px 15px 58px;border:1px solid rgba(255,255,255,.94);
  border-radius:20px;background:
    radial-gradient(circle at 0 0,rgba(155,210,255,.30),transparent 42%),
    linear-gradient(135deg,rgba(234,247,255,.92),rgba(255,255,255,.66));
  color:#284d72;box-shadow:inset 0 1px 0 #fff,0 10px 24px rgba(43,98,149,.08);
  position:relative
}
.liquid-article blockquote:before{
  content:"💡";position:absolute;left:16px;top:15px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:rgba(220,240,255,.85);font-size:15px
}
.liquid-article pre{
  white-space:pre-wrap;word-break:break-word;margin:12px 0;padding:16px;border-radius:20px;
  background:linear-gradient(145deg,rgba(231,244,255,.92),rgba(255,255,255,.72));
  border:1px solid rgba(255,255,255,.94);box-shadow:inset 0 1px 0 #fff,0 10px 24px rgba(42,91,137,.07);
  color:#173d63;font-size:11px;line-height:1.55
}
.liquid-article a{color:#0969b1;text-decoration:none;font-weight:700}

.article-bottom-tools{
  position:sticky;bottom:8px;z-index:30;margin-top:18px;padding:7px;
  display:flex;align-items:center;gap:8px;border-radius:22px;
  background:rgba(247,251,255,.70);border:1px solid rgba(255,255,255,.88);
  box-shadow:0 12px 30px rgba(21,67,110,.14),inset 0 1px 0 #fff;
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)
}
.article-aa,.article-nav-pair button{
  height:42px;border-radius:17px;border:1px solid rgba(255,255,255,.92);
  background:rgba(255,255,255,.55);color:#14375d;
  box-shadow:inset 0 1px 0 #fff
}
.article-aa{width:54px;font-size:15px}
.article-nav-pair{display:flex;gap:6px}
.article-nav-pair button{width:42px;font-size:24px}
.article-save{
  margin-left:auto;height:42px;border:0;border-radius:18px;padding:0 15px;
  display:flex;align-items:center;justify-content:center;gap:7px;color:#fff;font-weight:700;font-size:11px;
  background:linear-gradient(135deg,#0b3e77,#0879c9);
  box-shadow:0 8px 18px rgba(8,87,158,.22),inset 0 1px 0 rgba(255,255,255,.28)
}
.article-save svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.8}
.article-save.saved{background:linear-gradient(135deg,#0b315d,#075b9d)}

@media(max-width:390px){
  .article-round-btn{width:38px;height:38px;min-width:38px}
  .article-brand-name{font-size:22px}
  .article-brand-sub{font-size:5.7px;letter-spacing:1.7px}
  .article-glass-hero{min-height:205px;padding:19px 16px 16px}
  .article-glass-hero h1{font-size:24px}
  .article-hero-copy{width:70%}
  .glass-doc-back{width:80px;height:111px}
  .glass-doc-front{width:88px;height:122px;right:18px}
  .article-save{padding:0 11px}
  .article-save span{font-size:10px}
}