/* ============================================================================
   PrintKit — printkit.tech
   ONE stylesheet for every page. Before this, all 22 pages carried their own
   inline <style>, which is why the site drifted apart; a change had to be made
   twenty-two times. Change a token here and the whole site moves.

   Archetypes:
     .t-feature  photography leads   — index, builders, how-it-works,
                                       platforms, store-setup
     .t-docs     no photography      — help/*
     .t-trust    one column, no art  — security, privacy, terms
     .t-slim     minimal             — support, referral, 404
   ============================================================================ */

@import url("/assets/pk/fonts/pk-fonts.css");

:root{
  --stock:#15130e;      /* warm near-black, biased to the photography */
  --stock-2:#1d1a14;
  --stock-3:#100e0a;
  --sheet:#ece6d8;      /* the printed insert */
  --bone:#f3eee2;
  --bone-2:#c3bba8;
  --bone-3:#8b8371;
  --lime:#a3e635;
  --lime-deep:#7fbe12;
  --lime-ink:#41660a;
  --rule:rgba(243,238,226,.18);
  --rule-2:rgba(243,238,226,.09);
  --ink:#191710;

  --display:"Archivo Black", Impact, system-ui, sans-serif;
  --read:"Roboto Slab", Rockwell, Georgia, serif;
  --label:"Oswald", "Arial Narrow", Impact, sans-serif;

  --gut:clamp(18px,4vw,64px);
  --hold:1180px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  /* NOTE: colour and image are separate properties on purpose — the
     `background:` shorthand would wipe the gradients. */
  background-color:var(--stock);
  background-image:
    radial-gradient(1200px 640px at 78% -12%, rgba(255,252,240,.030), transparent 58%),
    radial-gradient(900px 700px at 6% 110%, rgba(0,0,0,.22), transparent 60%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--bone-2);
  font-family:var(--read); font-weight:300; font-size:16.5px; line-height:1.78;
  -webkit-font-smoothing:antialiased;
}

/* The watermark runs DIAGONALLY. Rotating a tiled background breaks the seam,
   so the tile stays upright on an oversized FIXED layer that is rotated whole.
   z-index:-1 keeps it under all content without giving any other element a
   stacking context (which would break the sticky header). */
body::before{
  content:"";
  position:fixed;
  top:-60%; left:-60%; width:220%; height:220%;
  background-image:url("/assets/pk/pk-wm-tile.webp");
  background-repeat:repeat;
  background-size:300px 300px;      /* the tile's true size — never squash it */
  transform:rotate(-24deg);
  transform-origin:center center;
  pointer-events:none;
  z-index:-1;
}

img{display:block; max-width:100%;}
h1,h2,h3,h4{margin:0; color:var(--bone); text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--lime); outline-offset:3px;}
.hold{max-width:var(--hold); margin:0 auto; padding:0 var(--gut);}
.skip{position:absolute; left:-9999px;}
.skip:focus{left:12px; top:12px; z-index:300; background:var(--lime); color:#16210a;
  padding:10px 16px; font-family:var(--label); letter-spacing:.12em; text-transform:uppercase;}

/* ---------------------------- masthead ---------------------------------- */
.mast{display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding:18px var(--gut); border-bottom:1px solid var(--rule);
  max-width:var(--hold); margin:0 auto;}
.mast .name{font-family:var(--display); font-size:22px; letter-spacing:-.01em;
  display:flex; align-items:center; gap:10px; text-decoration:none;}
/* the real mark, not a placeholder square */
.mast .name .mark{height:22px; width:auto; display:block; flex:none;}
/* .name is a flex row, so both halves of the lockup must sit inside ONE flex
   item or the row gap splits "Print Kit". */
.mast .name .wm{display:inline;}
.mast .name .p{color:var(--lime);}
.mast .name .k{color:var(--bone);}
.mast nav{display:flex; gap:20px; flex-wrap:wrap; align-items:center;}
.mast nav a{font-family:var(--label); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-2); text-decoration:none;}
.mast nav a:hover{color:var(--lime);}
.mast nav a[aria-current="page"]{color:var(--lime);}

