/* article.css — content-page layer on top of the homepage design system (home.css).
   Unique per-page hero (no homepage island clone), even grids, smooth FAQ. */

/* ===== PAGE HERO (.phero) — clean CENTERED hero + a unique framed showcase graphic ===== */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);text-align:center;padding:66px 24px 58px}
.phero::before{content:'';position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:960px;max-width:130%;height:580px;background:radial-gradient(closest-side,rgba(88,202,254,.22),transparent 72%);pointer-events:none;z-index:0}
.phero .inner{position:relative;z-index:2;max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.phero .inner .kicker{display:inline-block;margin-bottom:18px}
.phero h1{font-family:'Clash Display',sans-serif;font-weight:700;font-size:clamp(32px,5vw,56px);line-height:1.06;color:#fff;margin:0;text-align:center}
.phero h1 span{background:linear-gradient(110deg,#58cafe,#3ee0b0 75%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.phero .sub{font-size:clamp(16px,2.1vw,20px);color:#bcd7ef;max-width:620px;margin:22px auto 0;line-height:1.6;text-align:center}
.phero .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:42px}
.phero .proofline{margin-top:30px;font-size:14px;color:#9fc4e8;text-align:center}
.phero .proofline b{color:#fff}

/* ===== SPACING FORMULA (standard design protocol — applies to all content pages) ===== */
/* never let copy crowd a button */
.lead + .btn,.lead + .ctas,p + .btn,p + .ctas{margin-top:26px}
.wrap.center .btn{margin-top:8px}
.wrap.center .lead{margin-left:auto;margin-right:auto;max-width:680px}
/* consistent intro block: kicker -> title -> lead rhythm */
.wrap.center .kicker{margin-bottom:14px}
.wrap.center .title{margin-bottom:14px}
.phero .showcase{position:relative;z-index:2;max-width:940px;margin:44px auto 0}
.phero .showcase img{width:100%;display:block;border-radius:22px;border:1px solid rgba(120,180,240,.2);box-shadow:0 30px 80px rgba(4,12,24,.55)}

/* ===== 7-step grid — centered flex so the last row never orphans left ===== */
.gsteps{display:flex !important;flex-wrap:wrap;justify-content:center;gap:18px;max-width:1180px;margin:34px auto 0;padding:0 24px}
.gstep{flex:1 1 300px;max-width:350px;position:relative;background:linear-gradient(180deg,#0c2440,#081a30);border:1px solid rgba(120,180,240,.16);border-radius:18px;padding:26px 24px;min-height:0;width:auto;text-align:left;box-shadow:0 10px 30px rgba(2,8,20,.35)}
.gstep:hover{border-color:rgba(88,202,254,.4)}
.gstep .gstep-num{position:static;font-family:'Clash Display',sans-serif;font-weight:700;font-size:30px;line-height:1;color:#58cafe;background:none;width:auto;height:auto;display:block;margin:0 0 12px;-webkit-text-fill-color:initial}
.gstep h3{font-family:'Clash Display',sans-serif;color:#eaf3ff;font-size:19px;margin:0 0 8px}
.gstep p{color:#a7c4e0;font-size:15px;line-height:1.6;margin:0}
.gstep .art{display:none}

/* ===== card grids — kill the homepage honeycomb column-spans on every featgrid ===== */
.featgrid .feat{grid-column:auto !important}
.what-sec .featgrid{display:grid !important;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:40px auto 0;padding:0 24px;align-items:stretch}
#what .featgrid{align-items:stretch}
#what .feat{height:100%;display:flex;flex-direction:column}
.what-sec .featgrid .feat{grid-column:auto !important;height:100%;display:flex;flex-direction:column;padding:28px 26px}
.what-sec .feat-ic{width:54px;height:54px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;background:rgba(255,201,97,.08);border:1px solid rgba(255,201,97,.22);border-radius:13px}
.what-sec .feat-ic svg{display:block}
.what-sec .feat h3{font-size:18px;color:#eaf3ff;margin-bottom:8px}
.what-sec .feat p{color:#9fc4e8;font-size:14.5px;line-height:1.55;margin:0}

/* ===== full-width figure (section graphics) ===== */
.figure{max-width:1000px;margin:10px auto 0;padding:0 24px}
.figure img{width:100%;display:block;border-radius:20px;border:1px solid rgba(120,180,240,.18);box-shadow:0 24px 70px rgba(2,8,20,.55)}

/* ===== FAQ — guaranteed-smooth glide (insurance over home.css) ===== */
.faqa{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.2,.7,.3,1)}
.faqi.open .faqa{grid-template-rows:1fr}
.faqa-in{overflow:hidden;min-height:0}
.faqi{transition:border-color .25s ease,background .25s ease,transform .2s ease}
.faqi:hover{border-color:rgba(88,202,254,.45)}

/* ===== final CTA mascot ===== */
.final .m{width:150px;height:auto;margin:0 auto 18px;display:block}
.final .lead{max-width:620px;margin-left:auto;margin-right:auto}

/* ===== section rhythm ===== */
section{padding:56px 0}
.what-sec{padding:66px 0}

@media(max-width:900px){
  .what-sec .featgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .what-sec .featgrid{grid-template-columns:1fr}
  .phero{min-height:520px}
}

/* ===== comparison / spec table (shared component, locked tokens) ===== */
.cmp-wrap{max-width:920px;margin:30px auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;background:linear-gradient(180deg,#0c2440,#081a30);border:1px solid rgba(120,180,240,.18);border-radius:18px;overflow:hidden;font-size:15px}
.cmp caption{caption-side:top;text-align:left;color:#9fc4e8;font-size:13px;padding:0 0 10px}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);color:#cfe3f7;vertical-align:top}
.cmp thead th{background:rgba(88,202,254,.09);color:#eaf3ff;font-family:'Clash Display',sans-serif;font-weight:600;font-size:14px;letter-spacing:.3px;text-transform:uppercase}
.cmp tbody th{color:#9fc4e8;font-weight:600;white-space:nowrap}
.cmp tbody tr:last-child td,.cmp tbody tr:last-child th{border-bottom:0}
.cmp tbody tr:hover{background:rgba(88,202,254,.04)}
.cmp .yes{color:#39E58C;font-weight:600}
.cmp .no{color:#7f9bb8}
.cmp .gh{background:rgba(57,229,140,.06)}
.cmp thead th.gh{background:rgba(57,229,140,.14);color:#d6ffe9}