/* fonts, served from rocwork.in (no third-party font host) */
@font-face { font-family: "Newsreader"; src: url(/fonts/newsreader-latin.woff2) format("woff2"); font-weight: 300 500; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url(/fonts/geist-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* the rupee sign lives in Google's latin-ext file; this is just that one glyph (1 KB) */
@font-face { font-family: "Geist"; src: url(/fonts/geist-rupee.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+20B9; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/geist-mono-latin.woff2) format("woff2"); font-weight: 400 500; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
[hidden] { display: none !important; }


/* Pages V2: light and dark sections by design, as on amperos.com (no theme switch).
   Every page opens dark, the working part sits on cream with dark picture panels, the close returns to dark.
   Same tokens, bands, type, buttons, nav, footer and motion rules: fades and blurs run for everyone,
   only real movement waits for prefers-reduced-motion: no-preference. */

/* ---------- tokens: two bands, espresso and cream (the home page's) ---------- */
:root {
  color-scheme: light;
  --esp: #160E0B; --esp-2: #211612; --esp-3: #33241E; --on-esp: #F4ECE4; --on-esp-mute: #A5978F; --amber: #E0A16E;
  --cream: #F8F4EE; --paper: #FFFDF9; --sand: #EFE5DA; --ink: #1C1412; --ink-mute: #6B5D58; --rule: #E6DBD1;
  --rust: #8A3B1E; --on-rust: #FFF6F0; --good: #1E8E3E; --warn: #D2691E;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 1px 2px rgb(60 30 15 / .08), 0 12px 28px -8px rgb(60 30 15 / .18), 0 40px 80px -30px rgb(60 30 15 / .28);
  --rise: 0px; --slide: 0px;
}
@media (prefers-reduced-motion: no-preference) { :root { --rise: 18px; --slide: 28px; --stamp: 1.45; } }
@property --n-fg { syntax: "<color>"; inherits: true; initial-value: #F4ECE4; }
@property --n-tint { syntax: "<color>"; inherits: true; initial-value: #160E0B; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--esp); color: var(--on-esp); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.rupee { font-family: var(--sans); font-weight: 400; }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.band-d { background: var(--esp); color: var(--on-esp); --fg: var(--on-esp); --mute: var(--on-esp-mute); --line: var(--esp-3); --acc: var(--amber); }
.band-l { background: var(--cream); color: var(--ink); --fg: var(--ink); --mute: var(--ink-mute); --line: var(--rule); --acc: var(--rust); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4rem); line-height: 1.02; letter-spacing: -.025em; }
h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.06; }
h3 { font-size: 1.5rem; line-height: 1.2; }
.lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.5; color: var(--mute); max-width: 34em; margin: 0; text-wrap: pretty; }
.label { font-size: .9375rem; color: var(--mute); margin: 0 0 14px; }

/* ---------- reveal ---------- */
.rv { transition: opacity .9s var(--ease), filter .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.rv.pre { opacity: 0; filter: blur(10px); transform: translateY(var(--rise)); }
.w-in { display: inline-block; }
@keyframes rise { from { opacity: 0; filter: blur(6px); transform: translateY(calc(var(--rise) * .6)); } to { opacity: 1; filter: none; transform: none; } }
@keyframes slide { from { opacity: 0; filter: blur(6px); transform: translateX(var(--slide)); } to { opacity: 1; filter: none; transform: none; } }
@keyframes out { to { opacity: 0; filter: blur(4px); } }
@keyframes breathe { 50% { opacity: .3; } }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--sans); text-decoration: none; padding: 13px 20px; border-radius: 8px; border: 1px solid transparent; transition: transform .25s var(--ease), background .3s, color .3s, border-color .3s; white-space: nowrap; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%); opacity: 0; transform: translateX(-100%); }
.btn:hover::after { opacity: 1; transform: translateX(100%); transition: transform .8s var(--ease), opacity .2s; }
@media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-1px); } }
.btn-cream { background: #FCF7F2; color: #1C1412; }
.btn-rust { background: var(--rust); color: var(--on-rust); }
.btn-ghost { border-color: color-mix(in srgb, var(--fg) 30%, transparent); color: var(--fg); }
.btn-ghost::after { background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--fg) 14%, transparent) 50%, transparent 65%); }
.btn-sm { padding: 9px 14px; font-size: 14px; }
.chrome { --c1: color-mix(in srgb, currentColor 18%, #C98452); --c2: color-mix(in srgb, currentColor 52%, #C98452); width: 18px; height: 18px; margin-left: -2px; flex: none; }
.btn-sm .chrome { width: 16px; height: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- nav: the home page's graded blur, colours follow the band ---------- */
.nav { position: fixed; inset: env(safe-area-inset-top, 0px) 0 auto; z-index: 20; --n-fg: var(--on-esp); --n-tint: var(--esp); color: var(--n-fg); transition: --n-fg .45s var(--ease), --n-tint .45s var(--ease); }
.nav[data-tone="l"] { --n-fg: var(--ink); --n-tint: var(--cream); }
.nav-blur { position: absolute; inset: 0 0 -30px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--n-tint) 78%, transparent), color-mix(in srgb, var(--n-tint) 40%, transparent) 55%, transparent); }
.nav-blur i { position: absolute; inset: 0; }
.nav-blur i:nth-child(1) { backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); mask: linear-gradient(to top, transparent 0%, #000 20%, #000 40%, transparent 60%); }
.nav-blur i:nth-child(2) { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); mask: linear-gradient(to top, transparent 20%, #000 40%, #000 60%, transparent 80%); }
.nav-blur i:nth-child(3) { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); mask: linear-gradient(to top, transparent 40%, #000 60%, #000 80%, transparent 100%); }
.nav-blur i:nth-child(4) { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); mask: linear-gradient(to top, transparent 60%, #000 80%, #000 100%); }
.nav-blur i:nth-child(5) { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); mask: linear-gradient(to top, transparent 80%, #000 100%); }
.nav-in { display: flex; align-items: center; gap: 36px; height: 68px; }
.brand { font: 500 25px/1 var(--serif); letter-spacing: -.02em; text-decoration: none; }
.nav-links { display: flex; gap: 28px; font-size: 15px; }
.nav-links a { text-decoration: none; opacity: .78; transition: opacity .2s; position: relative; }
.nav-links a:hover, .nav-links a[aria-current] { opacity: 1; }
.nav-links a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; opacity: .6; }
.nav .btn { margin-left: auto; background: var(--n-fg); color: var(--n-tint); }
@media (max-width: 820px) { .nav-links { display: none; } }

/* ---------- the page head: the hero card, with an object picture where the demo sits ---------- */
.top { padding-block: 76px 0; }
.page-card { position: relative; overflow: hidden; border-radius: 20px; background: var(--esp-2); isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4.5vw, 64px); min-height: clamp(300px, 30vw, 400px); }
.page-card::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 75% at 82% 30%, rgb(224 161 110 / .15), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgb(138 59 30 / .28), transparent 70%); }
.page-card::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 160px; }
.page-card .copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.page-card .lede { color: color-mix(in srgb, var(--on-esp) 78%, transparent); }
.page-card .lede a { color: var(--amber); text-underline-offset: 3px; }
.meta { font: 400 13px/1.4 var(--mono); color: var(--on-esp-mute); margin: 0; letter-spacing: .02em; }
.page-card .img { width: clamp(180px, 23vw, 290px); justify-self: end; }
@media (max-width: 760px) { .page-card { grid-template-columns: 1fr; min-height: 0; } .page-card .img { order: -1; width: 170px; justify-self: start; margin: -8px 0 -4px -6px; } }