/* ---------------------------- buttons ----------------------------------- */
.btn{display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--label); font-weight:500; font-size:13px; letter-spacing:.15em;
  text-transform:uppercase; text-decoration:none; padding:12px 22px;
  background:var(--lime); color:#16210a; border:1px solid var(--lime);
  transition:background .15s ease, border-color .15s ease, color .15s ease;}
.btn:hover{background:var(--lime-deep); border-color:var(--lime-deep);}
.btn.line{background:transparent; color:var(--bone); border-color:var(--rule);}
.btn.line:hover{border-color:var(--lime); color:var(--lime); background:transparent;}
.btn.lg{padding:14px 26px; font-size:13.5px;}
.mast nav a.btn{color:#16210a;}
.cta{display:flex; gap:13px; flex-wrap:wrap; margin-top:26px;}

/* ---------------------------- shared bits -------------------------------- */
.kicker{font-family:var(--label); font-weight:600; font-size:11.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--lime);}
.note{margin-top:12px; border-left:2px solid var(--lime); padding:2px 0 2px 13px;
  font-size:14px; color:var(--bone-3);}

/* ------------------------- ARCHETYPE: feature ---------------------------- */
.opener{position:relative;}
.opener .shot{position:relative; min-height:clamp(280px,38vw,440px);
  overflow:hidden; background:var(--stock-2);}
.opener .shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.opener .scrim{position:absolute; inset:0; background:linear-gradient(180deg,
  rgba(21,19,14,.60) 0%, rgba(21,19,14,.28) 26%, rgba(21,19,14,.80) 62%,
  rgba(21,19,14,.95) 88%, var(--stock) 100%);}
.opener .lay{position:relative; z-index:2; display:flex; flex-direction:column;
  justify-content:flex-end; min-height:inherit;}
.opener .hold{padding-top:clamp(34px,6vw,72px); padding-bottom:clamp(20px,2.6vw,34px);}
.opener h1{font-family:var(--display); font-size:clamp(24px,3.6vw,46px);
  line-height:1.1; letter-spacing:-.019em; color:#fff; max-width:30ch; margin-top:12px;}
.opener h1 em{font-style:normal; color:var(--lime); display:block;}
.opener .rule{width:66px; height:3px; background:var(--lime); margin-top:18px;}

.standfirst{padding:clamp(26px,3.6vw,48px) 0 clamp(14px,2vw,26px); max-width:38rem;}
.standfirst p{font-size:clamp(17.5px,2vw,20.5px); line-height:1.66;
  color:var(--bone); font-weight:400;}
.standfirst p.drop::first-letter{font-family:var(--display); font-size:3.3em;
  line-height:.88; float:left; margin:.06em .1em 0 0; color:var(--lime);}
.byline{margin-top:24px; padding-top:13px; border-top:1px solid var(--rule-2);
  display:flex; gap:20px; flex-wrap:wrap;}
.byline span{font-family:var(--label); font-size:11.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--bone-3);}
.byline b{color:var(--bone-2); font-weight:400;}

.body-cols{columns:2; column-gap:clamp(26px,3.4vw,52px); padding-bottom:clamp(24px,3vw,38px);}
.body-cols p{margin-bottom:1.15em; break-inside:avoid-column;}
.body-cols p b{color:var(--bone); font-weight:600;}
@media (max-width:760px){ .body-cols{columns:1;} }

.pull{margin:clamp(24px,3.4vw,48px) 0; padding:clamp(22px,3vw,38px) 0;
  border-top:2px solid var(--lime); border-bottom:1px solid var(--rule);}
.pull q{quotes:none; display:block; font-family:var(--display);
  font-size:clamp(21px,3.0vw,36px); line-height:1.16; color:var(--bone);
  max-width:24ch; letter-spacing:-.015em;}
.pull q em{font-style:normal; color:var(--lime);}
.pull .cap{margin-top:14px; font-family:var(--label); font-size:11.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--bone-3);}

