/* ============================================================================
   念佛助手 — landing page
   Ported from the Claude Design project, ui_kits/website/index.html.
   Sizes that were fixed in the kit are fluid here: this is the m. subdomain,
   so the 375px phone is the primary target, not the 1120px desktop.
   ========================================================================= */

html { scroll-behavior: smooth; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 40;
  padding: var(--space-3) var(--space-5);
  background: var(--wood-800);
  color: var(--gold-100);
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-calm);
}
.skip-link:focus { top: var(--space-4); color: var(--gold-100); }

/* ── Sticky bar ─────────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-3) var(--gutter);
  background-color: var(--wood-800);
  background-image: var(--texture-wood);
  box-shadow: 0 2px 12px rgba(59, 13, 5, .28);
}

.brand {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-title);
  color: var(--gold-100);
  text-decoration: none;
}
.brand:hover { color: var(--gold-200); }

/* The real App Store icon. iOS icons are squircles, so this is a rounded
   square with a gold rim rather than the kit's circular 念 seal. */
.seal {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 22%;
  box-shadow: 0 0 0 1px var(--gold-400), var(--shadow-sm);
}

.bar nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
/* Padding rather than height, so the links keep their visual size in the bar
   while the hit area reaches the 44px floor. */
.bar nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-2);
  color: var(--gold-200); text-decoration: none; font-size: var(--text-base);
}
.bar nav a:hover { color: var(--gold-100); }

/* Below 760px only the brand and the download plaque stay in the bar. */
@media (max-width: 760px) {
  .bar nav .nav-link { display: none; }
  .bar { gap: var(--space-3); }
}
@media (max-width: 340px) {
  .bar { gap: var(--space-2); }
  .bar .brand { font-size: var(--text-base); }
  .bar .plaque.compact { padding: 8px 12px; }
}

/* ── Plaque button (匾額) ───────────────────────────────────────────────── */
.plaque {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--grad-plaque);
  color: var(--gold-100);
  box-shadow: var(--inset-gold), var(--shadow-sm);
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-title);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-calm);
}
.plaque:hover { background: var(--wood-600); color: var(--gold-100); }
.plaque:active { background: var(--wood-900); box-shadow: inset 0 2px 6px rgba(59, 13, 5, .55); }
.plaque[disabled] { opacity: .6; cursor: default; }

.plaque.outline { background: transparent; color: var(--text-gold); box-shadow: var(--inset-gold); }
.plaque.outline:hover { background: rgba(212, 154, 75, .14); color: var(--gold-700); }

.plaque.compact {
  padding: 8px 18px;
  min-height: var(--tap-min);
  font-size: var(--text-base);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  display: flex; flex-wrap: wrap; align-items: center;
  /* Once the two columns wrap, .shot is alone on its line and does not grow
     (flex-grow: 0), so it would otherwise sit flush left with up to 400px of
     dead space beside it — visible on tablets and any window between roughly
     400 and 800px. Centring only affects a line that HAS free space, and the
     side-by-side line has none because .hero-copy grows to fill it, so the
     desktop layout is unchanged. */
  justify-content: center;
  gap: clamp(var(--space-10), 6vw, var(--space-18));
  padding-block: clamp(var(--space-10), 8vw, var(--space-18)) clamp(var(--space-8), 6vw, var(--space-14));
}
.hero-copy { flex: 1 1 380px; min-width: min(280px, 100%); }

/* Stacked hero: one column, one axis.
   Side by side, the copy sits in a ~380-560px column and reads correctly. Once
   it wraps it stretches to the full container — 736px at 768px wide — so the
   text ran hard against the left gutter while the centred screenshot sat on a
   completely different axis, and .lead's own 30em cap left a ragged right edge
   inside the block. Capping the copy at the same measure the lead already uses
   lets justify-content:center put both on one axis, so the hero reads as a
   single centred column instead of two unrelated pieces.

   779px is where the columns actually wrap (measured): flex-basis 380 + 320,
   plus the fluid gap and the wrap's 32px padding. It is a media query and not
   a flex rule because CSS cannot ask whether a line wrapped. If the bases or
   the gap change, re-measure — the two must agree or the cap fires while the
   hero is still side by side. */
@media (max-width: 779px) {
  .hero-copy { max-width: 34rem; }
}

.kicker {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--text-gold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-plaque);
}
.kicker i { display: block; width: 34px; height: 1px; background: var(--gold-400); flex: 0 0 34px; }

h1 {
  font-size: clamp(40px, 11vw, 68px);
  letter-spacing: var(--tracking-title);
  margin: var(--space-6) 0 var(--space-5);
  font-weight: var(--weight-regular);
}

.lead {
  max-width: 30em;
  font-size: var(--text-md);
  line-height: var(--leading-sutra);
  color: var(--ink-700);
  margin: 0 0 var(--space-8);
}

.cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.apk { font-size: var(--text-sm); color: var(--ink-500); margin: 0; }

/* ── Store badges ───────────────────────────────────────────────────────────
   First-party artwork, used unmodified. No border, shadow, filter or overlay:
   both Apple's and Google's guidelines forbid altering the badges.

   --badge-h is the VISIBLE height of both badges. Apple's SVG artwork fills
   its box, so it takes --badge-h directly. Google's PNG carries 29px of
   transparent padding at top and bottom of a 250px canvas, so its artwork is
   192/250 of the box; its box is scaled up by the inverse to make the two
   render at the same visible height. Apple requires their badge be at least
   as large as any other store badge shown alongside it. */
.store-badges {
  --badge-h: clamp(var(--tap-min), 12vw, 50px);
  align-items: center;
  /* Clear space must be >= 1/4 the badge height on every side. */
  gap: max(var(--space-3), calc(var(--badge-h) / 4));
}
.store-badges a { display: block; line-height: 0; }
.badge { width: auto; }
.badge-apple { height: var(--badge-h); }
.badge-google { height: calc(var(--badge-h) * 250 / 192); }

.shot { flex: 0 1 320px; min-width: min(240px, 100%); display: grid; place-items: center; }
/* A fixed radius, not a percentage: `border-radius: N%` resolves separately
   against width and height, so on a portrait screenshot it draws an ellipse at
   each corner rather than a circle. */
.shot img {
  width: 100%; max-width: 300px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}

/* ── Divider rule ───────────────────────────────────────────────────────── */
.rule { display: flex; align-items: center; gap: var(--space-4); }
.rule i { flex: 1; height: 1px; background: var(--border-gold-soft); }
.rule span { width: 6px; height: 6px; background: var(--gold-400); transform: rotate(45deg); flex: 0 0 6px; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.sect { padding-block: clamp(var(--space-10), 8vw, var(--space-18)); }

/* Anchor targets must clear the sticky bar, or the heading lands underneath it. */
/* The bar is 68px tall; the extra --space-4 keeps a heading from touching it. */
#top, #modes, #screens, #more, #about, #download, #feedback-h, #main {
  scroll-margin-top: calc(68px + var(--space-4));
}

section h2 {
  font-size: clamp(26px, 6vw, var(--text-2xl));
  letter-spacing: var(--tracking-title);
  margin: 0;
  font-weight: var(--weight-regular);
}

/* ── 六大功能 — gold hairline grid ──────────────────────────────────────────
   The hairlines are the container background showing through a 1px gap, so an
   unfilled cell renders as a solid block of that colour. The column count must
   therefore always divide the number of cards. Six cards -> 1, 2, 3 or 6
   columns only; auto-fit is not safe here because it will happily pick 4 or 5.
   Add or remove a card and these breakpoints have to be revisited. */
.modes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-gold-soft);
  border: 1px solid var(--gold-400);
  margin-top: var(--space-10);
}
@media (min-width: 560px) {
  .modes { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .modes { grid-template-columns: repeat(3, 1fr); }
}
.mode { background: var(--paper-200); padding: clamp(var(--space-5), 5vw, var(--space-8)); }
.mode .n {
  font-family: var(--font-numeral);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
  color: var(--gold-500);
  line-height: 1;
}
.mode h3 {
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-title);
  margin: var(--space-4) 0 var(--space-3);
}
.mode p { margin: 0; color: var(--ink-500); line-height: var(--leading-sutra); font-size: var(--text-base); }

/* ── APP 畫面 gallery ───────────────────────────────────────────────────── */
.gallery {
  background-color: var(--paper-200);
  background-image: var(--texture-paper);
  border-top: 1px solid var(--gold-400);
  border-bottom: 1px solid var(--gold-400);
}
/* Six screens, so the column count must divide six or the last row goes ragged:
   2 or 3. Two per row on a phone; one per row would make this a six-screen
   scroll.

   A column is only ADDED once the resulting cell is still at least the 220px
   the images cap at, otherwise widening the window makes the screenshots
   smaller — which is what happened before: 3 columns from 560px took a tile
   from 214px down to 161px, and a 6-column rule at 1000px took it from 220px
   to 135px. .wrap is capped at 1120px, so six across can never exceed ~155px;
   that rule is gone rather than moved. Three across at 760px gives 225px, so
   the tiles only ever grow. */
.shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  margin-top: var(--space-10);
}
@media (min-width: 760px) {
  .shots { grid-template-columns: repeat(3, 1fr); }
}
.shots img {
  width: 100%; max-width: 220px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.shots figcaption {
  width: 100%; max-width: 220px;
  margin: var(--space-4) auto 0;
  text-align: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-gold-soft);
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-title);
  color: var(--text-gold);
}

/* ── 還有這些 — the remaining App Store feature bullets ─────────────────── */
/* Four bullets, so 1 or 2 columns — three across would orphan the fourth. */
.feature-list {
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-10);
}
@media (min-width: 700px) {
  .feature-list { grid-template-columns: repeat(2, 1fr); }
}
.feature-list li {
  position: relative;
  padding-left: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-gold-soft);
  line-height: var(--leading-sutra);
  color: var(--ink-700);
}
/* A gold lozenge, the same mark the divider rule uses. */
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-5) + 0.85em);
  width: 6px; height: 6px;
  background: var(--gold-400);
  transform: rotate(45deg);
}

/* ── 緣起 ───────────────────────────────────────────────────────────────── */
.about {
  background: var(--paper-200);
  border-top: 1px solid var(--gold-400);
  border-bottom: 1px solid var(--gold-400);
}
.about .cols { display: flex; flex-wrap: wrap; gap: clamp(var(--space-8), 6vw, var(--space-18)); }
.about .cols > .head { flex: 0 1 240px; }
.about .cols > .body { flex: 1 1 380px; min-width: min(260px, 100%); }
.about .head .tick { display: block; width: 34px; height: 1px; background: var(--gold-400); margin-top: var(--space-4); }
.about p { max-width: 44em; line-height: var(--leading-sutra); color: var(--ink-700); }

/* ── 意見回饋 form ──────────────────────────────────────────────────────── */
.form { max-width: 720px; margin: 0 auto; }
.form .grid { display: grid; gap: var(--space-4); }
.form .intro { text-align: center; color: var(--ink-500); margin-bottom: var(--space-10); }
.form h2 { text-align: center; }
.form .rule { max-width: 200px; margin: 0 auto var(--space-5); }

label { display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-500); letter-spacing: .06em; }

input, textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: var(--tap-min);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border-hairline);
  background: var(--paper-100);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
textarea { line-height: var(--leading-body); resize: vertical; }
input:focus, textarea:focus { box-shadow: inset 0 0 0 1px var(--gold-400); }

.form .actions { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-2); flex-wrap: wrap; }

.form-msg { font-size: var(--text-sm); color: var(--text-gold); min-height: 1.5em; }
.form-msg[data-state="error"] { color: var(--danger); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer.site {
  background-color: var(--wood-800);
  background-image: var(--texture-wood);
  border-top: 3px double var(--gold-400);
  color: var(--paper-400);
}
footer.site .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-6);
  padding-block: clamp(var(--space-10), 6vw, var(--space-14));
}
footer.site a { color: var(--gold-200); text-decoration: none; font-size: var(--text-sm); }
footer.site .links a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
}
footer.site a:hover { color: var(--gold-100); }
footer.site .links {
  margin-left: auto; margin-right: calc(var(--space-3) * -1);
  display: flex; flex-wrap: wrap; gap: 0;
}
.colophon {
  flex: 1 1 100%;
  border-top: 1px solid rgba(255, 230, 173, .24);
  padding-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--paper-500);
  letter-spacing: .06em;
  line-height: var(--leading-body);
}