/* finfuse.com marketing pages. Same design system as the member app (public/m/app.css):
   Evergreen and Cream, Newsreader + Inter Tight Light, hairlines instead of boxes,
   square corners, nothing bold. The painted landscape is the app's own (public/m/scene-svg.js). */
:root {
  --evergreen: #071c14; --evergreen-deep: #04100a; --evergreen-lift: #0c2519; --rule: #2e4a3a;
  --cream: #faf8f5; --cream-alt: #f6f3ee; --raised: #efe8dc; --ink: #191818; --ink-strong: #282115;
  --brown: #786240; --tan: #ccba9e; --sage: #a1bead; --body: #c8d6cd; --warm: #e1d7c6; --lamp: #f3cf7a;
  /* What sits behind the painting for the moment before its preview arrives: the valley's own tones,
     averaged top to bottom (scripts/art/variants.py previews carry it from there). Never a flat green. */
  --wait-paint: linear-gradient(180deg, #c5c7b2 0%, #d7d0b5 28%, #7d8d8a 52%, #636d58 76%, #8b8c6b 100%); --wait-flat: #8f9480;
  --serif: Newsreader, Georgia, "Times New Roman", serif; --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px); --max: 1240px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--evergreen-deep); color: var(--cream); font: 300 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
p, h1, h2, h3, h4, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -.015em; text-wrap: balance; }
a { color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.cream :focus-visible { outline-color: var(--evergreen); }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.kicker { font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); }
.cream .kicker { color: var(--brown); }
.mu { color: var(--body); }
.cream .mu { color: #5b5346; }
.tab { font-variant-numeric: tabular-nums; }

/* Buttons: square, hairline, one filled */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 400 15px/1 var(--sans); padding: 15px 22px; border: 1px solid var(--rule); color: var(--cream); background: transparent; text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.btn:hover { border-color: var(--sage); }
.btn.fill { background: var(--cream); border-color: var(--cream); color: var(--evergreen); }
.btn.fill:hover { background: var(--warm); border-color: var(--warm); }
.btn:active { transform: translateY(1px); }
.cream .btn { color: var(--evergreen); border-color: var(--tan); }
.cream .btn:hover { border-color: var(--evergreen); }
.cream .btn.fill { background: var(--evergreen); border-color: var(--evergreen); color: var(--cream); }
.cream .btn.fill:hover { background: #163526; border-color: #163526; }
.arrow { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }
.textlink { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.textlink:hover { border-bottom-color: currentColor; }
.cream .textlink { border-bottom-color: var(--tan); }

/* Navigation */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(4, 16, 10, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(46, 74, 58, .7); }
.nav .wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.nav .wordmark { line-height: 0; margin-right: auto; }
.nav .wordmark img { height: 30px; width: auto; display: block; }
.nav .links { display: flex; gap: 26px; align-items: center; }
.nav .links a { font-size: 14px; font-weight: 400; color: var(--body); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav .links a:hover, .nav .links a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--cream); }
.nav .btn { padding: 11px 16px; font-size: 14px; white-space: nowrap; }
.nav .menu { display: none; background: transparent; border: 1px solid var(--rule); color: var(--cream); width: 40px; height: 40px; padding: 0; cursor: pointer; align-items: center; justify-content: center; }
.nav .menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
/* The home nav names every section, so it folds into the menu before its links would crowd. */
@media (max-width: 1080px) {
  .nav .wrap { gap: 12px; }
  .nav .menu { display: inline-flex; }
  .nav .links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--evergreen-deep); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 16px; display: none; }
  .nav.open .links { display: flex; }
  .nav .links a { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .nav .links a:hover { border-bottom-color: var(--rule); }
  .nav .wordmark img { height: 26px; }
}

/* Hero: the painted landscape, full-bleed, words over the open sky */
.hero { position: relative; min-height: min(86vh, 860px); display: flex; align-items: flex-end; overflow: hidden; background: var(--wait-paint); }
.hero .paint { position: absolute; inset: 0; }
.hero .paint svg { width: 100%; height: 100%; display: block; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 16, 10, .78) 0%, rgba(4, 16, 10, .42) 42%, rgba(4, 16, 10, 0) 70%), linear-gradient(0deg, rgba(4, 16, 10, .85) 0%, rgba(4, 16, 10, 0) 38%); pointer-events: none; }
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-block: 120px 72px; }
.hero h1 { font-size: clamp(56px, 9vw, 132px); line-height: .95; letter-spacing: -.03em; margin: 18px 0 26px; }
.hero .lede { max-width: 34em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: #e4ebe6; }
.hero .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .fine { margin-top: 18px; font-size: 14px; color: var(--sage); }
@media (max-width: 700px) {
  .hero { min-height: 0; }
  .hero .wrap { padding-block: 260px 48px; }
  .hero::after { background: linear-gradient(0deg, rgba(4, 16, 10, .94) 0%, rgba(4, 16, 10, .78) 48%, rgba(4, 16, 10, .15) 78%, rgba(4, 16, 10, 0) 100%); }
}
.hero.short { min-height: 0; }
.hero.short .wrap { padding-block: 140px 64px; }
.hero.short h1 { font-size: clamp(48px, 7vw, 96px); }

/* Sections */
.band { padding-block: clamp(80px, 11vw, 140px); }
.band.tight { padding-block: clamp(56px, 7vw, 96px); }
.cream { background: var(--cream); color: var(--ink); }
.cream.alt { background: var(--cream-alt); }
.deep { background: var(--evergreen-deep); }
.green { background: var(--evergreen); }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.head h2 { font-size: clamp(38px, 5vw, 68px); line-height: 1.02; margin-top: 16px; }
.head p { font-size: 18px; max-width: 32em; }
@media (max-width: 860px) { .head { grid-template-columns: 1fr; } }

/* The six readings: vignettes of the same painting, each with its words */
.readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.reading { background: var(--evergreen-deep); display: flex; flex-direction: column; }
.reading .vig { aspect-ratio: 16 / 10; overflow: hidden; background: var(--wait-flat); }
.reading .vig svg { width: 100%; height: 100%; display: block; }
.reading .txt { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.reading .what { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.reading h3 { font-size: 30px; line-height: 1.1; }
.reading p { font-size: 15px; color: var(--body); }
@media (max-width: 960px) { .readings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .readings { grid-template-columns: 1fr; } }

/* The ask demo */
.ask { border-top: 1px solid var(--rule); padding-top: 36px; }
.ask form { display: flex; gap: 0; align-items: stretch; border-bottom: 1px solid var(--sage); }
.ask input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--cream); font: 300 clamp(20px, 2.4vw, 30px)/1.3 var(--serif); padding: 14px 0; }
.ask input::placeholder { color: #7f978a; }
.ask input:focus { outline: none; }
.ask form:focus-within { border-bottom-color: var(--cream); }
.ask button[type="submit"] { background: transparent; border: 0; color: var(--cream); font: 400 15px var(--sans); padding: 0 4px 0 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips button { font: 400 14px var(--sans); color: var(--body); background: transparent; border: 1px solid var(--rule); padding: 9px 14px; cursor: pointer; }
.chips button:hover, .chips button[aria-pressed="true"] { color: var(--cream); border-color: var(--sage); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; min-height: 212px; }
.card { background: var(--evergreen); border: 1px solid var(--rule); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; animation: rise .45s ease both; }
.card:nth-child(2) { animation-delay: .06s; } .card:nth-child(3) { animation-delay: .12s; }
.card .area { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.card h3 { font-size: 25px; line-height: 1.15; }
.card p { font-size: 15px; color: var(--body); flex: 1; }
.card .go { font-size: 14px; color: var(--cream); display: inline-flex; gap: 8px; align-items: center; text-decoration: none; border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 6px; }
.card .go:hover { color: var(--lamp); }
@keyframes rise { from { opacity: .001; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }
.ask .note { margin-top: 18px; font-size: 13px; color: var(--sage); }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr; min-height: 0; } }

/* Areas: alternating rows, painting on one side */
.areas { display: flex; flex-direction: column; }
.area-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--tan); }
.area-row:last-child { border-bottom: 1px solid var(--tan); }
.area-row.flip .art { order: 2; }
.area-row .art { aspect-ratio: 16 / 10; overflow: hidden; background: var(--wait-flat); }
.area-row .art svg { width: 100%; height: 100%; display: block; }
.area-row h3 { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.05; margin: 14px 0 18px; }
.area-row p { font-size: 17px; color: #3e392f; max-width: 30em; }
.area-row ul { list-style: none; padding: 0; margin: 22px 0 0; border-top: 1px solid var(--tan); }
.area-row li { padding: 12px 0; border-bottom: 1px solid var(--tan); font-size: 15px; color: var(--ink); display: flex; gap: 14px; }
.area-row li::before { content: ""; width: 6px; height: 6px; margin-top: .6em; flex: none; background: var(--brown); }
@media (max-width: 860px) { .area-row { grid-template-columns: 1fr; } .area-row.flip .art { order: 0; } }

/* Objectives, worked out: generated scene art (public/site/art, see scripts/art) with a real answer */
.ocards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ocard { background: #fff; border: 1px solid var(--tan); display: flex; flex-direction: column; }

.otxt { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.otxt h3 { font-size: 25px; line-height: 1.2; color: var(--ink); }
.otxt p { font-size: 15px; color: #3e392f; border-top: 1px solid var(--tan); padding-top: 12px; }
@media (max-width: 960px) { .ocards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ocards { grid-template-columns: 1fr; } }

/* A fund of one: four tenets */
.fund { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.tenet { padding: 28px 26px 8px 0; }
.tenet + .tenet { padding-left: 26px; border-left: 1px solid var(--rule); }
.tenet .n { font-family: var(--serif); font-size: 15px; color: var(--lamp); letter-spacing: .06em; }
.tenet h3 { font-size: 26px; line-height: 1.15; margin: 14px 0 12px; }
.tenet p { font-size: 15px; color: var(--body); }
@media (max-width: 960px) { .fund { grid-template-columns: 1fr 1fr; } .tenet:nth-child(3) { padding-left: 0; border-left: 0; } .tenet:nth-child(n+3) { border-top: 1px solid var(--rule); } }
@media (max-width: 600px) { .fund { grid-template-columns: 1fr; } .tenet + .tenet { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }
.area-row .art img, .area-row .art svg { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The one picture: crops of the valley, and the valley with each tool named on it */
.ocrop { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #2a4a3a; }
.anno { position: relative; aspect-ratio: 2752 / 1536; overflow: hidden; background: #2a4a3a; }
.ffv-mark { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; background: rgba(7, 28, 20, .82); color: var(--cream); border: 1px solid rgba(250, 248, 245, .45); padding: 6px 12px 6px 6px; font: 400 14px var(--sans); cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s; }
.ffv-mark .n { width: 22px; height: 22px; display: grid; place-items: center; background: var(--cream); color: var(--evergreen); font-size: 12px; }
.ffv-mark:hover, .ffv-mark.on { background: var(--cream); color: var(--evergreen); border-color: var(--cream); }
.ffv-mark.on .n, .ffv-mark:hover .n { background: var(--evergreen); color: var(--cream); }
.tools6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--tan); margin-top: 28px; }
.tool { padding: 22px 24px 24px 0; border-bottom: 1px solid var(--tan); cursor: default; outline: none; }
.tool:nth-child(3n+2), .tool:nth-child(3n) { padding-left: 24px; border-left: 1px solid var(--tan); }
.tool h3 { font-size: 28px; margin: 8px 0 8px; color: var(--ink); }
.tool p { font-size: 15px; color: #3e392f; }
.tool.on h3 { text-decoration: underline; text-decoration-color: var(--tan); text-underline-offset: 6px; }
@media (max-width: 960px) { .tools6 { grid-template-columns: 1fr 1fr; } .tool:nth-child(3n+2), .tool:nth-child(3n) { padding-left: 0; border-left: 0; } .tool:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--tan); } }
@media (max-width: 600px) { .tools6 { grid-template-columns: 1fr; } .tool:nth-child(2n) { padding-left: 0; border-left: 0; } .ffv-mark .t { display: none; } .ffv-mark { padding: 4px; } }

/* Product lines */
.lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.line { background: var(--evergreen); padding: 32px 28px 30px; display: flex; flex-direction: column; gap: 14px; }
.line h3 { font-size: 32px; line-height: 1.1; }
.line p { font-size: 15px; color: var(--body); }
.line .status { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lamp); }
.line .status.soon { color: var(--sage); }
.line .foot { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 960px) { .lines { grid-template-columns: 1fr; } }

/* Prediction-market rungs */
.rungs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--tan); }
.rung { padding: 28px 24px 28px 0; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--tan); }
.rung + .rung { padding-left: 24px; border-left: 1px solid var(--tan); }
.rung .price { font-family: var(--serif); font-size: 44px; line-height: 1; letter-spacing: -.02em; color: var(--evergreen); }
.rung .price small { font: 300 15px var(--sans); color: #5b5346; letter-spacing: 0; }
.rung h3 { font-size: 26px; }
.rung p { font-size: 15px; color: #3e392f; flex: 1; }
.rung .btn { align-self: flex-start; margin-top: 8px; }
@media (max-width: 960px) { .rungs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rung:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .rungs { grid-template-columns: 1fr; } .rung + .rung { padding-left: 0; border-left: 0; } }

/* Promises: three hairline columns */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.promise { padding: 30px 28px 10px 0; }
.promise + .promise { padding-left: 28px; border-left: 1px solid var(--rule); }
.promise h3 { font-size: 26px; line-height: 1.15; margin-bottom: 12px; }
.promise p { font-size: 15px; color: var(--body); }
@media (max-width: 860px) { .promises { grid-template-columns: 1fr; } .promise + .promise { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }

/* Closing band */
.close { position: relative; overflow: hidden; text-align: center; }
.close .paint { position: absolute; inset: 0; opacity: .55; }
.close .paint svg { width: 100%; height: 100%; display: block; }
.close::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(4, 16, 10, .35) 0%, rgba(4, 16, 10, .88) 75%); }
.close .wrap { position: relative; z-index: 2; }
.close h2 { font-size: clamp(44px, 6.4vw, 92px); line-height: 1; margin: 18px auto 30px; max-width: 12em; }
.close .acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Long-form (How it works) */
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; padding-block: clamp(44px, 6vw, 72px); border-top: 1px solid var(--tan); }
.step:last-child { border-bottom: 1px solid var(--tan); }
.step .n { font-family: var(--serif); font-size: 64px; line-height: .9; color: var(--brown); }
.step h2 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.06; margin-bottom: 18px; }
.step p { font-size: 17px; color: #3e392f; }
.step p + p { margin-top: 14px; }
.step aside { background: var(--raised); padding: 24px 26px; align-self: start; }
.step aside .kicker { display: block; margin-bottom: 12px; }
@media (max-width: 960px) { .step { grid-template-columns: 1fr; } .step .n { font-size: 48px; } }
.sum { width: 100%; border-collapse: collapse; font-size: 15px; }
.sum td { padding: 9px 0; border-bottom: 1px solid var(--tan); }
.sum td.r { text-align: right; font-variant-numeric: tabular-nums; }
.sum tr.total td { border-bottom: 0; border-top: 1px solid var(--ink); font-family: var(--serif); font-size: 22px; padding-top: 12px; }
.words { font-family: var(--serif); font-size: 26px; line-height: 1.25; color: var(--evergreen); }
.words small { display: block; font: 300 15px/1.5 var(--sans); color: #3e392f; margin-top: 8px; }
.demo-card { background: var(--evergreen); color: var(--cream); padding: 18px 20px; border: 1px solid var(--rule); }
.demo-card + .demo-card { margin-top: 10px; }
.demo-card .area { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.demo-card h3 { font-size: 21px; margin: 6px 0 4px; }
.demo-card p { font-size: 14px; color: var(--body); }
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 40px 24px 0; font-family: var(--serif); font-size: 24px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 1px solid var(--sage); border-bottom: 1px solid var(--sage); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 0 26px; max-width: 44em; color: var(--body); }

/* Footer */
.foot-site { background: var(--evergreen-deep); border-top: 1px solid var(--rule); padding-block: 56px 40px; font-size: 14px; color: var(--sage); }
.foot-site .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 36px; }
.foot-site img { height: 26px; width: auto; display: block; margin-bottom: 16px; }
.foot-site h4 { font: 400 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--body); margin-bottom: 14px; }
.foot-site ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-site a { text-decoration: none; color: var(--sage); }
.foot-site a:hover { color: var(--cream); }
.foot-site .legal { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 24px; margin-top: 12px; font-size: 13px; }
@media (max-width: 760px) { .foot-site .wrap { grid-template-columns: 1fr 1fr; } .foot-site .brand { grid-column: 1 / -1; } }


/* ================= flex.one/elite pattern (Samuel, 2026-09-26) =================
   Full-bleed sections of the one picture, a short centred serif line and one action; quiet white
   panels between them. No example figures anywhere on the marketing pages. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main > section[id] { scroll-margin-top: 68px; }   /* the nav links land each section clear of the fixed nav */
.nav.over { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .3s, border-color .3s; }
.nav.over.solid { background: rgba(4, 16, 10, .86); border-bottom-color: rgba(46, 74, 58, .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn.line { border-color: transparent; border-bottom: 1px solid var(--cream); padding: 8px 2px; }
.btn.line:hover { border-bottom-color: var(--lamp); }
.btn.dark { background: var(--evergreen); border-color: var(--evergreen); color: var(--cream); }
.btn.dark:hover { background: #163526; border-color: #163526; }

.fx-bg { position: absolute; inset: 0; background: #2a4a3a; }
.fx-bg::after { content: ""; position: absolute; inset: 0; background: rgba(4, 16, 10, .28); pointer-events: none; z-index: 1; }
.fx-bg.dim::after { background: rgba(4, 16, 10, .58); }
.fx-sec { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--cream); text-align: center; }
.fx-in { position: relative; z-index: 2; max-width: 760px; padding: 120px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.fx-in h1 { font-size: clamp(54px, 7.4vw, 104px); line-height: 1; letter-spacing: -.025em; text-shadow: 0 2px 28px rgba(4, 16, 10, .35); }
.fx-in h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; text-shadow: 0 2px 22px rgba(4, 16, 10, .35); }
.fx-in p { font-size: 17px; max-width: 34em; color: #eef2ee; text-shadow: 0 1px 14px rgba(4, 16, 10, .45); }
.fx-in .kicker { color: #eef2ee; font-size: 14px; letter-spacing: .2em; }
.fx-in .btn { margin-top: 10px; }
.fx-hero .fx-bg::after { background: linear-gradient(180deg, rgba(4, 16, 10, .45) 0%, rgba(4, 16, 10, .12) 30%, rgba(4, 16, 10, .12) 60%, rgba(4, 16, 10, .5) 100%); }

.fx-float { position: relative; padding: 18vh var(--gutter); display: flex; justify-content: center; overflow: hidden; }
.fx-card { position: relative; z-index: 2; width: min(1000px, 100%); background: #fff; color: var(--ink); padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px) clamp(32px, 4vw, 48px); text-align: center; }
.fx-card h2 { font-family: var(--sans); font-weight: 300; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.02em; }
.fx-card .sub { color: #5b5346; max-width: 36em; margin: 12px auto 36px; font-size: 16px; }
.fx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #e2d8c6; text-align: left; }
.fx-stats > div { padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.fx-stats > div + div { border-left: 1px solid #e2d8c6; }
.fx-stats .lb { font-size: 12px; color: var(--brown); }
.fx-stats .fg { font-family: var(--sans); font-weight: 300; font-size: 40px; letter-spacing: -.03em; line-height: 1.1; }
.fx-stats .cp { font-size: 14px; color: #5b5346; }

.fx-roll { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 18px; color: #f3efe6;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.fx-roll li { opacity: .92; text-shadow: 0 1px 12px rgba(4, 16, 10, .5); }

.rings { display: flex; margin-bottom: 18px; }
.rings span { width: clamp(120px, 14vw, 180px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(250, 248, 245, .7); display: grid; place-items: center; font-size: 17px; margin-left: -22px; }
.rings span:first-child { margin-left: 0; }

.fx-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 28px; text-align: center; }
.fx-three .fx-in { max-width: 1040px; }
.fx-cols .fg { display: block; font-family: var(--serif); font-size: 30px; margin-bottom: 10px; }
.fx-cols p { font-size: 15px; }

.fx-split { background: #fff; color: var(--ink); padding-block: clamp(80px, 11vw, 140px); }
.fx-split-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.fx-copy h2, .fx-copy h3 { font-family: var(--sans); font-weight: 300; letter-spacing: -.02em; }
.fx-copy h2 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; margin-bottom: 16px; }
.fx-copy h3 { font-size: clamp(28px, 2.6vw, 36px); margin-bottom: 10px; }
.fx-copy p { font-size: 16px; color: #5b5346; max-width: 30em; }
.fx-tools { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid #e2d8c6; }
.fx-tools li { padding: 12px 0; border-bottom: 1px solid #e2d8c6; font-size: 15px; color: #5b5346; cursor: default; outline: none; display: flex; gap: 14px; }
.fx-tools li b { font-weight: 400; color: var(--ink); min-width: 92px; }
.fx-tools li.on b { text-decoration: underline; text-decoration-color: var(--tan); text-underline-offset: 5px; }
.fx-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #2a4a3a; }
.fx-art.anno { aspect-ratio: 2752 / 1536; }

.fx-features { background: #fff; color: var(--ink); padding-bottom: clamp(60px, 8vw, 110px); }
.fx-feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: center; max-width: 1080px; margin: 0 auto clamp(48px, 7vw, 96px); }
.fx-feat.flip .fx-art { order: 2; }
.fx-feat .fx-art { aspect-ratio: 1; }
.fx-feat .textlink { display: inline-block; margin-top: 14px; color: var(--ink); border-bottom-color: var(--tan); }

.fx-close { background: #fff; color: var(--ink); text-align: center; padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(70px, 9vw, 120px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fx-close h2 { font-size: clamp(36px, 4vw, 54px); }
.fx-close p { color: #5b5346; }
.fx-faq { background: #fff; color: var(--ink); padding: 0 var(--gutter) clamp(80px, 10vw, 130px); }
.fx-faq h2 { font-family: var(--sans); font-weight: 300; text-align: center; font-size: clamp(28px, 3vw, 38px); margin-bottom: 28px; }
.fx-faq .faq { max-width: 720px; margin: 0 auto; border-top-color: #e2d8c6; }
.fx-faq .faq details { border-bottom-color: #e2d8c6; }
.fx-faq .faq summary { font-family: var(--sans); font-size: 16px; font-weight: 400; padding: 20px 40px 20px 0; }
.fx-faq .faq summary::after { border-color: var(--brown); }
.fx-faq .faq details p { color: #5b5346; }

.fx-foot { background: var(--evergreen); color: var(--sage); padding-block: 72px 40px; font-size: 14px; }
.fx-foot .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.fx-foot img { height: 26px; width: auto; display: block; margin-bottom: 12px; }
.fx-foot .brand p { color: var(--cream); }
.fx-foot h4 { font: 400 15px var(--sans); color: var(--cream); margin-bottom: 14px; }
.fx-foot h4::before { content: "\2726  "; font-size: 11px; }
.fx-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fx-foot a { color: var(--sage); text-decoration: none; }
.fx-foot a:hover { color: var(--cream); }
.fx-foot .soon { color: #6f8a7c; white-space: nowrap; }
.fx-foot .legal { grid-column: 2 / -1; border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 18px; font-size: 12px; }

@media (max-width: 860px) {
  .fx-stats, .fx-cols { grid-template-columns: 1fr; }
  .fx-stats > div + div { border-left: 0; border-top: 1px solid #e2d8c6; }
  .fx-split-row, .fx-feat { grid-template-columns: 1fr; }
  .fx-feat.flip .fx-art { order: 0; }
  .rings span { width: 92px; font-size: 13px; margin-left: -14px; }
  .fx-foot .wrap { grid-template-columns: 1fr 1fr; }
  .fx-foot .brand, .fx-foot .legal { grid-column: 1 / -1; }
  .nav.over .links { background: var(--evergreen-deep); }
}

/* How it works: alternating steps, each a crop of the one picture */
.fx-hero.short { min-height: 70vh; }
.fx-steps { background: #fff; color: var(--ink); padding-block: clamp(70px, 9vw, 120px) 20px; }
.fx-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: center; max-width: 1080px; margin: 0 auto clamp(48px, 7vw, 96px); }
.fx-step.flip .fx-art { order: 2; }
.fx-step .kicker { color: var(--brown); display: block; margin-bottom: 10px; }
@media (max-width: 860px) { .fx-step { grid-template-columns: 1fr; } .fx-step.flip .fx-art { order: 0; } }
.nav .btn.line { white-space: nowrap; padding: 8px 2px; gap: 6px; }
/* Previous layout with the clear nav over the hero: the hero needs room under the fixed nav */
.hero .wrap { padding-top: 150px; }
.step aside .stepart { position: relative; aspect-ratio: 2752 / 1536; overflow: hidden; background: var(--wait-flat); }
.step aside .stepart .ffv-mark { padding: 3px 8px 3px 3px; font-size: 11px; gap: 5px; }
.step aside .stepart .ffv-mark .n { width: 16px; height: 16px; font-size: 10px; }
.nav.over .btn.fill { padding: 11px 16px; }
.nav.over:not(.solid) .links a { color: #fff; text-shadow: 0 1px 10px rgba(4, 16, 10, .75); }

/* Lifestyle, beyond budgeting: words, not pictures (the valley is the financial picture) */
.lcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--tan); }
.lcard { padding: 30px 28px 34px 0; border-bottom: 1px solid var(--tan); display: flex; flex-direction: column; gap: 10px; }
.lcard:nth-child(3n+2), .lcard:nth-child(3n) { padding-left: 28px; border-left: 1px solid var(--tan); }
.lcard h3 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.12; color: var(--ink); }
.lcard p { font-size: 15px; color: #3e392f; max-width: 26em; }
.lcard.soon .kicker { color: #8a7a5c; }
@media (max-width: 900px) { .lcards { grid-template-columns: 1fr 1fr; } .lcard:nth-child(3n+2), .lcard:nth-child(3n) { padding-left: 0; border-left: 0; } .lcard:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--tan); } }
@media (max-width: 600px) { .lcards { grid-template-columns: 1fr; } .lcard:nth-child(2n) { padding-left: 0; border-left: 0; } }

/* Your financial picture: the valley, large, no labels */
.showcase { position: relative; aspect-ratio: 2752 / 1536; overflow: hidden; background: var(--wait-paint); }
/* The lifestyle slider above it: stretched to thriving, the picture follows (site.js bindLife) */
.lifeslide { display: grid; gap: 10px; max-width: 720px; margin: 28px auto 0; }
.lifeslide label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #5b5346; text-align: center; }
.lifeslide input { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; --at: 85%; }
.lifeslide input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--evergreen) var(--at), var(--tan) var(--at)); }
.lifeslide input::-moz-range-track { height: 2px; background: var(--tan); }
.lifeslide input::-moz-range-progress { height: 2px; background: var(--evergreen); }
.lifeslide input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; background: var(--evergreen); border: 3px solid var(--cream); box-shadow: 0 0 0 1px var(--evergreen); }
.lifeslide input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 0; background: var(--evergreen); border: 3px solid var(--cream); box-shadow: 0 0 0 1px var(--evergreen); }
.lifeslide input:focus-visible { outline: none; }
.lifeslide input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--evergreen), 0 0 0 4px var(--cream), 0 0 0 6px var(--evergreen); }
.lifeslide input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--evergreen), 0 0 0 4px var(--cream), 0 0 0 6px var(--evergreen); }
.lifeslide .ends { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink); }

/* The FinFuse card (coming): the one picture on its face, the wordmark, nothing invented */
.cardrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ffcard { position: relative; width: min(460px, 100%); aspect-ratio: 85.6 / 53.98; border-radius: 16px; overflow: hidden; background: var(--wait-flat);
  box-shadow: 0 30px 60px -20px rgba(7, 28, 20, .45), 0 10px 20px -10px rgba(7, 28, 20, .3); justify-self: center; transform: rotate(-4deg); }
.ffcard-face { position: absolute; inset: 0; }
.ffcard-face::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(160deg, rgba(4, 16, 10, .15) 0%, rgba(4, 16, 10, .05) 45%, rgba(4, 16, 10, .55) 100%); }
.ffcard-mark { position: absolute; z-index: 4; left: 7%; top: 10%; height: 13%; width: auto; }
.ffcard-chip { position: absolute; z-index: 4; left: 7%; top: 42%; width: 13%; aspect-ratio: 1.3; border-radius: 4px; background: linear-gradient(135deg, #e9dcb4, #b9a577 55%, #e3d3a3); opacity: .92; }
.cardlist { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--tan); }
.citem { padding: 22px 0; border-bottom: 1px solid var(--tan); }
.citem h3 { font-size: clamp(26px, 2.4vw, 32px); margin: 8px 0; color: var(--ink); }
.citem p { font-size: 15px; color: #3e392f; max-width: 30em; }
.cardlist .fine { font-size: 13px; color: var(--brown); margin-top: 16px; }
@media (max-width: 860px) { .cardrow { grid-template-columns: 1fr; } .ffcard { transform: none; } }

/* The same painting as the app, not a darkened copy of it (Samuel, 2026-09-26: "the app has a
   different image than the homepage"). A light shade only where the words sit; the words carry a
   soft shadow instead of the whole picture going dark. */
.hero::after { background: linear-gradient(90deg, rgba(4, 16, 10, .5) 0%, rgba(4, 16, 10, .22) 36%, rgba(4, 16, 10, 0) 58%), linear-gradient(0deg, rgba(4, 16, 10, .32) 0%, rgba(4, 16, 10, 0) 26%); }
.hero h1, .hero .lede, .hero .kicker, .hero .fine { text-shadow: 0 1px 18px rgba(4, 16, 10, .55), 0 0 2px rgba(4, 16, 10, .35); }
.close .paint { opacity: 1; }
.close::after { background: radial-gradient(ellipse at center, rgba(4, 16, 10, .42) 0%, rgba(4, 16, 10, .2) 55%, rgba(4, 16, 10, .35) 100%); }
.close h2, .close .kicker { text-shadow: 0 1px 22px rgba(4, 16, 10, .6); }
@media (max-width: 700px) {
  .hero::after { background: linear-gradient(0deg, rgba(4, 16, 10, .78) 0%, rgba(4, 16, 10, .5) 45%, rgba(4, 16, 10, .08) 72%, rgba(4, 16, 10, 0) 100%); }
}
.hero .fine { color: #f3efe6; font-size: 15px; }

/* Words in the sky (Samuel, 2026-09-26: the homepage picture carries the app's lanterns). The trail and
   its lanterns run through the middle of the painting, so the words sit in the open pale sky above
   them, in evergreen ink, and the painting is shown without a dark shade at all. */
.nav .wordmark .wm-dark { display: none; }   /* must outrank .nav .wordmark img, or both marks show once the nav turns solid */
.sky-hero .nav.over:not(.solid) .wm-light { display: none; }
.sky-hero .nav.over:not(.solid) .wm-dark { display: block; height: 34px; width: auto; }
.sky-hero .nav.over:not(.solid) .links a { color: var(--evergreen); text-shadow: none; }
.sky-hero .nav.over:not(.solid) .links a:hover { border-bottom-color: var(--evergreen); }
.sky-hero .nav.over:not(.solid) .btn.fill { background: var(--evergreen); border-color: var(--evergreen); color: var(--cream); }
.sky-hero .nav.over:not(.solid) .menu { color: var(--evergreen); border-color: rgba(7, 28, 20, .35); }

.sky.hero { align-items: flex-start; }
.sky.hero::after { background: linear-gradient(180deg, rgba(250, 248, 245, .38) 0%, rgba(250, 248, 245, .14) 30%, rgba(250, 248, 245, 0) 48%); }
.sky.hero .wrap { padding-block: 104px 0; }
.sky.hero h1 { color: var(--evergreen); font-size: clamp(52px, 6.6vw, 96px); margin: 12px 0 16px; text-shadow: 0 0 30px rgba(250, 248, 245, .55); }
/* A hero with no kicker (the home page) keeps the headline where the kicker line used to put it. */
.sky.hero .wrap > h1:first-child { margin-top: 39px; }
.sky.hero .kicker { color: #4d5d4f; text-shadow: none; }
.sky.hero .lede { color: #1f2a22; max-width: 32em; text-shadow: 0 0 18px rgba(250, 248, 245, .7); }
.sky.hero .fine { color: #3d4a40; text-shadow: none; }
.sky.hero .acts { margin-top: 24px; }
.sky.hero .btn.fill, .sky.close .btn.fill { background: var(--evergreen); border-color: var(--evergreen); color: var(--cream); }
.sky.hero .btn.fill:hover, .sky.close .btn.fill:hover { background: #163526; border-color: #163526; }
.sky.hero .btn:not(.fill), .sky.close .btn:not(.fill) { color: var(--evergreen); border-color: rgba(7, 28, 20, .4); background: rgba(250, 248, 245, .35); }
.sky.hero .btn:not(.fill):hover, .sky.close .btn:not(.fill):hover { border-color: var(--evergreen); }
.sky.hero.short { min-height: min(72vh, 700px); }

.sky.close { display: flex; align-items: flex-start; }
.sky.close::after { background: linear-gradient(180deg, rgba(250, 248, 245, .4) 0%, rgba(250, 248, 245, .12) 35%, rgba(250, 248, 245, 0) 55%); }
.sky.close .wrap { padding-top: 0; }
.sky.close h2 { color: var(--evergreen); margin-top: 8px; text-shadow: 0 0 30px rgba(250, 248, 245, .55); }
.sky.close .kicker { color: #4d5d4f; text-shadow: none; }
.sky.close { min-height: min(80vh, 760px); padding-top: clamp(56px, 8vw, 96px); }

@media (max-width: 700px) {
  .sky.hero::after { background: linear-gradient(180deg, rgba(250, 248, 245, .55) 0%, rgba(250, 248, 245, .3) 45%, rgba(250, 248, 245, 0) 70%); }
  .sky.hero .wrap { padding-block: 92px 180px; }
}
.sky.hero .fine { color: #22301f; font-weight: 400; text-shadow: 0 0 14px rgba(250, 248, 245, .8); }
/* Keep the lanterns clear of the words: How it works' hero matches the home hero's height with a
   smaller headline, and on phones the hero leaves room below the words for the trail. */
.sky.hero.short { min-height: min(86vh, 860px); }
.sky.hero.short h1 { font-size: clamp(40px, 4.8vw, 68px); }
@media (max-width: 700px) {
  .sky.hero .wrap { padding-block: 92px 400px; }
  .sky.hero.short .wrap { padding-block: 92px 360px; }
}

/* Scene picker on the home page */
.scene-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.scene-pick button { display: flex; flex-direction: column; gap: 8px; padding: 0; background: none; border: 0; cursor: pointer; font: 400 14px var(--sans); color: var(--ink); text-align: left; }
.scene-pick img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; outline: 1px solid var(--tan); border: 2px solid transparent; transition: border-color .2s; }
.scene-pick button:hover img { border-color: var(--tan); }
.scene-pick button[aria-checked="true"] img { border-color: var(--evergreen); outline-color: var(--evergreen); }
.scene-pick button[aria-checked="true"] span { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--tan); }
.scene-pick button:focus-visible { outline: none; }
.scene-pick button:focus-visible img { outline: 2px solid var(--evergreen); outline-offset: 2px; }
@media (max-width: 700px) { .scene-pick { grid-template-columns: repeat(5, minmax(96px, 1fr)); overflow-x: auto; scrollbar-width: none; } .scene-pick span { font-size: 12px; } }

/* The words in the sky follow the scene: Space has a night sky, so light ink over a soft dark veil;
   Center's towers rise behind the words, so the pale veil is a little stronger. */
body[data-scene="center"] .sky.hero::after, body[data-scene="center"] .sky.close::after { background: linear-gradient(180deg, rgba(250, 248, 245, .62) 0%, rgba(250, 248, 245, .4) 34%, rgba(250, 248, 245, 0) 56%); }
body[data-scene="space"] .sky.hero::after, body[data-scene="space"] .sky.close::after { background: linear-gradient(180deg, rgba(8, 10, 30, .55) 0%, rgba(8, 10, 30, .3) 40%, rgba(8, 10, 30, 0) 62%); }
body[data-scene="space"] .sky.hero h1, body[data-scene="space"] .sky.close h2 { color: #f6f3ff; text-shadow: 0 2px 26px rgba(8, 10, 30, .6); }
body[data-scene="space"] .sky.hero .lede { color: #ece8f7; text-shadow: 0 1px 16px rgba(8, 10, 30, .75); }
body[data-scene="space"] .sky.hero .kicker, body[data-scene="space"] .sky.close .kicker, body[data-scene="space"] .sky.hero .fine { color: #d9d3ee; text-shadow: none; }
body[data-scene="space"] .sky.hero .btn.fill, body[data-scene="space"] .sky.close .btn.fill { background: var(--cream); border-color: var(--cream); color: #14122a; }
body[data-scene="space"] .sky.hero .btn:not(.fill), body[data-scene="space"] .sky.close .btn:not(.fill) { color: #f6f3ff; border-color: rgba(246, 243, 255, .55); background: rgba(8, 10, 30, .25); }
body[data-scene="space"].sky-hero .nav.over:not(.solid) .wm-light { display: block; }
body[data-scene="space"].sky-hero .nav.over:not(.solid) .wm-dark { display: none; }
body[data-scene="space"].sky-hero .nav.over:not(.solid) .links a { color: #f6f3ff; }
body[data-scene="space"].sky-hero .nav.over:not(.solid) .btn.fill { background: var(--cream); border-color: var(--cream); color: #14122a; }
body[data-scene="space"].sky-hero .nav.over:not(.solid) .menu { color: #f6f3ff; border-color: rgba(246, 243, 255, .45); }

/* FinFuse Card: the official wordmark with "Card" beside it, and an EMV chip drawn as SVG */
.ffcard-name { position: absolute; z-index: 4; left: 7%; top: 9%; display: flex; align-items: baseline; gap: 2.2%; width: 70%; }
.ffcard-name .ffcard-mark { position: static; height: auto; width: 34%; }
.ffcard-name span { font-family: var(--serif); font-weight: 300; color: #fff; font-size: clamp(16px, 2.6vw, 26px); letter-spacing: .01em; line-height: 1; text-shadow: 0 1px 8px rgba(4, 16, 10, .35); }
.ffcard .ffcard-chip { position: absolute; z-index: 4; left: 7%; top: 40%; width: 14%; height: auto; aspect-ratio: 50 / 38; border-radius: 0; background: none; opacity: 1; filter: drop-shadow(0 1px 1px rgba(4, 16, 10, .35)); }
/* The face carries only the wordmark; "FinFuse Card" is the heading (Samuel, 2026-09-26) */
.ffcard-name .ffcard-mark { width: 36%; }

/* Markets on the home page: five kinds, then the two things that come with them */
.mkts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 20px; }
.mkt { background: var(--evergreen); padding: 26px 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.mkt h3 { font-size: 30px; line-height: 1.1; }
.mkt p { font-size: 14px; color: var(--body); flex: 1; }
.mkt .status { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--lamp); }
.mkt .status.soon { color: var(--sage); }
.mkt .btn { align-self: flex-start; padding: 9px 14px; font-size: 13px; }
.lines.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .mkts { grid-template-columns: 1fr 1fr; } .lines.two { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .mkts { grid-template-columns: 1fr; } }

/* Policy documents (Security, Privacy, Terms, Refunds): a plain, readable document page */
.legal-page { background: #fbfaf7; }
.legal-page .nav { position: sticky; }
.doc { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--gutter) clamp(72px, 9vw, 120px); color: var(--ink); }
.doc .kicker { color: var(--brown); }
.doc-head { border-bottom: 1px solid #e2d8c6; padding-bottom: 28px; margin-bottom: 28px; }
.doc-head h1 { font-size: clamp(40px, 5vw, 58px); line-height: 1.05; margin: 10px 0 12px; color: var(--ink); }
.doc-date { font-size: 14px; color: #6b6253; }
.doc-summary { margin-top: 18px; font-size: 17px; line-height: 1.65; color: #2f2b24; }
.doc-toc { background: #f3efe7; border: 1px solid #e6dccb; padding: 20px 24px; margin-bottom: 40px; }
.doc-toc ol { margin: 10px 0 0; padding-left: 22px; columns: 2; column-gap: 32px; font-size: 15px; line-height: 1.9; }
.doc-toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid #d8ccb6; }
.doc-toc a:hover { border-bottom-color: var(--ink); }
.doc-sec { padding-top: 8px; margin-bottom: 30px; scroll-margin-top: 90px; }
.doc-sec h2 { font-family: var(--sans); font-weight: 500; font-size: 19px; letter-spacing: -.005em; margin-bottom: 10px; color: var(--ink); }
.doc-sec h2 .num { color: var(--brown); font-weight: 400; margin-right: 4px; }
.doc-sec p, .doc-sec li { font-size: 16px; line-height: 1.7; color: #2f2b24; }
.doc-sec p + p, .doc-sec ul + p, .doc-sec p + ul { margin-top: 12px; }
.doc-sec ul { margin: 8px 0 0; padding-left: 22px; }
.doc-sec li + li { margin-top: 6px; }
.doc-sec a { color: var(--evergreen); }
.doc .tbd { background: #fbe9b7; padding: 0 4px; border-bottom: 1px dashed #b98b1d; }
@media (max-width: 640px) { .doc-toc ol { columns: 1; } }

/* Contact */
.doc-wide { max-width: 1040px; }
.doc-wide .doc-head { max-width: 760px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form label { display: grid; gap: 6px; font-size: 14px; color: #5b5346; }
.contact-form input, .contact-form select, .contact-form textarea { font: 300 16px var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--tan); border-radius: 0; padding: 11px 12px; width: 100%; }
.contact-form textarea { resize: vertical; min-height: 160px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--evergreen); outline-offset: 0; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .err { color: #8a2c1b; font-size: 14px; margin: 0; }
.contact-form .btn { align-self: flex-start; }
.contact-form .sent h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin-bottom: 8px; }
.contact-form .sent p { color: #2f2b24; }
.contact-side { display: flex; flex-direction: column; border-top: 1px solid #e2d8c6; }
.contact-side > div { padding: 18px 0; border-bottom: 1px solid #e2d8c6; }
.contact-side p { font-size: 15px; line-height: 1.6; color: #2f2b24; margin-top: 6px; }
.contact-side a { color: var(--evergreen); }
.contact-side .textlink { display: inline-block; margin-top: 8px; border-bottom-color: var(--tan); }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

/* Space waits on its own night tones, not the valley's daylight. */
body[data-scene="space"] { --wait-paint: linear-gradient(180deg, #303b5f 0%, #6b8190 30%, #756e90 55%, #687683 80%, #6a7380 100%); --wait-flat: #5c6680; }

/* The folded menu is a dark panel of its own: its links keep the panel's light ink, not the
   see-through nav's ink for the pale sky (which left them dark on dark over the home hero). */
@media (max-width: 1080px) {
  .nav.over:not(.solid) .links a, .sky-hero .nav.over:not(.solid) .links a, body[data-scene="space"].sky-hero .nav.over:not(.solid) .links a { color: var(--body); text-shadow: none; }
  .sky-hero .nav.over:not(.solid) .links a:hover { color: var(--cream); border-bottom-color: var(--rule); }
}

/* The tool and market pages (scripts/tools.py) */
.lines.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lines.n4 .line h3 { font-size: 28px; }
@media (max-width: 1180px) { .lines.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .lines.n4 { grid-template-columns: 1fr; } }
.hero-pill { display: inline-block; margin-left: 12px; padding: 4px 10px; vertical-align: 1px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5a4a14; background: #f3e3b0; border: 1px solid #d9bf6a; }
.hero-pill.soon { color: #3d4a40; background: rgba(250, 248, 245, .85); border-color: var(--tan); }
.step aside .stepnote { font-size: 15px; color: #3e392f; margin-bottom: 14px; }
.step aside .textlink { color: var(--ink); border-bottom-color: var(--tan); }

/* The app, rendered (scripts/app-shots.py): the screen rises out of the hero, each feature carries
   the number of the step that describes it, and each step shows that feature up close. */
.sky.hero.short.has-app .wrap { padding-bottom: clamp(220px, 24vw, 340px); }
.appshow { padding-top: 0; padding-bottom: 8px; }
.appshot { position: relative; z-index: 3; margin: calc(-1 * clamp(170px, 19vw, 280px)) 0 0; }
.appframe { position: relative; width: 100%; max-width: 100%; background: var(--evergreen); box-shadow: 0 50px 90px -40px rgba(4, 16, 10, .6), 0 0 0 1px rgba(4, 16, 10, .3); }
.appframe img { display: block; width: 100%; height: 100%; }
.appring { position: absolute; display: block; outline: 2px solid transparent; outline-offset: 4px; transition: outline-color .2s ease; }
.appring:hover, .appring:focus-visible { outline-color: var(--brown); }
.appmark { position: absolute; left: -15px; top: -15px; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brown); color: var(--cream); font: 400 18px/1 var(--serif); box-shadow: 0 0 0 3px var(--cream), 0 6px 14px rgba(4, 16, 10, .25); }
.appshot figcaption { margin-top: 16px; font-size: 13px; color: #5b5346; text-align: center; }
.step.has-crop { grid-template-columns: 100px minmax(0, .85fr) minmax(0, 1.25fr); gap: 24px 48px; }
.step.has-crop aside { background: none; padding: 0; }
@media (max-width: 960px) { .step.has-crop { grid-template-columns: 1fr; } }
.appcrop { position: relative; margin: 0; }
.appcrop img { display: block; width: 100%; height: auto; border: 1px solid var(--tan); }
.appcrop .appmark { left: -12px; top: -12px; width: 28px; height: 28px; font-size: 15px; }
@media (max-width: 700px) {
  .sky.hero.short.has-app .wrap { padding-bottom: 150px; }
  .appshot { margin-top: -110px; }
  .appmark { left: -9px; top: -9px; width: 22px; height: 22px; font-size: 12px; box-shadow: 0 0 0 2px var(--cream); }
}