/*
 * HaveFun — the marketing site.
 *
 * The app's redesign, in its dark theme, and dark only: a black page, ink rules, dashed rows,
 * KitSans sentence-case titles, Anton figures, lime for money, lilac for tags and the tab that
 * is on, stickers with a two-degree tilt, and no shadows, gradients or rounded corners on any
 * container. The card art keeps its own corners. There is no light theme here, so every
 * surface is stated rather than inherited.
 *
 * Fonts are served from here rather than Google, so the page needs no third-party connection to
 * render its own headline. They are the same files the app ships, byte for byte.
 */

@font-face { font-family: KitSans; src: url('/fonts/kitsans-800-lat.woff2') format('woff2'); font-weight: 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: KitSans; src: url('/fonts/kitsans-800-latext.woff2') format('woff2'); font-weight: 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; }
@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 {
  /* The app's dark tokens, by name. */
  --bg: #0A0A0A;
  --ink: #FBFBFB;
  --ink-2: #C8C8C8;
  --ink-3: #8E8E8E;
  --rule: #2A2A2A;
  --rule-dashed: #333333;
  --surface-2: #141414;
  --row-hover: #141414;
  --lime: #7CE22B;
  --lilac: #C7A6F6;
  --coral: #F5A99E;
  --chip-bg: #1A1426;
  --chip-tx: #C7A6F6;
  --bar-rule: #3A3A3A;

  /* The same page column the app uses: 1480 wide, 40px gutters, centred. */
  --page-w: 1480px;
  --gutter: 40px;
  --edge: max(var(--gutter), calc((100% - var(--page-w)) / 2 + var(--gutter)));
  --rhythm: 72px;
  --bar-h: 84px;

  --f-head: KitSans, 'Helvetica Neue', sans-serif;
  --f-fig: Anton, 'Helvetica Neue', sans-serif;
  --f-ui: Manrope, 'Helvetica Neue', Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 600 15px/1.6 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--lime); color: #0D0D0D; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }

/* Everything sits in one column: the gutter grows past the rail once the window is wider than
   it, so the bar, which has no box of its own to centre, lands on exactly the same edges. */
.wrap { width: 100%; padding-inline: var(--edge); }
section { padding-top: var(--rhythm); }

/* ── Shared pieces: stickers, tags, chips, buttons, section heads ── */
.sticker, .tag {
  display: inline-flex; align-items: center; padding: 6px 10px; width: max-content;
  font: 800 10px/1 var(--f-ui); letter-spacing: 1.8px; text-transform: uppercase;
  background: var(--lilac); color: #0D0D0D; transform: rotate(-2deg); transform-origin: left center;
}
.tag { padding: 5px 8px; font-size: 9px; letter-spacing: 1.4px; }
.chip { display: inline-flex; align-items: center; padding: 5px 9px; background: var(--chip-bg); color: var(--chip-tx);
  font: 800 9px/1 var(--f-ui); letter-spacing: 1.1px; text-transform: uppercase; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px;
  background: var(--lilac); color: #0D0D0D; border: 2px solid var(--lilac);
  font: 800 11px/1 var(--f-ui); letter-spacing: 1.4px; text-transform: uppercase; transition: transform .12s; }
.btn:hover { transform: translate(-2px, -2px); }
.btn.ghost { background: none; color: var(--ink); border-color: var(--ink); }
.btn.ink { background: #0D0D0D; color: #FBFBFB; border-color: #0D0D0D; }
.sec-head { display: flex; align-items: center; gap: 14px; min-height: 64px; border-bottom: 1px solid var(--rule); }
.sec-t { font: 800 20px/1 var(--f-head); letter-spacing: 0; color: var(--ink); }
.sec-note { font: 800 9px/1.4 var(--f-ui); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); }
.sp { flex: 1; }

/* ── The bar ── */
.bar { position: sticky; top: 0; z-index: 50; height: var(--bar-h); display: flex; align-items: center;
  background: var(--bg); border-bottom: 1px solid var(--bar-rule); }
.bar-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; }
.brand img { display: block; height: 34px; width: auto; }
.bar-nav { display: flex; gap: 8px; justify-content: center; }
.bar-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 2px solid transparent;
  font: 800 11px/1 var(--f-ui); letter-spacing: 1.5px; text-transform: uppercase; color: #FBFBFB; }
