/* Budget Lock Pro: wriko.cloud/budgetlockpro, in the app's own B · Ink & Paper.
   Offline-first: every font, image and script is served from this folder; nothing is fetched from elsewhere.
   Colours are the app's (core/ui Theme.kt). Day is its day theme. Night is its night theme, where tints stay light
   (the day pastels dimmed, as on the app's dark account cards) and carry dark ink, never dark muddy fills. */

@font-face { font-family: "Literata"; src: url(../fonts/literata.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url(../fonts/bricolage.woff2) format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Martian"; src: url(../fonts/martian.woff2) format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }

:root {
  --display: "Literata", Georgia, serif;
  --ui: "Bricolage", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian", ui-monospace, "Cascadia Mono", monospace;
  --paper: #F2EDE3; --card: #FBF8F2; --ink: #1C1B19; --ink2: #5E5A52; --line: #DED5C4; --edge: #1C1B19; --shadow: #1C1B19;
  --verm: #E8553A; --verm-text: #B83A24; --butter: #F6E3B5; --sky: #CFE0F5; --mint: #CDEBDD; --peach: #F8DCCB;
  --lilac: #E3DBF5; --sand: #EFE6D6;
  --on-tint: #1C1B19;  /* ink on a pastel or vermilion fill, in both themes */
  --us-col: #F9EFD7;   /* our column in the comparison */
  --band-bg: #1C1B19; --band-fg: #F2EDE3;  /* the ticker */
  --rim: #1C1B19; --drop: rgba(28, 27, 25, .38);  /* the phone's edge and soft shadow */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #1F1D1B; --card: #2B2926; --ink: #ECE5D8; --ink2: #B7AFA1; --line: #403D39; --edge: #8D867B; --shadow: #000000;
  --verm: #F2826A; --verm-text: #F2826A; --butter: #CDBD83; --sky: #B1C2D3; --mint: #AFC8B9; --peach: #D2BFB5;
  --lilac: #C1BAD0; --sand: #CBC3B6; --us-col: #34312D; --band-bg: #ECE5D8; --band-fg: #1C1B19;
  --rim: #57524A; --drop: rgba(0, 0, 0, .6); color-scheme: dark; } }
:root[data-theme="dark"] {
  --paper: #1F1D1B; --card: #2B2926; --ink: #ECE5D8; --ink2: #B7AFA1; --line: #403D39; --edge: #8D867B; --shadow: #000000;
  --verm: #F2826A; --verm-text: #F2826A; --butter: #CDBD83; --sky: #B1C2D3; --mint: #AFC8B9; --peach: #D2BFB5;
  --lilac: #C1BAD0; --sand: #CBC3B6; --us-col: #34312D; --band-bg: #ECE5D8; --band-fg: #1C1B19;
  --rim: #57524A; --drop: rgba(0, 0, 0, .6); color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--verm); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); border: 3px solid var(--edge); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 12px; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }

/* type */
.eyebrow { font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2);
  display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 12px; height: 12px; background: var(--verm); border: 2.5px solid var(--edge); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
/* isolate: a band sits behind its heading's text, so the line above keeps its descenders (the y of "money,") */
h1, h2 { isolation: isolate; }
h1 { font-family: var(--display); font-weight: 700; font-size: clamp(42px, 6.4vw, 80px); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.12; letter-spacing: -.015em; }
h3 { font-weight: 800; font-size: 20px; line-height: 1.25; }
.band { position: relative; z-index: -1; display: inline-block; padding: .02em .18em .12em; margin-top: .05em; background: var(--butter);
  color: var(--on-tint); border: 3px solid var(--edge); box-shadow: 5px 5px 0 var(--shadow); transform: rotate(-1.2deg); }
.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--ink2); max-width: 36em; text-wrap: pretty; }
.sec-head { display: flex; flex-direction: column; gap: 14px; max-width: 46em; margin-bottom: 40px; }
.sec-head p { margin: 0; color: var(--ink2); font-size: 18px; text-wrap: pretty; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px; border: 3px solid var(--edge);
  border-radius: 14px; background: var(--card); color: var(--ink); font: 700 17px/1.2 var(--ui); text-decoration: none; box-shadow: 4px 4px 0 var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease; cursor: pointer; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--shadow); }
/* The official Google Play badge, used unaltered (Google's badge rules: no recolouring, no rebuilt copies, at least
   28px tall). Its PNG carries a transparent margin a quarter of the badge's height on every side, which is the clear
   space the rules ask for; the negative margins only line the visible badge up with what sits beside it. */
.play-badge { display: inline-flex; flex: none; line-height: 0; border-radius: 9px; }
.play-badge img { width: auto; max-width: none; height: 83.33px; margin: -13.67px; }  /* badge 56px tall */
.play-badge--nav img { height: 59.52px; margin: -9.76px; }                           /* 40px */
.play-badge--cta img { height: 89.29px; margin: -14.64px; }                          /* 60px */

/* nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 2px solid transparent; transition: border-color .2s ease; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--paper); z-index: 21; }
.nav.is-stuck { border-bottom-color: var(--edge); }
.nav__in { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 20px; }
.brand img { width: 36px; height: 36px; border-radius: 10px; border: 2.5px solid #1C1B19; }
.nav__links { display: flex; gap: 22px; margin-left: auto; font-weight: 600; font-size: 15.5px; }
.nav__links a { text-decoration: none; color: var(--ink2); }
.nav__links a:hover { color: var(--ink); }
@media (max-width: 860px) { .nav__links { display: none; } .nav .play-badge { margin-left: auto; } }
@media (max-width: 520px) { .nav .play-badge { display: none; } }

/* hero */
.hero { padding-block: 64px 72px; }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 4px 0 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--card); border: 2.5px solid var(--edge); border-radius: 999px;
  font-weight: 700; font-size: 14px; }
