/* it-t10-childcare.css: childcare / nanny page, the owner's mockup scaled
   (tools/trades10/references-2/childcare-nanny.png, 758 wide). --u = one mockup pixel; every position,
   size and hairline below is the mockup's own, measured. Built by tools/trades10/childcare.py. */
main.t-childcare{container-type:inline-size;--u:calc(min(100cqw,1440px) / 758);
  --cc-ink:#0B2233;--cc-teal:#0B2A31;--cc-sub:#5B6771;--cc-or:#F2711C;--cc-line:#E4E7E9;
  --cc-font:"IBM Plex Sans",Inter,'Inter Fallback',-apple-system,"Segoe UI",sans-serif;font-family:var(--cc-font);background:#FCFCFA;color:var(--cc-ink)}
.t-childcare .cc-board{position:relative}
.t-childcare .cc-art{position:relative;width:calc(758 * var(--u));height:calc(var(--h) * var(--u));margin:0 auto}
.t-childcare .cc-a,.t-childcare .cc-bar,.t-childcare .cc-rule,.t-childcare .cc-hr,.t-childcare .cc-vr,.t-childcare .cc-qr-card,.t-childcare .cc-card{
  position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u))}
.t-childcare h1,.t-childcare h2,.t-childcare h3{font-family:var(--cc-font);color:var(--cc-ink)}
.cc-h2{font-weight:700;font-size:calc(21.8 * var(--u));line-height:calc(28 * var(--u));letter-spacing:-.01em}
.cc-h2d{font-size:calc(19.8 * var(--u));line-height:calc(26 * var(--u))}
.cc-h2b{font-size:calc(23 * var(--u));line-height:calc(28 * var(--u))}
.cc-h2f{font-size:calc(20 * var(--u))}
.cc-note{font-size:calc(9.6 * var(--u));line-height:calc(15 * var(--u));color:var(--cc-sub)}
.cc-p{font-size:calc(11 * var(--u));line-height:calc(15.8 * var(--u));color:var(--cc-sub)}
.cc-p-b{color:var(--cc-ink);font-weight:500}
.cc-hand{font-family:"Caveat","Segoe Script",cursive;font-weight:500}
.cc-btn{display:flex;align-items:center;justify-content:center;gap:calc(7 * var(--u));height:calc(42 * var(--u));background:var(--cta);color:#fff!important;
  border-radius:calc(5 * var(--u));font:600 calc(9.6 * var(--u))/1 var(--cc-font);text-decoration:none!important;transition:background .15s}
