/*
 * The policy pages — privacy and support — in Chase's own clothes.
 *
 * These two are served from `public/` on the app host and are the only pages in the project
 * that belong to neither the app nor the marketing site: they are reached from the app's
 * profile, from the marketing footer, and from App Store Connect's two required URL fields,
 * so they have to look like Chase to somebody arriving from any of the three.
 *
 * One stylesheet rather than a `<style>` block in each, because the two pages are the same
 * design and a second copy is a second thing to forget. It is deliberately **not**
 * `public/styles.css` — that is 6,400 lines for an app these pages do not run, and pulling it
 * in to set a heading would be most of a megabyte for two documents of text.
 *
 * The palette, the fonts and the sharp edges are V2's, copied from `site/styles.css` rather
 * than approximated. `scripts/build.mjs` minifies only `app.js` and `styles.css`, so this file
 * is served exactly as written — keep it small by hand.
 */

/* Archivo 700 for the wordmark only. See public/styles.css for why this is the static 700 cut
   rather than the two-axis variable, and why it is self-hosted. Anton stays for headings. */
@font-face { font-family: Archivo; src: url('/fonts/archivo-700-lat.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Archivo; src: url('/fonts/archivo-700-latext.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Anton; src: url('/fonts/anton-400-lat.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Anton; src: url('/fonts/anton-400-latext.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Manrope; src: url('/fonts/manrope-lat.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Manrope; src: url('/fonts/manrope-latext.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --page: #0A0A0A;
  --panel: #111111;
  --bd-hair: #1C1C1C;
  --bd: #262626;
  --bd-4: #333333;
  --lime: #7CE22B;
  --lime-hi: #B4F04A;
  --tx: #FFFFFF;
  --tx-2: #C8C8C8;
  --tx-3: #9C9C9C;
  --tx-5: #606060;
  --f-dis: Anton, 'Helvetica Neue', sans-serif;
  --f-ui: Manrope, 'Helvetica Neue', Helvetica, sans-serif;
  /* The marketing site's rail, so the wordmark sits where it sits there. */
  --gutter: 23px;
}

/* Nothing is round, the one rule V2 states outright. */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

body {
  margin: 0; background: var(--page); color: var(--tx-2);
  font: 400 16px/1.7 var(--f-ui);
  -webkit-font-smoothing: antialiased;
}

/* ── The bar ──
   The wordmark is a link home, which is the point of it being here: these pages are landed on
   cold from an App Store listing and from the app itself, and until now offered no way back to
   anything. Built the same way as `.brand` on the marketing site — 9px diamond, 12px gap,
   Anton 25/1 at 1.6px — so crossing between the two does not move it. */
.pol-bar {
  position: sticky; top: 0; z-index: 10; height: 71px;
  display: flex; align-items: center; gap: 20px;
  padding-inline: var(--gutter);
  background: rgba(10, 10, 10, .88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bd);
}
/* No underline anywhere in the bar. The generic `a` rule further down gives body links a lime
   rule beneath them, which is right in a paragraph and wrong on a nav item and on the
   wordmark — both were picking it up. */
.pol-bar a { border-bottom: 0; }
.pol-brand { display: flex; align-items: center; gap: 12px; color: var(--tx); text-decoration: none; }
.pol-brand i { width: 9px; height: 9px; flex: none; transform: rotate(45deg); background: var(--lime); }

/* The wordmark, per the CHASE identity sheet. */
.pol-brand span { font-family: Archivo, 'Helvetica Neue', sans-serif; font-weight: 700; font-size: 25px;
  line-height: 1; letter-spacing: 0.007em; text-transform: uppercase; }
.pol-bar nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.pol-bar nav a {
  font: 800 10.5px/1 var(--f-ui); letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--tx-3); text-decoration: none;
}
.pol-bar nav a:hover { color: var(--tx); }
.pol-bar nav a.cta {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  background: var(--lime); color: #08150A;
}
.pol-bar nav a.cta:hover { background: var(--lime-hi); color: #08150A; }

/* ── The document ── */
main { max-width: 760px; margin: 0 auto; padding: 56px var(--gutter) 96px; }

.pol-eyebrow {
  display: flex; align-items: center; gap: 9px; margin: 0 0 16px;
  font: 800 10.5px/1 var(--f-ui); letter-spacing: 2.2px; text-transform: uppercase; color: var(--tx-5);
}
.pol-eyebrow i { width: 6px; height: 6px; flex: none; background: var(--lime); }

h1 {
  margin: 0 0 10px; color: var(--tx);
  font: 400 clamp(38px, 5.4vw, 58px)/1.02 var(--f-dis);
  letter-spacing: .5px; text-transform: uppercase;
}
h2 {
  margin: 44px 0 12px; color: var(--tx);
  font: 400 24px/1.15 var(--f-dis); letter-spacing: .5px; text-transform: uppercase;
}
.meta { margin: 0 0 34px; font: 600 11px/1 var(--f-ui); letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--tx-5); }
p { margin: 0 0 14px; }
strong { color: var(--tx); font-weight: 700; }
a { color: var(--lime); text-decoration: none; border-bottom: 1px solid rgba(124, 226, 43, .35); }
a:hover { color: var(--lime-hi); border-bottom-color: var(--lime-hi); }
code { font: 500 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--tx); }

ul { margin: 0 0 14px; padding-left: 0; list-style: none; }
li { position: relative; margin: 9px 0; padding-left: 20px; }
/* A lime square rather than a bullet — round is the one thing V2 does not do. */
li::before { content: ''; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; background: var(--lime); }

table { width: 100%; border-collapse: collapse; margin: 16px 0 22px; font-size: 15px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--bd-hair); vertical-align: top; }
th { color: var(--tx-5); font: 800 9.5px/1.4 var(--f-ui); letter-spacing: 1.4px; text-transform: uppercase; }
td:first-child { color: var(--tx); font-weight: 600; }
tr:last-child td { border-bottom: 0; }

/* The support page's contact block, and the privacy page's emphasis panel. */
.pol-panel {
  margin: 26px 0 30px; padding: 22px 24px;
  background: var(--panel); border: 1px solid var(--bd); border-left: 3px solid var(--lime);
}
.pol-panel p:last-child { margin-bottom: 0; }
.pol-panel .big { font: 400 22px/1.2 var(--f-dis); letter-spacing: .5px; }
.pol-panel .fine { font-size: 13px; color: var(--tx-5); }

/* A question, in the support page's list of them. */
.q { margin: 26px 0 6px; color: var(--tx); font: 700 16px/1.4 var(--f-ui); }

/* Scoped to the page's *own* footer. Unscoped, this also caught the shared `.fo-foot` that
   arrives from /chase-footer.css — a generic element selector in a stylesheet that shares a
   document with another stylesheet's markup is a collision waiting to happen, and this one
   made the shared footer render as a flex row of links on the policy pages only. */
main > footer {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--bd);
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline;
  font: 600 12px/1.6 var(--f-ui); color: var(--tx-5);
}
main > footer a { border-bottom: 0; font: 800 10.5px/1 var(--f-ui); letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--tx-3); }
main > footer a:hover { color: var(--tx); }
main > footer .sep { margin-left: auto; }

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .pol-bar nav a:not(.cta) { display: none; }
  main { padding-top: 40px; }
  table { font-size: 14px; }
  th, td { padding: 9px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Same handover as the marketing site: the shared footer takes over at 1000px and the small
   one inside <main> carries narrow screens. See /chase-footer.css. */
@media (min-width: 1000px) { main > footer { display: none; } }