style.css

/* Content pages — privacy, support. Same ink, bone and gold as the landing
   page and the app, so a legal page reads as part of iMoney rather than as
   a document someone parked on a static host.
   Palette values are kept identical to assets/card.css on purpose. */
:root {
  --ink: #0b0b0c; --ink-raised: #161617; --bone: #f4f1ea;
  --bone-dim: #a8a49c; --bone-faint: #6f6c66;
  --accent: #d9b36a; --hairline: rgba(244,241,234,.12);
}

/* Ink only, deliberately. The rest of the site has one look; a legal page
   that flips to white in light mode reads as somebody else's page. */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  background: var(--ink); color: var(--bone);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  line-height: 1.7; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 760 to match the landing page's column, so the two don't feel like
   different sites. Type goes up with it: a wider measure at the same size
   just makes lines longer to track, which is the trade you don't want on a
   policy someone is actually trying to read. */
main { max-width: 760px; margin: 0 auto; padding: clamp(104px, 18vh, 168px) 24px 40px; }

/* Header matches the landing page's: mark, wordmark, nothing else.
   Pinned to the SCREEN's corner, not the column's — the column centres
   itself for reading, but the brand belongs to the page, and on a wide
   window a mid-screen logo reads as misplaced rather than aligned. Absolute
   rather than fixed so it scrolls away with the top of the document instead
   of hovering over the text. */
header.site { position: absolute; top: 26px; left: clamp(24px, 3vw, 40px);
              display: flex; align-items: center; gap: 9px; }
header.site a { color: var(--bone); text-decoration: none; font-weight: 600;
                font-size: 19px; letter-spacing: -.2px; border-bottom: 0;
                /* SF Rounded, matching the app's wordmark; ui-rounded is the
                   system route to it and falls back gracefully elsewhere. */
                font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, sans-serif; }
/* Direct child only. `header.site a::before` also matched the language link
   and stamped a second logo next to 繁體中文. */
header.site > a::before {
  content: ""; display: inline-block; vertical-align: -5px; margin-right: 9px;
  width: 27px; height: 32px; vertical-align: -7px;
  background: url("/assets/logo-mark.png") center/contain no-repeat;
}
header.site span { color: var(--bone-faint); font-size: 14px; }
header.site span a { font-size: 14px; font-weight: 500; color: var(--bone-faint); }

/* Page titles wear the wordmark's face — SF Rounded, like the app. */
h1 { font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, sans-serif; }
h1 { font-size: clamp(34px, 6vw, 46px); font-weight: 700; letter-spacing: -1.4px;
     line-height: 1.1; margin-bottom: 10px; }
.updated { color: var(--bone-faint); font-size: 14px; margin-bottom: clamp(36px, 6vh, 56px); }

/* The opening lines set the tone quietly — smaller than body copy, not
   larger. Premium type whispers; size is spent on the title alone. */
p.lede { color: var(--bone); font-size: 16px; line-height: 1.8;
         letter-spacing: -.1px; margin-bottom: 8px; }

/* The intro's supporting lines, a step quieter still. */
p.fine { font-size: 14.5px; color: var(--bone-faint); }
/* The line that introduces the promises is itself a promise — full ink. */

h2 { font-size: 23px; font-weight: 650; letter-spacing: -.4px; line-height: 1.3;
     margin: clamp(44px, 7vh, 68px) 0 14px; }
/* No rule above headings. The gold hairline was doing decoration's job, not
   structure's — the margin above an h2 already separates sections, and a
   coloured tick on every one of them read as ornament the pages didn't need. */

p.lede + p.lede { margin-top: 14px; }
p, li { color: var(--bone-dim); font-size: 17.5px; }
p + p { margin-top: 14px; }
p strong, li strong, td strong { color: var(--bone); font-weight: 600; }

ul { padding-left: 4px; margin: 14px 0; list-style: none; }
li { margin: 10px 0; padding-left: 20px; position: relative; }
li::before { content: ""; position: absolute; left: 2px; top: 12px;
             width: 5px; height: 5px; border-radius: 50%;
             background: var(--bone-faint); }

