/* OUTLET IDs: book-style layer. Every value below is pulled from the OUTLET IDs book (body.pdf):
   red #EE2F29, pale pink #FCE8E9, ink #0C0F13, navy #003155, label yellow #FCF255,
   Futura LT Pro (web stand-in: Jost), Georgia titles (fallback Gelasio), Squada One pill headings,
   red page-header bands with a pink rule, pill labels, pink label boxes, outlet and breaker line pattern. */
@font-face{font-family:"Jost";src:url("fonts/jost-normal-400-900.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost-italic-400-900.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Gelasio";src:url("fonts/gelasio-normal-400-700.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Squada One";src:url("fonts/squadaone-normal-400.woff2") format("woff2");font-weight:400;font-display:swap}
:root{
  --bk-red:#EE2F29;--bk-red-ink:#C21F1A;--bk-red-deep:#9E1712;--bk-pink:#FCE8E9;--bk-pink-2:#F6CFD1;
  --bk-ink:#0C0F13;--bk-navy:#003155;--bk-yellow:#FCF255;--bk-muted:#3d434a;
  --serif:Georgia,"Gelasio","Times New Roman",serif;
  --sans:"Jost","Futura","Futura PT",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pill:"Squada One","Jost",sans-serif;
  --pattern:url("img/book-pattern.webp");--pattern-red:url("img/book-pattern-red.webp");
  --coral:var(--bk-red);--coral-d:var(--bk-red-ink);--char:var(--bk-ink);--ink:var(--bk-ink);--muted:var(--bk-muted);--cream:var(--bk-pink);--line:var(--bk-pink-2);--r:10px
}
html{background:#fff}
body{font-family:var(--sans);color:var(--bk-ink);font-weight:400;font-size:17.5px;line-height:1.6}
section{overflow-x:clip}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:0;line-height:1.12}
h3{font-family:var(--sans);font-weight:700;letter-spacing:0}
a{color:var(--bk-red-ink)}
:focus-visible{outline:3px solid var(--bk-ink);outline-offset:3px}

/* Page header band, as on every chapter page of the book: red band, white Georgia title, pink rule below */
main section h2{position:relative;z-index:0;background:var(--bk-red);color:#fff;font-size:clamp(1.7rem,5.6vw,2.6rem);padding:.42em .55em .38em;margin:0 0 1.2em;box-shadow:0 8px 0 #fff,0 12px 0 var(--bk-pink-2)}
main section h2.center{background:none;box-shadow:none;padding:.55em 0 .5em;margin-bottom:1.25em}
main section h2.center::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--bk-red)}
main section h2.center::after{content:"";position:absolute;z-index:-1;height:4px;bottom:-12px;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--bk-pink-2)}
main section:has(> .wrap > h2.center:first-child){padding-top:0}
.light{color:#fff}

/* Pill subheads (book: Squada One in a dark pill with a red offset; TIDBIT: red pill with ink outline) */
.eyebrow{font-family:var(--pill);font-weight:400;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--bk-ink);display:inline-block;padding:.32em 1.05em .26em;border-radius:999px;box-shadow:4px 3px 0 var(--bk-red);margin:0 0 1.1em;line-height:1.2}
.story p.eyebrow,.hero p.eyebrow{color:#fff}
.eyebrow.center{display:table;margin-inline:auto;margin-top:-.2em}
.hero .eyebrow,.inst-hero .eyebrow{background:var(--bk-red);border:2.5px solid var(--bk-ink);box-shadow:3px 3px 0 var(--bk-ink)}

/* Buttons: the book's red pill with an ink outline */
.btn{font-family:var(--sans);font-weight:700;background:var(--bk-red);color:#fff;border:2.5px solid var(--bk-ink);box-shadow:3px 3px 0 var(--bk-ink);border-radius:999px;letter-spacing:.01em}
.btn:hover{background:var(--bk-red-ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--bk-ink)}
.btn-small{box-shadow:2px 2px 0 var(--bk-ink);border-width:2px}
.btn-price{font-family:var(--serif);font-weight:700;background:#fff;color:var(--bk-red-ink);border-radius:6px;padding:2px 9px}
.btn-yellow{background:var(--bk-yellow);color:var(--bk-ink)}
.btn-yellow:hover{background:#fff27a;color:var(--bk-ink)}
.btn-yellow .btn-price{background:var(--bk-ink);color:var(--bk-yellow)}

/* Top bar: white like the page, red edge */
.topbar{background:rgba(255,255,255,.97);border-bottom:5px solid var(--bk-red);box-shadow:0 4px 0 var(--bk-pink)}
.brand{color:var(--bk-red-ink);font-family:var(--sans);font-weight:800;letter-spacing:.01em}
.brand-mark{background:var(--bk-red);color:var(--bk-yellow);font-family:var(--serif);font-weight:400;font-size:.95rem;border-radius:7px;width:40px}

/* Hero: the book's outlet + breaker line pattern behind a white page box */
.hero{background:#fff var(--pattern) center top/412px auto repeat}
.hero-copy{background:#fff;border-radius:14px;padding:26px 22px 24px;box-shadow:0 0 0 2px var(--bk-pink-2)}
.hero h1{font-size:clamp(2.1rem,7vw,3.5rem);color:var(--bk-ink)}
.hl{background:linear-gradient(transparent 68%,var(--bk-pink-2) 68%);color:var(--bk-red-ink)}
.lede{color:var(--bk-muted)}
.price-note{color:var(--bk-ink)}
.price-note .was,.price-note .sold-via,.price-note .ship-est{color:var(--bk-muted)}
/* label tags like "HOME ADDRESS" on the book's info page: pink box, red bar, spaced red caps */
.badges li{background:var(--bk-pink);border:0;border-left:5px solid var(--bk-red);border-radius:2px 6px 6px 2px;color:var(--bk-red-ink);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;padding:7px 12px}
.hero-media img{border-radius:10px;border:7px solid #fff;box-shadow:0 0 0 2px var(--bk-pink-2),0 18px 40px rgba(12,15,19,.18)}

.problem{background:#fff}
.card-img{border:2px solid var(--bk-pink-2);border-radius:10px;box-shadow:none}
.card-img figcaption{font-style:italic;color:var(--bk-muted);font-weight:500}

/* Steps: number badges like the book's red page-number and directory squares, Georgia numerals */
.steps{background:#fff}
.step-list li{border:2px solid var(--bk-pink-2);border-radius:10px;background:#fff}
.step-list h3{color:var(--bk-red-ink);font-weight:800}
.step-list p{color:var(--bk-muted)}
.num,.chap .n{background:var(--bk-red);color:var(--bk-yellow);font-family:var(--serif);font-weight:400;border-radius:8px;box-shadow:none;-webkit-text-stroke:0}
.wide-img img,.tall-img img{border-radius:10px;border:7px solid #fff;box-shadow:0 0 0 2px var(--bk-pink-2)}

/* Included: pink label boxes with the red bar, heavy red run-ins */
.included{background:#fff var(--pattern) center/412px auto repeat}
.included-grid>div{background:#fff;border-radius:14px;padding:26px 22px;box-shadow:0 0 0 2px var(--bk-pink-2)}
.checks{gap:10px}
.included .checks li{display:block;background:var(--bk-pink);border-left:5px solid var(--bk-red);border-radius:2px 8px 8px 2px;padding:11px 14px}
.included .checks li::before{display:none}
.checks strong{display:block;font-weight:800;color:var(--bk-red-ink)}
.checks span{color:var(--bk-ink)}

/* Look inside: page thumbnails with red pill captions */
.gallery figure{background:#fff;border:2px solid var(--bk-pink-2);border-radius:10px}
.gallery figcaption{font-family:var(--pill);font-weight:400;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--bk-red);padding:7px 12px 5px}

/* What's inside: the book's tally sheet rows, pink and white */
.book-topics{background:#fff}
#inside-book .topic-grid{gap:0 22px}
#inside-book .topic-grid li{background:#fff;border-radius:0;border-left:0;border-bottom:2px solid var(--bk-pink-2);padding:12px 14px}
#inside-book .topic-grid li:nth-child(odd){background:var(--bk-pink)}
#inside-book details.topic summary{font-weight:700;color:var(--bk-ink)}
#inside-book details.topic summary::after{color:var(--bk-red)}
#inside-book details.topic span{color:var(--bk-muted)}
.topics-more{color:var(--bk-ink)}
@media(min-width:700px){#inside-book .topic-grid li:nth-child(odd){background:#fff}#inside-book .topic-grid li:nth-child(4n+1),#inside-book .topic-grid li:nth-child(4n+2){background:var(--bk-pink)}}
@media(min-width:1000px){#inside-book .topic-grid li:nth-child(n){background:#fff}#inside-book .topic-grid li:nth-child(6n+1),#inside-book .topic-grid li:nth-child(6n+2),#inside-book .topic-grid li:nth-child(6n+3){background:var(--bk-pink)}}

/* Why it matters: the book's Directory page, red with the pattern and white rounded cards */
.benefits{background:var(--bk-red) var(--pattern-red) center/412px auto repeat;color:#fff}
.benefits h2.center::before{background:transparent}
.benefits h2.center::after{background:#fff;height:3px;left:30%;right:30%}
.benefit{background:#fff;color:var(--bk-ink);border-radius:12px;box-shadow:4px 4px 0 var(--bk-red-deep)}
.benefit h3{color:var(--bk-red-ink);font-weight:800}
.benefit p{color:var(--bk-ink)}
.b-icon{background:var(--bk-red);color:var(--bk-yellow);border-radius:8px}
.back-img img{border:7px solid #fff;border-radius:10px}
.back-img figcaption{color:#fff}

/* Warning signs: TIDBIT pills on white cards */
.sense{background:#fff;border:2px solid var(--bk-pink-2);border-radius:10px}
.sense h3{font-family:var(--pill);font-weight:400;font-size:1.05rem;letter-spacing:.06em;background:var(--bk-red);border:2px solid var(--bk-ink);box-shadow:2px 2px 0 var(--bk-ink);border-radius:999px;padding:3px 14px 1px}
.warn-sub{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--bk-ink)}
.warn-list li{background:var(--bk-pink);border-left:5px solid var(--bk-red);border-radius:2px 8px 8px 2px;padding:11px 14px 11px 12px}
.warn-list li::before{border-radius:6px;font-family:var(--serif);font-weight:700;background:var(--bk-red);color:var(--bk-yellow)}
/* TIDBIT box, as in the book: a white box tagged with a red pill */
.warn-close{position:relative;background:#fff;border:2px solid var(--bk-pink-2);border-radius:12px;padding:30px 20px 18px;margin-top:44px!important;font-weight:500;color:var(--bk-ink)}
.warn-close::before{content:"TIDBIT";position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-family:var(--pill);font-weight:400;font-size:1.15rem;letter-spacing:.08em;color:#fff;background:var(--bk-red);border:2.5px solid var(--bk-ink);box-shadow:3px 3px 0 var(--bk-ink);border-radius:999px;padding:2px 18px 0}

.photos{background:#fff var(--pattern) center/412px auto repeat}
.photo-grid img{border-radius:8px;border:6px solid #fff;box-shadow:0 0 0 2px var(--bk-pink-2)}

.guide{background:#fff}
.topics li{background:var(--bk-pink);border-left:5px solid var(--bk-red);border-radius:2px 8px 8px 2px}
.topics strong{color:var(--bk-red-ink);font-weight:800}
.topics span{color:var(--bk-ink)}

/* Story: set like the book's dedication page, Georgia on a white page over the pattern */
.story{background:#fff var(--pattern) center/412px auto repeat}
.story .wrap{background:#fff;border-radius:14px;padding:0 22px 22px;box-shadow:0 0 0 2px var(--bk-pink-2)}
.story h2.center::before,.story h2.center::after{left:-22px;right:-22px}
.story h2.center::before{border-radius:12px 12px 0 0}
.story p:not(.eyebrow){font-family:var(--serif);font-size:1.08rem;line-height:1.7;color:var(--bk-ink)}

.who{background:#fff}
.who-list li{background:var(--bk-pink);border:0;border-left:5px solid var(--bk-red);border-radius:2px 8px 8px 2px;color:var(--bk-ink)}

.faq details{border-bottom:2px solid var(--bk-pink-2)}
.faq summary{font-weight:700}
.faq summary::after{color:var(--bk-red);font-family:var(--sans);font-weight:700}
.faq details[open] summary{color:var(--bk-red-ink)}
.faq details p{color:var(--bk-ink)}

/* Closing call to action: red page with the pattern, label yellow button */
.cta{background:var(--bk-red) var(--pattern-red) center/412px auto repeat}
.cta h2{background:none!important;box-shadow:0 8px 0 transparent,0 12px 0 #fff!important;padding-left:0!important}
.cta p,.cta .cta-ship{color:#fff}
.cta-img{border:7px solid #fff;border-radius:10px}

.footer{background:var(--bk-ink);border-top:6px solid var(--bk-red);box-shadow:inset 0 4px 0 var(--bk-pink)}
.f-brand{font-family:var(--serif);font-weight:400}
.f-links a{color:var(--bk-yellow)}
.buybar{border-top:4px solid var(--bk-red)}
.buybar-t{color:var(--bk-ink)}
.buybar-t strong{color:var(--bk-red-ink);font-family:var(--serif)}

/* Install page */
.inst-hero{background:#fff var(--pattern) center/412px auto repeat!important;color:var(--bk-ink)!important;padding-bottom:40px!important}
.inst-hero h1{font-family:var(--serif);font-weight:400;color:var(--bk-ink)!important}
.inst-hero .wrap{background:#fff;border-radius:14px;padding:22px 18px 18px;box-shadow:0 0 0 2px var(--bk-pink-2);max-width:620px}
.inst-hero p:not(.eyebrow){color:var(--bk-muted)!important}
.inst-hero p.eyebrow{color:#fff!important}
.vid{border:7px solid #fff;box-shadow:0 0 0 2px var(--bk-pink-2),0 10px 30px rgba(0,0,0,.25)!important;border-radius:12px!important}
.chap li{border-bottom:2px solid var(--bk-pink-2)!important}
.chap li:nth-child(odd){background:var(--bk-pink)}
.chap li{padding:14px 12px!important}
.chap h3{color:var(--bk-red-ink);font-weight:800}
.chap p{color:var(--bk-ink)!important}
.inst-note{background:var(--bk-pink)!important;border:0!important;border-left:5px solid var(--bk-red)!important;border-radius:2px 8px 8px 2px!important}
.inst-note strong{color:var(--bk-red-ink);font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.inst-note.note strong{text-transform:none}

@media (min-width:820px){
  .hero-copy{padding:36px 34px 32px}
  .included-grid>div{padding:34px 32px}
  .story .wrap{padding:0 40px 32px}
  .story h2.center::before,.story h2.center::after{left:-40px;right:-40px}
  main section h2{font-size:clamp(2rem,3.4vw,2.8rem)}
}

/* v3 fixes for Hailey: her ORIGINAL outlet + breaker art as one big, calm background per section
   (no small tile grid, no seams, no inner layer repeating it), tighter consistent spacing, one clean rule under bands */
:root{--pattern:url("/img/book-pattern-big.webp?v=3");--pattern-red:url("/img/book-pattern-big-red.webp?v=3")}
.hero,.included,.photos,.story,.inst-hero{background-color:#fff!important;background-image:linear-gradient(#fff,rgba(255,255,255,0) 64px,rgba(255,255,255,0) calc(100% - 64px),#fff),var(--pattern)!important;background-repeat:no-repeat!important;background-size:100% 100%,1800px auto!important}
.benefits,.cta{background:var(--bk-red) var(--pattern-red) no-repeat!important;background-size:1800px auto!important}
.hero{background-position:0 0,50% 0%!important}
.included{background-position:0 0,30% 45%!important}
.benefits{background-position:70% 20%!important}
.photos{background-position:0 0,40% 75%!important}
.story{background-position:0 0,60% 55%!important}
.cta{background-position:50% 85%!important}
.inst-hero{background-position:0 0,45% 30%!important}
section{padding:56px 0}
.story{padding:56px 0!important}
main section h2{box-shadow:0 4px 0 var(--bk-pink-2)}
main section h2.center::after{bottom:-4px;height:4px}
.story h2.center{margin-bottom:1.1em}
@media (min-width:820px){
  section{padding:76px 0}
  .hero{padding:64px 0 76px}
  .story{padding:72px 0!important}
  .hero,.included,.photos,.story,.inst-hero{background-size:100% 100%,max(1900px,100%) auto!important}
  .benefits,.cta{background-size:max(1900px,100%) auto!important}
}

/* Hailey Oct 19: every pill matches the book's TIDBIT style: red pill, ink outline, ink offset */
.eyebrow,.cta .eyebrow,section .eyebrow{background:var(--bk-red)!important;color:#fff!important;border:2.5px solid var(--bk-ink)!important;box-shadow:3px 3px 0 var(--bk-ink)!important}


/* Hailey Oct 19 2:30 AM: plain white sections get a 12% #FF0000 tint, content sits in rounded white boxes like the patterned sections */
.problem,.steps,.inside,.book-topics,.warning,.guide,.who,.faq{background:rgba(255,0,0,.12)!important;padding:56px 0!important}
.problem>.wrap,.steps>.wrap,.inside>.wrap,.book-topics>.wrap,.warning>.wrap,.guide>.wrap,.who>.wrap,.faq>.wrap{background:#fff;border-radius:14px;padding:26px 22px 24px;box-shadow:0 0 0 2px var(--bk-pink-2);overflow:hidden}
.problem>.wrap>h2.center:first-child,.steps>.wrap>h2.center:first-child,.inside>.wrap>h2.center:first-child,.book-topics>.wrap>h2.center:first-child,.warning>.wrap>h2.center:first-child,.guide>.wrap>h2.center:first-child,.who>.wrap>h2.center:first-child,.faq>.wrap>h2.center:first-child{margin-top:-26px}
.problem h2.center::before,.steps h2.center::before,.inside h2.center::before,.book-topics h2.center::before,.warning h2.center::before,.guide h2.center::before,.who h2.center::before,.faq h2.center::before,
.problem h2.center::after,.steps h2.center::after,.inside h2.center::after,.book-topics h2.center::after,.warning h2.center::after,.guide h2.center::after,.who h2.center::after,.faq h2.center::after{left:-22px;right:-22px}
@media (min-width:820px){
  .problem,.steps,.inside,.book-topics,.warning,.guide,.who,.faq{padding:72px 0!important}
  .problem>.wrap,.steps>.wrap,.inside>.wrap,.book-topics>.wrap,.warning>.wrap,.guide>.wrap,.who>.wrap,.faq>.wrap{padding:34px 40px 32px}
  .problem>.wrap>h2.center:first-child,.steps>.wrap>h2.center:first-child,.inside>.wrap>h2.center:first-child,.book-topics>.wrap>h2.center:first-child,.warning>.wrap>h2.center:first-child,.guide>.wrap>h2.center:first-child,.who>.wrap>h2.center:first-child,.faq>.wrap>h2.center:first-child{margin-top:-34px}
  .problem h2.center::before,.steps h2.center::before,.inside h2.center::before,.book-topics h2.center::before,.warning h2.center::before,.guide h2.center::before,.who h2.center::before,.faq h2.center::before,
  .problem h2.center::after,.steps h2.center::after,.inside h2.center::after,.book-topics h2.center::after,.warning h2.center::after,.guide h2.center::after,.who h2.center::after,.faq h2.center::after{left:-40px;right:-40px}
}

.game-teaser{border:2px solid var(--bk-pink-2);box-shadow:3px 3px 0 var(--bk-ink)}
.gt-go{background:var(--bk-red);border:2px solid var(--bk-ink)}

/* Hailey Oct 19 3:16 AM: game card in book style (pink label box, red heading, Georgia numeral badge, Squada pill button) */
.game-teaser{background:var(--bk-pink)!important;border:2px solid var(--bk-pink-2)!important;border-left:6px solid var(--bk-red)!important;border-radius:10px!important;box-shadow:3px 3px 0 var(--bk-ink)!important}
.game-teaser:hover{border-color:var(--bk-red)!important}
.game-teaser .gt-badge{background:var(--bk-red);color:var(--bk-yellow);font-family:var(--serif);border-radius:7px;box-shadow:none}
.game-teaser .gt-text strong{color:var(--bk-red-ink);font-family:var(--sans);font-weight:800}
.game-teaser .gt-text span{color:var(--bk-muted)}
.game-teaser .gt-go{font-family:var(--pill);font-weight:400;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;background:var(--bk-red);color:#fff;border:2px solid var(--bk-ink);box-shadow:2px 2px 0 var(--bk-ink);border-radius:999px;padding:5px 16px 3px}
.game-teaser-top{margin:22px 0 0!important;max-width:520px}
/* Hailey Oct 19 3:16 AM: footer matches the header (white bar, red rule with pink line, red brand) */
footer.footer{background:rgba(255,255,255,.97)!important;color:var(--bk-ink)!important;border-top:5px solid var(--bk-red)!important;box-shadow:0 -4px 0 var(--bk-pink)!important}
footer.footer .f-brand{display:flex;align-items:center;gap:10px;color:var(--bk-red-ink);font-family:var(--sans);font-weight:800;font-size:1.1rem}
footer.footer .f-brand .brand-mark{display:grid;place-items:center;width:40px;height:34px;border-radius:7px;background:var(--bk-red);color:var(--bk-yellow);font-family:var(--serif);font-size:.95rem}
footer.footer p{color:var(--bk-muted)}
footer.footer .f-links a{color:var(--bk-red-ink)!important;font-weight:700}
footer.footer .f-small{color:#6b7178!important}

/* Hailey Oct 19 3:24 AM: header nav pills (Home, Install, Buy now) in the NEW GAME button style */
.topbar-in{gap:10px}
.hnav{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.hnav a{font-family:var(--pill);font-weight:400;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;background:var(--bk-red);color:#fff;border:2px solid var(--bk-ink);box-shadow:2px 2px 0 var(--bk-ink);border-radius:999px;padding:6px 13px 4px;line-height:1.1}
.hnav a:hover{background:var(--bk-red-ink)}
@media (max-width:480px){.topbar .brand-text{display:none}.hnav{gap:6px}.hnav a{font-size:.85rem;padding:5px 10px 3px}}

/* Hailey Oct 19 3:27 AM: Why it matters cards match the back cover (outline red icons, spaced caps headings, exact wording) */
.bk-benefit{display:flex;align-items:center;gap:16px;border-radius:18px!important;padding:20px 22px!important}
.bk-benefit .b-icon{flex:0 0 auto;background:none!important;color:var(--bk-red)!important;width:auto!important;height:auto!important;box-shadow:none!important;border-radius:0!important;margin:0!important;display:block}
.bk-benefit h3{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--bk-red)!important;font-size:1.05rem;margin:0 0 4px}
.bk-benefit p{font-family:var(--sans);letter-spacing:.05em;color:var(--bk-ink)!important;font-size:.95rem;line-height:1.35;margin:0}

@media (max-width:480px){.hnav{gap:5px}.hnav a{font-size:.8rem;padding:5px 8px 3px;letter-spacing:.04em}.topbar-in{gap:6px}}
@media (max-width:360px){.hnav a{font-size:.72rem;padding:4px 6px 2px}}

/* Hailey Oct 19 3:28 AM: bottom buy button in the header pill style (Squada, red, ink outline + offset), price chip yellow */
.cta .btn.btn-yellow{font-family:var(--pill)!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.06em;font-size:1.35rem!important;background:var(--bk-red)!important;color:#fff!important;border:3px solid var(--bk-ink)!important;box-shadow:4px 4px 0 var(--bk-ink)!important;border-radius:999px!important;padding:12px 14px 10px 26px!important;display:inline-flex;align-items:center;gap:12px}
.cta .btn.btn-yellow:hover{background:var(--bk-red-ink)!important}
.cta .btn.btn-yellow .btn-price{font-family:var(--pill)!important;font-weight:400!important;letter-spacing:.04em;background:var(--bk-yellow)!important;color:var(--bk-ink)!important;border:2px solid var(--bk-ink);border-radius:999px!important;padding:4px 14px 2px!important;font-size:1.3rem!important;font-variant-numeric:lining-nums}

/* Hailey Oct 19 3:31 AM: every price tag in the Squada pill font on white (no yellow) */
.btn-price{font-family:var(--pill)!important;font-weight:400!important;letter-spacing:.04em!important;font-variant-numeric:lining-nums;background:#fff!important;color:var(--bk-ink)!important;border:2px solid var(--bk-ink)!important;border-radius:999px!important;padding:3px 12px 1px!important}
.cta .btn.btn-yellow .btn-price{background:#fff!important}

.btn.btn-big{font-family:var(--pill)!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.06em}

/* Hailey Oct 19 3:39 AM: IDs square text white */
.brand-mark,footer.footer .f-brand .brand-mark{color:#fff!important}

/* Hailey Oct 19 3:43 AM: price tag = red serif (like the original top tag) on a white PILL */
.btn-price{font-family:var(--serif)!important;font-weight:700!important;letter-spacing:0!important;color:var(--bk-red-ink)!important;background:#fff!important;border:0!important;border-radius:999px!important;padding:4px 14px!important}
.cta .btn.btn-yellow .btn-price{background:#fff!important;color:var(--bk-red-ink)!important}

.cta .btn .btn-price,.cta .btn.btn-yellow .btn-price{font-family:var(--serif)!important;font-weight:700!important;letter-spacing:0!important;font-variant-numeric:normal!important}

/* NEC code quote + Panel Directory pages */
.nec-quote{margin:26px 0 18px;padding:0 0 0 16px;border-left:4px solid var(--bk-red,#EE2F29)}
#nec .nec-quote p{color:var(--bk-red,#EE2F29)!important;font-style:italic!important;font-family:Georgia,Gelasio,serif;line-height:1.6;margin:0 0 8px}
.nec-quote cite{display:block;font-style:normal;font-size:.85rem;font-weight:600;color:#555}
.nec-pages{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 8px}
.nec-pages figure{margin:0}
.nec-pages img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.nec-cap{text-align:center;font-size:.95rem;color:#555;margin-top:8px}

/* Step number badges: lining numerals so 1, 2, 3 sit on the same line */
.num,.chap .n{font-family:"Times New Roman",Times,"Liberation Serif",serif!important;font-variant-numeric:lining-nums!important;font-feature-settings:"lnum" 1!important}
/* Phones: each step photo follows its own step card */
@media (max-width:819px){
  #how .wrap{display:flex;flex-direction:column}
  #how .step-list,#how .step-photos{display:contents}
  #how .step-list li,#how .step-photos .step-photo{margin:18px auto 0;width:100%}
  #how .step-photos .step-photo{max-width:380px}
  #how .step-list li:nth-child(1){order:1} #how .step-photos .step-photo:nth-child(1){order:2}
  #how .step-list li:nth-child(2){order:3} #how .step-photos .step-photo:nth-child(2){order:4}
  #how .step-list li:nth-child(3){order:5} #how .step-photos .step-photo:nth-child(3){order:6}
}
/* Story: photo of Roma J. Richard Jr. */
.story-photo{margin:6px auto 22px;max-width:260px;text-align:center}
.story-photo img{width:100%;height:auto;display:block;border-radius:10px;box-shadow:0 3px 14px rgba(0,0,0,.15)}
.story-photo figcaption{font-size:.9rem;color:#555;margin-top:8px;font-style:italic}

/* oct19d: fold-out Panel Directory sheet, landscape, wider than the text column on desktop */
#nec .nec-sheet{grid-template-columns:1fr 1fr;gap:16px}
@media (min-width:900px){#nec .nec-sheet{width:min(1180px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%)}}
@media (max-width:699px){#nec .nec-sheet{grid-template-columns:1fr;gap:12px}}

/* oct19d2: readability wins, sheets stacked front then back at wide width */
#nec .nec-sheet{grid-template-columns:1fr;gap:18px}
@media (min-width:900px){#nec .nec-sheet{width:min(1040px,calc(100vw - 48px))}}
@media (max-width:899px){#nec .nec-sheet{width:calc(100vw - 16px);position:relative;left:50%;transform:translateX(-50%)}}

/* oct19e: widen the whole NEC card so the sheets sit inside it */
#nec .wrap.narrow{max-width:1120px}
#nec .nec-sheet{width:100%!important;left:auto!important;transform:none!important;position:static!important}
#nec .wrap.narrow > p,#nec .nec-quote{max-width:820px;margin-left:auto;margin-right:auto}
#nec .wrap.narrow{width:min(1120px,100% - 40px)}

/* oct19f: sheets small, side by side like the Look Inside cards; card back to normal width */
#nec .wrap.narrow{width:min(760px,100% - 40px);max-width:none}
#nec .nec-sheet{grid-template-columns:1fr 1fr!important;gap:14px;max-width:760px;margin-left:auto;margin-right:auto}
#nec .nec-sheet figure{margin:0}
#nec .nec-sheet a{display:block}
@media (max-width:560px){#nec .nec-sheet{grid-template-columns:1fr!important}}
/* dedication 37/20A label */
.tribute-label{display:block;margin:2px auto 18px;width:74px;height:auto}

.f-disclaimer{font-size:.8rem;opacity:.75;margin-top:8px;max-width:640px}