/* =============================================
   Pricing page

   Plainly: a price list, a "will it pay for itself" check on the same sums
   as the calculator, one comparison table, the content add-on and the
   questions people ask. The one paper object is the slip the sums are
   written on, so the page still sits with the job sheets elsewhere.
   Everything here is under .pr, so none of it rides along on other pages.

   Archivo is declared here as well as in home.css and websites.css, because
   only those pages use it. Same file, so it is one download either way.
   Caveat is the pencil on the slip, and only this page loads it.
============================================= */
@font-face{font-family:'Archivo';src:url('fonts/archivo-condensed.woff2') format('woff2');font-weight:800 900;font-stretch:62% 90%;font-display:swap}
@font-face{font-family:'Caveat';src:url('fonts/caveat-600.woff2') format('woff2');font-weight:600;font-display:swap}

.pr{--ink:#e8e8ea;--ink-2:#a3a4ae;--ink-3:#6c6c77;--line:#26262b;--line-2:#323238;--surface:#121214;
  --paper:#f3eac3;--print:#bf3a2c;--rule:rgba(191,58,44,.24);--carbon:#21387a;--pencil:#38383b;
  --cond:'Archivo','Arial Narrow',sans-serif;--hand:'Caveat','Bradley Hand','Segoe Print',cursive;--gut:clamp(16px,5vw,64px)}
.pr h1,.pr h2,.pr h3{text-wrap:balance}
/* No rules between sections: the big headings already mark each one. */
.pr-sec{padding:clamp(44px,5.5vw,80px) var(--gut)}
.pr-in{max-width:1240px;margin-inline:auto}
.pr-h2{font:600 clamp(2.1rem,1rem + 3vw,3.6rem)/1 var(--font-display);letter-spacing:-.018em;max-width:20ch;color:var(--ink)}
.pr-lede{color:var(--ink-2);font-size:1.0625rem;line-height:1.65;max-width:52ch;margin-top:18px}
.pr .acc{color:var(--sys)}
.pr-note{margin-top:18px;font:500 .75rem/1.6 var(--font-mono);color:var(--ink-2);max-width:56ch}
.pr-note a{color:var(--ink);text-underline-offset:4px}

