/*
 * gangify.net, the marketing site.
 *
 * Hand-written CSS, no framework and no build step beyond the page generator. The whole site is
 * four static pages; a toolchain would be more to maintain than the thing it maintains.
 *
 * It deliberately does NOT try to look like the Shopify admin. This page is read by a print shop
 * owner deciding whether to install something, not by a merchant using it, and Polaris styling
 * outside the admin reads as a knock-off rather than as familiarity.
 */

:root {
  --bg: #ffffff;
  --ink: #14181c;
  --muted: #5b656e;
  --line: #e2e6ea;
  --panel: #f6f8f9;
  --accent: #00735a;
  --accent-ink: #ffffff;
  --max: 68rem;
  --radius: 12px;
}

/* Follows the reader's own setting. A marketing site that blazes white at 1am gets closed. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1113;
    --ink: #e8ebed;
    --muted: #9aa3ab;
    --line: #262c31;
    --panel: #161a1d;
    --accent: #2fae8b;
    --accent-ink: #08110d;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

header.site {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
}
header.site .brand { display: inline-flex; flex: 0 0 auto; }
header.site img { display: block; height: 26px; width: auto; }
header.site nav { display: flex; gap: 1.25rem; flex: 1; }
header.site nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9375rem;
}
header.site nav a:hover { color: var(--ink); }
header.site nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* On a phone the nav wraps under the logo rather than squeezing the install button off the
   screen. The button is the point of the header, so it is the thing that keeps its room. */
@media (max-width: 46rem) {
  header.site { flex-wrap: wrap; gap: 0.75rem 1rem; }
  header.site nav { order: 3; flex-basis: 100%; gap: 1rem; }
  header.site .head-cta { margin-left: auto; }
}

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

.btn {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.big { padding: 0.8rem 1.5rem; font-size: 1rem; }

/*
 * The listing does not exist yet, so the install button is not a link.
 *
 * Rendered as a disabled-looking span rather than hidden: a marketing page with no call to
 * action reads as abandoned, and "coming to the App Store" is a true sentence that still tells
 * a visitor what to expect. It becomes a real link the moment GANGIFY_APP_STORE_URL is set.
 */
.btn.disabled { opacity: 0.55; cursor: default; }
.btn.disabled:hover { border-color: var(--accent); filter: none; }

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

main { display: block; }

.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3.5rem 1.25rem 3rem;
}
.hero.narrow { padding-bottom: 1rem; }
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  max-width: 20ch;
}
.hero.narrow h1 { max-width: none; }

.lede { font-size: 1.125rem; color: var(--muted); max-width: 62ch; margin: 0 0 1.5rem; }

.cta { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }

.fine { font-size: 0.8125rem; color: var(--muted); margin: 1rem 0 0; }

.band { max-width: var(--max); margin: 0 auto; padding: 3rem 1.25rem; }
.band.alt {
  max-width: none;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band.alt > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.band.center { text-align: center; }
.band.center .cta { justify-content: center; }
.band h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
}

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

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.grid.two { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  background: var(--bg);
}
.card h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--muted); font-size: 0.9375rem; }

.card.plan .amount {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 0.25rem;
  color: var(--ink);
}
.card.plan .amount em { font-style: normal; font-size: 0.9375rem; font-weight: 400; color: var(--muted); }
.card.plan .note { margin: 0 0 1rem; font-size: 0.875rem; }
.card.plan.best { border-color: var(--accent); }

/* ---- lists ------------------------------------------------------------------------------- */

ul.ticks { list-style: none; margin: 0; padding: 0; }
ul.ticks li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.6rem;
  font-size: 0.9375rem;
  color: var(--muted);
}
/* A drawn mark rather than an emoji: emoji render differently on every platform and read as
   decoration in a screen reader. aria-hidden is not needed because ::before content is ignored
   by assistive tech in every engine that matters. */
ul.ticks li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.85rem;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

dl.faq { margin: 0; }
dl.faq dt { font-weight: 650; margin-top: 1.25rem; }
dl.faq dt:first-child { margin-top: 0; }
dl.faq dd { margin: 0.35rem 0 0; color: var(--muted); }

/* ---- long-form document (the privacy policy) --------------------------------------------- */

.doc {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}
.doc h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -0.02em; margin: 0 0 1.5rem; }
.doc h2 {
  font-size: 1.25rem;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.doc h3 { font-size: 1.0625rem; margin: 1.75rem 0 0.5rem; }
.doc p { margin: 0 0 1rem; }
.doc ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.doc li { margin-bottom: 0.4rem; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.9375rem; }
.doc th, .doc td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); }
.doc th { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
/* Tables are the one thing that cannot reflow on a phone, so they scroll instead of overflowing
   the page and taking the layout with them. */
@media (max-width: 34rem) {
  .doc table { display: block; overflow-x: auto; }
}

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

footer.site {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
}
footer.site strong { color: var(--ink); }
footer.site p { margin: 0.35rem 0 0; }
footer.site nav { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.25rem; }
footer.site nav a { color: var(--muted); text-decoration: none; }
footer.site nav a:hover { color: var(--ink); text-decoration: underline; }
footer.site .fine { margin-top: 1.5rem; font-size: 0.8125rem; }

/* Keyboard users must be able to see where they are. The default outline is fine; what is not
   fine is a stylesheet that removes it, which is why this is stated rather than assumed. */
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}