/* Stories pack opt-in, design 5a "Story card" (Karl 20 Oct 2026). Source: D5a-Phone.dc.html (390) and
   D5a-Desktop.dc.html (1440x900). One page: the phone layout under 900px; from 900px the desktop, which
   stacks (copy, then the Story) until there is room for two columns at 1180px. Everything on desktop sits
   in a centred 1320 container, so it holds on wide screens. Values are the boards' own. */

@font-face{font-family:"Editors Note";src:url(/strategy-pack/fonts/editors-note-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Editors Note";src:url(/strategy-pack/fonts/editors-note-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Poppins";src:url(/strategy-pack/fonts/poppins-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url(/strategy-pack/fonts/poppins-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url(/strategy-pack/fonts/poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --cream:#f7f5f1; --ink:#0e0d0b; --ink-2:#343029; --muted:#6a655c; --line:#e8e5df; --field:#cbc6bb;
  --sun:#fcce70; --butter:#ffdc7a;
  --serif:"Editors Note",Georgia,serif;
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* line-height stays normal where the boards leave it unset, so text sits where it does on the boards */
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px var(--sans);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--ink-2)}
a:hover{color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.preview{background:var(--ink);color:var(--cream);font:500 11px/1.4 var(--sans);letter-spacing:.04em;text-align:center;padding:5px 16px}
.d-only{display:none}

/* The button: ink pill with the Instagram ring as its border */
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;margin:0;padding:0 24px;border-radius:999px;border:3px solid transparent;
  background:linear-gradient(var(--ink),var(--ink)) padding-box,conic-gradient(from 200deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75) border-box;
  color:var(--cream);font:600 16px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.cta:hover,.cta:focus-visible{color:var(--cream);transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(150,47,191,.6)}
.cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cta[disabled]{opacity:.75;cursor:wait}
.cta svg{flex:none}

.d5a{position:relative;font-family:var(--sans);color:var(--ink);overflow-x:clip}

/* ---------- Phone: Story card on top, then the copy, the pack, the poll, the second button ---------- */
.grid{max-width:520px;margin:0 auto;display:flex;flex-direction:column}
.stage{display:contents}
.frame{order:1;position:relative;padding:16px 16px 0}
.copy{order:2;position:relative;margin-top:30px;padding:0 20px}
.stickers{order:3;display:flex;flex-direction:column;padding:0 20px}
.below{max-width:520px;margin:0 auto}
.again{margin-top:30px;padding:0 20px}

/* The Story card: her photo, a shade so the bar and handle read, the progress bar, her handle */
.card{position:relative;aspect-ratio:358/290;border-radius:22px;overflow:hidden;background:var(--line);box-shadow:0 18px 40px rgba(14,13,11,.16)}
.card .shot{position:absolute;max-width:none;left:-18.72%;top:-57.93%;width:131.28%;height:auto}
.shade{position:absolute;left:0;right:0;top:0;height:90px;background:linear-gradient(180deg,rgba(14,13,11,.42),rgba(14,13,11,0))}
.segs{position:absolute;left:12px;right:12px;top:10px;display:flex;gap:4px}
.seg{flex:1 1 0;height:3px;border-radius:2px;background:rgba(255,255,255,.45);overflow:hidden}
.seg.done{background:#fff}
.seg i{display:block;width:40%;height:100%;background:#fff}
.who{position:absolute;left:12px;top:22px;display:flex;align-items:center;gap:8px}
.who img{box-sizing:content-box;width:30px;height:30px;border-radius:999px;object-fit:cover;object-position:50% 20%;border:1.5px solid #fff}
.who p{margin:0;font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(14,13,11,.35)}
.who span{font-weight:400;margin-left:4px;opacity:.9}
.pack{position:absolute;right:6px;bottom:-34px;width:160px;height:auto;transform:rotate(-5deg);filter:drop-shadow(0 12px 22px rgba(14,13,11,.28))}

.eyebrow{margin:0;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--cream);border-radius:999px;padding:8px 13px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.eyebrow i{width:6px;height:6px;border-radius:999px;background:var(--sun)}
h1{margin:16px 0 0;font-family:var(--serif);font-weight:400;font-size:58px;line-height:.98;letter-spacing:-.02em}
h1 em{display:inline-block;transform:rotate(-3deg);background:var(--sun);color:var(--ink);border-radius:10px;padding:0 12px 5px}
.lede{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}

/* Headline split test (Karl 20 Oct). The head script sets html.hv-a or html.hv-b before paint; these custom
   properties pick the block. Custom properties inherit into a shadow root, so the same rule works on WordPress,
   where wp/build-wp.py keeps this one html.hv-b rule at document level. No class (no JavaScript) shows A. */
html.hv-b{--hv-a:none;--hv-b:block}
.hv-a{display:var(--hv-a,block)}
.hv-b{display:var(--hv-b,none)}
/* Who it is for, small, under the eyebrow (A) or above the headline (B) */
.for{margin:10px 0 0;font-size:12.5px;line-height:1.4;font-weight:500;color:var(--muted)}
.for:first-child{margin-top:0}
/* B, the original: product name with Strategy in butter, then the bold one-line promise */
h1.h1-b{line-height:1.02}
h1.h1-b mark{display:inline-block;transform:rotate(-2deg);background:var(--sun);color:var(--ink);border-radius:10px;padding:0 10px 4px}
.sub{margin:12px 0 0;font-size:17px;line-height:1.35;font-weight:600;color:var(--ink)}
.sub em{font-style:italic}
/* Proof line under the button */
.proof{margin:10px 0 0;text-align:center;font-size:13px;line-height:1.4;font-weight:500;color:var(--ink-2)}
.proof span{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* Form: two pills and the button on the phone, one pill holding all of it on desktop */
.optin{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.box{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--field);border-radius:999px;padding:0 18px;height:54px}
.box svg{flex:0 1 auto} /* shrinks a little beside the email field, as on the board */
.box input{flex:1 1 auto;min-width:0;width:100%;height:52px;margin:0;padding:0 2px;border:0;background:transparent;font:400 16px/1.2 var(--sans);color:var(--ink)}
.box input::placeholder{color:#757575;opacity:1} /* the boards show the browser default grey; pinned so Safari matches */
.box input:focus{outline:none}
.box:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.optin .cta svg{width:18px;height:18px}
.divider{display:none}
.field .err{display:none;margin:6px 18px 0;font-size:13px;line-height:1.4;color:#9b2c1f}
.field.bad .box{border-color:#9b2c1f}
.field.bad .err{display:block}
/* Honeypot: off-screen, not display:none (bots skip hidden fields), out of the tab order and autofill */
.hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}

.note{margin:10px 0 0 14px;display:flex;align-items:flex-start;gap:8px}
.note svg{flex:none;width:22px;height:26px}
.note p{margin:4px 0 0;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.2;color:var(--ink-2)}
.badges{margin:26px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.dot{width:4px;height:4px;border-radius:999px;background:var(--ink);display:inline-block}
.legal-d{display:none}

.pack-big{width:100%;height:auto;margin-top:30px;filter:drop-shadow(0 18px 30px rgba(14,13,11,.18))}

/* Story stickers: the poll and the reply it leads to */
.poll{margin:40px 44px 0;transform:rotate(-3deg);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(14,13,11,.18)}
.poll-q{background:linear-gradient(120deg,#d62976,#fa7e1e);padding:12px 14px 10px;text-align:center}
.poll h2{margin:0;font-size:15px;line-height:1.3;font-weight:600;color:#fff}
.poll-a{padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px}
.opt{display:block;width:100%;height:42px;margin:0;border-radius:11px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:600 16px var(--sans);cursor:pointer}
.opt.on{background:var(--butter);border:2px solid var(--ink)}
.opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.reply-row{position:relative;margin-top:-18px;display:flex;justify-content:flex-end}
.reply{margin:0;transform:rotate(3deg);background:var(--ink);color:var(--butter);border-radius:999px;padding:10px 20px 11px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.1;box-shadow:0 10px 24px rgba(14,13,11,.22)}

/* Testimonials (Karl 20 Oct): three result cards. A bold result label, her words, then her face, name and role.
   Phone: a swipe row that bleeds to the screen edges, snapping card by card. Desktop: three across (below). */
.voices{margin-top:48px;padding:0 20px}
.voices h2{margin:0;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05;letter-spacing:-.01em}
.voices h2 em{font-style:italic}
.tcs{list-style:none;margin:22px -20px 0;padding:4px 20px 18px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tcs::-webkit-scrollbar{display:none}
.tc{flex:0 0 84%;scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border-radius:22px;padding:20px 20px 18px;box-shadow:0 12px 30px rgba(14,13,11,.08),0 0 0 1px rgba(14,13,11,.05)}
.tc-res{margin:0;align-self:flex-start;background:var(--butter);border-radius:10px;padding:5px 11px 6px;font-size:15px;line-height:1.3;font-weight:600;color:var(--ink)}
.tc-q{flex:1;margin:14px 0 0}
.tc-q p{margin:0;font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--ink)}
.tc-who{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.tc-who p{margin:0;display:flex;flex-direction:column;gap:1px;font-size:14px;line-height:1.3}
.tc-who b{font-weight:600}
.tc-who span{font-size:12.5px;color:var(--muted)}
.av{flex:none;width:44px;height:44px;border-radius:999px;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--sun)}
.ini{display:flex;align-items:center;justify-content:center;background:var(--butter);color:var(--ink);font:600 15px var(--sans);letter-spacing:.02em}

.foot{padding:30px 20px;text-align:center;font-size:11.5px;line-height:1.5;color:var(--muted)}

/* ---------- Desktop ---------- */
/* Phone: the whole ask above the fold, even in an in-app browser (Karl 20 Oct, iPhone in Discord: the button was cut off).
   A shorter Story card, a smaller headline and tighter gaps put the button inside about 620px. */
@media (max-width:899px){
  .frame{padding:12px 14px 0}
  .card{aspect-ratio:362/200}
  .card .shot{left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:60% 27%}
  .pack{width:118px;right:4px;bottom:-24px}
  .copy{margin-top:20px}
  .eyebrow{padding:7px 12px;font-size:9.5px}
  h1{margin-top:12px;font-size:46px}
  .lede{margin-top:10px;font-size:14.5px;line-height:1.45}
  .optin{margin-top:14px;gap:8px}
  .box{height:50px}
  .box input{height:48px}
  .optin .cta{height:52px}
  h1.h1-b{font-size:42px}
  .sub{margin-top:10px;font-size:16px}
}

/* Short phone screens (in-app browsers and Safari with its bars, up to 800px visible; Karl's targets: button
   bottom under ~640 at 414x780): a slimmer card and headline */
@media (max-width:899px) and (max-height:800px){
  .card{aspect-ratio:362/150}
  .card .shot{object-position:60% 30%}
  .pack{width:96px;bottom:-18px}
  .copy{margin-top:14px}
  h1{margin-top:10px;font-size:40px}
  .lede{font-size:14px}
  .optin{margin-top:12px}
  .box{height:46px}
  .box input{height:44px}
  .optin .cta{height:48px}
  .for{margin-top:8px;font-size:12px}
  h1.h1-b{font-size:36px}
  .sub{margin-top:8px;font-size:15px;line-height:1.3}
}

/* Very short (iPhone SE and mini in Safari, about 550px visible; target: button bottom under ~550 at 375x548) */
@media (max-width:899px) and (max-height:600px){
  .frame{padding-top:10px}
  .card{aspect-ratio:362/108}
  .pack{width:80px;bottom:-14px}
  .copy{margin-top:12px}
  .eyebrow{padding:6px 11px;font-size:9px}
  .for{margin-top:6px;font-size:11.5px}
  h1{margin-top:8px;font-size:36px}
  h1.h1-b{font-size:31px}
  .lede{margin-top:8px;font-size:13.5px;line-height:1.4}
  .sub{margin-top:6px;font-size:14px}
  .optin{margin-top:10px;gap:7px}
  .box{height:44px}
  .box input{height:42px}
  .optin .cta{height:46px}
}

@media (min-width:900px){
  .preview{position:absolute;left:0;right:0;top:0;z-index:5}
  .d-only{display:inline}
  .again,.foot .consent,.pack-big{display:none}

  /* Testimonials: a row under the two columns, inside the same 1320 container */
  .below{max-width:1320px;padding:0 40px 90px}
  .voices{margin:0;padding:0}
  .voices h2{font-size:56px}
  .voices h2{text-align:center}
  .tcs{margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;overflow:visible}
  .tc{padding:26px 26px 22px;border-radius:26px}
  .tc-res{font-size:16px;padding:6px 13px 7px}
  .tc-q{margin-top:18px}
  .tc-q p{font-size:24px}
  .below .again{display:block;max-width:420px;margin:44px auto 0;padding:0}

  /* Stacked until two columns fit (the board's own fallback): copy, then the Story frame centred under it */
  .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:64px;align-items:center;max-width:1320px;min-height:max(900px,100vh);padding:40px 40px 80px}
  .copy{order:0;margin:0;padding:0;min-width:0}
  .stage{display:block;position:relative;width:440px;height:780px;justify-self:center}
  .frame{position:absolute;inset:0;padding:0}
  .card{position:absolute;inset:0;aspect-ratio:auto;border-radius:30px;box-shadow:0 40px 90px rgba(14,13,11,.22),0 0 0 1px rgba(14,13,11,.06)}
  .card .shot{left:-112px;top:-105px;width:620px;height:930px}
  .shade{height:130px}
  .segs{left:16px;right:16px;top:14px;gap:5px}
  .who{left:16px;top:30px;gap:10px}
  .who img{width:38px;height:38px;border-width:2px}
  .who p{font-size:14px}
  .pack{z-index:2;right:auto;left:-128px;bottom:-36px;width:380px;max-width:none;filter:drop-shadow(0 24px 40px rgba(14,13,11,.28))}

  .stickers,.reply-row{display:contents}
  .poll{position:absolute;right:-78px;top:360px;width:250px;margin:0;transform:rotate(-4deg);border-radius:18px;box-shadow:0 24px 60px rgba(14,13,11,.24)}
  .poll-q{padding:13px 16px 11px}
  .poll-a{padding:12px 12px 14px;gap:8px}
  .opt{height:44px;border-radius:12px;font-size:15px}
  .reply{position:absolute;right:-40px;top:568px;padding:11px 22px 12px;font-size:20px;white-space:nowrap;box-shadow:0 12px 30px rgba(14,13,11,.25)}

  .eyebrow{gap:12px;padding:11px 20px;font-size:13px;letter-spacing:.16em}
  .eyebrow i{width:8px;height:8px}
  h1{margin-top:26px;font-size:104px;line-height:.96;letter-spacing:-.025em}
  h1 em{border-radius:16px;padding:0 20px 8px;box-shadow:0 10px 24px rgba(14,13,11,.12)}
  .lede{margin-top:26px;max-width:560px;font-size:20px;line-height:1.6}
  .for{margin-top:18px;font-size:15px}
  h1.h1-b{font-size:84px;line-height:1;letter-spacing:-.02em}
  h1.h1-b mark{border-radius:16px;padding:0 16px 6px;box-shadow:0 10px 24px rgba(14,13,11,.12)}
  .sub{margin-top:22px;max-width:620px;font-size:24px;line-height:1.35}
  .proof{max-width:660px;margin-top:14px;text-align:left;padding-left:26px;font-size:14px}

  /* One white pill: envelope, first name, divider, email, button. The fields' wrappers step aside
     (display:contents) so their inputs sit in the pill's grid and their errors drop below it.
     102/218 is the split the board's flex pill gives the two fields at its 660 width. */
  .optin{position:relative;isolation:isolate;max-width:660px;margin-top:26px;display:grid;grid-template-columns:22px minmax(0,102fr) 1px minmax(0,218fr) auto;column-gap:10px;align-items:center;padding:0 8px 0 25px}
  .optin::before{content:"";grid-row:1;grid-column:1/-1;align-self:stretch;margin:0 -8px 0 -25px;z-index:-1;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 14px 40px rgba(14,13,11,.10)}
  .optin:focus-within::before{border-color:var(--ink)}
  .field,.box{display:contents}
  .box input{grid-row:1;height:56px;padding:0 2px;font-size:17px}
  .f-email svg{grid-row:1;grid-column:1;width:22px;height:22px}
  .f-first input{grid-column:2}
  .divider{display:block;grid-row:1;grid-column:3;width:1px;height:28px;background:var(--line)}
  .f-email input{grid-column:4}
  .optin .cta{grid-row:1;grid-column:5;width:auto;height:58px;margin:8px 0;padding:0 24px;font-size:17px;white-space:nowrap}
  .optin .cta svg{width:20px;height:20px}
  .field .err{grid-column:2/-1;margin:8px 0 0}
  .f-first .err{grid-row:2}
  .f-email .err{grid-row:3}
  .field.bad input{color:#9b2c1f}
  .field.bad input::placeholder{color:#9b2c1f}

  .note{margin:16px 0 0 26px;gap:12px}
  .note svg{width:30px;height:34px}
  .note p{margin-top:6px;font-size:24px}
  .badges{margin-top:30px;gap:20px;font-size:13px;letter-spacing:.2em}
  .dot{width:5px;height:5px}
  .legal-d{display:block;margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted);}
}
/* Two columns: copy left, the Story frame right (the 1440 board) */
@media (min-width:1180px){
  .grid{grid-template-columns:minmax(0,1fr) 500px;padding:0 40px}
}
@media (prefers-reduced-motion:reduce){.cta{transition:none}.cta:hover{transform:none}}

/* "For coaches..." as a thin pill (Karl 20 Oct 05:44: stands out, little space). Last in the file so it wins. */
.for{display:inline-flex;align-items:center;gap:7px;max-width:100%;box-sizing:border-box;margin:10px 0 0;padding:4px 11px 4px 9px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.7);color:var(--ink-2);
  font-size:11px;line-height:1.3;font-weight:600;letter-spacing:.01em}
.for::before{content:"";flex:none;width:6px;height:6px;border-radius:999px;background:var(--sun)}
.hv-b .for:first-child{margin-top:0}
@media (max-width:899px){ .for{font-size:10.5px;padding:3px 10px 3px 8px} }
@media (min-width:900px){ .for{margin-top:16px;font-size:13px;padding:6px 14px 6px 12px} }
.m-only{display:inline}
@media (min-width:900px){ .m-only{display:none} }
/* Three cards in the narrower stacked desktop (900 to 1179): a smaller quote so each card stays short */
@media (min-width:900px) and (max-width:1179px){ .tc{padding:22px 20px 20px} .tc-q p{font-size:20px} }

/* One split pill (Karl 20 Oct 06:46): the ink name and who it is for, joined. A says the pack name, B says the formula
   (B's headline is already the pack name). On the phone the ink half is just "Free" so the whole pill fits one line. */
.tagline{display:inline-flex;align-items:center;max-width:100%;box-sizing:border-box;margin:0;padding:3px 12px 3px 3px;gap:10px;
  border:1px solid var(--line);border-radius:999px;background:#fff;font-size:10.5px;line-height:1.3}
.tl-name{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:var(--cream);border-radius:999px;
  padding:6px 11px 6px 10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:9.5px}
.tl-name i{width:6px;height:6px;border-radius:999px;background:var(--sun)}
.tl-for{min-width:0;font-weight:600;color:var(--ink-2);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:370px){ .tagline{gap:7px;padding-right:9px;font-size:9.8px} .tl-name{padding:5px 9px 5px 8px;letter-spacing:.1em} }
@media (min-width:900px){
  .tagline{padding:4px 18px 4px 4px;gap:14px;font-size:13px}
  .tl-name{gap:10px;padding:9px 16px 9px 14px;font-size:11px;letter-spacing:.15em}
  .tl-name i{width:8px;height:8px}
}

/* One footer for every funnel page (20 Oct): consent line (phone only, the desktop form carries it), entity, terms, privacy, contact */
.sp-foot{color:var(--muted);font-size:12px;line-height:1.6}
.sp-foot p{margin:0}
.sp-foot p+p{margin-top:4px}
.sp-foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Consent line: first sentence on one line on desktop, "Unsubscribe any time." on its own line (Karl 21 Oct) */
@media (min-width:1024px){.legal-d .legal-l1{white-space:nowrap}}