/* Parcelpop (working name). Design language: blueprint to launch.
   Cobalt, acid, ink and paper. Huge condensed type, full-screen colour chapters, one signature scroll scene. */
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-v2.woff2") format("woff2"); font-weight: 300 500; font-display: swap; }

:root {
  --cobalt: #1f3bff;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --pop: cubic-bezier(0.2, 1.6, 0.4, 1); /* the logo's own overshoot, kept for the few moments that should pop */
  --cobalt-deep: #1328c4;
  --acid: #d8ff3d;
  --ink: #0b0d14;
  --paper: #f3f3ef;
  --sky: #cfd8ff;
  --line: rgba(255, 255, 255, 0.85);
  --sans: "Archivo", "Arial Narrow", Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --pad: clamp(18px, 3.2vw, 48px);
  --max: 1480px;
  --chapter: clamp(72px, 11vw, 168px);
  --huge: clamp(3.4rem, 13.2vw, 20rem);
  --big: clamp(3rem, 9vw, 9.5rem);
  --mid: clamp(2rem, 4.6vw, 4.6rem);
  --stage-bg: var(--cobalt);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cobalt); color: var(--ink); font-family: var(--sans); font-stretch: 100%; font-size: clamp(1rem, 0.96rem + 0.22vw, 1.125rem); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 0.2em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; font-stretch: 62%; letter-spacing: -0.035em; line-height: 0.88; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
