/* A Cocombee form (board: design/canvas/project/Forms.dc.html, the preview card). Shared by the hosted page,
   the embed script and the builder canvas. Everything is scoped under .cf so it is safe inside other websites. */
.cf { font: 400 13px/1.5 var(--f-body, Inter), system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--c-text, #182A28); -webkit-font-smoothing: antialiased; }
.cf *, .cf *::before, .cf *::after { box-sizing: border-box; }
.cf [hidden] { display: none !important; }
.cf svg { display: block; }
.cf a { color: #1E6F67; }

/* The card starts clean: spacing set on the page section or piece around it never reaches its own rows and questions. */
.cf .fm-card { --rt: initial; --rr: initial; --rb: initial; --rl: initial; --rt-t: initial; --rr-t: initial; --rb-t: initial; --rl-t: initial; --rt-m: initial; --rr-m: initial; --rb-m: initial; --rl-m: initial; --ft: initial; --fr: initial; --fb: initial; --fl: initial; --ft-t: initial; --fr-t: initial; --fb-t: initial; --fl-t: initial; --ft-m: initial; --fr-m: initial; --fb-m: initial; --fl-m: initial; background: var(--card-bg, #fff); border: var(--card-bw, 0px) solid var(--card-bc, #D9E1DF); box-shadow: var(--card-sh, none); border-radius: var(--card-r, 13px); container-type: inline-size; }
/* A width of its own (Form settings, Style, Page): never wider than that, centred where there is room. */
.cf .fm-card.sized { max-width: var(--card-w); margin-inline: auto; }
.cf .cf-hdr { border-radius: var(--card-r, 13px) var(--card-r, 13px) 0 0; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cf .cf-logo { display: block; height: 27px; width: auto; max-width: 160px; object-fit: contain; object-position: left center; }
.cf .cf-site { font-size: 12px; }
.cf .cf-body { padding: var(--card-pad, 28px); display: flex; flex-direction: column; gap: var(--card-gap, 22px); }
.cf .fm-title { margin: 0; font: var(--title-fw, 600) var(--title-fs, 20px)/1.3 var(--f-head, Poppins), var(--f-body, Inter), sans-serif; color: var(--title-c, var(--c-text, #182A28)); letter-spacing: -.01em; }
.cf .fm-desc { margin: 6px 0 0; font-size: var(--desc-fs, 13px); line-height: 1.55; color: var(--desc-c, #3D4F4C); white-space: pre-line; }
.cf .cf-form { display: flex; flex-direction: column; gap: var(--card-gap, 22px); margin: 0; }

/* The title block's looks (a header picture, the logo above a centred title) and the mail icon in email fields. */
.cf .cf-cover { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--card-r, 13px) var(--card-r, 13px) 0 0; }
.cf .cf-cover.under { border-radius: 0; }
.cf .cf-mark { display: block; height: 32px; width: auto; max-width: 180px; margin: 0 0 20px; object-fit: contain; }
/* No logo uploaded: the brand name stands in for it. */
.cf .cf-word { font: 700 18px/1.2 var(--f-head, Poppins), var(--f-body, Inter), sans-serif; color: #182A28; height: auto; }
.cf .cf-body.center .cf-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cf .cf-ico { position: relative; display: block; }
.cf .cf-ico svg { position: absolute; top: 50%; left: var(--in-px, 14px); margin-top: -9px; width: 18px; height: 18px; color: #566764; pointer-events: none; }
.cf .cf-ico .fm-in { padding-left: calc(var(--in-px, 14px) + 30px); }
/* The compact card (centred title): a signup box, larger type, one column. */
.cf .fm-card.compact { max-width: var(--card-w, 600px); margin: 0 auto; }
.cf .fm-card.compact .cf-body { padding: var(--card-pad, 48px 48px 44px); gap: var(--card-gap, 28px); }
.cf .fm-card.compact .fm-title { font-size: var(--title-fs, 32px); line-height: 1.25; }
.cf .fm-card.compact .fm-desc { margin-top: 12px; max-width: 460px; font-size: var(--desc-fs, 15px); line-height: 1.6; }
.cf .fm-card.compact .fm-lab { font: var(--lab-fw, 500) var(--lab-fs, 15px)/1.4 var(--f-head, Poppins), var(--f-body, Inter), sans-serif; }
.cf .fm-card.compact .fm-in { height: var(--in-h, 52px); font-size: var(--in-fs, 15px); }
.cf .fm-card.compact .fm-opt { font-size: var(--opt-fs, 14px); }
.cf .fm-card.compact .cf-nav .fm-sub { min-height: var(--btn-h, 52px); font: var(--btn-fw, 600) var(--btn-fs, 16px) var(--f-head, Poppins), var(--f-body, Inter), sans-serif; }

/* Pages: progress above the questions. */
.cf .cf-pager { display: flex; flex-direction: column; gap: 6px; }
.cf .cf-pager-t { font: 400 11px var(--f-head, Poppins), var(--f-body, Inter), sans-serif; font-variant-numeric: tabular-nums; color: #566764; }
.cf .cf-pager-track { display: block; height: 6px; border-radius: 999px; background: #E2E8E7; overflow: hidden; }
.cf .cf-pager-bar { display: block; height: 100%; border-radius: 999px; background: var(--cf-btn, #1E6F67); transition: width 280ms cubic-bezier(.65,0,.35,1); }

/* Sections: 1–4 columns; tablets show at most 2, phones 1. */
.cf .fm-row { position: relative; border-radius: 12px; }
.cf .cf-sec { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); row-gap: var(--q-gap, 18px); border-radius: 13px; }
.cf .fm-col { position: relative; display: flex; flex-direction: column; gap: var(--q-gap, 18px); min-width: 0; border-radius: 13px; }
.cf .fm-f { position: relative; box-sizing: border-box; padding: 4px; border-radius: 8px; }
/* Spacing set in the builder (field, section, submit button): --{f|r|b}{t|r|b|l}, with -t (tablet) and -m (phone)
   overrides. Each part resolves them into --st/--sr/--sb/--sl; the field's 4px selection inset stays outside it. */
.cf .fm-f { --st: var(--ft, 0px); --sr: var(--fr, 0px); --sb: var(--fb, 0px); --sl: var(--fl, 0px); margin: calc(var(--st) - 4px) calc(var(--sr) - 4px) calc(var(--sb) - 4px) calc(var(--sl) - 4px); width: calc(var(--fw, 100%) + 8px - var(--sl) - var(--sr)); max-width: calc(100% + 8px - var(--sl) - var(--sr)); }
.cf .cf-sec { --st: var(--rt, 0px); --sr: var(--rr, 0px); --sb: var(--rb, 0px); --sl: var(--rl, 0px); padding: var(--st) var(--sr) var(--sb) var(--sl); }
.cf .cf-nav { --st: var(--bt, 0px); --sr: var(--br, 22px); --sb: var(--bb, 0px); --sl: var(--bl, 22px); }
.cf .cf-q { display: flex; flex-direction: column; gap: var(--lab-gap, 8px); }
.cf .cf-q.left { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: start; }
.cf .cf-q.left > .cf-labs { padding-top: 12px; }
.cf .cf-labs { display: flex; flex-direction: column; gap: 2px; }
.cf .cf-ctl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cf .fm-lab { display: block; font: var(--lab-fw, 500) var(--lab-fs, 13px)/var(--lab-lh, 1.45) var(--f-body, Inter), sans-serif; color: var(--lab-c, var(--c-text, #182A28)); }
.cf .fm-star { color: var(--star-c, #B91C1C); font-weight: 600; }
.cf .fm-help { font-weight: var(--help-fw, 400); font-size: var(--help-fs, 12px); line-height: var(--help-lh, 1.5); color: var(--help-c, #566764); }

/* Fields. */
.cf .fm-in { box-sizing: border-box; width: 100%; height: var(--in-h, 44px); margin: 0; padding: 0 var(--in-px, 14px); border: var(--in-bw, 1px) solid var(--in-bc, #D9E1DF); border-radius: var(--in-r, 5px); background: var(--in-bg, #fff); font: 400 var(--in-fs, 13px)/var(--in-lh, normal) var(--f-body, Inter), sans-serif; color: var(--in-c, #182A28); outline: 0; transition: border-color 200ms cubic-bezier(.65,0,.35,1), box-shadow 200ms cubic-bezier(.65,0,.35,1); }
.cf .fm-in::placeholder { color: var(--in-ph, #7A8B88); }
.cf .fm-in:focus { border-color: var(--in-focus, #1E6F67); box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-focus, #1E6F67) 12%, #fff); }
.cf .fm-in.bad { border-color: var(--err-c, #B91C1C); }
.cf .fm-in.bad:focus { box-shadow: 0 0 0 3px #FDE2E2; }
/* Field shape (Box, Rounded, Round) comes in as --in-r / --in-px / --ta-r from the form and from each field. */
.cf textarea.fm-in { height: auto; min-height: 96px; padding: 10px 14px; border-radius: var(--ta-r, 5px); line-height: 1.5; resize: vertical; }
.cf select.fm-in { cursor: pointer; }
.cf .sel { position: relative; display: block; min-width: 0; }
.cf .sel select { appearance: none; -webkit-appearance: none; padding-right: 40px !important; width: 100%; cursor: pointer; }
.cf .sel .sel-ch { position: absolute; top: 50%; right: var(--in-px, 14px); margin-top: -8px; pointer-events: none; color: #566764; }
.cf .fm-err { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 12px; line-height: 1.4; color: var(--err-c, #B91C1C); }
.cf .fm-err svg { flex: none; }
.cf .cf-formerr { font-size: 13px; }

/* Choices, consent and scale. */
/* Choices flow into as many columns as fit, each as wide as the longest option (--opt-w), so every box lines up. */
.cf .cf-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--opt-w, 100%)), 1fr)); column-gap: 16px; row-gap: var(--opt-rows, 2px); }
.cf .fm-opt { display: flex; align-items: center; gap: var(--opt-gap, 10px); min-height: var(--opt-h, 32px); font-size: var(--opt-fs, 13px); font-weight: var(--opt-fw, 400); line-height: var(--opt-lh, 1.5); color: var(--opt-c, var(--c-text, #182A28)); cursor: pointer; }
.cf .fm-opt input { width: var(--opt-box, 18px); height: var(--opt-box, 18px); margin: 0; accent-color: var(--cf-btn, #1E6F67); flex: none; cursor: pointer; }
/* Checkbox token, as the app's (app.css): 18 px, the small-mark radius, field border, the form's button colour with a
   white tick. The fallbacks are for the public page, which loads only this file. */
.cf .fm-opt input[type=checkbox] { -webkit-appearance: none; appearance: none; box-sizing: border-box; border: 1.5px solid var(--field, #D9E1DF); border-radius: var(--r-field, 5px); background: #fff center / 12px 12px no-repeat; transition: background-color 200ms cubic-bezier(.65,0,.35,1), border-color 200ms cubic-bezier(.65,0,.35,1); }
.cf .fm-opt input[type=checkbox]:hover { border-color: var(--cf-btn, #1E6F67); }
.cf .fm-opt input[type=checkbox]:checked { border-color: var(--cf-btn, #1E6F67); background-color: var(--cf-btn, #1E6F67); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.cf .fm-opt input[type=checkbox]:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--selected, #E6F3F1); }
.cf .fm-opt input[type=checkbox]:disabled { opacity: .45; cursor: default; }
.cf .fm-opt.top { align-items: flex-start; }
.cf .fm-opt.top input { margin-top: 1px; }
.cf .cf-other { grid-column: 1 / -1; margin: 2px 0 6px 28px; width: calc(100% - 28px); }
.cf .cf-scale { display: flex; flex-direction: column; gap: 6px; }
.cf .cf-scale-row { display: flex; gap: 6px; flex-wrap: wrap; }
.cf .cf-scale-ends { display: flex; justify-content: space-between; gap: 10px; }
.cf .fm-sc { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #D9E1DF; border-radius: 50%; background: #fff; color: #182A28; cursor: pointer; font: 500 13px var(--f-body, Inter), sans-serif; transition: background 200ms cubic-bezier(.65,0,.35,1), border-color 200ms cubic-bezier(.65,0,.35,1), color 200ms cubic-bezier(.65,0,.35,1); }
.cf .fm-sc:hover { border-color: #1E6F67; color: #1E6F67; }
.cf .fm-sc input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cf .fm-sc:has(input:checked), .cf .fm-sc[aria-pressed="true"] { background: #1E6F67; border-color: #1E6F67; color: #fff; }
.cf .fm-sc:has(input:focus-visible) { outline: 2px solid #1E6F67; outline-offset: 2px; }
.cf .cf-consent { display: flex; flex-direction: column; gap: 2px; }
.cf .cf-consent .fm-help, .cf .cf-consent .fm-err { padding-left: 28px; }
.cf .cf-consent a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* Address: two parts a row, one on phones. */
.cf .cf-addr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cf .cf-part { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cf .cf-part.wide { grid-column: 1 / -1; }
.cf .cf-part > .fm-help { color: #3D4F4C; }

/* Headings and dividers. */
.cf .cf-h { margin: 0; font-family: var(--f-head, Poppins), var(--f-body, Inter), sans-serif; font-weight: 600; font-size: 20px; line-height: 1.35; color: var(--c-text, #182A28); }
.cf .cf-h.small { font-size: 15px; }
.cf .cf-hr { border: 0; border-top: var(--c-lth, 1px) solid #E2E8E7; margin: 8px 0; }

/* Buttons. */
.cf .cf-nav { margin-top: var(--nav-gap, 0px); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cf .cf-grow { flex: 1; }
.cf .fm-sub { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--cf-btn, #1E6F67); color: var(--cf-btn-fg, #fff); font: var(--btn-fw, 600) var(--btn-fs, 13px)/var(--btn-lh, normal) var(--f-body, Inter), sans-serif; letter-spacing: var(--btn-track, normal); cursor: pointer; text-decoration: none; transition: filter 200ms cubic-bezier(.65,0,.35,1), background 200ms cubic-bezier(.65,0,.35,1); }
.cf .fm-sub:hover { filter: brightness(.9); }
.cf .fm-sub[disabled] { opacity: .6; cursor: default; }
/* The submit row as set in the builder: alignment, full width, corner radius and spacing. */
.cf .cf-nav .fm-sub { height: auto; min-height: var(--btn-h, 44px); padding: var(--st) var(--sr) var(--sb) var(--sl); border-radius: var(--b-rad, 999px); }
.cf .cf-nav.al-left .cf-grow, .cf .cf-nav.al-center .cf-grow, .cf .cf-nav.full .cf-grow { display: none; }
.cf .cf-nav.al-center { justify-content: center; }
.cf .cf-nav.full [data-cf-submit], .cf .cf-nav.full [data-cf-next] { flex: 1 1 auto; }
.cf .fm-sub.ghost { background: #fff; border: 1px solid #D9E1DF; color: #182A28; font-weight: 400; }
.cf .fm-sub.ghost:hover { filter: none; background: #E6F3F1; color: #1E6F67; border-color: #B9DCD7; }
.cf .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Notes, closed and done. */
/* Same notice tokens as the app (app.css :root); the fallbacks are for the public page, which loads only this file. */
.cf .cf-note { display: flex; align-items: center; box-sizing: border-box; margin: 0; min-height: var(--note-min-h, 64px); padding: var(--note-pad, 14px 20px); border-radius: var(--r-tile, 12px); background: var(--warn-bg, #FDF1DC); color: var(--warn-fg, #B45309); font-size: var(--fs-body, 13px); line-height: 1.5; }
.cf .cf-closed { margin: 0; font-size: 13px; line-height: 1.55; color: #3D4F4C; }
/* Thank-you screen: one centred block in the card (or left-aligned), in the form's own type scale. */
.cf .cf-thanks { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0 4px; text-align: center; animation: cfPop 280ms cubic-bezier(.65,0,.35,1) both; }
.cf .cf-thanks.left { align-items: flex-start; text-align: left; }
.cf .cf-thanks-ctx { font-size: 12px; color: #566764; }
.cf .cf-thanks-ic { width: 56px; height: 56px; border-radius: 50%; background: #E6F3F1; color: #1E6F67; display: grid; place-items: center; }
.cf .cf-thanks .fm-desc { margin: 0; max-width: 480px; }
.cf .cf-next { display: flex; flex-direction: column; gap: 6px; max-width: 480px; padding: 14px 20px; border-radius: 12px; background: #F5F7F7; text-align: left; }
.cf .cf-next-h { font-size: 12px; font-weight: 500; color: #566764; }
.cf .cf-next ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.5; color: #182A28; }
.cf .cf-thanks-btn { text-decoration: none; }
.cf .cf-again { border: 0; padding: 0; background: none; font: 400 12px var(--f-body, Inter), sans-serif; color: #1E6F67; text-decoration: underline; cursor: pointer; }
.cf .cf-again:hover { color: #17564F; }
@keyframes cfPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@container (max-width: 640px) {
  .cf .fm-f { --st: var(--ft-t, var(--ft, 0px)); --sr: var(--fr-t, var(--fr, 0px)); --sb: var(--fb-t, var(--fb, 0px)); --sl: var(--fl-t, var(--fl, 0px)); }
  .cf .cf-sec { --st: var(--rt-t, var(--rt, 0px)); --sr: var(--rr-t, var(--rr, 0px)); --sb: var(--rb-t, var(--rb, 0px)); --sl: var(--rl-t, var(--rl, 0px)); }
  .cf .cf-nav { --st: var(--bt-t, var(--bt, 0px)); --sr: var(--br-t, var(--br, 22px)); --sb: var(--bb-t, var(--bb, 0px)); --sl: var(--bl-t, var(--bl, 22px)); }
  .cf .cf-sec.cols-3, .cf .cf-sec.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 440px) {
  .cf.btn-phone-full .cf-nav .fm-sub { flex: 1 1 auto; width: 100%; }
  .cf .fm-f { --st: var(--ft-m, var(--ft-t, var(--ft, 0px))); --sr: var(--fr-m, var(--fr-t, var(--fr, 0px))); --sb: var(--fb-m, var(--fb-t, var(--fb, 0px))); --sl: var(--fl-m, var(--fl-t, var(--fl, 0px))); }
  .cf .cf-sec { --st: var(--rt-m, var(--rt-t, var(--rt, 0px))); --sr: var(--rr-m, var(--rr-t, var(--rr, 0px))); --sb: var(--rb-m, var(--rb-t, var(--rb, 0px))); --sl: var(--rl-m, var(--rl-t, var(--rl, 0px))); }
  .cf .cf-nav { --st: var(--bt-m, var(--bt-t, var(--bt, 0px))); --sr: var(--br-m, var(--br-t, var(--br, 22px))); --sb: var(--bb-m, var(--bb-t, var(--bb, 0px))); --sl: var(--bl-m, var(--bl-t, var(--bl, 22px))); }
  .cf .cf-sec { grid-template-columns: minmax(0, 1fr) !important; }
  /* A header built from pieces stays one line on a phone: logo left, link right, centred on each other. */
  .cf .cf-sec.cf-hrow.cf-hrow { grid-template-columns: repeat(var(--cols, 1), auto) !important; justify-content: space-between; align-items: center; }
  .cf .cf-q.left { display: flex; flex-direction: column; gap: 8px; }
  .cf .cf-q.left > .cf-labs { padding-top: 0; }
  .cf .cf-addr { grid-template-columns: minmax(0, 1fr); }
  .cf .cf-body { padding: var(--card-padm, min(var(--card-pad, 20px), 24px)); }
  .cf .fm-card.compact .cf-body { padding: 32px 20px 28px; }
  .cf .fm-card.compact .fm-title { font-size: min(var(--title-fs, 26px), 30px); }
  .cf .cf-hdr { padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) { .cf *, .cf *::before, .cf *::after { animation: none !important; transition: none !important; } }

/* Pieces that ask nothing: a picture and a text link, each placed left, centre or right in its column. */
.cf .cf-piece { display: flex; align-items: center; min-height: 20px; }
.cf .cf-piece.al-center { justify-content: center; text-align: center; }
.cf .cf-piece.al-right { justify-content: flex-end; text-align: right; }
.cf .cf-piece > a { display: inline-flex; }
.cf .cf-img { display: block; width: auto; max-width: 100%; object-fit: contain; }
.cf .cf-link { font-size: 13px; line-height: 1.5; text-decoration: none; }
.cf a.cf-link:hover, .cf a.cf-link:focus-visible { text-decoration: underline; }
/* A header built from pieces: the first section, across the top of the card. Its columns stay side by side on every
   screen, as the brand header's logo and link do. */
.cf .cf-sec.cf-hrow.cf-hrow { grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); align-items: center; row-gap: 8px; border-radius: var(--card-r, 13px) var(--card-r, 13px) 0 0; }
/* Content width: the container keeps its own width (or runs edge to edge), and what is inside stays centred and no
   wider than this. The header's pieces line up with the questions below them. */
.cf .fm-card.capped > .cf-body > * { align-self: center; width: 100%; max-width: var(--content-w); box-sizing: border-box; }
.cf .fm-card.capped .cf-sec.cf-hrow { padding-left: max(var(--sl), calc((100% - var(--content-w)) / 2)); padding-right: max(var(--sr), calc((100% - var(--content-w)) / 2)); }
/* A full-width container touches both edges of the page, so it has no corners to round. */
.cf .fm-card.full, .cf .fm-card.full .cf-sec.cf-hrow.cf-hrow, .cf .fm-card.full > .cf-hdr, .cf .fm-card.full > .cf-cover { border-radius: 0; }


/* ---- the look's on-or-off choices (Form settings, Style) ---- */
.cf.help-below .cf-q:not(.left) > .cf-labs { display: contents; }
.cf.help-below .cf-q:not(.left) .fm-lab { order: 1; }
.cf.help-below .cf-q:not(.left) > .cf-ctl { order: 2; }
.cf.help-below .cf-q:not(.left) .cf-labs > .fm-help { order: 3; }
.cf.opts-stack .cf-opts { grid-template-columns: minmax(0, 1fr); }
.cf.btn-upper .cf-nav .fm-sub { text-transform: uppercase; }
.cf.no-title .cf-intro { display: none; }
.cf.star-plain .fm-star { color: inherit; font-weight: inherit; }
.cf.in-outline .fm-in:focus { box-shadow: none; outline: 2px solid var(--in-focus, #1E6F67); outline-offset: 0; }
.cf.btn-still .cf-nav .fm-sub:hover { filter: none; }
.cf .fm-f.cf-hide { display: none; }

/* ---- page pieces: words, a button, a space ---- */
.cf .cf-text { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.cf .cf-al-center { text-align: center; }
.cf .cf-al-right { text-align: right; }
.cf .cf-words.cf-al-center .fm-desc, .cf .cf-words.cf-al-right .fm-desc { max-width: none; }
.cf .cf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--p-h, 44px); padding: 0 var(--p-px, 22px); border-radius: var(--p-r, 999px); background: var(--p-bg, var(--cf-btn, #1E6F67)); color: var(--p-fg, var(--cf-btn-fg, #fff)); font: 600 13px var(--f-body, Inter), sans-serif; text-decoration: none; white-space: nowrap; transition: filter 280ms cubic-bezier(.2,.7,.2,1), background-color 280ms cubic-bezier(.2,.7,.2,1), color 280ms cubic-bezier(.2,.7,.2,1); }
.cf a.cf-btn:hover { filter: var(--p-hf, brightness(.9)); background: var(--p-hbg, var(--p-bg, var(--cf-btn, #1E6F67))); color: var(--p-hfg, var(--p-fg, var(--cf-btn-fg, #fff))); }
.cf a.cf-btn[style*="--p-hbg"]:hover { filter: none; }
.cf .cf-btn.full { display: flex; width: 100%; }
.cf .cf-space { width: 100%; }

/* ---- page sections: across the page, outside the card; their pieces in a centred band ---- */
.cf .cf-zone { container-type: inline-size; overflow: hidden; overflow: clip; background-size: cover; background-position: center; color: var(--z-c, inherit); }
.cf .cf-zone > .cf-sec { row-gap: var(--z-rg, var(--q-gap, 18px)); }
.cf .cf-zone > .cf-sec > .fm-col { gap: var(--z-gap, var(--q-gap, 18px)); }
.cf .cf-hr[style*="--c-ln"], .cf .cf-hr[style*="--c-lo"] { border-top-color: color-mix(in srgb, var(--c-ln, #E2E8E7) var(--c-lo, 100%), transparent); }
.cf .cf-zone .cf-hr { border-top-color: color-mix(in srgb, var(--c-ln, var(--z-c, var(--c-text, #182A28))) var(--c-lo, 20%), transparent); margin: 0; }
/* A section's own text colour reaches its words, never the form card placed inside it. */
.cf .cf-zone .cf-h, .cf .cf-zone .cf-text, .cf .cf-zone .fm-desc, .cf .cf-zone .cf-list, .cf .cf-zone .cf-count, .cf .cf-zone .cf-facts { color: var(--z-c, var(--c-text, #182A28)); }
.cf .cf-zone .fm-card { --z-c: initial; color: var(--c-text, #182A28); }
/* Placed in a column, the form is as wide as its column. */
.cf .cf-zone .fm-f > .fm-card, .cf .cf-zone .fm-f > .fm-card.sized, .cf .cf-zone .fm-f > .fm-card.compact { max-width: none; margin: 0; }
.cf .cf-img.fill { width: 100%; height: auto; }
.cf .cf-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--l-gap, 8px); font-size: 14px; line-height: 1.5; }
.cf .cf-list li { display: flex; gap: var(--l-ign, 8px); align-items: flex-start; }
.cf .cf-list svg { flex: none; margin-top: var(--l-top, 3px); width: var(--l-sz, 20px); height: var(--l-sz, 20px); stroke-width: var(--l-st, 1.6); color: var(--p-ic, currentColor); }
.cf .cf-list.cf-al-center li { justify-content: center; }
.cf .cf-count { display: flex; gap: var(--c-gap, 24px); font-size: 32px; }
.cf .cf-count.spread { width: 100%; justify-content: space-between; }
.cf .cf-count.line { padding-top: var(--c-lpt, 24px); border-top: var(--c-lth, 1px) solid color-mix(in srgb, var(--c-ln, currentColor) var(--c-lo, 20%), transparent); }
.cf .cf-count > div { display: grid; justify-items: center; gap: var(--c-lgap, 0px); min-width: var(--c-uw, 64px); }
.cf .cf-count b { min-width: 1.2em; text-align: center; font-family: inherit; font-weight: inherit; font-size: 1em; line-height: var(--c-nlh, 1); font-variant-numeric: tabular-nums; }
.cf .cf-count span { font: var(--c-lfw, 500) var(--c-lfs, 14px)/var(--c-llh, 1.5) var(--c-lfont, var(--f-body, Inter)), sans-serif; letter-spacing: 0; text-transform: none; color: var(--p-lc, inherit); }
/* Facts: a small label over each value, side by side. */
.cf .cf-facts { display: flex; flex-wrap: wrap; gap: var(--c-gapr, 8px) var(--c-gap, 40px); font-size: 24px; line-height: 1.25; }
.cf .cf-facts.cf-al-center { justify-content: center; }
.cf .cf-facts.cf-al-right { justify-content: flex-end; }
.cf .cf-facts > div { display: grid; gap: var(--c-lgap, 0px); }
.cf .cf-facts.cf-al-center > div { justify-items: center; }
.cf .cf-facts span { font: var(--c-lfw, 500) var(--c-lfs, 14px)/var(--c-llh, 1.5) var(--c-lfont, var(--f-body, Inter)), sans-serif; letter-spacing: 0; text-transform: none; color: var(--p-lc, inherit); }
.cf .cf-facts b { font-family: inherit; font-weight: inherit; font-size: 1em; line-height: inherit; }
/* A centred piece narrower than its column sits in the middle of it. */
.cf .fm-f.self-c { margin-left: auto; margin-right: auto; width: min(100%, calc(var(--fw, 100%) + 8px)); }
/* The ornament behind the form: fine lines centred on it, fading towards their edge. */
.cf .fm-f.cf-orn > .fm-card { position: relative; z-index: 1; }
.cf .fm-f.cf-orn::before { content: ""; position: absolute; z-index: 0; --d: clamp(var(--or-min, 760px), calc(var(--or-p, 90) * 1cqi), var(--or-max, 1140px)); width: var(--d); height: var(--d); left: calc(50% - var(--d) / 2); top: calc(50% - var(--d) / 2); pointer-events: none; background: var(--orn-img) center / contain no-repeat;
  -webkit-mask-image: radial-gradient(circle closest-side at center, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .62) 22%, rgba(0, 0, 0, .8) 42%, rgba(0, 0, 0, .35) 72%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at center, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .62) 22%, rgba(0, 0, 0, .8) 42%, rgba(0, 0, 0, .35) 72%, transparent 100%); }
/* The card's offset outline: a hairline set a little down and to the left, its top edge fading in. */
.cf.card-outline .fm-card { position: relative; --o: var(--card-oo, 8px); }
.cf.card-outline .fm-card::after { content: ""; position: absolute; top: var(--o); bottom: calc(var(--o) * -1); left: calc(var(--o) * -1); right: var(--o); z-index: 2; border: var(--card-ow, 1.5px) solid var(--card-oc, var(--c-text, #182A28)); border-radius: var(--card-r, 13px); pointer-events: none; -webkit-mask-image: conic-gradient(from 315deg, transparent 0, #000 22%, #000 95%, transparent 100%); mask-image: conic-gradient(from 315deg, transparent 0, #000 22%, #000 95%, transparent 100%); }
.cf .cf-zone > .cf-sec { max-width: var(--zone-w, var(--content-w, 1140px)); margin-inline: auto; border-radius: 0; box-sizing: border-box; }
.cf.paged > .fm-card { max-width: min(var(--card-w, 720px), calc(100% - 32px)); margin: var(--card-my, 40px) auto; }
.cf.paged > .fm-card.compact { max-width: min(var(--card-w, 600px), calc(100% - 32px)); margin: var(--card-my, 40px) auto; }
.cf.paged > .fm-card.full { max-width: none; margin: 0; }

/* ---- page pieces on smaller screens: last in the file, so they follow the rules above ---- */
@container (max-width: 900px) {
  .cf .cf-zone > .cf-sec.st-900 { grid-template-columns: minmax(0, 1fr) !important; }
  .cf .fm-f.cf-orn::before { --d: calc(var(--or-pt, 120) * 1cqi); }
  .cf.card-outline .fm-card { --o: var(--card-oot, 6px); }
}
@container (max-width: 600px) {
  .cf .cf-zone [style*="--fsp"] { font-size: var(--fsp) !important; }
  .cf .cf-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--c-gapm, 16px); }
  .cf .cf-count { gap: var(--c-gapm, 16px); }
  .cf .cf-count.spread:not(.spread-m) { width: fit-content; }
  .cf .cf-count > div { min-width: var(--c-uwm, 56px); }
  .cf.card-outline .fm-card { --o: var(--card-oom, 5px); }
}
@container (max-width: 440px) {
  .cf .fm-in { font-size: var(--in-fsm, var(--in-fs, 13px)); }
  .cf .fm-opt { font-size: var(--opt-fsm, var(--opt-fs, 13px)); }
}
.cf.card-outline.card-osolid .fm-card::after { -webkit-mask-image: none; mask-image: none; }