/* HandsFree marketing site — one shared stylesheet.
   No external requests: system fonts only, no @import, no url() to any host. */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light;

  /* Surfaces — warm off-white rather than #fff. Pure white under long-form text
     reads as a document; a few degrees of warmth reads as a product. Raised
     surfaces go lighter than the page, not darker, so cards lift instead of
     recede. */
  --bg: #faf9f7;
  --bg-subtle: #f4f2ee;
  --bg-raised: #ffffff;
  --bg-code: #f1efeb;

  /* Text — warm near-black. #000 on off-white is harsher than anything printed. */
  --text: #17161a;
  --text-muted: #5c5a63;
  --text-faint: #6b6873;

  /* Lines — barely there. The old palette drew a visible box around everything,
     which is most of what made the page feel like a spec sheet. Depth now comes
     from surface and shadow. */
  --border: #e6e2db;
  --border-strong: #d3cec5;

  /* Accent — violet rather than the flat corporate blue. Verified 5.1:1 on --bg
     as text, and white on it as a button ground clears 4.5:1. */
  --accent: #5847d4;
  --accent-hover: #4a3ac0;
  --accent-text: #ffffff;
  --accent-soft: #eeebfb;
  --accent-ink: #3f2fae;

  /* Semantic */
  --good: #146c43;
  --good-soft: #e8f4ed;
  --warn-soft: #fdf4e5;
  --warn-ink: #7a4d06;

  --danger: #b42318;
  --danger-soft: #fdecea;
  --danger-ink: #8b1a12;

  /* Two shadows: one for resting cards, one for the primary button. Both are
     tinted with the text colour rather than pure black, which keeps them from
     going grey-blue on a warm ground. */
  --shadow: 0 1px 2px rgba(23, 22, 26, 0.04), 0 12px 32px -8px rgba(23, 22, 26, 0.10);
  --shadow-btn: 0 1px 2px rgba(23, 22, 26, 0.14), 0 8px 20px -6px rgba(88, 71, 212, 0.42);

  --radius: 14px;
  --radius-lg: 22px;
  --measure: 66ch;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Not near-black. A very dark warm grey holds the same warmth as the light
       palette, and stops large type looking like it is punched out of a void. */
    --bg: #100f12;
    --bg-subtle: #16151a;
    --bg-raised: #1b1a20;
    --bg-code: #1e1d24;

    --text: #f2f0ee;
    --text-muted: #a8a4ae;
    --text-faint: #918d99;

    --border: #272630;
    --border-strong: #3a3846;

    --accent: #a897ff;
    --accent-hover: #bcaeff;
    --accent-text: #16121f;
    --accent-soft: #221c3a;
    --accent-ink: #c7bcff;

    --good: #6fd39c;
    --good-soft: #12251c;
    --warn-soft: #2a2113;
    --warn-ink: #f0cd8b;

    --danger: #ff8b7e;
    --danger-soft: #2c1614;
    --danger-ink: #ffb4aa;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px -12px rgba(0, 0, 0, 0.6);
    --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 24px -8px rgba(168, 151, 255, 0.36);
  }
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Long file paths and identifiers must never push the page sideways. */
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

/* Large and comparatively light. Display type at 4rem in weight 700 reads as
   shouting; the same size at 560 reads as designed, and SF Pro Display is
   optically sized for exactly this. Tracking tightens as size grows because
   default letter-spacing is set for body copy, not headlines. */
h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.25rem);
  font-weight: 560;
  letter-spacing: -0.042em;
  line-height: 1.04;
}

h2 {
  font-size: clamp(1.65rem, 3.6vw, 2.4rem);
  font-weight: 580;
  letter-spacing: -0.028em;
  line-height: 1.14;
}

h3 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

h4 {
  font-size: 1rem;
  font-weight: 640;
}

p,
ul,
ol,
dl {
  margin: 0 0 1.1em;
}

li {
  margin-bottom: 0.4em;
}

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-hover);
}

strong {
  font-weight: 650;
  color: var(--text);
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.1em 0.36em;
  overflow-wrap: anywhere;
}

kbd {
  box-shadow: 0 1px 0 var(--border-strong);
  font-weight: 600;
}