/* object pictures: drawings standing in for halftone photo cut-outs, as on the home page */
.img { position: relative; margin: 0; flex: none; }
.img svg { display: block; width: 100%; height: auto; overflow: visible; }
.steam path { animation: breathe 2.6s ease-in-out infinite; }
.steam path + path { animation-delay: -1.3s; }

/* ---------- sections ---------- */
.section { padding-block: clamp(56px, 6.5vw, 96px); }
.band-d + .band-d, .band-l + .band-l { padding-top: clamp(24px, 3vw, 48px); }
.head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(32px, 4vw, 56px); }

/* ---------- drawn UI (the home page's How it works pieces) ---------- */
.ui { width: min(340px, 100%); background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); font: 13px/1.45 var(--sans); text-align: left; overflow: hidden; }
.ui-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--rule); background: var(--cream); font-weight: 500; }
.ui-h svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-mute); }
.mark { width: 18px; height: 18px; border-radius: 4px; background: var(--rust); color: var(--on-rust); font: 700 11px/18px var(--sans); text-align: center; flex: none; }
.ui-b { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ui .mute { color: var(--ink-mute); }
.ui .pbtn { display: block; text-align: center; padding: 10px; border-radius: 7px; background: var(--rust); color: var(--on-rust); font-weight: 500; }
.ui .field { border: 1px solid var(--rule); border-radius: 7px; padding: 9px 11px; background: var(--cream); min-height: 40px; }
.ui .center { text-align: center; }
.ui h4 { margin: 0; font: 600 16px/1.3 var(--sans); }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ti { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-mute); }
.type { display: inline-block; }
.code { display: flex; gap: 6px; }
.code i { font-style: normal; flex: 1; text-align: center; border: 1px solid var(--rule); border-radius: 6px; padding: 7px 0; font: 500 15px/1.2 var(--mono); background: var(--cream); }
.pbar { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.pbar i { display: block; height: 100%; width: 94%; border-radius: 3px; background: var(--rust); transform-origin: left; }
.keep { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: var(--cream); border-radius: 6px; font-size: 12px; color: var(--ink-mute); }
.keep svg { color: var(--warn); width: 15px; height: 15px; flex: none; }
.num-tab { font-variant-numeric: tabular-nums; }
.toast { display: flex; gap: 10px; align-items: center; padding: 11px 12px; width: min(280px, 100%); }
.toast b { display: block; font-size: 12.5px; }
.toast .live { width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-left: auto; flex: none; animation: breathe 1.8s ease-in-out infinite; }
.st-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--rust); color: var(--on-rust); font: 700 18px/36px var(--sans); text-align: center; flex: none; }

