/* Express Print & Apparel: white tee ground, one ink-black press, five logo inks, slanted plates. */
:root{
  --tee:#FFFFFF;
  --cloth:#F1F2F6;
  --cloth-2:#E6E8EF;
  --rule:#D9DBE4;
  --ink:#0A0A0F;
  --ink-2:#14141C;
  --ink-line:#2C2C3B;
  --ink-rule:#4A4C5E;
  --text:#0A0A0F;
  --text-2:#2B2D3A;
  --muted:#555869;
  --on-ink:#F4F5FA;
  --on-ink-muted:#A7AABB;
  --magenta:#FF2E93;
  --orange:#FF7A1C;
  --yellow:#FFC41F;
  --cyan:#1EC8FF;
  --blue:#3D6BFF;
  --link:#2B55E8;
  --ok:#3DDC97;
  --ok-text:#0B7D4D;
  --bad:#FF5A6A;
  --bad-text:#C4162F;
  --focus:var(--link);
  --skew:-12deg;
  --ease:cubic-bezier(.16,1,.3,1);
  --f-display:"Saira","Arial Narrow",sans-serif;
  --f-body:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--ink) var(--cloth)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--tee);color:var(--text);font:16px/1.45 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;caret-color:var(--magenta);accent-color:var(--ink)}
main{flex:1 0 auto}
h1,h2,h3,p{margin:0}
h1,h2{text-wrap:balance}
[hidden]{display:none!important}
::selection{background:var(--magenta);color:var(--ink)}
a{color:var(--link);text-underline-offset:.22em;text-decoration-thickness:.09em}
a:hover{color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--yellow);color:var(--ink);padding:8px 14px;border-radius:6px;z-index:20;font-weight:700}
.skip:focus{top:8px}
.mono{font-family:var(--f-mono)}
.small{font-size:13.5px}
.muted{color:var(--muted)}
.center{text-align:center}
.h2{font:italic 800 22px/1.1 var(--f-display);font-stretch:112%;text-transform:uppercase}
.h2-lg{font-size:26px}

/* The plate: a bar leaning at the logo's angle. The shape is a pseudo-element, so the label stays upright. */
.plate{position:relative;isolation:isolate;--plate-bg:var(--ink);--plate-bd:transparent;--plate-r:8px;--plate-pad:6px}
.plate::before{content:"";position:absolute;inset:0 var(--plate-pad);z-index:-1;transform:skewX(var(--skew));border-radius:var(--plate-r);background:var(--plate-bg);box-shadow:inset 0 0 0 2px var(--plate-bd);transition:filter .2s var(--ease)}

/* The five inks, as a printer's control strip */
.inks{display:flex;height:10px}
.inks i{flex:1;background:var(--magenta)}
.inks i:nth-child(2){background:var(--orange)}
.inks i:nth-child(3){background:var(--yellow)}
.inks i:nth-child(4){background:var(--cyan)}
.inks i:nth-child(5){background:var(--blue)}
.inks i:nth-child(6){background:var(--ink)}
.inks i:nth-child(7){background:var(--cloth)}
.inks.five{height:8px}