.cc-btn:hover{background:var(--cta-h)}
.cc-btn svg{width:calc(11 * var(--u));height:calc(11 * var(--u))}
.t-childcare .cc-bar{left:calc(var(--x) * var(--d));top:calc(var(--y) * var(--d));width:calc(var(--w) * var(--d));height:calc(var(--h) * var(--d));background:#E6E9EC;border-radius:1px}
.cc-hr{height:1px;background:var(--cc-line)}
.cc-vr{height:calc(var(--h) * var(--u));width:1px;background:var(--cc-line)}
.cc-vr-w{background:rgba(255,255,255,.28)}
.t-childcare .cc-vr{width:1px}
.cc-logo{font:700 calc(11.6 * var(--u))/1 var(--cc-font);letter-spacing:-.03em;color:var(--cc-ink);white-space:nowrap}
.cc-logo b{color:var(--cc-or);font-weight:700}

/* hero: dark teal panel, photo to the page edge, the invoice card over both */
.cc-hero{background:var(--cc-teal);overflow:hidden}
.cc-hero-bg{position:absolute;inset:calc(-6 * var(--u));width:calc(100% + 12 * var(--u));height:calc(100% + 12 * var(--u));object-fit:cover;object-position:100% 34%;
  filter:blur(calc(9 * var(--u))) brightness(.5) saturate(.85);display:block}
.cc-hero-img{position:absolute;top:0;bottom:0;left:calc(50% - 51 * var(--u));right:0;width:auto;height:100%;object-fit:cover;object-position:left center;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.cc-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(97deg,rgba(11,42,49,.97) 0,rgba(11,42,49,.95) 26%,rgba(11,42,49,.88) 38%,rgba(11,42,49,.6) 48%,rgba(11,42,49,.26) 58%,rgba(11,42,49,.05) 68%,transparent 76%)}
.cc-hero .cc-art{z-index:2}
.cc-hero h1{display:block}
.cc-k{position:absolute;left:0;bottom:100%;margin-bottom:calc(8 * var(--u));white-space:nowrap;font:600 calc(6.5 * var(--u))/1.2 var(--cc-font);
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.cc-k i{font-style:normal;color:var(--cc-or);margin:0 calc(3 * var(--u))}
.cc-big{display:block;font-weight:700;font-size:calc(26 * var(--u));line-height:calc(30.5 * var(--u));letter-spacing:-.015em;color:#fff}
.cc-lede{font-size:calc(9.8 * var(--u));line-height:calc(14.7 * var(--u));color:rgba(255,255,255,.88)}
.cc-tag{font:700 calc(6.75 * var(--u))/1.2 var(--cc-font);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* the documents (hero card, and the three in the documents section) */
.t-childcare .cc-tp{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));
  border-radius:calc(4 * var(--u));background:#fff;overflow:hidden;box-shadow:0 calc(6 * var(--u)) calc(20 * var(--u)) calc(-6 * var(--u)) rgba(11,34,51,.22),0 0 calc(2 * var(--u)) rgba(11,34,51,.07)}
.cc-doc{position:relative;height:100%;--d:calc(var(--w) * var(--u) / 231);color:var(--cc-ink)}
.cc-doc .cc-logo{position:absolute;left:calc(19 * var(--d));top:calc(18 * var(--d));font-size:calc(11.6 * var(--d))}
.cc-inv-no{position:absolute;right:calc(17 * var(--d));top:calc(18 * var(--d));text-align:right;font-size:calc(6.4 * var(--d));line-height:calc(9 * var(--d));color:var(--cc-ink)}
.cc-inv-no b{display:block;font-weight:700}
.cc-inv-no i{display:block;font-weight:400}
.cc-inv-no i{font-style:normal;color:var(--cc-sub)}
.cc-inv-t{position:absolute;left:calc(19 * var(--d));top:calc(55 * var(--d));font:700 calc(13.4 * var(--d))/1 var(--cc-font);letter-spacing:-.01em}
.cc-inv-meta{position:absolute;left:calc(19 * var(--d));top:calc(81 * var(--d));right:calc(14 * var(--d));display:grid;grid-template-columns:calc(118 * var(--d)) 1fr;
  font-size:calc(6.6 * var(--d));line-height:calc(9.6 * var(--d));color:#3D4A57;white-space:nowrap}
.cc-inv-meta span{display:block;color:var(--cc-sub);margin-bottom:calc(1 * var(--d))}
.cc-inv-tb{position:absolute;left:calc(19 * var(--d));top:calc(135 * var(--d));width:calc(195 * var(--d));border-collapse:collapse;font-size:calc(6.8 * var(--d));color:#3D4A57}
.cc-inv-tb th{font-weight:700;color:var(--cc-ink);text-align:right;padding:0 0 calc(6 * var(--d));border-bottom:1px solid var(--cc-line);white-space:nowrap}
.cc-inv-tb th:first-child,.cc-inv-tb td:first-child{text-align:left}
.cc-inv-tb td{text-align:right;padding:calc(5 * var(--d)) 0 calc(4.5 * var(--d));border-bottom:1px solid #F0F2F4;white-space:nowrap}
.cc-inv-tb tr:last-child td{border-bottom:0}
.cc-inv-tot{position:absolute;left:calc(19 * var(--d));right:calc(17 * var(--d));top:calc(189 * var(--d));display:flex;justify-content:flex-end;align-items:baseline;
  gap:calc(20 * var(--d));padding-top:calc(6 * var(--d));border-top:calc(1.4 * var(--d)) solid #F6C79E}
.cc-inv-tot span{font:700 calc(7.6 * var(--d))/1 var(--cc-font)}
.cc-inv-tot b{font:700 calc(11.6 * var(--d))/1 var(--cc-font)}
.cc-inv-ty{position:absolute;left:calc(19 * var(--d));top:calc(220 * var(--d));font-size:calc(6.4 * var(--d));line-height:calc(9.6 * var(--d));color:var(--cc-sub)}
.cc-inv-hand{position:absolute;right:calc(16 * var(--d));top:calc(218 * var(--d));text-align:left;font-size:calc(9.6 * var(--d));line-height:calc(11.5 * var(--d));
  color:#46525E;transform:rotate(-4deg) skewX(6deg);transform-origin:0 0;white-space:nowrap}
.cc-tp .t10-edit{bottom:10%}

/* a clear weekly paper trail */
.cc-rule{height:calc(1.6 * var(--u));background:linear-gradient(90deg,#F7B583,#F8CDAA)}
.cc-step{color:inherit}
.cc-step a{display:block;color:inherit}
.cc-num{display:grid;place-items:center;width:calc(29 * var(--u));height:calc(29 * var(--u));border:calc(1.6 * var(--u)) solid var(--cc-or);border-radius:50%;
  font:700 calc(13 * var(--u))/1 var(--cc-font);color:var(--cc-ink);background:#FCFCFA}
.cc-step h3{margin-top:calc(16 * var(--u))!important;font:700 calc(11.4 * var(--u))/1 var(--cc-font);letter-spacing:-.01em}
.cc-step p{margin-top:calc(7 * var(--u))!important;font-size:calc(9.1 * var(--u));line-height:1.35;color:var(--cc-sub)}
.cc-step a:hover h3{color:var(--cta)}

/* weekly care record */
.cc-card{height:calc(var(--h) * var(--u));background:#fff;border-radius:calc(4 * var(--u));margin:0;
  padding:calc(18 * var(--u)) calc(12 * var(--u)) 0 calc(20 * var(--u));box-shadow:0 calc(5 * var(--u)) calc(18 * var(--u)) calc(-6 * var(--u)) rgba(11,34,51,.16),0 0 calc(2 * var(--u)) rgba(11,34,51,.05)}
.cc-card-top{display:flex;justify-content:space-between;align-items:baseline;padding-right:calc(8 * var(--u))}
.cc-card-top b{font:700 calc(17.7 * var(--u))/1 var(--cc-font);letter-spacing:-.02em}
.cc-card-top span{font-size:calc(7.8 * var(--u));color:var(--cc-sub)}
.cc-tb{width:100%;border-collapse:collapse;margin-top:calc(14 * var(--u));font-size:calc(8.8 * var(--u));color:#3D4A57}
.cc-tb th{background:#F1F3F5;font:600 calc(8.6 * var(--u))/1 var(--cc-font);color:var(--cc-ink);text-align:left;padding:calc(6 * var(--u)) calc(4 * var(--u))}
.cc-tb th:first-child,.cc-tb td:first-child{padding-left:calc(6 * var(--u))}
.cc-tb td{padding:calc(4.4 * var(--u)) calc(4 * var(--u));border-bottom:1px solid #EFF1F3}
.cc-tb th:nth-child(4),.cc-tb td:nth-child(4){text-align:right;padding-right:calc(22 * var(--u))}
.cc-tb th:nth-child(5),.cc-tb td:nth-child(5){padding-left:calc(24 * var(--u))}
.cc-tb tfoot td{font:700 calc(10 * var(--u))/1 var(--cc-font);color:var(--cc-ink);border-bottom:0;padding-top:calc(11 * var(--u))}

/* choose the way you bill */
.cc-bill{background:#F3F6F7}
.cc-col h3{font:700 calc(14.4 * var(--u))/1 var(--cc-font);letter-spacing:-.01em}
.cc-col p{margin-top:calc(9 * var(--u))!important;font-size:calc(9.5 * var(--u));line-height:calc(14.6 * var(--u));color:var(--cc-sub)}
.cc-more,.cc-calc{display:inline-flex;align-items:center;gap:calc(5 * var(--u));font:700 calc(9.6 * var(--u))/1 var(--cc-font);color:var(--cc-or)!important;text-decoration:none!important}
.cc-more{margin-top:calc(14 * var(--u))}
.cc-more svg,.cc-calc svg{width:calc(9 * var(--u));height:calc(9 * var(--u));flex:none}
.cc-more:hover,.cc-calc:hover{color:var(--cta)!important;text-decoration:underline!important;text-underline-offset:3px}
.cc-calc{color:var(--cc-ink)!important;font-weight:700}
.cc-calc svg{color:var(--cc-or)}
.cc-cell{display:flex;justify-content:center}

/* professional documents */
.cc-tp-l{transform:rotate(-8.5deg);transform-origin:50% 50%}
.cc-tp-r{transform:rotate(7.5deg);transform-origin:50% 50%}
.cc-tp-c{z-index:2;box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) calc(-8 * var(--u)) rgba(11,34,51,.26),0 0 calc(2 * var(--u)) rgba(11,34,51,.07)}
.t-childcare .cc-tp-c{overflow:visible}
.cc-edit{position:absolute;left:50%;top:100%;transform:translate(-50%,calc(-18 * var(--u)));display:inline-flex;align-items:center;gap:calc(7 * var(--u));
  background:var(--cta);color:#fff;border-radius:calc(5 * var(--u));height:calc(24 * var(--u));padding:0 calc(16 * var(--u));white-space:nowrap;
  font:600 calc(9.4 * var(--u))/1 var(--cc-font);box-shadow:0 calc(6 * var(--u)) calc(14 * var(--u)) calc(-6 * var(--u)) rgba(192,78,6,.8)}
.cc-edit svg{width:calc(10 * var(--u));height:calc(10 * var(--u))}
.cc-tp-c:hover .cc-edit{background:var(--cta-h)}
.cc-doc-s{--d:calc(var(--w) * var(--u) / 120)}
.cc-doc-s .cc-logo{left:calc(14 * var(--d));top:calc(15 * var(--d));font-size:calc(8.6 * var(--d))}
.cc-doc-s .cc-inv-no{right:calc(12 * var(--d));top:calc(15 * var(--d));font-size:calc(5.4 * var(--d));line-height:calc(7.4 * var(--d))}
.cc-doc-s .cc-inv-t{left:calc(14 * var(--d));top:calc(44 * var(--d));font-size:calc(10.6 * var(--d))}
.cc-mini{position:absolute;left:calc(14 * var(--d));top:calc(72 * var(--d));font-size:calc(6.2 * var(--d));line-height:calc(9.2 * var(--d));color:#3D4A57;white-space:nowrap}
.cc-mini span{display:block;color:var(--cc-sub)}
.cc-mini2{position:absolute;left:calc(14 * var(--d));top:calc(102 * var(--d));font:600 calc(6.6 * var(--d))/1 var(--cc-font);color:var(--cc-ink);white-space:nowrap}
.cc-tot-s{position:absolute;left:calc(14 * var(--d));top:calc(155 * var(--d));font:700 calc(7.4 * var(--d))/1 var(--cc-font)}
.cc-paid{position:absolute;right:calc(13 * var(--d));top:calc(112 * var(--d));text-align:right;font-size:calc(6.2 * var(--d));color:var(--cc-sub)}
.cc-paid b{display:block;margin-top:calc(4 * var(--d));font:700 calc(11 * var(--d))/1 var(--cc-font);color:var(--cc-ink)}
.cc-thanks{position:absolute;right:calc(15 * var(--d));top:calc(140 * var(--d));font-size:calc(10.5 * var(--d));line-height:1;color:#46525E;transform:rotate(-5deg) skewX(6deg);transform-origin:100% 0;white-space:nowrap}
/* payment strip */
.cc-pay{background:var(--cc-teal);color:#fff}
.cc-qr-card{height:calc(var(--h) * var(--u));background:#fff;border-radius:calc(7 * var(--u));padding:calc(7 * var(--u)) calc(7 * var(--u)) 0;text-align:center}
.cc-qr{width:calc(68 * var(--u));margin:0 auto}
.cc-logo-xs{display:block;margin-top:calc(4 * var(--u));font-size:calc(6.6 * var(--u))}
.cc-pay-h{font:700 calc(13.8 * var(--u))/1 var(--cc-font);color:#fff!important;letter-spacing:-.01em}
.cc-pay-m{font-size:calc(12.4 * var(--u));line-height:1;color:#fff}
.cc-pay-m i{font-style:normal;color:rgba(255,255,255,.55);margin:0 calc(3 * var(--u))}
.cc-pay-s{font-size:calc(9.6 * var(--u));line-height:1;color:rgba(255,255,255,.88)}
.cc-pay-hand{font-size:calc(22.8 * var(--u));line-height:calc(24 * var(--u));color:#fff;transform:rotate(-4deg) skewX(4deg);transform-origin:0 0;white-space:nowrap}
.cc-swoosh{height:calc(24 * var(--u));fill:none;stroke:var(--cc-or);stroke-width:2.6;stroke-linecap:round;overflow:visible}

/* keep the record simple */
.cc-si{display:block}
.cc-ico{position:absolute;left:0;top:calc(1 * var(--u));width:calc(38 * var(--u));height:calc(44 * var(--u));color:var(--cc-ink)}
.cc-sl{position:absolute;left:calc(var(--x) * var(--u));top:calc(2 * var(--u));width:calc(138 * var(--u));text-decoration:none!important;color:inherit!important}
.cc-sl b{display:block;font:700 calc(11.4 * var(--u))/1 var(--cc-font);color:var(--cc-ink);letter-spacing:-.01em}
.cc-sl span{display:block;margin-top:calc(8 * var(--u));font-size:calc(9.5 * var(--u));line-height:calc(14.6 * var(--u));color:var(--cc-sub)}
.cc-sl:hover b{color:var(--cta)}

/* FAQ */
.t-childcare .cc-faq-art{height:auto;padding:calc(48 * var(--u)) 0 calc(30 * var(--u))}
.t-childcare .cc-faq{margin:0 0 0 calc(41 * var(--u));width:calc(676 * var(--u))}
.t-childcare .cc-faq details{border-bottom:1px solid var(--cc-line)}
.t-childcare .cc-faq summary{padding:0 calc(4 * var(--u));height:calc(31.4 * var(--u));font-size:calc(10.4 * var(--u));color:var(--cc-ink)}
.t-childcare .cc-faq summary::after{font:400 calc(14 * var(--u))/1 var(--cc-font);color:var(--cc-ink)}
.t-childcare .cc-faq .a{padding:calc(2 * var(--u)) calc(30 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u))}
.t-childcare .cc-faq .a p{font-size:calc(9.4 * var(--u));line-height:1.6;color:var(--cc-sub)}

/* evening doorstep */
.cc-end{background:var(--cc-teal);overflow:hidden}
.cc-end-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.cc-end-h{font-weight:700;font-size:calc(24.5 * var(--u));line-height:calc(28.5 * var(--u));color:#fff!important;letter-spacing:-.015em}
.cc-end-p{font-size:calc(11 * var(--u));line-height:calc(16.5 * var(--u));color:rgba(255,255,255,.92)}

/* below 900px: the same pieces, stacked in the design's order */
@media (max-width:899px){
  main.t-childcare{--u:1.45px}
  .t-childcare .cc-art{width:auto;height:auto;padding:0 20px}
  .t-childcare .cc-a,.t-childcare .cc-rule,.t-childcare .cc-hr,.t-childcare .cc-vr,.t-childcare .cc-qr-card,.t-childcare .cc-card{position:static;width:auto}
  .t-childcare .cc-rule,.t-childcare .cc-vr{display:none}
  .cc-br{display:none}
  .cc-hero{min-height:600px;display:flex;align-items:flex-start}
  .cc-hero-bg{display:none}
  .cc-hero-img{position:absolute;inset:0;left:0;width:100%;height:100%;object-position:86% 22%;-webkit-mask-image:none;mask-image:none}
  .cc-hero::before{background:linear-gradient(180deg,rgba(11,42,49,.94) 0,rgba(11,42,49,.9) 44%,rgba(11,42,49,.7) 68%,rgba(11,42,49,.5) 100%)}
  .cc-hero .cc-art{padding:28px 20px 34px}
  .cc-k{position:static;display:block;margin-bottom:12px;white-space:normal;font-size:10.5px}
  .cc-big{font-size:34px;line-height:1.12}
  .cc-lede{margin-top:16px!important;font-size:15px;line-height:1.55}
  .cc-btn{display:inline-flex;margin-top:22px;height:48px;padding:0 22px;font-size:15px}
  .cc-tag{margin-top:18px!important;font-size:11px}
  .t-childcare .cc-tp{position:relative;left:auto;top:auto;transform:none;margin:26px auto 0;
    --u:min(1.5px,calc((100cqw - 40px) / var(--w)));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
  .cc-tp-c{margin-bottom:40px}
  .cc-h2{font-size:26px;line-height:1.18}
  .cc-note,.cc-p{margin-top:10px!important;font-size:15px;line-height:1.55}
  .cc-h2d,.cc-h2b,.cc-h2f{font-size:26px;line-height:1.18}
  .cc-trail .cc-art,.cc-rec .cc-art,.cc-bill .cc-art,.cc-docs .cc-art,.cc-keep .cc-art,.cc-faqs .cc-art{padding-top:42px;padding-bottom:42px}
  .cc-steps,.cc-cols,.cc-sis{display:grid;gap:22px;margin-top:24px!important}
  .cc-num{width:42px;height:42px;font-size:18px}
  .cc-step h3{margin-top:12px!important;font-size:17px}
  .cc-step p,.cc-col p{font-size:15px;line-height:1.5}
  .cc-col h3{font-size:19px}
  .cc-more,.cc-calc{font-size:15px;margin-top:10px}
  .cc-more svg,.cc-calc svg{width:14px;height:14px}
  .cc-cells{display:grid;gap:14px;margin-top:22px!important;padding-top:18px;border-top:1px solid var(--cc-line)}
  .cc-cell{justify-content:flex-start}
  .cc-card{--u:calc((100cqw - 40px) / 446);height:auto;margin-bottom:26px;padding:calc(18 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)) calc(20 * var(--u))}
  .t-childcare .cc-si{position:relative;left:0;top:0;padding-left:52px;min-height:44px}
  .cc-ico{position:absolute;left:0;top:2px;width:36px;height:37px}
  .cc-sl{position:static}
  .cc-sl b{font-size:17px}
  .cc-sl span{margin-top:6px;font-size:15px}
  .cc-pay .cc-art{padding:30px 20px 34px;display:grid;justify-items:start;gap:0}
  .cc-qr-card{width:120px!important;height:auto;padding:10px 10px 8px}
  .cc-qr{width:100px}
  .cc-pay-h{margin-top:22px!important;font-size:22px}
  .cc-pay-m{margin-top:10px!important;font-size:18px}
  .cc-pay-s{margin-top:10px!important;font-size:15px}
  .cc-pay-hand{margin-top:20px!important;font-size:27px;line-height:1.15;white-space:normal}
  .cc-swoosh{width:190px!important;height:22px;margin-top:4px}
  .t-childcare .cc-faq{position:static;width:auto;margin-top:24px}
  .t-childcare .cc-faq summary{height:auto;min-height:52px;padding:12px 4px;font-size:16px}
  .t-childcare .cc-faq .a p{font-size:15px}
  .cc-end-img{position:static;width:100%;height:auto;aspect-ratio:16/9}
  .cc-end .cc-art{padding:28px 20px 36px}
  .cc-end-h{font-size:28px;line-height:1.16}
  .cc-end-p{margin-top:12px!important;font-size:16px}
  .cc-edit{height:calc(26 * var(--u));font-size:calc(10 * var(--u))}
}

/* final alignment against the mockup (measured, desktop only) */
@media (min-width:900px){
  .cc-trail .cc-art{transform:translateY(calc(3 * var(--u)))}
  .cc-rec .cc-art{transform:translateY(calc(-4 * var(--u)))}
  .cc-bill .cc-art{transform:translateY(calc(4 * var(--u)))}
  .cc-docs .cc-art{transform:translateY(calc(-2 * var(--u)))}
  .cc-pay .cc-art{transform:translateY(calc(7 * var(--u)))}
  .cc-keep .cc-art{transform:translateY(calc(4 * var(--u)))}
}