/* Scanpik site — shared design system.
 *
 * Single source of truth for the whole site (home, legal pages, share page).
 * Before this file, five HTML files each carried their own copy-pasted <style>
 * block and had already drifted: the legal pages and the old home page used
 * #2e8b57 while the app and share page use the real brand green #00DF7E.
 *
 * Brand tokens mirror Scanpik/Assets.xcassets in the iOS repo. Keep them in
 * sync with the .colorset values, not with an eyeballed approximation.
 */

:root {
  color-scheme: light dark;

  /* Brand — from Assets.xcassets */
  --green: #00df7e;
  --green-ink: #00512e;      /* green dark enough for text on light surfaces */
  --coral: #ff9275;
  --coral-ink: #a8431f;   /* coral dark enough for text on light surfaces */
  /* Ink for text sitting on the bright green fill. Near-black rather than a
     dark green: on #00DF7E a dark green reads as muddy at small sizes. */
  --btn-ink: #00170c;
  --navy: #131033;

  /* Surfaces — mirrors the app's stacking: base is deepest, cards sit above */
  --base: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f7f7fa;
  --line: #e4e4ea;

  /* Text */
  --ink: #1a1a1a;
  --ink-2: #55555c;
  --ink-3: #6e6e73;

  --radius-lg: 24px;
  --radius: 16px;
  --radius-sm: 10px;

  --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  --maxw: 960px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    "PingFang TC", "Noto Sans TC", "Helvetica Neue", sans-serif;
  /* ui-rounded matches the app's rounded display type on Apple platforms and
     falls back to the body stack everywhere else. */
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system,
    BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --base: #101010;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --line: #37373a;

    --ink: #e9e9ea;
    --ink-2: #a8a8ad;
    --ink-3: #8a8a8f;

    --green-ink: #00df7e;
    --coral-ink: #ff9275;
    --shadow: none;
  }
}

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

html {
  scroll-behavior: smooth;
  /* Clears the sticky header so an anchored heading is not hidden under it. */
  scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  line-height: 1.65;
  color: var(--ink);
  background: var(--base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--green-ink);
}

/* Visible focus for keyboard users on every interactive element. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--green-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: var(--btn-ink);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
  z-index: 10;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Logo mark ---------- */

/* The app icon itself, masked to a circle (icon-round.png). Rendered at 256px
   so it stays sharp on high-density screens at both the sizes used here. */
.mark {
  display: block;
  flex: none;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--green-ink);
}

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

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

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  margin-inline-end: auto;
}

/* Header lockup mirrors the hero's hierarchy: the Chinese name in body ink,
   the Latin name in brand green. Reversing them (green then grey) read as if
   Scanpik were a disabled caption — --ink-3 means "secondary UI text"
   everywhere else on the site, and the name borrowed that meaning. */
.site-header .wordmark {
  font-size: 1.15rem;
  color: var(--ink);
}

.wordmark-alt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--green-ink);
}

@media (max-width: 520px) {
  .wordmark-alt {
    display: none;
  }
}

.header-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
}

.header-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
}

.header-links a:hover {
  color: var(--ink);
}

/* Hide the secondary header link on narrow screens so the CTA always fits
   without the header wrapping to two lines. */
@media (max-width: 520px) {
  .header-links .is-optional {
    display: none;
  }
}

/* At 320px even brand + language + CTA overflows, so the language link goes
   too — it is still in the footer. */
@media (max-width: 380px) {
  .header-links .is-secondary {
    display: none;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 44px min target: Apple's minimum, and the same rule the app is held to. */
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: var(--green);
  /* Dark ink on the bright green: white text on #00DF7E fails contrast. */
  color: var(--btn-ink);
  box-shadow: 0 6px 18px rgba(0, 223, 126, 0.3);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 223, 126, 0.36);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-ghost:hover {
  border-color: var(--ink-3);
}

.btn-sm {
  padding: 0.35rem 0.9rem;
  font-size: 0.88rem;
}

/* On the navy hero, the ghost button sits on a dark field regardless of the
   viewer's colour scheme, so its colours are pinned rather than tokenised. */
.on-dark .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.on-dark .btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

/* ---------- Hero ---------- */

/* Brand-coloured light instead of a screenshot: keeps the hero from being a
   flat wall of navy without claiming to show the product. Built from stacked
   radial gradients rather than blurred pseudo-elements — the falloff is
   smoother, it scales with the section instead of being pinned in pixels, and
   there is no large blur layer to recomposite while scrolling. The blue sits
   between the green and the coral so the two brand hues never meet directly,
   which is what made the earlier version look muddy in the middle. */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: clamp(3rem, 8vw, 5rem) 0 clamp(3rem, 8vw, 4.5rem);
  background:
    radial-gradient(105% 105% at -8% -25%, rgba(0, 223, 126, 0.52), rgba(0, 223, 126, 0) 62%),
    radial-gradient(85% 95% at 78% -30%, rgba(86, 120, 255, 0.40), rgba(86, 120, 255, 0) 62%),
    radial-gradient(95% 110% at 112% 120%, rgba(255, 146, 117, 0.46), rgba(255, 146, 117, 0) 60%),
    radial-gradient(75% 95% at -12% 118%, rgba(104, 82, 224, 0.34), rgba(104, 82, 224, 0) 62%),
    linear-gradient(168deg, #1b1650 0%, #141136 44%, #100d2a 100%);
}

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

/* Left-aligned rather than centred, and capped at a readable measure instead
   of being stretched across the full width — the centred stack of icon, giant
   headline and two buttons is the layout every template ships with. */
.hero-copy {
  max-width: 42rem;
}

/* Brand lockup: the app is called 條碼圖鑑 on the home screen and
   「條碼圖鑑 Scanpik」 on the App Store, so the site has to show both or someone
   who installed it cannot tell it is the same product. */
.lockup {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1rem;
}

.lockup-icon {
  border-radius: 50%;
  flex: none;
}

.lockup-names {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
}

.lockup-primary {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #fff;
}

.lockup-secondary {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.1vw, 1.7rem);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--green);
}