.chips svg { width: 18px; height: 18px; }
@media (max-width: 380px) { .chips li { gap: 6px; padding: 5px 10px; font-size: 13px; } .chips svg { width: 16px; height: 16px; } }
.hero__art { position: relative; justify-self: center; width: min(360px, 82vw); }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero { padding-block: 28px 56px; } .hero__art { width: min(320px, 76vw); } }

/* phone: the device alone on a soft shadow (no coloured block behind it), screen at the S22's 1080 x 2340 */
.stage { position: relative; }
.phone { position: relative; width: 100%; padding: 2.9%; background: #1C1B19; border-radius: 13% / 6%;
  box-shadow: 0 0 0 2px var(--rim), 0 36px 60px -28px var(--drop), 0 14px 26px -16px var(--drop); }
.phone::before { content: ""; position: absolute; right: -5px; top: 22%; width: 5px; height: 9%; border-radius: 0 3px 3px 0; background: var(--rim); }
.screen { position: relative; aspect-ratio: 1080 / 2340; overflow: hidden; border-radius: 10.5% / 4.85%; background: var(--sb, #F2EDE3);
  container-type: inline-size; }
.screen img { width: 100%; }
/* covers exactly the capture's own status bar (its top 3.3%), so the app's first row stays whole */
.sbar { position: absolute; inset: 0 0 auto; height: 3.3%; background: var(--sb, #F2EDE3); color: var(--sbt, #1C1B19);
  display: flex; align-items: center; justify-content: space-between; padding: 0 7cqw 0 8cqw; font: 600 12px/1 var(--ui); font-size: 3.7cqw; }
.sbar .cam { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; width: 3.2cqw; height: 3.2cqw; transform: translate(-50%, -50%);
  border-radius: 50%; background: #0B0B0B; }
.sbar svg { height: 11px; width: 29px; height: 2.6cqw; width: 7.2cqw; fill: currentColor; }

/* a sticker on the phone */
.float { position: absolute; z-index: 3; }
.hero .float { top: -44px; right: -18px; transform: rotate(5deg); }
.sticker { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; background: var(--butter); color: var(--on-tint); border: 3px solid var(--edge);
  border-radius: 999px; box-shadow: 5px 5px 0 var(--shadow); font: 800 15px/1 var(--ui); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.sticker svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

/* ticker */
.ticker { border-block: 3px solid var(--edge); background: var(--band-bg); color: var(--band-fg); overflow: hidden; }
.ticker__track { display: flex; gap: 0; width: max-content; animation: ticker 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span { font: 600 14px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 16px 0; white-space: nowrap; }
.ticker span::after { content: "✦"; color: var(--verm); margin: 0 22px; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* sections */
.section { padding-block: 88px; }
.section--alt { background: var(--card); border-block: 3px solid var(--edge); }
@media (max-width: 700px) { .section { padding-block: 64px; } }

/* demo */
.demo { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: center; }
.demo__phone { width: min(320px, 76vw); justify-self: center; }
.demo__side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.tab { min-height: 44px; padding: 8px 16px; border: 2.5px solid var(--edge); border-radius: 999px; background: var(--card); color: var(--ink);
  font: 700 15px/1 var(--ui); cursor: pointer; flex: none; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.demo__cap { background: var(--card); border: 3px solid var(--edge); border-radius: 20px; box-shadow: 6px 6px 0 var(--shadow); padding: 22px 24px; min-height: 150px; }
.demo__cap h3 { font-size: 24px; }
.demo__cap p { margin: 8px 0 0; color: var(--ink2); }
/* eight tabs: two even rows of four beside the phone; one swipeable row on a phone */
@media (min-width: 861px) { .tabs { display: grid; grid-template-columns: repeat(4, max-content); } }
@media (max-width: 860px) { .demo { grid-template-columns: 1fr; gap: 36px; } .demo__side { order: -1; } }
@media (max-width: 600px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none; margin-inline: -20px; padding: 4px 20px 10px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { scroll-snap-align: start; }
}

/* features: a bento of inked cards */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.card { grid-column: span 4; background: var(--card); border: 3px solid var(--edge); border-radius: 22px; box-shadow: 6px 6px 0 var(--shadow); padding: 24px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card--wide { grid-column: span 8; }
.card--half { grid-column: span 6; }
.card p { margin: 0; color: var(--ink2); font-size: 16px; text-wrap: pretty; }
.card .ic { width: 52px; height: 52px; border-radius: 14px; border: 3px solid var(--edge); display: grid; place-items: center; margin-bottom: 6px; }
.card .ic svg { width: 26px; height: 26px; fill: none; stroke: var(--on-tint); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.bg-verm { background: var(--verm); } .bg-butter { background: var(--butter); } .bg-sky { background: var(--sky); }
.bg-mint { background: var(--mint); } .bg-peach { background: var(--peach); } .bg-lilac { background: var(--lilac); } .bg-sand { background: var(--sand); }
.card--wide .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 280px; margin-top: 8px; }
.keys span { display: grid; place-items: center; height: 40px; border: 2.5px solid var(--edge); border-radius: 10px; background: var(--paper);
  font-weight: 800; box-shadow: 3px 3px 0 var(--shadow); }
.keys span.eq { background: var(--verm); color: var(--on-tint); }
/* the wide card puts its keypad beside the text, so the card next to it isn't left half empty */
@media (min-width: 981px) {
  .card--wide { display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 36px; align-content: center; }
  .card--wide > * { grid-column: 1; }
  .card--wide > .keys { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
}
@media (max-width: 980px) { .card, .card--wide, .card--half { grid-column: span 6; } }
@media (max-width: 640px) {
  .card, .card--wide, .card--half { grid-column: span 12; }
  .card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 20px; align-items: start; }
  .card .ic { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; margin: 0; }
  .card .ic svg { width: 22px; height: 22px; }
  .card > h3, .card > p { grid-column: 2; }
  .card--wide .keys { grid-column: 1 / -1; max-width: none; margin-top: 12px; }
}

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { background: var(--paper); border: 3px solid var(--edge); border-radius: 22px; padding: 26px; box-shadow: 6px 6px 0 var(--shadow); }
.steps li::before { counter-increment: s; content: "0" counter(s); display: block; font: 700 40px/1 var(--mono); color: var(--verm-text); margin-bottom: 14px; }
.steps p { margin: 8px 0 0; color: var(--ink2); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* compare */
.table-wrap { overflow-x: auto; border: 3px solid var(--edge); border-radius: 22px; background: var(--card); box-shadow: 6px 6px 0 var(--shadow); }
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; }
th, td { padding: 16px 20px; text-align: left; border-bottom: 1.5px solid var(--line); vertical-align: middle; }
thead th { font: 600 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); background: var(--paper); border-bottom: 3px solid var(--edge); }
thead th.us { color: var(--on-tint); background: var(--butter); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 700; }
td.us { background: var(--us-col); font-weight: 700; }
.yes, .no, .meh { display: inline-flex; align-items: center; gap: 8px; }
.yes::before, .no::before { content: ""; width: 22px; height: 22px; border: 2.5px solid var(--edge); border-radius: 7px; flex: none;
  background-repeat: no-repeat; background-position: center; background-size: 14px; }
.yes::before { background-color: var(--mint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1B19' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.no::before { background-color: var(--peach); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1B19' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.meh { color: var(--ink2); }

/* gallery: a sideways row that fades at its right edge, so the cut slide reads as "more this way" */
.gallery { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 6px 22px; margin: 0 -6px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.gallery figure { margin: 0; flex: 0 0 auto; width: min(260px, 66vw); scroll-snap-align: start; }
.gallery img { width: 100%; border: 3px solid var(--edge); border-radius: 18px; box-shadow: 6px 6px 0 var(--shadow); background: var(--card); }
.gallery figcaption { margin-top: 12px; font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }

/* faq */
.faq { display: grid; gap: 14px; max-width: 860px; }
.faq details { background: var(--paper); border: 3px solid var(--edge); border-radius: 18px; padding: 0 22px; box-shadow: 5px 5px 0 var(--shadow); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative; font-weight: 800; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font: 700 26px/1 var(--mono); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 20px; color: var(--ink2); }

/* closing band */
.cta { background: var(--verm); color: #1C1B19; border-block: 3px solid #1C1B19; text-align: center; }
.cta .wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-block: 84px; }
.cta p { margin: 0; font-size: 19px; font-weight: 600; }
.cta small { font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* footer */
.footer { padding-block: 56px 40px; font-size: 15px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; }
.footer h4 { margin: 0 0 12px; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { text-decoration: none; color: var(--ink); }
.footer a:hover { text-decoration: underline; }
.footer .fine { margin-top: 36px; padding-top: 20px; border-top: 2px solid var(--line); color: var(--ink2); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > :first-child { grid-column: 1 / -1; } }

/* legal pages */
.doc { max-width: 760px; padding-block: 48px 80px; }
.doc h1 { font-size: clamp(36px, 5vw, 56px); margin: 14px 0 10px; }
.doc .meta { font: 600 12.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.doc h2 { font-size: 26px; margin: 40px 0 10px; }
.doc p, .doc li { color: var(--ink); text-wrap: pretty; }
.doc ul, .doc ol { padding-left: 22px; display: grid; gap: 6px; }
.doc .summary { background: var(--card); border: 3px solid var(--edge); border-radius: 18px; box-shadow: 5px 5px 0 var(--shadow); padding: 20px 22px; margin-top: 24px; }
.doc .summary p { margin: 0; }
.doc .summary p + p { margin-top: 8px; }