/* ============================================================ */
/* BK Wireless · blog mockups (variants/blog)                   */
/* Phone first: the base rules are the phone layout; wider      */
/* screens add columns at 760px and a side contents list at     */
/* 1100px. Loaded after global.css and the F2 header and footer */
/* (variants/header-footer/hf.css). Colors and fonts are the    */
/* global.css tokens; the circuit lines are the new homepage's. */
/* Everything here starts with bl- so nothing collides.         */
/* ============================================================ */

.bl{
  --bl-r:14px;
  --circuit-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cdefs%3E%3Cpattern id='c' width='99' height='99' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Cg transform='scale(1.03125)' opacity='.22' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 0V30L24 42V60M12 54V96M36 0V18L48 30V96M48 0V12M36 72V96M72 0V40L84 52V96M84 0V10M60 40V96M60 0V14M72 70V96'/%3E%3Cg fill='black' stroke='none'%3E%3Ccircle cx='24' cy='60' r='2.6'/%3E%3Ccircle cx='12' cy='54' r='2.6'/%3E%3Ccircle cx='48' cy='12' r='2.6'/%3E%3Ccircle cx='36' cy='72' r='2.6'/%3E%3Ccircle cx='84' cy='10' r='2.6'/%3E%3Ccircle cx='60' cy='40' r='2.6'/%3E%3Ccircle cx='60' cy='14' r='2.6'/%3E%3Ccircle cx='72' cy='70' r='2.6'/%3E%3C/g%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='140' height='140' fill='url(%23c)'/%3E%3C/svg%3E");
  --circuit-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cdefs%3E%3Cpattern id='c' width='99' height='99' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Cg transform='scale(1.03125)' opacity='.11' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 0V30L24 42V60M12 54V96M36 0V18L48 30V96M48 0V12M36 72V96M72 0V40L84 52V96M84 0V10M60 40V96M60 0V14M72 70V96'/%3E%3Cg fill='white' stroke='none'%3E%3Ccircle cx='24' cy='60' r='2.6'/%3E%3Ccircle cx='12' cy='54' r='2.6'/%3E%3Ccircle cx='48' cy='12' r='2.6'/%3E%3Ccircle cx='36' cy='72' r='2.6'/%3E%3Ccircle cx='84' cy='10' r='2.6'/%3E%3Ccircle cx='60' cy='40' r='2.6'/%3E%3Ccircle cx='60' cy='14' r='2.6'/%3E%3Ccircle cx='72' cy='70' r='2.6'/%3E%3C/g%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='140' height='140' fill='url(%23c)'/%3E%3C/svg%3E");
  background:var(--white);color:var(--charcoal);font-family:var(--font-sans)
}
/* resets at zero weight (:where), so every bl- rule below wins over them */
:where(.bl) *,:where(.bl) *::before,:where(.bl) *::after{box-sizing:border-box}
:where(.bl) :is(h1,h2,h3){margin:0;color:var(--black);font-weight:800;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}
:where(.bl) :is(p,ul,ol){margin:0}
:where(.bl) :is(ul,ol){padding:0;list-style:none}
:where(.bl) a{color:inherit}
.bl-wrap{max-width:720px;margin:0 auto;padding:0 16px}
.bl-wide{max-width:var(--container-max);margin:0 auto;padding:0 16px}

/* ---------- buttons ---------- */
.bl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border:1.5px solid transparent;
        border-radius:14px;font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap}
.bl-btn::after{content:"\2192";font-weight:400}
.bl-btn--plain::after{content:none}
.bl-btn--red{background:var(--red);color:var(--white)}
.bl-btn--red:hover{background:var(--red-dark)}
.bl-btn--white{background:var(--white);color:var(--black)}
.bl-btn--white:hover{background:var(--soft-red)}
.bl-btn--ghost{border-color:var(--white);color:var(--white)}
.bl-btn--ghost:hover{background:var(--white);color:var(--black)}
.bl-btn--line{border-color:var(--charcoal);color:var(--black);background:var(--white)}
.bl-btn--line:hover{border-color:var(--red);color:var(--red)}
.bl-btns{display:grid;gap:10px;margin-top:18px}

/* ---------- small labels ---------- */
.bl-eb{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.bl-tag{display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;border-radius:99px;background:var(--soft-red);color:var(--red);font-weight:500}
.bl-crumbs{padding:14px 0 0;font-size:13.5px;color:var(--grey)}
.bl-crumbs a{text-decoration:none}
.bl-crumbs a:hover{color:var(--red)}
.bl-crumbs span{margin:0 6px}

/* ============================================================ */
/* ARTICLE                                                      */
/* ============================================================ */
.bl-head{padding:18px 0 4px}
.bl-head h1{margin-top:14px;font-size:clamp(32px,8.6vw,54px)}
.bl-dek{margin-top:14px;font-size:18px;line-height:1.45;color:var(--charcoal)}
.bl-by{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);font-size:13.5px;line-height:1.4;color:var(--grey)}
.bl-by img{flex:0 0 36px;width:36px;height:36px;border-radius:50%}
.bl-by b{display:block;font-weight:700;color:var(--black)}