.sechead{max-width:60ch; margin-bottom:clamp(24px,3vw,38px);}
.sechead h2{font-family:var(--display); font-size:clamp(21px,2.8vw,32px);
  line-height:1.1; letter-spacing:-.015em; margin-top:12px;}
.sechead p{margin-top:12px;}

/* numbered feature rows (builders, steps, plates) */
.bld{border-top:1px solid var(--rule-2); padding:clamp(26px,3.4vw,44px) 0;
  display:grid; grid-template-columns:64px minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(16px,2.6vw,36px); align-items:start;}
.bld:first-of-type{border-top:1px solid var(--rule);}
.bld .no{font-family:var(--display); font-size:clamp(24px,2.8vw,34px);
  color:var(--lime); line-height:.9; letter-spacing:-.02em;}
.bld h2,.bld h3{font-family:var(--display); font-size:clamp(17px,1.9vw,23px);
  line-height:1.18; letter-spacing:-.012em;}
.bld .lede{margin-top:10px; font-size:15.5px; max-width:46ch;}
.bld figure{margin:0; background:var(--stock-2); overflow:hidden;}
.bld figure img{width:100%; aspect-ratio:4/3; object-fit:cover;}
.bld figure.screen{padding:7px; border:1px solid var(--rule-2); background:#0b0d0a;}
.bld figure.screen img{aspect-ratio:auto; object-fit:contain;}
.bld figcaption{font-family:var(--label); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-3); margin-top:8px;}
@media (max-width:900px){
  .bld{grid-template-columns:52px minmax(0,1fr);}
  .bld figure{grid-column:1 / -1;}
}
.pair{margin-top:14px; border-top:1px solid var(--rule-2); padding-top:11px;
  display:grid; gap:9px;}
.pair div{display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px;
  align-items:baseline;}
.pair i{font-style:normal; font-family:var(--label); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3);}
.pair span{font-size:14.5px; line-height:1.62;}
.pair span b{color:var(--lime); font-weight:500;}

/* the printed insert (pricing, fact panels) */
.insert{background:var(--sheet); color:var(--ink); margin-top:clamp(34px,4vw,60px);}
.insert .hold{padding-top:clamp(30px,3.6vw,52px); padding-bottom:clamp(30px,3.6vw,52px);}
.insert .kicker{color:var(--lime-ink);}
.insert h2{font-family:var(--display); font-size:clamp(23px,2.9vw,34px);
  line-height:1.1; letter-spacing:-.015em; color:var(--ink); margin-top:12px;}
.insert .lede{margin-top:13px; max-width:62ch; color:#3c382c;}
.insert .note{color:#4d4838; border-left-color:var(--lime-ink);}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-top:clamp(22px,2.8vw,34px);
  border-top:2px solid var(--ink); border-bottom:2px solid var(--ink);}
.fact{padding:15px 17px; border-right:1px solid rgba(25,23,16,.22);}
.fact:last-child{border-right:0;}
.fact i{display:block; font-style:normal; font-family:var(--label); font-size:10.5px;
  letter-spacing:.19em; text-transform:uppercase; color:#6b6553;}
.fact b{display:block; font-family:var(--display); font-size:clamp(23px,2.6vw,31px);
  letter-spacing:-.02em; line-height:1.1; margin-top:7px; color:var(--ink);}
.fact span{display:block; font-size:13.5px; color:#4d4838; margin-top:5px; line-height:1.5;}
.insert .btn.line{color:var(--ink); border-color:rgba(25,23,16,.4);}
.insert .btn.line:hover{border-color:var(--lime-ink); color:var(--lime-ink);}

/* closing spread */
.close{position:relative;}
.close .shot{position:relative; min-height:clamp(260px,32vw,400px); overflow:hidden;}
.close .shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.close .scrim{position:absolute; inset:0; background:linear-gradient(180deg,
  rgba(21,19,14,.9) 0%, rgba(21,19,14,.6) 50%, rgba(21,19,14,.94) 100%);}
.close .lay{position:relative; z-index:2; display:flex; align-items:center; min-height:inherit;}
.close h2{font-family:var(--display); font-size:clamp(24px,3.5vw,42px); line-height:1.1;
  letter-spacing:-.018em; color:#fff; max-width:20ch;}
.close p{margin-top:14px; max-width:52ch; color:var(--bone);}

/* ------------------------- ARCHETYPE: docs ------------------------------- */
.crumb{font-family:var(--label); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-3); padding:22px 0 0;}
.crumb b{color:var(--lime); font-weight:500;}
.crumb a{text-decoration:none;}
.crumb a:hover{color:var(--lime);}
.dochead{padding:14px 0 clamp(22px,3vw,34px); border-bottom:1px solid var(--rule);}
.dochead h1{font-family:var(--display); font-size:clamp(24px,3.2vw,36px);
  line-height:1.12; letter-spacing:-.018em;}
.dochead p{margin-top:12px; max-width:60ch; font-size:16.5px;}
.docgrid{display:grid; grid-template-columns:230px minmax(0,1fr);
  gap:clamp(22px,3.4vw,56px); padding-top:clamp(22px,3vw,38px);}
@media (max-width:880px){ .docgrid{grid-template-columns:1fr;} }
.toc{position:sticky; top:20px; align-self:start;}
.toc h4{font-family:var(--label); font-weight:600; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-3); margin-bottom:12px;}
.toc ul{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:2px;}
.toc a{display:block; font-size:14px; color:var(--bone-2); text-decoration:none;
  padding:6px 0 6px 12px; border-left:2px solid var(--rule-2); line-height:1.45;}
.toc a:hover{color:var(--bone); border-left-color:var(--bone-3);}
.toc a[aria-current="page"]{color:var(--lime); border-left-color:var(--lime);}
.doc{max-width:40rem;}
.doc h2{font-family:var(--display); font-size:clamp(18px,2.1vw,24px); line-height:1.16;
  letter-spacing:-.014em; margin-top:clamp(28px,3.2vw,42px); scroll-margin-top:20px;}
.doc > h2:first-child{margin-top:0;}
.doc h3{font-family:var(--label); font-weight:600; font-size:15px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--bone); margin-top:26px; scroll-margin-top:20px;}
.doc h4{font-family:var(--label); font-weight:500; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--bone-2); margin-top:20px;}
.doc p{margin-top:11px;}
.doc p b,.doc li b,.doc strong{color:var(--bone); font-weight:500;}
.doc ul,.doc ol{margin:12px 0 0; padding:0 0 0 21px;}
.doc ul{list-style:none; padding-left:0;}
/* NOT grid: a grid <li> puts every child in its own cell, so
   "<b>label</b> — rest of sentence" splits and the text lands in the bullet
   column, wrapping one word per line. */
.doc ul li{position:relative; padding-left:21px; font-size:15.5px; margin-top:9px;}
.doc ul li::before{content:""; position:absolute; left:0; top:10px;
  width:7px; height:7px; background:var(--lime);}
.doc ol li{font-size:15.5px; margin-top:9px;}
.doc a{color:var(--lime);}
.doc pre{background:#0d0f0b; border:1px solid var(--rule-2); padding:14px 15px;
  overflow-x:auto; font-size:13px; line-height:1.6; color:var(--bone-2); margin-top:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em; background:rgba(243,238,226,.07); padding:1px 5px; color:var(--bone);}
.doc pre code{background:none; padding:0;}
.doc table{width:100%; border-collapse:collapse; margin-top:16px; font-size:14.5px;
  color:var(--bone-2);}
.doc th{text-align:left; font-family:var(--label); font-weight:500; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-3);
  padding:9px 12px 9px 0; border-bottom:1px solid var(--rule);}
.doc td{padding:10px 12px 10px 0; border-bottom:1px solid var(--rule-2); vertical-align:top;}
.step{display:grid; grid-template-columns:34px minmax(0,1fr); gap:16px; margin-top:24px;}
.step .n{font-family:var(--display); font-size:15px; color:#16210a; background:var(--lime);
  width:26px; height:26px; display:grid; place-items:center; line-height:1;}