.bar-nav a:hover { border-color: #FBFBFB; }
.bar-cta { justify-self: end; display: inline-flex; align-items: center; height: 44px; padding: 0 16px;
  border: 1px solid var(--lime); background: var(--lime); color: #0D0D0D; font: 800 10px/1 var(--f-ui); letter-spacing: 1.4px; text-transform: uppercase;
  transition: transform .12s; }
.bar-cta:hover { transform: translate(-2px, -2px); }

/* ── Hero ── */
.hero { padding-block: 24px 44px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.hero h1 { margin-top: 22px; font: 800 clamp(44px, 4.6vw, 64px)/.95 var(--f-head); letter-spacing: -.5px; text-wrap: balance; }
.hero h1 .lime { color: var(--lime); }
.hero-body { margin-top: 22px; font: 600 15.5px/1.65 var(--f-ui); color: var(--ink-2); max-width: 520px; text-wrap: pretty; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-cap { margin-top: 16px; font: 600 12.5px/1.6 var(--f-ui); color: var(--ink-3); max-width: 520px; }

/* The store strip: two plates, not links, each saying so. */
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--rule); color: var(--ink); }
.store-badge svg { width: 20px; height: 20px; flex: none; margin-top: -2px; }
.store-badge b { font: 400 16px/1 var(--f-fig); letter-spacing: .5px; text-transform: uppercase; }
.store-badge em { padding: 3px 6px; background: var(--chip-bg); color: var(--chip-tx); font: 800 8px/1 var(--f-ui); letter-spacing: 1.2px; text-transform: uppercase; font-style: normal; }

/* The three-card fan. Percentages throughout so it scales with the column; the padding is what
   keeps the turned cards inside the page — measured, each paints about 29% of a card's width
   past its box, and 0.29 x 0.385 of the content box is 9.3% of the column. */
.fan3 { width: 100%; padding-inline: 9.3%; display: flex; align-items: center; justify-content: center; }
.fan3 figure { position: relative; flex: none; width: 38.5%; margin: 0; }
.fan3 img { width: 100%; height: auto; display: block; border-radius: 4.76% / 3.4%; }
.fan3-l { z-index: 1; margin-right: -8%; transform: rotate(-9deg) translateY(3.5%); }
.fan3-c { z-index: 2; transform: translateY(-4%) scale(1.045); }
.fan3-r { z-index: 1; margin-left: -8%; transform: rotate(9deg) translateY(3.5%); }
@media (hover: hover) and (pointer: fine) {
  .fan3 figure { transition: transform .42s cubic-bezier(.22, .8, .28, 1), z-index 0s linear .42s; }
  .fan3 figure:hover { z-index: 3; transition: transform .42s cubic-bezier(.22, .8, .28, 1), z-index 0s; }
  .fan3-l:hover { transform: rotate(-3deg) translateY(-1.5%) scale(1.06); }
  .fan3-c:hover { transform: translateY(-6%) scale(1.10); }
  .fan3-r:hover { transform: rotate(3deg) translateY(-1.5%) scale(1.06); }
  .fan3:has(.fan3-l:hover) .fan3-c { transform: translate(5%, -4%) scale(1.045); }
  .fan3:has(.fan3-r:hover) .fan3-c { transform: translate(-5%, -4%) scale(1.045); }
  .fan3:has(.fan3-c:hover) .fan3-l { transform: rotate(-9deg) translate(-5%, 3.5%); }
  .fan3:has(.fan3-c:hover) .fan3-r { transform: rotate(9deg) translate(5%, 3.5%); }
}

/* ── The three panels ── */
.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 0; }
.panel { display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 24px;
  background: var(--surface-2); border: 1px solid var(--rule); color: var(--ink); transition: transform .12s; }