/* the stage each drawing sits on; its pieces play in order when it comes into view (rest state = final frame) */
.shot { position: relative; border-radius: 20px; background: var(--sand); aspect-ratio: 7 / 5; display: grid; place-items: center; padding: 24px; overflow: hidden; }
:is(.shot, .pp-panel).on .a { animation: rise .6s var(--ease) both; animation-delay: var(--t, 0s); }
:is(.shot, .pp-panel).on .s { animation: slide .7s var(--ease) both; animation-delay: var(--t, 0s); }
:is(.shot, .pp-panel).on .type { animation: type 1.1s steps(14, end) .5s both; }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
:is(.shot, .pp-panel).on .code i b { animation: rise .3s var(--ease) both; animation-delay: calc(1.7s + var(--k) * .16s); }
.code i b { font-weight: 500; }
:is(.shot, .pp-panel).on .press { animation: press .5s ease 2.9s both; }
@keyframes press { 40% { filter: brightness(.8); } to { filter: none; } }
:is(.shot, .pp-panel).on .pbar i { animation: fillbar 3.4s linear .3s both; }
@keyframes fillbar { from { transform: scaleX(.66); } }
@media (max-width: 520px) { .shot { aspect-ratio: auto; min-height: 360px; padding: 16px; } }

/* a file window */
.win { width: min(360px, 100%); }
.files { list-style: none; margin: 0; padding: 6px; }
.files li { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 6px; font-size: 12.5px; }
.files .mute { font-size: 11.5px; }
.files .hit { background: color-mix(in srgb, var(--rust) 12%, var(--paper)); }
.files .hit .ti { color: var(--rust); }
.files .ghost span:nth-child(2) { height: 7px; width: 60%; border-radius: 4px; background: var(--rule); }

