/* PrintHub sales site. Four moods (HeyFriends paper, GitHub night, Apple white stage, BEGG print shop) held
   together by one ink green, one type family (Archivo at several widths) and one doodle line. See DESIGN.md. */

:root {
  --paper: #F6F2EA;
  --ink: #13332A;
  --ink-2: #44564F;
  --lime: #DDF25A;
  --doodle: #6E8BFF;
  --lavender: #CDD6FF;
  --night: #070C2B;
  --cyan: #00A3E0;
  --magenta: #E5007E;
  --yellow: #FFD400;
  --orange: #F29A16;
  --gold: #E2A81E;
  --white: #FFFFFF;
  --line: rgba(19, 51, 42, 0.16);
  --wrap: 1180px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat Brush", "Segoe Print", cursive;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 18px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -0.015em; }
:focus-visible { outline: 3px solid var(--doodle); outline-offset: 3px; border-radius: 6px; }
section { position: relative; }

/* ------------------------------------------------------------ loading count (BEGG) */
.loader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 6px;
  background: var(--paper); transition: opacity .45s ease, visibility .45s; animation: loader-fallback 0s 2.6s forwards;
}
.loader span { font: 34px var(--hand); transform: rotate(-4deg); }
.loader b { font-stretch: 62%; font-weight: 900; font-size: 120px; line-height: .9; font-variant-numeric: tabular-nums; }
.loader i { width: 220px; height: 6px; border-radius: 9px; background: var(--line); overflow: hidden; }
.loader em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--yellow)); }
.loader.done { opacity: 0; visibility: hidden; }
@keyframes loader-fallback { to { opacity: 0; visibility: hidden; } }

/* ------------------------------------------------------------ navigation */
.nav {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 28px;
  padding: 14px max(20px, calc((100vw - var(--wrap)) / 2)); background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 22px; font-stretch: 105%; }
.nav nav { display: flex; gap: 26px; margin-left: auto; }
.nav nav a { text-decoration: none; font-weight: 500; font-size: 16px; }
.nav nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pill-btn { text-decoration: none; background: var(--lavender); padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: 16px; }
.pill-btn:hover { background: #BBC7FF; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 10px; }
.menu-btn span { display: block; height: 2.5px; background: var(--ink); border-radius: 3px; margin: 6px 0; }

/* Apple-style jump chips */
.chips { display: flex; justify-content: center; gap: 10px; padding: 4px 20px 6px; overflow-x: auto; scrollbar-width: none; }
.chips a { flex: none; text-decoration: none; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); }
.chips a:hover { border-color: var(--ink); }

