/* ==========================================================================
   My Shop — public site
   Swiss/minimal: flat surfaces, hairline rules, one accent, tabular numerals.

   Typography and palette are the app's, not approximations of it. Someone who
   downloads from this page and opens the app should not feel they have moved
   between two products, so the same typeface, the same weights and the same
   greens are used on both sides — see src/styles.css.
   ========================================================================== */

/* Outfit — self-hosted, the same two files the app ships.
   Not fetched from Google Fonts: a blocking third-party request would stall
   the first paint on the slow connections this page is read on, and the fonts
   are already in the repository for the app. Both files are the variable font
   covering 100-900, which is why one face per unicode range is enough. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/outfit-latin.woff2") format("woff2");
  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: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  /* The app's palette, converted from the oklch tokens in src/styles.css.
     Written as hex because these pages must render on old Android WebViews
     that predate oklch() — the values are the same colours, not near ones. */
  --brand-900: #0b3d2c;
  --brand-700: #005c39;
  --brand-600: #007448; /* app --primary  oklch(0.49 0.12 160) */
  --brand-500: #1e9470;
  --brand-100: #dcefe7;

  --bg: #f8f7f1; /* app --background     oklch(0.975 0.008 95) */
  --surface: #ffffff; /* app --card */
  --surface-sunk: #f0eee7; /* app --surface-sunk   oklch(0.95 0.01 95)   */
  --text: #0f1e18; /* app --foreground     oklch(0.22 0.025 165) */
  --text-muted: #596b62; /* app --muted-foreground */
  --border: #e0ded5; /* app --border         oklch(0.9 0.012 95)   */
  --border-strong: #cdd2cc;
  --accent: var(--brand-600);
  --accent-text: #ffffff;
  --danger: #b3261e;
  --focus: var(--brand-600);

  /* The app's corner radii: panels 20px, tiles 14px, controls 12px. The site
     was a tighter 10/6, which read as a different, sharper product. */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --measure: 68ch;
  --page: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Same hue family as light, inverted — mirroring the app's .dark block. */
    --bg: #0a110e; /* app dark --background oklch(0.17 0.014 165) */
    --surface: #111b16; /* app dark --card       oklch(0.21 0.016 165) */
    --surface-sunk: #0d1512;
    --text: #eff3f0; /* app dark --foreground */
    --text-muted: #9ba8a1; /* app dark --muted-foreground */
    --border: #262d2a;
    --border-strong: #35403b;
    --accent: #47be8b; /* app dark --primary    oklch(0.72 0.13 162) */
    --accent-text: #0a110e;
    --danger: #ff6b60;
    --focus: #47be8b;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    "Outfit",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* Lining tabular figures so money columns align down the page. */
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}

/* Weights follow the app's type system: nothing goes above 600, and rank
   comes from size, colour and space rather than from piling on weight. The
   site previously sat at 650, which read a step louder than the product. */
h1,
h2,
h3,
h4 {
  margin: 0 0 var(--sp-3);
  line-height: 1.2;
  letter-spacing: -0.018em;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  letter-spacing: -0.038em;
  line-height: 1.05;
}
h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
  letter-spacing: -0.022em;
}
h3 {
  font-size: 1.0625rem;
}
h4 {
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: 0;
}

p {
  margin: 0 0 var(--sp-4);
  max-width: var(--measure);
}

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

/* WCAG 2.2: a visible, thick-enough, high-contrast focus ring everywhere. */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

code,
.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.section {
  padding-block: var(--sp-8);
}
.section + .section {
  border-top: 1px solid var(--border);
}

.prose {
  max-width: var(--measure);
}
.prose h2 {
  margin-top: var(--sp-7);
}
.prose h3 {
  margin-top: var(--sp-5);
}
.prose ul,
.prose ol {
  padding-left: 1.25rem;
  margin-bottom: var(--sp-4);
}
.prose li {
  margin-bottom: var(--sp-2);
  max-width: var(--measure);
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.lede {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 56ch;
}

.muted {
  color: var(--text-muted);
}
.small {
  font-size: 0.875rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

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

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 60px;
}

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

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  flex: none;
}
.brand-mark svg {
  width: 17px;
  height: 17px;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  /* 44px minimum touch target on phones. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.site-nav a:hover {
  color: var(--text);
  background: var(--surface-sunk);
}
.site-nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 640px) {
  .site-header .wrap {
    flex-wrap: wrap;
    padding-block: var(--sp-2);
  }
  .site-nav {
    margin-left: 0;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .site-nav::-webkit-scrollbar {
    display: none;
  }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 80ms ease;
}
.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, black);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--surface-sunk);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--danger) 88%, black);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* ── Surfaces ────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.grid {
  display: grid;
  gap: var(--sp-4);
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ── Feature list ────────────────────────────────────────────────────────── */

.feature {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.feature-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.feature-icon svg {
  width: 18px;
  height: 18px;
}
.feature h3 {
  margin-bottom: 4px;
  font-size: 1rem;
}
.feature p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */

.price-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}

.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.plan[data-featured="true"] {
  border-color: var(--accent);
  border-width: 2px;
}

.plan-name {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.plan-price {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.038em;
  margin: var(--sp-2) 0 0;
  line-height: 1;
}
.plan-price small {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}
.plan-note {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: var(--sp-2) 0 var(--sp-4);
}

.plan ul {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
}
.plan li {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding: 7px 0;
  font-size: 0.9375rem;
  border-top: 1px solid var(--border);
}
.plan li:first-child {
  border-top: 0;
}
.plan li svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  color: var(--accent);
}

.badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-700);
}
@media (prefers-color-scheme: dark) {
  .badge {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
  }
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

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

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
th,
td {
  text-align: left;
  padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 650;
  background: var(--surface-sunk);
}
tbody tr:last-child td {
  border-bottom: 0;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */

.field {
  margin-bottom: var(--sp-4);
}
.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.field .hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.input,
.textarea,
select {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--sp-3);
  font: inherit;
  font-size: 1rem; /* 16px stops iOS Safari zooming the page on focus */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 160ms ease;
}
.input:focus,
.textarea:focus {
  border-color: var(--accent);
}
.textarea {
  min-height: 110px;
  resize: vertical;
}
.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-4);
  font-size: 0.9375rem;
}
.alert-error {
  border-color: var(--danger);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.alert-success {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--sp-6);
  margin-top: var(--sp-8);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.footer-cols {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: var(--sp-5);
}
.footer-cols h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: var(--sp-2);
}
.footer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-cols li {
  margin-bottom: 6px;
}
.footer-cols a {
  color: var(--text-muted);
  text-decoration: none;
}
.footer-cols a:hover {
  color: var(--text);
  text-decoration: underline;
}
.footer-legal {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
}

