/* Skylight homepage styles. Moved out of index.html in step 2 of the Work Order
   redesign; unchanged otherwise. Brand tokens live in the :root block below. */

:root{
  --blue:#0E1CC4; --blue-lt:#1A2AE6;
  --lime:#C8FF03; --lime-dk:#A9DB00;
  --grey:#E2E2E2; --grey-dk:#C2C2C2;
  --ink:#131316; --ink-2:#1D1D23; --ink-3:#2A2A32;
  --muted:#5A5A62;
  --paper:#F3F4F7; --rule:rgba(14,28,196,.16); --dash:rgba(19,19,22,.2);
  --disp:'Archivo','Archivo fallback',system-ui,sans-serif;
  --body:'Figtree',system-ui,sans-serif;
  --num:'Azeret Mono',ui-monospace,monospace;
  --wrap:1200px;
  --ease:cubic-bezier(.22,.8,.28,1);
  --dur:.7s;
  --cut:28px;
}
@font-face{font-family:'Archivo';src:url(/assets/fonts/archivo.woff2) format('woff2');font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Figtree';src:url(/assets/fonts/figtree.woff2) format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'Azeret Mono';src:url(/assets/fonts/azeret.woff2) format('woff2');font-weight:100 900;font-display:swap}
/* shows until Archivo arrives: a wide system bold, scaled so the hero's words fit their fixed lines */
@font-face{font-family:'Archivo fallback';font-weight:400 900;size-adjust:84%;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica-Bold'),local('Roboto-Bold'),local('Roboto')}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--ink);color:#fff;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
::selection{background:var(--lime);color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hide{display:none!important}

h1{font-family:var(--disp);font-variation-settings:'wdth' 76,'wght' 800;text-transform:uppercase;font-size:clamp(3rem,9.2vw,7.4rem);line-height:.84;letter-spacing:-.018em}
h2{font-family:var(--disp);font-variation-settings:'wdth' 80,'wght' 800;text-transform:uppercase;font-size:clamp(2rem,5vw,3.9rem);line-height:.92;letter-spacing:-.014em;word-spacing:.1em;text-wrap:balance}
h3{font-family:var(--disp);font-variation-settings:'wdth' 88,'wght' 700;text-transform:uppercase;font-size:1.28rem;line-height:1;letter-spacing:-.006em;word-spacing:.1em;text-wrap:balance}
.tag{display:block;font-family:var(--num);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78);padding-bottom:7px;border-bottom:2px solid currentColor}

.rv{opacity:0;transform:translateY(24px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}

/* work order parts: paper forms, cut corners, stamps */
.sheet{position:relative;color:var(--ink);background-color:var(--paper);background-image:radial-gradient(var(--rule) 1px,transparent 1.3px);background-size:14px 14px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.sheet.hot{color:#fff;background-color:var(--blue);background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.3px)}
.sheet :focus-visible,.calc :focus-visible,.faq :focus-visible{outline-color:var(--blue)}
.calcbox :focus-visible{outline-color:var(--lime)}
.sheet.hot :focus-visible{outline-color:var(--lime)}
.stamp{display:inline-block;font-family:var(--disp);font-variation-settings:'wdth' 74,'wght' 860;text-transform:uppercase;letter-spacing:.05em;line-height:1;white-space:nowrap;border:3px solid var(--ink);border-radius:6px;padding:7px 11px 6px}

/* nav */
.nav{position:sticky;top:0;z-index:80;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.12)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-variation-settings:'wdth' 84,'wght' 800;text-transform:uppercase;font-size:1.4rem;color:#fff}
.star{width:18px;height:18px;flex-shrink:0;color:var(--lime);transition:transform var(--dur) var(--ease)}
.brand:hover .star{transform:rotate(120deg)}
.nlinks{display:flex;gap:22px}
.nlinks a{font-size:.87rem;font-weight:600;color:rgba(255,255,255,.62);position:relative;padding:4px 0;transition:color var(--dur) var(--ease)}
.nlinks a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur) var(--ease)}
.nlinks a:hover{color:#fff}
.nlinks a:hover::after{transform:scaleX(1)}
.navright{display:flex;align-items:center;gap:16px}
.lang{display:flex;border:2px solid rgba(255,255,255,.34);border-radius:6px}
.lang a{position:relative;display:grid;place-items:center;min-width:38px;height:32px;font-family:var(--num);font-size:.76rem;font-weight:600;letter-spacing:.06em;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav .lang a{color:rgba(255,255,255,.72)}
.lang a::after{content:"";position:absolute;inset:-8px 0} /* 44 px to tap, without a taller box in the nav */
.lang a+a{border-left:2px solid rgba(255,255,255,.34)}
.lang a:hover{color:var(--lime)}
.lang a[aria-current]{background:var(--lime);color:var(--ink)}
.signin{font-family:var(--num);font-size:.8rem;letter-spacing:.05em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.24);border-radius:6px;padding:8px 15px;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.signin:hover{border-color:var(--lime);color:var(--lime)}
.navphone{display:flex;align-items:center;gap:10px}
.phbub{width:34px;height:34px;border-radius:50%;background:var(--lime);display:grid;place-items:center;flex-shrink:0}
.phbub svg{width:15px;height:15px;color:var(--ink)}
.phtxt{font-family:var(--num);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);display:block}
.phnum{font-family:var(--num);font-size:.84rem;font-weight:500;color:#fff}
@media(max-width:1140px){.nlinks{display:none}}
@media(max-width:720px){.navphone .phcol{display:none}}
@media(max-width:430px){.signin{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--body);font-weight:700;font-size:.92rem;padding:8px 8px 8px 20px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn .ico{width:34px;height:34px;border-radius:3px;display:grid;place-items:center;flex-shrink:0;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.btn .ico svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:hover .ico svg{transform:translate(2px,-2px)}
.btn-lime{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.btn-lime .ico{background:var(--ink);color:var(--lime)}
.btn-lime:hover{background:var(--lime-dk);border-color:var(--lime-dk)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn-ghost .ico{background:rgba(255,255,255,.16);color:#fff}
.btn-ghost:hover{border-color:#fff}
.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ink .ico{background:var(--lime);color:var(--ink)}
.btn-ink:hover{background:#000;border-color:#000}
.btn-full{width:100%;justify-content:space-between}
.btn-paper{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-paper .ico{background:var(--ink);color:var(--lime)}
.btn-paper:hover{background:#fff;border-color:#fff}

/* hero */
.hero{background:var(--blue);position:relative;overflow:hidden;padding:clamp(30px,4.6vw,54px) 0 0}
/* line breaks are fixed, not wrapped: fonts load after first paint, and a wider fallback must not change the headline's height */
.hero h1{color:var(--lime);font-size:min(9.3vw,7.4rem);line-height:.88;letter-spacing:-.012em;white-space:nowrap}
.hero h1 .ln2{display:block;color:#fff}
.chip{position:relative;display:inline-block;width:2.5em;height:.72em;vertical-align:baseline;margin-left:.04em}
.chip picture,.chip img{display:block;width:100%;height:100%}
.chip picture{position:relative;overflow:hidden;border:3px solid var(--paper);border-radius:4px;background:var(--ink)}
.chip img{object-fit:cover;object-position:0 70%;transform:scale(1.55);transform-origin:12% 78%}
.chip picture::after,.ph::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(rgba(19,19,22,.2) .7px,transparent 1px) 0 0/4px 4px;pointer-events:none}
.chip .stamp{position:absolute;right:-.14em;bottom:-.34em;font-size:clamp(13px,.2em,19px);letter-spacing:.05em;color:var(--ink);background:var(--lime);transform:rotate(-6deg)}
.hbody{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px 56px;margin-top:clamp(28px,4vw,40px);align-items:start}
.hbody.rv{opacity:1} /* the lede is the first thing read, so it paints at once and only rises */
.hero .lede{color:#fff;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.5}
.hact{display:grid;gap:14px;justify-items:start}
.hcta{display:flex;flex-wrap:wrap;gap:12px}
.hnote{font-size:.9rem;line-height:1.5;color:#fff}
.hnote a{color:var(--lime);border-bottom:1px solid rgba(200,255,3,.5)}
.hnote a:hover{border-bottom-color:var(--lime)}
.htk{margin-top:clamp(26px,3.6vw,38px);padding:14px clamp(18px,3vw,28px) 16px}
.htk .tag{color:var(--ink);padding-bottom:0;border-bottom:0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px;border-top:2px solid var(--ink)}
.stat{padding:12px 0 0 clamp(14px,2vw,22px);border-left:1px dashed var(--dash)}
.stat:first-child{padding-left:0;border-left:0}
.stat b{font-family:var(--disp);font-variation-settings:'wdth' 72,'wght' 860;font-size:clamp(2.2rem,3.6vw,2.9rem);line-height:1;display:block}
.stat span{font-family:var(--num);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;margin-top:5px;display:block}
@media(max-width:880px){.hbody{grid-template-columns:1fr}}
@media(max-width:640px){
  .hero h1{font-size:calc((100vw - 48px) / 5.12)}
  .hero h1>.w:first-child,.hero h1 .ln2 .w{display:block}
  .chip{width:3em}
  .chip .stamp{right:-2px;bottom:auto;top:calc(100% - 8px)}
}
@media(max-width:640px){
  .stats{grid-template-columns:1fr}
  .stat,.stat:first-child{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 0;border-left:0;border-bottom:1px dashed var(--dash)}
  .stat:last-child{border-bottom:0;padding-bottom:0}
  .stat span{margin-top:0}
  .stat b{font-size:2rem}
}

/* marquee: a ticket edge, punched top and bottom */
.marq{--hole:radial-gradient(circle 5px at 11px 0,transparent 98%,#000) 0 0/22px 51% repeat-x,radial-gradient(circle 5px at 11px 100%,transparent 98%,#000) 0 100%/22px 51% repeat-x;background:var(--lime);color:var(--ink);overflow:hidden;padding:17px 0;-webkit-mask:var(--hole);mask:var(--hole)}
.marq-track{display:flex;width:max-content;animation:slide 34s linear infinite}
.marq-set{display:flex;align-items:center;gap:26px;padding-right:26px}
.marq-set span{font-family:var(--disp);font-variation-settings:'wdth' 84,'wght' 800;text-transform:uppercase;font-size:1.22rem;white-space:nowrap}
.marq-set svg{width:16px;height:16px;flex-shrink:0}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq:hover .marq-track{animation-play-state:paused}

/* plans */
.plans{background:var(--ink);padding:84px 0 84px}
.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.phead h2{max-width:12em;margin-top:18px}
.phead p{color:rgba(255,255,255,.66);max-width:23em;font-size:.96rem}
.toggle{display:inline-flex;border:2px solid rgba(255,255,255,.34);border-radius:6px;margin-top:34px}
.toggle button{font-family:var(--body);font-weight:600;font-size:.86rem;padding:11px 18px;border:0;background:transparent;color:rgba(255,255,255,.72);cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.toggle button+button{border-left:2px solid rgba(255,255,255,.34)}
.toggle button[aria-pressed="true"]{background:var(--lime);color:var(--ink)}
.toggle .save{font-family:var(--num);font-size:11px;letter-spacing:.06em;margin-left:6px;opacity:.78}

/* spec sheets */
.slimnote{margin-top:22px;font-size:.92rem;color:rgba(255,255,255,.66);max-width:46em}
.slimnote a{color:var(--lime);border-bottom:1px solid rgba(200,255,3,.4)}
.resnote{margin-top:26px;padding:16px 20px;border:1.5px dashed rgba(200,255,3,.5);border-radius:6px;font-size:.92rem;color:rgba(255,255,255,.86);line-height:1.55;max-width:52em}
.resnote b{color:var(--lime)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
@media(max-width:860px){.duo{grid-template-columns:1fr}}
.plan{--pad:clamp(20px,3vw,32px);padding:22px var(--pad) var(--pad);display:flex;flex-direction:column}
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;border-bottom:2px solid currentColor;padding:0 22px 9px 0}
.scode{font-family:var(--num);font-size:13px;font-weight:600;letter-spacing:.06em}
.clive{font-family:var(--num);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.plan.hot .clive{color:var(--lime)}
.plan h3{font-variation-settings:'wdth' 68,'wght' 860;font-size:clamp(2.45rem,5vw,3.5rem);line-height:.95;letter-spacing:.002em;margin-top:18px}
.plan .pdesc{font-size:.97rem;line-height:1.5;color:var(--ink);margin-top:10px;max-width:30em}
.plan.hot .pdesc{color:#fff}
.stitle{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card-flag{flex-shrink:0;margin-top:14px;transform:rotate(5deg);font-family:var(--disp);font-variation-settings:'wdth' 74,'wght' 860;font-size:clamp(12px,3.4vw,15px);line-height:1;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;background:var(--lime);color:var(--ink);border:3px solid var(--ink);border-radius:6px;padding:7px 10px 6px}
.specs{list-style:none;margin-top:20px;border-top:1px solid var(--rule);flex:1}
.plan.hot .specs{border-top-color:rgba(255,255,255,.3)}
.specs li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px dashed var(--dash);font-size:.94rem}
.plan.hot .specs li{border-bottom-color:rgba(255,255,255,.3)}
.specs li:last-child{border-bottom:0}
.specs .bv{font-family:var(--num);font-size:.82rem;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.specs .free{color:var(--blue);font-weight:600}
.plan.hot .specs .free{color:var(--lime)}
.pband{background:var(--lime);color:var(--ink);margin:16px calc(var(--pad) * -1) 0;padding:13px var(--pad) 12px}
.cprice{font-family:var(--num);font-size:clamp(2.7rem,5.6vw,3.5rem);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cprice em{font-style:normal;font-size:.8rem;font-weight:500;letter-spacing:0;margin-left:6px}
.bsave{font-family:var(--num);font-size:12.5px;font-weight:500;letter-spacing:0;margin-top:13px;display:block;line-height:1.45}
.setup{font-family:var(--num);font-size:12.5px;letter-spacing:0;margin-top:4px;display:block;line-height:1.45}
.plan .btn{margin-top:18px}
.plan.hot .btn-lime{border-color:var(--ink)}

/* calculator: the machine and its receipt */
.calc{background:var(--grey);color:var(--ink);padding:84px 0}
.calc .tag{color:var(--blue)}
.calcgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start}
@media(max-width:900px){.calcgrid{grid-template-columns:1fr;gap:32px}}
.calc .cl{position:sticky;top:112px}
@media(max-width:900px){.calc .cl{position:static}}
.calc h2{margin-top:18px;max-width:11em}
.calc .cl p{color:var(--muted);margin-top:16px;max-width:30em;font-size:.98rem}
.calcbox{--pad:clamp(18px,3vw,26px);--feed:clamp(12px,3vw,28px);position:relative;z-index:2;background:var(--ink);color:#fff;padding:var(--pad) var(--pad) calc(var(--pad) + 14px);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.cfields{display:grid}
.cfield{display:grid;grid-template-columns:minmax(0,1fr) 128px;align-items:center;gap:14px;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.26)}
.cfield:first-child{padding-top:2px}
.cfield:last-child{border-bottom:0}
.cfield label{font-family:var(--num);font-size:11.5px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.84)}
.cfield .inrow{display:flex;align-items:center;gap:6px;background:var(--paper);border:2px solid var(--paper);border-radius:3px;padding:0 10px;transition:border-color var(--dur) var(--ease)}
.cfield .inrow:focus-within{border-color:var(--lime);box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--lime)}
.cfield .inrow span{font-family:var(--num);color:var(--muted);font-size:1rem}
.cfield input{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;font-family:var(--num);font-size:1.2rem;font-weight:600;color:var(--ink);padding:9px 0;text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.cfield input::-webkit-inner-spin-button,.cfield input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cout{margin-top:14px;background:var(--lime);color:var(--ink);border-radius:3px;padding:15px 16px 14px}
.cout .lbl{font-family:var(--num);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.cout b,.roll{display:block;font-family:var(--num);font-weight:600;font-size:clamp(2.7rem,8vw,4.2rem);letter-spacing:-.03em;line-height:1;margin-top:8px;font-variant-numeric:tabular-nums}
.cout p{font-size:.95rem;margin-top:9px;line-height:1.4}
/* the counter: #c-lost stays the real number; this is its aria-hidden face, built by motion.js */
.roll{display:flex}
.roll .col,.roll .sep{flex:none;transition:width var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.roll .col{width:calc(1ch - .03em);height:1em;overflow:hidden}
.roll .col::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";display:block;white-space:pre;transform:translateY(calc(var(--d,0) * -1em));transition:transform var(--dur) var(--ease)}
.roll .sep{width:.34em;display:flex;justify-content:center}
.roll .off{width:0;opacity:0}
#c-print{margin-top:14px}
.calcbox::after{content:"";position:absolute;left:var(--feed);right:var(--feed);bottom:0;height:9px;background:#000;border-top:2px solid rgba(255,255,255,.42)}
.rcpt{display:grid;grid-template-rows:0fr;visibility:hidden;width:calc(100% - clamp(24px,6vw,56px));margin:0 auto;transition:grid-template-rows var(--dur) var(--ease),visibility 0s var(--dur)}
.rcpt.on{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows var(--dur) var(--ease),visibility 0s}
.rclip{overflow:hidden;min-height:0}
.rpaper{position:relative;background:#fff;color:var(--ink);padding:16px 16px 26px;transform:translateY(-100%);transition:transform var(--dur) var(--ease)}
.rcpt.on .rpaper{transform:none}
.rpaper::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:linear-gradient(45deg,var(--grey) 50%,transparent 50%) 0 0/14px 14px repeat-x,linear-gradient(-45deg,var(--grey) 50%,transparent 50%) 0 0/14px 14px repeat-x}
.rtop{display:flex;justify-content:space-between;gap:12px;font-family:var(--num);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding-bottom:9px;border-bottom:2px solid var(--ink)}
/* the ink: each line prints left to right, top to bottom, with a beat before the total */
.rtop,.rlines div{clip-path:inset(0 100% 0 0)}
.rcpt.ink .rtop,.rcpt.ink .rlines div{clip-path:inset(0);transition:clip-path var(--dur) var(--ease);transition-delay:calc(var(--n,0) * 70ms)}
.rlines div:nth-child(1){--n:1}.rlines div:nth-child(2){--n:2}.rlines div:nth-child(3){--n:3}.rlines div:nth-child(4){--n:4}.rlines div:nth-child(5){--n:5}
.rlines .rtotal{--n:8}.rlines .rpay{--n:9}
.rlines div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:8px 0;border-bottom:1px dashed var(--dash);font-family:var(--num);font-size:12.5px;line-height:1.35}
.rlines dd{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.rlines .rtotal{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin-top:-1px;font-weight:600;font-size:13px}
.rlines .rtotal dd{font-size:1.2rem}
.rlines .rpay{border-bottom:0;padding-bottom:0}
.cfine{font-size:.84rem;color:var(--muted);margin-top:14px;line-height:1.5}
.leadf{margin-top:18px;padding-top:18px;border-top:2px solid var(--ink)}
.leadf .lrow{display:flex;gap:10px;flex-wrap:wrap}
.leadf input[type=email]{flex:1;min-width:200px;background:var(--paper);border:2px solid var(--ink);border-radius:6px;padding:13px 16px;font-family:var(--body);font-size:1rem;color:var(--ink);outline:0;transition:border-color var(--dur) var(--ease)}
.leadf input[type=email]:focus{border-color:var(--blue)}
.btn-blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-blue .ico{background:var(--lime);color:var(--ink)}
.btn-blue:hover{background:var(--blue-lt);border-color:var(--blue-lt)}
.leadf .fine{font-size:.82rem;color:var(--muted);margin-top:10px}
.leadf .fine a{color:var(--blue);border-bottom:1px solid rgba(14,28,196,.35)}
.leadok{font-size:.95rem;color:var(--ink);font-weight:600;margin-top:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* how it works: photo strip, job ticket, job report */
.mid{background:var(--ink);padding:0 0 clamp(64px,8vw,92px)}
.strip{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:clamp(44px,6vw,72px)}
.ph{position:relative;margin:0;overflow:hidden;background:var(--ink)}
.ph img{display:block;width:100%;height:clamp(150px,27vw,350px);object-fit:cover}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,56px);align-items:start}
@media(max-width:900px){.mgrid{grid-template-columns:1fr}}
.mid h2{margin-top:18px}
.mid .ml>p:not(.callnote){color:rgba(255,255,255,.72);margin-top:16px;max-width:28em;font-size:.97rem}
.steps{margin-top:24px;padding:6px clamp(16px,2.6vw,24px)}
.stp{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:start;padding:15px 0;border-bottom:1px dashed var(--dash)}
.stp:last-child{border-bottom:0}
.cbx{width:24px;height:24px;display:grid;place-items:center;background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:3px}
.cbx svg{width:14px;height:14px}
.stp b{font-family:var(--num);font-weight:600;font-size:.95rem;line-height:24px;color:var(--blue)}
.stp h3{font-variation-settings:'wdth' 78,'wght' 800;font-size:1.28rem;line-height:1.1}
.stp p{font-size:.92rem;line-height:1.45;margin-top:4px}
.callnote{margin-top:16px;padding:15px 18px;border:1.5px dashed rgba(200,255,3,.5);border-radius:6px;font-size:.92rem;color:rgba(255,255,255,.86);line-height:1.55}
.callnote b{color:var(--lime)}
.callnote a{color:var(--lime);border-bottom:1px solid rgba(200,255,3,.4)}
.panel{padding:18px clamp(18px,3vw,26px) 18px}
@media(min-width:901px){.panel{position:sticky;top:96px}}
.phead2{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 22px 11px 0;border-bottom:2px solid var(--ink);font-family:var(--disp);font-variation-settings:'wdth' 72,'wght' 860;font-size:clamp(1.35rem,3vw,1.7rem);line-height:1;text-transform:uppercase}
.phead2 .stamp{flex-shrink:0;font-size:15px;color:var(--blue);border-color:var(--blue);transform:rotate(-5deg)}
.prow{padding:11px 0;border-bottom:1px dashed var(--dash)}
.ptop{display:flex;align-items:baseline;gap:12px}
.ptop .pl{font-size:.95rem}
.ptop .pdd{flex:1;border-bottom:1px dotted var(--dash);transform:translateY(-3px)}
.ptop .pv{font-family:var(--num);font-size:1.3rem;font-weight:600;font-variant-numeric:tabular-nums}
.pnote{padding-top:12px;font-size:.84rem;line-height:1.5;color:var(--muted)}

/* guarantee: a warranty card */
.gtee{background:var(--lime);color:var(--ink);padding:clamp(56px,7vw,84px) 0}
.wcard{clip-path:none;padding:9px}
.wcard.knock{animation:knock var(--dur) var(--ease)}
@keyframes knock{from{translate:0 5px}}
.wframe{border:2px solid var(--ink);padding:clamp(18px,3.4vw,38px)}
.whead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px 32px}
.gtee .tag{color:var(--ink)}
.gtee h2{margin-top:14px;max-width:14em;font-size:clamp(2.3rem,5.6vw,4.5rem)}
.whead .stamp{flex-shrink:0;margin-top:30px;font-size:clamp(1.25rem,2.6vw,1.9rem);padding:10px 15px 9px;background:var(--lime);color:var(--ink);transform:rotate(6deg)}
.wbody{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(22px,4vw,44px);margin-top:clamp(20px,3vw,30px);padding-top:clamp(18px,2.6vw,26px);border-top:2px solid var(--ink)}
.wleft p{font-size:1rem;line-height:1.55}
.wleft .ph{margin-top:18px;border-radius:3px}
.wleft .ph img{height:clamp(170px,22vw,250px)}
.gsmall{list-style:none;counter-reset:term;display:grid;gap:12px;font-size:.92rem;line-height:1.5}
.gsmall li{counter-increment:term;display:grid;grid-template-columns:30px minmax(0,1fr)}
.gsmall li::before{content:counter(term,decimal-leading-zero);font-family:var(--num);font-size:.82rem;font-weight:600;line-height:1.7;color:var(--blue)}
.gtee .btn{margin-top:20px}
@media(max-width:900px){.wbody{grid-template-columns:1fr}}
@media(max-width:640px){
  .whead{display:block}
  .whead .stamp{margin-top:14px}
}

/* access: a form checklist */
.own{background:var(--blue);color:#fff;padding:clamp(60px,7vw,84px) 0}
.owngrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,52px);align-items:start}
@media(max-width:880px){.owngrid{grid-template-columns:1fr}}
.own h2{margin-top:18px;max-width:10em}
.own h2 em{font-style:normal;color:var(--lime)}
.own .ol>p{color:#fff;margin-top:14px;max-width:30em;font-size:.98rem}
.owncols{display:grid;grid-template-columns:1fr 1fr;padding:6px 0}
@media(max-width:620px){.owncols{grid-template-columns:1fr}}
.owncol{padding:16px clamp(16px,2.6vw,24px) 18px}
.owncol.no{border-left:1px dashed var(--dash)}
@media(max-width:620px){.owncol.no{border-left:0;border-top:1px dashed var(--dash)}}
.owncol h3{font-variation-settings:'wdth' 78,'wght' 800;font-size:1.28rem;line-height:1.05;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.owncol ul{list-style:none;margin-top:12px;display:grid;gap:11px}
.owncol li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:.92rem;line-height:1.4}
.owncol.no .cbx{background:var(--ink);color:#fff}
.ownfoot{margin-top:16px;padding:16px 20px;border:1.5px dashed rgba(200,255,3,.6);border-radius:6px;font-size:.92rem;color:#fff;line-height:1.55}
.ownfoot b{color:var(--lime);font-weight:600}

/* faq: numbered form questions */
.faq{background:var(--grey);color:var(--ink);padding:clamp(60px,7vw,84px) 0}
.faq .tag{color:var(--blue)}
.fgrid{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(28px,5vw,56px);align-items:start}
@media(max-width:900px){.fgrid{grid-template-columns:1fr}}
.fl{position:sticky;top:112px}
@media(max-width:900px){.fl{position:static}}
.faq h2{margin-top:18px;max-width:9em}
.flist{counter-reset:q;padding:6px clamp(16px,2.6vw,26px) 8px}
details{counter-increment:q;border-bottom:1px dashed var(--dash)}
details:last-child{border-bottom:0}
summary{--box:30px;word-spacing:.1em;cursor:pointer;list-style:none;display:grid;grid-template-columns:var(--box) minmax(0,1fr) 16px;gap:12px;align-items:center;padding:15px 0;font-family:var(--disp);font-variation-settings:'wdth' 80,'wght' 760;text-transform:uppercase;font-size:1.14rem;line-height:1.12;transition:color var(--dur) var(--ease)}
summary:hover{color:var(--blue)}
summary::-webkit-details-marker{display:none}
summary::before{content:counter(q);display:grid;place-items:center;width:var(--box);height:var(--box);font-family:var(--num);font-size:.82rem;font-weight:600;font-variation-settings:normal;color:var(--blue);border:2px solid currentColor;border-radius:3px}
details[open] summary::before{background:var(--lime);color:var(--ink);border-color:var(--ink)}
summary::after{content:"";width:16px;height:16px;background:linear-gradient(currentColor,currentColor) 50% 50%/100% 2.5px no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/2.5px 100% no-repeat}
details[open] summary::after{background:linear-gradient(currentColor,currentColor) 50% 50%/100% 2.5px no-repeat}
details p{padding:0 28px 18px 42px;font-size:.95rem;line-height:1.55;max-width:44em}
details p a{color:var(--blue);border-bottom:1px solid rgba(14,28,196,.35)}
@media(max-width:560px){details p{padding-right:0}}

/* end + footer */
.endcta{background:var(--blue);padding:clamp(60px,8vw,96px) 0 clamp(52px,7vw,76px)}
.endcta h2{max-width:13em;margin-top:18px;font-size:clamp(2.6rem,6.6vw,5.2rem);line-height:.92}
.endcta h2 em{display:block;font-style:normal;color:var(--lime)}
.endcta p{margin-top:18px;max-width:38em;color:#fff;font-size:1rem}
.endrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;align-items:center}
.es{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;font-weight:500;color:#fff;border:1.5px dashed rgba(255,255,255,.55);border-radius:6px;padding:12px 15px;transition:border-color var(--dur) var(--ease)}
.es:hover{border-color:var(--lime)}
.esdot{width:8px;height:8px;background:var(--lime);flex-shrink:0}
footer{background:var(--ink);padding-bottom:clamp(10px,1.6vw,20px);overflow:hidden}
.frow{display:flex;justify-content:space-between;gap:18px 22px;flex-wrap:wrap;align-items:center;padding:30px 0 22px}
.flinks{display:flex;gap:10px 22px;flex-wrap:wrap}
.flinks a{font-size:.9rem;color:rgba(255,255,255,.72);transition:color var(--dur) var(--ease)}
.flinks a:hover{color:var(--lime)}
.fnote{font-size:.84rem;color:rgba(255,255,255,.66);max-width:var(--wrap);margin:0 auto;padding:0 24px}
.bigmark{container-type:inline-size;margin-top:clamp(16px,2.6vw,30px);padding:0 clamp(10px,1.6vw,24px);user-select:none}
.bigmark span{display:block;font-family:var(--disp);font-variation-settings:'wdth' 70,'wght' 860;text-transform:uppercase;font-size:calc(100cqw / 4.12);line-height:.76;font-kerning:none;letter-spacing:.004em;color:var(--lime);white-space:nowrap;text-align:center}

/* hero headline mask */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .07em;margin-bottom:-.07em}
.hero h1 .w>span{display:inline-block}

/* 9:47 PM story: a work order that fills itself in */
.story{background:var(--ink);overflow:hidden}
.story .wrap{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:104px;padding-bottom:64px}
.sl{min-width:0}
.sh{margin-top:18px;max-width:9.5em}
.sclock{display:flex;align-items:baseline;gap:.08em;margin-top:30px;line-height:.8}
.sclock .hm{font-family:var(--disp);font-variation-settings:'wdth' 66,'wght' 800;font-size:clamp(4.4rem,12.5vw,10.5rem);letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums}
.sclock .ss{font-family:var(--num);font-weight:500;font-size:clamp(1.6rem,4vw,3.2rem);color:var(--lime);min-width:2.6em;font-variant-numeric:tabular-nums}
.sclock .ap{font-family:var(--num);font-size:clamp(.8rem,1.4vw,1rem);letter-spacing:.12em;color:rgba(255,255,255,.66);margin-left:.4em}
.scaps{list-style:none;margin-top:28px;display:grid;gap:14px;max-width:30em}
.scaps li{font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.45;color:rgba(255,255,255,.88)}
.sprog{display:none;height:3px;background:rgba(255,255,255,.14);margin-top:26px;max-width:30em;overflow:hidden}
.sprog i{display:block;height:100%;background:var(--lime);transform-origin:0 50%}
.story.js .scaps{position:relative;height:5.4em}
.story.js .scaps li{position:absolute;left:0;top:0;right:0}
.story.js .sprog{display:block}
.sr{min-width:0;display:grid;justify-items:center;gap:12px}
.exlabel{font-family:var(--num);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.tk{position:relative;width:min(100%,430px)}
.carbon{position:absolute;inset:0;background:var(--blue);border-radius:5px;transform:translate(10px,12px) rotate(1.4deg)}
.ticket{position:relative;color:var(--ink)}
.t-main,.t-stub{background-color:var(--paper);background-image:radial-gradient(var(--rule) 1px,transparent 1.3px);background-size:14px 14px}
.t-main{border-radius:5px 5px 0 0;padding:18px 20px 12px}
.t-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:8px}
.t-title,.t-stub .when,.phead2{word-spacing:.1em}
.t-title{font-family:var(--disp);font-variation-settings:'wdth' 68,'wght' 860;font-size:30px;line-height:1;text-transform:uppercase;letter-spacing:.005em}
.t-no{font-family:var(--num);font-size:12px;letter-spacing:.06em}
.t-biz{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0 8px;border-bottom:1px solid var(--rule)}
.t-biz b{font-weight:700;font-size:15px}
.t-biz small{font-family:var(--num);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.t-log{list-style:none}
.t-row{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:12px;padding:9px 0;border-bottom:1px dashed var(--dash)}
.t-row:last-child{border-bottom:0}
.t-meta{display:grid;gap:2px;align-content:start;padding-top:2px}
.t-lab{font-family:var(--num);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.t-time{font-family:var(--num);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.t-val{min-height:1.45em;line-height:1.45;font-size:14px;overflow-wrap:anywhere}
.t-val.sys{font-family:var(--num);font-size:12.5px;line-height:1.55}
.t-val.cust{font-style:italic;font-weight:500;font-size:15px}
.cstat{position:relative;display:block}
.cstat .cs-no{position:absolute;left:0;top:0}
.story:not(.js) .cs-call{display:none}
.story:not(.js) .cstat .cs-no{position:static}
.ticket .stamp{position:absolute;pointer-events:none}
.s-missed{right:4px;top:50%;margin-top:-17px;font-size:18px;color:var(--ink);transform:rotate(-8deg);opacity:.88;mix-blend-mode:multiply}
.t-stub{position:relative;border-radius:0 0 5px 5px;padding:16px 20px 18px;display:grid;gap:4px;border-top:2px dashed rgba(19,19,22,.38)}
.t-stub::before,.t-stub::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--ink)}
.t-stub::before{left:-9px}
.t-stub::after{right:-9px}
.t-stub .when{font-family:var(--disp);font-variation-settings:'wdth' 72,'wght' 820;font-size:26px;line-height:1;text-transform:uppercase}
.t-stub .what{font-size:14px}
.s-booked{right:14px;top:-30px;font-size:24px;padding:9px 14px 8px;background:var(--lime);color:var(--ink);transform:rotate(6deg);z-index:2}

@media(max-width:879px){
  .story .wrap{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:88px;padding-bottom:18px;align-content:center}
  .story .tag{display:none}
  .sh{font-size:clamp(1.6rem,7.6vw,2.2rem);margin-top:0}
  .sclock{margin-top:10px}
  .sclock .hm{font-size:clamp(3rem,14vw,4.4rem)}
  .sclock .ss{font-size:clamp(1.3rem,5.4vw,1.7rem)}
  .scaps{margin-top:10px}
  .story.js .scaps{height:4.5em}
  .scaps li{font-size:.95rem}
  .sprog{margin-top:10px}
  .sr{gap:6px}
  .exlabel{font-size:10.5px}
  .tk{width:min(100%,380px)}
  .t-main{padding:12px 14px 8px}
  .t-title{font-size:24px}
  .t-biz{padding:6px 0}
  .t-row{grid-template-columns:68px minmax(0,1fr);padding:6px 0;column-gap:8px}
  .t-lab{letter-spacing:.02em}
  .t-val{font-size:13px}
  .t-val.sys{font-size:11.5px;line-height:1.45}
  .t-val.cust{font-size:14px}
  .s-missed{font-size:15px}
  .t-stub{padding:12px 14px 14px}
  .t-stub .when{font-size:21px}
  .t-stub .what{font-size:13px}
  .s-booked{font-size:19px;right:10px;top:-26px}
}
@media(max-width:879px) and (max-height:780px){.tk{zoom:.84}.sr{gap:2px}.story .wrap{padding-top:80px;padding-bottom:10px;gap:8px}}
@media(max-width:879px) and (max-height:700px){.tk{zoom:.76}.sh{font-size:1.5rem}.sclock{margin-top:6px}.scaps{margin-top:6px}.sprog{margin-top:4px}.exlabel{display:none}}

/* reservation dialog: an order form */
dialog.res{position:fixed;border:0;padding:0;color:var(--ink);width:min(560px,calc(100% - 32px));max-height:calc(100% - 32px);margin:auto;overflow:auto}
dialog.res::backdrop{background:rgba(8,8,10,.78)}
.rhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:0 clamp(18px,4vw,26px);padding:22px 0 12px;border-bottom:2px solid var(--ink)}
.rhead h3{font-variation-settings:'wdth' 68,'wght' 860;font-size:clamp(1.9rem,6vw,2.4rem);line-height:.98}
.rhead p{font-size:.92rem;line-height:1.45;margin-top:8px}
.rclose{width:38px;height:38px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:3px;background:transparent;color:var(--ink);line-height:1;cursor:pointer;flex-shrink:0;margin-right:10px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.rclose svg{width:16px;height:16px}
.rclose:hover{background:var(--ink);color:#fff}
.rform{padding:14px clamp(18px,4vw,26px) 22px;display:grid;gap:12px}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
@media(max-width:520px){.r2{grid-template-columns:1fr}}
.rf label{display:block;font-family:var(--num);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.rf label i{font-style:normal;text-transform:none;letter-spacing:0;color:var(--muted)}
.rf input,.rf select{width:100%;background:rgba(255,255,255,.72);color:var(--ink);border:0;border-bottom:2px solid var(--ink);border-radius:0;padding:9px 8px;font-family:var(--body);font-size:1rem;outline:0;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.rf input:focus,.rf select:focus{border-bottom-color:var(--blue);background:#fff}
.rcheck{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;line-height:1.45}
.rcheck input{margin-top:2px;accent-color:var(--blue);width:18px;height:18px;flex-shrink:0}
.rfine{font-size:.84rem;color:var(--muted)}
.rfine a{color:var(--blue);border-bottom:1px solid rgba(14,28,196,.35)}
.rdone{padding:18px clamp(18px,4vw,26px) 28px}
.rdone p{font-size:1rem;line-height:1.55}
.rdone p b{color:var(--blue)}
.rerr{font-size:.88rem;font-weight:600;color:#B3261E}
.sheet .btn-lime{border-color:var(--ink)}

/* Spanish pages: capitals carry accents, so display type needs more room between lines */
:lang(es) h2{line-height:1.02}
:lang(es) main h1{line-height:1}
@media(max-width:880px){:lang(es) .s-missed{font-size:13px;right:0}}
@media(max-width:640px){
  :lang(es) .chip{width:4.1em}
  :lang(es) .chip .stamp{top:auto;bottom:-.12em}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rv{opacity:1;transform:none}
  .marq-track{animation:none}
}