/* the quick answer: the 2 to 3 sentences that answer the search, first thing on the page */
.bl-answer{margin-top:22px;padding:18px 18px 20px;border-radius:var(--bl-r);background:var(--soft-red)}
.bl-answer .bl-eb{color:var(--red)}
.bl-answer p{margin-top:8px;font-size:17px;line-height:1.5;color:var(--black)}

/* contents: a box under the answer on a phone, a list that stays on screen beside the text on a wide screen */
.bl-grid{margin-top:22px}
.bl-toc{padding:16px 18px;border-radius:var(--bl-r);background:var(--light)}
.bl-toc .bl-eb{color:var(--black)}
.bl-toc ol{margin-top:8px;counter-reset:toc}
.bl-toc li{counter-increment:toc;border-top:1px solid var(--border)}
.bl-toc li:first-child{border-top:0}
.bl-toc a{display:flex;align-items:center;gap:12px;min-height:46px;padding:6px 0;font-size:15.5px;font-weight:600;line-height:1.3;text-decoration:none}
.bl-toc a::before{content:counter(toc);flex:0 0 24px;font-family:var(--font-mono);font-size:13px;font-weight:400;color:var(--red)}
.bl-toc a:hover{color:var(--red)}

/* the text */
.bl-body > * + *{margin-top:16px}
.bl-body > h2{margin-top:40px;padding-top:4px;font-size:clamp(26px,6.6vw,34px);scroll-margin-top:84px}
.bl-body > h3{margin-top:26px;font-size:20px}
.bl-body > p,.bl-body > ul > li{font-size:17px;line-height:1.6}
.bl-body > ul > li{position:relative;padding-left:20px}
.bl-body > ul > li + li{margin-top:8px}
.bl-body > ul > li::before{content:"";position:absolute;left:4px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.bl-body a:not(.bl-btn){color:var(--red);text-decoration:underline;text-underline-offset:3px}

/* numbered steps on a line, like a phone setup guide */
.bl-steps{counter-reset:step}
.bl-steps > li{counter-increment:step;position:relative;padding:0 0 22px 48px}
.bl-steps > li::before{content:counter(step);position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;
                       border-radius:50%;background:var(--black);color:var(--white);font-family:var(--font-mono);font-size:14px}
.bl-steps > li::after{content:"";position:absolute;left:15px;top:38px;bottom:4px;width:2px;background:var(--border)}
.bl-steps > li:last-child{padding-bottom:0}
.bl-steps > li:last-child::after{content:none}
.bl-steps b{display:block;padding-top:4px;font-size:17px;line-height:1.35;color:var(--black)}
.bl-steps p{margin-top:4px;font-size:16px;line-height:1.55}
.bl-path{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:8px;padding:6px 10px;border:1px solid var(--border);border-radius:10px;
         background:var(--light);font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--black)}
.bl-path i{font-style:normal;color:var(--red)}

/* "heads up" note */
.bl-note{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:16px 18px;border:1.5px solid var(--charcoal);border-radius:var(--bl-r)}
.bl-note::before{content:"!";display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--black);color:var(--white);font-weight:800}
.bl-note b{display:block;color:var(--black)}
.bl-note p{font-size:15.5px;line-height:1.5}

/* the shop card in the middle of the text: dark, with the logo's circuit lines */
.bl-shop{padding:22px 18px;border-radius:var(--bl-r);background-color:var(--black);background-image:var(--circuit-dark);background-size:140px;color:rgba(255,255,255,.78)}
.bl-shop .bl-eb{color:var(--soft-red)}
.bl-shop h3{margin-top:8px;font-size:24px;color:var(--white)}
.bl-shop p{margin-top:8px;font-size:15.5px;line-height:1.5}
.bl-shop .bl-mail{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);font-size:14.5px}
.bl-shop .bl-mail a{color:var(--white);text-decoration:underline;text-underline-offset:3px}

/* FAQ */
.bl-faq{border-top:1.5px solid var(--charcoal)}
.bl-faq details{border-bottom:1px solid var(--border)}
.bl-faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;padding:14px 0;cursor:pointer;list-style:none;
                font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--black)}
