/* ═══════════════════════════════════════════════════════════════════════════
   LANDER STYLES — shared by every landing page.

   Was 240 lines of byte-identical CSS inlined in guide-101, guide-202 and
   guide-303. Extracted when the Reply Files / Flip / bundle landers were added,
   because seven copies of the same stylesheet is seven places to fix a bug and
   six places to forget.

   Verified identical across all three guide landers before extracting
   (same md5). Linked in <head>, so it is render-blocking exactly like the
   inline <style> was — no flash of unstyled content, and now it caches across
   pages instead of re-downloading per lander.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ============ NEO-BRUTALIST SYSTEM ============ */
:root{
  --cream:#FBF6EC; --paper:#FFFFFF; --ink:#111111;
  --yellow:#FFD429; --blue:#2F5FD6; --lime:#C7F24E; --pink:#FF6A55; --sky:#8FD3FF;
  --bd:3px solid var(--ink);
  --sh:6px 6px 0 var(--ink);
  --sh-sm:4px 4px 0 var(--ink);
  --sh-lg:9px 9px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
/* Nothing may make the page wider than the screen. Uses `clip`, not `hidden`,
   because `hidden` creates a scroll container and breaks position:sticky. */
html,body{overflow-x:clip;max-width:100%}
img,svg,iframe,video{max-width:100%}
/* Grid and flex children default to min-width:auto, so they refuse to shrink
   below their content. One wide child (e.g. the logo marquee at 3200px) then
   stretches its whole column off screen and drags every heading and paragraph
   with it. Explicit min-widths still win, since a class beats `*`. */
*{min-width:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--cream); color:var(--ink);
  font-size:17px; line-height:1.55; 
}
h1,h2,h3,.display{font-family:'Archivo Black','Arial Black',sans-serif;line-height:1.02;letter-spacing:-.01em}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.sec{padding:70px 0;border-bottom:var(--bd)}
strong{font-weight:700}
mark{background:var(--yellow);color:var(--ink);padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl-lime{background:var(--lime)}
.hl-pink{background:var(--pink);color:var(--ink)}

/* buttons - brutalist press, not generic hover */
/* inline-BLOCK, not inline-flex.

   Flex turns every run of text into its own anonymous flex item, so
       Get The Guide for ₹<span data-price="base">175</span> + GST <span class="arrow">→</span>
   became FOUR items — "Get The Guide for ₹" | "175" | "+ GST" | "→" — each
   shoved 10px apart by `gap`, and each wrapping independently. On mobile it
   rendered as "Get The Guide for ₹   175   + GST" on separate lines with the
   rupee sign orphaned from its number.

   Any button containing a <span> (a price, an arrow) hits this. inline-block
   lets the whole label be one text flow: normal word spacing, normal wrapping,
   and the ₹ stays glued to its number. */
.btn{
  display:inline-block;text-align:center;
  font-family:'Archivo Black',sans-serif;font-size:19px;text-decoration:none;
  color:var(--ink);background:var(--yellow);
  border:var(--bd);box-shadow:var(--sh);
  padding:18px 30px;cursor:pointer;
  transition:transform .06s ease,box-shadow .06s ease;
}
.btn:hover{transform:translate(2px,2px);box-shadow:var(--sh-sm)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.btn.blue{background:var(--blue);color:#fff}
.btn.big{font-size:22px;padding:22px 40px}
/* `gap` used to space the arrow; inline-block has no gap, so it's a margin.
   nowrap keeps the arrow from ever landing alone on its own line. */
.btn .arrow{font-family:sans-serif;margin-left:8px;white-space:nowrap}
/* A price must never be split from its ₹ or its "+ GST" by a line break.
   This is the same class of bug as the flex one above, just caused by wrapping
   instead of by flex items. */
.btn [data-price]{white-space:nowrap}

.tag{display:inline-block;font-family:'Archivo Black',sans-serif;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;background:var(--ink);color:var(--cream);
  padding:7px 12px;border:var(--bd);border-color:var(--ink)}

/* reveal animation */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ TOP BAR ============ */
.topbar{background:var(--ink);color:var(--cream);text-align:center;
  font-size:13.5px;font-weight:600;padding:10px 16px;letter-spacing:.02em}
.topbar b{color:var(--yellow)}

/* ============ HERO ============ */
.hero{background:var(--sky);border-bottom:var(--bd);padding:60px 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero .eyebrow{font-family:'Archivo Black',sans-serif;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:20px;line-height:1.4}
.hero h1{font-size:clamp(34px,5vw,58px);margin-bottom:20px}
.hero .sub{font-size:clamp(16px,2.1vw,20px);font-weight:500;margin-bottom:28px}
.hero-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.micro{font-size:14px;font-weight:600;display:flex;gap:16px;flex-wrap:wrap;margin-top:22px}
.micro span{display:flex;align-items:center;gap:6px}
.micro b{font-family:'Archivo Black',sans-serif;font-size:12px}

/* guide cover - fills the right side, holds the price tag */
.hero-visual{display:flex;justify-content:center}
.guide-cover{position:relative;width:100%;max-width:355px;
  background:var(--ink);color:var(--cream);border:var(--bd);box-shadow:var(--sh-lg);
  padding:34px 30px 30px;transform:rotate(-2deg)}
.gc-tag{display:inline-block;background:var(--lime);color:var(--ink);
  font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.06em;
  padding:5px 11px;border:var(--bd);margin-bottom:18px}
.gc-title{font-family:'Archivo Black',sans-serif;font-size:clamp(25px,3vw,32px);
  color:var(--yellow);line-height:1.05;margin-bottom:12px}
.gc-by{font-weight:700;font-size:14.5px;color:#e7e2d6}
.gc-div{height:3px;background:var(--cream);opacity:.28;margin:20px 0}
.gc-list{list-style:none;font-size:14.5px;font-weight:600}
.gc-list li{padding:5px 0;color:#eee8db}
.gc-list li::before{content:"→";color:var(--yellow);font-family:'Archivo Black',sans-serif;margin-right:9px}
.pricetag{position:absolute;top:-22px;right:-20px;background:var(--pink);color:var(--ink);
  border:var(--bd);box-shadow:var(--sh-sm);padding:12px 16px;text-align:center;
  transform:rotate(7deg);font-family:'Archivo Black',sans-serif;z-index:2}
.pricetag .was{font-size:12px;text-decoration:line-through;opacity:.85;font-family:'Space Grotesk';font-weight:700}
.pricetag .now{font-size:30px;line-height:1}
.pricetag .lbl{font-size:10px;letter-spacing:.05em;margin-top:2px}
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  /* padding leaves room for the overhanging price tag + the card's rotation,
     so neither pushes past the viewport */
  .hero-visual{order:2;padding:18px 24px 0}
  .guide-cover{transform:rotate(-1.5deg);max-width:300px}
  .pricetag{top:-16px;right:-10px}
}

/* ============ CLIENTS STRIP (inside authority) ============ */
.clients{border:var(--bd);box-shadow:var(--sh-sm);background:var(--ink);
  margin:22px 0;overflow:hidden;max-width:100%}
.clients-lbl{font-family:'Archivo Black',sans-serif;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--yellow);padding:10px 16px 8px}
.clients-track{display:flex;white-space:nowrap;width:max-content;
  animation:scrollx 30s linear infinite;padding-bottom:12px}
.clients-track span{font-family:'Archivo Black',sans-serif;color:var(--cream);
  font-size:18px;padding:0 20px;opacity:.9}
.clients-track span::after{content:"★";color:var(--yellow);margin-left:20px;font-size:11px;vertical-align:middle}
@keyframes scrollx{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.clients-track{animation:none;flex-wrap:wrap;white-space:normal;width:auto;padding:0 16px 12px}}

/* ============ generic section head ============ */
.sec h2{font-size:clamp(28px,4.6vw,44px);margin-bottom:14px}
.sec .kicker{font-family:'Archivo Black',sans-serif;font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.lead{font-size:19px;font-weight:500;max-width:640px;margin-bottom:36px}

/* ============ PROBLEM ============ */
.pains{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:34px}
.pain{background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);padding:20px 22px;
  display:flex;gap:14px;align-items:flex-start}
.pain .x{font-family:'Archivo Black',sans-serif;background:var(--pink);color:var(--ink);
  width:30px;height:30px;min-width:30px;border:var(--bd);display:grid;place-items:center;font-size:16px}
.pain p{font-weight:500;font-size:16px}
.turn{background:var(--ink);color:var(--cream);border:var(--bd);box-shadow:var(--sh);
  padding:26px 28px;font-family:'Archivo Black',sans-serif;font-size:clamp(20px,3vw,28px)}
.turn mark{color:var(--ink)}

/* ── Long-form sales letter ────────────────────────────────────────────────
   Direct-response copy needs a reading MEASURE (~65 characters). .wrap is
   1080px because it was built for two-column marketing sections; a 400-word
   argument set that wide reads as a wall and gets skipped, which defeats the
   entire point of writing it. */
/* LEFT-aligned, not centred. `margin:0 auto` put the text column in the middle
   of the 1080px wrap, so every paragraph sat 180px to the right of its own
   heading while the .turn callout ran full width. It read as broken, because
   it was. `.lead` (max-width:640px, no auto margin) is the house convention —
   match it. */
.letter{max-width:680px}
/* The P.S. under a centred .final section is the one place it should centre. */
.letter.mid{margin-left:auto;margin-right:auto}
.letter p{font-size:18px;line-height:1.72;margin-bottom:20px}
/* A callout inside the letter belongs to the letter's column, not the wrap's. */
.letter .turn{margin:26px 0}
.letter p.big{font-size:clamp(19px,2.6vw,23px);font-weight:700;line-height:1.42}
.letter h3{font-size:clamp(21px,3vw,27px);margin:36px 0 14px}
.letter .sig{margin-top:28px;font-weight:700}
.letter .sig small{display:block;font-weight:500;color:#666;margin-top:2px}

/* Fascination bullets. The engine of direct response: each line is a curiosity
   gap you must buy to close, not a feature you can evaluate. */
.fasc{list-style:none;margin:24px 0}
.fasc li{position:relative;padding-left:32px;margin-bottom:15px;
  font-size:16.5px;line-height:1.65;font-weight:500}
.fasc li:before{content:"→";position:absolute;left:0;top:0;
  font-family:'Archivo Black',sans-serif;color:var(--blue)}

/* The P.S. — after the headline, the most-read part of any sales letter.
   Scanners jump headline → price → P.S., so it restates the whole offer. */
.ps{border-top:3px solid var(--ink);margin-top:32px;padding-top:20px}
.ps p{font-size:16.5px;margin-bottom:12px}
.ps b{font-family:'Archivo Black',sans-serif}

/* ============ AUTHORITY ============ */
.author{background:var(--yellow)}
.author-grid{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:start}
/* The avatar and its LinkedIn card are ONE grid child. .author-grid is
   `auto 1fr` — two columns — so a card added as a third sibling would drop to
   its own row and sit under the whole block instead of under the photo. */
.avatar-col{display:flex;flex-direction:column;gap:11px;align-items:stretch}
.avatar{width:150px;height:150px;border:var(--bd);box-shadow:var(--sh);background:var(--ink);
  overflow:hidden;flex-shrink:0}
/* Width is inherited from the column, so the card always matches the photo —
   including at 120px on mobile, with no second measurement to keep in sync. */
/* Sized to fit INSIDE the avatar's width. It previously overflowed: nowrap
   content plus padding is wider than the 150px column, so the card stuck out
   past the photo and the whole block read as misaligned. */
.li-card{display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);padding:8px 4px;
  text-decoration:none;color:var(--ink);font-weight:700;white-space:nowrap;
  box-sizing:border-box;overflow:hidden}
.li-card:hover{background:var(--yellow)}
.li-card b{font-family:'Archivo Black',sans-serif;font-size:13px;line-height:1}
/* Its own element, not a bare text node: as raw text after an &nbsp; it got the
   flex gap AND the nbsp's width, so the space after the number was visibly
   wider than the space after the icon. */
.li-card span:not(.li-ic){font-size:11px;line-height:1}
.li-ic{background:#0A66C2;color:#fff;font-family:'Archivo Black',sans-serif;font-size:10px;
  width:17px;height:17px;display:grid;place-items:center;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
.author h2{font-size:clamp(26px,4vw,40px)}
.author .role{font-weight:700;font-size:18px;margin:6px 0 18px}
.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin:20px 0 22px}
.stat{background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);padding:12px 16px}
.stat .n{font-family:'Archivo Black',sans-serif;font-size:24px}
.stat .l{font-size:13px;font-weight:600}
.author blockquote{font-size:18px;font-weight:500;border-left:6px solid var(--ink);
  padding-left:16px;margin:18px 0 22px}
.li-btn{background:#0A66C2;color:#fff}
/* MOBILE. Two jobs: stop the card clipping, and get the whole section into
   one screen so it can be screenshotted in one go.

   The card no longer inherits the avatar's width. Forcing 120px was narrower
   than "in 78,000+ followers" can render, and overflow:hidden then CLIPPED the
   word rather than revealing the problem. It now sizes to its content and the
   column stops stretching it. Matching the photo exactly is a nice-to-have;
   showing the whole word is not. */
@media(max-width:640px){
  .author-grid{grid-template-columns:1fr;gap:18px}
  .avatar{width:116px;height:116px}
  .avatar-col{align-items:flex-start}
  .li-card{width:auto;align-self:flex-start;padding:7px 10px;gap:5px}
  .li-card b{font-size:12px}
  .li-card span:not(.li-ic){font-size:11px}
  .li-ic{width:16px;height:16px;font-size:9px}

  /* Everything below is vertical-space reclamation, so the section fits. */
  .author h2{font-size:28px}
  .author .role{font-size:14px;margin:5px 0 0;line-height:1.35}
  /* Three across instead of 2 + 1 wrapping: same information, one row less.
     min-width:0 lets a grid/flex child shrink below its content width — without
     it the three refuse to fit and wrap anyway. */
  .stat-row{gap:8px;margin:15px 0 14px;flex-wrap:nowrap}
  .stat{padding:9px 8px;flex:1;min-width:0}
  .stat .n{font-size:17px}
  .stat .l{font-size:10.5px;line-height:1.25}
  .author blockquote{font-size:15px;margin:14px 0 16px;padding-left:12px;border-left-width:5px}
  /* 70px top AND bottom was 140px of the section's 857px — the single biggest
     reason it did not fit a phone screen. Scoped to .author on purpose: the
     shared section padding is right everywhere else and this is the only block
     that has to be screenshottable whole. */
  .author{padding-top:44px;padding-bottom:44px}
  .clients{margin:14px 0}
}

/* ============ WHAT'S INSIDE ============ */
.inside{background:var(--lime)}
.items{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.item{background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);padding:22px}
.item .no{font-family:'Archivo Black',sans-serif;font-size:14px;background:var(--ink);
  color:var(--lime);display:inline-block;padding:4px 10px;margin-bottom:12px}
.item h3{font-size:19px;margin-bottom:7px}
.item p{font-size:15px;font-weight:500;color:#333}
@media(max-width:640px){.items,.pains{grid-template-columns:1fr}}

/* ============ TESTIMONIALS ============ */
.tst-grid{columns:2;column-gap:16px}
.tst{background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);padding:20px 22px;
  margin-bottom:16px;break-inside:avoid}
.tst .stars{color:#111;font-size:15px;letter-spacing:2px;margin-bottom:10px}
.tst p{font-size:15.5px;font-weight:500;margin-bottom:14px}
.tst .who{display:flex;align-items:center;gap:11px;border-top:2px solid var(--ink);padding-top:12px}
.tst .ini{font-family:'Archivo Black',sans-serif;width:38px;height:38px;min-width:38px;
  border:var(--bd);display:grid;place-items:center;font-size:15px}
.tst .nm{font-weight:700;font-size:15px;line-height:1.2}
.tst .rl{font-size:12.5px;font-weight:600;color:#555}
@media(max-width:640px){.tst-grid{columns:1}}

/* ============ OFFER / PRICE ============ */
.offer{background:var(--blue);color:#fff}
.offer h2{color:#fff}
.pricebox{background:var(--cream);color:var(--ink);border:var(--bd);box-shadow:var(--sh-lg);
  max-width:560px;margin:0 auto;padding:34px}
.pricebox .head{font-family:'Archivo Black',sans-serif;font-size:22px;text-align:center;margin-bottom:20px}
.incl{list-style:none;margin-bottom:24px}
.incl li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:2px dashed #cbb;font-weight:600;font-size:15.5px}
.incl li:last-child{border-bottom:none}
.incl .ck{font-family:'Archivo Black',sans-serif;color:var(--blue)}
.price-final{text-align:center;margin:6px 0 22px}
.price-final .was{font-size:19px;text-decoration:line-through;font-weight:700;color:#595959}
.price-final .now{font-family:'Archivo Black',sans-serif;font-size:56px;line-height:1}
.price-final .now small{font-size:26px}
.price-final .one{font-size:13px;font-weight:600}
.pricebox .btn{width:100%}
.pb-micro{text-align:center;font-size:13px;font-weight:600;margin-top:14px}

/* ============ GUARANTEE ============ */
.guarantee{background:var(--pink);color:var(--ink)}
.g-box{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.g-seal{font-family:'Archivo Black',sans-serif;background:#fff;color:var(--ink);
  border:var(--bd);box-shadow:var(--sh);width:130px;height:130px;min-width:130px;
  border-radius:50%;display:grid;place-items:center;text-align:center;font-size:15px;
  transform:rotate(-6deg);line-height:1.1}
.g-box h2{color:var(--ink)}
.g-box p{font-weight:500;font-size:18px;max-width:620px}
.g-tc{font-size:13px !important;font-weight:600;margin-top:14px;opacity:.9}
.g-tc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.faq .ans a{color:var(--blue);font-weight:700}
/* The kicker is blue, which is fine on cream/white but only 4.4:1 on the lime
   and pink fills. On a light-coloured section it goes ink, same rule the rest
   of the site follows: text on yellow/lime/pink is ink, never a mid tone. */
.inside .kicker,.guarantee .kicker,.proof .kicker,.author .kicker{color:var(--ink)}

/* ============ FAQ ============ */
.faq details{background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);margin-bottom:14px}
.faq summary{font-family:'Archivo Black',sans-serif;font-size:17px;padding:18px 22px;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{font-size:24px;transition:transform .2s}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq .ans{padding:0 22px 20px;font-weight:500;font-size:16px}

/* ============ FINAL CTA ============ */
.final{background:var(--ink);color:var(--cream);text-align:center}
.final h2{color:var(--cream);font-size:clamp(30px,5vw,52px);margin-bottom:20px}
.final .sub{font-size:19px;font-weight:500;max-width:560px;margin:0 auto 34px;color:#e9e4d8}
.final .pt{font-size:14px;margin-top:18px;color:#b9b3a5;font-weight:600}

/* ============ FOOTER ============ */
footer{background:var(--cream);text-align:center;padding:40px 20px;font-size:14px;font-weight:600}
footer .co{font-family:'Archivo Black',sans-serif;font-size:18px;margin-bottom:8px}
footer a{color:var(--ink);font-weight:700}
.foot-links{margin-top:12px;font-weight:600}
.foot-links a{text-decoration:underline;text-underline-offset:3px;margin:0 2px}

/* ============ STICKY BUY BAR (mobile) ============ */
.sticky-buy{position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:var(--cream);border-top:var(--bd);
  display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;transform:translateY(120%);transition:transform .3s ease}
.sticky-buy.show{transform:none}
.sticky-buy .p{font-family:'Archivo Black',sans-serif;font-size:15px;line-height:1.1}
.sticky-buy .p small{display:block;font-size:11px;text-decoration:line-through;color:#595959;font-family:'Space Grotesk';font-weight:700}
.sticky-buy .btn{padding:13px 20px;font-size:16px}
@media(max-width:720px){.sticky-buy{display:flex}}

/* ═══════════════════════════════════════════════════════════════════════════
   ADDITIONS FOR THE 2026 LANDERS (referrals-101 / inbound-101 / silence-101)

   These landers were written using class names that did not exist in this file,
   so whole sections rendered as unstyled HTML. They served 200 with no console
   errors and no overflow — which is exactly why "it loaded" is not the same
   check as "it looks right". Defining them here rather than inlining per page,
   for the same reason this file exists at all.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section headings */
.sec-title{font-size:clamp(26px,4.2vw,40px);margin-bottom:10px}
.sec-sub{font-size:17px;font-weight:500;color:#444;margin-bottom:30px;max-width:640px}
.center .sec-title,.center .sec-sub{margin-left:auto;margin-right:auto}
.center{text-align:center}
.note-line{margin-top:26px;font-size:15px;font-weight:600;background:var(--sky);
  border:var(--bd);box-shadow:var(--sh-sm);padding:14px 18px}

/* Numbered steps — "how it works" sequences */
.steps{display:grid;gap:16px}
.step{display:flex;gap:16px;align-items:flex-start;background:var(--paper);
  border:var(--bd);box-shadow:var(--sh-sm);padding:20px 22px}
.step-n{font-family:'Archivo Black',sans-serif;font-size:17px;background:var(--ink);
  color:var(--yellow);width:38px;height:38px;flex:none;display:grid;place-content:center}
.step h3{font-size:19px;margin-bottom:6px}
.step p{font-size:15.5px;font-weight:500;color:#333;line-height:1.6}

/* Module list — what's inside */
.mods{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mod{background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);padding:18px 20px}
.mod b{display:block;font-family:'Archivo Black',sans-serif;font-size:16px;margin-bottom:6px}
.mod span{display:block;font-size:15px;font-weight:500;color:#333;line-height:1.6}
@media(max-width:760px){.mods{grid-template-columns:1fr}}

/* Two-column for / not-for */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.two-col .col{background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);padding:22px}
.two-col h3{font-size:19px;margin-bottom:12px}
.tick,.cross{list-style:none}
.tick li,.cross li{position:relative;padding-left:30px;margin-bottom:11px;
  font-size:15.5px;font-weight:500;line-height:1.6}
.tick li::before{content:"✓";position:absolute;left:0;top:0;font-weight:900;color:#0D7A44}
.cross li::before{content:"✕";position:absolute;left:0;top:0;font-weight:900;color:var(--pink)}
@media(max-width:760px){.two-col{grid-template-columns:1fr}}

/* Pricebox internals used by the new landers */
.pb-title{font-family:'Archivo Black',sans-serif;font-size:22px;text-align:center;margin-bottom:18px}
.pb-list{list-style:none;margin-bottom:22px}
.pb-list li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;
  border-bottom:2px dashed #cbb;font-weight:600;font-size:15.5px}
.pb-list li::before{content:"✓";font-weight:900;color:#0D7A44;flex:none}
.pb-note{text-align:center;font-size:13.5px;font-weight:600;color:#555;margin-top:12px}
.price-final{text-align:center;margin-bottom:18px;display:flex;gap:10px;
  align-items:baseline;justify-content:center;flex-wrap:wrap}
.pf-was{font-size:19px;font-weight:700;color:#595959;text-decoration:line-through}
.pf-now{font-family:'Archivo Black',sans-serif;font-size:clamp(34px,6vw,46px);line-height:1}
.pf-gst{font-size:14px;font-weight:700;color:#555}

/* FAQ */
.faq-list details{background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);
  padding:16px 20px;margin-bottom:12px}
.faq-list summary{font-family:'Archivo Black',sans-serif;font-size:16.5px;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{content:"+ ";color:var(--blue)}
.faq-list details[open] summary::before{content:"– "}
.faq-list p{margin-top:11px;font-size:15.5px;font-weight:500;color:#333;line-height:1.65}

/* Footer */
.ftr{background:var(--ink);color:var(--cream);padding:30px 20px;text-align:center;font-size:14px}
.ftr a{color:var(--yellow);font-weight:700;text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr p{margin-top:10px;font-size:12.5px;color:#bbb}

/* ── PROOF: real screenshots ────────────────────────────────────────────────
   Slots for genuine recruiter messages. Any image that fails to load is hidden
   by proof.js, and the whole section hides if none load — so the page never
   shows a broken-image icon while screenshots are still being added.
   Screenshots MUST be real and MUST have names/companies redacted. */
.proof{background:var(--sky)}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.proof-shot{background:var(--paper);border:var(--bd);box-shadow:var(--sh-sm);padding:10px}
.proof-shot img{display:block;width:100%;height:auto;border:2px solid #e4e0d4}
.proof-shot figcaption{font-size:13.5px;font-weight:600;color:#444;margin-top:9px;line-height:1.5}

/* ═══════════════════════════════════════════════════════════════════════════
   FIXES — reported from the live pages (18 Jul 2026)

   1. FAQ TEXT SHOVED TO THE RIGHT. The new landers used
      <section class="sec faq"> with a .faq-list inside, so BOTH rule sets
      applied — and `.faq summary` sets display:flex + justify-content:
      space-between, which turned the "+" pseudo-element into one flex item and
      pushed the question text to the far right edge. The pages no longer carry
      the `faq` class, and .faq-list is made explicit here so it can never
      inherit that flex again.

   2. THE HIGHLIGHT SLAB WAS TOO TALL. .hl-pink / .hl-lime painted a solid
      background across the entire inline content area. For Archivo Black that
      area is much taller than the letterforms, so the word floated inside a
      thick block. Now painted as an em-sized band via a gradient: it hugs the
      text, scales with every clamp() font-size, and — unlike an inline-block
      with a tight line-height — can never clip a descender.
   ═══════════════════════════════════════════════════════════════════════════ */

.faq-list summary{display:block;padding:0;text-align:left}
.faq-list summary::before{font-family:'Archivo Black',sans-serif}

.hl-lime,.hl-pink{
  background-color:transparent;
  background-image:linear-gradient(var(--hl-c),var(--hl-c));
  background-repeat:no-repeat;
  /* Band sized to the FONT'S ink box (ascent+descent ≈ .91em for Archivo
     Black), not to the letters of one word — otherwise a word with a descender
     like "quiet" hangs its tail below the band, and .hl-pink's white text goes
     white-on-cream where it pokes out. .74em/56% did exactly that: measured 5.2px
     of the "q" outside the band. 1.04em with a ~1.5px margin covers ascender to
     descender. The 84% offset lands the band on the ink rather than on the
     centre of the (much taller) inline box; both values are in em and the box
     is font-metric driven, so this holds at every clamp() size. */
  background-position:center 84%;
  background-size:100% 1.04em;
  padding:0 .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
/* The band is always a light fill, so the word on it is always ink — inheriting
   a dark section's white text put white on yellow at 1.08:1. */
.hl,.hl-lime,.hl-pink{color:var(--ink)}
.hl-lime{--hl-c:var(--lime)}
.hl-pink{--hl-c:var(--pink)}

/* OFFER HEADING ALIGNMENT.
   .pricebox is `margin:0 auto`, so the buy box is centred. The nine original
   landers centre their offer heading with an inline
   style="text-align:center;margin-bottom:30px" on the <h2>; the three newer
   pages used <h2 class="sec-title"> instead, and .sec-title is left-aligned
   like every other section title. Result: the heading sat hard left while the
   box sat centred — measured 341px apart at a 951px viewport, which is the
   "Get found" bug. Doing it in CSS so it holds for any future page. The old
   pages are unaffected: their inline style wins and carries the same values. */
.offer .sec-title{text-align:center;margin-bottom:30px}
.offer .sec-sub{text-align:center;margin-left:auto;margin-right:auto}

/* ═══════════════════════════════════════════════════════════════════════════
   SCANALPHA LIVE WIDGETS: countdown to a real recurring event, a real
   activity count, and a lead-gated reveal form. Added for ScanAlpha but
   generic enough for any future lander that needs the same honest pattern:
   real data, or nothing shown at all. Never an invented number.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Countdown strip: sits like .topbar but in --pink, since this one carries
   genuine per-second motion and should read as distinct from the static bar. */
.urgency-strip{background:var(--pink);color:var(--ink);border-bottom:var(--bd);
  text-align:center;padding:12px 16px;font-weight:600;font-size:14px}
.urgency-strip b{font-family:'Archivo Black',sans-serif}
#countdownTimer{font-family:'Archivo Black',sans-serif;font-size:17px;
  background:var(--ink);color:var(--lime);padding:3px 10px;letter-spacing:.03em}

/* Social proof pill: hidden by default (JS unhides it only above a real
   threshold; see scanalpha-live.js). Never render a "0" fallback here. */
.social-proof{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);
  border:var(--bd);box-shadow:var(--sh-sm);padding:8px 16px;font-weight:700;font-size:14px;
  margin:0 auto 20px;width:fit-content}
.social-proof b{font-family:'Archivo Black',sans-serif}

/* Lead-gate form: inputs match the site's neo-brutalist input language (see
   .btn in this file): thick border, no radius, a hard press state is not
   needed here since a text input doesn't get pressed, only focused. */
.lg-box{background:var(--paper);border:var(--bd);box-shadow:var(--sh-lg);
  max-width:480px;margin:0 auto;padding:28px 26px}
.lg-box input[type=text],.lg-box input[type=email],.lg-box input[type=tel]{
  display:block;width:100%;font-family:'Space Grotesk',sans-serif;font-size:15px;
  padding:12px 14px;border:var(--bd);margin-bottom:12px;background:var(--cream)}
.lg-box input:focus{outline:3px solid var(--blue);outline-offset:1px}
.lg-consent{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:600;
  margin-bottom:16px;line-height:1.5}
.lg-consent input{margin-top:3px;flex:none}
.lg-err{background:#FFE8E4;border:var(--bd);border-color:var(--pink);padding:10px 14px;
  font-weight:700;font-size:13.5px;margin-bottom:14px}
.lg-reveal-lock{text-align:center;font-size:13.5px;font-weight:700;color:#555;margin-top:10px}