/* ------------------------------------------------------------ hero (HeyFriends) */
.hero { padding: 64px 20px 0; text-align: center; }
.hero h1 { max-width: 1040px; margin: 0 auto; font-size: clamp(40px, 6.6vw, 86px); font-weight: 800; font-stretch: 108%; line-height: 1.02; }
.circled { position: relative; display: inline-block; white-space: nowrap; }
.circled svg { position: absolute; left: -12%; top: -16%; width: 124%; height: 132%; overflow: visible; pointer-events: none; }
.circled path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 1.1s .9s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.lead { max-width: 720px; margin: 22px auto 0; font-size: 20px; color: var(--ink-2); }
.hero-btns { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.btn-ink, .btn-line { text-decoration: none; font-weight: 700; font-size: 16px; padding: 14px 26px; border-radius: 999px; border: 2px solid var(--ink); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: #1C4235; }
.btn-line:hover { background: var(--white); }
.rule { height: 12px; margin: 48px -20px 0; background: linear-gradient(90deg, var(--ink) 0 93%, var(--lime) 93%); }
.doodle-wrap { position: relative; max-width: 1040px; margin: 0 auto; padding: 18px 0 110px; }
.doodle { width: 100%; height: auto; }
.cta-bar {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 8px 8px 26px; white-space: nowrap;
  box-shadow: 0 10px 0 var(--ink);
}
.cta-bar span { font-weight: 700; margin-right: 14px; }
.cta-bar a { text-decoration: none; font-weight: 700; font-size: 16px; padding: 12px 22px; border-radius: 999px; }
.cta-bar .ghost { border: 2px solid var(--lavender); }
.cta-bar .ghost:hover { background: var(--lavender); }
.cta-bar .solid { background: var(--ink); color: var(--white); }

/* ------------------------------------------------------------ problem (HeyFriends) */
.problem { max-width: var(--wrap); margin: 0 auto; padding: 110px 20px 90px; }
.problem h2 { max-width: 860px; font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; font-stretch: 106%; }
.problem-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 34px; font-size: 20px; color: var(--ink-2); }
.problem-cols p { margin: 0; }
.no-more { margin: 46px 0 0; font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; font-stretch: 104%; }
.rotator { display: inline-block; background: var(--lime); padding: 0 12px; border-radius: 6px; transform: rotate(-1deg); }
.rotator span { display: inline-block; animation: word-in .5s ease-out; }
@keyframes word-in { from { opacity: 0; transform: translateY(12px); } }

/* ------------------------------------------------------------ night (GitHub Mona & Hubot) */
.night {
  color: var(--white); overflow: hidden; padding: 90px 0 0;
  background: radial-gradient(120% 70% at 50% 72%, #2E43D6 0%, #1A2896 22%, #0D1452 46%, var(--night) 72%);
}
.eyebrow { text-align: center; margin: 0; font-size: 15px; font-weight: 600; color: #B8C2FF; }
.stage { position: relative; max-width: 1200px; margin: 18px auto 0; padding: 0 20px; display: grid; place-items: center; min-height: clamp(460px, 64vw, 860px); }
.stack { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-transform: uppercase; font-stretch: 62%; font-weight: 900; font-size: clamp(96px, 19vw, 270px); line-height: .8; letter-spacing: -0.005em; color: #EEF2FF; }
.stack span { display: block; }
.stack .amp { background: linear-gradient(180deg, #FFFFFF 0%, #A9B5E8 55%, #6B78C2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pip { position: absolute; z-index: 2; bottom: 4%; width: clamp(200px, 30vw, 400px); height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.horizon { position: absolute; z-index: 0; left: 50%; top: 80%; width: 160%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 0, #11185A 0%, #050821 40%); box-shadow: 0 -2px 0 rgba(180, 200, 255, .8), 0 -30px 90px rgba(80, 160, 255, .55); }
.planet-lines { position: relative; z-index: 3; margin: 0; padding: 40px 20px 10px; text-align: center; font-weight: 300; font-stretch: 100%; font-size: clamp(24px, 3vw, 38px); line-height: 1.2; color: #B8C2FF; background: #050821; }
.steps { position: relative; z-index: 3; list-style: none; margin: 0; padding: 50px max(20px, calc((100vw - var(--wrap)) / 2)) 70px; background: #050821;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid rgba(184, 194, 255, .3); padding-top: 18px; }
.steps li::before { content: counter(step); display: block; font-stretch: 62%; font-weight: 900; font-size: 64px; line-height: 1; color: #4CE4FF; }
.steps b { display: block; font-size: 24px; font-weight: 800; margin: 10px 0 6px; }
.steps span { color: #C9D0F5; font-size: 17px; }
.ticker { position: relative; z-index: 3; overflow: hidden; background: #050821; border-top: 1px solid rgba(184, 194, 255, .25); border-bottom: 1px solid rgba(184, 194, 255, .25); padding: 16px 0; }
.ticker div { display: flex; width: max-content; animation: ticker 28s linear infinite; }
.ticker span { font-stretch: 62%; font-weight: 900; font-size: 56px; text-transform: uppercase; padding: 0 28px; color: transparent; -webkit-text-stroke: 1.5px #B8C2FF; }
.ticker span:nth-child(3n+2) { color: #EEF2FF; -webkit-text-stroke: 0; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Pip, alive: waves and prints a page when the section is reached */
.pip .pip-wave, .pip-small .pip-wave { transform-box: view-box; transform-origin: 342px 262px; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-9deg); } 80% { transform: rotate(5deg); } 90% { transform: rotate(-6deg); } }
.pip .pip-page { transform-box: view-box; transform-origin: 210px 336px; }
.night.seen .pip .pip-page { animation: print-out 1.6s .2s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes print-out { from { transform: translateY(-110px) scaleY(.2); opacity: 0; } 40% { opacity: 1; } to { transform: none; } }

/* ------------------------------------------------------------ white stage (Apple Siri) */
.anywhere { background: var(--white); overflow: hidden; padding: 150px 20px 170px; text-align: center; }
.devices { position: absolute; inset: 0; pointer-events: none; }
.dev { position: absolute; height: auto; filter: drop-shadow(0 22px 30px rgba(20, 30, 60, .18)); }
.dev.phone { width: 160px; left: 6%; top: -40px; transform: rotate(-14deg); }
.dev.paper { width: 170px; left: -20px; top: 330px; transform: rotate(9deg); }
.dev.laptop { width: 400px; left: -90px; bottom: -150px; transform: rotate(6deg); }
.dev.receipt-printer { width: 220px; right: 5%; top: -20px; transform: rotate(10deg); }
.dev.label-printer { width: 190px; right: -20px; top: 330px; transform: rotate(-8deg); }
.dev.office-printer { width: 340px; right: -70px; bottom: -130px; transform: rotate(-5deg); }
.cmyk-word {
  position: relative; display: inline-block; font-size: clamp(84px, 15.5vw, 220px); font-weight: 800; font-stretch: 100%; letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(95deg, var(--cyan) 5%, #6E5BFF 32%, var(--magenta) 58%, var(--orange) 82%, var(--yellow) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .04em .06em;
}
.anywhere-lead { position: relative; max-width: 640px; margin: 18px auto 0; font-size: 21px; color: var(--ink-2); }
.features { position: relative; max-width: 900px; margin: 70px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 34px; text-align: left; }
.features div { background: color-mix(in srgb, var(--white) 86%, transparent); backdrop-filter: blur(4px); }
.features h3 { font-size: 21px; font-weight: 800; margin-bottom: 6px; }
.features p { margin: 0; font-size: 16px; color: var(--ink-2); }

/* ------------------------------------------------------------ yellow band (BEGG) */
.yolk { background: var(--yellow); overflow: hidden; padding: 100px max(20px, calc((100vw - var(--wrap)) / 2)) 80px; }
.float-doc { position: absolute; height: auto; filter: drop-shadow(0 18px 24px rgba(120, 80, 0, .25)); }
.float-doc.d1 { width: 130px; right: 6%; top: 40px; transform: rotate(12deg); }
.float-doc.d2 { width: 90px; right: 22%; top: -20px; transform: rotate(-8deg); }
.float-doc.d3 { width: 150px; right: 2%; bottom: 40px; transform: rotate(-14deg); }
.facts { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 900px; }
.facts p { margin: 0; font-size: 16px; }
.fact-k { font: 34px/1 var(--hand) !important; transform: rotate(-4deg); }
.fact-v { font-stretch: 62%; font-weight: 900; font-size: 92px !important; line-height: 1 !important; margin: 4px 0 8px !important; }
.filechips { position: relative; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 46px 0 0; max-width: 760px; }
.filechips li { border: 2px solid var(--ink); border-radius: 999px; padding: 4px 14px; font-weight: 700; font-size: 14px; font-stretch: 90%; }

/* ------------------------------------------------------------ cream print shop (BEGG) */
.madefor { max-width: var(--wrap); margin: 0 auto; padding: 120px 20px 70px; }
.brush { position: relative; z-index: 2; margin: 0 0 -26px 6%; font: 76px/1 var(--hand); transform: rotate(-7deg); width: max-content; }
.inked { font-size: clamp(54px, 10.4vw, 150px); font-stretch: 62%; font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -0.005em; }
.inked span {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 7px 7px, 7px 7px, 100% 100%; background-position: 0 0, 3.5px 3.5px, 0 0;
}
.ink-a { background-image: radial-gradient(circle, rgba(0, 163, 224, .9) 0 30%, transparent 33%), radial-gradient(circle, rgba(229, 0, 126, .55) 0 26%, transparent 29%), linear-gradient(100deg, var(--ink) 20%, #1E6F8F 60%, var(--ink) 95%); }
.ink-b { background-image: radial-gradient(circle, rgba(242, 154, 22, .95) 0 32%, transparent 35%), radial-gradient(circle, rgba(229, 0, 126, .6) 0 26%, transparent 29%), linear-gradient(100deg, #7A3A00 10%, var(--orange) 55%, #3D2400 95%); }
.ink-c { background-image: radial-gradient(circle, rgba(229, 0, 126, .9) 0 30%, transparent 33%), radial-gradient(circle, rgba(255, 212, 0, .8) 0 26%, transparent 29%), linear-gradient(100deg, var(--ink) 10%, #8E0050 55%, var(--ink) 95%); }
.spec { position: relative; margin-top: 70px; padding-right: 34%; }
.spec-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.spec dl { margin: 0; }
.spec dt { font-weight: 700; font-stretch: 85%; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; margin-top: 18px; }
.spec dt:first-child { margin-top: 0; font-size: 22px; text-transform: none; letter-spacing: 0; }
.spec dd { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }
.spec .v { display: block; color: var(--orange); font-weight: 800; }
.cells { list-style: none; display: flex; padding: 0; margin: 40px 0 0; width: max-content; border: 1.5px solid var(--ink); }
.cells li { width: 64px; height: 64px; display: grid; place-items: center; border-left: 1.5px solid var(--ink); }
.cells li:first-child { border-left: 0; }
.cells svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pip-print {
  position: absolute; right: -2%; bottom: -60px; width: 38%; height: auto; filter: grayscale(1) contrast(1.6);
  -webkit-mask: radial-gradient(circle, #000 52%, transparent 58%) 0 0 / 7px 7px; mask: radial-gradient(circle, #000 52%, transparent 58%) 0 0 / 7px 7px;
}

/* ------------------------------------------------------------ companies and billing */
.companies { max-width: var(--wrap); margin: 0 auto; padding: 60px 20px 100px; }
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; padding: 50px 0; border-top: 2px solid var(--ink); }
.split h2 { font-size: clamp(32px, 3.8vw, 50px); font-weight: 800; font-stretch: 106%; }
.split > div p { font-size: 19px; color: var(--ink-2); margin: 18px 0 0; }
.ticks, .pay { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ticks li { position: relative; padding-left: 40px; font-size: 17px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%2313332A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.pay li { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; font-size: 16px; color: var(--ink-2); }
.pay b { color: var(--ink); font-size: 18px; display: block; }
.pay-ico { grid-row: span 2; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; font-size: 22px; color: var(--white); }
.pay-ico.mpesa { background: #2E9B3F; }
.pay-ico.card { background: var(--doodle); }
.pay-ico.bank { background: var(--ink); }
.pay-ico.tax { background: var(--orange); }

/* ------------------------------------------------------------ pricing: printed receipts */
.pricing { background: var(--ink); color: var(--white); padding: 110px max(20px, calc((100vw - var(--wrap)) / 2)) 120px; text-align: center; }
.pricing h2 { font-size: clamp(36px, 5vw, 66px); font-weight: 800; font-stretch: 106%; }
.pricing-sub { max-width: 640px; margin: 16px auto 0; color: #C8D8D0; }
.period { display: inline-flex; gap: 4px; margin-top: 30px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.period button { border: 0; border-radius: 999px; padding: 10px 20px; font: 700 15px var(--font); color: var(--white); background: none; cursor: pointer; }
.period button.on { background: var(--white); color: var(--ink); }
.period em { font-style: normal; font-weight: 600; color: var(--lime); margin-left: 4px; }
.period button.on em { color: #2E7D4F; }
.receipts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 60px; align-items: start; text-align: left; }
.receipt {
  --edge: 12px; position: relative; background: var(--white); color: #1C1C1C; padding: 34px 26px 30px; font-family: var(--mono); font-size: 14px;
  margin: var(--edge) 0; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .3));
}
.receipt:nth-child(1) { transform: rotate(-1.6deg); }
.receipt:nth-child(3) { transform: rotate(1.4deg); }
.receipt.popular { transform: translateY(-22px); }
.receipt::before, .receipt::after { content: ""; position: absolute; left: 0; right: 0; height: var(--edge); background-size: calc(var(--edge) * 2) var(--edge); background-repeat: repeat-x; }
.receipt::before { top: calc(var(--edge) * -1); background-image: linear-gradient(45deg, transparent 50%, var(--white) 50%), linear-gradient(-45deg, transparent 50%, var(--white) 50%); }
.receipt::after { bottom: calc(var(--edge) * -1); background-image: linear-gradient(135deg, var(--white) 50%, transparent 50%), linear-gradient(-135deg, var(--white) 50%, transparent 50%); }
.receipt header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px dashed #BDBDBD; padding-bottom: 12px; }
.receipt header b { font-size: 18px; letter-spacing: .08em; }
.receipt header span { color: #6A6A6A; }
.receipt .price { margin: 20px 0 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.receipt .price span { color: #6A6A6A; }
.receipt .price b { font-family: var(--font); font-stretch: 62%; font-weight: 900; font-size: 64px; line-height: 1; letter-spacing: 0; }
.receipt .price small { color: #6A6A6A; }
.receipt ul { list-style: none; padding: 0; margin: 0; border-top: 2px dashed #BDBDBD; }
.receipt li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dotted #D0D0D0; }
.receipt li span:last-child { font-weight: 600; text-align: right; }
.barcode { height: 46px; margin: 22px 0 18px; background: repeating-linear-gradient(90deg, #1C1C1C 0 2px, transparent 2px 4px, #1C1C1C 4px 7px, transparent 7px 9px, #1C1C1C 9px 10px, transparent 10px 13px); }
.buy { display: block; text-align: center; text-decoration: none; font: 700 16px var(--font); padding: 14px; border-radius: 999px; background: var(--ink); color: var(--white); }
.buy:hover { background: #1C4235; }
.popular .buy { background: var(--magenta); }
.stamp { position: absolute; right: -14px; top: -28px; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  font: 800 14px/1.05 var(--font); text-transform: uppercase; color: var(--magenta); border: 3px solid var(--magenta); background: rgba(255, 255, 255, .9); transform: rotate(14deg); box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 6px var(--magenta); }
.addon { margin: 44px auto 0; color: #C8D8D0; }
.addon b { color: var(--white); }
.calc { max-width: 900px; margin: 60px auto 0; background: var(--paper); color: var(--ink); border-radius: 28px; padding: 34px; text-align: left; }
.calc h3 { font-size: 28px; font-weight: 800; font-stretch: 106%; }
.calc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; margin-top: 18px; align-items: center; }
.sliders label { display: block; font-weight: 700; margin-bottom: 18px; }
.sliders output { float: right; font-stretch: 62%; font-weight: 900; font-size: 30px; line-height: 1; }
.sliders input { width: 100%; margin-top: 8px; accent-color: var(--ink); height: 28px; }
.calc-out { background: var(--white); border-radius: 22px; padding: 24px; border: 2px solid var(--ink); }
.calc-plan { margin: 0; font: 32px var(--hand); }
.calc-price { margin: 6px 0; display: flex; align-items: baseline; gap: 8px; }
.calc-price b { font-stretch: 62%; font-weight: 900; font-size: 64px; line-height: 1; }
.calc-price small, .calc-price span { color: var(--ink-2); }
.calc-note { margin: 0 0 16px; font-size: 15px; color: var(--ink-2); }

/* ------------------------------------------------------------ FAQ */
.faq { max-width: 860px; margin: 0 auto; padding: 110px 20px 60px; }
.faq h2 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; font-stretch: 106%; margin-bottom: 26px; }
.faq details { border-bottom: 2px solid var(--ink); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 50px 22px 0; position: relative; font-size: 21px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 38px; font-weight: 400; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 24px; color: var(--ink-2); max-width: 720px; }

/* ------------------------------------------------------------ start */
.start { max-width: var(--wrap); margin: 0 auto; padding: 60px 20px 110px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; }
.start h2 { font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; font-stretch: 106%; }
.start-copy p { font-size: 19px; color: var(--ink-2); }
.pip-small { width: 240px; height: auto; margin-top: 20px; }
form { background: var(--white); border: 2px solid var(--ink); border-radius: 28px; padding: 30px; box-shadow: 0 12px 0 var(--ink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
form label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 16px; }
.opt { font-weight: 500; color: var(--ink-2); }
form input, form select, form textarea { display: block; width: 100%; margin-top: 6px; font: 500 16px var(--font); color: var(--ink); background: var(--paper); border: 2px solid transparent; border-radius: 14px; padding: 12px 14px; }
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--doodle); background: var(--white); }
form [aria-invalid="true"] { border-color: var(--magenta); }
.hp { position: absolute; left: -9999px; }
form button { width: 100%; border: 0; border-radius: 999px; padding: 16px; font: 800 18px var(--font); background: var(--ink); color: var(--white); cursor: pointer; }
form button:hover { background: #1C4235; }
form button[disabled] { opacity: .6; cursor: wait; }
.form-note { margin: 14px 0 0; font-size: 15px; min-height: 1.4em; }
.form-note.ok { color: #23604F; font-weight: 700; }
.privacy { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.form-note.bad { color: var(--magenta); font-weight: 700; }

/* ------------------------------------------------------------ footer */
footer { border-top: 12px solid var(--ink); padding: 40px max(20px, calc((100vw - var(--wrap)) / 2)) 50px; display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; }
.foot-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; }
footer p { margin: 0; color: var(--ink-2); }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }
footer nav a { text-decoration: none; font-weight: 600; font-size: 15px; }
footer .copy { width: 100%; font-size: 14px; }

/* ------------------------------------------------------------ smaller screens */
@media (max-width: 1100px) {
  .dev.laptop { width: 320px; } .dev.office-printer { width: 280px; } .dev.paper, .dev.label-printer { display: none; }
  .spec { padding-right: 0; } .pip-print { position: relative; width: 60%; right: auto; bottom: auto; margin: 30px auto -40px; }
}
@media (max-width: 900px) {
  .nav nav { display: none; position: absolute; left: 12px; right: 12px; top: 100%; flex-direction: column; gap: 0; background: var(--white); border: 2px solid var(--ink); border-radius: 20px; padding: 8px; }
  .nav nav.open { display: flex; }
  .nav nav a { padding: 12px 14px; }
  .menu-btn { display: block; }
  .nav .pill-btn { display: none; }
  .chips { justify-content: flex-start; }
  .problem-cols, .split, .start, .calc-grid { grid-template-columns: 1fr; gap: 26px; }
  .steps, .features, .facts { grid-template-columns: 1fr; gap: 26px; }
  .receipts { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .receipt.popular { transform: none; }
  .cta-bar { position: static; transform: none; margin: 10px auto 0; flex-wrap: wrap; justify-content: center; white-space: normal; border-radius: 28px; padding: 14px; box-shadow: 0 8px 0 var(--ink); }
  .cta-bar span { width: 100%; text-align: center; margin: 0 0 4px; }
  .doodle-wrap { padding-bottom: 40px; }
  .dev.phone { width: 110px; left: -10px; top: 10px; } .dev.receipt-printer { width: 140px; right: -10px; top: 0; }
  .dev.laptop, .dev.office-printer { display: none; }
  .anywhere { padding-top: 190px; }
  .float-doc.d1, .float-doc.d2 { opacity: .5; }
  .spec-cols { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .hero { padding-top: 40px; }
  .lead { font-size: 18px; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .brush { font-size: 56px; }
  .ticker span { font-size: 40px; }
  .cells li { width: 54px; height: 54px; }
  form { padding: 22px; }
  .calc { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .circled path { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}