/* What only guide No. 2, "Are Facebook ads worth it?", needs. Everything else comes from book.css. */
.strong{font-weight:900}
.pg p.tight{margin-top:8px}
.pg h3.sub{margin-top:16px;font-size:27px}
.cmp.fit{min-width:0}
.fb-cap{caption-side:top;padding:8px 10px;font-size:15.5px;font-weight:700;line-height:1.15;text-align:left;background:var(--canvas);border-bottom:2px solid rgba(17,23,27,.2)}

/* the cover */
.cov-scale{transform-box:view-box;transform-origin:322px 96px;animation:fb-scale 4.2s ease-in-out infinite}
@keyframes fb-scale{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.cov-thumb{animation:fb-thumb 3.4s ease-in-out infinite}
@keyframes fb-thumb{0%,100%{transform:translateY(6px)}45%,70%{transform:translateY(-3px)}}

/* chapter one: rocks, then settles level, because the average is roughly break-even */
.fb-rock{width:min(100%,400px);margin:12px auto 0;overflow:visible}
.fb-rock-beam{transform-box:view-box;transform-origin:240px 80px}
.on .fb-rock-beam{animation:fb-rock 2.4s ease-in-out .4s both}
@keyframes fb-rock{0%{transform:rotate(-8deg)}30%{transform:rotate(6deg)}55%{transform:rotate(-3.5deg)}78%{transform:rotate(1.5deg)}100%{transform:none}}

/* chapter two */
.fb-bars{margin-top:16px}
.fb-bars div{margin-top:9px}
.fb-bars span{display:block;font-size:17px;font-weight:800;line-height:1.1}
.fb-bars i{display:block;margin-top:4px;height:30px;border:3px solid var(--ink);border-radius:7px;background:var(--canvas);box-shadow:3px 3px 0 var(--ink);font-style:normal;overflow:hidden}
.fb-bars i b{display:block;width:var(--w);height:100%;padding-right:9px;background:var(--blue);border-right:3px solid var(--ink);font-weight:900;line-height:24px;text-align:right;transform-origin:0 50%}
.on .fb-bars i b{animation:fb-grow .9s cubic-bezier(.3,1,.4,1) .3s both}
@keyframes fb-grow{from{transform:scaleX(0)}to{transform:none}}

/* the window and the counter */
.shopf{width:100%;margin-top:12px;overflow:visible}
.shop-prof{transform:translateX(90px);transition:transform .9s cubic-bezier(.45,.05,.25,1)}
.shop-prof.at-counter{transform:translateX(345px)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips button{padding:4px 10px;border:2.5px solid var(--ink);border-radius:999px;background:var(--canvas);font-size:16px;font-weight:800;line-height:1.15;cursor:pointer;transition:background .15s,transform .15s}
.chips button:hover{transform:translateY(-1px);background:var(--mist)}
.chips button[aria-pressed="true"]{background:var(--blue)}
.pg p.shop-say{margin-top:8px;min-height:2.5em;font-weight:800;line-height:1.2;color:var(--claret)}

/* what ads manager won't show you */
.fb-receipt{margin-top:16px;padding:9px 14px;border:3px solid var(--ink);border-radius:10px;background:var(--canvas);box-shadow:4px 4px 0 var(--ink)}
.pg .fb-receipt p{display:flex;justify-content:space-between;gap:14px;margin:0;padding:4px 0;font-size:18px;font-weight:700;line-height:1.15;border-bottom:2px dotted rgba(17,23,27,.35)}
.fb-receipt b{font-weight:900}
.pg .fb-receipt .tot{border:0;font-size:22px;font-weight:900;color:var(--claret)}

/* the calculator */
.fb-see{margin-top:2px}
.fc{margin:0}
.fc-sl{display:grid;gap:0 18px}
.fc-sl > div{margin-top:10px;min-width:0}
.fc-sl label{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;font-size:16.5px;font-weight:700;line-height:1.08}
.fc-sl output{font-weight:900;font-size:24px;line-height:1;color:var(--claret)}
.fc-sl .range{margin-top:11px}
.pg p.fc-try{display:flex;align-items:center;gap:5px;margin:7px 0 0;font-size:14px;font-weight:800}
.fc-try button{padding:1px 7px;border:2px solid var(--ink);border-radius:999px;background:var(--canvas);font-size:14px;font-weight:800;line-height:1.2;cursor:pointer}
.fc-try button:hover{background:var(--mist)}
.fc-row{display:grid;gap:8px;margin-top:10px}
.seg{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0;padding:0;border:0;min-width:0}
.seg legend{float:left;width:100%;padding:0 0 4px;font-size:16.5px;font-weight:700;line-height:1.05}
.seg label{cursor:pointer}
.seg label > input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.seg label > span{display:block;padding:3px 11px;border:2.5px solid var(--ink);border-radius:999px;background:var(--canvas);font-size:15.5px;font-weight:800;line-height:1.2}
.seg input:checked + span{background:var(--blue)}
.seg input:focus-visible + span{outline:3px solid var(--claret);outline-offset:2px}
.money{display:inline-flex;align-items:center;gap:4px;font-size:16.5px;font-weight:800}
.money[hidden]{display:none}
.money i{font-style:normal;font-weight:900}
.money input{width:74px;height:30px;padding:0 6px;border:2.5px solid var(--ink);border-radius:7px;background:var(--paper);font:inherit;font-weight:800}
.money > span{margin-right:5px;font-weight:700;line-height:1.05}
.fc-mini{display:grid;gap:8px;align-items:end}
.pg p.fc-res{margin-top:10px!important;font-size:1.08em;line-height:1.12}
.fc-res + .fine{margin-top:5px;font-size:14.5px;line-height:1.15}
@media (min-width:520px){.fc-sl{grid-template-columns:1fr 1fr}.fc-mini{grid-template-columns:1fr 1fr}.fc-sl > div:nth-child(-n+2) label{min-height:52px}}

.verdicts,.results{margin-top:12px!important}
.verdicts li,.results li{margin-top:10px;padding:12px 15px;border:3px solid var(--ink);border-radius:12px;background:var(--canvas);transition:background .25s,transform .2s,box-shadow .2s,opacity .25s}
.verdicts h4,.results h4{font-size:27px}
.verdicts li p,.results li p{margin-top:4px;line-height:1.25}
.verdicts li.sel,.results li.sel{background:var(--mist);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.results.done li:not(.sel){opacity:.5}
#your-result .btn{margin-top:12px}
#your-result .pg-in > p:not(.k){margin-top:12px}

/* what the booth */
.fb-phone{width:min(100%,250px);margin:6px auto 0;overflow:visible}
.fb-type{stroke-dasharray:100 101;stroke-dashoffset:100}
.on .fb-type{animation:ink .55s linear forwards}.on .fb-type.t1{animation-delay:.5s}.on .fb-type.t2{animation-delay:1.15s}.on .fb-type.t3{animation-delay:1.8s}
.fb-sub{opacity:0;transform-box:fill-box;transform-origin:center}
.on .fb-sub{animation:fb-sub .35s cubic-bezier(.3,1.7,.5,1) 2.45s forwards}
@keyframes fb-sub{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px!important}
.stats li{padding:9px 12px 10px;border:3px solid var(--ink);border-radius:12px;background:var(--mist);box-shadow:3px 3px 0 var(--ink)}
.stats b{display:block;font-size:clamp(35px,10vw,44px);font-weight:900;line-height:1;color:var(--claret);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:3px;font-size:16.5px;font-weight:700;line-height:1.1}

/* who they suit: each row lights up in turn */
.cmp.lit tbody tr{transition:background .2s}
.on .cmp.lit tbody tr{animation:fb-lit .75s ease both}
.on .cmp.lit tbody tr:nth-child(2){animation-delay:.25s}.on .cmp.lit tbody tr:nth-child(3){animation-delay:.5s}.on .cmp.lit tbody tr:nth-child(4){animation-delay:.75s}.on .cmp.lit tbody tr:nth-child(5){animation-delay:1s}.on .cmp.lit tbody tr:nth-child(6){animation-delay:1.25s}
@keyframes fb-lit{0%,100%{background:transparent}40%{background:var(--mist)}}
.cmp.fit tbody th{font-size:15.5px;width:auto;line-height:1.1}

/* the six questions */
#quick-test .scale{margin-top:6px;padding:34px 0 24px}
#quick-test .sc-end{font-size:15px}
#quick-test .fd{margin-top:10px}
#quick-test .fd-steps{margin-bottom:10px}
#quick-test .fd-q legend{font-size:31px}
#quick-test .fd-q label{margin-top:8px}
#quick-test .fd-q label span{padding:9px 14px;font-size:19px}
#quick-test .fd-res h3{font-size:44px!important}
@media (max-width:999px){#quick-test .scale{padding-bottom:26px}}
.face #quick-test .fd{height:auto}

/* a real test you can run */
.fb-steps{margin-top:10px!important;counter-reset:s}
.fb-steps li{counter-increment:s;position:relative;margin-top:5px;padding-left:30px;line-height:1.2}
.fb-steps li::before{content:counter(s);position:absolute;left:0;top:0;font-family:"Melodrama",serif;font-size:24px;font-weight:700;line-height:1;color:var(--claret)}
.fb-steps b{font-weight:900}
#on-off-test .tbl{margin-top:11px}
#on-off-test .cmp th,#on-off-test .cmp td{padding:5px 9px}

/* the checklists */
.fb-led li{margin-top:9px}
.fb-led b{font-size:19.5px;font-weight:800;line-height:1.1;text-transform:none}
.fb-led label{align-items:center}
.fb-qs li{margin-top:10px}
.fb-qs b{font-size:21px;font-weight:800;line-height:1.1;text-transform:none}
.fb-qs label{align-items:center}
.fb-qs ~ .btn{margin-top:12px}

/* what happens next */
.fb-next li{padding:9px 0;align-items:start}
.fb-next svg{width:64px;height:64px}
.pg .steps.fb-next li{grid-template-columns:64px minmax(0,1fr)}
.fb-next p{line-height:1.22}

/* where the numbers came from */
.src{margin-top:12px!important}
.src li{margin-top:7px;padding-left:15px;border-left:5px solid var(--blue);font-size:18.5px;font-weight:600;line-height:1.16}

/* in the book */
.cov-s{text-wrap:balance}
.face #will-they-pay td{white-space:nowrap}
.face #short-answer .big{font-size:50px!important}
.face .fb-rock{width:330px;margin-top:6px}
.face #contents .toc{margin-top:8px!important}
.face #contents .toc a{padding:5px 0;font-size:19.5px}
.face #contents .shortcut{margin-top:12px}
.face .shopf{margin-top:8px}
.face #window-or-counter .h-mid{font-size:36px!important}
.face #window-or-counter .pg-in{font-size:19.5px;line-height:1.24}
.face #calculator .h-mid{font-size:34px!important}
.face #your-result .results{margin-top:4px!important}
.face #your-result .results li{padding:9px 13px}
.face #your-result .results h4{font-size:25px}
.face #your-result .results p{font-size:19.5px;line-height:1.2}
.face .fb-phone{width:236px}
.face .stats b{font-size:44px}
.face #diy-or-experts .pg-in{font-size:19.5px;line-height:1.24}
.face #diy-or-experts h2{font-size:42px}
.face #diy-or-experts .cmp{font-size:16px}
.face #diy-or-experts .tbl{margin-top:9px}
.face #diy-or-experts .cmp th,.face #diy-or-experts .cmp td{padding:6px 8px}
.face #diy-or-experts .drop::first-letter{font-size:3.6em}
.face #next .pg-in{font-size:19.5px;line-height:1.22}
.face #next .steps{margin-top:6px!important}
.face #next h3{font-size:24px}
.face .fb-next svg{width:58px;height:58px}
.face #no-average .pg-in{font-size:20.5px}
.face .cta-pg .cta-peek{width:130px}
.face #sources .src li{font-size:18px}

@media (max-width:999px){.cmp.fit th,.cmp.fit td{padding:8px 7px;overflow-wrap:anywhere}.cmp.fit{font-size:16.5px}.cmp.fit thead th{font-size:15px}.cmp.fit tbody th{font-size:14px}}
@media (prefers-reduced-motion:reduce){
  .fb-type{stroke-dashoffset:0}
  .fb-sub{opacity:1;transform:none}
}