/* chrome://extensions */
.ext { width: min(420px, 100%); }
.addr { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--cream); border-bottom: 1px solid var(--rule); }
.addr .dots { display: flex; gap: 5px; }
.addr .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.addr .url { flex: 1; font: 12px/1.4 var(--mono); background: var(--paper); border: 1px solid var(--rule); border-radius: 99px; padding: 4px 12px; color: var(--ink-mute); }
.ext-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 8px; }
.ext-bar b { font-weight: 600; font-size: 15px; }
.dev { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-mute); }
.sw { width: 28px; height: 16px; border-radius: 99px; background: var(--rust); position: relative; flex: none; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgb(0 0 0 / .2); transform: translateX(12px); }
:is(.shot, .pp-panel).on .dev .sw { animation: sw-bg .3s ease .7s both; }
:is(.shot, .pp-panel).on .dev .sw::after { animation: sw-knob .3s var(--ease) .7s both; }
@keyframes sw-bg { from { background: var(--rule); } }
@keyframes sw-knob { from { transform: none; } }
.ext-tools { display: flex; gap: 6px; padding: 2px 14px 14px; flex-wrap: wrap; }
.tb { font-size: 12px; border: 1px solid var(--rule); border-radius: 6px; padding: 5px 10px; color: var(--rust); font-weight: 500; }
.tb.hot { border-color: var(--rust); }
:is(.shot, .pp-panel).on .tb.hot { animation: hot .7s ease 1.2s both; }
@keyframes hot { 0% { border-color: var(--rule); } 50% { background: color-mix(in srgb, var(--rust) 16%, var(--paper)); } }
.ext-card { display: flex; gap: 12px; align-items: center; margin: 0 14px 14px; padding: 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--cream); }
.ext-card b { display: block; font-size: 13px; line-height: 1.3; }
.ext-card .sw { margin-left: auto; }

/* the extensions menu with the pin */
.pinrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--rust) 8%, var(--paper)); }
.pinrow span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinrow svg { width: 16px; height: 16px; flex: none; color: var(--rust); fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:is(.shot, .pp-panel).on .pinrow svg { animation: pinon .45s ease 1s both; }
@keyframes pinon { from { fill: transparent; color: var(--ink-mute); } }
.grey { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.grey i { width: 18px; height: 18px; border-radius: 4px; background: var(--rule); flex: none; }
.grey span { height: 7px; border-radius: 4px; background: var(--rule); flex: 1; max-width: 60%; }

/* ---------- install ---------- */
.guide { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(36px, 4.5vw, 64px); border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; }
.step .n { display: block; font: 400 14px/1 var(--mono); color: var(--mute); margin-bottom: 16px; }
.step h2 { font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem); }
.steps-ol { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 12px; color: var(--mute); max-width: 34em; }
.steps-ol li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; }
.steps-ol li::before { content: counter(s) "."; font: 400 13px/1.9 var(--mono); color: var(--acc); }
.steps-ol b, .quad b { color: var(--fg); font-weight: 600; }
code { font: 13.5px/1.4 var(--mono); background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); padding: 2px 6px; border-radius: 5px; }
.aside { font-size: 14.5px; color: var(--mute); border-left: 2px solid var(--acc); padding-left: 14px; margin: 20px 0 0; max-width: 34em; }
.step a, .quad a { color: var(--acc); text-underline-offset: 3px; }
@media (max-width: 900px) { .step { grid-template-columns: 1fr; } }

/* two or four short blocks under a top rule (install's after-notes, pricing's credits) */
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(32px, 5vw, 72px); }
.quad > div { border-top: 1px solid var(--line); padding-top: 20px; position: relative; }
.quad > div::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) var(--d, 0s); }
.quad > div:not(.pre)::before { transform: none; }
.quad p { margin: 10px 0 0; color: var(--mute); max-width: 32em; }
.quad .row { margin-top: 18px; }
@media (max-width: 760px) { .quad { grid-template-columns: 1fr; } }

/* ---------- pricing, simpler (2026-09-26): all espresso, the rhythm of Amperos's solution pages —
   a plain headline, a collage, one number, one statement, then a few pictured facts, each one short ---------- */