.hero-slogan {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 0.7rem;
  color: #fff;
}

.hero .lede {
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.78);
  max-width: 30em;
  margin: 0 0 1.8rem;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.hero-note {
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.2rem;
}

/* ---------- Sections ---------- */

/* Sections stack, so the gap between two of them is twice this value — hence
   the modest number. */
section {
  padding: clamp(2.2rem, 5vw, 3.2rem) 0;
}

/* Left-aligned to follow the hero — a left hero above centred section heads
   reads as two different pages stacked. The closing CTA keeps its own centring
   because it is a distinct panel, not body copy. */
.section-head {
  max-width: 40em;
  margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 0.6rem;
}

.nowrap {
  white-space: nowrap;
}

.section-head p {
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}


.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}

.card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}

/* Numbered step badge on the "how it works" cards. */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green-ink);
  font-family: var(--font-display);
  font-weight: 800;
  margin-bottom: 0.9rem;
}


/* The steps are a real <ol>: they are sequential, and the numbers are the
   content, not decoration. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Category chips — the point they carry is that Scanpik is cross-category,
   not a food app, so they are deliberately mixed. */
.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chip {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink-2);
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 42em;
  display: grid;
  gap: 0.7rem;
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 1.2rem;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

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

.faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink-3);
  line-height: 1;
}

.faq details[open] summary::after {
  content: "–";
}

.faq details p {
  margin: 0 0 1.1rem;
  color: var(--ink-2);
}

/* ---------- CTA band ---------- */

.cta-band {
  text-align: center;
}

.cta-band .inner {
  /* Same light as the hero, tightened to the card so the page opens and closes
     on the same surface. */
  background:
    radial-gradient(90% 130% at -4% -20%, rgba(0, 223, 126, 0.30), rgba(0, 223, 126, 0) 58%),
    radial-gradient(85% 130% at 104% 120%, rgba(255, 146, 117, 0.28), rgba(255, 146, 117, 0) 60%),
    linear-gradient(152deg, #1a1548 0%, var(--navy) 55%, #0d0a24 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 6vw, 3.2rem) 1.5rem;
}

.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  margin: 0 0 0.6rem;
  letter-spacing: -0.02em;
  color: #fff;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 1.6rem;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0 3.5rem;
  font-size: 0.9rem;
  color: var(--ink-3);
}

.site-footer .cols {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.5rem;
  margin-bottom: 1.8rem;
}

.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.site-footer .col-title {
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.2rem;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--ink-2);
  text-decoration: none;
}

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

/* ---------- Legal documents (privacy / terms) ---------- */

.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.doc h1 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}

.doc h2 {
  font-family: var(--font-display);
  margin-top: 2.5rem;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.35rem;
}

.doc h3 {
  margin-top: 1.6rem;
  font-size: 1.02rem;
  color: var(--ink);
}

.doc p,
.doc li {
  color: var(--ink-2);
}

.doc .meta {
  color: var(--ink-3);
  font-size: 0.9rem;
  margin: 0 0 2rem;
}

.doc .lang-switch {
  float: right;
  font-size: 0.9rem;
}

.doc code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  font-size: 0.88em;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.94rem;
}

.doc th,
.doc td {
  border: 1px solid var(--line);
  padding: 0.55rem 0.7rem;
  text-align: start;
  vertical-align: top;
}

.doc th {
  background: var(--surface-2);
}

/* ---------- 404 page ---------- */

/* Named for the share card it started as. The share page itself went back to
   its own inline stylesheet, so 404.html is the only thing left using these. */

.share-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.share-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow);
  text-align: center;
}

.share-card h1 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 0.3rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.share-card .vendor {
  color: var(--ink-3);
  margin: 0 0 0.8rem;
}

.share-card .cta {
  display: block;
  background: var(--green);
  color: var(--btn-ink);
  text-decoration: none;
  padding: 1rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1.1rem;
}

.share-card .cta-sub {
  margin: 0.7rem 0 0;
  color: var(--ink-3);
  font-size: 0.8rem;
}