/* ── Utilities ───────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: var(--accent-text);
  padding: 10px var(--sp-4);
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus {
  left: var(--sp-4);
  top: var(--sp-2);
}

.stack > * + * {
  margin-top: var(--sp-4);
}
.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Download page
   ========================================================================== */

/* Two ways to install, side by side and equally weighted.

   Play is the primary route, but a direct APK is not a footnote here: a Huawei
   device has no Play Services at all, and plenty of phones in this market were
   sold with a store account nobody has the password to. Hiding the second
   option behind a link would strand exactly the shops this app is for. */
.install-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
  margin-top: var(--sp-5);
}

.install {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

.install[data-primary="true"] {
  border-color: var(--accent);
}

.install h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.install h3 svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--accent);
}
.install p {
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* Numbered install steps. Numbered because they genuinely are a sequence —
   the unknown-sources prompt only appears after the download has started. */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: var(--sp-3);
  max-width: var(--measure);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Version / size / requirement facts under the download buttons. */
.facts {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 0;
  padding: var(--sp-4);
  background: var(--surface-sunk);
  border-radius: var(--radius);
}

.facts dt {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.facts dd {
  margin: 2px 0 0;
  font-weight: 600;
  font-size: 0.9375rem;
}

/* ==========================================================================
   Data safety table
   ========================================================================== */

/* Mirrors the Play Console data-safety form field for field. The two are
   answering the same question and a reviewer compares them line by line, so
   they are written from the same list rather than paraphrased separately. */
.safety-row {
  display: grid;
  gap: var(--sp-2) var(--sp-4);
  grid-template-columns: 1.2fr 2fr;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border);
}

.safety-row:first-of-type {
  border-top: 0;
}
.safety-row h3 {
  font-size: 1rem;
  margin: 0;
}
.safety-row p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.safety-row dl {
  margin: 0;
  display: grid;
  gap: 4px;
}
.safety-row dt {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.safety-row dd {
  margin: 0 0 var(--sp-2);
  font-size: 0.9375rem;
}

@media (max-width: 640px) {
  .safety-row {
    grid-template-columns: 1fr;
  }
}

/* --- Landing: hero phone, screenshot gallery, CTA -------------------------
   The screenshots are the product; everything here exists to frame them and
   then get out of the way. No motion beyond the native scroll-snap. */
.hero-grid { display: grid; gap: var(--sp-7); align-items: center; }
.hero-phone { margin: 0; justify-self: center; max-width: 340px; }
.hero-phone img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 40px rgba(11, 61, 44, 0.18)); }
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; }
  .hero-phone { max-width: 380px; }
}
.stats { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); }
.stats strong { display: block; font-size: 1.75rem; color: var(--brand-600); font-variant-numeric: tabular-nums; line-height: 1.1; }
.stats span { font-size: 0.875rem; color: var(--text-muted); }

.section-sunk { background: var(--surface-sunk); border-block: 1px solid var(--border); }
.gallery {
  display: flex; gap: var(--sp-5); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--sp-6) max(var(--sp-4), calc((100vw - var(--page)) / 2 + var(--sp-4))) var(--sp-4);
  scrollbar-width: thin;
}
.gallery:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.shot { flex: 0 0 min(64vw, 250px); margin: 0; scroll-snap-align: center; }
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption { margin-top: var(--sp-3); display: grid; gap: 2px; }
.shot figcaption span { font-size: 0.875rem; color: var(--text-muted); }

.cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5);
  background: var(--brand-900); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-7) var(--sp-6);
}
.cta h2 { color: #fff; margin: 0 0 var(--sp-2); }
.cta p { color: rgba(255, 255, 255, 0.78); margin: 0; }
.btn-light { background: #fff; color: var(--brand-700); }
.btn-light:hover { background: var(--brand-100); }