/* /about — the landing page. Plain HTML served by the Worker, NOT the React
   app, and readable with no JavaScript at all (every word, the twelve FAQ
   answers included, is in the HTML). Its own stylesheet rather than
   site.css: that file is one 680px reading measure for the policy pages;
   this is a 1180px marketing layout.
   System fonts only — no web font is requested, CJK or Latin. Mobile first. */

:root {
  --bg: #ffffff;
  --text: #101010;
  --body: #3d3d3d;
  --muted: #5b5b5b;
  --faint: #6b6b6b;
  --hairline: #ecebe8;
  --field: #f5f4f2;
  --band: #faf9f7;
  --accent: #7fcdcd;
  --accent-deep: #0e4a4a;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC",
    "Microsoft JhengHei", "Heiti TC", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, ol, fieldset { margin: 0; }
a { color: var(--text); }
a:hover { color: var(--accent-deep); }
input, select, button { font: inherit; color: var(--text); }
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.wrap.narrow { max-width: 860px; }

/* ── Header ── */
.site-head { border-bottom: 1px solid var(--hairline); }
.site-head .wrap {
  padding-top: 16px; padding-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-glyph {
  width: 36px; height: 36px; border: 1.5px solid var(--text);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; line-height: 1;
}
.brand-name { font-weight: 700; letter-spacing: .12em; font-size: 18px; }
.brand-method { font-size: 13px; color: var(--muted); }
.head-nav { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; font-size: 15px; }
.head-nav a { text-decoration: none; }
/* A page that does not exist yet: named, not linked. */
.soon { color: var(--faint); }
.head-cta { border: 1px solid var(--text); padding: 7px 18px; border-radius: 999px; }

/* ── Hero + birth form ── */
.hero .wrap {
  padding-top: 40px; padding-bottom: 48px;
  display: flex; flex-wrap: wrap; gap: 36px; align-items: center;
}
.hero-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.eyebrow { font-size: 14px; letter-spacing: .2em; color: var(--accent-deep); }
h1 { font-weight: 700; font-size: clamp(30px, 8.5vw, 36px); line-height: 1.25; letter-spacing: .02em; }
.lede { font-size: 17px; color: var(--body); max-width: 540px; }
.hero-note { font-weight: 500; }

.birth-form {
  flex: 1 1 400px; min-width: 0;
  border: 1px solid var(--hairline); border-radius: 16px; padding: 22px;
  display: flex; flex-direction: column; gap: 18px;
  background: var(--bg); box-shadow: 0 8px 28px rgba(16, 16, 16, .08);
  scroll-margin-top: 16px;
}
.birth-form h2 { font-weight: 700; font-size: 22px; line-height: 1.4; }
.birth-form fieldset { border: 0; padding: 0; min-width: 0; }
.birth-form legend, .field { font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.5; }
.birth-form legend { padding: 0; margin-bottom: 8px; }
.segmented {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  padding: 4px; background: var(--field); border-radius: 12px;
}
.segmented button {
  height: 42px; border: 0; border-radius: 9px; background: transparent;
  color: var(--faint); font-size: 15px; font-weight: 500; cursor: pointer;
}
.segmented button[aria-pressed="true"] {
  background: var(--bg); color: var(--text); font-weight: 700;
  box-shadow: 0 1px 3px rgba(16, 16, 16, .12);
}
/* One column on a narrow phone: a date field needs more than half a 375px
   screen to show a whole date. Two from 420px up, as designed. */
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.field-row.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field input, .field select {
  width: 100%; min-width: 0; height: 50px;
  border: 1px solid transparent; border-radius: 10px; padding: 0 14px;
  background: var(--field); font-size: 16px; outline-color: var(--accent);
  -webkit-appearance: none; appearance: none;
}
.field select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23101010' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.btn-primary {
  border: 0; border-radius: 12px; background: var(--text); color: var(--bg);
  font-size: 17px; font-weight: 700; letter-spacing: .04em; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none;
}
.btn-primary:hover { color: var(--bg); }
.birth-form .btn-primary { height: 56px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.form-note { font-size: 13px; line-height: 1.7; color: var(--muted); }

/* ── Proof strip ── */
.proof { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.proof .wrap {
  padding-top: 32px; padding-bottom: 32px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px;
}
.proof-item { display: flex; flex-direction: column; gap: 6px; border-left: 3px solid var(--accent); padding-left: 16px; }
.proof-item strong { font-size: 16px; }
.proof-item span { font-size: 14px; line-height: 1.7; color: var(--muted); }

/* ── Sections ── */
.section > .wrap {
  padding-top: 56px; padding-bottom: 56px;
  display: flex; flex-direction: column; gap: 32px;
}
.section h2 { font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.3; }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.section-head p { font-size: 17px; color: var(--body); }
.band { background: var(--band); }
.ruled { border-top: 1px solid var(--hairline); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; padding: 0; list-style: none; }
.card { border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.card strong { font-size: 18px; line-height: 1.5; }
.card span { font-size: 15px; color: var(--muted); }
.card.outlined { border: 1px solid var(--hairline); }
.card.topped { border: 1px solid var(--hairline); border-top: 3px solid var(--accent); }
.card.topped span { color: var(--body); }
.card .step-no {
  width: 48px; height: 48px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; line-height: 1; color: var(--text);
}
.card .tag {
  font-size: 12px; font-weight: 500; background: var(--accent); color: var(--text);
  padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}
.features { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.disclaimer { font-size: 14px; color: var(--muted); }

/* ── FAQ ── */
.faq-list { border-top: 1px solid var(--text); }
.faq-list details { border-bottom: 1px solid var(--hairline); padding: 4px 0; }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; min-height: 44px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 500; line-height: 1.6;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; flex: none; font-size: 24px; line-height: 1; font-weight: 400;
  color: var(--accent-deep); transition: transform .2s;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin: 0 0 16px; font-size: 15px; line-height: 1.9; color: var(--body); }
.faq-list details p:last-child { margin-bottom: 20px; }

/* ── About ── */
.about-us > .wrap { padding-top: 48px; padding-bottom: 48px; gap: 16px; }
.about-us h2 { font-size: clamp(24px, 2.8vw, 32px); }
.about-us p { line-height: 1.9; color: var(--body); }
.about-us .updated { font-size: 13px; color: var(--faint); }

/* ── Final CTA ── */
.final { background: var(--accent); }
.final > .wrap { padding-top: 64px; padding-bottom: 64px; align-items: center; gap: 24px; text-align: center; }
.final h2 { font-size: clamp(28px, 4vw, 48px); }
.final p { font-size: 17px; color: var(--body); }
.final .btn-primary { padding: 16px 32px; }

/* ── Footer ── */
.site-foot { border-top: 1px solid var(--hairline); font-size: 14px; color: var(--muted); }
.site-foot .wrap {
  padding-top: 40px; padding-bottom: 96px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px;
}
.foot-id { display: flex; flex-direction: column; gap: 8px; }
.foot-id strong { color: var(--text); letter-spacing: .12em; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-start; }
.foot-note { flex-basis: 100%; font-size: 13px; color: var(--faint); }

/* ── Floating CTA: shown by the page script once the form has scrolled away ── */
.fab {
  position: fixed; right: 20px; bottom: 24px; z-index: 50;
  min-height: 52px; padding: 0 22px; font-size: 16px;
  box-shadow: 0 8px 24px rgba(16, 16, 16, .22);
}
.fab[hidden] { display: none; }

@media (min-width: 420px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .birth-form { padding: 28px; }
  .birth-form h2 { font-size: 24px; }
}

@media (min-width: 720px) {
  /* Sized so the second line of the headline stays on one line beside the
     form at every desktop width. */
  h1 { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.2; }
  .birth-form { flex: 0 1 440px; }
  .head-nav { gap: 24px; }
  .head-cta { padding: 9px 18px; }
  .hero .wrap { padding-top: 64px; padding-bottom: 72px; gap: 56px; }
  .hero-copy { gap: 24px; }
  .lede { font-size: 18px; }
  .section > .wrap { padding-top: 88px; padding-bottom: 88px; gap: 40px; }
  .card { padding: 28px; }
  .about-us > .wrap { padding-top: 72px; padding-bottom: 72px; gap: 16px; }
  .final > .wrap { padding-top: 96px; padding-bottom: 96px; gap: 24px; }
  .site-foot .wrap { padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faq-list summary::after { transition: none; }
}