a { color: var(--accent); text-decoration: none;
    border-bottom: 1px solid rgba(217,179,106,.35); }
a:hover { border-bottom-color: var(--accent); }

/* The summary table reads as a spec sheet: no grid, just rows. */
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th, td { text-align: left; padding: 16px 0; border-bottom: 1px solid var(--hairline);
         color: var(--bone-dim); vertical-align: top; font-size: 16.5px; }
th { color: var(--bone); font-weight: 600; width: 30%; padding-right: 28px; }
tr:last-child th, tr:last-child td { border-bottom: 0; }

.card { background: var(--ink-raised); border: 1px solid var(--hairline);
        border-radius: 20px; padding: 26px 28px; margin: 24px 0; }

.pill { display: inline-block; background: var(--bone); color: var(--ink);
        font-weight: 600; font-size: 16px; padding: 14px 24px; border-radius: 999px;
        text-decoration: none; margin-top: 14px; border: 0; }
.pill:hover { border: 0; }

footer { margin-top: clamp(64px, 12vh, 110px); padding-top: 22px;
         border-top: 1px solid var(--hairline);
         color: var(--bone-faint); font-size: 13px; }
footer a { color: var(--bone-faint); border-bottom: 0; }
footer a:hover { color: var(--bone-dim); }

@media (max-width: 560px) {
  th { width: 42%; padding-right: 14px; }
  th, td { font-size: 14.5px; }
}

/* ---------------------------------------------------------------------------
   Disclosure rows — the Apple support-page pattern. A stack of hairline-
   separated rows; the question on the left, a chevron on the right that
   turns a quarter when the row opens.

   Built on <details>, so it works with no JavaScript, is keyboard-operable,
   and screen readers announce the expanded state on their own. A div-and-
   onclick version would have to reimplement all three and would get at
   least one of them wrong.
   ------------------------------------------------------------------------ */
.faq { margin-top: 8px; border-top: 1px solid var(--hairline); }

.faq details { border-bottom: 1px solid var(--hairline); }

.faq summary {
  list-style: none;                 /* the default triangle, gone */
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 2px; cursor: pointer;
  color: var(--bone); font-size: 17.5px; font-weight: 550; line-height: 1.45;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
/* Focus belongs on the row, not on a hairline of text inside it. */
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

/* Drawn rather than a glyph: a chevron in a font is at the mercy of whatever
   font is actually loaded, and this one has to sit at a precise angle. */
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px;
  border-right: 2px solid var(--bone-faint); border-bottom: 2px solid var(--bone-faint);
  border-radius: 1px;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq summary:hover::after { border-color: var(--accent); }

.faq details > *:not(summary) { margin: 0 2px 22px; }
.faq details[open] > *:not(summary) { animation: faq-in .28s cubic-bezier(.2,.8,.2,1); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
  .faq details[open] > *:not(summary) { animation: none; }
}

/* The efficient read: the ONE thing a skimmer should catch before the
   accordions. It sits in its own gold-edged panel — the only warm block
   on an ink page — so the eye lands here first. Defined after the
   generic list rules on purpose: the panel's own dot geometry must win
   the cascade (the old fine-list lost it, and its bullets ended up
   absolutely positioned under the first letter). */
.tldr { border: 1px solid var(--hairline);
        background: rgba(244,241,234,.045);
        border-radius: 16px; padding: 18px 22px; margin: 28px 0 30px; }
.tldr-lead { margin: 0; font-size: 15px; font-weight: 650;
             letter-spacing: -.1px; color: var(--bone); }
.tldr ul { margin: 10px 0 0; padding: 0; list-style: none; }
.tldr li { margin: 8px 0; padding-left: 18px; position: relative;
           font-size: 15.5px; color: var(--bone); }
.tldr li::before { content: ""; position: absolute; left: 0; top: .5em;
                   width: 5px; height: 5px; border-radius: 50%;
                   background: var(--bone-faint); }