pre {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  overflow-x: auto;
  margin: 0 0 1.1em;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.86rem;
  overflow-wrap: normal;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.wrap--prose {
  max-width: 760px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-text);
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 620;
  text-decoration: none;
  transition: top 0.15s ease-in;
}

.skip-link:focus {
  top: 0;
  color: var(--accent-text);
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header {
    background: var(--bg);
  }
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  min-height: 60px;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 680;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
}

.brand__mark {
  display: block;
  width: 26px;
  height: 26px;
  flex: none;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li {
  margin: 0;
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 520;
}

.site-nav a:hover {
  color: var(--text);
}

.site-nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 620;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.82rem 1.55rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: 1rem;
  font-weight: 620;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* A shadow tinted with the accent rather than black, so the button reads as
   raised off the warm ground instead of stuck to it. */
.btn--primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-btn);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--accent-text);
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover,
  .btn--primary:active {
    transform: none;
  }
}

/* `.site-nav a` is more specific than `.btn--primary`, so the header's
   Download button needs its button colour restated. */
.site-nav a.btn--primary,
.site-nav a.btn--primary:hover {
  color: var(--accent-text);
}

.btn--secondary {
  background: var(--bg-raised);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--secondary:hover {
  border-color: var(--text-faint);
  color: var(--text);
}

.btn--small {
  padding: 0.45rem 0.85rem;
  font-size: 0.9rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin: 1.6rem 0 0.9rem;
}

/* ---------------------------------------------------------------- sections */

/* No border-top. A hairline between every section turned the page into a stack
   of slabs — the whitespace is what should separate them, and there is now
   enough of it to do the job. Background alternation still marks the shift. */
.section {
  padding: clamp(4.5rem, 10vw, 8rem) 0;
}

.section--subtle {
  background: var(--bg-subtle);
}

.section__lead {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: 1.08rem;
}

.eyebrow {
  display: block;
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* ---------------------------------------------------------------- hero */

/* Centred, and given room. The glow is a single radial gradient rather than an
   image, so the page still makes zero external requests — it lifts the headline
   off a flat ground, which is most of what makes a hero feel intentional. */
.hero {
  position: relative;
  padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(3rem, 6vw, 5rem);
  text-align: center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -40% 0 auto 50%;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--accent) 16%, transparent) 0%,
    transparent 62%
  );
  pointer-events: none;
  z-index: 0;
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

.hero__pitch {
  max-width: 19ch;
  margin-inline: auto;
}

.hero__sub {
  max-width: 52ch;
  margin: 0 auto;
  font-size: clamp(1.1rem, 2.1vw, 1.3rem);
  line-height: 1.5;
  color: var(--text-muted);
}

.hero .btn-row {
  justify-content: center;
  margin-top: 2.2rem;
}

.hero .hero__meta {
  margin-top: 1.1rem;
}

.hero .media-placeholder {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  text-align: left;
}

.hero__meta {
  margin: 0;
  color: var(--text-faint);
  font-size: 0.92rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  margin-bottom: 1.4rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--good-soft);
  color: var(--good);
  font-size: 0.85rem;
  font-weight: 620;
}

/* Placeholder for the demo recording / screenshot. Swap for real media
   before launch — see website/README.md. */
.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: clamp(200px, 34vw, 380px);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 2rem 1.25rem;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  text-align: center;
}

.media-placeholder__title {
  margin: 0;
  font-weight: 640;
  color: var(--text);
}

.media-placeholder__note {
  margin: 0;
  max-width: 46ch;
  color: var(--text-faint);
  font-size: 0.9rem;
}

.media-placeholder__tag {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- steps */

.steps {
  counter-reset: step;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
}

.steps li {
  counter-increment: step;
  margin: 0;
}

.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 0.7rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.steps h3 {
  margin-bottom: 0.25rem;
}

.steps p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.98rem;
}

/* ---------------------------------------------------------------- cards */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 2.25rem;
}

.card {
  background: var(--bg-raised);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.card h3 {
  margin-bottom: 0.35rem;
}

.card p:last-child {
  margin-bottom: 0;
}

.card p {
  color: var(--text-muted);
  font-size: 0.98rem;
}

/* Privacy "what leaves / what stays" comparison */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2.25rem;
}

