/* it-t10-tutor.css: the tutor and teacher page, the owner's pack mockup scaled
   (tools/trades10/pack-professional/visual-references/tutor-teacher.png, 868 wide).
   --u = one mockup pixel; every size and position below is the mockup's own, measured.
   Built by tools/trades10/tutor.py. */
main.t-tutor{container-type:inline-size;--u:calc(min(100cqw,1440px) / 868);
  --tu-ink:#12212B;--tu-sub:#5B6A72;--tu-or:#F2620C;--tu-mist:#F2F1EE;--tu-rule:#E6E7E4;--tu-slate:#1A3A3C;
  font-family:Inter,'Inter Fallback',-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tu-ink);background:#FCFCFB}
.t-tutor .tu-board{position:relative}
.t-tutor .tu-art{position:relative;width:calc(868 * var(--u));height:calc(var(--h) * var(--u));margin:0 auto}
.t-tutor .tu-a{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w,100) * var(--u))}
.t-tutor .tu-t{font-size:calc(var(--f) * var(--u));line-height:calc(var(--l) * var(--u));letter-spacing:var(--ls,0)}
.t-tutor h1,.t-tutor h2,.t-tutor h3{font-weight:700;color:var(--tu-ink)}
.tu-center{text-align:center}
.tu-eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:#4A5A62}
.tu-p,.tu-lede,.tu-tool-p,.tu-step-p{color:var(--tu-sub);font-weight:400}
.tu-hand{font-family:"Caveat","Segoe Script",cursive;font-weight:500;color:#1E2A33}
.t-tutor .tu-btn{display:inline-flex;align-items:center;gap:calc(9 * var(--u));justify-content:center;
  height:calc(36 * var(--u));background:#F05A05;color:#fff!important;border-radius:calc(5 * var(--u));
  font-size:calc(11.5 * var(--u));font-weight:600;text-decoration:none!important;transition:background .15s;
  box-shadow:0 calc(6 * var(--u)) calc(14 * var(--u)) calc(-6 * var(--u)) rgba(200,70,5,.45)}
.t-tutor .tu-btn:hover{background:#D24E03}
.t-tutor .tu-btn svg{width:calc(12 * var(--u));height:calc(12 * var(--u));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* hero */
.tu-hero{overflow:hidden;background:#F6F5F3}
.tu-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.tu-hero .tu-h1{display:block}
.tu-kick{position:absolute;left:0;bottom:100%;margin-bottom:calc(11 * var(--u));white-space:nowrap;
  font-size:calc(7.2 * var(--u));line-height:calc(10 * var(--u));font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4A5A62}
.tu-big{display:block}
.tu-tag{color:#6A7880}

/* the hero invoice, as the design tilts it */
.tu-doc{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));background:#fff;transform:rotate(-2.6deg);
  box-shadow:0 calc(10 * var(--u)) calc(26 * var(--u)) calc(-12 * var(--u)) rgba(11,25,32,.30),0 0 0 1px rgba(11,25,32,.05)}
.tu-doc>*{position:absolute;margin:0}
.tu-d-h{left:calc(25 * var(--u));top:calc(21 * var(--u));font-size:calc(11 * var(--u));line-height:1;font-weight:700;letter-spacing:-.01em}
.tu-d-from{left:calc(24 * var(--u));top:calc(49 * var(--u))}
.tu-d-from b,.tu-d-from span{display:block;font-size:calc(6.8 * var(--u));line-height:calc(10.5 * var(--u));color:#5D6B73;font-weight:400}
.tu-d-from b{color:var(--tu-ink);font-weight:600}
.tu-d-meta{left:calc(120 * var(--u));top:calc(45 * var(--u));width:calc(112 * var(--u))}
.tu-d-meta div{display:flex;line-height:calc(9.8 * var(--u))}
.tu-d-meta dt{flex:1;text-align:right;font-size:calc(6.6 * var(--u));font-weight:600;color:var(--tu-ink)}
.tu-d-meta dd{margin:0;width:calc(50 * var(--u));padding-left:calc(6 * var(--u));font-size:calc(6.6 * var(--u));color:#5D6B73}
.tu-d-tbl{left:calc(15 * var(--u));top:calc(78 * var(--u));width:calc(222 * var(--u));border-collapse:collapse;table-layout:fixed}
.tu-d-tbl th{font-size:calc(5.9 * var(--u));white-space:nowrap;font-weight:600;color:var(--tu-ink);text-align:left;padding-bottom:calc(20 * var(--u));border-bottom:1px solid #E8E8E6}
.tu-d-tbl td{font-size:calc(5.9 * var(--u));color:#5D6B73;text-align:left;vertical-align:middle;height:calc(17 * var(--u));border-bottom:1px solid #EFEFED;white-space:nowrap;overflow:hidden}
.tu-d-tbl th:nth-child(1),.tu-d-tbl td:nth-child(1){width:calc(40 * var(--u))}
.tu-d-tbl th:nth-child(2),.tu-d-tbl td:nth-child(2){width:calc(32 * var(--u))}
.tu-d-tbl th:nth-child(3),.tu-d-tbl td:nth-child(3){width:calc(40 * var(--u))}
.tu-d-tbl th:nth-child(4),.tu-d-tbl td:nth-child(4){width:calc(62 * var(--u))}
.tu-d-tbl th:last-child,.tu-d-tbl td:last-child{text-align:right}
.tu-d-extra td:first-child{color:var(--tu-ink)}
.tu-d-total{left:calc(15 * var(--u));top:calc(214 * var(--u));width:calc(222 * var(--u));display:flex;justify-content:flex-end;
  gap:calc(14 * var(--u));font-size:calc(9 * var(--u));line-height:1;font-weight:700}
.tu-d-thanks{left:calc(24 * var(--u));top:calc(230 * var(--u));font-size:calc(6.2 * var(--u));line-height:1;color:#6E7C84}

/* preparation to payment: the notebook strip */
.tu-prep{background:#FBFAF8}
.tu-note{position:absolute;left:0;top:0;width:calc(246 * var(--u));height:100%;background:#fff;
  background-image:repeating-linear-gradient(180deg,transparent 0 calc(17 * var(--u)),#EFEFEC calc(17 * var(--u)) calc(17.7 * var(--u)));
  box-shadow:calc(3 * var(--u)) 0 calc(10 * var(--u)) calc(-6 * var(--u)) rgba(20,30,35,.16)}
.tu-note::before{content:"";position:absolute;left:calc(48 * var(--u));top:0;bottom:0;width:1px;background:#E9DCDC}
.tu-hole{position:absolute;left:calc(37 * var(--u));top:calc(var(--y) * var(--u));width:calc(5 * var(--u));height:calc(8 * var(--u));
  border-radius:50%;background:#3B352C;opacity:.8}
.tu-steps{position:absolute;inset:0}
.tu-num{position:absolute;left:calc(68 * var(--u));top:calc(var(--y) * var(--u));width:calc(22 * var(--u));height:calc(22 * var(--u));
  border-radius:50%;background:#F05A05;color:#fff;display:grid;place-items:center;font:700 calc(11 * var(--u))/1 Inter,'Inter Fallback',sans-serif}
.tu-steps .tu-hand{position:absolute;left:calc(105 * var(--u));top:calc(var(--y) * var(--u));font-size:calc(21 * var(--u));line-height:calc(30 * var(--u));
  transform:rotate(-2deg);transform-origin:0 50%;white-space:nowrap}
.tu-step2::after{content:"";position:absolute;left:calc(-1 * var(--u));bottom:calc(5 * var(--u));width:calc(44 * var(--u));height:calc(2.2 * var(--u));
  border-radius:2px;background:#F2620C}
.tu-note-r{font-size:calc(19 * var(--u));line-height:calc(24 * var(--u));transform:rotate(-7deg);transform-origin:0 0;color:#2A3740}
.tu-note-r2{transform:rotate(-8deg)}
.tu-swoosh{height:calc(16 * var(--u));fill:none;stroke:#F2620C;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* lesson record */
.tu-rec{background:#FCFCFB}
.tu-rec-paper{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));background:#fff;transform:rotate(-1.6deg);
  box-shadow:0 calc(10 * var(--u)) calc(26 * var(--u)) calc(-14 * var(--u)) rgba(11,25,32,.26),0 0 0 1px rgba(11,25,32,.04)}
.tu-rec-paper>*{position:absolute;margin:0}
.tu-rec-h{left:calc(26 * var(--u));top:calc(20 * var(--u));font-size:calc(13.5 * var(--u));line-height:1;font-weight:700;letter-spacing:-.01em}
.tu-rec-dl{left:calc(26 * var(--u));top:calc(40 * var(--u));width:calc(326 * var(--u))}
.tu-rec-dl div{display:flex;gap:calc(14 * var(--u));align-items:flex-start;padding:calc(3.4 * var(--u)) 0;border-bottom:1px solid #EDEDEA}
.tu-rec-dl dt{width:calc(84 * var(--u));flex:none;font-size:calc(8 * var(--u));line-height:calc(12 * var(--u));font-weight:600;color:var(--tu-ink)}
.tu-rec-dl dd{margin:0;font-size:calc(8 * var(--u));line-height:calc(12 * var(--u));color:#5D6B73}
.tu-rec-total{left:calc(26 * var(--u));top:calc(163 * var(--u));width:calc(326 * var(--u));display:flex;gap:calc(14 * var(--u))}
.tu-rec-total span{width:calc(84 * var(--u));flex:none;font-size:calc(8.6 * var(--u));font-weight:600}
.tu-rec-total b{font-size:calc(10 * var(--u));font-weight:700}

/* pricing */
.tu-price{background:var(--tu-mist)}
.tu-tools{position:absolute;inset:0}
.t-tutor .tu-tool-h{font-weight:700;color:var(--tu-ink)!important}
.t-tutor .tu-tool-h:hover{color:#C04E06!important}
.tu-tool-arr{height:calc(18 * var(--u));fill:none;stroke:#F2620C;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tu-vrule{height:calc(72 * var(--u));background:#DEDEDA}

/* template cards */
.tu-tpl{background:#FCFCFB}
.t-tutor .tu-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));background:#fff;border-radius:calc(2 * var(--u));
  transform:rotate(var(--rot));overflow:hidden;box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) calc(-10 * var(--u)) rgba(11,25,32,.26),0 0 0 1px rgba(11,25,32,.05)}
.tu-tp-t{position:absolute;left:calc(18 * var(--u));top:calc(16 * var(--u));font-size:calc(12 * var(--u));line-height:1;font-weight:700;letter-spacing:-.01em}
.tu-tp-l{position:absolute;left:calc(18 * var(--u));top:calc(44 * var(--u));right:calc(14 * var(--u));display:grid;gap:calc(13 * var(--u))}
.tu-tp-l li{display:grid;grid-template-columns:calc(54 * var(--u)) 1fr;align-items:center;gap:calc(8 * var(--u))}
.tu-tp-l span{font-size:calc(7.4 * var(--u));line-height:1;color:#54626A;white-space:nowrap}
.tu-tp-l i{height:calc(5 * var(--u));width:calc(var(--bw) * var(--u));background:#E9E9E6;border-radius:1px}
.tu-tp .t10-edit{bottom:auto;top:calc(50% - 18 * var(--u));font-size:calc(11.5 * var(--u));padding:calc(11 * var(--u)) calc(16 * var(--u));
  border-radius:calc(6 * var(--u));background:#F2620C;gap:calc(11 * var(--u));font-weight:700;white-space:nowrap;
  box-shadow:0 calc(7 * var(--u)) calc(16 * var(--u)) rgba(150,52,2,.35)}
.tu-tp .t10-edit svg{width:calc(12 * var(--u));height:calc(12 * var(--u))}
.tu-tp .t10-edit.tu-edit-on{opacity:1}
.tu-tp2{z-index:2}
.tu-strip-s{background:#FCFCFB;padding-bottom:calc(46px)}
.tu-strip-s .t10-strip{margin-top:0}

/* payment band */
.tu-pay{background:var(--tu-slate);color:#fff}
.tu-pay .tu-pay-h{color:#fff}
.tu-pay-m{color:#fff;font-weight:600}
.tu-pay-u{color:#D6E2E2}
.tu-qr{height:calc(79 * var(--u));background:#fff;border-radius:calc(4 * var(--u));padding:calc(5 * var(--u))}
.tu-qr-img{width:100%;height:100%}
.tu-pay-rule{height:calc(60 * var(--u));background:rgba(255,255,255,.25)}
.tu-hand-w{color:#F3F7F7;font-size:calc(19 * var(--u));line-height:calc(24 * var(--u));transform:rotate(-7deg);transform-origin:0 0}
.tu-swoosh-o{stroke:#F2620C}

/* the simple lesson record */
.tu-simple{background:#FBFAF8}
.tu-simple-l{position:absolute;inset:0}
.tu-num-s{left:calc(var(--x) * var(--u));width:calc(24 * var(--u));height:calc(24 * var(--u));font-size:calc(12 * var(--u))}
.t-tutor .tu-step-h{font-weight:700;color:var(--tu-ink)!important}
.t-tutor .tu-step-h:hover{color:#C04E06!important}

/* related tools and FAQ */
.tu-faqs{background:#FCFCFB;padding-bottom:calc(20 * var(--u))}
.tu-faq-in{width:calc(868 * var(--u));margin:0 auto;display:grid;grid-template-columns:calc(415 * var(--u)) 1fr;
  padding:calc(24 * var(--u)) calc(45 * var(--u)) 0;position:relative}
.tu-faq-in::before{content:"";position:absolute;left:calc(414 * var(--u));top:calc(24 * var(--u));width:1px;height:calc(112 * var(--u));background:#E4E4E0}
.tu-rel{display:grid;gap:calc(11 * var(--u));margin-top:calc(16 * var(--u))!important}
.t-tutor .tu-rel-a{display:inline-flex;align-items:center;gap:calc(9 * var(--u));font-size:calc(10.3 * var(--u));font-weight:600;color:var(--tu-ink)!important}
.tu-rel-a svg{width:calc(11 * var(--u));height:calc(11 * var(--u));fill:none;stroke:#F2620C;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.t-tutor .tu-rel-a:hover{color:#C04E06!important}
.tu-faq-side h2{margin-bottom:calc(10 * var(--u))!important}
.t-tutor .tu-faq details{border-bottom:1px solid #EAEAE6}
.t-tutor .tu-faq summary{padding:calc(6 * var(--u)) 0;min-height:calc(24 * var(--u));font-size:calc(10.1 * var(--u));line-height:calc(13 * var(--u));color:var(--tu-ink)}
.t-tutor .tu-faq summary::after{content:"\203A";font-size:calc(14 * var(--u));color:#8A959B}
.t-tutor .tu-faq details[open] summary::after{content:"\2039"}
.t-tutor .tu-faq .a{padding:0 calc(26 * var(--u)) calc(10 * var(--u)) 0}
.t-tutor .tu-faq .a p{font-size:calc(9.6 * var(--u));line-height:calc(15 * var(--u));color:var(--tu-sub)}

/* closing band */
.tu-end{overflow:hidden;background:#241C14}
.tu-end-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.t-tutor .tu-end-h{color:#fff}
.tu-end-t{color:#EDE7E0}

.t-tutor .t10-long{background:var(--tu-mist)}

/* phones and small tablets: the same blocks in the design's order, photo and copy still one picture */
@media (max-width:899px){
  main.t-tutor{--u:1px}
  .t-tutor .tu-art{width:auto;height:auto!important;padding:0 20px}
  .t-tutor .tu-a{position:static;width:auto}
  .t-tutor .tu-t{font-size:var(--fm,16px);line-height:var(--lm,1.5);letter-spacing:normal}
  .tu-hero{min-height:560px;display:flex}
  .tu-hero .tu-art{padding:28px 20px 32px;display:flex;flex-direction:column;align-items:flex-start;width:100%}
  .tu-hero-img{object-position:50% 26%;z-index:0}
  .tu-end-img{z-index:0}
  .tu-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(252,252,251,.93) 0,rgba(252,252,251,.8) 36%,rgba(252,252,251,.35) 56%,rgba(252,252,251,0) 76%)}
  .tu-end::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(24,18,12,.82) 0,rgba(24,18,12,.6) 44%,rgba(24,18,12,.2) 66%,rgba(24,18,12,0) 84%)}
  .tu-hero .tu-art>*:not(img),.tu-end .tu-art>*:not(img){position:relative;left:auto;top:auto;width:auto;z-index:2}
  .tu-kick{position:static;display:block;white-space:normal;margin-bottom:10px;font-size:11px;letter-spacing:.12em}
  .tu-big{font-size:34px;line-height:1.1;letter-spacing:-.02em}
  .tu-big br,.tu-h2 br,.tu-lede br,.tu-p br{display:none}
  .tu-lede{--fm:16px;--lm:1.5;margin-top:14px!important;max-width:30em}
  .t-tutor .tu-btn{margin-top:20px;height:48px;padding:0 22px;font-size:15px;border-radius:5px}
  .t-tutor .tu-btn svg{width:15px;height:15px}
  .tu-tag{--fm:14px;--lm:1.4;margin-top:14px!important}
  .t-tutor .tu-hero .tu-doc{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:340px;height:auto;
    min-height:calc(252 * var(--du));--du:calc(min(100vw - 40px,340px) / 250);margin-top:26px;align-self:flex-start}
  .t-tutor .tu-doc>*{position:absolute}
  .tu-h2{--fm:28px;--lm:1.15;letter-spacing:-.02em}
  .tu-eyebrow{--fm:11px;--lm:1.3;letter-spacing:.12em}
  .tu-p{--fm:16px;--lm:1.55;margin-top:12px!important;max-width:34em}
  .tu-prep .tu-art,.tu-rec .tu-art,.tu-price .tu-art,.tu-tpl .tu-art,.tu-simple .tu-art{padding-top:40px;padding-bottom:40px;display:flex;flex-direction:column;align-items:flex-start}
  .tu-note{position:relative;width:calc(100% + 40px);height:auto;margin:0 -20px 20px;padding:18px 0;background:#fff}
  .tu-hole{display:none}
  .tu-steps{position:relative;inset:auto;display:grid;gap:14px;margin:0 0 26px!important;width:100%}
  .tu-steps li{display:flex;align-items:center;gap:14px}
  .tu-num{position:static;width:30px;height:30px;font-size:15px;flex:none}
  .tu-steps .tu-hand{position:static;font-size:26px;line-height:1.1;transform:none}
  .tu-step2::after{display:none}
  .tu-note-r,.tu-hand-w{font-size:24px;line-height:1.15;transform:rotate(-4deg);margin-top:20px!important}
  .tu-swoosh{display:none}
  .t-tutor .tu-rec-paper{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:378px;height:auto;
    min-height:calc(196 * var(--dr));--dr:calc(min(100vw - 40px,378px) / 378);margin-top:24px}
  .tu-tools,.tu-simple-l{position:relative;inset:auto;display:grid;gap:26px;margin-top:24px!important;width:100%}
  .tu-tools li,.tu-tools li>*{display:block}
  .tu-tool-h,.tu-step-h{--fm:18px;--lm:1.3}
  .tu-tool-p,.tu-step-p{--fm:15px;--lm:1.5;margin-top:4px!important}
  .tu-tool-arr{width:20px;height:20px;margin-top:8px}
  .tu-vrule{display:none}
  .tu-simple-l li{display:grid;grid-template-columns:30px 1fr;column-gap:14px;align-items:center}
  .tu-num-s{position:static;width:30px;height:30px;font-size:15px;grid-row:span 2}
  .tu-simple-l a{grid-column:2}
  .tu-simple-l li>span:last-child{grid-column:2}
  .tu-tpl .tu-art{display:grid;gap:22px;justify-items:center}
  .t-tutor .tu-tp{position:relative;left:auto!important;top:auto!important;transform:none;width:min(300px,100%);height:auto;aspect-ratio:170/205}
  .tu-tp2{order:-1}
  .tu-tp-t{font-size:7%;top:8%;left:10%}
  .tu-tp-l{top:22%;left:10%;right:8%;gap:6%}
  .tu-tp-l span{font-size:11px}
  .tu-tp .t10-edit{font-size:13px;padding:10px 14px;top:auto;bottom:14%}
  .tu-pay .tu-art{padding:30px 20px;display:grid;justify-items:start}
  .tu-pay-h{--fm:24px;--lm:1.2}
  .tu-pay-m{--fm:17px;--lm:1.4;margin-top:8px!important}
  .tu-pay-u{--fm:15px;--lm:1.4;margin-top:4px!important}
  .tu-qr{width:118px!important;height:118px;margin-top:20px}
  .tu-pay-rule{display:none}
  .tu-faqs{padding:36px 0 30px}
  .t-tutor .tu-faq-in{display:block;width:auto;padding:0 20px}
  .tu-faq-in::before{display:none}
  .tu-rel-side{margin-bottom:26px}
  .t-tutor .tu-rel-a{font-size:16px}
  .t-tutor .tu-faq summary{font-size:16px;line-height:1.4;min-height:48px;padding:12px 0}
  .t-tutor .tu-faq summary::after{font-size:22px}
  .t-tutor .tu-faq .a p{font-size:15px;line-height:1.6}
  .tu-end{min-height:340px;display:flex}
  .tu-end-img{object-position:60% 40%}
  .tu-end .tu-art{padding:30px 20px 36px;display:flex;flex-direction:column;align-items:flex-start;width:100%}
  .tu-end-h{--fm:28px;--lm:1.15}
  .tu-end-t{--fm:14px;--lm:1.4;margin-top:14px!important}
}