/* American Children Fund: the tafund.org layout and type, recoloured from the winged AC logo.
   Palette 2 Paper: the logo's navy (#062652) and red (#C1162C) on clean warm white and light grey, no gold.
   Scoped to html.acf; tools/theme_site.py publishes it as assets/acf-<hash>.css for every page. */
html.acf {
  /* palette 2 "Paper": the logo's navy and red on clean warm white and light grey */
  --color-navy-700: #12366a; --color-navy-800: #062652; --color-navy-900: #031a3a;
  --color-red-600: #c1162c; --color-red-700: #9e1224;
  --color-cream-50: #fdfdfb; --color-cream-100: #f4f4f1; --color-cream-200: #e7e7e2;
  --color-ink: #0e1d35; --color-muted: #5f6672; --color-line: #e2e2dc;
  --color-gold-500: #12366a;
  --color-gold-600: #12366a;
  --color-gold-text: #c1162c;
  --shadow-warm-sm: 0 1px 2px rgba(6, 38, 82, .05);
  --shadow-warm: 0 1px 2px rgba(6, 38, 82, .04), 0 8px 24px rgba(6, 38, 82, .06);
  --shadow-warm-lift: 0 2px 4px rgba(6, 38, 82, .05), 0 14px 32px rgba(6, 38, 82, .09);
  --shadow-warm-lg: 0 2px 4px rgba(6, 38, 82, .05), 0 16px 40px rgba(6, 38, 82, .08);
}
html.acf body { background: var(--color-cream-50); }

/* type: Fraunces for headings and figures, Inter for everything else */
html.acf { --font-display: "Fraunces", Georgia, serif; --font-sans: "Inter", system-ui, sans-serif; }
html.acf body { font-family: var(--font-sans); }
html.acf h1, html.acf h2, html.acf h3, html.acf .font-display { font-family: var(--font-display); font-weight: 500 !important; }

html.acf .acf-hero img[src$="acf-seal.png"] { width: 112px; height: 112px; filter: none; }

/* cards: lighter edges, softer depth */
html.acf .border-line { border-color: var(--color-line); }

/* the navy band now starts on a straight edge instead of the copied flag ribbon */
html.acf #why-it-matters .text-\[\#e1c688\] { color: #f4b6be; }

/* larger, softer card rounding everywhere; buttons keep the original control radius */
html.acf { --radius-card: 18px; }

/* hero: one centred column, the logo leads between a mirrored pair of its wings, the treasury reads as a wide live strip */
html.acf .acf-hero-grid { grid-template-columns: 1fr !important; justify-items: center; min-height: 0 !important; gap: 56px !important; padding-top: 76px !important; padding-bottom: 72px !important; }
html.acf .acf-hero-grid > div:first-child { align-items: center !important; text-align: center !important; }
html.acf .acf-hero-grid > div:first-child > div:last-child { justify-content: center !important; }
html.acf .acf-hero-grid h1 { margin-top: 28px; }
@media (min-width: 1024px) { html.acf .acf-hero-grid h1 { font-size: 80px; } }
html.acf .acf-hero-grid > div:first-child > p { margin-left: auto; margin-right: auto; }

/* how it works: counters for the timeline numbers */
html.acf #how-it-works ol { counter-reset: step; }
html.acf #how-it-works li { counter-increment: step; }
html.acf .acf-step > span:first-child { display: none; }
html.acf .acf-step::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); line-height: 1; }

