/* it-t10-accountant.css: the accountant / bookkeeper page, drawn to the owner's next-five design
   (tools/trades10/pack-next5/accountant-bookkeeper/visual-reference/page-design.png, 917 wide).
   Built by tools/trades10/accountant.py.

   Every length below is the design's own measurement: --u is one design pixel, so the page is a
   true scale of the mockup at any width (1 design px = 0.10906vw, held at 1.5703px from 1440 up,
   which is where the content frame stops growing). The content frame is the design's 84.7% of the
   viewport, which the --cw / --gut pair reproduces. */
main.t10.t-accountant{
  --u:clamp(1.1px,0.10906vw,1.5703px);
  --cw:1220px;--gut:clamp(20px,7.65vw,110px);
  --canvas:#FCFCFA;--ink:#0B1419;--slate:#183036;--orange:#F26207;--cta:#C04E06;--cta-h:#A94404;
  --body:#3F4B51;--muted:#6B7579;--faint:#96A0A4;--line:#E7EAEB;--line-w:#F7E0D1;
  --sans:"Plus Jakarta Sans",Inter,'Inter Fallback',-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Playfair","Playfair Display",Georgia,"Times New Roman",serif;
  --hand:"Caveat","Segoe Script",cursive;
  background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:calc(11*var(--u))}
.t-accountant h1,.t-accountant h2,.t-accountant h3,.t-accountant h4{font-family:var(--serif);font-weight:600;font-stretch:90%;letter-spacing:-.005em}