/* Strip and header */
.strip{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 24px;padding:9px 40px;background:var(--ink);color:var(--on-ink);--focus:var(--cyan)}
.tagline{font:italic 700 12px/1.3 var(--f-display);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.pipe-m,.pipe-c{padding:0 6px}
.pipe-m{color:var(--magenta)}
.pipe-c{color:var(--cyan)}
.strip-fact{margin-left:auto;font-size:13px;line-height:1.3;color:var(--on-ink-muted)}
/* The way to your orders sits in the strip, so the header keeps its width for the nav and the steps. */
.strip-link{font-size:13px;font-weight:600;line-height:1.3;color:var(--on-ink);text-underline-offset:.26em}
.strip-link:hover{color:var(--cyan)}
.site-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px;padding:10px 40px 4px}
.brand{display:block;line-height:0}
.brand img{height:84px;width:auto}
.nav{display:flex;flex-wrap:wrap;gap:6px 28px;font:700 14px/1 var(--f-display);font-stretch:112%;letter-spacing:.06em;text-transform:uppercase}
.nav a{color:var(--muted);text-decoration:none;padding:8px 0;border-bottom:4px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.nav a:hover{color:var(--ink);border-bottom-color:var(--rule)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--magenta)}
.steps{list-style:none;margin:0 0 0 auto;padding:0;display:flex;flex-wrap:wrap;gap:2px;font:italic 700 13px/1 var(--f-display);font-stretch:112%;letter-spacing:.04em;text-transform:uppercase}
.steps li{display:flex;align-items:center;gap:8px;padding:11px 20px;color:var(--muted);--plate-bg:transparent;--plate-bd:var(--rule);--plate-r:6px}
.steps li.done{color:var(--ink);--plate-bd:var(--ink)}
.steps li.done .step-n{font-size:0;display:inline-flex;width:14px;height:12px;align-items:center;justify-content:center}
.steps li.done .step-n::after{content:"";width:11px;height:6px;border-left:3px solid var(--ok-text);border-bottom:3px solid var(--ok-text);transform:translateY(-2px) rotate(-45deg)}
.steps li[aria-current="step"]{color:#fff;--plate-bg:var(--ink);--plate-bd:var(--ink)}
.steps li[aria-current="step"] .step-n{color:var(--magenta)}
.head-total{display:inline-flex;align-items:baseline;gap:10px;padding:11px 26px;color:#fff;font:italic 600 12px/1 var(--f-display);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;--plate-r:10px}
.head-total .ht-label{color:var(--on-ink-muted)}
.head-total strong{font-weight:800;font-size:20px;letter-spacing:0;font-variant-numeric:tabular-nums}

/* Headline */
.hero{padding:8px 0 16px 40px}
h1{font:italic 900 clamp(38px,5.4vw,78px)/.94 var(--f-display);font-stretch:125%;letter-spacing:-.015em;text-transform:uppercase}
.hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 48px;margin-top:16px}
.lede{flex:1 1 520px;max-width:66ch;font-size:18px;line-height:1.45;color:var(--text-2)}
.back{display:inline-flex;align-items:center;gap:8px;min-height:36px;margin-bottom:2px;font-weight:600;font-size:15px;background:none;border:0;padding:0;cursor:pointer}
.back:hover{text-decoration:underline;text-underline-offset:.22em}

/* Speed streaks, from the logo: bars trail to the right edge, droplets at the tips */
.streaks{flex:999 1 320px;display:grid;justify-items:end;gap:7px;min-width:0}
.streaks i{display:block;position:relative;width:88%;height:9px;border-radius:9px 0 0 9px;background:var(--magenta);transform-origin:right;animation:streak .7s var(--ease) backwards}
.streaks i::before,.streaks i::after{content:"";position:absolute;top:0;height:100%;border-radius:9px;background:inherit}
.streaks i::after{right:calc(100% + 10px);width:22px}
.streaks i::before{right:calc(100% + 42px);aspect-ratio:1}
.streaks i:nth-child(2){width:61%;height:7px;background:var(--orange);animation-delay:.04s}
.streaks i:nth-child(2)::after{display:none}
.streaks i:nth-child(2)::before{right:calc(100% + 10px)}
.streaks i:nth-child(3){width:76%;background:var(--yellow);animation-delay:.08s}
.streaks i:nth-child(3)::after{width:40px}
.streaks i:nth-child(3)::before{right:calc(100% + 60px)}
.streaks i:nth-child(4){width:44%;height:6px;background:var(--cyan);animation-delay:.12s}
.streaks i:nth-child(4)::after{display:none}
.streaks i:nth-child(4)::before{right:calc(100% + 10px)}
.streaks i:nth-child(5){width:68%;height:8px;background:var(--blue);animation-delay:.16s}
.streaks i:nth-child(5)::after{width:16px}
.streaks i:nth-child(5)::before{right:calc(100% + 36px)}
@keyframes streak{from{transform:scaleX(0)}}

/* Work area: your files on white, the press on ink */
.work{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);padding-left:40px}
.col-designs{min-width:0;padding:0 40px 48px 0}
.press{min-width:0;background:var(--ink);color:var(--on-ink);container-type:inline-size;--focus:var(--cyan);scrollbar-color:var(--ink-rule) var(--ink)}
.press-in{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:28px 26px;padding:20px 40px 36px 32px}
.col-sheet{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
@container (min-width:800px){
  /* Film and docket travel with the page as one block. When the block is taller than the window it pins by its
     bottom edge instead of its top, so the price and the Review plate stay in view (--press-h is set in app.js). */
  .press-in{grid-template-columns:minmax(0,1fr) minmax(290px,320px);position:sticky;top:min(0px,calc(100vh - var(--press-h,0px)))}
  .sheet-scroll{max-height:calc(100vh - 200px)}
}
.tabs{display:none}

/* Drop zone */
.drop{position:relative;display:grid;justify-items:start;gap:8px;padding:20px 22px;border:2px dashed var(--ink);border-radius:10px;background:var(--cloth);cursor:pointer;transition:background-color .2s var(--ease)}
.drop:hover{background:var(--cloth-2)}
.drop.is-over{background:var(--yellow);border-style:solid}
.drop:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.drop.is-disabled{pointer-events:none;opacity:.55}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop-title{display:flex;align-items:center;gap:12px;font:italic 800 24px/1.1 var(--f-display);font-stretch:112%;text-transform:uppercase}
.for-touch{display:none}
@media (hover:none){.for-mouse{display:none}.for-touch{display:inline}}
.drop-sub{font-size:15px;color:var(--text-2)}
.drop-btn{margin-top:6px;padding:12px 26px;color:#fff;font:italic 800 14px/1 var(--f-display);font-stretch:112%;letter-spacing:.05em;text-transform:uppercase}
.intake-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 20px;margin-top:10px}
.status:empty{display:none}
.status{color:var(--muted)}
.text-btn{min-height:40px;font-size:15px;font-weight:600;color:var(--link);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:.26em}
.text-btn:hover{color:var(--ink)}
.list-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.list-empty{padding:16px 0;color:var(--muted)}

/* Design rows */
.design-list{list-style:none;margin:0;padding:0}
.card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);transition:background-color .2s var(--ease)}
.card.is-selected{margin:0 -10px;padding:14px 10px;border-radius:8px;background:var(--cloth);border-bottom-color:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
.thumb{width:64px;height:64px;padding:5px;border:0;border-radius:6px;cursor:pointer;display:grid;place-items:center;overflow:hidden;background-color:#F4F6FA;background-image:conic-gradient(#DADFEA 25%,transparent 0 50%,#DADFEA 0 75%,transparent 0);background-size:12px 12px}
.card.is-selected .thumb{box-shadow:0 0 0 3px var(--cyan)}
.thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.c-main{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.c-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.c-name{font:700 13.5px/1.35 var(--f-mono);overflow-wrap:anywhere;min-width:0}
.ex-tag{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:3px;background:var(--yellow);font:700 11px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;vertical-align:1px}
.icon-btn{flex:none;width:32px;height:32px;margin:-6px -6px 0 0;border:0;border-radius:6px;background:none;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:var(--cloth-2);color:var(--bad-text)}
.c-meta{font:11.5px/1.4 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.c-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.mini{display:grid;gap:3px;font-size:12px;font-weight:600;color:var(--muted)}
.unit,.stepper{display:inline-flex;align-items:center;height:38px;border:1.5px solid var(--ink);border-radius:5px;background:#fff;color:var(--ink)}
.unit:focus-within,.stepper:focus-within{outline:3px solid var(--focus);outline-offset:1px}
.unit input,.stepper input{height:100%;border:0;outline:0;background:none;font:13.5px var(--f-mono);-moz-appearance:textfield;appearance:textfield}
.unit input{width:46px;padding:0 0 0 8px}
.unit span{padding:0 8px 0 2px;font:11px var(--f-mono);color:var(--muted)}
.link-icon{padding-bottom:10px;color:var(--muted)}
.stepper button{width:30px;height:100%;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.stepper button:hover{background:var(--cloth-2)}
.stepper input{width:38px;text-align:center;font-weight:700}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.preset,.fill-row select{height:38px;border:1.5px solid var(--ink);border-radius:5px;background:#fff;padding:0 6px;font:600 13px var(--f-body);max-width:150px}
.c-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.chips{display:flex;flex-wrap:wrap;gap:6px 4px}
.chip{position:relative;isolation:isolate;padding:5px 12px;font:italic 700 11.5px/1 var(--f-display);font-stretch:112%;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.chip::before{content:"";position:absolute;inset:0 3px;z-index:-1;transform:skewX(var(--skew));border-radius:4px;background:var(--cloth-2)}
.chip.ok::before{background:var(--ok)}
.chip.check::before{background:var(--orange)}
.chip.bad::before{background:var(--bad)}
.c-notes{display:grid;gap:4px;font-size:13.5px;line-height:1.4;color:var(--text-2)}
.c-notes:empty,.c-actions:empty{display:none}
.c-actions{display:flex;flex-wrap:wrap;gap:8px}
.solid-btn,.ghost-btn{min-height:36px;padding:0 14px;border-radius:5px;font-weight:700;font-size:13.5px;cursor:pointer}
.solid-btn{border:1.5px solid var(--ink);background:var(--ink);color:#fff}
.solid-btn:hover{background:var(--text-2)}
.ghost-btn{border:1.5px solid var(--ink);background:#fff}
.ghost-btn:hover{background:var(--cloth-2)}
.working{font-size:13.5px;color:var(--muted)}

/* Sheet */
.sheet-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.sheet-title{display:grid;gap:2px}
.sheet-title .mono{font-size:12px;color:var(--on-ink-muted)}
.sheet-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14px}
.tool{display:inline-flex;align-items:center;gap:7px;min-height:36px;color:var(--on-ink)}
.tool select{height:36px;border:1.5px solid var(--ink-rule);border-radius:5px;background:var(--ink-2);color:var(--on-ink);padding:0 8px;font:13px var(--f-mono)}
.switch{position:relative;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.track{display:inline-flex;width:38px;height:20px;padding:3px;border-radius:6px;background:var(--ink-rule);transform:skewX(var(--skew));transition:background-color .2s var(--ease)}
.track .knob{width:16px;height:14px;border-radius:3px;background:var(--on-ink);transition:transform .25s var(--ease),background-color .2s var(--ease)}
.switch input:checked + .track{background:var(--cyan)}
.switch input:checked + .track .knob{transform:translateX(16px);background:var(--ink)}
.switch input:focus-visible + .track{outline:3px solid var(--focus);outline-offset:2px}
.seg{display:inline-flex;gap:2px;padding:2px;border:1.5px solid var(--ink-rule);border-radius:5px;font-size:13px;font-weight:600}
.seg button{height:30px;padding:0 10px;border:0;border-radius:3px;background:none;color:var(--on-ink);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--on-ink);color:var(--ink)}
.seg button:focus-visible{outline-offset:1px}
.sheet-scroll{overflow-y:auto;overflow-x:hidden;min-height:220px}
.stage{position:relative;width:max-content;max-width:100%;margin:0 auto}
#sheet{display:block;cursor:pointer}
.marks{position:absolute;inset:0;pointer-events:none}
.cut{position:absolute;left:8px;right:0;display:flex;align-items:center;transform:translateY(-50%);transition:top .38s var(--ease)}
.cut svg{flex:none;color:var(--yellow);background:var(--ink)}
.cut .dash{flex:1 1 auto;height:0;border-top:2px dashed var(--yellow)}
.flag{flex:none;padding:6px 16px 5px;color:var(--ink);line-height:1.05;--plate-bg:var(--yellow);--plate-r:7px;--plate-pad:3px}
.flag .len{display:block;font:700 11px/1.1 var(--f-mono);white-space:nowrap}
.flag .amt{display:block;font:italic 900 21px/1.05 var(--f-display);font-stretch:112%;font-variant-numeric:tabular-nums}
.rung{position:absolute;display:flex;align-items:center;gap:6px;transform:translateY(-50%);transition:top .38s var(--ease);font:11px/1 var(--f-mono);color:var(--on-ink-muted);white-space:nowrap}
.rung::before{content:"";width:8px;height:1px;background:currentColor}
.rung.next{color:#8E91A3}
.sheet-foot{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--ink-line);font-size:13.5px}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--on-ink-muted)}
.legend li{display:inline-flex;align-items:center;gap:7px}
.sw{width:12px;height:12px;display:inline-block}
.sw-sel{border:2px solid var(--cyan)}
.sw-bad{border:2px dashed var(--bad)}
.sw-spare{background-image:repeating-linear-gradient(135deg,var(--on-ink-muted) 0 2px,transparent 2px 5px)}

/* The docket */
.docket{background:#fff;color:var(--ink);border-radius:4px;overflow:hidden;--focus:var(--link)}
.docket-in{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:18px 22px 22px}
.verdict{padding:10px 20px;font:italic 800 15px/1.2 var(--f-display);font-stretch:112%;text-transform:uppercase;--plate-bg:var(--ok);--plate-r:7px;--plate-pad:4px}
.verdict[data-state="check"]{--plate-bg:var(--orange)}
.verdict[data-state="fix"]{--plate-bg:var(--bad)}
.verdict[data-state="empty"]{--plate-bg:var(--cloth);color:var(--text-2)}
.issues{list-style:none;margin:-4px 0 0;padding:0;display:grid;gap:8px}
.issues:empty{display:none}
.issues button{font-size:13.5px;line-height:1.4;text-align:left;background:none;border:0;padding:0;cursor:pointer;display:flex;gap:9px;align-items:baseline;overflow-wrap:anywhere}
.issues button:hover .nm{text-decoration:underline;text-underline-offset:.22em}
.issues .nm{font:700 12.5px var(--f-mono)}
.dot{flex:none;width:9px;height:9px;transform:translateY(-1px)}
.dot.check{background:var(--orange);border-radius:50%}
.dot.bad{background:var(--bad)}
.rows{margin:0;display:grid;gap:7px;font-size:14px}
.rows div{display:flex;align-items:baseline;gap:8px}
.rows div::before{content:"";order:2;flex:1 1 auto;border-bottom:1px dotted #A7AABB}
.rows dt{order:1;color:var(--muted)}
.rows dd{order:3;margin:0;font:700 14px var(--f-mono);font-variant-numeric:tabular-nums}
.rows.on-ink dt{color:var(--on-ink-muted)}
.rows.on-ink div::before{border-bottom-color:var(--ink-rule)}
.meter{display:flex;align-items:center;gap:5px;margin-top:-6px}
.meter span{height:10px;width:0;border-radius:10px;background:var(--magenta);transition:width .5s var(--ease)}
.meter i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--magenta)}
.meter::after{content:"";flex:1 1 auto;height:2px;background:var(--rule)}
.fill{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-top:16px;border-top:1px solid var(--rule)}
.fill p{line-height:1.45;color:var(--text-2)}
.fill-row{display:flex;gap:8px}
.fill-row select{flex:1 1 auto;min-width:0;max-width:none;height:40px;font:12.5px var(--f-mono)}
.outline-btn{flex:none;min-height:40px;padding:0 14px;border:1.5px solid var(--ink);border-radius:5px;background:#fff;color:var(--ink);font-weight:700;font-size:14px;cursor:pointer}
.outline-btn:hover{background:var(--cloth-2)}
.outline-btn.on-ink{border-color:var(--on-ink);background:none;color:var(--on-ink)}
.outline-btn.on-ink:hover{background:var(--ink-line)}
.price-box{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding-top:14px;border-top:2px dashed var(--ink)}
.price{font:italic 900 62px/.95 var(--f-display);font-stretch:125%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price[data-len="7"]{font-size:52px}
.price[data-len="8"]{font-size:46px}
.price[data-len="9"],.price[data-len="10"],.price[data-len="11"]{font-size:38px}
.price.none{font-size:28px;line-height:1.1;letter-spacing:0;color:var(--muted)}
.price-sub{margin-top:4px;font-size:14px;color:var(--text-2)}
.breakdown-box{margin-top:2px;font-size:14px}
.breakdown-box summary{cursor:pointer;font-weight:700;padding:4px 0}
.breakdown{width:100%;border-collapse:collapse;margin-top:6px;font:13px var(--f-mono);font-variant-numeric:tabular-nums}
.breakdown td{padding:7px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.breakdown td:last-child{text-align:right;padding-left:12px;white-space:nowrap}
.breakdown .sub{display:block;color:var(--muted);font-size:11.5px}
.breakdown tr.total td{border-bottom:0;font-weight:700}
#tier-hint{display:block;margin-top:6px}
#tier-hint:empty{display:none}
.ack{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:6px;background:var(--cloth);font-size:13.5px;line-height:1.4;cursor:pointer}
.ack input{flex:none;width:20px;height:20px;margin:0}
.cta{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:58px;padding:0 26px;border:0;background:none;color:var(--ink);font:italic 900 19px/1 var(--f-display);font-stretch:112%;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;--plate-bg:linear-gradient(90deg,var(--magenta),var(--orange));--plate-r:10px;--plate-pad:7px}
.cta svg{transition:transform .25s var(--ease)}
.cta:not(:disabled):hover::before{filter:brightness(1.08)}
.cta:not(:disabled):hover svg{transform:translateX(5px)}
.cta:not(:disabled):active{transform:translateY(1px)}
.cta:disabled{color:var(--muted);cursor:not-allowed;--plate-bg:var(--cloth-2)}
.cta-note:empty,#pay-note-build:empty,#pay-note:empty{display:none}
.cta-note{text-align:center;color:var(--text-2);font-weight:600}
.downloads{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-size:13.5px;color:var(--muted)}
.link-btn{font-weight:600;background:none;border:0;padding:0;color:var(--link);cursor:pointer;text-decoration:underline;text-underline-offset:.22em}
.link-btn:hover{color:var(--ink)}
.link-btn:disabled{color:var(--muted);cursor:not-allowed;text-decoration:none}
.progress{display:grid;gap:6px}
.bar{height:8px;border-radius:8px;background:var(--cloth-2);overflow:hidden}
.bar span{display:block;height:100%;width:0;border-radius:8px;background:var(--magenta);transition:width .2s linear}

/* Review */
.work.review{grid-template-columns:minmax(0,1fr) minmax(380px,520px)}
.review-main{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:44px;min-width:0;padding:0 56px 56px 0}
.review-main .list-head{margin-top:0}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;align-items:flex-start;gap:14px;padding:13px 0;border-bottom:1px solid var(--rule)}
.ck{position:relative;isolation:isolate;flex:none;width:30px;height:22px;margin-top:2px;display:inline-flex;align-items:center;justify-content:center;font:900 14px/1 var(--f-display);color:var(--ink)}
.ck::before{content:"";position:absolute;inset:0 2px;z-index:-1;transform:skewX(var(--skew));border-radius:4px;background:var(--ok)}
.ck.check::before{background:var(--orange)}
.ck.bad::before{background:var(--bad)}
.ck-body{flex:1 1 auto;min-width:0}
.ck-body .nm{font:700 14.5px var(--f-mono);overflow-wrap:anywhere}
.ck-body .d{display:block;font-size:15px;color:var(--text-2)}
.checklist .link-btn{min-height:32px;font-size:15px;font-weight:700}
.acct-line{margin-top:14px;font-size:15px;color:var(--text-2)}
.acct-line:empty,.done-acct:empty{display:none}
.order-form form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 24px;margin-top:20px}
.field{display:grid;align-content:start;gap:6px;font-size:15px;font-weight:600}
.field-error:empty{display:none}
.field-error{font-size:14.5px;font-weight:700;color:var(--bad-text)}
.field.wide,.delivery{grid-column:1 / -1}
.field input,.field textarea{width:100%;min-height:48px;border:1.5px solid var(--ink);border-radius:6px;background:#fff;padding:0 14px;font:17px var(--f-body)}
.field textarea{padding:12px 14px;resize:vertical;min-height:92px}
.field input[aria-invalid="true"]{border-color:var(--bad-text);border-width:2.5px}
.delivery{margin:6px 0 0;padding:0;border:0;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 24px}
.delivery legend{padding:0;margin-bottom:8px;font-size:15px;font-weight:600}
.opt-card{display:flex;align-items:center;gap:14px;padding:14px 17px;border:1.5px solid #A7AABB;border-radius:8px;cursor:pointer;transition:background-color .2s var(--ease)}
.opt-card:hover{background:var(--cloth)}
.opt-card:has(input:checked){padding:13px 16px;border:2.5px solid var(--ink);background:var(--cloth)}
.opt-card input{flex:none;width:20px;height:20px;margin:0}
.opt-card .t{flex:1 1 auto;min-width:0}
.opt-card .t strong{display:block;font-size:17px}
.opt-card .t span{display:block;font-size:14px;color:var(--muted)}
.opt-card .p{font:700 14px var(--f-mono)}
.press-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:26px 40px 44px 36px}
.summary{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
#thumb{display:block;width:100%;height:auto;max-width:460px;border-radius:3px 3px 0 0}
.totals{margin:0;display:grid;gap:8px;font-size:15px}
.totals div{display:flex;align-items:baseline;gap:8px}
.totals div::before{content:"";order:2;flex:1 1 auto;border-bottom:1px dotted #A7AABB}
.totals dt{order:1}
.totals dd{order:3;margin:0;font:700 15px var(--f-mono);font-variant-numeric:tabular-nums}
.totals .grand{align-items:flex-end;justify-content:space-between;margin-top:6px;padding-top:14px;border-top:2px dashed var(--ink)}
.totals .grand::before{display:none}
.totals .grand dt{font-weight:700;line-height:1.2;padding-bottom:6px;max-width:4.1em}
.totals .grand dd{font:italic 900 56px/.95 var(--f-display);font-stretch:125%;letter-spacing:-.02em}
.form-error:empty{display:none}
.form-error{padding:11px 14px;border-radius:6px;background:#FFE7EA;color:var(--bad-text);font-weight:700;font-size:15px}

/* Order received */
.done{display:grid;justify-items:start;gap:18px;padding:24px 0 88px 40px}
.done .streaks{justify-self:stretch;margin:-2px 0 8px}
.done-id{padding:9px 22px;font:700 20px/1.2 var(--f-mono);--plate-bg:var(--yellow);--plate-pad:5px}
.done .lede{flex:none;max-width:640px;margin-right:40px}
.done-pay:empty{display:none}
.done-pay{max-width:640px;margin-right:40px;font-weight:600}
.done-acct{max-width:640px;margin-right:40px}
.done .cta{width:auto;margin-top:10px}

/* File setup */
.how{display:flex;flex-wrap:wrap;gap:24px 56px;padding:64px 40px 72px}
.how h2{flex:1 1 300px;max-width:380px;font:italic 900 44px/.98 var(--f-display);font-stretch:125%;letter-spacing:-.01em;text-transform:uppercase}
.how ul{flex:999 1 560px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px 40px;line-height:1.5}
.how li{position:relative;padding-left:24px;max-width:62ch}
.how li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;background:var(--magenta)}
.how li:nth-child(2)::before{background:var(--orange)}
.how li:nth-child(3)::before{background:var(--yellow)}
.how li:nth-child(4)::before{background:var(--cyan)}
.how li:nth-child(5)::before{background:var(--blue)}
.how li:nth-child(6)::before{background:var(--ink)}

/* Footer */
.site-foot{background:var(--ink);color:var(--on-ink);--focus:var(--cyan)}
.site-foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding:26px 40px;font:italic 700 13px/1.3 var(--f-display);font-stretch:112%;letter-spacing:.14em;text-transform:uppercase}
.foot-link{color:var(--on-ink);text-underline-offset:.3em}
.foot-link:hover{color:var(--cyan)}

/* Order bar (phones) */
.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--ink);color:var(--on-ink);--focus:var(--cyan)}
.bottom-bar .inks{height:5px}
.bb-in{display:flex;align-items:center;gap:12px;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px))}
.bb-price{flex:1 1 auto;display:grid;gap:4px;min-width:0}
.bb-price strong{font:italic 900 30px/1 var(--f-display);font-stretch:125%;font-variant-numeric:tabular-nums}
.bb-price span{font-size:11px;white-space:nowrap;color:var(--on-ink-muted)}
.small-cta{width:auto;min-height:50px;font-size:17px;padding:0 26px}
.bottom-bar .cta:disabled{color:var(--on-ink-muted);--plate-bg:var(--ink-line)}

/* Below this the tagline, the fact and the link no longer fit on one line. The footer carries the link too. */
@media (max-width:1039px){.strip-link{display:none}}
@media (max-width:1180px){
  .steps{display:none}
  .head-total{margin-left:auto}
}
@media (max-width:959px){
  .strip{padding:7px 16px}
  .tagline{font-size:11px;font-stretch:100%;letter-spacing:.05em}
  .pipe-m,.pipe-c{padding:0 3px}
  .strip-fact{display:none}
  .site-head{padding:10px 16px 4px;gap:10px 16px}
  .brand img{height:62px}
  .nav{display:none}
  .head-total{padding:9px 20px}
  .head-total strong{font-size:18px}
  .hero{padding:6px 0 0 16px}
  .hero-row{gap:12px;margin-top:12px}
  .hero-row .streaks{order:-1;flex:1 1 100%;gap:5px}
  .streaks i{height:7px}
  .streaks i:nth-child(n+4){display:none}
  .streaks i:nth-child(3){background:var(--cyan)}
  .streaks i:nth-child(2){background:var(--yellow)}
  .lede{flex-basis:100%;margin-right:16px;font-size:15.5px}
  .tabs{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin-top:8px;padding:8px 16px;background:var(--tee)}
  .tabs button{min-height:46px;border:0;background:none;color:var(--ink);cursor:pointer;font:italic 800 15px/1 var(--f-display);font-stretch:112%;text-transform:uppercase;--plate-bg:#fff;--plate-bd:var(--ink)}
  .tabs button[aria-pressed="true"]{color:#fff;--plate-bg:var(--ink)}
  .tabs .mono{margin-left:4px;font:500 12px var(--f-mono);font-style:normal;text-transform:none;opacity:.75}
  .work,.work.review{grid-template-columns:minmax(0,1fr);padding-left:0}
  .col-designs{padding:8px 16px 28px}
  #cols{margin-top:0}
  #cols[data-tab="designs"] .press{display:none}
  #cols[data-tab="sheet"] .col-designs{display:none}
  .press-in{padding:16px 16px 32px}
  .press-stack{padding:20px 16px 32px}
  .sheet-scroll{max-height:none}
  .tool select{height:44px}
  .seg button{height:44px}
  .icon-btn{width:44px;height:44px;margin:-10px -10px 0 0}
  .solid-btn,.ghost-btn,.text-btn,.back,.outline-btn{min-height:44px}
  .checklist .link-btn{min-height:44px;padding:0 6px}
  .downloads .link-btn{min-height:44px}
  .unit,.stepper,.preset{height:44px}
  .stepper button{width:38px}
  .review-main{padding:20px 16px 36px;gap:36px}
  .done{padding:12px 0 56px 16px}
  .done .lede,.done-pay,.done-acct{margin-right:16px}
  .how{padding:44px 16px 48px}
  .how h2{font-size:34px}
  .site-foot-in{padding:22px 16px 110px;font-size:11px;letter-spacing:.08em}
  .foot-link{display:inline-flex;align-items:center;min-height:44px}
}
@media (min-width:1260px){.bottom-bar{display:none!important}}
@media (max-width:1259px){.site-foot-in{padding-bottom:110px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}