.panel {
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  background: var(--bg-raised);
  box-shadow: var(--shadow);
}

.panel--stays {
  border-color: var(--border-strong);
  border-color: color-mix(in srgb, var(--good) 40%, var(--border));
  background: var(--good-soft);
}

.panel h3 {
  margin-bottom: 0.6rem;
}

.panel ul {
  margin: 0;
  padding-left: 1.15rem;
}

.panel li {
  color: var(--text-muted);
}

.panel--stays li,
.panel--stays h3 {
  color: var(--text);
}

/* ---------------------------------------------------------------- pricing */

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1.25rem;
  margin-top: 2.25rem;
  align-items: start;
}

.plan {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  padding: 1.9rem 1.7rem;
  box-shadow: var(--shadow);
}

.plan--featured {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.plan__name {
  margin-bottom: 0.35rem;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.5rem 0 0.15rem;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.plan__price span {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}

.plan__note {
  margin: 0 0 1.1rem;
  color: var(--text-muted);
  font-size: 0.94rem;
}

.plan__tag {
  position: absolute;
  top: -0.75rem;
  right: 1.2rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}

.plan li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--text-muted);
  font-size: 0.97rem;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.plan .btn {
  width: 100%;
}

.note {
  border-left: 3px solid var(--border-strong);
  padding: 0.1rem 0 0.1rem 1rem;
  margin: 2rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: var(--measure);
}

.note :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- faq */

.faq {
  max-width: 820px;
  margin-top: 2.25rem;
  border-top: 1px solid var(--border);
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 1.05rem 0;
  cursor: pointer;
  font-weight: 620;
  font-size: 1.04rem;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before {
  content: "+";
  flex: none;
  width: 1ch;
  color: var(--accent-ink);
  font-weight: 700;
}

.faq details[open] > summary::before {
  content: "\2212"; /* minus */
}

.faq details[open] > summary {
  padding-bottom: 0.35rem;
}

.faq__body {
  padding: 0 0 1.1rem 1.6ch;
  color: var(--text-muted);
  max-width: var(--measure);
}

.faq__body :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- prose pages */

.page-head {
  padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
}

.page-head p {
  color: var(--text-muted);
  margin-bottom: 0;
  max-width: var(--measure);
}

.prose {
  padding-bottom: 4rem;
}

.prose h2 {
  margin-top: 2.6rem;
  padding-top: 0.4rem;
  font-size: 1.42rem;
}

.prose h3 {
  margin-top: 1.9rem;
}

.prose > :first-child {
  margin-top: 0;
}

.prose dt {
  font-weight: 640;
  margin-top: 1rem;
}

.prose dd {
  margin: 0.15rem 0 0;
  color: var(--text-muted);
}

.callout {
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  padding: 1.1rem 1.25rem;
  margin: 1.6rem 0;
}

.callout :last-child {
  margin-bottom: 0;
}

.callout--placeholder {
  border-left-color: var(--warn-ink);
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.callout--placeholder strong,
.callout--placeholder a {
  color: var(--warn-ink);
}

/* Loud, unmissable warning — used where getting it wrong loses money
   (sending a stablecoin on the wrong chain). */
.callout--danger {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border-strong));
  border-left-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.callout--danger strong,
.callout--danger a,
.callout--danger code {
  color: var(--danger-ink);
}

.callout--danger code {
  background: transparent;
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.callout__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-weight: 700;
}

.callout__title svg {
  flex: none;
}

.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 0.96rem;
}

caption {
  text-align: left;
  padding: 0.75rem 0.9rem;
  color: var(--text-faint);
  font-size: 0.88rem;
}

th,
td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

thead th {
  background: var(--bg-subtle);
  font-weight: 640;
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* Support-page self-help blocks */
.help {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: 1.4rem;
  margin: 1.25rem 0;
}

.help h3 {
  margin-top: 0;
}

.help ol,
.help ul {
  margin-bottom: 0;
  padding-left: 1.3rem;
}

.help :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- payment methods

   Used only by pay.html. The one rule that matters here: a crypto address is
   long and unbreakable, so every container it sits in must be allowed to wrap
   it (`overflow-wrap: anywhere`) rather than widen. Nothing in this block sets
   a min-width, precisely so the page never scrolls sideways at 375px. */

.method {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  padding: 1.4rem;
  margin: 1.5rem 0;
}

.method--recommended {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.method > h3:first-child,
.method > h2:first-child {
  margin-top: 0;
}

.method__why {
  color: var(--text-muted);
  font-size: 0.98rem;
}

.method__tag {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* An address and the network it must be sent on, as one indivisible unit.
   The network label is deliberately part of the row, never a footnote. */
.addr-list {
  margin: 1.1rem 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.addr {
  padding: 0.95rem 0 0.9rem;
  border-bottom: 1px solid var(--border);
}

.addr:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.addr__network {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.55rem;
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.addr__chain {
  padding: 0.12rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.addr__value {
  display: block;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-code);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  /* The whole point: break anywhere rather than push the page wider. */
  overflow-wrap: anywhere;
  word-break: break-all;
}

.addr__hint {
  margin: 0.45rem 0 0;
  color: var(--text-faint);
  font-size: 0.88rem;
}

/* Bank / UPI fields */
.fields {
  margin: 1.1rem 0 0;
}

.fields dt {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.fields dt:first-child {
  margin-top: 0;
}

.fields dd {
  margin: 0.2rem 0 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/* The single editable configuration region at the top of pay.html. The dashed
   rule is a visible reminder that everything inside it is a real-world value
   someone has to keep correct. */
.config-zone {
  border-left: 3px dashed var(--border-strong);
  padding-left: 1.1rem;
  margin: 0;
}

@media (max-width: 560px) {
  .config-zone {
    border-left-width: 2px;
    padding-left: 0.7rem;
  }
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  padding: 2.5rem 0;
  font-size: 0.94rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}

.site-footer p {
  margin: 0;
  color: var(--text-faint);
}

.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer nav li {
  margin: 0;
}

.site-footer nav a {
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer nav a:hover {
  color: var(--text);
  text-decoration: underline;
}

.site-footer__tagline {
  flex-basis: 100%;
  color: var(--text-faint);
  font-size: 0.88rem;
}

/* ---------------------------------------------------------------- small screens */

@media (max-width: 560px) {
  body {
    font-size: 16.5px;
  }

  .site-header__inner {
    row-gap: 0.5rem;
  }

  .site-nav {
    margin-left: 0;
    flex-basis: 100%;
  }

  .site-nav ul {
    gap: 0.3rem 1.1rem;
  }

  .btn-row > .btn,
  .prose p > .btn {
    width: 100%;
  }

  /* The header's Download button stays inline — full width would swallow the row. */
  .site-nav .btn {
    width: auto;
  }

  .hero__pitch {
    max-width: none;
  }
}

/* ---------------------------------------------------------------- features
   Three items, no boxes.

   This replaced an eight-item .card-grid. The cards were the problem: eight
   identically-sized rounded rectangles, each a bold heading over a tidy
   two-line gloss, reads as generated output rather than as somebody deciding
   what mattered. Plain headings on the page background, with real space between
   them, reads as edited.

   No border, no background, no shadow. The whitespace is the layout. */
.feature-list {
  display: grid;
  gap: 2.4rem;
  margin-top: 2.2rem;
}

.feature-list h3 {
  margin: 0 0 0.45rem;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}

.feature-list p {
  margin: 0;
  max-width: 34ch;
  color: var(--text-muted);
}

@media (min-width: 760px) {
  .feature-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.6rem;
  }
}

/* ----------------------------------------------------------- selling points
   A band of claims under the hero. Text, not tiles: the eight-card grid that
   used to sit further down is exactly what made this page read as generated, and
   repeating the shape here for five more items would undo the fix. A thin rule
   above each item gives the row structure without drawing five boxes. */
.selling-section {
  padding-top: 0;
}

.selling {
  display: grid;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.selling li {
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.selling strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.selling span {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* The unshipped one is dimmed rather than hidden: it is a genuine reason to
   choose this app, and pretending otherwise would be its own kind of dishonesty
   — but it must not read as available. */
.selling__soon strong,
.selling__soon span {
  color: var(--text-faint);
}

.selling__tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-faint);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

@media (min-width: 700px) {
  .selling {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2.4rem;
  }
}

@media (min-width: 1040px) {
  .selling {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.6rem;
  }
}