/* navy band for the mission, same navy and type colours as the band under the hero */
html.acf .acf-navy { background: var(--color-navy-800); color: var(--color-cream-50); }
html.acf .acf-navy h2 { color: var(--color-cream-50); }
html.acf .acf-navy .eyebrow { color: #f4b6be; }
html.acf .acf-navy .text-ink\/85 { color: #d3dceb; }

/* how it works: a numbered list of the steps on the left, Trump Accounts in numbers on the right */
@media (min-width: 1024px) {
  html.acf .acf-how { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "head facts" "steps facts"; column-gap: 72px; align-items: start; }
  html.acf .acf-how > .section-heading { grid-area: head; align-items: flex-start !important; text-align: left !important; margin: 0 0 8px !important; }
  html.acf .acf-how > .mt-10 { grid-area: steps; margin-top: 18px !important; }
  html.acf .acf-how > .acf-facts { grid-area: facts; }
}
html.acf .acf-how h2 { font-size: clamp(2rem, 3.4vw, 2.8rem) !important; line-height: 1.08 !important; }
html.acf #how-it-works ol { display: block !important; }
html.acf #how-it-works li.h-full + li.h-full { border-top: 1px solid var(--color-line); }
html.acf .acf-step {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  display: grid !important; grid-template-columns: 52px 1fr; column-gap: 18px; padding: 22px 0 !important; min-height: 0 !important;
}
html.acf .acf-step::before { grid-row: 1 / span 3; font-size: 1.5rem; color: var(--color-red-600); margin: 2px 0 0; }
html.acf .acf-step .eyebrow { display: none; }
html.acf .acf-step h3 { margin: 0 0 6px !important; min-height: 0 !important; font-size: 1.3rem !important; color: var(--color-navy-800) !important; }
html.acf .acf-step p { color: var(--color-muted) !important; max-width: 52ch; }
html.acf .acf-facts { margin-top: 32px; background: var(--color-navy-800); color: var(--color-cream-50); border-radius: var(--radius-card); padding: 30px 32px 26px; }
@media (min-width: 1024px) { html.acf .acf-facts { margin-top: 0; position: sticky; top: 120px; } }
html.acf .acf-facts-k { margin: 0 0 6px; font: 600 .72rem/1.3 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: #f4b6be; }
html.acf .acf-facts ul { list-style: none; margin: 0; padding: 0; }
html.acf .acf-facts li { display: grid; gap: 4px; padding: 20px 0; }
html.acf .acf-facts li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
html.acf .acf-fact-n { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: #ffffff; }
html.acf .acf-fact-t { font-size: .95rem; line-height: 1.45; color: #d3dceb; }
html.acf .acf-facts-src { display: inline-block; margin-top: 8px; font-size: .78rem; color: #aebbd0; text-decoration: underline; text-underline-offset: 3px; }
html.acf .acf-facts-src:hover { color: #ffffff; }

/* mission: a centred statement over the darkened family photo */
html.acf .acf-statement {
  position: relative; isolation: isolate; overflow: hidden; padding-top: 140px !important; padding-bottom: 140px !important;
  background: linear-gradient(rgba(3, 26, 58, .82), rgba(3, 26, 58, .88)), url("../images/family.jpg") center 40% / cover !important;
}
html.acf .acf-statement > div { display: block !important; max-width: 820px; text-align: center; }
html.acf .acf-statement .section-heading { align-items: center !important; text-align: center !important; }
html.acf .acf-statement h2 { font-size: clamp(2.4rem, 4.6vw, 3.8rem) !important; line-height: 1.05 !important; }
html.acf .acf-statement p.mt-6 { margin-left: auto; margin-right: auto; max-width: 58ch; font-size: 1.15rem; color: #e2e9f3; }

/* FAQ: heading on the left, questions in a light card on the right, on its own band */
html.acf .acf-faq { background: #ececE7 !important; }
@media (min-width: 1024px) {
  html.acf #faq > div { max-width: var(--container-content) !important; display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: start; }
  html.acf #faq .section-heading { align-items: flex-start !important; text-align: left !important; position: sticky; top: 120px; margin: 0; }
}
html.acf #faq .divide-y { margin-top: 0; background: #ffffff; border-radius: 22px; padding: 8px 32px; box-shadow: 0 1px 2px rgba(6, 38, 82, .05), 0 16px 40px rgba(6, 38, 82, .07); }
html.acf #faq details { padding-top: 22px; padding-bottom: 22px; }
html.acf #faq summary { font-size: 1.05rem; }
@media (max-width: 639px) { html.acf #faq .divide-y { padding: 4px 20px; } }

/* closing call: the whole section in navy */
html.acf .acf-closer { background: var(--color-navy-800); padding-top: 112px !important; padding-bottom: 112px !important; border-bottom: 1px solid rgba(255, 255, 255, .08); }
html.acf .acf-closer h2 { color: var(--color-cream-50) !important; font-size: clamp(2.2rem, 4vw, 3.4rem) !important; line-height: 1.1 !important; }
html.acf .acf-closer p { color: #d3dceb !important; }
html.acf .acf-closer a { background: var(--color-red-600) !important; color: #fff !important; }

/* app preview: the screens cross-fade inside the phone */
html.acf .app-device figure[id^="app-panel-"] { display: block !important; transition: opacity .6s ease; }
html.acf .app-device figure[id^="app-panel-"][hidden] { opacity: 0; pointer-events: none; }

/* header name stays on one line in the wider Fraunces */
html.acf header a > img + span.font-display { white-space: nowrap; }
@media (max-width: 420px) { html.acf header a > img + span.font-display { font-size: 1.12rem; } }

/* palette 2: text on the navy bands in a cool tint, eyebrows there in soft red */
html.acf #why-it-matters p, html.acf .acf-statement p.mt-6 { color: #d3dceb !important; }
html.acf .acf-navy .eyebrow, html.acf #why-it-matters .eyebrow, html.acf #why-it-matters a { color: #f4b6be !important; }

/* hero: the headline leads, a small line explains, then only what has been donated */
html.acf .acf-lede { font-size: 1rem !important; color: var(--color-muted) !important; max-width: 520px !important; }
html.acf .acf-donated {
  justify-self: center; display: flex; align-items: center; gap: 40px; padding: 22px 26px 22px 32px;
  background: #ffffff; border-radius: var(--radius-card); box-shadow: var(--shadow-warm-lg);
}
html.acf .acf-donated-k { margin: 0; font: 600 .72rem/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--color-red-600); }
html.acf .acf-donated-v { margin: 8px 0 0; font-size: 3rem; line-height: 1; color: var(--color-navy-800); }
html.acf .acf-proof {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: var(--radius-control);
  background: var(--color-navy-800); color: #fff; font: 600 .9rem/1 var(--font-sans); text-decoration: none; transition: background-color .15s;
}
html.acf .acf-proof:hover { background: var(--color-navy-700); }
@media (max-width: 480px) { html.acf .acf-donated { gap: 20px; padding: 18px 18px 18px 22px; } html.acf .acf-donated-v { font-size: 2.3rem; } }

/* hero wings: a mirrored pair from the logo; they spread open on load, then breathe slowly */
html.acf .acf-wings { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
html.acf .acf-wing {
  position: absolute; top: 40px; height: 520px; width: min(440px, 40vw);
  background: url("../brand/wing.png") center / contain no-repeat; opacity: .05;
}
html.acf .acf-wing-r { left: 50%; margin-left: 60px; transform-origin: 0% 85%; animation: acf-spread-r 1.6s cubic-bezier(.2,.7,.2,1) both, acf-breathe-r 7s ease-in-out 1.6s infinite; }
html.acf .acf-wing-l { right: 50%; margin-right: 60px; transform-origin: 100% 85%; animation: acf-spread-l 1.6s cubic-bezier(.2,.7,.2,1) both, acf-breathe-l 7s ease-in-out 1.6s infinite; }
html.acf .acf-wing-l { background-image: url("../brand/wing-l.png"); }
@keyframes acf-spread-r { from { transform: rotate(-28deg); opacity: 0; } to { transform: rotate(0deg); opacity: .05; } }
@keyframes acf-spread-l { from { transform: rotate(28deg); opacity: 0; } to { transform: rotate(0deg); opacity: .05; } }
@keyframes acf-breathe-r { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } }
@keyframes acf-breathe-l { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
@media (max-width: 767px) { html.acf .acf-wing { top: 70px; height: 360px; width: 46vw; } html.acf .acf-wing-r { margin-left: 10px; } html.acf .acf-wing-l { margin-right: 10px; } }

/* why transparency: heading left, a comparison card right (usual practice against this fund) */
@media (min-width: 1024px) { html.acf .acf-why > div { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; gap: 72px !important; align-items: center; } }
html.acf .acf-why > div > div:first-child { text-align: left !important; }
@media (max-width: 1023px) { html.acf .acf-why > div > div:first-child { text-align: center !important; } }
html.acf .acf-why #context-title { font-size: clamp(2.4rem, 4.2vw, 3.6rem) !important; line-height: 1.02 !important; }
html.acf .acf-why .eyebrow { color: #f4b6be !important; }
html.acf .acf-why p.mt-7 { color: #d3dceb !important; }
/* comparison: two cards side by side, an unnamed charity (muted, crosses) and this fund (white, red checks) */
html.acf .acf-cmp { display: grid; grid-template-columns: 1fr 1.08fr; gap: 16px; align-items: stretch; }
html.acf .acf-cmp-card { border-radius: var(--radius-card); padding: 26px 26px 10px; }
html.acf .acf-cmp-them { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); margin: 18px 0; }
html.acf .acf-cmp-us { background: #ffffff; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55); }
html.acf .acf-cmp-title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 600 .74rem/1.2 var(--font-sans) !important; letter-spacing: .16em; text-transform: uppercase; }
html.acf .acf-cmp-title img { width: 28px; height: 28px; }
html.acf #why-it-matters .acf-cmp-them .acf-cmp-title { color: #aebbd0 !important; }
html.acf #why-it-matters .acf-cmp-us .acf-cmp-title { color: var(--color-red-600) !important; }
html.acf .acf-cmp ul { list-style: none; margin: 0; padding: 0; }
html.acf .acf-cmp li { position: relative; padding: 18px 0 18px 36px; display: grid; gap: 4px; }
html.acf .acf-cmp-them li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
html.acf .acf-cmp-us li + li { border-top: 1px solid var(--color-line); }
html.acf .acf-cmp li::before { content: ""; position: absolute; left: 0; top: 20px; width: 22px; height: 22px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 22px; }
html.acf .acf-cmp-them li::before { background-color: rgba(255, 255, 255, .12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M8 8l6 6M14 8l-6 6' stroke='%23aebbd0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
html.acf .acf-cmp-us li::before { background-color: var(--color-red-600); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 3 6-6.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html.acf .acf-cmp-q { font: 600 .7rem/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
html.acf .acf-cmp-a { font-size: 1rem; line-height: 1.45; }
html.acf #why-it-matters .acf-cmp-them .acf-cmp-q { color: #8fa1ba !important; }
html.acf #why-it-matters .acf-cmp-them .acf-cmp-a { color: #c4cfde !important; }
html.acf #why-it-matters .acf-cmp-us .acf-cmp-q { color: var(--color-muted) !important; }
html.acf #why-it-matters .acf-cmp-us .acf-cmp-a { color: var(--color-navy-800) !important; font-weight: 600; }
@media (max-width: 639px) {
  html.acf .acf-cmp { grid-template-columns: 1fr; }
  html.acf .acf-cmp-them { margin: 0; }
  html.acf .acf-cmp-card { padding: 22px 20px 6px; }
}

/* the 501(c)(3) registration status as a quiet badge under the transparency text */
html.acf .acf-501 { display: inline-flex; align-items: center; gap: 12px; margin: 28px 0 0; padding: 8px 16px 8px 8px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font: 500 .9rem/1 var(--font-sans); color: #d3dceb !important; }
html.acf .acf-501 span { padding: 7px 12px; border-radius: 999px; background: var(--color-red-600); color: #fff; font-weight: 700; letter-spacing: .04em; }

/* total donated: label, amount, then the proof button underneath, all centred */
html.acf .acf-donated { flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 26px 40px 28px; min-width: 260px; }
html.acf .acf-donated-v { font-size: 3.4rem; }
html.acf .acf-proof { min-width: 180px; justify-content: center; }
@media (max-width: 480px) { html.acf .acf-donated { padding: 22px 28px 24px; } }

/* View proof: a small link under the total, not a primary button */
html.acf .acf-donated { gap: 10px; padding: 24px 40px 22px; }
html.acf .acf-proof {
  min-height: 0; min-width: 0; padding: 0; background: none; border-radius: 0;
  color: var(--color-navy-800); font: 600 .85rem/1.4 var(--font-sans);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(6, 38, 82, .35);
}
html.acf .acf-proof::after { content: " \2197"; }
html.acf .acf-proof:hover { background: none; color: var(--color-red-600); text-decoration-color: currentColor; }
/* the numbers panel sits centred against the heading and steps */
@media (min-width: 1024px) { html.acf .acf-how > .acf-facts { align-self: center; position: static; } }

/* app: three short points under the copy */
html.acf .acf-app-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
html.acf .acf-app-points li { position: relative; padding-left: 30px; font-weight: 600; color: var(--color-navy-800); }
html.acf .acf-app-points li::before { content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%; background: var(--color-red-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.3l2.7 2.7 5.3-5.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
@media (max-width: 1023px) { html.acf .acf-app-points { justify-content: center; text-align: left; } }
html.acf #app-preview h2 { font-size: clamp(2rem, 3.4vw, 2.8rem) !important; line-height: 1.08 !important; }
@media (min-width: 1024px) { html.acf .app-preview-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; } }

/* app: a soft blue band that fades in from the section above, with a light behind the phones */
html.acf #app-preview { background: radial-gradient(ellipse 46% 70% at 72% 55%, #ffffff 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--color-cream-100) 0%, #e8eef7 26%, #dfe7f2 100%) !important; }
@media (max-width: 1023px) { html.acf #app-preview { background: radial-gradient(ellipse 80% 40% at 50% 78%, #ffffff 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, var(--color-cream-100) 0%, #e8eef7 26%, #dfe7f2 100%) !important; } }

/* app: five screens fanned out symmetrically around the upright front one */
html.acf .acf-fan { position: relative; height: 500px; width: 100%; max-width: 560px; justify-self: center; }
html.acf .acf-phone {
  position: absolute; left: 50%; bottom: 14px; margin: 0; width: 184px; aspect-ratio: 390 / 844;
  border: 6px solid var(--color-navy-900); border-radius: 30px; overflow: hidden; background: var(--color-navy-900);
  box-shadow: 0 24px 48px -18px rgba(3, 26, 58, .4), 0 4px 12px rgba(3, 26, 58, .1);
  transform-origin: 50% 115%; transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
html.acf .acf-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
html.acf .acf-phone-onboarding { --t: rotate(-20deg) translateX(-118px); z-index: 1; }
html.acf .acf-phone-profile    { --t: rotate(20deg) translateX(118px); z-index: 1; }
html.acf .acf-phone-missions   { --t: rotate(-10deg) translateX(-58px); z-index: 2; }
html.acf .acf-phone-road       { --t: rotate(10deg) translateX(58px); z-index: 2; }
html.acf .acf-phone-today      { --t: rotate(0deg); z-index: 3; bottom: 0; width: 206px; }
html.acf .acf-phone { transform: translateX(-50%) var(--t); }
@media (hover: hover) {
  html.acf .acf-fan:hover .acf-phone-onboarding { --t: rotate(-24deg) translateX(-146px); }
  html.acf .acf-fan:hover .acf-phone-profile    { --t: rotate(24deg) translateX(146px); }
  html.acf .acf-fan:hover .acf-phone-missions   { --t: rotate(-12deg) translateX(-74px); }
  html.acf .acf-fan:hover .acf-phone-road       { --t: rotate(12deg) translateX(74px); }
}
@media (max-width: 639px) {
  html.acf .acf-fan { height: 340px; margin-top: 30px; }
  html.acf .acf-phone { width: 116px; border-width: 4px; border-radius: 18px; }
  html.acf .acf-phone img { border-radius: 14px; }
  html.acf .acf-phone-today { width: 140px; }
  html.acf .acf-phone-onboarding { --t: rotate(-13deg) translateX(-50px); }
  html.acf .acf-phone-profile    { --t: rotate(13deg) translateX(50px); }
  html.acf .acf-phone-missions   { --t: rotate(-6.5deg) translateX(-25px); }
  html.acf .acf-phone-road       { --t: rotate(6.5deg) translateX(25px); }
}

/* footer: slim, the brand, then the small print */
html.acf .acf-foot { margin-top: auto; background: var(--color-navy-900); color: #d3dceb; }
html.acf .acf-foot-in { width: min(var(--container-content), calc(100% - 2rem)); margin: 0 auto; padding: 36px 0 28px; }
@media (min-width: 768px) { html.acf .acf-foot-in { width: min(var(--container-content), calc(100% - 4rem)); } }
html.acf .acf-foot a { color: inherit; text-decoration: none; }
html.acf .acf-foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-bottom: 24px; }
html.acf .acf-foot-brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 1.15rem; color: #ffffff !important; }
html.acf .acf-foot-brand img { width: 36px; height: 36px; }
html.acf .acf-foot-bot a:hover { color: #ffffff; }
html.acf .acf-foot-legal { margin: 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .74rem; line-height: 1.7; color: #8fa1ba; }
html.acf .acf-foot-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 14px; font-size: .78rem; color: #8fa1ba; }
html.acf .acf-foot-bot p { margin: 0; }
html.acf .acf-foot-bot nav { display: flex; gap: 22px; }

/* ===== full-screen scroll experience (experience.js sets html.acf-xp) ===== */
/* the living backdrop: a base colour and three slow, blurred colour fields, recoloured per scene */
html.acf-xp, html.acf-xp body { overflow-x: clip; }
html.acf-xp body { background: transparent !important; }
html.acf-xp .xp-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--xp-base, #f7f8fb); }
html.acf-xp .xp-blob { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(90px); opacity: .75; will-change: transform; }
html.acf-xp .xp-b1 { background: var(--xp-b1); top: -24vmax; left: -14vmax; animation: xp-drift-a 26s ease-in-out infinite alternate; }
html.acf-xp .xp-b2 { background: var(--xp-b2); bottom: -30vmax; right: -18vmax; opacity: .55; animation: xp-drift-b 31s ease-in-out infinite alternate; }
html.acf-xp .xp-b3 { background: var(--xp-b3); top: 30%; left: 35%; width: 46vmax; height: 46vmax; opacity: .6; animation: xp-drift-c 37s ease-in-out infinite alternate; }
@keyframes xp-drift-a { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes xp-drift-b { to { transform: translate(-16vmax, -14vmax) scale(.9); } }
@keyframes xp-drift-c { to { transform: translate(-22vmax, 10vmax) scale(1.2); } }
html.acf-xp .xp-grain { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* scenes sit on the backdrop: their own fills go */
html.acf-xp main .paper, html.acf-xp .acf-hero, html.acf-xp #why-it-matters, html.acf-xp #how-it-works,
html.acf-xp #app-preview, html.acf-xp #faq, html.acf-xp #mission:has(.xp-photo) { background: transparent !important; }

/* each scene fills the screen and centres its content */
html.acf-xp .acf-hero { min-height: calc(100svh - 110px); display: flex; align-items: center; }
html.acf-xp .acf-hero > .acf-hero-grid { width: min(var(--container-content), calc(100% - 2rem)); margin-inline: auto; }
/* desktop stages: the section stays on screen inside its tall wrapper while the scroll plays it */
html.acf-xp .xp-scene { position: relative; }
html.acf-xp .xp-stage { position: sticky; top: 0; height: 100vh; min-height: 0 !important; display: flex; align-items: center; overflow: hidden; padding-top: 84px !important; padding-bottom: 24px !important; }
html.acf-xp .xp-stage > div { width: min(var(--container-content), calc(100% - 4rem)); margin-inline: auto; }
@media (min-width: 900px) { html.acf-xp #mission { min-height: 100vh; display: flex; align-items: center; } html.acf-xp #mission > div:not(.xp-photo) { width: 100%; } }

/* words rise from below a clipped line */
html.acf-xp .xp-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
html.acf-xp .xp-wi { display: inline-block; }

/* how it works: the progress line that fills as the steps light up */
html.acf-xp #how-it-works ol { position: relative; }
html.acf-xp .xp-progress { position: absolute; left: -26px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--color-red-600); transform-origin: top; }
html.acf-xp #how-it-works ol::before { content: ""; position: absolute; left: -26px; top: 22px; bottom: 22px; width: 2px; background: rgba(6, 38, 82, .1); }

/* app: the scrub drives the fan, so no transition lag */
html.acf-xp .acf-phone { transition: none !important; }

/* mission: the photo lives in its own layer so it can zoom with the scroll */
html.acf-xp .acf-statement > .xp-photo { max-width: none !important; }
html.acf-xp .xp-photo { position: absolute; inset: -8% 0; z-index: -1; background: linear-gradient(rgba(3, 26, 58, .78), rgba(3, 26, 58, .86)), url("../images/family.jpg") center 40% / cover; will-change: transform; }

/* Submit flow, FAQ page and the home sign-up call. Appended to acf.css by tools/theme_site.py. */

/* ===== shared buttons ===== */
html.acf .acf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--radius-control); background: var(--color-navy-800); color: #fff !important; font: 600 .98rem/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color .15s, transform .15s; }
html.acf .acf-btn:hover { background: var(--color-navy-700); transform: translateY(-1px); }
html.acf .acf-btn[disabled] { opacity: .75; cursor: wait; transform: none; }
html.acf .sx-btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: var(--radius-control); border: 1.5px solid rgba(6, 38, 82, .18); background: #fff; box-shadow: 0 1px 2px rgba(6, 38, 82, .06), 0 10px 22px -12px rgba(6, 38, 82, .35); transition: box-shadow .15s, transform .15s, border-color .15s; color: var(--color-navy-800); font: 600 .98rem/1 var(--font-sans); cursor: pointer; text-decoration: none; }
html.acf .sx-btn-ghost:hover { border-color: var(--color-navy-800); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(6, 38, 82, .08), 0 16px 28px -14px rgba(6, 38, 82, .45); }

/* ===== home: sign up call (replaces the FAQ) ===== */
html.acf .acf-signup { position: relative; isolation: isolate; overflow: hidden; padding: 120px 0 128px; text-align: center; }
html.acf .acf-signup > div { width: min(760px, calc(100% - 2rem)); margin: 0 auto; }
html.acf .acf-signup .eyebrow { color: var(--color-red-600) !important; }
html.acf .acf-signup h2 { margin: 12px 0 0; font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.6rem) !important; line-height: 1.02 !important; font-weight: 500 !important; color: var(--color-navy-800); }
html.acf .acf-signup .acf-signup-lead { margin: 20px auto 0; max-width: 46ch; font-size: 1.1rem; line-height: 1.6; color: var(--color-muted); }
html.acf .acf-signup .acf-signup-act { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
html.acf .acf-signup .acf-btn { min-height: 58px; padding: 0 34px; font-size: 1.05rem; background: var(--color-red-600); }
html.acf .acf-signup .acf-btn:hover { background: var(--color-red-700); }
html.acf .acf-signup small { display: block; margin-top: 18px; font-size: .86rem; color: var(--color-muted); }
html.acf .acf-signup .acf-signup-wing { position: absolute; z-index: -1; top: 50%; height: 440px; width: min(360px, 34vw); opacity: .06; transform: translateY(-50%); background: url("../brand/wing.png") center / contain no-repeat; }
html.acf .acf-signup .acf-signup-wing.l { left: max(0px, calc(50% - 640px)); background-image: url("../brand/wing-l.png"); }
html.acf .acf-signup .acf-signup-wing.r { right: max(0px, calc(50% - 640px)); }

/* ===== standalone pages (FAQ) ===== */
html.acf .acf-page-head { width: min(var(--container-content), calc(100% - 2rem)); margin: 0 auto; padding: 72px 0 24px; }
html.acf .acf-page-head h1 { margin: 10px 0 0; font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1.04; font-weight: 500; color: var(--color-navy-800); }
html.acf .acf-page-head p:last-child { margin: 14px 0 0; max-width: 52ch; color: var(--color-muted); font-size: 1.05rem; }
html.acf .acf-faq-standalone { padding: 24px 0 40px; background: transparent !important; }
html.acf .acf-faq-standalone .section-heading { display: none !important; }
html.acf .acf-faq-standalone > div { display: block !important; max-width: var(--container-content) !important; }
html.acf .acf-page-cta { width: min(var(--container-content), calc(100% - 2rem)); margin: 0 auto 88px; padding: 36px 40px; border-radius: var(--radius-card); background: var(--color-navy-800); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
html.acf .acf-page-cta p { margin: 0; font-family: var(--font-display); font-size: 1.8rem; color: #fff; }
html.acf .acf-page-cta .acf-btn { background: var(--color-red-600); }

/* ===== submit flow ===== */
html.acf .sx-page { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse 60% 60% at 20% 0%, #e3eaf6 0%, rgba(227, 234, 246, 0) 70%), radial-gradient(ellipse 50% 50% at 100% 100%, #f7e3e6 0%, rgba(247, 227, 230, 0) 70%), var(--color-cream-50); }
html.acf .sx-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
html.acf .sx-bg .acf-wing { top: 80px; height: 560px; width: min(460px, 40vw); opacity: .045; }
html.acf .sx-shell { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 56px 0 96px; display: grid; gap: 48px; align-items: start; min-height: calc(100svh - 120px); }
@media (min-width: 960px) { html.acf .sx-shell { grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; padding-top: 72px; } }
html.acf .sx-flow { max-width: 620px; }
html.acf .sx-top { display: flex; align-items: center; gap: 14px; }
html.acf .sx-back { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line); background: #fff; color: var(--color-navy-800); display: grid; place-items: center; cursor: pointer; }
html.acf .sx-back[hidden] { display: none; }
html.acf .sx-back svg { width: 20px; height: 20px; }
html.acf .sx-overline { margin: 0; font: 600 .72rem/1.3 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--color-red-600); }
html.acf .sx-h1 { margin: 4px 0 0; font-family: var(--font-display); font-size: 1.5rem !important; line-height: 1.2 !important; font-weight: 500 !important; color: var(--color-navy-800); }
html.acf .sx-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 26px 0 40px; }
html.acf .sx-progress i { height: 4px; border-radius: 4px; background: rgba(6, 38, 82, .12); position: relative; overflow: hidden; }
html.acf .sx-progress i::after { content: ""; position: absolute; inset: 0; background: var(--color-red-600); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
html.acf .sx-progress i.on::after { transform: scaleX(1); }
html.acf .sx-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #e7edf7; color: var(--color-navy-800); margin-bottom: 22px; }
html.acf .sx-icon svg { width: 28px; height: 28px; }
html.acf .sx-kicker { margin: 0; font: 600 .74rem/1.3 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
html.acf .sx-title { margin: 10px 0 0; font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 2.9rem) !important; line-height: 1.06 !important; font-weight: 500 !important; color: var(--color-navy-800); }
html.acf .sx-lead { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.6; color: var(--color-muted); max-width: 52ch; }
html.acf .sx-lead code, html.acf .sx-guide code { font: 500 .9em/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(6, 38, 82, .06); padding: 3px 6px; border-radius: 5px; color: var(--color-navy-800); }
html.acf .sx-choices { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
html.acf .sx-safe { display: flex; gap: 12px; align-items: flex-start; margin: 26px 0 0; padding: 14px 16px; border-radius: 12px; background: #e9f1ea; color: #23452c; font-size: .92rem; line-height: 1.5; max-width: 520px; }
html.acf .sx-safe svg { width: 22px; height: 22px; flex: none; color: #2f6b3b; }
html.acf .sx-safe-sm { margin-top: 18px; }
html.acf .sx-guide { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: g; display: grid; gap: 14px; }
html.acf .sx-guide li { counter-increment: g; position: relative; padding: 16px 18px 16px 58px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(6, 38, 82, .05); line-height: 1.55; color: var(--color-muted); }
html.acf .sx-guide li::before { content: counter(g); position: absolute; left: 16px; top: 15px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--color-navy-800); color: #fff; font: 600 .85rem/1 var(--font-sans); }
html.acf .sx-guide b { color: var(--color-navy-800); }
html.acf .sx-guide a { color: var(--color-navy-800); text-decoration: underline; }
html.acf .sx-form { margin: 0; }
html.acf .sx-step[hidden] { display: none; }
html.acf .sx-step > .sx-field:first-of-type, html.acf .sx-step > .sx-row:first-of-type { margin-top: 30px; }
html.acf .sx-row { display: grid; gap: 0 16px; }
@media (min-width: 640px) { html.acf .sx-row { grid-template-columns: 1fr 1fr; } }
html.acf .sx-field { margin-top: 18px; }
html.acf .sx-field label, html.acf .sx-label { display: block; margin: 0 0 8px; font: 600 .92rem/1.3 var(--font-sans); color: var(--color-navy-800); }
html.acf .sx-opt { font-weight: 500; color: var(--color-muted); }
html.acf .sx-field input, html.acf .sx-field select, html.acf .sx-field textarea { width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--color-line); background: #fff; font: 500 1rem/1.4 var(--font-sans); color: var(--color-navy-800); transition: border-color .15s, box-shadow .15s; }
html.acf .sx-field textarea { min-height: 96px; resize: vertical; }
html.acf .sx-field input:focus, html.acf .sx-field select:focus, html.acf .sx-field textarea:focus { outline: none; border-color: var(--color-navy-800); box-shadow: 0 0 0 4px rgba(6, 38, 82, .1); }
html.acf .sx-field [aria-invalid="true"] { border-color: var(--color-red-600); box-shadow: 0 0 0 4px rgba(193, 22, 44, .1); }
html.acf .sx-hint { margin: 7px 0 0; font-size: .82rem; line-height: 1.45; color: var(--color-muted); }
html.acf .sx-err { margin: 6px 0 0; font: 600 .84rem/1.4 var(--font-sans); color: var(--color-red-600); }
html.acf .sx-err:empty { display: none; }
html.acf .sx-err-group { margin-top: 14px; }
html.acf .sx-chips { display: flex; flex-wrap: wrap; gap: 10px; }
html.acf .sx-chip { position: relative; }
html.acf .sx-chip input { position: absolute; opacity: 0; pointer-events: none; }
html.acf .sx-chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--color-line); background: #fff; font: 600 .92rem/1 var(--font-sans); color: var(--color-navy-800); cursor: pointer; transition: all .15s; }
html.acf .sx-chip input:checked + span { background: var(--color-navy-800); border-color: var(--color-navy-800); color: #fff; }
html.acf .sx-chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(6, 38, 82, .15); }
html.acf .sx-chip input[aria-invalid="true"] + span { border-color: var(--color-red-600); }
html.acf .sx-warn { margin-top: 20px; padding: 16px 18px; border-radius: 12px; background: #fdf0f1; border: 1px solid #f3cfd4; display: grid; gap: 4px; font-size: .92rem; line-height: 1.5; color: #6b2430; }
html.acf .sx-warn b { color: var(--color-red-700); }
html.acf .sx-checks { margin-top: 26px; display: grid; gap: 10px; }
html.acf .sx-check { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1.5px solid transparent; cursor: pointer; transition: border-color .15s; }
html.acf .sx-check.is-bad { border-color: var(--color-red-600); }
html.acf .sx-check input { position: absolute; opacity: 0; pointer-events: none; }
html.acf .sx-box { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid #b8c1cf; background: #fff; display: grid; place-items: center; transition: all .15s; }
html.acf .sx-check input:checked + .sx-box { background: var(--color-red-600); border-color: var(--color-red-600); }
html.acf .sx-check input:checked + .sx-box::after { content: ""; width: 11px; height: 6px; border: solid #fff; border-width: 0 0 2.4px 2.4px; transform: translateY(-1px) rotate(-45deg); }
html.acf .sx-check input:focus-visible + .sx-box { box-shadow: 0 0 0 4px rgba(193, 22, 44, .18); }
html.acf .sx-check-t { font-size: .95rem; line-height: 1.5; color: var(--color-navy-800); }
html.acf .sx-check-t a { text-decoration: underline; }
html.acf .sx-review { margin: 28px 0 0; padding: 6px 22px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(6, 38, 82, .05); }
html.acf .sx-review > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 15px 0; }
html.acf .sx-review > div + div { border-top: 1px solid var(--color-line); }
html.acf .sx-review dt { font: 600 .72rem/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
html.acf .sx-review dd { grid-column: 1; margin: 0; font-weight: 600; color: var(--color-navy-800); overflow-wrap: anywhere; }
html.acf .sx-review button { grid-column: 2; grid-row: 1 / span 2; align-self: center; border: 0; background: none; color: var(--color-red-600); font: 600 .88rem/1 var(--font-sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
html.acf .sx-actions { margin-top: 34px; }
html.acf .sx-actions[hidden] { display: none; }
html.acf .sx-actions .acf-btn { min-width: 220px; }
html.acf .sx-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: sx-spin .8s linear infinite; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
html.acf .sx-alert { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #fdf0f1; border: 1px solid #f3cfd4; color: #6b2430; display: grid; gap: 2px; font-size: .92rem; }
html.acf .sx-alert b { color: var(--color-red-700); }
html.acf .sx-alert[hidden] { display: none; }
html.acf .sx-done .sx-seal img { width: 96px; height: 96px; filter: drop-shadow(0 18px 30px rgba(6, 38, 82, .25)); }
html.acf .sx-done .sx-kicker { margin-top: 22px; color: #2f6b3b; }
html.acf .sx-receipt { margin-top: 26px; display: inline-grid; gap: 6px; padding: 20px 26px; border-radius: 16px; background: var(--color-navy-800); color: #d3dceb; }
html.acf .sx-receipt span { font: 600 .7rem/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: #f4b6be; }
html.acf .sx-receipt b { font: 500 2.4rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; letter-spacing: .04em; }
html.acf .sx-receipt em { font-style: normal; font-size: .9rem; }
html.acf .sx-next { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--color-muted); line-height: 1.5; }
html.acf .sx-next b { color: var(--color-navy-800); }

/* live card */
html.acf .sx-card { position: relative; padding: 26px 26px 20px; border-radius: 22px; background: #fff; box-shadow: 0 2px 4px rgba(6, 38, 82, .04), 0 30px 60px -30px rgba(6, 38, 82, .35); overflow: hidden; }
@media (min-width: 960px) { html.acf .sx-card { position: sticky; top: 110px; transform: rotate(1.2deg); } }
@media (max-width: 959px) { html.acf .sx-card { display: none; } }
html.acf .sx-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed var(--color-line); }
html.acf .sx-card-head p { margin: 0; font-family: var(--font-display); font-size: 1rem; color: var(--color-navy-800); white-space: nowrap; }
html.acf .sx-card-head span { font: 600 .68rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
html.acf .sx-card-status { margin-left: auto; font: 600 .74rem/1 var(--font-sans); font-style: normal; padding: 6px 10px; border-radius: 999px; background: rgba(6, 38, 82, .07); color: var(--color-navy-800); }
html.acf .sx-card.is-done .sx-card-status { background: #e9f1ea; color: #2f6b3b; }
html.acf .sx-card-rows { margin: 6px 0 0; }
html.acf .sx-card-rows > div { padding: 12px 0; display: grid; gap: 3px; }
html.acf .sx-card-rows > div + div { border-top: 1px solid var(--color-line); }
html.acf .sx-card-rows dt { font: 600 .68rem/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
html.acf .sx-card-rows dd { margin: 0; font-weight: 600; font-size: .95rem; color: var(--color-navy-800); overflow-wrap: anywhere; border-radius: 6px; }
html.acf .sx-card-foot { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding-top: 14px; border-top: 1px dashed var(--color-line); font-size: .8rem; color: var(--color-muted); }
html.acf .sx-card-foot svg { width: 16px; height: 16px; flex: none; }
html.acf .sx-stamp { position: absolute; right: 22px; bottom: 58px; padding: 10px 18px; border: 3px solid #2f6b3b; border-radius: 12px; background: rgba(255, 255, 255, .96); box-shadow: 0 0 0 6px rgba(255, 255, 255, .96), 0 12px 24px -10px rgba(47, 107, 59, .45); color: #2f6b3b; font: 800 1.25rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: rotate(-12deg); pointer-events: none; }
html.acf .sx-stamp::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(47, 107, 59, .45); border-radius: 7px; }

/* ===== header: a floating glass bar over the page ===== */
html.acf .acf-head { position: sticky; top: 0; z-index: 60; padding: 12px 16px 0; pointer-events: none; }
html.acf .acf-head-in { pointer-events: auto; width: min(1180px, 100%); margin: 0 auto; height: 64px; padding: 0 10px 0 16px; display: flex; align-items: center; gap: 18px;
  border-radius: 999px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(6, 38, 82, .08);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 1px 2px rgba(6, 38, 82, .04); transition: box-shadow .3s, background-color .3s; }
html.acf.acf-scrolled .acf-head-in { background: rgba(255, 255, 255, .86); box-shadow: 0 10px 30px -12px rgba(6, 38, 82, .25); }
html.acf .acf-head-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
html.acf .acf-head-brand span { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; color: var(--color-navy-800); white-space: nowrap; }
html.acf .acf-head-nav { display: none; gap: 4px; }
html.acf .acf-head-nav a { position: relative; padding: 9px 13px; border-radius: 999px; font: 500 .9rem/1 var(--font-sans); color: #3c4a60; text-decoration: none; transition: background-color .15s, color .15s; }
html.acf .acf-head-nav a:hover { background: rgba(6, 38, 82, .06); color: var(--color-navy-800); }
html.acf .acf-head-cta { display: none; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--color-red-600); color: #fff !important; font: 600 .9rem/1 var(--font-sans); text-decoration: none; transition: background-color .15s, transform .15s; }
html.acf .acf-head-cta:hover { background: var(--color-red-700); transform: translateY(-1px); }
html.acf .acf-head-menu { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(6, 38, 82, .06); display: grid; place-content: center; gap: 5px; cursor: pointer; }
html.acf .acf-head-menu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--color-navy-800); transition: transform .25s; }
html.acf .acf-head-menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
html.acf .acf-head-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
html.acf .acf-head { isolation: isolate; }
html.acf .acf-head-sheet { pointer-events: auto; position: absolute; left: 16px; right: 16px; top: 84px; margin: 0 auto; max-width: 1180px; padding: 10px; border-radius: 24px; background: rgba(255, 255, 255, .94); border: 1px solid rgba(6, 38, 82, .08);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 20px 40px -20px rgba(6, 38, 82, .3); display: grid; gap: 2px; }
html.acf .acf-head-sheet[hidden] { display: none; }
html.acf .acf-head-sheet a:not(.acf-btn) { padding: 13px 14px; border-radius: 14px; font: 600 1rem/1 var(--font-sans); color: var(--color-navy-800); text-decoration: none; }
html.acf .acf-head-sheet a:not(.acf-btn):hover { background: rgba(6, 38, 82, .05); }
html.acf .acf-head-sheet .acf-btn { margin-top: 6px; border-radius: 14px; background: var(--color-red-600); }
@media (min-width: 1024px) {
  html.acf .acf-head-nav { display: flex; }
  html.acf .acf-head-cta { display: inline-flex; }
  html.acf .acf-head-menu, html.acf .acf-head-sheet { display: none !important; }
  html.acf .acf-head-brand { margin-right: 0; }
  html.acf .acf-head-nav { margin: 0 auto; }
}
@media (max-width: 420px) { html.acf .acf-head-brand span { font-size: 1rem; } html.acf .acf-head { padding: 10px 10px 0; } }

/* the not-affiliated note, small under the hero total */
html.acf .acf-hero-note { max-width: 520px; margin: -36px auto 0; text-align: center; font-size: .74rem; line-height: 1.5; color: #7a8494; }
html.acf .acf-hero-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* app section: coming soon badges, in the shape of the official store badges */
html.acf .acf-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 1023px) { html.acf .acf-stores { justify-content: center; } }
html.acf .acf-store { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px 0 14px; border-radius: 12px; background: #000; color: #fff; border: 1px solid #a6a6a6; cursor: default; user-select: none; }
html.acf .acf-store > svg { width: 26px; height: 26px; flex: none; }
html.acf .acf-store > span { display: grid; font: 600 1.18rem/1.05 var(--font-sans); letter-spacing: -.01em; }
html.acf .acf-store small { font: 500 .66rem/1.2 var(--font-sans); letter-spacing: .02em; color: rgba(255, 255, 255, .82); }

/* hero: app release countdown under the seal */
html.acf .acf-launch { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 7px 8px 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(6, 38, 82, .1); box-shadow: 0 10px 30px -14px rgba(6, 38, 82, .35); backdrop-filter: blur(8px); color: var(--color-navy-800, #062652); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
html.acf .acf-launch[hidden] { display: none; }
html.acf .acf-launch:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(6, 38, 82, .45); }
html.acf .acf-launch-k { display: inline-flex; align-items: center; font: 600 .72rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: #5f6672; }
html.acf .acf-launch-t { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #062652; color: #fff; }
html.acf .acf-launch-t > span { display: inline-flex; align-items: baseline; gap: 4px; }
html.acf .acf-launch-t b { font: 600 1.3rem/1 var(--font-display); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
html.acf .acf-launch-t small { font: 500 .66rem/1 var(--font-sans); letter-spacing: .04em; color: rgba(255, 255, 255, .62); }
html.acf .acf-launch-t em { font-style: normal; color: rgba(255, 255, 255, .35); margin: 0 2px; }
@media (max-width: 420px) {
  html.acf .acf-launch { flex-direction: column; gap: 8px; padding: 10px 10px 8px; border-radius: 22px; }
}

/* hero: the contract address under the line, copied on click */
html.acf .acf-ca { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 6px 6px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(6, 38, 82, .1); box-shadow: 0 10px 30px -16px rgba(6, 38, 82, .35); backdrop-filter: blur(8px); color: #062652; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
html.acf .acf-ca:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -16px rgba(6, 38, 82, .45); }
html.acf .acf-ca-k { padding: 6px 11px; border-radius: 999px; background: #062652; color: #fff; font: 700 .72rem/1 var(--font-sans); letter-spacing: .12em; }
html.acf .acf-ca code { font: 500 .86rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .01em; color: #062652; white-space: nowrap; }
html.acf .acf-ca-short { display: none; }
html.acf .acf-ca-copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: #f1f3f7; font: 600 .76rem/1 var(--font-sans); color: #062652; transition: background .2s ease, color .2s ease; }
html.acf .acf-ca-copy svg { width: 14px; height: 14px; }
html.acf .acf-ca.is-copied .acf-ca-copy { background: #062652; color: #fff; }
@media (max-width: 640px) {
  html.acf .acf-ca-full { display: none; }
  html.acf .acf-ca-short { display: inline; }
}

/* X: the official logo as a round button in the header, next to the CA and in the footer */
html.acf .acf-ca-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; }
html.acf .acf-head-x, html.acf .acf-ca-x, html.acf .acf-foot-x { display: inline-grid; place-items: center; flex: none; border-radius: 50%; text-decoration: none; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
html.acf .acf-head-x svg, html.acf .acf-ca-x svg, html.acf .acf-foot-x svg { width: 17px; height: 17px; }
html.acf .acf-head-x { width: 44px; height: 44px; background: rgba(6, 38, 82, .06); color: #0f1419 !important; }
html.acf .acf-head-x:hover { background: rgba(6, 38, 82, .11); transform: translateY(-1px); }
html.acf .acf-ca-x { width: 46px; height: 46px; background: #0f1419; color: #fff !important; box-shadow: 0 10px 30px -14px rgba(6, 38, 82, .45); }
html.acf .acf-ca-x:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(6, 38, 82, .55); }
html.acf .acf-foot-x { width: 44px; height: 44px; background: rgba(255, 255, 255, .1); color: #fff !important; }
html.acf .acf-foot-x:hover { background: rgba(255, 255, 255, .18); }
@media (max-width: 420px) { html.acf .acf-head-x { display: none; } }