:root { --marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='3' seed='2'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='-10' y='2' width='220' height='36' fill='%23E0A16E' filter='url(%23t)'/%3E%3C/svg%3E"); }
.pp-hero { padding-block: clamp(120px, 12vw, 164px) clamp(40px, 5vw, 64px); }
.pp-hero h1 { font-size: clamp(2.8rem, 1.6rem + 4vw, 5rem); max-width: 11em; }
.pp-hero .row { margin-top: 32px; }
.collage { position: relative; height: clamp(300px, 34vw, 440px); margin-top: clamp(40px, 5vw, 64px); }
.collage > * { position: absolute; margin: 0; }
.collage .ticket { left: 50%; top: 50%; width: clamp(290px, 36vw, 460px); translate: -50% -50%; }
.collage .c-app { left: 3%; top: 16%; width: 270px; rotate: -2.5deg; }
.collage .c-rcpt { right: 4%; top: 4%; width: clamp(170px, 17vw, 220px); rotate: 5deg; }
@media (max-width: 760px) { .collage { height: 230px; } .collage .c-app, .collage .c-rcpt { display: none; } }
.pp-sum { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--esp-3); }
.pp-sum .lede { max-width: 30em; }
.big-stat { display: flex; align-items: center; gap: 16px; }
.big-stat b { font: 300 clamp(3.2rem, 2.4rem + 2.5vw, 4.6rem)/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.big-stat span { font-size: 14px; line-height: 1.4; color: var(--on-esp-mute); max-width: 12em; }
.statement { padding-block: clamp(72px, 9vw, 140px); }
.statement p { font: 400 clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem)/1.14 var(--serif); letter-spacing: -.018em; margin: 0; max-width: 20em; text-wrap: pretty; }

/* dark objects on a cream band carry the dark tokens with them */
.pp-panel, .buy, .band-l .shot { color: var(--on-esp); --fg: var(--on-esp); --mute: var(--on-esp-mute); --line: var(--esp-3); --acc: var(--amber); }
.band-l .shot { background: var(--esp-2); border: 1px solid var(--esp-3); }

/* pictured facts: a panel, then a small label, a serif title and two lines */
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 7vw, 96px) 20px; }
.feat.wide { grid-column: 1 / -1; }
.pp-panel { position: relative; border-radius: 20px; background: var(--esp-2); border: 1px solid var(--esp-3); min-height: clamp(320px, 30vw, 420px); display: grid; place-items: center; padding: clamp(20px, 3vw, 44px); overflow: hidden; }
.feat:not(.wide) .pp-panel { height: clamp(380px, 34vw, 440px); }
.cap { margin-top: 24px; max-width: 30em; }
.cap .label { margin-bottom: 10px; }
.cap h3 { font-size: clamp(1.5rem, 1.2rem + .8vw, 1.95rem); }
.cap h3 + p { margin: 10px 0 0; color: var(--mute); font-size: 16.5px; }
@media (max-width: 860px) { .feats { grid-template-columns: minmax(0, 1fr); } }

