/* How it works (16 October 2026): the two free reads side by side. Built on the brands page's bl- parts
   (brand-offers.css); everything here is the page's own, under hw-. */
.hw .bl-hero.hw-hero{grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:40px;min-height:0;padding:56px 0 48px;margin:0;overflow:visible}
.hw-hero h1{max-width:16ch}
.hw-hero .bl-lede{max-width:46ch}
.hw-hero-actions{margin-top:26px}
.hw-ghost{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 20px;border-radius:12px;border:1px solid #4d4580;background:#151226;color:#e6defe;font-weight:700;font-size:.9375rem;transition:border-color .15s,background .15s}
.hw-ghost:hover{border-color:#8f7cff;background:#1d1838}
.hw-ghost .bl-arrow svg,.hw-ghost svg{width:18px;height:18px}

/* The two doors: one picture each, the promise on top, the free read named. */
.hw-doors{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0}
.hw-door{position:relative;display:block;border-radius:20px;overflow:hidden;border:1px solid #2c3350;box-shadow:0 20px 50px #0007;isolation:isolate;color:var(--bl-ink);transition:transform .2s,border-color .2s}
.hw-door:hover{transform:translateY(-2px);border-color:#6c5cff}
.hw-door-art{position:absolute;inset:0;z-index:-1;margin:0}
.hw-door-art img{width:100%;height:100%;object-fit:cover;display:block}
.hw-door::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0b0d14f2 0%,#0b0d14c4 46%,#0b0d1420 100%)}
.hw-door-copy{display:grid;gap:10px;max-width:62%;padding:26px 28px;min-height:212px;align-content:center}
.hw-door-tag{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:5px 12px 5px 6px;border-radius:999px;background:#1c1838e6;border:1px solid #4d4580;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#cfc3ff}
.hw-door-ico{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(145deg,#6c5cff,#c46cff)}
.hw-door-ico svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hw-door-copy b{font-size:1.25rem;line-height:1.3;font-weight:750}
.hw-door-go{display:inline-flex;align-items:center;gap:8px;color:#c9bcff;font-weight:650;font-size:.9375rem}
.hw-door-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hw-door-brand::after{background:linear-gradient(90deg,#0d0b14f2 0%,#120d18c4 46%,#0d0b1420 100%)}

/* The two paths, side by side. */
.hw-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding:56px 0;border-top:1px solid var(--bl-line);scroll-margin-top:24px}
.hw-path{display:grid;grid-template-rows:auto 1fr auto;gap:22px;min-width:0;padding:26px;border-radius:22px;background:linear-gradient(180deg,#151a2b,#0e121e);border:1px solid #272e45;box-shadow:0 1px 0 #ffffff0d inset,0 16px 40px #0006;scroll-margin-top:24px}
.hw-path-brand{background:linear-gradient(180deg,#1b1526,#100d18);border-color:#3a2c48}
.hw-path-head{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:center}
.hw-path-art{margin:0;border-radius:14px;aspect-ratio:1;overflow:hidden}
.hw-path-art img{width:100%;height:100%;object-fit:cover;display:block}
.hw-path-copy .bl-eyebrow{margin-bottom:8px}
.hw-path h2{font-size:clamp(1.5rem,2.1vw,1.875rem);line-height:1.2;margin:0}
.hw-path-summary{color:var(--bl-muted);margin:10px 0 0}
.hw-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:none}
.hw-steps li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"ico copy n";gap:14px;align-items:start;padding:14px 16px;border-radius:14px;background:#0f1320cc;border:1px solid #232a3f}
.hw-path-brand .hw-steps li{background:#140f1ccc;border-color:#30253e}
.hw-step-ico{grid-area:ico;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:linear-gradient(145deg,#352c78,#1d1850);color:#c4b6ff;box-shadow:0 0 18px #7c6cff33}
.hw-path-brand .hw-step-ico{background:linear-gradient(145deg,#5a2c6e,#2c1845);color:#f0b8ff;box-shadow:0 0 18px #ff6ec733}
.hw-step-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hw-steps li>div{grid-area:copy;min-width:0}
.hw-steps h3{font-size:1.0625rem;margin:2px 0 4px}
.hw-steps p{color:var(--bl-muted);font-size:.9375rem;line-height:1.55;margin:0}
.hw-step-n{grid-area:n;font-size:.75rem;font-weight:700;letter-spacing:.1em;color:#6e74a0;padding-top:4px}
.hw-path-next{display:grid;gap:14px;padding-top:6px;border-top:1px solid #262c41}
.hw-path-brand .hw-path-next{border-top-color:#33283f}
.hw-result{margin:0;color:var(--bl-ink)}
.hw-path-actions{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap}
.hw-path-next .bl-sub{margin-top:0}
.hw-button-brand{background:linear-gradient(90deg,#b05cff,#ff6ec7);box-shadow:0 8px 28px #ff6ec755,0 0 0 1px #ffffff14 inset}

/* After the free read: what is free, and how more is bought. */
.hw-after h2,.hw-sources h2{margin:0 0 28px;max-width:26ch}
.hw-after-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.hw-after-col{padding:24px;border-radius:18px;border:1px solid #272e45;background:#11151f}
.hw-after-brand{border-color:#3a2c48;background:#140f1b}
.hw-after-col h3{margin:0 0 16px;font-size:1.0625rem;color:#d9cfff}
.hw-after-col ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.hw-after-col li{display:flex;gap:14px;align-items:flex-start}
.hw-after-col li>div{display:grid;gap:3px;min-width:0}
.hw-after-col b{font-size:1rem}
.hw-after-col span{color:var(--bl-muted);font-size:.9375rem;line-height:1.55}
.hw .bl-round svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Where it comes from. */
.hw-trust{border-top:0;padding:0}

/* The closing band: both free reads. */
.hw-band{display:grid;grid-template-columns:minmax(0,1fr) 200px;align-items:center;gap:32px}
.hw-band-actions{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 18px}
.hw-band-mark{justify-self:center;width:160px;opacity:.9;filter:drop-shadow(0 0 40px #7c6cff66)}
.hw-band-mark svg{width:100%;height:auto;display:block}

@media (max-width:1100px){
 .hw .bl-hero.hw-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding:40px 0 32px}
 .hw-door-copy{max-width:70%}
}
@media (max-width:900px){
 .hw-paths,.hw-after-grid{grid-template-columns:minmax(0,1fr)}
 .hw-band{grid-template-columns:minmax(0,1fr)}
 .hw-band-mark{display:none}
}
@media (max-width:560px){
 .hw-door-copy{max-width:none;min-height:0;padding:22px 20px 26px}
 .hw-door::after{background:linear-gradient(180deg,#0b0d1499 0%,#0b0d14f2 70%)}
 .hw-door{min-height:280px;display:flex;align-items:flex-end}
 .hw-path{padding:20px}
 .hw-path-head{grid-template-columns:minmax(0,1fr)}
 .hw-path-art{aspect-ratio:16/9}
 .hw-steps li{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"ico copy"}
 .hw-step-n{display:none}
 .hw-step-ico{width:40px;height:40px}
 .hw-band-actions .bl-button,.hw-path-actions .bl-button{width:100%;justify-content:center}
}

/* The homepage (16 Oct 2026): the same doors and band, short on a phone. */
.hm .hm-hero h1{max-width:15ch}
.hm-actions{margin-top:26px}
.hm-actions .bl-button{min-width:0}
.hm-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hm-tiles article{padding:24px;border-radius:18px;background:linear-gradient(180deg,#151a2b,#0e121e);border:1px solid #272e45;box-shadow:0 1px 0 #ffffff0d inset,0 12px 32px #0006}
.hm-tiles h3{margin:0 0 8px;font-size:1.125rem}
.hm-tiles p{margin:0;color:var(--bl-muted)}
.hm-tiles .bl-tile svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hm-more{margin:18px 0 0}
.hm .hm-outcomes h2{margin:0 0 28px}
.hm .bl-get .bl-cards.hm-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.hm-gv-who li span:nth-child(2){font-size:.8125rem}
.hm-gv-who b{font-size:.75rem;white-space:nowrap}
@media (max-width:1100px){.hm .bl-get .bl-cards.hm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hm .bl-get .bl-cards.hm-cards{grid-template-columns:none}}
@media (max-width:900px){.hm-tiles{grid-template-columns:minmax(0,1fr);gap:12px}.hm-tiles article{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 16px;padding:18px}.hm-tiles .bl-tile{grid-row:span 2;width:48px;height:48px;margin:0}}
@media (max-width:560px){
 .hm .bl-hero.hw-hero{padding:28px 0 20px;gap:20px}
 .hm-actions{flex-direction:column;align-items:stretch;gap:10px}
 .hm-actions .bl-button{width:100%;justify-content:center}
 .hm .hw-doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .hm .hw-door{min-height:0;display:block}
 .hm .hw-door-art{position:relative;inset:auto;aspect-ratio:4/3;display:block}
 .hm .hw-door::after{display:none}
 .hm .hw-door-copy{padding:12px 12px 14px;gap:6px;background:#11141f}
 .hm .hw-door-copy b{font-size:1rem}
 .hm .hw-door-tag{font-size:.8125rem;padding:3px 8px 3px 4px}
 .hm .hw-door-go{font-size:.875rem}
 .hm .bl-section{padding:28px 0}
 .hm .hm-band{padding:24px 20px}
}

/* How it works on a phone (16 Oct 2026): the doors become two compact tiles like the homepage's, and the
   path pictures are left to larger screens. */
@media (max-width:560px){
 .hw:not(.hm) .bl-hero.hw-hero{padding:28px 0 20px;gap:20px}
 .hw:not(.hm) .hw-hero-actions{flex-direction:column;align-items:stretch;gap:10px}
 .hw:not(.hm) .hw-hero-actions>a{justify-content:center}
 .hw .bl-hero .bl-checks{flex-direction:row;flex-wrap:wrap;gap:8px 18px}
 .hw:not(.hm) .hw-doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .hw:not(.hm) .hw-door{min-height:0;display:block}
 .hw:not(.hm) .hw-door-art{position:relative;inset:auto;aspect-ratio:4/3;display:block}
 .hw:not(.hm) .hw-door::after{display:none}
 .hw:not(.hm) .hw-door-copy{padding:12px 12px 14px;gap:6px;background:#11141f}
 .hw:not(.hm) .hw-door-copy b{font-size:1rem}
 .hw:not(.hm) .hw-door-tag{font-size:.8125rem;padding:3px 8px 3px 4px}
 .hw:not(.hm) .hw-door-go{font-size:.875rem}
 .hw .hw-path-art{display:none}
 .hw .hw-paths{padding:28px 0;gap:16px}
 .hw .hw-steps li{padding:12px 14px}
 .hw .bl-section{padding:28px 0}
}

/* The homepage on desktop (16 Oct 2026, owner: "all the best parts from the previous homepage, upgraded
   to the brands page's design"): the sample plan, the five examples and the four photographed steps,
   restyled to the bl- look. Phones skip them so the phone homepage stays short. */
.hm-sample{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:48px;align-items:center}
.hm-sample h2{margin:0 0 14px;max-width:16ch}
.hm-lede{color:var(--bl-muted);max-width:42ch;margin:0}
.hm .hm-chips{list-style:none;padding:0;margin:20px 0 10px;display:flex;flex-wrap:wrap;gap:10px 22px}
.hm-chips li{display:flex;align-items:center;gap:8px;font-size:.9375rem}
.hm .hero-plan{margin:0;padding:22px;border-radius:22px;background:radial-gradient(90% 70% at 100% 0%,#3a2b7a44,transparent 70%),linear-gradient(180deg,#151a2b,#0e121e);border:1px solid #2c3350;box-shadow:0 1px 0 #ffffff0d inset,0 24px 60px #0008}
.hm .hero-plan .panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.hm .hero-plan .panel-head h2{font-size:1.25rem;margin:0}
.hm .hero-plan .badge{padding:4px 10px;border-radius:999px;background:var(--bl-grad);color:#fff;font-size:.75rem;font-weight:700}
.hm .hero-plan .tabs{display:flex;gap:6px;padding:4px;border-radius:12px;background:#0b0e18;border:1px solid #232a3f;margin-bottom:14px}
.hm .hero-plan .tabs button{flex:1;border:0;border-radius:9px;background:transparent;color:var(--bl-muted);font-weight:650;padding:9px 10px;min-height:44px}
.hm .hero-plan .tabs button[aria-selected=true]{background:linear-gradient(145deg,#352c78,#1d1850);color:#fff;box-shadow:0 0 18px #7c6cff40}
.hm .hero-stage-controls{display:flex;gap:8px;margin-bottom:12px}
.hm .hero-stage-controls button{border-radius:999px;border:1px solid #33395a;background:#121626;color:#d6d0f5;font-weight:650;padding:6px 14px;min-height:44px}
.hm .hero-stage-controls button[aria-pressed=true]{border-color:#7c6cff;background:#211b46;color:#fff}
.hm .hero-shots figure{border-radius:14px;overflow:hidden;border:1px solid #2a3150;background:#0d1019}
.hm .hero-shots figcaption{color:var(--bl-muted);font-size:.875rem}
.hm .hero-shots figcaption strong{color:#e6defe}
.hm .hero-plan .text-link{color:#c4b6ff;font-weight:650}
.hm .hero-plan .disclosure{color:#8a90aa}
.hm-examples .bl-row{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}
.hm-examples h2{margin:0}
.hm .example-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.hm .example-cards.count-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hm .example-card{display:grid;gap:8px;align-content:start;padding:12px 12px 18px;border-radius:18px;background:linear-gradient(180deg,#151a2b,#0e121e);border:1px solid #272e45;color:var(--bl-ink);box-shadow:0 12px 32px #0006;transition:transform .2s,border-color .2s}
.hm .example-card:hover{transform:translateY(-3px);border-color:#6c5cff}
.hm .example-card .photo{border-radius:12px;overflow:hidden}
.hm .example-card .audience-label{width:max-content;padding:3px 10px;border-radius:999px;background:#1c1838;border:1px solid #4d4580;color:#cfc3ff;font-size:.75rem;font-weight:700;letter-spacing:.04em}
.hm .example-card h3{margin:2px 0 0;font-size:1.0625rem}
.hm .example-card p{margin:0;color:var(--bl-muted);font-size:.9375rem;line-height:1.5}
.hm .example-card .explore-word{color:#c4b6ff;font-weight:650;font-size:.875rem}
.hm-how .section.how{padding:56px 0;border-top:1px solid var(--bl-line)}
.hm-how .section-heading .eyebrow{color:#b8a6ff;letter-spacing:.14em;font-weight:700;font-size:.8125rem}
.hm-how .section-heading h2{font-size:clamp(1.75rem,2.6vw,2.5rem)}
.hm-how .section-heading p{color:var(--bl-muted)}
.hm-how .workflow-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;padding:0}
.hm-how .workflow-cards li{border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#151a2b,#0e121e);border:1px solid #272e45;box-shadow:0 12px 32px #0006}
.hm-how .workflow-step{padding:16px 18px 20px}
.hm-how .workflow-step .step{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#352c78,#1d1850);color:#c4b6ff;font-weight:700;font-size:.8125rem}
.hm-how .workflow-step h3{margin:10px 0 6px;font-size:1.0625rem}
.hm-how .workflow-step p{color:var(--bl-muted);font-size:.9375rem;margin:0}
.hm-how .text-link{color:#c4b6ff;font-weight:650}
@media (max-width:1100px){.hm-sample{grid-template-columns:minmax(0,1fr)}.hm .example-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.hm-how .workflow-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hm-wide{display:none}}