/* The Community Fund page (/community-fund). The page lives in the site's layout and Tailwind build
   (config/tailwind.config.js holds the design's palette as the fund-* colours); this file holds what
   Tailwind does not express: the design's display face and calculator slider, the intro-call dialog
   (not in the design), and a few deliberate departures from the design for readability and touch.
   Everything is scoped to the page and the dialog. */
.cf-page, .cf-dialog { --ink: #4700d8; --ink-soft: #555d75; --cream: #FBF6E9; --card: #fff; --foreground: #1b1f39; --accent: #41d2b3; }

/* --- the design's own component rules --- */
.cf-page .serif-display, .cf-dialog .serif-display { font-family: "Instrument Serif", Georgia, serif; letter-spacing: -.02em; font-weight: 400; line-height: .98; }
.cf-page .serif-display em, .cf-dialog .serif-display em { color: var(--ink); font-style: italic; }
.cf-page .bg-fund-ink .serif-display em, .cf-page .text-cream .serif-display em { color: #52dfbf; }
.cf-page .fund-slider { appearance: none; background: none; border-radius: 9999px; outline: none; width: 100%; height: 10px; }
.cf-page .fund-slider::-webkit-slider-thumb { appearance: none; background: var(--ink); border: 4px solid var(--card); width: 30px; height: 30px; border-radius: 9999px;
  box-shadow: 0 6px 18px -4px color-mix(in oklab, var(--ink) 55%, transparent); cursor: pointer; transition: transform .15s; }
.cf-page .fund-slider::-webkit-slider-thumb:hover { transform: scale(1.08); }
.cf-page .fund-slider::-moz-range-thumb { background: var(--ink); border: 4px solid var(--card); cursor: pointer; border-radius: 9999px; width: 22px; height: 22px; }
/* The torn edges between the cream and white bands (SVG masks). */
.cf-page .tear-top { -webkit-mask-image:url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,20 C100,5 200,35 300,20 C400,5 500,35 600,20 C700,5 800,35 900,20 C1000,5 1100,35 1200,20 V60 H0 Z' fill='black'/></svg>"); mask-image:url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,20 C100,5 200,35 300,20 C400,5 500,35 600,20 C700,5 800,35 900,20 C1000,5 1100,35 1200,20 V60 H0 Z' fill='black'/></svg>"); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat }
.cf-page .tear-bottom { -webkit-mask-image:url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,0 H1200 V40 C1100,55 1000,25 900,40 C800,55 700,25 600,40 C500,55 400,25 300,40 C200,55 100,25 0,40 Z' fill='black'/></svg>"); mask-image:url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,0 H1200 V40 C1100,55 1000,25 900,40 C800,55 700,25 600,40 C500,55 400,25 300,40 C200,55 100,25 0,40 Z' fill='black'/></svg>"); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat }
/* The calculator slider shows where the keyboard is. */
.cf-page .fund-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 999px; }

/* --- the intro-call request (not in the design: opened by every "Book" link). Selectors carry the dialog's
   class too: the site's Tailwind preflight and forms plugin load after this file and style [type=submit] and
   text fields themselves. --- */
.cf-dialog { margin: auto; max-height: calc(100dvh - 32px); overflow: auto; width: min(520px, calc(100vw - 32px)); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 1.5rem; padding: 2rem;
  background: var(--cream); color: var(--foreground); box-shadow: 0 30px 80px -30px rgba(71, 0, 216, .35); }
.cf-dialog::backdrop { background: rgba(71, 0, 216, .3); backdrop-filter: blur(4px); }
.cf-dialog-eyebrow { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.cf-dialog-title { font-size: 2.25rem; line-height: 1.05; color: var(--ink); margin: .5rem 0 .75rem; }
.cf-dialog-text { color: var(--ink-soft); font-size: .95rem; margin: 0 0 1rem; }
.cf-form { display: grid; gap: .875rem; }
.cf-form label { display: grid; gap: .375rem; font-size: .875rem; font-weight: 500; color: var(--foreground); }
.cf-form input:not([type=submit]), .cf-form textarea { font: inherit; font-size: 16px; font-weight: 400; background: #fff; border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); border-radius: 1rem;
  padding: .75rem 1rem; color: var(--foreground); }
.cf-form input:not([type=submit]):focus, .cf-form textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; box-shadow: none; border-color: color-mix(in srgb, var(--ink) 15%, transparent); }
.cf-optional { font-weight: 400; color: var(--ink-soft); }
.cf-errors { background: #fdecec; color: #8a1c1c; border-radius: 1rem; padding: .625rem 1rem; font-size: .875rem; }
.cf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-dialog-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }
.cf-dialog .cf-dialog-btn { display: inline-flex; justify-content: center; border-radius: 999px; background: var(--ink); color: var(--cream); border: 1px solid var(--ink);
  padding: .875rem 1.75rem; font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1; cursor: pointer; }
.cf-dialog .cf-dialog-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cf-dialog .cf-dialog-btn:hover { opacity: .9; }
.cf-dialog .cf-dialog-btn-ghost { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 25%, transparent); }

/* --- deliberate departures from the design, for readability and touch (2026-10-28) --- */
/* The three "How it works" cards stack until there is room for three readable columns. */
@media (max-width: 1023.98px) {
  .cf-page #how .md\:grid-cols-3 { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
}
/* The uppercase labels: 12px instead of 10px. */
.cf-page .text-\[10px\] { font-size: 12px; }
/* The smallest phones: the main buttons stay on one line. */
@media (max-width: 359.98px) {
  .cf-page a.rounded-full.px-7, .cf-page button.rounded-full.px-7 { padding-left: 1rem; padding-right: 1rem; font-size: .9375rem; }
}
/* Contrast (WCAG AA, 4.5:1 for normal text): the faded text on the purple sections and the mint card, and the risk warning. */
.cf-page #how .text-cream\/50, .cf-page #how .text-cream\/60, .cf-page #how .text-cream\/70, .cf-page #book .text-cream\/70 { color: color-mix(in srgb, var(--cream) 86%, transparent); }
.cf-page #how .text-fund-ink\/60, .cf-page #how .text-fund-ink\/70, .cf-page #how .text-fund-ink\/75 { color: var(--ink); }
@media (max-width: 480px) { .cf-dialog { padding: 1.5rem 1.25rem; } .cf-dialog .cf-dialog-btn { padding-left: 1.25rem; padding-right: 1.25rem; } }