/* Cards with real media. 4:5 so a 9:16 still crops gently and a landscape photo works. */
  .blog-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;}
  .bf{font-family:inherit;font-size:13px;font-weight:500;padding:8px 15px;border-radius:var(--radius-pill);border:1px solid var(--border);background:#fff;color:var(--grey-text);cursor:pointer;transition:.16s;}
  .bf:hover{border-color:var(--ink);color:var(--ink);}
  .bf.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600;}
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .blog-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s;}
  .blog-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(11,11,15,.11);}
  .bc-thumb{position:relative;aspect-ratio:4/5;overflow:hidden;background:#111;}
  .bc-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .bc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 8px 24px rgba(0,0,0,.3);}
  .bc-play::after{content:"";position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);border-left:13px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent;}
  .bc-dur{position:absolute;right:9px;bottom:9px;background:rgba(0,0,0,.8);color:#fff;font-size:11px;font-weight:600;padding:3px 7px;border-radius:5px;}
  .bc-body{padding:15px 16px 17px;}
  .bc-cat{display:inline-block;font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey-text);background:var(--off-white);padding:5px 9px;border-radius:var(--radius-pill);}
  .blog-card h3{font-size:16.5px;line-height:1.3;letter-spacing:-0.01em;margin:10px 0 7px;color:var(--ink);}
  .blog-card p{font-size:13.5px;line-height:1.5;color:var(--grey-text);margin:0 0 12px;}
  .bc-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--grey-text);}
  .bc-meta img{width:24px;height:24px;border-radius:50%;object-fit:cover;}
  @media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr;}.blog-feat{grid-template-columns:1fr;gap:26px;}.bf-reel{max-width:260px;}}
  @media(max-width:560px){.blog-grid{grid-template-columns:1fr;}}
    .post-hero .cs-hero-copy .eyebrow{color:rgba(255,255,255,0.6);}
    /* Breadcrumb eyebrow. "All articles" was a button competing with the real CTA for a
       reader who has not read a word yet; the way back to the blog belongs here, quiet. */
    .post-hero .cs-hero-copy .eyebrow a,.guide-hero .eyebrow a{color:rgba(255,255,255,0.82);text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.28);padding-bottom:1px;transition:color .18s ease,border-color .18s ease;}
    .post-hero .cs-hero-copy .eyebrow a:hover,.guide-hero .eyebrow a:hover{color:#fff;border-bottom-color:rgba(255,255,255,0.7);}
    .post-hero .cs-hero-copy .eyebrow i,.guide-hero .eyebrow i{font-style:normal;opacity:.45;margin:0 8px;}
    /* Skip link. The one action that serves someone who just arrived from a search result:
       take them to the answer. Deliberately a text link, not a button. */
    .hero-skip{display:inline-flex;align-items:center;gap:7px;margin-top:26px;font-size:13.5px;
      font-weight:500;letter-spacing:.005em;color:rgba(255,255,255,0.7);text-decoration:none;
      padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,0.16);
      background:rgba(255,255,255,0.04);transition:color .18s ease,border-color .18s ease,background .18s ease;}
    .hero-skip:hover{color:#fff;border-color:rgba(255,255,255,0.34);background:rgba(255,255,255,0.09);}
    .hero-skip svg{opacity:.8;transition:transform .18s ease;}
    .hero-skip:hover svg{transform:translateY(2px);}
    /* Land the anchor clear of the sticky nav rather than under it. */
    #short-answer{scroll-margin-top:104px;}
    /* Three-column flow: sticky contents, prose, sticky CTA. Same flow on posts and pillars. */
    /* The hero ends on a dark band; a full 100px of section padding under it left a
       dead white strip before anything started. Pulled in, and the rails get a small
       optical offset so the TOC label sits level with the byline. */
    .section:has(> .container > .postgrid){padding-top:54px;overflow:clip;}
    .postgrid{display:grid;grid-template-columns:200px minmax(0,1fr) 290px;gap:46px;max-width:1260px;margin:0 auto;align-items:start;}
    .postwrap{min-width:0;}
    .post-rail{position:sticky;top:96px;}
    .post-rail .toc-label{display:block;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey-text);margin-bottom:12px;}
    .post-rail ul{list-style:none;margin:0;padding:0;}
    .post-rail li{margin:0;}
    .post-rail a{display:block;font-size:13.5px;line-height:1.45;color:var(--grey-text);text-decoration:none;padding:7px 0 7px 13px;border-left:2px solid var(--border);}
    .post-rail a:hover,.post-rail a.act{color:var(--ink);font-weight:600;border-left-color:var(--grad-pink);}
    /* Sticky CTA card. Rail absorbs the conversion furniture so the prose stays clean. */
    .post-aside{display:grid;gap:14px;align-content:start;}

    /* On this page. Lifted from the PowerLoad explainer rail and Alex's ask pages:
       a measured progress line, a live current-section mark, and enough contrast to
       read as navigation rather than as small print. */
    .post-rail{--toc-progress:0;}
    .post-rail .toc-track{position:relative;}
    .post-rail .toc-track::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--border);border-radius:2px;}
    .post-rail .toc-track::after{content:"";position:absolute;left:0;top:0;width:2px;height:calc(var(--toc-progress)*100%);background:var(--gradient);border-radius:2px;transition:height .25s ease;}
    .post-rail a{border-left:0;padding:7px 0 7px 15px;font-size:13.5px;line-height:1.45;color:var(--grey-text);}
    .post-rail a.act{color:var(--ink);font-weight:600;}
    /* Rounded, like everything else on the site. Square corners on the FAQ rows and the
       proof strip were the odd ones out. */
    .postbody details,.post-faq details{border-radius:var(--radius-card);overflow:hidden;}
    .post-table{border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--border);}
    .post-table td{border:0;border-top:1px solid var(--border);}
    .post-table tr:first-child td{border-top:0;}
    /* Short accent rules get rounded ends. A 1px full-bleed divider stays square
       because a radius on a hairline does not render. */
    .postbody h2::after,.brand-rule,.post-rail .toc-track::after{border-radius:999px;}
    /* Mesh gradient hero. Replaces the flat black band. Five brand stops as soft radials
       over an ink base, so it reads as one wash rather than a striped linear-gradient. */
    .post-hero{
      background:
        radial-gradient(58% 72% at 12% 88%, rgba(122,77,255,.62) 0%, rgba(122,77,255,0) 62%),
        radial-gradient(52% 64% at 84% 16%, rgba(255,122,47,.52) 0%, rgba(255,122,47,0) 60%),
        radial-gradient(62% 70% at 78% 92%, rgba(216,61,255,.40) 0%, rgba(216,61,255,0) 64%),
        radial-gradient(46% 58% at 44% 28%, rgba(255,62,145,.34) 0%, rgba(255,62,145,0) 62%),
        linear-gradient(160deg, #14121c 0%, #0b0b10 58%, #120d18 100%) !important;
    }
    .post-hero .hero-bloom-tl,.post-hero .hero-bloom-br,.post-hero .hero-spot{display:none;}
    .post-hero .hero-card{background:transparent!important;box-shadow:none!important;}

    /* Ticks. Sam: "people like ticks". */
    .postbody ul.post-ticks{list-style:none;margin:6px 0 28px;padding:0;display:grid;gap:10px;}
    .postbody ul.post-ticks li{position:relative;padding-left:28px;font-size:17px;line-height:1.6;color:var(--ink);}
    /* A plain tick drawn in ink. No circle, no gradient. */
    .postbody ul.post-ticks li::before{content:"";position:absolute;left:2px;top:6px;width:9px;height:5px;
      border-left:2.2px solid var(--ink);border-bottom:2.2px solid var(--ink);
      transform:rotate(-45deg);background:none;border-radius:1px;}
    .postbody ul.post-ticks li::after{display:none;}

    /* Before and after, side by side. */
    .post-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 30px;}
    .pc-col{border:1px solid var(--border);border-radius:var(--radius-card);padding:17px 19px;background:var(--paper);}
    .pc-col b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:9px;color:var(--grey-text);}
    .pc-col.pc-after{border-color:rgba(255,62,145,.3);}
    .pc-col.pc-after b{color:var(--grad-pink);}
    .pc-col p{margin:0 0 8px;font-size:15.5px;line-height:1.55;}
    .pc-col p:last-child{margin-bottom:0;}
    @media(max-width:620px){.post-compare{grid-template-columns:1fr;}}

    /* A plain bar chart. No library, no canvas, just divs that print the number. */
    .post-bars{margin:6px 0 30px;display:grid;gap:13px;}
    .pb-row{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:13px;align-items:center;}
    .pb-row span{font-size:13.5px;color:var(--grey-text);}
    .pb-track{height:11px;border-radius:999px;background:var(--border);overflow:hidden;}
    .pb-fill{display:block;height:100%;border-radius:999px;background:var(--gradient);}
    .pb-row b{font-size:14.5px;letter-spacing:-.01em;}
    .post-bars-src{font-size:12.5px;color:var(--grey-text);margin:-18px 0 30px;}
    @media(max-width:620px){.pb-row{grid-template-columns:96px minmax(0,1fr) auto;gap:9px;}}
    /* Reading progress. Sits under the fixed nav, fills as you go. */
    .read-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;background:transparent;}
    .read-prog i{display:block;height:100%;width:0;border-radius:0 999px 999px 0;
      background:var(--gradient);transition:width .09s linear;}
    @media(prefers-reduced-motion:reduce){.read-prog i{transition:none;}}
    .post-rail .toc-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:12px;color:var(--grey-text);}

    /* Rail modules. The rail used to hold one card and then 3,000px of nothing. */
    .side-mod{border:1px solid var(--border);border-radius:var(--radius-large);padding:20px;background:var(--paper);}
    .side-mod .kicker{display:block;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey-text);margin-bottom:10px;}
    .side-mod h3{font-size:16px;line-height:1.3;letter-spacing:-0.01em;margin:0 0 8px;color:var(--ink);}
    .side-mod p{font-size:13.5px;line-height:1.55;color:var(--grey-text);margin:0 0 14px;}
    .side-mod .sm-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--border);padding-bottom:2px;transition:color .2s ease,border-color .2s ease;}
    .side-mod .sm-link:hover{color:var(--grad-pink);border-color:var(--grad-pink);}
    .side-mod .sm-link svg{width:13px;height:13px;color:var(--grad-pink);}
    /* ── Rail ──────────────────────────────────────────────────────────────────
       Six shapes, not one shape six times. Words sit on a picture ONLY in .rail-cta,
       which is a designed dark panel. Everywhere else the picture gets its own space
       and the words go underneath, because a photo with type over it is neither a
       good photo nor good type. */
    .rc-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;
      text-transform:uppercase;color:var(--grey-text);margin-bottom:9px;}
    .rc-more{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-size:13px;
      font-weight:600;color:var(--ink);}
    .rc-more svg{width:12px;height:12px;color:var(--grad-pink);}

    .rail-box{display:block;border:1px solid var(--border);border-radius:var(--radius-large);
      padding:18px;background:#fff;text-decoration:none;color:inherit;
      transition:border-color .18s ease,transform .18s ease;}
    a.rail-box:hover{border-color:var(--grad-pink);transform:translateY(-2px);}
    .rail-box b{display:block;font-size:15.5px;line-height:1.32;letter-spacing:-.01em;color:var(--ink);}

    /* 1. The one card that is meant to be a panel. */
    .rail-cta{border-radius:var(--radius-large);padding:22px;color:#fff;position:relative;overflow:hidden;
      background:radial-gradient(120% 120% at 18% 8%, rgba(255,122,47,.34) 0%, transparent 58%),
                 radial-gradient(120% 120% at 88% 96%, rgba(122,77,255,.42) 0%, transparent 60%), #0a0a0d;}
    .rail-cta .rc-k{color:rgba(255,255,255,.55);}
    .rail-cta h3{margin:0 0 9px;font-size:18px;line-height:1.24;letter-spacing:-.015em;color:#fff;}
    .rail-cta p{margin:0 0 15px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.72);}
    .rc-list{list-style:none;margin:0 0 15px;padding:0;display:grid;gap:7px;}
    .rc-list li{position:relative;padding-left:18px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.76);}
    .rc-list li::before{content:"";position:absolute;left:0;top:5px;width:6px;height:6px;border-radius:50%;background:var(--grad-pink);}
    .rc-btn{display:block;text-align:center;padding:11px 14px;border-radius:999px;
      background:var(--gradient);color:#fff;font-size:13.5px;font-weight:600;}

    /* 2. A price list is read, not looked at, so no picture. */
    .rail-svc{list-style:none;margin:0;padding:0;}
    .rail-svc li{border-top:1px solid var(--border);}
    .rail-svc li:first-child{border-top:0;}
    .rail-svc a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
      padding:10px 0;font-size:14px;color:var(--ink);transition:color .18s ease;}
    .rail-svc a:hover{color:var(--grad-pink);}
    .rail-svc b{font-size:12.5px;font-weight:600;color:var(--grey-text);white-space:nowrap;}

    /* 3. The still IS the content. Nothing covers it. */
    .rail-watch{display:block;border:1px solid var(--border);border-radius:var(--radius-large);
      overflow:hidden;background:#fff;text-decoration:none;color:inherit;
      transition:border-color .18s ease,transform .18s ease;}
    .rail-watch:hover{border-color:var(--grad-pink);transform:translateY(-2px);}
    .rw-media{position:relative;display:block;aspect-ratio:16/10;background:#111;}
    .rw-media img{width:100%;height:100%;object-fit:cover;display:block;}
    .rw-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;
      border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 6px 20px rgba(0,0,0,.3);}
    .rw-play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
      border-left:13px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent;}
    .rw-text{display:block;padding:14px 16px 16px;}
    .rw-text b{display:block;font-size:15px;line-height:1.32;letter-spacing:-.01em;color:var(--ink);}
    .rw-meta{display:block;margin-top:7px;font-size:12.5px;color:var(--grey-text);}

    /* 4. Proof is a number. */
    .rp-num{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;}
    .rp-num b{font-size:34px;line-height:1;letter-spacing:-.025em;
      background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
    .rp-num i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.09em;
      text-transform:uppercase;color:var(--grey-text);}
    .rail-proof p{margin:0;font-size:13px;line-height:1.5;color:var(--grey-text);}

    /* 5. Instagram. Clean frames, nothing written over them. */
    .rig{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:2px 0 4px;}
    .rig span{display:block;aspect-ratio:1;border-radius:7px;overflow:hidden;background:#111;}
    .rig img{width:100%;height:100%;object-fit:cover;display:block;}

    .rail-read b{margin-bottom:2px;}
    /* Pictures in the rail. It was four boxes of text. */
    .side-next{display:block;text-decoration:none;color:inherit;transition:border-color .18s ease;}
    .side-next:hover{border-color:var(--grad-pink);}
    .sn-thumb{display:block;border-radius:11px;overflow:hidden;aspect-ratio:16/10;margin:0 0 11px;background:#111;}
    .sn-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
    .sp-thumb{display:block;border-radius:11px;overflow:hidden;aspect-ratio:16/10;margin:0 0 12px;background:#111;}
    .sp-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
    .sl-thumb{flex:0 0 auto;width:46px;height:46px;border-radius:8px;overflow:hidden;background:#111;}
    .sl-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
    .sm-list{list-style:none;margin:0;padding:0;display:grid;gap:0;}
    .sm-list li{border-top:1px solid var(--border);}
    .sm-list li:first-child{border-top:0;}
    .sm-list a{display:flex;gap:11px;align-items:center;padding:10px 0;font-size:13.5px;line-height:1.35;color:var(--grey-text);transition:color .18s ease;}
    .sm-list a:hover{color:var(--ink);}
    .side-proof{display:flex;align-items:baseline;gap:9px;margin:0 0 8px;}
    .side-proof b{font-size:27px;line-height:1;letter-spacing:-0.02em;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
    .side-proof span{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey-text);}
    .post-askcard{background:var(--ink);color:#fff;border-radius:var(--radius-large);padding:24px;position:relative;overflow:hidden;}
    .post-askcard::before{content:"";position:absolute;bottom:-60px;right:-40px;width:220px;height:190px;background:radial-gradient(circle,rgba(255,62,145,.42),transparent 66%);filter:blur(34px);pointer-events:none;}
    .post-askcard h3{position:relative;font-size:17px;line-height:1.3;letter-spacing:-0.01em;margin:0 0 13px;color:#fff;}
    .post-askcard ul{position:relative;list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;}
    .post-askcard li{position:relative;display:flex;gap:8px;font-size:13px;line-height:1.45;color:#B9B9C4;padding:0;}
    .post-askcard li::before{content:"→";color:var(--grad-pink);flex:none;}
    .post-askcard .btn{position:relative;width:100%;justify-content:center;background:var(--gradient);color:#fff;}
    .post-proof{position:relative;margin-top:16px;padding-top:15px;border-top:1px solid rgba(255,255,255,0.12);display:flex;gap:10px;align-items:center;}
    .post-proof img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;}
    .post-proof p{margin:0;font-size:11.5px;line-height:1.4;color:#8a8a96;}
    .post-proof b{display:block;color:#fff;font-size:12.5px;}
    /* Byline with a face: credibility rendered as a component. */
    .post-byline{display:flex;align-items:center;gap:12px;margin:0 0 26px;padding-bottom:20px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
    .post-byline img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;}
    .pb-who b{display:block;font-size:14px;color:var(--ink);}
    .pb-who span{display:block;font-size:12.5px;color:var(--grey-text);}
    .pb-meta{margin-left:auto;text-align:right;font-size:12.5px;color:var(--grey-text);line-height:1.6;}
    .pb-meta em{font-style:normal;font-weight:600;color:var(--ink);}
    .post-partof{font-size:13px;font-weight:600;color:var(--grey-text);margin:-10px 0 24px;}
    .post-partof a{color:var(--grad-pink);text-decoration:none;}
    .post-partof a:hover{text-decoration:underline;text-underline-offset:3px;}
    /* Measure: 640px, not 720. Poppins runs wider per char than Inter, so 720 overshoots
       to ~81 characters per line. 640px lands at ~72, inside the comfortable 65-75 range. */
    /* Set size on the elements, not just the container: the site's base p/li rules target
       those elements directly, and a direct rule always beats an inherited one. Relying on
       inheritance here silently rendered the prose at 16px. */
    .postbody{font-size:17.5px;line-height:1.68;color:var(--ink-body);font-weight:var(--weight-medium);max-width:640px;}
    .postbody p,.postbody li{font-size:17.5px;line-height:1.68;color:var(--ink-body);font-weight:var(--weight-medium);}
    .postbody>p:first-child{font-size:20px;line-height:1.55;color:var(--ink);font-weight:500;padding:6px 0 6px 22px;border-left:3px solid transparent;border-image:var(--gradient) 1;margin-bottom:30px;}
    /* Answer-first block: the citable chunk. */
    .post-answer{position:relative;background:var(--paper);border:1px solid var(--border);
      padding:15px 20px 15px;margin:0 0 24px;border-radius:var(--radius-card);}
    .post-answer::before{content:"Short answer";display:block;font-size:10.5px;font-weight:700;
      letter-spacing:.15em;text-transform:uppercase;color:var(--grad-pink);margin-bottom:8px;}
    .postbody .post-answer p{margin:0;font-size:19px;line-height:1.5;color:var(--ink);font-weight:500;}
    /* A short rule under the answer, so the eye knows the answer has ended and the
       article is starting. */
    .post-answer::after{content:"";display:block;width:34px;height:2px;border-radius:999px;
      background:var(--gradient);opacity:.55;margin:13px 0 0;}
    /* The opening one answers the headline, so it carries the accent. The rest are quieter,
       or six tinted boxes stack up and nothing leads. */
    .postbody > .post-answer:first-of-type{background:linear-gradient(120deg,rgba(255,62,145,.06),rgba(122,77,255,.05));
      border-color:rgba(255,62,145,.28);}
    .postbody > .post-answer:first-of-type::before{content:"In short";}
    .post-facts{border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;margin:26px 0;max-width:640px;}
    .pf-row{display:flex;justify-content:space-between;gap:16px;padding:11px 16px;border-bottom:1px solid var(--border);font-size:15px;}
    .pf-row:last-child{border-bottom:0;}
    .pf-row span{color:var(--grey-text);}
    .pf-row b{color:var(--ink);text-align:right;}
    .post-facts-src{font-size:12.5px;color:var(--grey-text);font-style:italic;margin:-16px 0 26px;}
    .post-textcta{background:var(--off-white);border-left:3px solid transparent;border-image:var(--gradient) 1;padding:15px 18px;margin:26px 0;border-radius:0 10px 10px 0;font-size:16px;line-height:1.6;color:#33333a;}
    .post-textcta a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--grad-pink);text-decoration-thickness:2px;text-underline-offset:3px;}
    /* Portrait reel in the body: true 9:16, capped so it never dominates the column. */
    .post-reel{display:flex;justify-content:center;margin:32px 0 8px;}
    .reel-frame{position:relative;width:min(320px,100%);border-radius:20px;overflow:hidden;background:#000;border:1px solid var(--border);box-shadow:0 20px 48px rgba(11,11,15,.18);}
    .reel-frame video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;}
    .reel-badge{position:absolute;top:10px;left:10px;z-index:2;background:rgba(0,0,0,.72);color:#fff;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:5px 9px;border-radius:var(--radius-pill);}
    .post-reel-cap{text-align:center;font-size:13px;color:rgba(0,0,0,.5);margin:0 0 28px;}
    .post-faq{max-width:640px;margin:50px 0 0;}
    .post-faq>h2{font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-0.02em;margin:0 0 16px;color:var(--ink);}
    .post-faq details{border-top:1px solid var(--border);padding:16px 0;}
    .post-faq details:last-child{border-bottom:1px solid var(--border);}
    .post-faq summary{font-size:17px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;}
    .post-faq summary::after{content:"+";font-size:24px;font-weight:400;line-height:1;color:var(--grad-pink);}
    .post-faq details[open] summary::after{content:"\2013";}
    .post-faq summary::-webkit-details-marker{display:none;}
    .post-faq details p{margin:12px 0 0;color:#33333a;line-height:1.7;font-size:16px;}
    .post-author{max-width:640px;display:flex;gap:16px;align-items:flex-start;margin:40px 0 0;padding:24px;border:1px solid var(--border);border-radius:var(--radius-large);background:var(--off-white);}
    .post-author .pa-dot{flex:none;width:46px;height:46px;border-radius:50%;background:var(--gradient);}
    .pa-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--border);}
    .post-author strong{display:block;font-size:15px;color:var(--ink);margin-bottom:6px;}
    .post-author span{display:block;font-size:14px;line-height:1.6;color:var(--grey-text);margin-bottom:8px;}
    .post-author a{font-size:14px;font-weight:600;color:var(--grad-pink);text-decoration:none;}
    .post-author a:hover{text-decoration:underline;text-underline-offset:3px;}
    .postbody h2{font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-0.02em;line-height:1.16;margin:56px 0 0;color:var(--ink);scroll-margin-top:100px;}
    .postbody h2::after{content:"";display:block;width:44px;height:3px;border-radius:2px;background:var(--gradient);margin:14px 0 18px;}
    .postbody p{margin:0 0 28px;}
    .postbody strong{color:var(--ink);font-weight:600;}
    .postbody em{font-style:italic;}
    .postbody ul{list-style:none;margin:4px 0 24px;padding:0;display:grid;gap:14px;}
    .postbody ul li{position:relative;padding-left:30px;line-height:1.65;}
    .postbody ul li::before{content:"";position:absolute;left:0;top:11px;width:15px;height:3px;border-radius:2px;background:var(--gradient);}
    .postbody a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(216,61,255,.45);text-decoration-thickness:2px;text-underline-offset:3px;font-weight:500;}
    .postbody strong a,main strong a{font-weight:inherit;} /* a link inside bold copy stays bold */
    .postbody a:hover{text-decoration-color:var(--grad-pink);}
    .post-cta{margin:54px 0 0;background:var(--ink);color:#fff;border-radius:var(--radius-large);padding:46px 40px;position:relative;overflow:hidden;text-align:center;}
    .post-cta-bloom{position:absolute;right:-90px;bottom:-170px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(255,62,145,.34),rgba(122,77,255,.16) 46%,transparent 72%);pointer-events:none;}
    .post-cta p{position:relative;font-size:clamp(20px,2.6vw,27px);font-weight:600;color:#fff;margin:0 0 22px;letter-spacing:-0.02em;}
    .post-cta .btn{position:relative;background:#fff;color:var(--ink);}
    .post-cta .btn:hover{box-shadow:0 12px 28px rgba(255,62,145,0.3),0 0 0 1.5px var(--grad-pink);}
    .post-stats{display:flex;flex-wrap:wrap;gap:34px;margin:0 0 38px;padding:0 0 30px;border-bottom:1px solid var(--border);}
    .post-stat strong{display:block;font-size:clamp(34px,5vw,52px);font-weight:600;letter-spacing:-0.03em;line-height:1;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
    .post-stat span{display:block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--grey-text);}
    .post-figure{margin:34px 0;max-width:640px;border-radius:var(--radius-large);overflow:hidden;border:1px solid var(--border);box-shadow:0 24px 60px rgba(11,11,15,0.10);}
    .post-figure img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
    .post-quote{margin:40px 0;padding:4px 0 4px 26px;border-left:3px solid transparent;border-image:var(--gradient) 1;}
    .post-quote p{font-size:clamp(22px,3vw,30px);font-weight:600;line-height:1.3;letter-spacing:-0.02em;color:var(--ink);margin:0;}
    .post-quote cite{display:block;margin-top:12px;font-size:14px;font-style:normal;font-weight:600;color:var(--grey-text);}
    .post-delim{text-align:center;color:var(--grad-pink);font-size:13px;letter-spacing:0.5em;margin:36px 0;}
    .post-callout{margin:30px 0;padding:20px 22px;border-radius:var(--radius-large);background:var(--off-white);border:1px solid var(--border);border-left:3px solid transparent;border-image:var(--gradient) 1;}
    .post-callout strong{display:block;color:var(--ink);font-size:16px;margin-bottom:6px;}
    .post-callout p{margin:0;color:#33333a;line-height:1.7;}
    .post-tablewrap{overflow-x:auto;margin:28px 0;}
    .post-table{border-collapse:collapse;width:100%;font-size:16px;}
    .post-table th,.post-table td{border:1px solid var(--border);padding:10px 14px;text-align:left;}
    .post-table th{background:var(--off-white);font-weight:600;color:var(--ink);}
    .post-embed{position:relative;margin:30px 0;padding-top:56.25%;border-radius:var(--radius-large);overflow:hidden;border:1px solid var(--border);box-shadow:0 24px 60px rgba(11,11,15,0.10);}
    .post-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
    .post-embed-cap{font-size:14px;color:var(--grey-text);text-align:center;margin:10px 0 0;}
    .postbody mark{background:linear-gradient(120deg,rgba(255,62,145,0.18),rgba(122,77,255,0.18));padding:1px 4px;border-radius:3px;color:inherit;}
    .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
    .reveal.in{opacity:1;transform:none;}
    @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.phone-float{animation:none;}}
    /* ── Post hero: one type treatment, four layouts ─────────────────────────
       Every article hero shares the headline scale, the lede measure, the breadcrumb
       and the skip link. Only the media slot and the alignment change, because the
       shapes genuinely differ: a 16:9 video in the 288px phone letterboxes, and a 9:16
       reel in the 16:9 frame crops the head off.

         .has-yt     landscape video   one centred column, video under the copy
         .has-phone  portrait video    two columns, copy left, phone right
         .has-img    hero image        one centred column, image under the copy
         .no-media   nothing           one centred column, copy only, tighter padding

       The house H1 is clamp(48px,6.4vw,88px). This hero used to cap at 46px, which is
       why the title read as lost: it was landing at half the size of every other H1 on
       the site. The centred layouts take 64px; the two-column one takes 54px because
       its copy column is narrower, and a 64px headline in 620px sets as word-per-line. */

    /* Shared type treatment. Layout rules below only set width and alignment. */
    .post-hero .cs-hero-copy h1{line-height:1.02;letter-spacing:-0.032em;margin:0 0 18px;text-wrap:balance;}
    .post-hero .cs-hero-copy .lede{font-size:18px;line-height:1.55;margin:0;text-wrap:balance;}

    /* ── Centred layouts: landscape video, hero image, and no media ── */
    .cs-hero-top.has-yt,.cs-hero-top.has-img,.cs-hero-top.no-media{
      grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center;max-width:940px;margin:0 auto;}
    .hero-inner.has-yt,.hero-inner.has-img{padding:74px 72px 66px;}
    /* No media to balance the copy, so the band comes in rather than leaving a lake of black. */
    .hero-inner.no-media{padding:74px 72px 58px;}
    .cs-hero-top.has-yt .cs-hero-copy,.cs-hero-top.has-img .cs-hero-copy,.cs-hero-top.no-media .cs-hero-copy{
      text-align:center;max-width:none;margin:0;}
    .cs-hero-top.has-yt .cs-hero-copy h1,.cs-hero-top.has-img .cs-hero-copy h1,.cs-hero-top.no-media .cs-hero-copy h1{
      font-size:clamp(34px,4.8vw,64px);margin:0 auto 18px;max-width:17ch;}
    /* 54ch, so a 20-word standfirst sets in two lines and a 30-word one in three. */
    .cs-hero-top.has-yt .cs-hero-copy .lede,.cs-hero-top.has-img .cs-hero-copy .lede,.cs-hero-top.no-media .cs-hero-copy .lede{
      margin:0 auto;max-width:54ch;}
    .cs-hero-top.has-yt .hero-actions,.cs-hero-top.has-img .hero-actions,.cs-hero-top.no-media .hero-actions{
      display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
    .cs-hero-top.has-yt .cs-hero-yt{width:100%;max-width:none;margin:0;}
    .cs-hero-top.has-img .cs-hero-img{width:100%;max-width:940px;margin:0;}
    .cs-hero-img{position:relative;border-radius:var(--radius-large);overflow:hidden;
      border:1px solid rgba(255,255,255,0.12);box-shadow:0 30px 70px rgba(0,0,0,.5);background:#0a0a0d;}
    .cs-hero-img img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}

    /* ── Two-column layout: portrait video beside the copy ──
       Widened from the old 1fr/320px in a 920px band, which left the copy 544px and
       forced the 52px cap. 300px of phone in a 1180px band leaves ~760px of copy. */
    .hero-inner.has-phone{max-width:1180px;padding:74px 64px 66px;}
    .cs-hero-top.has-phone{grid-template-columns:minmax(0,1fr) 300px;gap:60px;align-items:center;text-align:left;}
    .cs-hero-top.has-phone .cs-hero-copy{text-align:left;max-width:none;margin:0;}
    .cs-hero-top.has-phone .cs-hero-copy h1{font-size:clamp(34px,4.0vw,54px);max-width:15ch;}
    .cs-hero-top.has-phone .cs-hero-copy .lede{max-width:50ch;}  /* 46ch pushed two of the 30 portrait standfirsts to four lines; 50ch clears all of them. */
    .cs-hero-top.has-phone .hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start;}
    .cs-hero-top.has-phone .cs-hero-media{justify-self:end;}

    @media(max-width:1000px){
      .cs-hero-top.has-yt,.cs-hero-top.has-img,.cs-hero-top.no-media,.cs-hero-top.has-phone{
        grid-template-columns:1fr;gap:30px;text-align:left;justify-items:stretch;}
      .hero-inner.has-yt,.hero-inner.has-img,.hero-inner.no-media,.hero-inner.has-phone{padding:96px 28px 44px;}
      .cs-hero-top.has-yt .cs-hero-copy,.cs-hero-top.has-img .cs-hero-copy,.cs-hero-top.no-media .cs-hero-copy{text-align:left;}
      .cs-hero-top.has-yt .cs-hero-copy h1,.cs-hero-top.has-img .cs-hero-copy h1,
      .cs-hero-top.no-media .cs-hero-copy h1,.cs-hero-top.has-phone .cs-hero-copy h1{margin-left:0;max-width:16ch;}
      .cs-hero-top.has-yt .cs-hero-copy .lede,.cs-hero-top.has-img .cs-hero-copy .lede,
      .cs-hero-top.no-media .cs-hero-copy .lede,.cs-hero-top.has-phone .cs-hero-copy .lede{margin-left:0;max-width:none;}
      .cs-hero-top.has-yt .hero-actions,.cs-hero-top.has-img .hero-actions,.cs-hero-top.no-media .hero-actions{justify-content:flex-start;}
      .cs-hero-top.has-phone .cs-hero-media{justify-self:center;}
    }
    
    .cs-hero-yt{position:relative;align-self:center;width:100%;aspect-ratio:16/9;border-radius:var(--radius-large);overflow:hidden;border:1px solid rgba(255,255,255,0.12);box-shadow:0 30px 70px rgba(0,0,0,.5);background:#000;}
    .cs-hero-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
    /* Click-to-play facade: shows the real YouTube thumbnail, loads nothing until clicked.
       Keeps YouTube's title bar and chrome off the hero, and keeps its JS out of our LCP. */
    .yt-lite{position:absolute;inset:0;cursor:pointer;border:0;padding:0;background:#000;width:100%;height:100%;display:block;}
    .yt-lite img{width:100%;height:100%;object-fit:cover;display:block;}
    .yt-lite .yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;border-radius:14px;background:rgba(0,0,0,.72);display:grid;place-items:center;transition:background .18s;}
    .yt-lite:hover .yt-play{background:#FF0000;}
    .yt-lite .yt-play::after{content:"";border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px;}
    .cs-hero-media{position:relative;filter:none;max-width:300px;}
    .phone-glow{position:absolute;inset:-20% -16% -14%;background:radial-gradient(circle at 50% 30%,rgba(216,61,255,.45),rgba(255,62,145,.22) 42%,transparent 70%);filter:blur(22px);z-index:0;pointer-events:none;}
    .phone{position:relative;z-index:1;width:100%;max-width:288px;margin:0 auto;aspect-ratio:9/19;background:linear-gradient(160deg,#1c1c24,#08080b);border-radius:42px;padding:9px;box-shadow:0 44px 90px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.07);}
    .phone::before{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);width:78px;height:22px;background:#050509;border-radius:14px;z-index:3;}
    .phone .screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#000;}
    .phone .screen video,.phone .screen iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0;}
    @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
    .phone-float{animation:floaty 6s ease-in-out infinite;}
    @media(max-width:1080px){.postgrid{grid-template-columns:1fr;gap:32px;max-width:700px;}.post-rail,.post-aside{position:static;}.post-rail ul{display:grid;gap:2px;}}
    @media(max-width:720px){.postbody,.postbody p,.postbody li{font-size:16.5px;}.postbody>p:first-child{font-size:19px;}.post-cta{padding:34px 24px;}.post-stats{gap:24px;}.phone{max-width:250px;}}