/* CF Point Digital Printing Services: company site for Life4Cuts and Zipline.
   Layout: single centred column, header bar with name and nav, content sections, contact footer. */
:root {
  --bg: #faf8fc;
  --surface: #ffffff;
  --fg: #1d1830;
  --muted: #5f5878;
  --line: #e7e2f0;
  --accent: #7a3cff;
  --accent-2: #ff4fa3;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #110d1f; --surface: #1a1430; --fg: #f3f0fb; --muted: #aaa2c8; --line: #2c2448;
    --accent: #a77bff; --accent-2: #ff7cbc; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 16px/1.6 var(--body); }
a { color: var(--accent); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 860px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

header.site { border-bottom: 1px solid var(--line); background: var(--surface); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 14px; }
.brand { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--fg); text-decoration: none; letter-spacing: -.01em; }
nav { display: flex; gap: 18px; flex-wrap: wrap; font-weight: 600; }
nav a { color: var(--muted); text-decoration: none; }
nav a[aria-current="page"], nav a:hover { color: var(--fg); }

main { padding-block: 40px 56px; display: grid; gap: 44px; }
h1, h2 { font-family: var(--display); font-weight: 800; line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; margin: 0; }
p, ul { margin: 0; max-width: 65ch; }
.lede { font-size: 1.15rem; color: var(--muted); }
.stack { display: grid; gap: 14px; }
.eyebrow { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 10px; align-content: start; }
.card .tag { justify-self: start; font-size: .75rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; color: #fff;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.btn { justify-self: start; display: inline-block; padding: 10px 18px; border-radius: 12px; font-weight: 800; text-decoration: none; color: #fff;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

dl.contact { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; }
dl.contact dt { font-weight: 800; }
dl.contact dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { dl.contact { grid-template-columns: minmax(0, 1fr); } dl.contact dd { margin-bottom: 8px; } }

.doc { display: grid; gap: 28px; }
.doc section { display: grid; gap: 10px; }
.doc ul { padding-left: 1.2em; display: grid; gap: 6px; }
.meta { color: var(--muted); font-size: .92rem; }

footer.site { border-top: 1px solid var(--line); padding-block: 24px; color: var(--muted); font-size: .9rem; }
footer.site .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }