/* Shared stylesheet for getbroc.app guide pages. */
:root{ --navy:#0A1428; --navy3:#08101F; --cobalt:#1452FF; --ink:#1B2430;
       --dim:#4A5568; --hairline:#E4E8EF; --wash:#F6F8FB; }
*{margin:0; padding:0; box-sizing:border-box;}
body{font-family:'Hanken Grotesk',system-ui,sans-serif; background:#fff; color:var(--ink);
     -webkit-font-smoothing:antialiased; line-height:1.65;}
a{color:var(--cobalt);}
.top{background:var(--navy); padding:18px 24px;}
.top-inner{max-width:760px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none;}
.brand img{width:30px; height:30px; border-radius:50%;}
.brand span{font-family:'Bricolage Grotesque',sans-serif; font-size:19px; font-weight:800;}
.top a.back{color:rgba(255,255,255,0.7); font-size:13px; text-decoration:none;}
.top a.back:hover{color:#fff;}
.hero{background:var(--navy); padding:36px 24px 48px;}
.hero-inner{max-width:760px; margin:0 auto;}
.hero .kicker{color:#7EA0FF; font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;}
.hero h1{font-family:'Bricolage Grotesque',sans-serif; font-size:36px; font-weight:800;
         line-height:1.12; color:#fff; margin-top:10px;}
.hero p{color:rgba(255,255,255,0.78); margin-top:14px; font-size:17px; max-width:600px;}
.hero .byline{font-size:13px; color:rgba(255,255,255,0.58); margin-top:16px;}
.hero .byline a{color:#fff; font-weight:600;}
main{max-width:760px; margin:0 auto; padding:40px 24px 90px;}
h2{font-family:'Bricolage Grotesque',sans-serif; font-size:22px; font-weight:700; margin:38px 0 10px;}
h3{font-family:'Bricolage Grotesque',sans-serif; font-size:17px; font-weight:700; margin:24px 0 6px;}
p{margin:12px 0; font-size:16px;}
ul,ol{margin:12px 0 12px 22px; font-size:16px;}
li{margin:6px 0;}
strong{font-weight:700;}
table{width:100%; border-collapse:collapse; margin:18px 0; font-size:14.5px;}
th,td{text-align:left; padding:10px 10px; border-bottom:1px solid var(--hairline); vertical-align:top;}
th{font-family:'Bricolage Grotesque',sans-serif; font-size:13.5px;}
.steps{counter-reset:step; margin:20px 0; display:grid; gap:12px;}
.step{background:var(--wash); border:1px solid var(--hairline); border-radius:12px;
      padding:16px 18px 16px 58px; position:relative;}
.step::before{counter-increment:step; content:counter(step);
      position:absolute; left:16px; top:16px; width:28px; height:28px; border-radius:50%;
      background:var(--cobalt); color:#fff; font-weight:700; font-size:14px;
      display:flex; align-items:center; justify-content:center;}
.step h3{margin:0 0 4px;}
.step p{margin:0; font-size:15px; color:var(--dim);}
.callout{border-left:4px solid var(--cobalt); background:var(--wash); padding:14px 18px;
         border-radius:0 10px 10px 0; margin:18px 0; font-size:15px;}
.source-note{background:var(--wash); border:1px solid var(--hairline); border-radius:12px;
             padding:16px 18px; margin:30px 0; font-size:14px; color:var(--dim);}
.source-note h2{font-size:17px; margin:0 0 8px; color:var(--ink);}
.source-note p,.source-note ul{font-size:14px; margin:8px 0;}
.guide-figure{margin:32px auto; text-align:center;}
.guide-figure img{width:min(300px,80vw); height:auto; margin:0 auto; border-radius:28px;
                  box-shadow:0 24px 60px -28px rgba(10,20,40,.45); display:block;}
.guide-figure figcaption{font-size:13px; color:var(--dim); margin:10px auto 0; max-width:50ch;}
.cta{margin:44px 0 0; padding:28px; background:var(--navy); border-radius:14px; text-align:center;}
.cta p{color:rgba(255,255,255,0.85); margin:0 0 14px;}
.btn{display:inline-block; background:var(--cobalt); color:#fff; text-decoration:none;
     font-weight:700; padding:13px 26px; border-radius:10px;}
.more{margin-top:44px; border-top:1px solid var(--hairline); padding-top:22px;}
.more h2{margin-top:0; font-size:17px;}
.more ul{list-style:none; margin:10px 0 0; display:grid; gap:8px;}
.more li{margin:0;}
footer{border-top:1px solid var(--hairline); padding:22px 24px; font-size:13px; color:var(--dim);}
.foot-inner{max-width:760px; margin:0 auto; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;}
footer a{color:var(--dim);}