/* PrintBeam sales site. Four moods (HeyFriends paper, GitHub night, Apple white stage, BEGG print shop) held
   together by the PrintBeam pair, navy and beam lime, one type family (Archivo at several widths) and the beam:
   a wedge of lime light from a small source. See DESIGN.md. */

:root {
  --paper: #F4F6F9;
  --ink: #101828;
  --ink-2: #475467;
  --navy-2: #2B3A55;
  --deep: #0B111D;
  --lime: #DDF25A;
  --lime-dark: #CBE33F;
  --lavender: #E4E8F0;
  --night: #101828;
  --slate: #C9D0DB;
  --ok: #157F3B;
  --bad: #C42B35;
  --white: #FFFFFF;
  --line: rgba(16, 24, 40, 0.14);
  --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(--ink); 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(--ink) calc(100% - 18px), var(--lime) 0); }
.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: 900; font-size: 24px; font-stretch: 100%; letter-spacing: -0.03em; }
.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(--ink); color: var(--lime); padding: 13px 24px; border-radius: 999px; font-weight: 700; font-size: 16px; }
.pill-btn:hover { background: #1B2638; }
.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: #1B2638; }
.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%, #3E4A1E 0%, #243021 22%, #172032 46%, var(--night) 72%);
}
.eyebrow { text-align: center; margin: 0; font-size: 15px; font-weight: 600; color: var(--lime); }
.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: var(--white); }
.stack span { display: block; }
.stack .amp { background: linear-gradient(180deg, #FFFFFF 0%, #EEF8B4 50%, var(--lime) 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, #1B2638 0%, var(--deep) 40%); box-shadow: 0 -2px 0 rgba(221, 242, 90, .9), 0 -30px 90px rgba(221, 242, 90, .32); }
.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: var(--slate); background: var(--deep); }
.steps { position: relative; z-index: 3; list-style: none; margin: 0; padding: 50px max(20px, calc((100vw - var(--wrap)) / 2)) 70px; background: var(--deep);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid rgba(201, 208, 219, .22); padding-top: 18px; }
.steps li::before { content: counter(step); display: block; font-stretch: 62%; font-weight: 900; font-size: 64px; line-height: 1; color: var(--lime); }
.steps b { display: block; font-size: 24px; font-weight: 800; margin: 10px 0 6px; }
.steps span { color: var(--slate); font-size: 17px; }
.ticker { position: relative; z-index: 3; overflow: hidden; background: var(--deep); border-top: 1px solid rgba(201, 208, 219, .18); border-bottom: 1px solid rgba(201, 208, 219, .18); 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 #8A94A6; }
.ticker span:nth-child(3n+2) { color: var(--lime); -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); }
.beam-word {
  position: relative; z-index: 0; display: inline-block; font-size: clamp(84px, 15.5vw, 220px); font-weight: 800; font-stretch: 100%; letter-spacing: -0.04em; line-height: 1;
  color: var(--ink); padding: 0 .04em .06em;
}
.beam-word::before { content: ""; position: absolute; z-index: -1; left: -.34em; right: -.04em; top: 40%; bottom: 2%; background: var(--lime);
  clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.beam-word::after { content: ""; position: absolute; left: -.34em; top: 69%; width: .13em; height: .13em; border-radius: 50%; background: var(--ink);
  transform: translate(-50%, -50%); box-shadow: 0 0 0 .05em var(--lime); }
.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(--lime); 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(16, 24, 40, .2)); }
.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(221, 242, 90, .95) 0 30%, transparent 33%), radial-gradient(circle, rgba(138, 148, 166, .5) 0 26%, transparent 29%), linear-gradient(100deg, var(--ink) 20%, var(--navy-2) 60%, var(--ink) 95%); }
.ink-b { background-image: radial-gradient(circle, rgba(16, 24, 40, .9) 0 32%, transparent 35%), radial-gradient(circle, rgba(221, 242, 90, .55) 0 26%, transparent 29%), linear-gradient(100deg, var(--navy-2) 10%, #475467 55%, var(--navy-2) 95%); }
.ink-c { background-image: radial-gradient(circle, rgba(221, 242, 90, .75) 0 30%, transparent 33%), radial-gradient(circle, rgba(255, 255, 255, .3) 0 26%, transparent 29%), linear-gradient(100deg, var(--ink) 10%, #1B2638 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; width: max-content; max-width: 100%; color: var(--ink); font-weight: 800; background: linear-gradient(transparent 58%, var(--lime) 58%); }
.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='%23101828' 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(--navy-2); }
.pay-ico.bank { background: var(--ink); }
.pay-ico.tax { background: var(--lime); color: var(--ink); }

/* ------------------------------------------------------------ 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: var(--slate); }
.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: var(--ok); }
.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: #1B2638; }
.popular .buy { background: var(--lime); color: var(--ink); }
.popular .buy:hover { background: var(--lime-dark); }
.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(--ink); border: 3px solid var(--ink); background: var(--lime); transform: rotate(14deg); box-shadow: inset 0 0 0 4px var(--lime), inset 0 0 0 6px var(--ink); }
.addon { margin: 44px auto 0; color: var(--slate); }
.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(--ink); background: var(--white); }
form [aria-invalid="true"] { border-color: var(--bad); }
.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: #1B2638; }
form button[disabled] { opacity: .6; cursor: wait; }
.form-note { margin: 14px 0 0; font-size: 15px; min-height: 1.4em; }
.form-note.ok { color: var(--ok); font-weight: 700; }
.privacy { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.form-note.bad { color: var(--bad); font-weight: 700; }

.start-alt { font-size: 17px !important; }
.start-alt a { font-weight: 700; }
.demo { max-width: var(--wrap); margin: 0 auto; padding: 0 20px 110px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; }
.demo h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; font-stretch: 106%; }
.demo form { box-shadow: 0 12px 0 var(--lime); }
.demo form button { background: var(--lime); color: var(--ink); }
.demo form button:hover { background: var(--lime-dark); }
.ws { display: flex; align-items: stretch; margin-top: 6px; background: var(--paper); border-radius: 14px; border: 2px solid transparent; }
.ws:focus-within { border-color: var(--ink); background: var(--white); }
.ws-pre { display: flex; align-items: center; padding: 0 2px 0 14px; font: 500 15px var(--mono); color: var(--ink-2); white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.ws input { margin: 0; border: 0 !important; background: transparent !important; padding-left: 2px; font-family: var(--mono); }
.ws-note { display: block; margin-top: 6px; font-weight: 500; font-size: 13px; color: var(--ink-2); }
.ws-note.ok { color: var(--ok); } .ws-note.bad { color: var(--bad); }
form label.tick { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
form label.tick input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.signin-link { margin-left: 22px; font-weight: 600; font-size: 16px; text-decoration: none; }
.signin-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav nav .m-only { display: none; }
/* sign-in and terms pages */
body.page .nav { position: static; }
.signin { max-width: var(--wrap); margin: 0 auto; padding: 50px 20px 110px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.signin .brush { margin: 0 0 6px 4px; font-size: 52px; }
.signin-copy p:not(.brush) { font-size: 19px; color: var(--ink-2); max-width: 460px; }
.legal { max-width: 760px; margin: 0 auto; padding: 40px 20px 110px; }
.legal h1 { margin-bottom: 8px; }
.legal h2 { font-size: 26px; font-weight: 800; font-stretch: 106%; margin: 34px 0 8px; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal .updated { font-family: var(--mono); font-size: 14px; }
.legal .back { margin-top: 40px; font-weight: 700; }
@media (max-width: 900px) { .signin { grid-template-columns: 1fr; gap: 26px; } }

/* ------------------------------------------------------------ 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: 900; font-size: 21px; letter-spacing: -0.03em; }
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, .demo, .calc-grid { grid-template-columns: 1fr; gap: 26px; }
  .signin-link { display: none; }
  .nav nav .m-only { display: block; }
  .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; }
}