/* the price against the alternatives, as bars: ROCwork's is the torn amber marker */
.vs { width: min(780px, 100%); }
.vs .bh { margin: 0 0 24px; font: 400 13px/1.4 var(--mono); color: var(--on-esp-mute); letter-spacing: .02em; }
.vs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.vs li { display: grid; grid-template-columns: minmax(130px, 200px) 1fr 84px; gap: 8px 18px; align-items: center; }
.vs .nm { font-size: 15px; line-height: 1.3; }
.vs .nm small { display: block; color: var(--on-esp-mute); font-size: 12.5px; }
.vs .bar { height: 26px; }
.vs .bar i { display: block; height: 100%; width: calc(var(--v) / 1369 * 100%); background: #4A3830; border-radius: 3px; transform-origin: left; }
.vs .us .bar { display: flex; gap: 3px; }
.vs .us .bar i { background: var(--marker) no-repeat 0 0 / 100% 100%; border-radius: 0; width: calc(var(--v) / 1369 * 100% - 1.5px); }
/* ROCwork's bar in two: our ₹50 in the amber marker, MCA's ₹100 hatched (Parivesh, 2026-09-26: "clarify that 100 goes to mca, 50 to us") */
.vs .us .bar i.mca, .vs .key i.mca { background: repeating-linear-gradient(-45deg, rgb(224 161 110 / .55) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px rgb(224 161 110 / .45); border-radius: 2px; }
.vs .key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -10px 0 26px; font-size: 13px; color: var(--on-esp-mute); }
.vs .key > span { display: inline-flex; align-items: center; gap: 8px; }
.vs .key i { width: 22px; height: 12px; background: var(--marker) no-repeat 0 0 / 100% 100%; flex: none; }
.vs b { font: 400 1.4rem/1 var(--serif); text-align: right; font-variant-numeric: tabular-nums; }
.vs .us .nm, .vs .us b { color: var(--amber); }
.pp-panel.on .vs .bar i { animation: grow 1.1s var(--ease) both; animation-delay: calc(.2s + var(--k) * .12s); }
@keyframes grow { from { transform: scaleX(0); } }
.vs .bn { margin: 24px 0 0; font-size: 13px; color: var(--on-esp-mute); }
@media (max-width: 560px) { .vs li { grid-template-columns: 1fr auto; } .vs .bar { grid-column: 1 / -1; grid-row: 2; height: 18px; } }

/* the choose screen (home page's How it works, step 4) */
.sel { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.sel li { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.sel li span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel .num { color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.box { width: 14px; height: 14px; border-radius: 3px; background: var(--rust); flex: none; position: relative; }
.box::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 3.5px; height: 7px; border: solid var(--on-rust); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.box.off { background: none; border: 1.5px solid var(--rule); } .box.off::after { display: none; }
.total { display: flex; justify-content: space-between; align-items: baseline; }
.total b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.free-tag { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; background: color-mix(in srgb, var(--good) 12%, var(--paper)); color: var(--good); }
.free-tag svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* how to buy credits: numbered steps beside a WhatsApp thread */
.buy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 64px); align-items: center; background: var(--esp-2); border: 1px solid var(--esp-3); border-radius: 20px; padding: clamp(24px, 5vw, 64px); }
.buy h2 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem); }
.nums { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.nums li { display: grid; grid-template-columns: 44px 1fr; }
.nums .n { font: 400 14px/2 var(--mono); color: var(--on-esp-mute); }
.nums b { display: block; font: 400 1.4rem/1.3 var(--serif); }
.nums p { margin: 4px 0 0; color: var(--on-esp-mute); }
.buy .pp-panel { background: var(--esp); min-height: 380px; }
.chat .ui-h svg { width: 18px; height: 18px; stroke: none; --c1: #C98452; color: var(--rust); }
.msgs { display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 18px; background: var(--cream); }
.msgs p { margin: 0; max-width: 82%; padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
.msgs .me { align-self: flex-end; background: color-mix(in srgb, var(--rust) 14%, var(--paper)); border-bottom-right-radius: 3px; }
.msgs .them { align-self: flex-start; background: var(--paper); border: 1px solid var(--rule); border-bottom-left-radius: 3px; }
.msgs small { display: block; text-align: right; font-size: 10.5px; color: var(--ink-mute); margin-top: 2px; }
@media (max-width: 860px) { .buy { grid-template-columns: minmax(0, 1fr); } }

/* the fine print: the home page's questions */
.pp-fine { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .pp-fine { grid-template-columns: minmax(0, 1fr); } }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font: 400 1.3rem/1.35 var(--serif); transition: color .2s; }
.faq summary:hover { color: var(--acc); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 1.6rem/1 var(--sans); color: var(--mute); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -4px 0 22px; color: var(--mute); max-width: 44em; transition: opacity .5s .1s, filter .5s .1s; }
.faq details p a { color: var(--acc); text-underline-offset: 3px; }
.faq details:not([open]) p { opacity: 0; filter: blur(4px); }
details::details-content { block-size: 0; overflow-y: clip; transition: block-size .55s var(--ease), content-visibility .55s allow-discrete; }
details[open]::details-content { block-size: auto; }

/* ---------- privacy, terms: dark head, then one cream reading column with numbered clauses ---------- */
.lg-top { padding-block: clamp(120px, 12vw, 164px) clamp(48px, 6vw, 80px); }
.lg { padding-block: clamp(56px, 6.5vw, 96px) clamp(64px, 8vw, 120px); }
.lg-col { max-width: calc(46rem + 2 * clamp(16px, 4vw, 40px)); }
.lg-hero { display: flex; flex-direction: column; gap: 18px; }
.lg-hero h1 { font-size: clamp(2.8rem, 1.6rem + 4vw, 5rem); }
.lg-hero .lede { margin: 6px 0 0; font: 400 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.45 var(--serif); color: color-mix(in srgb, var(--on-esp) 86%, transparent); letter-spacing: -.005em; }
.lg-body { counter-reset: s; font-size: 16.5px; line-height: 1.7; }
.lg-body h2 { counter-increment: s; position: relative; font-size: clamp(1.5rem, 1.25rem + .9vw, 1.95rem); margin: 64px 0 18px; scroll-margin-top: 100px; }
.lg-body h2:first-child { margin-top: 0; }
.lg-body h2::before { content: counter(s) "."; position: absolute; right: calc(100% + 22px); top: .52em; font: 400 13px/1 var(--mono); color: var(--acc); }
.lg-body p, .lg-body li { color: color-mix(in srgb, var(--fg) 80%, transparent); }
.lg-body p { margin: 0 0 14px; }
.lg-body b { color: var(--fg); font-weight: 600; }
.lg-body a { color: var(--acc); text-underline-offset: 3px; }
.lg-body ol { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: i; display: flex; flex-direction: column; gap: 14px; }
.lg-body ol li { counter-increment: i; position: relative; padding-left: 48px; }
.lg-body ol li::before { content: counter(s) "." counter(i); position: absolute; left: 0; top: .3em; font: 400 12.5px/1.4 var(--mono); color: var(--mute); }
.lg-body .never { list-style: none; margin: 4px 0 14px; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; background: var(--esp); border-radius: 14px; }
.lg-body .never li { position: relative; padding-left: 28px; color: var(--on-esp); }
.lg-body .never li::before { content: ""; position: absolute; left: 0; top: .52em; width: 11px; height: 11px; background:
  linear-gradient(45deg, transparent 42%, var(--amber) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--amber) 42% 58%, transparent 58%); }
@media (max-width: 1020px) { .lg-body h2::before { position: static; display: block; margin-bottom: 12px; } }
@media (max-width: 560px) { .lg-body ol li { padding-left: 38px; } }

/* ---------- welcome: modelled on amperos.com/about, all dark ---------- */
.wl { padding-block: clamp(120px, 12vw, 164px) clamp(32px, 5vw, 64px); }
.wl-head { display: flex; flex-direction: column; gap: 18px; }
.wl-head h1 { font-size: clamp(2.8rem, 1.6rem + 4vw, 5rem); max-width: 11em; }
.wl-head .lede { margin: 0; font: 400 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.45 var(--serif); color: color-mix(in srgb, var(--on-esp) 86%, transparent); }
.wl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--esp-3); }
.wl-stats > div { padding: 28px 24px 0 0; display: flex; flex-direction: column; gap: 10px; }
.wl-stats > div + div { padding-left: 24px; border-left: 1px solid var(--esp-3); }
.wl-stats b { font: 300 clamp(3rem, 2.2rem + 2.4vw, 4.4rem)/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.wl-stats b small { font-size: .45em; letter-spacing: 0; margin-left: 4px; }
.wl-stats span { font-size: 14.5px; line-height: 1.45; color: var(--on-esp-mute); max-width: 17em; }
.wl-h { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem); margin-bottom: clamp(28px, 3.5vw, 44px); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tile { display: flex; flex-direction: column; gap: 22px; }
.tile .shot { aspect-ratio: 5 / 4; }
.tile .shot .ui { width: min(290px, 100%); }
.tile > div:last-child .n { font: 400 13px/1 var(--mono); color: var(--acc); }
.tile h3 { margin: 10px 0 0; font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); }
.tile p { margin: 8px 0 0; color: var(--mute); max-width: 26em; }
.tile p a, .wl-after a { color: var(--acc); text-underline-offset: 3px; }
.know { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.know > div { background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 8px; }
.know svg { width: 22px; height: 22px; margin-bottom: 14px; fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.know h3 { font-size: 1.3rem; }
.know p { margin: 0; color: var(--mute); font-size: 15.5px; }
.wl-after { margin: 20px 0 0; color: var(--mute); }
@media (max-width: 900px) { .three, .know { grid-template-columns: 1fr; } .tile .shot { aspect-ratio: auto; min-height: 240px; } }
@media (max-width: 640px) { .wl-stats { grid-template-columns: 1fr; } .wl-stats > div { padding: 22px 0; } .wl-stats > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--esp-3); } }

