/* Ink Spot Printing — shared design system.
   Palette extracted from the real brand logo (cyan ink-drop + fresh green).
   Loaded on every page via <link rel="stylesheet" href="/css/design.css">. */

:root {
  /* Grounds — bright but not sterile, slight warmth on paper */
  --paper:        #FFFFFF;
  --paper-alt:    #FAFCFE;
  --panel:        #F1F7FB;
  --panel-strong: #E1EDF6;

  /* Ink & text */
  --ink:          #0E1116;
  --ink-dim:      #3F4753;
  --ink-faint:    #606978;   /* 5.54 on white, 5.13 on --panel (was 3.78/3.50) */
  --line:         #D7E1EA;
  --line-strong:  #B5C4D3;

  /* Brand — direct from logo */
  --brand:        #006CB4;   /* ink-drop cyan, darkened: 5.52 on white, white on it 5.52 (was 3.36) */
  --brand-hi:     #004C80;   /* hover state: DARKENS now. White on it 8.95 (was 2.61) */
  --brand-lo:     #005C99;   /* link + press: 7.02 on white, 5.90 on --panel-strong */
  --brand-tint:   #DAEFFD;      /* faded fill for subtle backgrounds */
  --accent:       #60D848;      /* fresh green */
  --accent-hi:    #7FE165;
  --accent-lo:    #367F28;   /* white on it 4.97, as text 4.97 on white (was 2.60) */
  --accent-tint:  #E0F6D9;

  /* Semantic */
  --good:         #367F28;   /* same: it is a text colour, so it has to clear 4.5 */
  --warn:         #E85D3C;

  /* Type — bold display for headings (industrial print vibe), clean sans body */
  --font-body:    -apple-system, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo Black", "Impact", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Rhythm */
  --radius-sm:    4px;
  --radius:       8px;
  --radius-lg:    14px;
  --shadow-sm:    0 1px 2px rgba(14,17,22,0.05), 0 1px 3px rgba(14,17,22,0.04);
  --shadow:       0 2px 4px rgba(14,17,22,0.07), 0 8px 20px rgba(14,17,22,0.05);
  --shadow-lg:    0 4px 8px rgba(14,17,22,0.08), 0 16px 32px rgba(0,144,240,0.10);

  color-scheme: light;
}

/* No dark mode. The brand look is always light - the cyan and green are
   tuned for white paper and the shop's customers are mostly on phones, many
   of which sit in OS dark mode all day. An earlier attempt to "disable" dark
   mode used :root:not([data-theme="never-dark"]), which matches every page
   and so did the opposite. Nothing in the site sets data-theme; the light
   palette above is the only palette. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-lo); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Typography — bold display face carries the print-shop personality */
h1, h2, h3 { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; margin: 0 0 0.4rem; color: var(--ink); line-height: 1.05; text-transform: uppercase; }
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.005em; text-transform: none; font-weight: 800; }
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 0.9rem;
  font-family: var(--font-body);
}
.lede {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--ink-dim);
  line-height: 1.55;
  max-width: 44em;
  font-weight: 400;
}