.bl-faq summary::-webkit-details-marker{display:none}
.bl-faq summary::after{content:"+";flex:0 0 auto;font-size:24px;font-weight:400;color:var(--red)}
.bl-faq details[open] summary::after{content:"\2013"}
.bl-faq details p{padding:0 0 16px;font-size:16px;line-height:1.55}

/* ============================================================ */
/* LISTS OF GUIDES (related guides, the blog page)              */
/* ============================================================ */
.bl-list{border-top:1.5px solid var(--charcoal)}
.bl-row{display:grid;grid-template-columns:1fr 76px;gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid var(--border);text-decoration:none}
.bl-row h3{font-size:18px;letter-spacing:-.03em;line-height:1.2}
.bl-row p{margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--grey)}
.bl-row .bl-eb{margin-top:8px;font-size:11.5px}
.bl-row:hover h3{color:var(--red)}
/* a guide's tile: its topic word on black or soft red (no stock photos) */
.bl-tile{display:flex;align-items:flex-end;width:76px;height:76px;padding:8px;border-radius:12px;background:var(--black);
         font-size:13px;font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--white)}
.bl-tile--sell{background-color:var(--black);background-image:var(--circuit-dark);background-size:90px}
.bl-tile--fix{background-color:var(--red);background-image:var(--circuit-red);background-size:90px}
.bl-tile--buy{background:var(--soft-red);color:var(--red)}

.bl-sec{margin-top:44px}
.bl-sec > h2{font-size:clamp(26px,6.6vw,34px)}
.bl-sec > .bl-sub{margin-top:6px;font-size:15.5px;color:var(--grey)}
.bl-sec > .bl-list{margin-top:14px}

/* blog page: category chips (jump links), featured guide */
.bl-chips{display:flex;gap:8px;margin:18px -16px 0;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none}
.bl-chips::-webkit-scrollbar{display:none}
.bl-chips a{display:inline-flex;align-items:center;flex:0 0 auto;min-height:44px;padding:8px 16px;border:1.5px solid var(--border);border-radius:99px;
            font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;color:var(--black)}
.bl-chips a:first-child{border-color:var(--black);background:var(--black);color:var(--white)}
.bl-chips a:hover{border-color:var(--red)}
.bl-feat{display:block;margin-top:20px;padding:22px 18px 20px;border-radius:var(--bl-r);background-color:var(--black);background-image:var(--circuit-dark);
         background-size:140px;color:rgba(255,255,255,.78);text-decoration:none}
.bl-feat .bl-eb{color:var(--soft-red)}
.bl-feat h2{margin-top:10px;font-size:clamp(28px,7.6vw,40px);color:var(--white)}
.bl-feat p{margin-top:10px;font-size:16px;line-height:1.5}
.bl-feat .bl-btn{margin-top:18px}
.bl-mailcard{margin-top:44px}
.bl-sec[id]{scroll-margin-top:84px}

/* ============================================================ */
/* MAIL-IN CARD (blog page) and RED CLOSING BAND (unused: the F footer already opens with a red band)                            */
/* ============================================================ */
.bl-close{margin-top:52px;padding:40px 0 44px;background-color:var(--red);background-image:var(--circuit-red);background-size:140px;color:var(--white)}
.bl-close h2{font-size:clamp(30px,8vw,46px);color:var(--white)}
.bl-close p{margin-top:10px;max-width:46ch;font-size:16.5px;line-height:1.5}

/* ============================================================ */
/* WIDER SCREENS                                                */
/* ============================================================ */
@media(min-width:760px){
  .bl-wrap,.bl-wide{padding:0 24px}
  .bl-chips{margin:18px 0 0;padding:0;flex-wrap:wrap;overflow:visible}
  .bl-btns{display:flex;flex-wrap:wrap}
  .bl-shop{padding:26px 26px 24px}
  .bl-feat{padding:30px 30px 28px}
  .bl-row{grid-template-columns:1fr 96px;gap:20px}
  .bl-tile{width:96px;height:96px;font-size:15px}
  .bl-sec .bl-list{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;border-top:0}
  .bl-sec .bl-list .bl-row:nth-child(-n+2){border-top:1.5px solid var(--charcoal)}
}
@media(min-width:1100px){
  .bl-wrap--article{max-width:1080px}
  .bl-wrap--article .bl-head,.bl-wrap--article .bl-answer{max-width:720px}
  .bl-grid{display:grid;grid-template-columns:minmax(0,720px) 280px;gap:0 56px;align-items:start}
  .bl-grid .bl-toc{grid-column:2;grid-row:1;position:sticky;top:96px}
  .bl-grid .bl-body{grid-column:1;grid-row:1}
}

/* a step's "1 of 3" label: shown in look C only */
.bl-stepn{display:none}

/* ============================================================ */
/* LOOK B: dark top with the logo's circuit lines               */
/* (Mobbin: Letterboxd, Substack, Bloomberg article tops)       */
/* The headline sits on black; the quick answer is a white card */
/* that climbs onto the band's lower edge.                      */
/* ============================================================ */
.bl--b .bl-top{padding-bottom:64px;background-color:var(--black);background-image:var(--circuit-dark);background-size:140px;color:rgba(255,255,255,.78)}
.bl--b .bl-top .bl-crumbs,.bl--b .bl-top .bl-eb{color:rgba(255,255,255,.62)}
.bl--b .bl-top h1{color:var(--white)}
.bl--b .bl-top .bl-dek{color:rgba(255,255,255,.84)}
.bl--b .bl-top .bl-tag{background:var(--red);color:var(--white)}
.bl--b .bl-top .bl-by{border-top-color:rgba(255,255,255,.18);color:rgba(255,255,255,.62)}
.bl--b .bl-top .bl-by b{color:var(--white)}
.bl--b .bl-answer{position:relative;margin-top:-44px;border:1.5px solid var(--black);background:var(--white);box-shadow:var(--shadow-md)}
/* blog page: chips on the dark band, the featured guide in red, climbing onto the band */
.bl--b .bl-top .bl-chips a{border-color:rgba(255,255,255,.32);color:var(--white)}
.bl--b .bl-top .bl-chips a:first-child{border-color:var(--white);background:var(--white);color:var(--black)}
.bl--b .bl-feat{position:relative;margin-top:-40px;background-color:var(--red);background-image:var(--circuit-red);color:var(--white)}
.bl--b .bl-feat .bl-eb{color:var(--white)}
.bl--b .bl-shop .bl-btn--white,.bl--b .bl-feat .bl-btn--white{color:var(--black)}

/* ============================================================ */
/* LOOK C: steps as cards, guides as a card grid                */
/* (Mobbin: Quizlet "Step 1 of 3" cards, Hers process cards,    */
/* Lloyds progress list, Codecademy and NotebookLM card grids)  */
/* ============================================================ */
.bl--c .bl-answer{border-left:6px solid var(--red);border-radius:6px var(--bl-r) var(--bl-r) 6px}
/* contents as a list of rows with a numbered ring, like a setup checklist */
.bl--c .bl-toc{padding:0;background:none}
.bl--c .bl-toc ol{display:grid;gap:8px}
.bl--c .bl-toc li{border:1.5px solid var(--border);border-radius:12px;background:var(--white)}
.bl--c .bl-toc li:first-child{border-top:1.5px solid var(--border)}
.bl--c .bl-toc a{padding:6px 14px}
.bl--c .bl-toc a::before{display:flex;align-items:center;justify-content:center;flex:0 0 28px;height:28px;border:1.5px solid var(--black);border-radius:50%;color:var(--black)}
.bl--c .bl-toc a::after{content:"\2192";margin-left:auto;color:var(--red)}
/* each step its own card */
.bl--c .bl-steps{display:grid;gap:12px}
.bl--c .bl-steps > li{padding:16px 16px 18px;border:1.5px solid var(--border);border-radius:var(--bl-r);background:var(--white)}
.bl--c .bl-steps > li::before{position:static;display:inline-flex;margin-bottom:10px;background:var(--red)}
.bl--c .bl-steps > li::after{content:none}
.bl--c .bl-stepn{display:block;float:right;font-family:var(--font-mono);font-size:12.5px;color:var(--grey)}
.bl--c .bl-steps b{padding-top:0;font-size:18px}
/* guides as cards: the tile on top, wide */
.bl--c .bl-list{display:grid;gap:14px;border-top:0}
.bl--c .bl-row{grid-template-columns:1fr;gap:0;padding:0;border:1.5px solid var(--border);border-radius:var(--bl-r);overflow:hidden}
.bl--c .bl-row .bl-tile{order:-1;width:100%;height:112px;padding:14px 16px;border-radius:0;font-size:26px;letter-spacing:-.04em}
.bl--c .bl-row > div{padding:14px 16px 16px}
@media(min-width:760px){
  .bl--c .bl-sec .bl-list{grid-template-columns:repeat(2,1fr);column-gap:18px}
  .bl--c .bl-sec .bl-list .bl-row:nth-child(-n+2){border-top:1.5px solid var(--border)}
  .bl--c .bl-row .bl-tile{width:100%;height:132px;font-size:28px}
}
@media(min-width:1100px){
  .bl--c .bl-sec .bl-list{grid-template-columns:repeat(3,1fr)}
}