/* ---------- about ---------- */
.slow { padding-block: clamp(96px, 12vw, 176px) clamp(56px, 6.5vw, 96px); }
.slow p[data-scrub] { font: 400 clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem)/1.14 var(--serif); letter-spacing: -.018em; margin: 0; max-width: 19em; text-wrap: pretty; }
.slow .lede { margin-top: 32px; }
.w { transition: opacity .3s linear, filter .3s linear; }
.amb { color: var(--amber); }
.story { display: flex; flex-direction: column; }
.story > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(32px, 5vw, 72px); padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); }
.story > div:first-child { border-top: 0; padding-top: 0; }
.story h2 { font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem); }
.story p { margin: 0 0 14px; color: color-mix(in srgb, var(--fg) 80%, transparent); font-size: 17px; line-height: 1.7; max-width: 36em; }
.story p:last-child { margin-bottom: 0; }
.story a { color: var(--acc); text-underline-offset: 3px; }
@media (max-width: 860px) { .story > div { grid-template-columns: 1fr; } }
.final { padding-block: clamp(64px, 7vw, 104px) clamp(48px, 5vw, 72px); }
.final h2 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem); max-width: 14em; }
.final .row { margin-top: 32px; }

/* ---------- 404 ---------- */
.lost { padding-bottom: clamp(48px, 6vw, 80px); }
.lost .row { margin-top: 4px; }