.panel:hover { transform: translate(-2px, -2px); }
.panel.lime { background: var(--lime); color: #0D0D0D; border-color: var(--lime); }
.panel.lime .tag { background: #0D0D0D; color: #FBFBFB; }
.panel b { display: block; font: 800 30px/1 var(--f-head); letter-spacing: -.2px; }
.panel em { display: block; margin-top: 12px; font: 600 12.5px/1.5 var(--f-ui); font-style: normal; text-wrap: pretty; opacity: .8; }

/* ── Rows: the app's feed rows, dashed between ── */
.rows { display: block; }
.row { display: flex; align-items: center; gap: 20px; min-height: 84px; padding: 14px 0; border-bottom: 1px dashed var(--rule-dashed); }
.row:hover { background: var(--row-hover); }
.row-tag { width: 92px; flex: none; padding: 5px 0; text-align: center; font: 800 9px/1 var(--f-ui); letter-spacing: 1.3px; text-transform: uppercase; color: #0D0D0D; }
.row-tag.lime { background: var(--lime); }
.row-tag.lilac { background: var(--lilac); }
.row-b { flex: 1; min-width: 0; }
.row-b b { display: block; font: 800 15px/1.2 var(--f-ui); }
.row-b em { display: block; margin-top: 6px; font: 600 12.5px/1.5 var(--f-ui); font-style: normal; color: var(--ink-3); }
.row-n { width: 80px; text-align: right; font: 400 22px/1 var(--f-fig); color: var(--ink-3); }

/* ── Pair: pack scan beside the top six ── */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.pair-h { margin-top: 24px; font: 800 clamp(30px, 3vw, 40px)/1.02 var(--f-head); letter-spacing: -.3px; text-wrap: balance; }
.pair-body { margin-top: 18px; font: 600 15px/1.65 var(--f-ui); color: var(--ink-2); max-width: 520px; }
.steps-min { display: block; margin-top: 22px; }
.step-min { display: flex; align-items: center; gap: 16px; min-height: 58px; border-bottom: 1px dashed var(--rule-dashed); }
.step-min b { width: 40px; flex: none; font: 400 22px/1 var(--f-fig); color: var(--lime); }
.step-min p { font: 800 14px/1.4 var(--f-ui); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.tile { margin: 0; }
.tile-art { position: relative; display: block; aspect-ratio: 5 / 7; background: var(--surface-2); overflow: hidden; }
.tile-art img { width: 100%; height: 100%; object-fit: cover; }
.rank { position: absolute; top: 0; left: 0; width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--lilac); color: #0D0D0D; font: 400 15px/1 var(--f-fig); }
.tile figcaption { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin-top: 10px; }
.tile figcaption b { font: 800 13px/1.2 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile figcaption span { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 400 20px/1 var(--f-fig); color: var(--lime); }
.tile figcaption em { font: 600 11px/1 var(--f-ui); font-style: normal; color: var(--ink-3); }

/* ── How it works ── */
.steps { display: block; }
.step { display: flex; align-items: center; gap: 24px; min-height: 92px; padding: 14px 0; border-bottom: 1px dashed var(--rule-dashed); }
.step-n { width: 60px; flex: none; font: 400 40px/1 var(--f-fig); color: var(--lime); }
.step-b { flex: 1; min-width: 0; }
.step-b b { display: block; font: 800 22px/1 var(--f-head); }
.step-b em { display: block; margin-top: 8px; font: 600 13.5px/1.55 var(--f-ui); font-style: normal; color: var(--ink-2); max-width: 720px; }
.step-s { width: 200px; text-align: right; font: 800 9px/1.5 var(--f-ui); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); }

/* ── Plans ── */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; max-width: 900px; }
.plan { display: flex; flex-direction: column; padding: 24px; background: var(--surface-2); border: 1px solid var(--rule); }
.plan.lime { background: var(--lime); color: #0D0D0D; border-color: var(--lime); }
.plan.lime .tag { background: #0D0D0D; color: #FBFBFB; }
.price { margin-top: 26px; display: flex; align-items: baseline; gap: 10px; }
.price b { font: 400 56px/1 var(--f-fig); }
.price span { font: 800 10px/1.4 var(--f-ui); letter-spacing: 1.2px; text-transform: uppercase; opacity: .7; }
.plan-blurb { margin-top: 10px; font: 600 13.5px/1.5 var(--f-ui); opacity: .8; }
.plan ul { margin: 22px 0 0; padding: 0; list-style: none; display: block; }
.plan li { padding: 11px 0; font: 700 13.5px/1.45 var(--f-ui); border-top: 1px dashed var(--rule-dashed); }
.plan.lime li { border-top-color: rgba(13, 13, 13, .35); }
.plan .btn { width: 100%; margin-top: 24px; }
.plan-foot { margin-top: 22px; font: 600 12.5px/1.6 var(--f-ui); color: var(--ink-3); max-width: 900px; }

/* ── FAQ ── */
.faq { display: block; }
.q { border-bottom: 1px dashed var(--rule-dashed); }
.q summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 66px; padding: 14px 0;
  cursor: pointer; list-style: none; font: 800 15px/1.4 var(--f-ui); color: var(--ink); }
.q summary::-webkit-details-marker { display: none; }
.q summary::after { content: '+'; flex: none; font: 400 22px/1 var(--f-fig); color: var(--lime); }
.q[open] summary::after { content: '\2212'; }
.q p { padding: 0 64px 22px 0; font: 600 14px/1.65 var(--f-ui); color: var(--ink-2); max-width: 820px; }

/* ── CTA ── */
.cta { padding-bottom: var(--rhythm); }
.cta-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 48px; align-items: center;
  padding: 56px 48px; background: var(--lilac); color: #0D0D0D; }
.cta-panel .tag { background: #0D0D0D; color: #FBFBFB; }
.cta h2 { margin-top: 20px; font: 800 clamp(30px, 3.2vw, 44px)/1 var(--f-head); letter-spacing: -.3px; text-wrap: balance; max-width: 640px; }
.cta p { margin-top: 16px; font: 600 14.5px/1.6 var(--f-ui); max-width: 480px; opacity: .85; }
.cta .btn { width: 100%; }
.cta-fine { margin-top: 12px; font: 600 12px/1.55 var(--f-ui); opacity: .75; }

/* ── The phone footer ── */
.foot { margin-top: var(--rhythm); border-top: 1px solid var(--rule); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding: 48px 0 36px; }
.foot-brand p { margin-top: 16px; font: 600 13px/1.6 var(--f-ui); color: var(--ink-3); max-width: 300px; }
.foot-tag { margin-top: 14px; font: 800 12px/1 var(--f-ui); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); }
.foot-col h4 { font: 800 9px/1 var(--f-ui); letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-3); }
.foot-col ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.foot-col a { font: 700 13.5px/1.3 var(--f-ui); color: var(--ink-2); }
.foot-col a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.foot-bot { padding-bottom: 40px; }
.foot-legal { border-top: 1px dashed var(--rule-dashed); padding-top: 18px; }
.foot-legal p { font: 600 11.5px/1.6 var(--f-ui); color: var(--ink-3); max-width: 720px; }

/* ── Narrower screens ── */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .fan3 { width: min(520px, 100%); }
  .panels { grid-template-columns: 1fr; }
  .panel { min-height: 0; gap: 22px; }
  .pair { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plans { grid-template-columns: 1fr; }
  .step { flex-wrap: wrap; }
  .step-s { width: auto; text-align: left; }
  .cta-panel { grid-template-columns: 1fr; gap: 28px; padding: 40px 28px; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; --rhythm: 56px; --bar-h: 64px; }
  .bar-in { grid-template-columns: 1fr auto; }
  .bar-nav { display: none; }
  .brand img { height: 26px; }
  .hero h1 { font-size: 34px; letter-spacing: -.4px; }
  .sec-head { flex-wrap: wrap; min-height: 0; padding: 14px 0; row-gap: 8px; }
  .sec-note { flex-basis: 100%; }
  .row { flex-wrap: wrap; gap: 12px; }
  .row-n { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-brand { grid-column: 1 / -1; }
  .q p { padding-right: 0; }
}

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

/* The shared footer takes over on desktop — see /chase-footer.css, one file served to this site
   and to the app. This page's own footer stays below 1000px, where the shared one is hidden. */
@media (min-width: 1000px) { .foot { display: none; } }

/* The shared footer is painted for both hosts by that file; here it follows this page's dark. */
html .fo-foot { background: var(--bg); color: var(--ink-2); border-top: 1px solid var(--rule); }
html .fo-foot-brand img { display: block; height: 28px; width: auto; }
html .fo-foot-col a { color: var(--ink-2); }
html .fo-foot-col a:hover { color: var(--ink); }
html .fo-foot-social span { background: var(--surface-2); border: 1px solid var(--rule); }
html .fo-foot-social span::before { background: var(--ink); }
html .fo-foot-bot { border-top: 1px dashed var(--rule-dashed); color: var(--ink-3); }