/* ═══ THE PRICE LIST ═══ */
.pr-hero{max-width:1240px;margin-inline:auto;padding:calc(72px + clamp(48px,7vw,96px)) var(--gut) clamp(24px,3vw,40px);box-sizing:content-box}
.pr-hero h1{font:600 clamp(2.4rem,1rem + 3.4vw,4.4rem)/.98 var(--font-display);letter-spacing:-.022em;max-width:18ch;color:var(--ink)}
.rows{margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--line-2)}
.prow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) 230px 190px;gap:16px 40px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line-2);position:relative}
.prow-n{font:600 clamp(1.3rem,1rem + .7vw,1.7rem)/1.1 var(--font-display);color:var(--ink)}
.prow-n small{display:block;margin-top:8px;font:500 .6875rem/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.prow-d{color:var(--ink-2);line-height:1.55;max-width:46ch}
.prow-p{text-align:right}
.prow-p b{display:block;font:900 clamp(2.6rem,2rem + 1.8vw,3.6rem)/.85 var(--cond);font-stretch:62%;font-variant-numeric:tabular-nums;color:var(--ink)}
.prow-p b.txt{font-size:clamp(1.9rem,1.5rem + 1vw,2.5rem)}
.prow-p small{display:block;margin-top:8px;font:500 .75rem/1.4 var(--font-mono);color:var(--ink-2)}
.prow-c{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.prow-c small{font:500 .6875rem/1.3 var(--font-mono);color:var(--ink-3)}
.prow-more{color:var(--ink);font-weight:700;text-underline-offset:5px;white-space:nowrap}
.rows-why{margin-top:22px;color:var(--ink-2);line-height:1.6;max-width:68ch}
.prow--main::before{content:"";position:absolute;inset:-1px calc(var(--gut) * -.5);background:linear-gradient(90deg,rgba(92,225,230,.06),transparent 75%);border-left:2px solid var(--sys);pointer-events:none}
.prow-tag{display:inline-block;margin-top:10px;font:500 .6875rem/1 var(--font-mono);letter-spacing:.04em;color:#0a0a0b;background:var(--paper);padding:6px 8px;border-radius:2px;transform:rotate(-1.5deg)}
.rows-foot{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;font:500 .75rem/1.5 var(--font-mono);color:var(--ink-2);list-style:none}
.rows-foot li::before{content:"\2713";color:var(--sys);margin-right:8px}
.rows-foot a{color:inherit;text-underline-offset:4px}
@media (max-width:1050px){
  .prow{grid-template-columns:minmax(0,1fr) auto;gap:10px 20px}
  .prow-n,.prow-d{grid-column:1/-1}
  .prow-p{text-align:left}
  .prow-c{align-self:end}
}
@media (max-width:480px){
  .prow{grid-template-columns:1fr}
  .prow-c{justify-self:start;align-items:flex-start}
}

/* ═══ WILL IT PAY FOR ITSELF ═══
   The same sums as js/diagnostic.js: missed calls a week x 4 x 20% x the
   average job. js/pricing.js does the arithmetic. */
.sums{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(32px,4vw,48px)}
.sums-in{display:flex;flex-direction:column;gap:30px}
.sums-in label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font:500 .75rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.sums-in output{font:900 2.4rem/.85 var(--cond);font-stretch:62%;letter-spacing:0;color:var(--ink);text-transform:none;font-variant-numeric:tabular-nums}
.sums-in input{width:100%;margin-top:14px;accent-color:var(--sys);height:24px}
.sums-in small{display:block;margin-top:4px;font:500 .6875rem/1.5 var(--font-mono);color:var(--ink-3)}
.slip{position:relative;background:var(--paper);color:var(--print);padding:26px clamp(18px,3vw,30px) 20px;border-radius:2px;transform:rotate(-1deg);box-shadow:0 30px 50px -24px rgba(0,0,0,.8)}
.slip::before{content:"";position:absolute;left:4px;right:4px;top:8px;height:6px;background:radial-gradient(circle,#0a0a0b 2px,transparent 2.5px) 0 0/11px 6px repeat-x}
.slip-k{font:800 .625rem/1 var(--cond);font-stretch:72%;letter-spacing:.14em;text-transform:uppercase}
.slip-v{display:block;margin-top:10px;font:900 clamp(3.4rem,2.4rem + 3vw,5rem)/.82 var(--cond);font-stretch:62%;color:var(--carbon);font-variant-numeric:tabular-nums}
.slip-s{font:500 .75rem/1.5 var(--font-mono);color:var(--carbon);margin-top:8px}
.bars{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:76px 1fr 76px;gap:12px;align-items:center;font:800 .625rem/1 var(--cond);font-stretch:72%;letter-spacing:.12em;text-transform:uppercase}
.bar i{display:block;height:12px;background:var(--rule);position:relative}
.bar i b{position:absolute;inset:0 auto 0 0;background:var(--carbon);transition:width .35s cubic-bezier(.2,.8,.25,1)}
.bar--cost i b{background:var(--print)}
.bar span:last-child{font:500 .75rem/1 var(--font-mono);letter-spacing:0;text-transform:none;color:var(--carbon);text-align:right}
.verdict{margin-top:20px;padding-top:14px;border-top:1.5px solid var(--print);font:600 1.45rem/1.15 var(--hand);color:var(--pencil)}
@media (max-width:900px){.sums{grid-template-columns:1fr}}

/* ═══ WHAT'S IN EACH ═══ */
.tbl-wrap{margin-top:clamp(36px,5vw,56px);overflow-x:auto;border:1px solid var(--line);border-radius:6px}
.tbl{width:100%;min-width:760px;border-collapse:collapse;font-size:.9375rem;color:var(--ink)}
.tbl th,.tbl td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0}
.tbl th[scope=row]{text-align:left;font-weight:500;width:34%;position:sticky;left:0;background:#0a0a0b}
.tbl thead th{font:600 1.05rem/1.2 var(--font-display);padding-top:22px;vertical-align:bottom;background:var(--surface)}
.tbl thead th small{display:block;margin-top:6px;font:900 1.9rem/.9 var(--cond);font-stretch:62%}
.tbl thead th small i{font:500 .6875rem/1 var(--font-mono);font-style:normal;color:var(--ink-2);margin-left:4px}
.tbl thead th:first-child{position:sticky;left:0}
.tbl .grp th{background:var(--surface);text-align:left;font:500 .6875rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:12px 18px;position:static}
.tbl .main{background:rgba(92,225,230,.05)}
.tbl thead th.main{background:rgba(92,225,230,.1);box-shadow:inset 0 2px 0 var(--sys)}
.tbl .y{color:var(--sys);font-weight:700}
.tbl .n{color:var(--ink-3)}
.tbl td.t{font:500 .8125rem/1.4 var(--font-mono);color:var(--ink-2)}
.tbl thead .s{display:none}
.tbl td.t small{display:block;font-size:.6875rem;color:var(--ink-3)}
/* Phones: no box and no sideways scroll. The table runs edge to edge, the
   columns take short names, and the four tick columns share what's left
   after the feature names. */
@media (max-width:640px){
  .tbl-wrap{margin-inline:calc(var(--gut) * -1);border:0;border-radius:0;overflow:visible;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .tbl{min-width:0;table-layout:fixed;font-size:.8125rem;line-height:1.35}
  .tbl th,.tbl td{padding:10px 2px}
  .tbl th[scope=row],.tbl thead th:first-child{position:static;width:auto;padding-left:var(--gut);padding-right:8px}
  .tbl thead th:not(:first-child),.tbl td{width:13.5%}
  .tbl .y,.tbl .n{font-size:1.3rem;line-height:1}
  .tbl thead th:last-child{padding-right:6px}
  .tbl thead th:last-child small{font-size:.9rem}
  .tbl thead th{font-size:.8125rem;padding-top:16px}
  .tbl thead .l{display:none}
  .tbl thead .s{display:inline}
  .tbl thead th small{font-size:1.05rem;margin-top:4px}
  .tbl thead th{font-size:.75rem}
  .tbl thead th small i{display:block;margin:3px 0 0;font-size:.5625rem}
  .tbl .grp th{padding:10px var(--gut);font-size:.625rem}
  .tbl td.t{font-size:.6875rem}
  .tbl td.t small{font-size:.5625rem}
}
.pr .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ═══ CONTENT ═══ */
.addon{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:center;margin-top:clamp(36px,5vw,56px)}
.addon-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:clamp(22px,3vw,32px)}
.addon-card h3{font:600 1.5rem/1.1 var(--font-display);color:var(--ink)}
.addon-card p{color:var(--ink-2);line-height:1.6;margin-top:10px}
.addon-price{display:flex;align-items:baseline;gap:10px;margin-top:20px}
.addon-price b{font:900 3rem/.85 var(--cond);font-stretch:62%;color:var(--ink)}
.addon-price span{font:500 .75rem/1 var(--font-mono);color:var(--ink-2)}
.addon-card ul{list-style:none;margin:18px 0 22px;border-top:1px solid var(--line)}
.addon-card li{padding:11px 0;border-bottom:1px solid var(--line);font-size:.9375rem;color:var(--ink)}
.addon-card li::before{content:"\2713";color:var(--sys);margin-right:10px}
.shots{position:relative;height:300px}
.shot{position:absolute;width:56%;aspect-ratio:4/3;margin:0;border-radius:3px;background:#1b1c21;border:8px solid #f1efe8;box-shadow:0 26px 40px -18px rgba(0,0,0,.8);overflow:hidden}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot figcaption{position:absolute;z-index:1;left:10px;bottom:8px;font:500 .625rem/1 var(--font-mono);color:#e8e8ea;letter-spacing:.06em;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.shot:nth-child(1){left:0;top:20px;transform:rotate(-4deg)}
.shot:nth-child(2){left:26%;top:70px;transform:rotate(3deg);z-index:2}
.shot:nth-child(3){right:0;top:0;transform:rotate(-1deg)}
.shot--video::after{content:"";position:absolute;z-index:1;left:50%;top:50%;margin:-12px 0 0 -8px;border-left:20px solid rgba(255,255,255,.9);border-top:12px solid transparent;border-bottom:12px solid transparent}
@media (max-width:900px){.addon{grid-template-columns:1fr}.shots{height:240px}}

/* ═══ QUESTIONS ═══ */
.faq{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--line-2);max-width:880px}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;list-style:none;display:block;position:relative;padding:22px 40px 22px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:20px;font:400 1.5rem/1 var(--font-body);color:var(--sys)}
.faq details[open] summary::after{content:"\2212"}
.faq h3{font:600 1.1rem/1.3 var(--font-display);color:var(--ink)}
.faq p{color:var(--ink-2);line-height:1.65;padding:0 0 22px;max-width:66ch}

.pr-close-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:30px}
.pr-link{font:700 .9375rem/1.3 var(--font-body);color:var(--ink);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.pr-sign{margin-top:28px;font:500 .75rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.pr-sign b{margin-right:10px;color:var(--ink)}

@media (prefers-reduced-motion:reduce){.bar i b{transition:none}}