.step h3{margin-top:0;}
.callout{margin-top:18px; border:1px solid var(--rule); border-left:3px solid var(--lime);
  padding:14px 16px; background:var(--stock-2); font-size:14.5px;}
.callout i{display:block; font-style:normal; font-family:var(--label); font-weight:600;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--lime);
  margin-bottom:6px;}

/* ------------------------- ARCHETYPE: trust ------------------------------ */
.trusthead{padding:clamp(30px,4vw,56px) 0 clamp(20px,2.6vw,32px);
  border-bottom:1px solid var(--rule);}
.trusthead h1{font-family:var(--display); font-size:clamp(26px,3.6vw,42px);
  line-height:1.08; letter-spacing:-.02em; margin-top:10px;}
.trusthead p{margin-top:14px; max-width:56ch; font-size:17px; color:var(--bone-2);}
.jump{display:flex; flex-wrap:wrap; gap:7px; margin-top:22px;}
.jump a{font-family:var(--label); font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--bone-2); text-decoration:none;
  border:1px solid var(--rule); padding:6px 11px;}
.jump a:hover{border-color:var(--lime); color:var(--lime);}
.trust{max-width:42rem; padding-top:clamp(24px,3vw,40px);}
.trust section{padding:clamp(22px,2.6vw,34px) 0; border-bottom:1px solid var(--rule-2);
  scroll-margin-top:20px;}
.trust h2{font-family:var(--display); font-size:clamp(18px,2.1vw,24px);
  letter-spacing:-.014em; line-height:1.16;}
.trust h3{font-family:var(--label); font-weight:600; font-size:14.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--bone); margin-top:20px;}
.trust p{margin-top:11px;}
.trust p b,.trust strong{color:var(--bone); font-weight:500;}
.trust a{color:var(--lime);}
.trust ul{margin:12px 0 0; padding:0; list-style:none;}
.trust li{position:relative; padding-left:21px; margin-top:9px; font-size:15.5px;}
.trust li::before{content:""; position:absolute; left:0; top:10px; width:7px; height:7px;
  background:var(--lime);}
.trust .tag{font-family:var(--label); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--lime); display:block; margin-bottom:8px;}

/* ------------------------- ARCHETYPE: slim ------------------------------- */
.slim{max-width:42rem; padding:clamp(34px,5vw,72px) 0 clamp(24px,3vw,40px);}
.slim h1{font-family:var(--display); font-size:clamp(26px,3.6vw,42px); line-height:1.08;
  letter-spacing:-.02em; margin-top:10px;}
.slim p{margin-top:14px;}
.slim .big{font-family:var(--display); font-size:clamp(48px,9vw,110px); color:var(--lime);
  line-height:1; letter-spacing:-.03em;}
.card{border:1px solid var(--rule); padding:clamp(20px,2.6vw,30px); margin-top:24px;
  background:var(--stock-2);}
.card h2{font-family:var(--display); font-size:20px; letter-spacing:-.012em;}
.card p{margin-top:10px;}
.card a{color:var(--lime);}

/* ---------------------------- colophon ----------------------------------- */
.colophon{border-top:1px solid var(--rule); padding:clamp(28px,3.6vw,46px) 0;
  margin-top:clamp(34px,4vw,60px);}
.colophon .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:24px;}
.colophon h4{font-family:var(--label); font-weight:500; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-3); margin-bottom:11px;}
.colophon ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.colophon li,.colophon a{font-size:14.5px; color:var(--bone-2); text-decoration:none;}
.colophon a:hover{color:var(--lime);}
.legal{margin-top:26px; padding-top:15px; border-top:1px solid var(--rule-2);
  font-size:13px; line-height:1.7; color:var(--bone-3);}
.legal b{color:var(--bone-2); font-weight:500;}
.legal a{color:var(--bone-2);}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
  html{scroll-behavior:auto;}
}