.band--paper :focus-visible, .band--acid :focus-visible, .band--sky :focus-visible { outline-color: var(--ink); }
.skip { position: absolute; left: var(--pad); top: -80px; background: var(--acid); color: var(--ink); padding: 10px 16px; z-index: 90; }
.skip:focus { top: 8px; }
mark.ph { background: none; color: inherit; text-decoration: underline wavy #e0b400; text-underline-offset: 0.16em; text-decoration-thickness: 1.5px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- header: wordmark and pills, hides on scroll down, flips colour over light chapters ---------- */
.bar { position: fixed; z-index: 70; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); background: transparent; transition: transform 0.35s ease, background-color 0.2s ease; pointer-events: none; }
.bar.solid { background: var(--bar-bg, #1f3bff); }
.bar.hide { transform: translateY(-120%); }
.bar > * { pointer-events: auto; }
.logo { --stem: #fff; --ball: var(--acid); --pop: var(--acid); display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-stretch: 62%; font-size: 2rem; letter-spacing: -0.02em; text-decoration: none; color: #fff; transition: color 0.2s ease; line-height: 1; }
.logo .wm b, .foot-logo .wm b { color: var(--pop); font-weight: 800; transition: color 0.2s ease; }
.mark { width: 1.45em; height: 1.45em; flex: none; overflow: visible; }
.m-stem { fill: var(--stem); transition: fill 0.2s ease; } .m-ball { fill: var(--ball); transition: fill 0.2s ease; }
.m-spark { stroke: var(--stem); stroke-width: 3.4; stroke-linecap: round; fill: none; transition: stroke 0.2s ease; }
.logo:hover .mark { animation: pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes pop { 0% { transform: scale(1) rotate(0); } 45% { transform: scale(1.22) rotate(-9deg); } 100% { transform: scale(1) rotate(0); } }
body[data-bar="light"] .logo { --stem: var(--ink); --ball: var(--cobalt); --pop: var(--cobalt); }
.foot-logo { margin-top: 0; --stem: #fff; --ball: var(--acid); --pop: var(--acid); display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-stretch: 62%; font-size: 2rem; letter-spacing: -0.02em; line-height: 1; margin-bottom: 14px; }
.pills { display: flex; gap: 8px; align-items: center; }
.pill { font: inherit; font-weight: 600; font-size: 0.95rem; white-space: nowrap; text-decoration: none; border: 0; cursor: pointer; border-radius: 999px; padding: 10px 18px; min-height: 42px; display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.18); color: #fff; transition: background-color 0.15s ease, color 0.15s ease; }
.pill:hover { background: #fff; color: var(--cobalt); }
.pill--solid { background: var(--acid); color: var(--ink); }
.pill--solid:hover { background: #fff; color: var(--ink); }
.pill[aria-current="page"] { background: #fff; color: var(--cobalt); }
body[data-bar="light"] .logo { color: var(--ink); }
body[data-bar="light"] .pill:not(.pill--solid) { background: rgba(11, 13, 20, 0.09); color: var(--ink); }
body[data-bar="light"] .pill:not(.pill--solid):hover, body[data-bar="light"] .pill[aria-current="page"] { background: var(--ink); color: #fff; }
.menu-btn { display: none; }

/* full-screen menu */
.menu { position: fixed; inset: 0; z-index: 65; background: var(--ink); color: #fff; padding: 110px var(--pad) var(--pad); display: none; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.menu.open { display: flex; }
.menu ul { display: grid; gap: 4px; }
.menu a { font-weight: 800; font-stretch: 62%; font-size: clamp(3.4rem, 15vw, 7rem); line-height: 0.95; letter-spacing: -0.03em; text-decoration: none; }
.menu a:hover { color: var(--acid); }
.menu p { margin: 24px 0 0; opacity: 0.8; font-size: 0.95rem; }
body.menu-open { overflow: hidden; }
body.menu-open .logo { color: #fff !important; --stem: #fff; --ball: var(--acid); --pop: var(--acid); }

/* STAGING: remove .stage-note markup at launch */
.stage-note { opacity: 0.75; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 700; font-size: 1.05rem; text-decoration: none; background: var(--acid); color: var(--ink); border: 0; border-radius: 999px; padding: 15px 28px; min-height: 54px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.btn:hover { background: #fff; transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--cobalt); color: #fff; }
.btn--line { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn--line:hover { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.band--cobalt .btn--line:hover, .band--ink .btn--line:hover { background: #fff; color: var(--cobalt); box-shadow: inset 0 0 0 2px #fff; }

/* ---------- chapters ---------- */
.band { padding: var(--chapter) 0; position: relative; }
.band--cobalt { background: var(--cobalt); color: #fff; }
.band--ink { background: var(--ink); color: #fff; }
.band--paper { background: var(--paper); color: var(--ink); }
.band--acid { background: var(--acid); color: var(--ink); }
.band--sky { background: var(--sky); color: var(--ink); }
.cap { font-weight: 800; font-stretch: 62%; font-size: var(--big); line-height: 0.84; letter-spacing: -0.04em; margin-bottom: 0.3em; }
.statement { font-weight: 700; font-stretch: 75%; font-size: clamp(2.2rem, 4.6vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; max-width: 30ch; margin: 0; text-wrap: balance; }
.band--paper .statement, .band--sky .statement { color: var(--ink); }
.sub { font-size: clamp(1.1rem, 1rem + 0.7vw, 1.5rem); line-height: 1.38; font-weight: 500; max-width: 34ch; }
.head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 20px clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(36px, 5vw, 80px); }
.head .sub { margin: 0; }

/* ---------- hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; padding: 120px var(--pad) var(--pad); display: grid; grid-template-rows: 1fr auto; background: var(--cobalt); color: #fff; position: relative; overflow: hidden; }
.hero-top { display: flex; justify-content: flex-end; align-items: flex-start; }
.hero-top p { max-width: 27ch; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem); line-height: 1.3; margin: 0; font-weight: 500; }
.hero h1 { font-size: var(--huge); line-height: 0.8; letter-spacing: -0.035em; }
.hero h1 > span { display: block; }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: clamp(20px, 3vw, 40px); flex-wrap: wrap; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { border: 2px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 0.9rem; }
.cue { font-weight: 600; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; text-decoration: none; }
.cue i { width: 44px; height: 44px; border-radius: 50%; background: var(--acid); display: grid; place-items: center; }
.cue i::after { content: ""; width: 10px; height: 10px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-2px, -2px); }

.page-hero { background: var(--cobalt); color: #fff; padding: 170px 0 clamp(56px, 8vw, 120px); }
.page-hero h1 { font-size: clamp(4rem, 14vw, 17rem); line-height: 0.8; letter-spacing: -0.04em; margin-bottom: 0.18em; }
.page-hero .sub { margin: 0; }
.crumbs { font-weight: 600; font-size: 0.95rem; margin-bottom: 32px; opacity: 0.95; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs ol { display: flex; gap: 10px; flex-wrap: wrap; }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: 0.55; }

/* ---------- pinned build scene ---------- */
.build { height: 400vh; position: relative; background: var(--stage-bg); }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(20px, 3vw, 56px); align-items: center; padding: 90px var(--pad) var(--pad); overflow: hidden; color: #fff; }
.build[data-done="1"] .pin { color: var(--ink); }
.stagehead { position: relative; height: clamp(300px, 52vh, 520px); }
.step { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(24px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; }
.step.on { opacity: 1; transform: none; pointer-events: auto; }
.step h2 { font-size: clamp(4rem, 10.5vw, 11rem); line-height: 0.82; letter-spacing: -0.04em; margin: 0 0 0.2em; }
.step p { max-width: 30ch; font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.45rem); line-height: 1.35; font-weight: 500; }
.dots { position: absolute; left: 0; bottom: 0; display: flex; gap: 8px; }
.dots li { width: 34px; height: 6px; border-radius: 3px; background: currentColor; opacity: 0.28; transition: opacity 0.3s ease; }
.dots li.on { opacity: 1; }
.device { container-type: inline-size; width: 100%; max-width: 980px; justify-self: center; position: relative; }
.laptop { background: #0e1220; border-radius: 1.4cqw 1.4cqw 0 0; padding: 1.2cqw 1.2cqw 0; box-shadow: 0 3cqw 8cqw -3cqw rgba(0, 0, 0, 0.55); }
.screen { aspect-ratio: 16 / 9.6; border-radius: 0.7cqw 0.7cqw 0 0; overflow: hidden; position: relative; background: var(--cobalt-deep); }
.base { height: 1.8cqw; background: #cfd3d8; border-radius: 0 0 1.2cqw 1.2cqw; width: 106%; margin-left: -3%; }
.wire { position: absolute; inset: 0; color: #fff; background: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px) 0 0 / 4cqw 4cqw, linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px) 0 0 / 4cqw 4cqw, var(--cobalt-deep); }
.wire .b { position: absolute; border: 0.18cqw dashed rgba(255, 255, 255, 0.85); border-radius: 0.3cqw; }
.wire .f { position: absolute; background: rgba(255, 255, 255, 0.55); height: 0.9cqw; border-radius: 0.5cqw; }
.wire .x::before, .wire .x::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 0.14cqw; background: rgba(255, 255, 255, 0.45); transform: rotate(18deg); }
.wire .x::after { transform: rotate(-18deg); }
.wire small { position: absolute; font-size: 0.95cqw; font-weight: 600; background: var(--cobalt-deep); padding: 0.1cqw 0.5cqw; }
.done { position: absolute; inset: 0; background: #fbf8f3; color: #1d1b18; clip-path: inset(0 0 100% 0); will-change: clip-path; }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 0.5cqw; background: var(--acid); box-shadow: 0 0 2cqw rgba(216, 255, 61, 0.9); opacity: 0; z-index: 3; }
.scan b { position: absolute; right: 1.6cqw; top: 0.9cqw; background: var(--acid); color: var(--ink); font-size: 1cqw; font-weight: 800; padding: 0.3cqw 1cqw; border-radius: 2cqw; white-space: nowrap; }
.chip { position: absolute; z-index: 4; background: var(--acid); color: var(--ink); font-weight: 700; font-size: clamp(0.72rem, 1.15cqw, 0.95rem); padding: 0.5cqw 1.2cqw; border-radius: 2cqw; opacity: 0; transform: translateY(1cqw) scale(0.94); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); white-space: nowrap; }
.chip.on { opacity: 1; transform: none; }
.chip.c1 { left: 2%; top: -7%; } .chip.c2 { right: 2%; top: -7%; } .chip.c3 { left: 4%; bottom: -9%; } .chip.c4 { right: 4%; bottom: -9%; }

/* ---------- services: huge rows ---------- */
.rows { border-top: 2px solid rgba(255, 255, 255, 0.28); }
.row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.7fr); gap: 16px clamp(20px, 3vw, 56px); align-items: center; padding: clamp(22px, 3vw, 44px) 0; border-bottom: 2px solid rgba(255, 255, 255, 0.28); text-decoration: none; color: #fff; position: relative; transition: color 0.2s ease; }
.row::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--pad)); background: var(--acid); transform: scaleY(0); transform-origin: bottom; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 0; }
.row > * { position: relative; z-index: 1; }
.row:hover, .row:focus-visible { color: var(--ink); }
.row:hover::before, .row:focus-visible::before { transform: scaleY(1); }
.row h3 { font-size: clamp(2.6rem, 7vw, 7.5rem); line-height: 0.86; letter-spacing: -0.04em; }
.row p { margin: 0; font-weight: 500; max-width: 34ch; }
.row ul { display: flex; flex-wrap: wrap; gap: 6px; }
.row li { border: 2px solid currentColor; border-radius: 999px; padding: 3px 12px; font-size: 0.85rem; font-weight: 600; }

/* ---------- concept work ---------- */
.works { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.work { border-radius: clamp(18px, 2.4vw, 36px); overflow: hidden; display: flex; flex-direction: column; color: var(--ink); }
.work .art { padding: clamp(24px, 4vw, 64px) clamp(18px, 3vw, 48px) 0; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.work .cap-row { padding: 20px clamp(18px, 3vw, 36px) 26px; display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.work h3 { font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 0.9; }
.work p { margin: 4px 0 0; max-width: 36ch; font-weight: 500; }
.tag { display: inline-block; font-weight: 700; font-size: 0.8rem; border: 2px solid currentColor; border-radius: 999px; padding: 3px 12px; }
.w1 { grid-column: span 7; background: var(--acid); }
.w2 { grid-column: span 5; background: #ffd6e3; }
.w3 { grid-column: span 5; background: var(--sky); }
.w4 { grid-column: span 7; background: var(--cobalt); color: #fff; }

/* ---------- process ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); counter-reset: s; }
.steps li { counter-increment: s; }
.steps li::before { content: counter(s); display: block; font-weight: 800; font-stretch: 62%; font-size: clamp(5rem, 11vw, 12rem); line-height: 0.8; color: var(--acid); margin-bottom: 14px; }
.steps h3 { font-size: clamp(1.8rem, 2.6vw, 2.8rem); margin-bottom: 8px; line-height: 0.95; }
.steps p { margin: 0; font-size: 1rem; }
.steps small { display: block; margin-top: 12px; font-weight: 700; }

/* ---------- packages ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.plan { border-radius: clamp(18px, 2.4vw, 32px); padding: clamp(24px, 2.8vw, 44px); display: flex; flex-direction: column; gap: 14px; min-height: 560px; }
.plan--a { background: var(--sky); }
.plan--b { background: var(--cobalt); color: #fff; }
.plan--c { background: var(--acid); }
.plan h3 { font-size: clamp(2.4rem, 4vw, 4rem); }
.amt { font-weight: 800; font-stretch: 62%; font-size: clamp(3.4rem, 6vw, 6.4rem); line-height: 0.85; letter-spacing: -0.04em; }
.amt small { display: block; font-stretch: 100%; font-weight: 600; font-size: 0.95rem; letter-spacing: 0; margin-bottom: 6px; opacity: 0.85; }
.plan ul { display: grid; gap: 8px; margin-top: 4px; }
.plan li { padding-left: 26px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 3px; top: 0.4em; width: 7px; height: 12px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.plan .meta { margin-top: auto; font-size: 0.95rem; opacity: 0.9; }
.plan .out { font-size: 0.95rem; opacity: 0.85; }
.plan .btn { align-self: flex-start; }
.plan--b .btn { background: var(--acid); } .plan--b .btn:hover { background: #fff; }
.plan:not(.plan--b) .btn { background: var(--ink); color: #fff; } .plan:not(.plan--b) .btn:hover { background: var(--cobalt); }
.retain { margin-top: clamp(14px, 2vw, 28px); background: var(--ink); color: #fff; border-radius: clamp(18px, 2.4vw, 32px); padding: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 16px clamp(20px, 3vw, 48px); align-items: center; }
.retain h3 { font-size: clamp(2.4rem, 4vw, 4rem); }
.retain p { margin: 0; max-width: 46ch; }
.retain .amt { font-size: clamp(2.2rem, 3.4vw, 3.4rem); }
.retain .amt small { display: inline; font-size: 1rem; }

table.compare { width: 100%; border-collapse: collapse; background: #fff; color: var(--ink); border-radius: 20px; overflow: hidden; }
.compare th, .compare td { padding: 16px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid #e3e5ea; }
.compare thead th { background: var(--ink); color: #fff; font-weight: 800; font-stretch: 75%; font-size: 1.2rem; }
.compare tbody th { font-weight: 700; width: 26%; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* ---------- measured ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.checks { display: grid; gap: 0; border-top: 2px solid rgba(255, 255, 255, 0.28); }
.checks li { padding: 22px 0 22px 56px; border-bottom: 2px solid rgba(255, 255, 255, 0.28); position: relative; font-weight: 700; font-size: 1.2rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: 24px; width: 30px; height: 30px; background: var(--acid); border-radius: 50%; }
.checks li::after { content: ""; position: absolute; left: 10px; top: 29px; width: 8px; height: 14px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.checks span { display: block; font-weight: 400; font-size: 1rem; opacity: 0.8; }

/* ---------- detail blocks (services page) ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 96px); padding: clamp(48px, 7vw, 100px) 0; border-top: 2px solid rgba(11, 13, 20, 0.18); }
.detail:first-of-type { border-top: 0; }
.detail h2 { font-size: var(--big); line-height: 0.84; margin-bottom: 0.25em; }
.detail h3 { font-size: 1.5rem; letter-spacing: -0.02em; font-stretch: 75%; margin: 1.6em 0 0.5em; line-height: 1; }
.detail ul.list { display: grid; gap: 8px; margin: 0 0 1em; }
.detail ul.list li { padding-left: 22px; position: relative; }
.detail ul.list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 10px; height: 3px; background: var(--cobalt); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips li { border: 2px solid var(--ink); border-radius: 999px; padding: 4px 14px; font-weight: 700; font-size: 0.9rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 2px solid rgba(11, 13, 20, 0.2); max-width: 1100px; }
.faq details { border-bottom: 2px solid rgba(11, 13, 20, 0.2); }
.faq summary { cursor: pointer; list-style: none; padding: 26px 64px 26px 0; font-weight: 800; font-stretch: 62%; font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 0.95; letter-spacing: -0.03em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38'%3E%3Cpath d='M19 10v18M10 19h18' stroke='%23d8ff3d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; transition: transform 0.25s ease; }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { max-width: 62ch; padding-bottom: 28px; font-size: 1.15rem; margin: 0; }
.faq summary:hover { color: var(--cobalt); }

/* ---------- CTA + footer ---------- */
.cta h2 { font-size: var(--huge); line-height: 0.8; letter-spacing: -0.04em; max-width: 10ch; margin-bottom: 0.2em; }
.cta .sub { margin-bottom: 28px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.site-footer { background: var(--ink); color: #fff; padding-top: clamp(48px, 7vw, 96px); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding-bottom: clamp(32px, 4vw, 56px); }
.foot-h { font-size: 1.1rem; font-weight: 800; margin: 0 0 8px; line-height: 1.2; }
.foot-grid ul { display: grid; gap: 0; }
.foot-grid a { display: inline-block; padding: 6px 0; text-decoration: none; } .foot-grid a:hover { text-decoration: underline; color: var(--acid); }
.foot-grid p { font-size: 0.95rem; opacity: 0.85; max-width: 32ch; }
.foot-grid p.foot-logo { font-size: 2rem; opacity: 1; max-width: none; margin: 0 0 14px; }
.foot-legal { color: rgba(255,255,255,0.8); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 0.9rem; padding: 20px 0 24px; border-top: 2px solid rgba(255, 255, 255, 0.18); }

/* ---------- about / values ---------- */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.value { color: var(--ink); border-radius: clamp(18px, 2.4vw, 32px); padding: clamp(24px, 3vw, 44px); min-height: 360px; display: flex; flex-direction: column; gap: 14px; }
.value:nth-child(1) { background: var(--acid); } .value:nth-child(2) { background: var(--sky); } .value:nth-child(3) { background: #fff; }
.value h3 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
.value p { margin: 0; }
.prose p { max-width: 54ch; font-size: 1.2rem; }
.prose .statement { margin-bottom: 0.8em; }

/* ---------- forms ---------- */
.form { display: grid; gap: 22px; background: #fff; color: var(--ink); border-radius: clamp(18px, 2.4vw, 32px); padding: clamp(24px, 3.4vw, 52px); }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-weight: 700; }
.field small { font-weight: 400; opacity: 0.75; }
.field input, .field select, .field textarea { font: inherit; color: inherit; background: var(--paper); border: 2px solid transparent; border-radius: 14px; padding: 14px 16px; min-height: 54px; width: 100%; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--ink); outline: 0; background: #fff; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; }
.check input { width: 26px; height: 26px; margin-top: 2px; accent-color: var(--cobalt); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-weight: 700; min-height: 1.5em; margin: 0; }
.form-status[data-state="ok"] { background: var(--acid); border-radius: 14px; padding: 14px 18px; }
.form-status[data-state="err"] { background: #ffd6e3; border-radius: 14px; padding: 14px 18px; }
.aside { border-radius: clamp(18px, 2.4vw, 32px); padding: clamp(24px, 3vw, 40px); background: var(--acid); }
.aside + .aside { margin-top: 20px; background: var(--sky); }
.aside h3 { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: 14px; }
.aside p:last-child { margin-bottom: 0; }

/* ---------- reveals ---------- */
.js .rise { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.22s var(--ease-out), rotate 0.22s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rise.in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .head, .split, .detail { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 10px; }
  .works { grid-template-columns: 1fr; } .w1, .w2, .w3, .w4 { grid-column: 1; }
  .steps { grid-template-columns: 1fr 1fr; }
  .plans, .values { grid-template-columns: 1fr; } .plan { min-height: 0; } .value { min-height: 0; }
  .retain { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; padding-top: 84px; gap: 12px; }
  .stagehead { height: clamp(150px, 26vh, 230px); }
  .step h2 { font-size: clamp(3rem, 15vw, 6rem); } .step p { font-size: 1rem; max-width: 34ch; }
  .chip.c1, .chip.c2, .chip.c4 { display: none; } .chip.c3 { left: 4%; bottom: -9%; }
  .pills .pill:not(.pill--solid):not(.menu-btn) { display: none; }
  .menu-btn { display: inline-flex; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .hero-top { justify-content: flex-start; }
}
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } .row2 { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .logo:hover .mark { animation: none; }
  html { scroll-behavior: auto; }
  .btn, .row::before, .chip { transition: none; }
  .js .rise { transform: none; transition: opacity 0.5s ease; transition-delay: calc(var(--i, 0) * 40ms); }
  .bar { transition: none; }
}

@keyframes note-out { to { opacity: 0; visibility: hidden; } }

/* small screens: the logo and two pills must fit on one line without overlapping */
@media (max-width: 640px) {
  .bar { gap: 8px; }
  .logo { font-size: 1.55rem; gap: 8px; }
  .pills { gap: 6px; }
  .pill { padding: 9px 14px; min-height: 40px; }
}

/* very small phones (320 to 360): tighten once more so logo, CTA and menu all stay on screen */
@media (max-width: 360px) {
  .logo { font-size: 1.25rem; gap: 6px; }
  .pills { gap: 5px; }
  .pill { padding: 8px 11px; font-size: 0.85rem; min-height: 38px; }
}
.band--acid .checks, .band--paper .checks, .band--sky .checks { border-top-color: rgba(11, 13, 20, 0.35); }
.band--acid .checks li, .band--paper .checks li, .band--sky .checks li { border-bottom-color: rgba(11, 13, 20, 0.35); }
.band--acid .checks li::before, .band--paper .checks li::before, .band--sky .checks li::before { background: var(--ink); }
.band--acid .checks li::after, .band--paper .checks li::after, .band--sky .checks li::after { border-color: var(--acid); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.aside h2 { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: 14px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow: 0 0 0 3px var(--cobalt, #1f3bff); }
a, button, summary, label, select { touch-action: manipulation; }
@media (max-width: 640px) {
  .table-scroll { overflow: visible; }
  table.compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  table.compare { background: transparent; border-radius: 0; overflow: visible; box-shadow: none !important; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tbody tr { background: #fff; border-radius: 18px; padding: 8px 0; margin-bottom: 14px; }
  .compare tbody th { width: 100%; font-size: 1.25rem; padding: 14px 20px 4px; border: 0; }
  .compare td { padding: 6px 20px 10px; border: 0; }
  .compare td::before { content: attr(data-label); display: block; font-size: 0.78rem; font-weight: 700; opacity: 0.6; margin-bottom: 2px; }
}
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: end; }
.cta-steps { margin-bottom: 8px; }
@media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; align-items: start; } .cta-steps { margin-bottom: 0; } }
.aside.aside--paper { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.aside--paper ul.list { display: grid; gap: 8px; margin: 0; }
.aside--paper ul.list li { padding-left: 22px; position: relative; }
.aside--paper ul.list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 10px; height: 3px; background: var(--cobalt); }

/* ---------- brand pops: the logo's overshoot, used sparingly ---------- */
.pop-dot { display: inline-block; color: var(--acid); transform-origin: 50% 80%; animation: dot-pop 0.55s var(--pop) 0.45s both; }
@keyframes dot-pop { from { transform: scale(0); } to { transform: scale(1); } }
.checks.rise li::before, .checks.rise li::after { scale: 1; }
.js .checks.rise:not(.in) li::before, .js .checks.rise:not(.in) li::after { scale: 0; }
.js .checks.rise.in li::before, .js .checks.rise.in li::after { animation: tick-pop 0.45s var(--pop) both; animation-delay: calc(var(--k, 0) * 70ms + 160ms); }
.checks li:nth-child(2) { --k: 1; } .checks li:nth-child(3) { --k: 2; } .checks li:nth-child(4) { --k: 3; } .checks li:nth-child(5) { --k: 4; }
@keyframes tick-pop { from { scale: 0; } to { scale: 1; } }
.btn:active, .pill:active { transform: scale(0.96); transition-duration: 0.08s; }
.burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 80; }
.burst i { position: absolute; left: -1.5px; top: -5px; width: 3px; height: 10px; border-radius: 2px; background: var(--bc, var(--acid)); transform: rotate(var(--a)) translateY(-16px) scaleY(0.4); opacity: 1; animation: spark 0.5s var(--ease-out) forwards; }
@keyframes spark { to { transform: rotate(var(--a)) translateY(-38px) scaleY(1); opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn--line):hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
  .band--ink .btn:not(.btn--line):hover, .band--cobalt .btn:not(.btn--line):hover, .page-hero .btn:not(.btn--line):hover { box-shadow: 4px 4px 0 var(--acid); background: #fff; }
  .btn:not(.btn--line) { transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out); }
  .pill:hover { transform: scale(1.06); }
  .pill { transition: background-color 0.15s ease, color 0.15s ease, transform 0.18s var(--ease-out); }
  .chips li { transition: transform 0.18s var(--ease-out), background-color 0.15s ease; }
  .chips li:hover { transform: scale(1.06) rotate(-1.5deg); background: var(--acid); }
  .plan:hover, .value:hover, .work:hover, .aside:hover { translate: 0 -6px; rotate: -0.4deg; }
  .logo:hover .pop-dot { animation: none; }
  h1:hover .pop-dot { animation: dot-pop 0.5s var(--pop); }
}
@media (prefers-reduced-motion: reduce) {
  .pop-dot { animation: none; }
  .js .checks.rise.in li::before, .js .checks.rise.in li::after { animation: none; }
  .js .checks.rise:not(.in) li::before, .js .checks.rise:not(.in) li::after { scale: 1; }
  .burst { display: none; }
  .btn:active, .pill:active { transform: none; }
  .plan:hover, .value:hover, .work:hover, .aside:hover, .chips li:hover, .pill:hover { translate: none; rotate: none; transform: none; }
}
.nw { white-space: nowrap; }

/* ---------- integrations concept diagram ---------- */
.imap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(24px, 5vw, 88px); align-items: center; margin-top: clamp(24px, 4vw, 48px); }
.imap ul { display: grid; gap: 16px; }
.imap li { position: relative; padding: 16px 24px; border-radius: 999px; font-weight: 700; font-size: 1.15rem; color: var(--ink); background: #fff; box-shadow: inset 0 0 0 2px var(--ink); text-align: center; }
.imap li:nth-child(2) { background: var(--acid); } .imap li:nth-child(3) { background: var(--sky); }
.imap ul:first-child li::after, .imap ul:last-child li::before { content: ""; position: absolute; top: 50%; width: clamp(24px, 5vw, 88px); height: 2px; background: var(--ink); }
.imap ul:first-child li::after { left: 100%; } .imap ul:last-child li::before { right: 100%; }
.imap-core { display: grid; place-items: center; width: clamp(130px, 17vw, 220px); aspect-ratio: 1; border-radius: 50%; background: var(--cobalt); color: #fff; font-weight: 800; font-stretch: 62%; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 0.9; text-align: center; letter-spacing: -0.03em; }
.imap-note { margin: 18px 0 0; font-size: 0.95rem; opacity: 0.8; }
@media (max-width: 760px) {
  .imap { grid-template-columns: 1fr; justify-items: stretch; }
  .imap-core { justify-self: center; order: -1; }
  .imap ul li::before, .imap ul li::after { display: none; }
}
.wire .b, .wire .f, .wire small { left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); }
.wire .b { width: calc(var(--w) * 1cqw); height: calc(var(--h) * 1cqw); }
.wire .f { width: calc(var(--w) * 1cqw); height: calc(var(--h, 0.9) * 1cqw); }
.checks li > a { color: inherit; text-decoration: none; display: block; } .checks li > a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* The build scene without animation, as a designed composition: used when JavaScript is off and when the visitor asks for reduced
   motion (on Windows that is the "Animation effects" setting, which virtual machines and remote desktops switch off).
   The two copies below must stay identical. */
html:not(.js) .build { height: auto; background: var(--cobalt); }
html:not(.js) .pin { position: static; height: auto; display: block; overflow: visible; max-width: var(--max); margin: 0 auto; padding: 110px var(--pad) 96px; color: #fff; }
html:not(.js) .stagehead { height: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); counter-reset: cs; margin-bottom: clamp(40px, 6vw, 80px); }
html:not(.js) .step { position: static; opacity: 1; transform: none; pointer-events: auto; display: block; counter-increment: cs; }
html:not(.js) .step::before { content: counter(cs); display: block; color: var(--acid); font-weight: 800; font-stretch: 62%; font-size: clamp(3rem, 6vw, 6rem); line-height: 0.8; margin-bottom: 14px; }
html:not(.js) .step h2 { font-size: clamp(2.4rem, 4.4vw, 4.6rem); margin: 0 0 0.25em; }
html:not(.js) .step p { max-width: 28ch; font-size: 1.05rem; }
html:not(.js) .dots, html:not(.js) .wire, html:not(.js) .scan { display: none; }
html:not(.js) .device { margin-top: clamp(28px, 4vw, 56px); }
html:not(.js) .done { clip-path: none; } html:not(.js) .chip { opacity: 1; transform: none; }
@media (max-width: 900px) { html:not(.js) .stagehead { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { html:not(.js) .stagehead { grid-template-columns: 1fr; } html:not(.js) .step h2 { font-size: clamp(3rem, 15vw, 5rem); } }
@media (prefers-reduced-motion: reduce) {
  .build { height: auto; background: var(--cobalt); }
  .pin { position: static; height: auto; display: block; overflow: visible; max-width: var(--max); margin: 0 auto; padding: 110px var(--pad) 96px; color: #fff; }
  .stagehead { height: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); counter-reset: cs; margin-bottom: clamp(40px, 6vw, 80px); }
  .step { position: static; opacity: 1; transform: none; pointer-events: auto; display: block; counter-increment: cs; }
  .step::before { content: counter(cs); display: block; color: var(--acid); font-weight: 800; font-stretch: 62%; font-size: clamp(3rem, 6vw, 6rem); line-height: 0.8; margin-bottom: 14px; }
  .step h2 { font-size: clamp(2.4rem, 4.4vw, 4.6rem); margin: 0 0 0.25em; }
  .step p { max-width: 28ch; font-size: 1.05rem; }
  .dots, .wire, .scan { display: none; }
  .device { margin-top: clamp(28px, 4vw, 56px); }
  .done { clip-path: none; } .chip { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) { .stagehead { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) and (max-width: 560px) { .stagehead { grid-template-columns: 1fr; } .step h2 { font-size: clamp(3rem, 15vw, 5rem); } }

/* In two-column sections the heading has margin 0, and its tight line height lets descenders (y, p, q, g) run into the line below. */
.split .cap + .sub { margin-top: calc(var(--big) * 0.3); }

/* Line breaks (2026-10-26, operator: sentences cut off to a new line randomly). Short paragraphs balance their lines, longer ones avoid a lone last word. text-wrap is one property, so this is the single place that sets it for body text. Short words and numbers are also glued to their neighbour with a non-breaking space by the build (glue() in tools/build.mjs). */
p, li { text-wrap: pretty; }
.sub, .hero-top p, .step p, .row p, .work p, .retain p, .statement { text-wrap: balance; }

/* One sentence per line (2026-10-26, operator: "fix"): a run of short sentences reads best when each sits on its own line, not wrapped across the sentence boundary. The measure is wide enough for the longest sentence on desktop; on a phone each sentence wraps on its own. */
.sub.sentences { max-width: 56ch; text-wrap: pretty; }
.sub.sentences > span { display: block; }