/* ---------- footer: the home page's, with the halftone wordmark ---------- */
footer { border-top: 1px solid var(--esp-3); padding-top: 28px; overflow: hidden; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; font-size: 14px; color: var(--on-esp-mute); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { text-decoration: none; transition: color .2s; }
.foot a:hover { color: var(--on-esp); }
.foot p { margin: 0; }
.giant { font: 400 min(21vw, 19rem)/.78 var(--serif); letter-spacing: -.05em; margin: 40px 0 0; white-space: nowrap; text-align: center; user-select: none; }
.giant span { display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-color: var(--esp-2); background-image: radial-gradient(circle, color-mix(in srgb, var(--amber) 30%, var(--esp-2)) 1.7px, transparent 2.2px); background-size: 7px 7px; }

/* the cookie banner (analytics.js builds it) */
#consent { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 640px; margin: 0 auto; padding: 18px 20px; background: #211612; color: #F4ECE4; border: 1px solid #33241E; border-radius: 16px; box-shadow: 0 18px 48px -12px rgb(0 0 0 / .6); font: 400 14.5px/1.5 var(--sans); }
#consent p { margin: 0 0 12px; color: #A5978F; }
#consent a { color: #E0A16E; text-underline-offset: 3px; }
#consent .prefs { display: grid; gap: 6px; margin: 0 0 12px; }
#consent label { display: flex; gap: 8px; align-items: baseline; }
#consent small { color: #A5978F; }
#consent .btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#consent button { font: 500 14px/1 var(--sans); padding: 10px 16px; border-radius: 99px; border: 1px solid #F4ECE4; background: #F4ECE4; color: #160E0B; cursor: pointer; }
#consent button[data-c="none"] { background: transparent; color: #F4ECE4; border-color: color-mix(in srgb, #F4ECE4 30%, transparent); }
#consent button.link { border: 0; background: none; color: #A5978F; text-decoration: underline; padding: 10px 4px; }