/* eyebrow with the design's short orange rule */
.ac-eyebrow{display:flex;align-items:center;gap:calc(6*var(--u));font-weight:700;font-size:calc(7*var(--u));
  line-height:1;letter-spacing:.155em;text-transform:uppercase;color:#485459;margin:0 0 calc(12*var(--u))!important}
.ac-eyebrow i{display:block;width:calc(20*var(--u));height:2px;background:var(--orange);flex:none}

/* buttons and links */
.t-accountant a.ac-btn,.t-accountant a.ac-open,.t-accountant a.ac-tp,.t-accountant .ac-links a{text-decoration:none}
.ac-btn{display:inline-flex;align-items:center;gap:calc(9*var(--u));min-height:max(44px,calc(32*var(--u)));
  padding:0 calc(21*var(--u));border-radius:3px;background:var(--cta);color:#fff!important;
  font-weight:700;font-size:calc(10.5*var(--u));line-height:1;transition:background .18s ease-out}
.ac-btn:hover{background:var(--cta-h)}
.ac-btn svg{width:calc(12*var(--u));height:calc(12*var(--u));fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.t-accountant a.ac-open,.t-accountant .ac-open{display:inline-flex;align-items:center;gap:calc(6*var(--u));font-weight:700;font-size:calc(9*var(--u));line-height:1;color:var(--cta)}
.ac-open svg{width:calc(11*var(--u));height:calc(11*var(--u));fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ac-open:hover{color:var(--cta-h)}
.t-accountant .ac-sub{font-size:calc(9.7*var(--u));line-height:1.4;color:var(--body);margin:calc(8*var(--u)) 0 0!important}
.ac-spine h2,.ac-tools h2,.ac-tpl h2,.ac-inc h2,.ac-pay h2{font-size:calc(23*var(--u));line-height:1.16;margin:0!important}

/* ---------- bands: one photograph across the whole band, copy on top of it ---------- */
.ac-hero,.ac-end{position:relative;isolation:isolate;overflow:hidden;background:var(--canvas)}
.ac-band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.ac-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(252,252,250,.9) 0%,rgba(252,252,250,.62) 24%,rgba(252,252,250,.12) 36%,rgba(252,252,250,0) 46%)}
.ac-scrim-end{background:linear-gradient(270deg,rgba(252,252,250,.9) 0%,rgba(252,252,250,.66) 24%,rgba(252,252,250,.14) 36%,rgba(252,252,250,0) 46%)}

.ac-hero{min-height:31.2vw;display:flex;align-items:center;padding:calc(42*var(--u)) 0 calc(26*var(--u))}
.ac-hero-in{width:100%}
.ac-hero h1{margin:0 0 calc(11*var(--u))!important;max-width:45%}
.ac-k{display:block;font-family:var(--sans);font-weight:600;font-size:calc(9*var(--u));line-height:1.35;
  letter-spacing:0;color:var(--muted);margin-bottom:calc(8*var(--u))}
.ac-big{display:block;font-size:calc(34.5*var(--u));letter-spacing:-.012em;line-height:1.03;color:var(--ink)}
.t-accountant .ac-lede{font-size:calc(12.5*var(--u));line-height:1.36;color:var(--body);margin:0 0 calc(13*var(--u))!important}
.ac-cta-row{margin:0!important}
.t-accountant .ac-tag{font-size:calc(9*var(--u));line-height:1.3;color:#DD7B33;margin:calc(9*var(--u)) 0 0!important}

/* ---------- ledger spine ---------- */
.ac-spine{padding-top:calc(16*var(--u))}
.t-accountant .ac-sp-list{position:relative;margin-top:calc(9*var(--u));display:grid;gap:calc(6*var(--u))}
.ac-sp-list::before{content:"";position:absolute;left:38.55%;top:calc(5*var(--u));bottom:calc(5*var(--u));
  width:calc(2*var(--u));margin-left:calc(-1*var(--u));background:var(--orange)}
.ac-sp-row{display:grid;grid-template-columns:36.03% 4.9% 1fr;align-items:center}
.t-accountant .ac-sp-date{text-align:right;font-weight:600;font-size:calc(7*var(--u));line-height:1;
  letter-spacing:.105em;text-transform:uppercase;color:#8B9599;padding-right:calc(14*var(--u))}
.ac-sp-dot{justify-self:center;width:calc(8*var(--u));height:calc(8*var(--u));border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 calc(2.5*var(--u)) var(--canvas)}
.ac-sp-card{display:grid;grid-template-columns:33% 1fr 23%;align-items:center;min-height:calc(38*var(--u));
  padding:calc(6*var(--u)) 0;border:1px solid #EBEEEF;border-radius:3px;background:#FBFCFB}
.ac-sp-card h3{font-size:calc(11.4*var(--u));line-height:1.2;font-weight:700;padding:0 calc(10*var(--u)) 0 calc(11*var(--u));margin:0!important}
.t-accountant .ac-sp-txt{font-size:calc(9.7*var(--u));line-height:1.28;color:#3B474D;padding-right:calc(12*var(--u));margin:0!important}
.t-accountant .ac-sp-note{font-size:calc(9.3*var(--u));line-height:1.28;color:#97A1A5;border-left:1px solid #EBEEEF;
  padding:calc(2*var(--u)) calc(10*var(--u)) calc(2*var(--u)) calc(12*var(--u));margin:0!important;
  align-self:stretch;display:flex;align-items:center}

/* ---------- calculators ---------- */
.ac-tools{padding-top:calc(24*var(--u))}
.t-accountant .ac-tl{display:grid;grid-template-columns:repeat(3,1fr);margin-top:calc(28*var(--u))}
.ac-tl li{display:grid;grid-template-columns:auto 1fr;gap:calc(18*var(--u));align-items:start;padding-right:calc(10*var(--u))}
.ac-tl li+li{border-left:1px solid var(--line-w);padding-left:calc(34*var(--u))}
.ac-tl-ico{display:block;color:var(--orange);margin-top:calc(2*var(--u))}
.ac-tl-ico svg{width:calc(32*var(--u));height:calc(32*var(--u));fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ac-tl h3{font-size:calc(15*var(--u));line-height:1.2;margin:0 0 calc(5*var(--u))!important}
.t-accountant .ac-tl p{font-size:calc(9.7*var(--u));line-height:1.4;color:var(--body);margin:0 0 calc(11*var(--u))!important}

/* ---------- the three papers ---------- */
.ac-tpl{padding-top:calc(40*var(--u))}
.t-accountant .ac-tp-list{display:grid;grid-template-columns:repeat(3,1fr);margin-top:calc(22*var(--u))}
.ac-tp-list>li{padding-right:calc(18*var(--u))}
.ac-tp-list>li+li{border-left:1px solid var(--line);padding-left:calc(26*var(--u))}
.t-accountant .ac-tp-lab{font-weight:700;font-size:calc(9.3*var(--u));line-height:1;letter-spacing:.125em;
  text-transform:uppercase;color:var(--ink);margin:0 0 calc(13*var(--u))!important}
.ac-tp{display:grid;grid-template-columns:51% 1fr;gap:calc(12*var(--u));align-items:start;border-radius:4px}
.ac-paper{container-type:inline-size;aspect-ratio:133/178;overflow:hidden;background:#fff;
  box-shadow:0 14px 26px -18px rgba(11,20,25,.5),0 0 0 1px rgba(11,20,25,.05);
  transition:transform .18s ease-out,box-shadow .18s ease-out}
.ac-tp:hover .ac-paper,.ac-tp:focus-visible .ac-paper{transform:translateY(-4px);box-shadow:0 22px 34px -18px rgba(11,20,25,.55),0 0 0 1px rgba(11,20,25,.08)}
.ac-pp-in{padding:6.5cqw 6cqw}
.t-accountant .ac-pp-biz{font-family:var(--sans);font-weight:700;font-size:4.1cqw;line-height:1.2;color:var(--ink);margin:0 0 4.4cqw!important}
.ac-pp-t{font-size:9cqw;line-height:1.14;font-weight:700;margin:0!important}
.ac-pp-t span{display:block}
.t-accountant .ac-pp-lab{font-family:var(--sans);font-weight:700;font-size:2.9cqw;line-height:1;color:#8C9599;margin:4.6cqw 0 3.4cqw!important}
.ac-pp-meta{display:grid;grid-template-columns:1fr 1fr;gap:3cqw}
.ac-pp-meta ul li{font-size:3cqw;line-height:1.75;color:#5C666B}
.ac-pp-meta dl div{display:flex;justify-content:space-between;gap:1.5cqw;font-size:3cqw;line-height:1.75}
.ac-pp-meta dt{color:#8C9599}
.ac-pp-meta dd{margin:0;color:#2A353A;font-weight:600;white-space:nowrap}
.ac-pp-tab{width:100%;border-collapse:collapse;margin-top:6cqw;font-size:3cqw}
.ac-pp-tab th{background:#EFF1F1;color:#4A5459;font-weight:700;text-align:left;padding:2.2cqw 1.6cqw}
.ac-pp-tab td{padding:2.2cqw 1.6cqw;border-bottom:1px solid #EDEFEF;color:#4A5459}
.ac-pp-tab .ac-n{text-align:right;white-space:nowrap}
.t-accountant .ac-pp-notes{font-size:2.8cqw;line-height:1.4;color:#9AA3A7;border-bottom:1px solid #EDEFEF;padding:3.4cqw 0;margin:0!important}
.t-accountant .ac-pp-tot{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;background:#F2F4F4;
  padding:2.6cqw 1.8cqw;margin:3.4cqw 0 0!important;font-size:4.6cqw;line-height:1.2;font-weight:800;color:var(--ink)}
.ac-pp-tot b{font-size:5.6cqw}
.ac-pp-paid{background:none}
.ac-pp-paid span{background:#F2F4F4;padding:.6cqw 4cqw .6cqw 1.8cqw}
.t-accountant .ac-pp-foot{text-align:center;font-family:var(--serif);font-style:italic;font-size:3.2cqw;line-height:1.3;color:#5C666B;margin:6cqw 0 0!important}
.ac-tp-side{display:block}
.t-accountant .ac-edit{display:inline-flex;align-items:center;gap:calc(5*var(--u));font-weight:700;font-size:calc(8.6*var(--u));line-height:1;
  color:var(--cta);border-bottom:1.5px solid var(--cta);padding-bottom:calc(2*var(--u))}
.ac-edit svg{width:calc(11*var(--u));height:calc(11*var(--u));fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ac-tp-sub{display:block;font-size:calc(9.7*var(--u));line-height:1.45;color:var(--muted);margin-top:calc(15*var(--u))}
.ac-tp:hover .ac-edit,.ac-tp:focus-visible .ac-edit{color:var(--cta-h);border-color:var(--cta-h)}

/* ---------- what to include ---------- */
.ac-inc{padding-top:calc(40*var(--u))}
.t-accountant .ac-in-list{display:grid;grid-template-columns:repeat(6,1fr);margin-top:calc(27*var(--u))}
.ac-in-list li{display:grid;grid-template-columns:auto 1fr;gap:calc(7*var(--u));padding-right:calc(8*var(--u))}
.ac-in-list li+li{border-left:1px solid var(--line);padding-left:calc(12*var(--u))}
.ac-in-ico{color:var(--orange);margin-top:1px}
.ac-in-ico svg{width:calc(24*var(--u));height:calc(24*var(--u));fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ac-in-list h3{font-family:var(--sans);font-size:calc(9.4*var(--u));line-height:1.25;font-weight:700;margin:0 0 calc(5*var(--u))!important}
.t-accountant .ac-in-list p{font-size:calc(9*var(--u));line-height:1.42;color:var(--muted)}

/* ---------- payment: the page's only QR ---------- */
.ac-pay{padding-top:calc(28*var(--u))}
.ac-pay-in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:calc(30*var(--u));margin-top:calc(23*var(--u))}
.ac-pay-block{display:grid;grid-template-columns:auto 1fr;gap:calc(36*var(--u));align-items:start;padding-left:calc(35*var(--u))}
.ac-qr{width:calc(62*var(--u));height:calc(62*var(--u));border-radius:2px}
.ac-pay-copy h3{font-family:var(--sans);font-size:calc(10.5*var(--u));line-height:1.3;font-weight:700;margin:0 0 calc(6*var(--u))!important}
.t-accountant .ac-pay-copy p{font-size:calc(9.7*var(--u));line-height:1.45;color:var(--body);margin:0!important}
.t-accountant .ac-pay-fine{color:#9AA3A7;margin-top:calc(7*var(--u))!important}
.ac-pay-more{margin-top:calc(11*var(--u))!important}
.ac-hand{position:relative;justify-self:end;padding-left:calc(52*var(--u));border-left:1px solid var(--line-w);margin:0!important}
.ac-hand span{display:block;font-family:var(--hand);font-weight:600;font-size:calc(25*var(--u));line-height:1.14;
  color:var(--orange);transform:rotate(-5deg);transform-origin:left center}
.ac-swoosh{display:block;width:calc(110*var(--u));height:calc(13*var(--u));margin:calc(5*var(--u)) 0 0 calc(26*var(--u));
  fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round}

/* ---------- resources and questions ---------- */
.ac-res{padding-top:calc(34*var(--u));padding-bottom:calc(36*var(--u))}
.ac-res-in{display:grid;grid-template-columns:49.9% 1fr}
.ac-res .ac-h3{font-size:calc(12.9*var(--u));line-height:1.2;margin:0 0 calc(12*var(--u))!important}
.ac-faq-col{border-left:1px solid var(--line);padding-left:calc(47*var(--u))}
.t-accountant .ac-links li{margin-bottom:calc(4*var(--u))}
.ac-links a{font-size:calc(9.7*var(--u));line-height:1.5;color:var(--ink)!important;border-bottom:1px solid #C9D1D4}
.ac-links a:hover{color:var(--cta)!important;border-color:var(--cta)}
.ac-faq details{border:0}
.ac-q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:calc(16*var(--u));padding:calc(3*var(--u)) 0;font-size:calc(9.7*var(--u));line-height:1.5;color:var(--ink)}
.ac-q summary::-webkit-details-marker{display:none}
.ac-chev{flex:none;width:calc(9*var(--u));height:calc(9*var(--u));fill:none;stroke:#8B9599;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease-out}
.ac-q[open] .ac-chev{transform:rotate(90deg)}
.ac-q:hover summary{color:var(--cta)}
.t-accountant .ac-q .a p{font-size:calc(9.3*var(--u));line-height:1.6;color:var(--muted);padding:calc(2*var(--u)) calc(26*var(--u)) calc(9*var(--u)) 0}
.ac-q .a a{color:var(--ink)!important;text-decoration:underline;text-decoration-color:rgba(242,98,7,.5);text-underline-offset:3px}
.ac-more-h{font-family:var(--sans);font-size:calc(8.5*var(--u));font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin:calc(20*var(--u)) 0 calc(8*var(--u))!important}

/* ---------- closing band ---------- */
.ac-end{min-height:21.6vw;display:flex;align-items:center;padding:calc(25*var(--u)) 0}
.ac-end-in{width:100%;padding-left:65.5%}
.ac-end h2{font-size:calc(23*var(--u));line-height:1.12;margin:0!important}
.t-accountant .ac-end-sub{font-size:calc(9.7*var(--u));line-height:1.45;color:var(--body);margin:calc(10*var(--u)) 0 calc(16*var(--u))!important}
.ac-end .ac-eyebrow{margin-bottom:calc(11*var(--u))!important}

/* ---------- the strip of all 30 designs (added on top of the design) ---------- */
.t-accountant .t10-strip{margin-top:calc(40*var(--u))}
.t-accountant .t10-strip-top h3{font-family:var(--serif);font-size:calc(12.9*var(--u))}

/* ---------- tablet and phone ---------- */
@media (max-width:1023px){
  main.t10.t-accountant{--u:1.28px}
  .ac-tp{grid-template-columns:1fr;gap:calc(12*var(--u))}
  .t-accountant .ac-in-list{grid-template-columns:repeat(3,1fr);row-gap:calc(22*var(--u))}
  .ac-in-list li:nth-child(4){border-left:0;padding-left:0}
  .ac-end-in{padding-left:52%}
}
@media (max-width:900px){
  .ac-hero{min-height:0;padding:calc(34*var(--u)) 0 300px;align-items:flex-start}
  .ac-hero .ac-band-img{object-position:72% center}
  .ac-hero .ac-scrim{background:linear-gradient(180deg,rgba(252,252,250,.97) 0%,rgba(252,252,250,.95) 52%,rgba(252,252,250,.68) 66%,rgba(252,252,250,.14) 86%,rgba(252,252,250,0) 100%)}
  .ac-hero h1{max-width:none}
  .ac-lede br{display:none}
  .ac-spine{padding-top:calc(26*var(--u))}
  .ac-sp-list{gap:calc(13*var(--u))}
  .ac-sp-list::before{left:calc(4*var(--u));margin-left:0}
  .ac-sp-row{grid-template-columns:calc(20*var(--u)) 1fr;grid-template-areas:"dot date" ". card";align-items:start}
  .ac-sp-date{grid-area:date;text-align:left!important;padding:0!important}
  .ac-sp-dot{grid-area:dot;justify-self:start;margin-top:calc(2*var(--u))}
  .ac-sp-card{grid-area:card;grid-template-columns:1fr;margin-top:calc(6*var(--u));padding:calc(10*var(--u)) calc(12*var(--u));gap:calc(4*var(--u))}
  .ac-sp-card h3{padding:0}
  .t-accountant .ac-sp-txt{padding:0}
  .t-accountant .ac-sp-note{border-left:0;padding:0;display:block}
  .t-accountant .ac-tl{grid-template-columns:1fr;gap:calc(22*var(--u))}
  .ac-tl li{padding-right:0}
  .ac-tl li+li{border-left:0;border-top:1px solid var(--line-w);padding-left:0;padding-top:calc(22*var(--u))}
  .t-accountant .ac-tp-list{display:flex;gap:calc(18*var(--u));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-bottom:10px;margin-right:calc(-1 * var(--gut))}
  .ac-tp-list::-webkit-scrollbar{display:none}
  .ac-tp-list>li{flex:0 0 74%;scroll-snap-align:start;padding-right:0}
  .ac-tp-list>li+li{border-left:0;padding-left:0}
  .ac-pay-in{grid-template-columns:1fr;gap:calc(26*var(--u))}
  .ac-pay-block{padding-left:0;gap:calc(20*var(--u))}
  .ac-hand{justify-self:start;padding-left:0;border-left:0;border-top:1px solid var(--line-w);padding-top:calc(18*var(--u))}
  .ac-res-in{grid-template-columns:1fr;gap:calc(26*var(--u))}
  .ac-faq-col{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:calc(24*var(--u))}
  .ac-end{min-height:0;padding:calc(34*var(--u)) 0 0;display:block}
  .ac-end .ac-band-img{position:relative;inset:auto;height:auto;margin-top:calc(24*var(--u));display:block}
  .ac-end .ac-scrim{display:none}
  .ac-end-in{padding-left:0}
}
@media (max-width:640px){
  main.t10.t-accountant{--u:1.22px}
  .t-accountant .ac-in-list{grid-template-columns:1fr;row-gap:calc(18*var(--u))}
  .ac-in-list li+li{border-left:0;padding-left:0}
  .ac-tp-list>li{flex:0 0 84%}
  .ac-big{font-size:calc(30*var(--u))}
  .ac-hero{padding-bottom:230px}
}
@media (prefers-reduced-motion:reduce){
  .ac-paper,.ac-chev,.ac-btn{transition:none}
}