/* Shares the design language of the quote page: same Apple system stack, same blue-green family,
   same radii. The .download-* / .capture-host rules further down are deliberately left alone —
   that markup is rasterised into the product PNG, so restyling it would change a delivered file
   rather than the interface. */
:root {
  color-scheme: light;
  --ink: #1c1c1e;
  --muted: #3c3c43bf;
  --blue: #1b7fa8;
  --green: #128a6a;
  --accent: #0a7c8a;
  --accent-strong: #06626e;
  --accent-soft: #e4f2f4;
  --line: #d8d8dd;
  --soft: #f2f2f7;
  --paper: #ffffff;
  --r-control: 10px; --r-card: 14px; --r-sheet: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px #0000000d, 0 1px 3px #0000000a;
  --shadow-2: 0 4px 12px #0000000f, 0 1px 3px #0000000a;
  --ease: cubic-bezier(.32,.72,0,1);
  /* Same text-style set as styles.css. This page does not load styles.css, so the tokens have to
     be declared again here rather than inherited. Keep the two lists identical.
     The `.download-*` rules further down are html2canvas render targets and deliberately keep
     their literal px sizes — a delivered PNG must not change because the interface did. */
  --text-largetitle: 2.125rem;  --text-title:    1.75rem;   --text-title2:  1.375rem;
  --text-title3:     1.25rem;   --text-headline: 1.0625rem; --text-body:    1.0625rem;
  --text-callout:    1rem;      --text-subheadline: .9375rem;
  --text-footnote:   .8125rem;  --text-caption:  .75rem;    --text-caption2:.6875rem;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --tap-min: 44px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
               "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--soft);
}
button, input { font: inherit; }
button, .back-link {
  border: 0;
  border-radius: var(--r-control);
  background: var(--accent);
  color: #fff;
  min-height: 44px;
  padding: 11px 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s var(--ease), transform .12s var(--ease);
}
@media (hover:hover) and (pointer:fine){button:hover{ background: var(--accent-strong); }}
button:active, .back-link:active { transform: scale(.97); }
button:disabled { cursor: wait; opacity: .5; }
button.secondary, .back-link {
  /* The tint alone measures 1.03:1 against the grouped page background — the text is readable but
     the control has no visible edge. A hairline border is what makes it read as a button, on the
     page and on a white card alike. */
  border: 1px solid #c3dde1;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
@media (hover:hover) and (pointer:fine){button.secondary:hover, .back-link:hover{ background: #d6ecee; }}
:where(button, a, input, select):focus-visible {
  outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: var(--r-control);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.follow-shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 26px 0 60px; }
.follow-hero, .board-intro, .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.follow-hero {
  border-radius: var(--r-sheet);
  padding: 28px 30px;
  background: linear-gradient(135deg, #0b6b7a, #0a7c8a 55%, #0c7e8d);
  color: #fff;
  box-shadow: var(--shadow-2);
}
.follow-hero h1 { margin: 5px 0 8px; font-size: clamp(30px, 5vw, 48px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.follow-hero p { margin: 0; color: #fff; }
.eyebrow{ margin: 0; font-size:var(--text-caption2); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.follow-hero .eyebrow { color: #fff; }
.pin-gate { display: grid; place-items: center; padding: 54px 0; }
.pin-gate form {
  width: min(470px, 100%);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-sheet);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-2);
}
.pin-gate h2 { margin: 6px 0; }
.pin-gate label, .interest-panel label { display: grid; gap: 7px; margin: 18px 0 8px; font-weight: 600; color: var(--muted); }
input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 12px 13px;
}
input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3.5px #0a7c8a2e; }
.pin-gate button { width: 100%; margin-top: 16px; }
.official-board-link {
  display: block;
  margin-top: 14px;
  color: #0875a8;
  font-weight: 800;
  text-align: center;
}
.official-board-link[hidden] { display: none; }
.form-error { min-height: 1.4em; color: #d1352b; font-weight: 600; }
.board-intro { margin: 34px 0 18px; }
.board-intro h2, .section-heading h2 { margin: 4px 0 0; }
.board-actions, .admin-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.board-status { min-height: 1.5em; color: var(--muted); font-weight: 700; }
.product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.product-tile {
  width: min(780px, 100%);
  margin: 0 auto;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: var(--shadow-1);
}
.product-card-frame {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
}
.product-card-frame .download-card { transform-origin: top left; }
.product-tile-controls { max-width: 720px; margin: 0 auto; }
.expiry-note { margin: 14px 0 0; color: var(--muted); font-weight: 800; }
.sales-fee-note{ margin: 6px 0 0; color: var(--theme-primary, #075985); font-size:var(--text-title3); font-weight: 900; }
.tile-actions { display: flex; gap: 8px; margin-top: 18px; }
.tile-actions button { flex: 1; }
.product-preview-mode .daily-panel,
.product-preview-mode .admin-panel { display: none; }
.interest-panel, .daily-panel, .admin-panel {
  margin-top: 28px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .94);
}
.interest-panel form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; }
.interest-panel form button { margin-bottom: 8px; }
.notice-text, .privacy-note { color: var(--muted); }
.amount-input { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { border-bottom: 1px solid #d6e4e8; padding: 12px 10px; text-align: left; }
th { background: #eaf5f5; color: #245a6c; }
.empty-row { color: var(--muted); text-align: center; }

.capture-host {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 720px;
  pointer-events: none;
}
.download-card {
  width: 720px;
  padding: 18px;
  background: linear-gradient(160deg, #f6fafb, #edf5f6);
  color: #153445;
}
/* Rasterised into the product PNG. Every value here is pinned literal on purpose: a token change
   made for the interface must never reach a file that has already been sent to a client. */
.download-card article {
  overflow: hidden;
  border: 1px solid #b8d3da;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(13, 69, 88, .14);
}
.download-hero {
  min-height: 200px;
  padding: 26px 32px;
  background: linear-gradient(130deg, var(--theme-primary), var(--theme-accent));
  color: #fff;
}
.download-index { font-size: 27px; font-weight: 900; }
.download-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; }
.download-hero h1 { margin: 0; font-size: 48px; line-height: 1.05; }
.download-hero p { margin: 14px 0 0; font-size: 29px; }
.download-hero strong { font-size: 31px; }
.download-pair { display: grid; grid-template-columns: 1fr 1fr; }
.download-pair > div { padding: 28px 32px; }
.download-pair > div + div { border-left: 1px solid #bdd7de; }
.download-pair small, .download-underlyings > small { display: block; color: #286174; font-size: 25px; }
.download-pair b { display: block; margin-top: 18px; font-size: 40px; }
.download-pair b.highlight { color: var(--theme-primary); font-size: 44px; }
.download-summary { min-height: 174px; background: var(--theme-soft); border-bottom: 1px solid #bdd7de; }
.download-underlyings { min-height: 188px; padding: 30px 32px; border-bottom: 1px solid #c8dce1; }
.download-underlying-list { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 24px; }
.download-underlying-list span { padding: 10px 18px; border-radius: 9px; background: #e7f2f4; font-size: 34px; font-weight: 900; }
.download-terms { min-height: 184px; border-bottom: 1px solid #c8dce1; }
.download-terms em { display: block; margin-top: 13px; color: var(--theme-primary); font-size: 26px; font-style: normal; }
.download-footer { background: linear-gradient(120deg, var(--theme-soft), #eef6f7); color: #286174; }
.download-meta { display: flex; justify-content: space-between; gap: 18px; padding: 24px 32px; font-size: 20px; }
.download-code { padding: 17px 32px; border-top: 1px solid #bdd7de; font-size: 23px; font-weight: 900; letter-spacing: .08em; }

@media (max-width: 900px) {
  .interest-panel form { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .follow-shell { width: min(100% - 18px, 1180px); padding-top: 9px; }
  .follow-hero, .board-intro, .section-heading { align-items: flex-start; flex-direction: column; }
  .follow-hero { padding: 24px 22px; }
  .product-grid, .interest-panel form { grid-template-columns: 1fr; }
  .product-tile { padding: 8px; }
  .product-tile-controls { padding: 0 8px 8px; }
  .tile-actions { flex-direction: column; }
  .interest-panel, .daily-panel, .admin-panel { padding: 18px 14px; }
}

/* ================================ Dark appearance ================================
   Same rule as the quote card: .download-* is rasterised by html2canvas from what is on screen,
   so it is pinned light. A viewer in dark mode must still hand the client a light product image. */
:root { color-scheme: light dark; }

/* The back link sits on the teal hero, not on the page background, so the tinted treatment the
   other secondary buttons use disappears into it — worst in dark mode, where the tint and the
   hero are nearly the same colour. On a coloured header iOS uses a translucent white chip, which
   holds its contrast in both appearances because the hero is always teal.
   Specificity (0,2,0) keeps this ahead of the .back-link rules in both the base and dark blocks. */
.follow-hero .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #06626e;
  border: 0;
  font-weight: 600;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 3px #0000001f;
}
.follow-hero .back-link::before{ content: "‹"; font-size:var(--text-title3); line-height: 1; margin-top: -2px; }
@media (hover:hover) and (pointer:fine){.follow-hero .back-link:hover{ background: #eaf6f7; color: #06626e; }}
.follow-hero .back-link:focus-visible { outline: 2.5px solid #fff; outline-offset: 3px; }

@media (max-width: 760px) {
  /* Matches the quote page: 11px uppercase is below the readable floor on a phone. */
  .eyebrow{ font-size:var(--text-caption); }
}