/* Layout primitives */
.container { max-width: 1080px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.container-wide { max-width: 1280px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.section { padding: 4.5rem 0; }
.section-tight { padding: 2rem 0; }
@media (max-width: 640px) { .section { padding: 3rem 0; } }

/* Header + Nav */
.site-header {
  border-bottom: 3px solid var(--brand);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(6px);
}
.site-header .container-wide {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--ink);
}
.brand-mark:hover { text-decoration: none; }
.brand-mark img {
  height: 44px;
  width: auto;
  display: block;
}
nav.primary { display: flex; gap: 1.6rem; margin-left: auto; align-items: center; }
nav.primary a {
  color: var(--ink-dim);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.1s;
}
nav.primary a:hover, nav.primary a[aria-current="page"] { color: var(--brand); }
nav.primary .cta {
  color: var(--paper);
  background: var(--brand);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
}
nav.primary .cta:hover {
  background: var(--brand-hi);
  color: var(--paper);
  text-decoration: none;
}
@media (max-width: 720px) {
  .brand-mark img { height: 36px; }
  nav.primary { gap: 0.9rem; }
  nav.primary a:not(.cta) { display: none; }
}

/* Hero — bold, punchy, cyan-forward */
.hero {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(1200px 500px at 90% -10%, var(--accent-tint), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, var(--brand-tint), transparent 60%);
  border-bottom: 1px solid var(--line);
}
.hero h1 { max-width: 16ch; text-wrap: balance; }
.hero .lede { margin-top: 1.2rem; }
.hero-ctas { display: flex; gap: 0.8rem; margin-top: 1.8rem; flex-wrap: wrap; }
.hero h1 .highlight { color: var(--brand); }
.hero h1 .highlight-green { color: var(--accent-lo); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 0.92rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: transform 0.08s, background 0.1s, border-color 0.1s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand); color: var(--paper); }
.btn-primary:hover { background: var(--brand-hi); color: var(--paper); }
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-accent:hover { background: var(--accent-hi); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* Product tile grid */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 2.4rem;
}
.tile {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
  position: relative;
}
.tile:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}
.tile-photo {
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--panel);
  position: relative;
  transition: transform 0.4s ease;
}
.tile:hover .tile-photo { transform: scale(1.04); }
.tile-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(14,17,22,0.35) 100%);
  transition: opacity 0.15s;
}
.tile:hover .tile-photo::after { background: linear-gradient(180deg, rgba(0,144,240,0.15) 0%, rgba(14,17,22,0.5) 100%); }
.tile-body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.45rem; }
.tile h3 { margin: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.005em; font-size: 1.1rem; }
.tile p { margin: 0; color: var(--ink-dim); font-size: 0.92rem; line-height: 1.5; }
.tile .price-from {
  font-size: 0.82rem;
  color: var(--brand);
  margin-top: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tile .badge-configure {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  color: var(--paper);
  background: var(--accent-lo);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(14,17,22,0.15);
}
.tile.coming-soon .badge-configure {
  color: var(--paper);
  background: var(--ink-faint);
}
.tile.coming-soon:hover { border-color: var(--line); transform: none; cursor: default; box-shadow: none; }
.tile.coming-soon:hover .tile-photo { transform: none; }
.tile.coming-soon .tile-photo { filter: grayscale(0.4); opacity: 0.75; }

/* Hero variant with photo backdrop */
.hero.hero-photo {
  position: relative;
  color: white;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
  border-bottom: none;
  background: var(--ink);
}
.hero.hero-photo .hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}
.hero.hero-photo .hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,17,22,0.85) 0%, rgba(14,17,22,0.45) 60%, transparent 100%),
              linear-gradient(180deg, transparent 40%, rgba(14,17,22,0.65) 100%);
}
.hero.hero-photo .container { position: relative; z-index: 2; }
.hero.hero-photo h1 { color: white; }
.hero.hero-photo .lede { color: rgba(255,255,255,0.85); }
.hero.hero-photo .eyebrow { color: var(--accent); }
.hero.hero-photo .btn-ghost { color: white; border-color: rgba(255,255,255,0.35); }
.hero.hero-photo .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

/* Trust / stats row */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 2px solid var(--brand);
  border-bottom: 2px solid var(--accent);
  margin: 3rem 0 0;
}
.stat { text-align: left; }
.stat .num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--brand);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat .label {
  font-size: 0.85rem;
  color: var(--ink-dim);
  margin-top: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* Clickwrap. Deliberately not tucked away in small grey type: if the
   agreement is going to be relied on, it has to be legible. */
.consent-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
}
.consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-dim);
  cursor: pointer;
}
.consent input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin: 0.12rem 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.consent a { font-weight: 700; }

/* Skip link: the first focusable thing on every page. Off-screen until
   it is focused, then it parks itself top-left over everything. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--brand);
  color: var(--paper);
  padding: 0.75rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.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;
}
/* A visible focus ring everywhere, not just on form fields. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Footer */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.75);
  padding: 3rem 0 2rem;
  font-size: 0.9rem;
  margin-top: 5rem;
  border-top: 3px solid var(--accent);
}
.site-footer .brand-mark { color: white; }
.site-footer .brand-mark img { filter: invert(1) brightness(1.2); }
.site-footer .foot-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 720px) {
  .site-footer .foot-cols { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.site-footer h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 800;
  margin: 0 0 0.9rem;
}
.site-footer p { margin: 0.6rem 0; color: rgba(255,255,255,0.75); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: 0.25rem 0; }
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: var(--accent); }
.site-footer .legal {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.site-footer .legal a { color: rgba(255,255,255,0.7); }

/* Forms */
.form-grid { display: grid; gap: 1.2rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  font-weight: 800;
}
.field input, .field textarea, .field select {
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  width: 100%;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint);
}
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: 0.8rem; color: var(--ink-faint); }

/* Utility */
.hidden { display: none; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }