/* Subpage / article styles — loaded after style.css */
.subhero{background:var(--grad-hero);color:#fff;padding:calc(var(--header-h) + 56px) 0 64px;overflow:hidden;}
.subhero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 25%,transparent 75%);}
.subhero .container{position:relative;z-index:2;}
.subhero .crumb{color:rgba(255,255,255,.7);padding:0 0 16px;}
.subhero .crumb a{color:var(--cyan-light);}
.subhero .ic-lg{width:64px;height:64px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;font-size:1.7rem;color:var(--cyan-light);margin-bottom:18px;}
.subhero h1{color:#fff;font-size:clamp(2rem,4vw,3rem);max-width:760px;letter-spacing:-.5px;}
.subhero p{color:rgba(255,255,255,.82);font-size:1.12rem;max-width:620px;margin-top:16px;}
.subhero .hero-ctas{margin-top:26px;}

.layout{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start;}
.prose h2{font-size:1.7rem;margin:36px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:1.2rem;margin:24px 0 8px;}
.prose p{color:var(--text-mid);margin-bottom:14px;}
.prose ul.ticks{margin:8px 0 18px;}
.prose ul.ticks li{display:flex;gap:10px;align-items:flex-start;color:var(--text-mid);padding:6px 0;}
.prose ul.ticks li i{color:var(--green);margin-top:4px;}
.prose .callout{background:var(--bg-2);border-left:4px solid var(--blue);border-radius:0 var(--r-md) var(--r-md) 0;padding:18px 22px;margin:20px 0;color:var(--text);}
.docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 20px;}
.doc{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--shadow-sm);}
.doc i{color:var(--blue);font-size:1.2rem;}
.doc b{display:block;color:var(--navy);font-size:.95rem;}
.doc span{font-size:.82rem;color:var(--text-soft);}

.aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px;}
.acard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-md);}
.acard.dark{background:var(--grad-hero);color:#fff;border:0;}
.acard h3{font-size:1.15rem;margin-bottom:6px;}
.acard.dark h3{color:#fff;}
.acard p{font-size:.9rem;color:var(--text-mid);margin-bottom:16px;}
.acard.dark p{color:rgba(255,255,255,.8);}
.acard .btn{width:100%;margin-bottom:10px;}
.price-tag{font-family:'Montserrat';font-weight:900;font-size:2.2rem;color:var(--navy);}
.price-tag small{font-size:.9rem;color:var(--text-soft);font-weight:500;}
.alist li{display:flex;gap:9px;align-items:flex-start;color:var(--text-mid);font-size:.9rem;padding:5px 0;}
.alist li i{color:var(--green);margin-top:3px;}

.related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;box-shadow:var(--shadow-sm);transition:.3s var(--ease);}
.rcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.rcard .ic{color:var(--blue-dark);font-size:1.4rem;margin-bottom:10px;}
.rcard h3{font-size:1.1rem;margin-bottom:6px;}
.rcard p{color:var(--text-mid);font-size:.9rem;margin-bottom:10px;}
.rcard a{color:var(--blue-dark);font-weight:600;font-size:.9rem;}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:.35s var(--ease);}
.bcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.bcard .top{height:140px;background:var(--grad-primary);display:grid;place-items:center;color:#fff;font-size:2.4rem;}
.bcard .body{padding:24px;}
.bcard .cat{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);}
.bcard h3{font-size:1.18rem;margin:8px 0;}
.bcard p{color:var(--text-mid);font-size:.92rem;margin-bottom:12px;}
.bcard a.more{color:var(--blue-dark);font-weight:600;font-size:.9rem;}

@media(max-width:992px){
  .layout{grid-template-columns:1fr;}
  .aside{position:static;}
  .related,.blog-grid{grid-template-columns:1fr;}
  .docs-grid{grid-template-columns:1fr;}
}