/* Encore vs Typeform and the /compare hub (SEO slice 1, 5 Nov 2026; redesigned the same day after Josh's review: the
   table was a wall of text). The hero's kicker and window, then everything compare.mjs renders from the competitor data. */

.c-kick { font-family: var(--sans); font-size: 16px; letter-spacing: .02em; color: rgba(246, 243, 238, .82); margin-bottom: 18px; }
.c-hero .x-h1 { max-width: 12em; }
.c-hero-vis { margin-top: max(44px, calc(var(--vw) * 4)); }
.c-hero-vis .x-vis { width: min(100%, 1120px); margin-inline: auto; }

.c-more { margin-top: 20px; font-size: 17px; }

.v9e-field--cream { background: radial-gradient(in oklab 130% 100% at 50% 0%, #EFE8DE 0%, #F3EEE6 40%, #F8F5F0 100%); }


.c-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.c-crumb { font-size: 16px; color: rgba(246, 243, 238, .82); margin-bottom: 18px; }
.c-crumb a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(246, 243, 238, .4); }
.c-crumb span[aria-hidden] { margin: 0 8px; }
.c-wrap { width: min(100%, 1180px); margin-inline: auto; }
.c-head { text-align: center; max-width: 820px; margin: 0 auto max(36px, calc(var(--vw) * 3)); }
.c-head .x-p { margin-inline: auto; text-wrap: balance; }
.c-sec { padding: max(88px, calc(var(--vw) * 7)) max(16px, calc(var(--vw) * 1.4)); }

/* ---------- the table ---------- */
.ct { width: min(100%, 1180px); margin-inline: auto; background: #FFFFFF; border: 1px solid rgba(58, 30, 60, .12); border-radius: max(22px, calc(var(--vw) * 1.7)); padding: max(14px, calc(var(--vw) * 1.1)); color: var(--plum); }
.ct-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.ct-table thead td.ct-corner { width: 36%; }
.ct-table thead th { font-family: var(--serif); font-weight: 400; font-size: max(26px, min(calc(var(--vw) * 2.1), 34px)); letter-spacing: -.014em; padding: 26px 20px 20px; text-align: center; }
.ct-table td, .ct-table tbody th { padding: 16px 20px; vertical-align: middle; }
.ct-table tbody th { text-align: left; }
.ct-l { display: block; font-size: 18px; font-weight: 500; line-height: 1.35; }
.ct-table tbody th { font-weight: 400; }
.ct-h { display: block; font-weight: 400; margin-top: 3px; font-size: 15px; line-height: 1.4; color: #6E5A70; }
.ct-table td { text-align: center; }
.ct-v { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; font-size: 19px; font-weight: 500; line-height: 1.3; color: var(--plum); }
.ct-s { display: block; margin-top: 4px; font-size: 15px; line-height: 1.4; color: #6E5A70; }
.ct-mark { width: 20px; height: 20px; flex: none; }
.ct-mark circle { fill: var(--plum); }
.ct-mark path { stroke: #FFFFFF; }
.ct-gh th, .ct-gh td { padding-top: 30px; padding-bottom: 8px; }
.ct-gh th { font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #6E5A70; }
.ct-gh td { font-size: 0; }
.ct-group + .ct-group .ct-gh > * { border-top: 1px solid rgba(58, 30, 60, .1); }
.ct-group:first-of-type .ct-gh th, .ct-group:first-of-type .ct-gh td { padding-top: 10px; }

/* panel: Encore's column is one tinted panel, top to bottom */
.ct--panel .ct-us { background: #F2EFFC; }
.ct--panel thead .ct-us { border-radius: 18px 18px 0 0; color: var(--plum); }
.ct--panel .ct-group:last-of-type tr:last-child .ct-us { border-radius: 0 0 18px 18px; }
.ct--panel .ct-them .ct-v { font-weight: 400; }

@media (max-width: 760px) {
  .ct { padding: 6px; }
  .ct-table, .ct-table tbody, .ct-table tr, .ct-table th, .ct-table td { display: block; }
  .ct-table thead { display: none; }
  .ct-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ct-table tbody th { grid-column: 1 / -1; padding: 18px 12px 8px; }
  .ct-table td { padding: 10px 12px 12px; text-align: left; }
  .ct-gh th { padding: 20px 12px 4px; }
  .ct-gh td { font-size: 15px; font-weight: 500; color: var(--plum); padding: 10px 12px 2px; letter-spacing: 0; text-transform: none; }
  .ct-group + .ct-group .ct-gh > * { border-top: 0; }
  .ct-group + .ct-group .ct-gh { border-top: 1px solid rgba(58, 30, 60, .1); margin-top: 8px; }
  .ct-v { font-size: 17px; }
  .ct-l { font-size: 17px; }
  .ct-h, .ct-s { font-size: 14px; }
  .ct--panel .ct-us { border-radius: 12px; }
  .ct--panel .ct-gh .ct-us { background: none; }
  .ct--panel .ct-group:last-of-type tr:last-child .ct-us { border-radius: 12px; }
  .ct-foot { padding: 18px 12px 6px; }
}

/* the table's footer: the date, Typeform's note as a callout, and the sources behind a disclosure */
.ct-foot { padding: 20px 20px 6px; margin-top: 12px; border-top: 1px solid rgba(58, 30, 60, .1); display: grid; gap: 14px; }
.ct-foot .c-checked { margin: 0; width: auto; text-align: left; font-size: 15px; color: #5E4A60; }
.ct-callout { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: #F6F4FA; font-size: 15px; line-height: 1.5; color: #5E4A60; }
.ct-info { width: 20px; height: 20px; margin-top: 1px; }
.ct-info circle { fill: none; stroke: #5B478B; stroke-width: 1.5; }
.ct-info path { stroke: #5B478B; stroke-width: 1.8; }
/* the founding offer: one designed card */
.c-found { display: block; border-radius: max(22px, calc(var(--vw) * 1.8)); padding: max(24px, calc(var(--vw) * 2.4)); }
.c-found .z-seats, .c-found .z-seats b { color: inherit; }
.c-found--light { background: #FFFFFF; border: 1px solid rgba(58, 30, 60, .12); color: var(--plum); }
.c-found--dark { background: #F6F3EE; color: var(--plum); }
.c-found-k { font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #5B478B; }
.c-found-p { margin-top: 12px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.c-found-p .amt { font-family: var(--serif); font-size: max(64px, calc(var(--vw) * 5.4)); line-height: .9; letter-spacing: -.035em; }
.c-found-u { font-size: 18px; color: #5E4A60; }
.c-found-seats { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #EDE9F6; font-size: 16px; }
.c-found-seats b { font-weight: 500; }
.c-found-promise { margin-top: 14px; font-size: 17px; line-height: 1.45; }
.c-found-steps { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(58, 30, 60, .1); font-size: 15px; color: #5E4A60; }

/* ---------- the hub ---------- */
.hc-grid { list-style: none; margin: 0 auto; padding: 0; width: min(100%, 1180px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.hc-a { display: flex; flex-direction: column; height: 100%; padding: 28px; border-radius: 22px; background: #FFFFFF; border: 1px solid rgba(58, 30, 60, .12); color: var(--plum); text-decoration: none; transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out); }
.hc-a:hover { border-color: rgba(58, 30, 60, .3); background: #FDFCFF; }
.hc-a:focus-visible { outline: 2px solid #8F83D6; outline-offset: 3px; }
.hc-n { font-family: var(--serif); font-size: 32px; letter-spacing: -.016em; line-height: 1.1; }
.hc-verdict { margin-top: 10px; font-size: 17px; line-height: 1.5; color: #5E4A60; }
.hc-facts { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(58, 30, 60, .1); display: grid; gap: 14px; }
.hc-facts li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 16px; }
.hc-l { grid-column: 1 / -1; font-size: 14px; color: #6E5A70; }
.hc-v { font-size: 14px; color: #6E5A70; display: grid; }
.hc-v b { font-size: 17px; font-weight: 500; color: var(--plum); }
.hc-more { margin-top: auto; padding-top: 22px; font-size: 16px; font-weight: 500; }

@media (max-width: 480px) {
  .c-found-p .amt { font-size: 48px; }
}

@media (max-width: 760px) {
  .ct-v { justify-content: flex-start; }
  .ct-mark { width: 17px; height: 17px; }
}

/* the hub */
.c-hub-hero { padding-bottom: max(72px, calc(var(--vw) * 6)); }
.c-hub { padding-top: max(56px, calc(var(--vw) * 4.4)); }
.c-hub .hc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }

/* hero: one action, one way down to the table */
.c-hero-acts { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; }
.c-hero-link { font-size: 17px; color: var(--cream); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(246, 243, 238, .45); }
.c-hero-link:hover { text-decoration-color: var(--cream); }

/* ---------- the table's sources (Josh, 5 Nov 2026: "needs to be better designed"): one calm line per page ---------- */
.cs { margin-top: 6px; padding: 22px 0 4px; border-top: 1px solid rgba(58, 30, 60, .1); }
.cs-h { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; color: var(--plum); }
.cs-lede { margin-top: 6px; font-size: 16px; line-height: 1.5; color: #5E4A60; max-width: 60ch; }
.cs-list { list-style: none; margin: 18px 0 0; padding: 0; }
.cs-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2.4fr) minmax(0, 1.6fr); gap: 6px 28px; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(58, 30, 60, .08); }
.cs-row:first-child { border-top: 0; padding-top: 4px; }
.cs-name { font-size: 16px; font-weight: 500; color: var(--plum); }
.cs-for { font-size: 16px; line-height: 1.5; color: #5E4A60; }
.cs-date { color: #6E5A70; }
.cs-link { justify-self: end; font-size: 15px; color: #5B478B; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(91, 71, 139, .35); overflow-wrap: anywhere; text-align: right; }
.cs-link:hover { text-decoration-color: #5B478B; }
.cs-link:focus-visible { outline: 2px solid #8F83D6; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 760px) {
  .cs { padding-top: 18px; }
  .cs-h { font-size: 22px; }
  .cs-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0; }
  .cs-link { justify-self: start; text-align: left; margin-top: 4px; }
}

/* ---------- comparison visuals (the 5 Nov board: 1B, 2A, 3A, 4A, 5A + 5B). Each slice is a centred heading, one line,
   then the visual at a fixed width, so nothing stretches on a wide monitor. Typeform is a neutral stand-in: its name
   as plain text, never its logo. ---------- */
.c-changes, .c-better, .c-why { --cx-tf: #34332F; --cx-tf-mute: #5C5A54; --cx-tf-plane: #F3F3F1; --cx-tf-line: rgba(52, 51, 47, .16); --cx-tf-dash: rgba(52, 51, 47, .32); --cx-tf-wash: linear-gradient(180deg, #E2E2DE 0%, #ECECE9 45%, #F6F6F4 100%); --cx-lav: #F1EEF8; }
.c-slice { width: min(100%, 1040px); margin-inline: auto; container: cx / inline-size; }
.c-slice + .c-slice { margin-top: max(88px, calc(var(--vw) * 7.5)); }
.c-slice-h { text-align: center; font-family: var(--serif); font-weight: 400; font-size: max(34px, min(calc(var(--vw) * 3.1), 46px)); line-height: 1.06; letter-spacing: -.022em; color: var(--plum); text-wrap: balance; }
.c-slice-p { margin: 16px auto 0; max-width: 46em; text-align: center; font-size: 18px; line-height: 1.5; color: #5E4A60; text-wrap: pretty; }
.c-slice > .cx { margin-top: max(36px, calc(var(--vw) * 3)); }
.c-slice > .c-more { margin-top: 26px; text-align: center; }
.c-better .c-head { margin-bottom: max(48px, calc(var(--vw) * 4)); }
.c-better .c-slice-h { margin-bottom: 0; }
.cx { margin-inline: auto; color: var(--plum); }
.cx-nm-e { font-family: var(--serif); font-size: 26px; line-height: 1; letter-spacing: -.01em; color: var(--plum); }
.cx-nm-t { font-family: var(--sans); font-weight: 500; font-size: 19px; line-height: 1; color: var(--cx-tf); }
.cx-ico { width: 24px; height: 24px; flex: none; display: block; }
.cx-tfg { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--cx-tf-dash); position: relative; display: block; }
.cx-tfg::before, .cx-tfg::after { content: ""; position: absolute; left: 5px; right: 5px; height: 1.5px; background: var(--cx-tf-dash); top: 8px; }
.cx-tfg::after { top: 13px; right: 9px; }

/* the site's use-case cards as a pair (pat-card + swm, from the live use-case pages) */
.cx-pair { --cols: 2; --vis-h: 360px; max-width: 900px; margin-top: 0; row-gap: 48px; }
.cx-pair .pat-card { color: var(--plum); }
.cx-pair .pat-card-t { font-size: 32px; text-wrap: balance; }
.cx-pair .pat-card-go { gap: 10px; }
.cx-pair .pat-card-go .cx-nm-e { font-size: 21px; }
.cx-pair .pat-card-go .cx-nm-t { font-size: 17px; }
.cx-pair .pat-card-go em { font-style: normal; font-weight: 400; color: var(--mute); }
.cx-card.is-tf .pat-card-t, .cx-card.is-tf .pat-card-go { color: var(--cx-tf); }
.cx-card.is-tf .pat-card-go em { color: var(--cx-tf-mute); }
.cx-wash-tf { background: var(--cx-tf-wash); }
.cx-swm { width: 100%; max-width: 300px; padding: 18px 18px 16px; background: #FFFFFF; border: 1px solid var(--hair); border-radius: 16px; text-align: left; }
.cx-swm .swm-q { font-size: 15px; color: var(--mute); line-height: 1.35; }
.cx-swm.is-tf { border-color: var(--cx-tf-line); }
.cx-swm.is-tf .swm-q { color: var(--cx-tf-mute); }
.cx-swm .ka-pair { margin: 12px 0 0; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
.cx-swm .ka-pair .ka-card { font-size: 18px; min-height: 48px; padding: 10px 8px; text-align: center; }
.cx-swm .ka-pair .ka-or { display: block; font-size: 15px; }
.cx-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); display: flex; justify-content: center; align-items: center; min-height: 48px; }
.cx-foot.is-end { justify-content: flex-end; border-color: var(--cx-tf-line); }
.cx-tf-q { margin-top: 12px; font-size: 18px; line-height: 1.3; color: var(--cx-tf); }
.cx-tf-line { margin-top: 12px; height: 44px; border-radius: 8px; border: 1px solid var(--cx-tf-line); display: flex; align-items: center; padding: 0 12px; color: var(--cx-tf-mute); font-size: 15px; }
.cx-tf-badge { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--cx-tf); color: #FFFFFF; font-size: 15px; font-weight: 500; white-space: nowrap; }
.cx-tf-badge i { width: 14px; height: 14px; border-radius: 3px; background: rgba(255, 255, 255, .9); }
/* "Made with Encore", crossed out: 16px, 80% plum, a 2px plum strike that draws across when it comes into view */
.cx-made { position: relative; display: inline-block; font-size: 16px; line-height: 1.3; color: rgba(58, 30, 60, .8); }
.cx-made::after { content: ""; position: absolute; left: -5px; right: -5px; top: 52%; height: 2px; border-radius: 2px; background: var(--plum); transform-origin: left center; }
/* The strike is drawn by default (no JS, no IntersectionObserver, reduced motion, a full-page capture). With motion, a
   badge that starts off screen draws its strike in once, as it enters view: the animation starts from nothing, so there
   is no unstruck state before it arrives. */
.motion .cx-made[data-strike="go"]::after { animation: cx-strike .7s var(--ease-out) .25s both; }
@keyframes cx-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* 4A: one picture, the answer you get back */
.cx-pic { margin-top: 12px; position: relative; aspect-ratio: 16 / 11; border-radius: 10px; overflow: clip; }
.cx-pic.is-wide { aspect-ratio: 16 / 8; }
.cx-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-pic.is-picked { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--cx-tf); }
.cx-score { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: baseline; gap: 3px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--plum); color: #FFFFFF; font-family: var(--serif); font-size: 24px; line-height: 40px; }
.cx-score small { font-family: var(--sans); font-size: 14px; color: rgba(255, 255, 255, .86); }
.cx-tick { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; background: var(--cx-tf); display: grid; place-items: center; }
.cx-tick::after { content: ""; width: 13px; height: 7px; border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: translateY(-1px) rotate(-45deg); }
.cx-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.cx-chips span { font-size: 14px; line-height: 1; padding: 9px 11px; border-radius: 999px; background: var(--cx-lav); color: var(--plum); }
.cx-chips span.is-tf { background: var(--cx-tf-plane); color: var(--cx-tf-mute); }
@container cx (max-width: 640px) {
  .cx-pair { --cols: 1; --vis-h: 320px; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  /* the site's phone rule draws .pat-card-vis 220px tall; these cards hold a whole client screen, so they grow to it */
  .cx-pair .pat-card-vis { height: auto; min-height: 260px; padding-block: 28px; }
  .cx-pair .pat-card-t { font-size: 28px; }
}

/* 2A: the free plans, counted */
.cx-ways { max-width: 960px; display: grid; gap: 14px; }
.cx-ways-head { display: grid; grid-template-columns: 150px 1fr; gap: 12px; font-size: 15px; color: #5E4A60; }
.cx-ways-head span:last-child { padding-left: 4px; }
.cx-ways-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.cx-ways-who { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-left: 4px; }
.cx-ways-n { font-family: var(--serif); font-size: 84px; line-height: .9; letter-spacing: -.03em; }
.cx-ways-row.is-t .cx-ways-n { color: var(--cx-tf); }
.cx-ways-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cx-ways-tile { border-radius: 18px; min-height: 132px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; background: var(--cx-lav); }
.cx-ways-tile .cx-ico, .cx-ways-tile .cx-tfg { width: 36px; height: 36px; }
.cx-ways-tile .cx-tfg::before { top: 12px; left: 8px; right: 8px; }
.cx-ways-tile .cx-tfg::after { top: 19px; left: 8px; right: 14px; }
.cx-ways-tile b { font-weight: 500; font-size: 17px; }
.cx-ways-tile.is-has { background: var(--cx-tf-plane); color: var(--cx-tf); }
.cx-ways-tile.is-has small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--cx-tf-mute); }
.cx-ways-tile.is-none { background: transparent; border: 1.5px dashed var(--cx-tf-dash); }
@container cx (max-width: 700px) {
  .cx-ways-head { display: none; }
  .cx-ways-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cx-ways-who { flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 14px; padding: 8px 0 2px; }
  .cx-ways-n { font-size: 60px; }
  .cx-ways-tiles { gap: 8px; }
  .cx-ways-tile { min-height: 96px; padding: 12px; border-radius: 14px; gap: 10px; }
  .cx-ways-tile .cx-ico, .cx-ways-tile .cx-tfg { width: 28px; height: 28px; }
  .cx-ways-tile .cx-tfg::before { top: 9px; left: 6px; right: 6px; }
  .cx-ways-tile .cx-tfg::after { top: 15px; left: 6px; right: 11px; }
  .cx-ways-tile b { font-size: 15px; }
  .cx-ways-tile.is-has small { display: none; }
}
@container cx (max-width: 420px) {
  .cx-ways-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-ways-tile { min-height: 76px; }
}

/* 3A: one link over the Flow studio's stops */
.cx-link { max-width: 1040px; display: grid; gap: 18px; }
.cx-link-row { border-radius: 24px; padding: 24px 28px 26px; }
.cx-link-row.is-e { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .14); }
.cx-link-row.is-t { background: var(--cx-tf-plane); }
.cx-link-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cx-link-url { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--cx-lav); font-size: 15px; color: var(--plum); }
.cx-link-row.is-t .cx-link-url { background: #FFFFFF; color: var(--cx-tf); box-shadow: inset 0 0 0 1px var(--cx-tf-line); }
.cx-link-i { width: 16px; height: 16px; flex: none; }
.cx-span { margin-top: 20px; position: relative; height: 22px; }
.cx-span::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--plum); border-radius: 2px; }
.cx-span::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 14px; border-left: 2px solid var(--plum); border-right: 2px solid var(--plum); }
.cx-span b { position: absolute; left: 50%; top: -7px; transform: translateX(-50%); background: #FFFFFF; padding: 0 14px; font-weight: 500; font-size: 18px; white-space: nowrap; z-index: 1; }
.cx-link-row.is-t .cx-span { width: 20%; min-width: 150px; }
.cx-link-row.is-t .cx-span::before { background: var(--cx-tf); }
.cx-link-row.is-t .cx-span::after { border-color: var(--cx-tf); }
.cx-link-row.is-t .cx-span b { background: var(--cx-tf-plane); color: var(--cx-tf); }
/* the bracket's lines grow from the left; its "1 link" label fades in once they have (the label never scales) */
.cx-span::before, .cx-span::after { transform-origin: left center; }
.motion .cx-span[data-grow="wait"]::before, .motion .cx-span[data-grow="wait"]::after { transform: scaleX(0); }
.motion .cx-span[data-grow="wait"] b { opacity: 0; }
.motion .cx-span[data-grow="go"]::before, .motion .cx-span[data-grow="go"]::after { transform: scaleX(1); transition: transform .9s var(--ease-out); }
.motion .cx-span[data-grow="go"] b { opacity: 1; transition: opacity .45s var(--ease-out) .55s; }
.cx-span-phone { display: none; margin-top: 14px; align-items: center; gap: 10px; font-weight: 500; font-size: 17px; }
.cx-span-phone .cx-link-i { width: 18px; height: 18px; }
.cx-link-row.is-t .cx-span-phone { color: var(--cx-tf); }
.cx-stops { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cx-stop { position: relative; padding-right: 30px; min-width: 0; display: grid; grid-template-rows: auto auto auto; }
.cx-stop:last-child { padding-right: 0; }
.cx-stop-l { display: flex; align-items: flex-start; gap: 10px; color: var(--plum); line-height: 1.3; font-size: 16px; min-width: 0; }
.cx-stop-l .cx-ico, .cx-stop-l .cx-tfg { width: 20px; height: 20px; }
.cx-stop-l .cx-tfg::before { top: 6px; left: 4px; right: 4px; }
.cx-stop-l .cx-tfg::after { top: 10px; left: 4px; right: 7px; }
.cx-stop-bar { display: block; height: 4px; border-radius: 2px; background: var(--plum); margin-top: 16px; position: relative; }
.cx-stop:not(:last-child) .cx-stop-bar::after { content: "+"; position: absolute; left: calc(100% + 3px); top: -10px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .12); display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--plum); }
.cx-stop-c { display: block; margin-top: 14px; font-size: 14px; line-height: 1.35; color: #6E5A70; }
.cx-link-row.is-t .cx-stop-l { color: var(--cx-tf); }
.cx-link-row.is-t .cx-stop-bar { background: var(--cx-tf); }
.cx-link-row.is-t .cx-stop-c { color: var(--cx-tf-mute); }
@container cx (max-width: 700px) {
  .cx-link-row { padding: 20px 18px; }
  .cx-span { display: none; }
  .cx-span-phone { display: flex; }
  .cx-stops { grid-template-columns: minmax(0, 1fr); }
  .cx-stop { padding-right: 0; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto; align-items: center; min-height: 48px; column-gap: 6px; }
  .cx-stop-l { grid-column: 2; grid-row: 1; }
  .cx-stop-bar { grid-column: 1; grid-row: 1; margin: 0; width: 4px; height: 100%; min-height: 48px; justify-self: center; }
  .cx-stop:not(:last-child) .cx-stop-bar::after { display: none; }
  .cx-stop-c { grid-column: 2; grid-row: 2; margin: 0 0 8px 30px; }
  .cx-link-row.is-e .cx-stop-c { display: none; }
}

/* 5A + 5B: where Typeform does more, Typeform on the dark, strong panel; an even row says Even */
.cx-wins { max-width: 900px; }
.cx-big { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cx-big-p { border-radius: 24px; padding: 30px 34px 32px; display: flex; flex-direction: column; min-height: 340px; }
.cx-big-p.is-el { background: var(--cx-lav); color: var(--plum); }
.cx-big-p.is-tw { background: var(--cx-tf); color: #FFFFFF; }
.cx-big-p.is-tw .cx-nm-t { color: #FFFFFF; }
.cx-big-n { margin-top: 28px; min-height: 124px; display: flex; align-items: flex-end; font-family: var(--serif); font-size: 132px; line-height: .9; letter-spacing: -.04em; }
/* the word sizes to its panel (the slice is the container), so "Unlimited" never runs past the edge */
.cx-big-n.is-word { font-size: clamp(48px, 7.4cqi, 78px); letter-spacing: -.03em; white-space: nowrap; }
.cx-big-s { margin-top: 12px; font-size: 16px; }
.cx-big-p.is-el .cx-big-s { color: #5E4A60; }
.cx-big-p.is-tw .cx-big-s { color: rgba(255, 255, 255, .86); }
.cx-big-b { margin-top: auto; padding-top: 26px; font-size: 16px; }
.cx-big-p.is-tw .cx-big-b { color: rgba(255, 255, 255, .9); }
.cx-tiles { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.cx-tile { border-radius: 22px; padding: 22px 24px 24px; min-height: 200px; display: flex; flex-direction: column; gap: 10px; }
.cx-tile b { margin-top: auto; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.cx-tile small { font-size: 16px; line-height: 1.45; }
.cx-tile.is-tw { background: var(--cx-tf); color: #FFFFFF; }
.cx-tile.is-tw .cx-nm-t { color: #FFFFFF; font-size: 17px; }
.cx-tile.is-tw small { color: rgba(255, 255, 255, .86); }
.cx-tile.is-ev { background: linear-gradient(120deg, var(--cx-lav) 0%, var(--cx-tf-plane) 100%); color: var(--plum); }
.cx-tile.is-ev small { color: #5E4A60; }
.cx-even { align-self: flex-start; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: #FFFFFF; border: 1px solid rgba(58, 30, 60, .16); font-size: 15px; font-weight: 500; color: var(--plum); }
.cx-take { margin-top: 22px; text-align: center; font-size: 18px; font-weight: 500; line-height: 1.45; color: var(--plum); text-wrap: balance; }
@container cx (max-width: 640px) {
  .cx-big { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cx-big-p { min-height: 0; padding: 24px 22px; }
  .cx-big-n { margin-top: 18px; min-height: 0; font-size: 96px; }
  .cx-big-n.is-word { font-size: clamp(44px, 16cqi, 64px); }
  .cx-tile { min-height: 0; padding: 20px; }
  .cx-tile b { font-size: 26px; margin-top: 18px; }
}

/* ---------- Why Encore (board W2): an even 2x2 of the site's peach use-case cards, then the founding price as one
   wide card that carries the crossed-out badge. Capped at 1200px. ---------- */
.c-why { padding-bottom: max(32px, calc(var(--vw) * 3)); }
.c-why-in { width: min(100%, 1200px); margin-inline: auto; container: cxw / inline-size; }
.c-why-top { max-width: 760px; }
.c-why-k { font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #5B478B; }
.c-why-h { margin-top: 12px; max-width: 15em; }
.cx-why { margin-top: max(40px, calc(var(--vw) * 3.4)); }
.cx-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; --vis-h: 380px; }
.cx-why-card { color: var(--plum); }
.cx-why-card .pat-card-t { font-size: 30px; text-wrap: balance; }
.cx-why-card .pat-card-go { color: var(--plum); }
.cx-why-card:focus-visible { outline: 2px solid #8F83D6; outline-offset: 6px; border-radius: 22px; }
.cx-swm-l { max-width: 380px; padding: 22px 22px 20px; }
.cx-swm-l .swm-q { font-size: 15px; }
.cx-swm-l .ka-pair .ka-card { font-size: 22px; min-height: 54px; }
.cx-ways4 { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cx-ways4 li { display: flex; align-items: center; gap: 10px; min-width: 0; height: 52px; padding: 0 12px; border-radius: 12px; background: var(--cx-lav); font-size: 16px; font-weight: 500; }
.cx-ways4 .cx-ico { width: 22px; height: 22px; }
.cx-scale { margin-top: 12px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.cx-scale span { height: 32px; border-radius: 999px; display: grid; place-items: center; font-size: 14px; font-weight: 500; color: rgba(58, 30, 60, .8); border: 1px solid rgba(58, 30, 60, .2); }
.cx-scale span.is-on { background: var(--plum); border-color: var(--plum); color: #FFFFFF; }
.cx-hook { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-hook b { font-weight: 500; font-size: 16px; overflow-wrap: anywhere; }
.cx-on { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: #E3F3EF; color: #1F6F64; font-size: 14px; font-weight: 500; }
.cx-on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2BA89E; }
.cx-sent { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.cx-sent li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.cx-sent b { font-weight: 500; }
.cx-sent span { color: #6E5A70; }
.cx-via { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 6px; }
.cx-via span { height: 30px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; background: var(--plane); font-size: 14px; }
.cx-ab { margin-top: 12px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.cx-ab figure { margin: 0; aspect-ratio: 4 / 3; border-radius: 8px; overflow: clip; }
.cx-ab figure.is-on { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--plum); }
.cx-ab img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-ab > span { font-size: 14px; color: var(--mute); }
.cx-chat { margin-top: 12px; display: grid; gap: 8px; }
.cx-chat p { font-size: 16px; line-height: 1.35; padding: 10px 12px; border-radius: 12px; }
.cx-chat .is-me { justify-self: end; background: var(--plum); color: #FFFFFF; border-bottom-right-radius: 4px; max-width: 88%; }
.cx-chat .is-ai { background: #F2F0F3; color: var(--plum); border-bottom-left-radius: 4px; }
/* the wide founding card: live price, the promise, Start free, the seat count once the counter has read it */
.cx-offer { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: stretch; border-radius: 26px; background: var(--plane); padding: 24px; color: var(--plum); }
.cx-offer-t { padding: 24px 16px 24px 24px; display: flex; flex-direction: column; }
.cx-offer-k { font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #5B478B; }
.cx-offer-p { margin-top: 12px; }
.cx-offer-p .amt { display: block; font-family: var(--serif); font-size: 112px; line-height: .9; letter-spacing: -.035em; }
.cx-offer-u { display: block; margin-top: 14px; font-family: var(--serif); font-size: 30px; line-height: 1.1; letter-spacing: -.01em; }
.cx-offer-d { margin-top: 16px; font-size: 17px; line-height: 1.5; color: #5E4A60; max-width: 40ch; }
.cx-offer-steps { margin-top: 10px; font-size: 16px; line-height: 1.5; color: #5E4A60; }
.cx-offer-row { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.cx-offer .btn { margin-top: 0; }
.cx-seats { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--hair); font-size: 15px; color: var(--plum); }
.cx-seats[hidden] { display: none; }
.cx-seats b { font-weight: 500; }
.cx-offer-v { height: auto; min-height: 340px; }
@container cxw (max-width: 1000px) {
  .cx-offer { grid-template-columns: minmax(0, 1fr); }
}
@container cxw (max-width: 700px) {
  .cx-why-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .cx-why-card .pat-card-vis { height: auto; min-height: 240px; padding-block: 28px; }
  .cx-why-card .pat-card-t { font-size: 26px; }
  .cx-ways4 { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cx-ways4 li { height: 44px; font-size: 15px; }
  .cx-offer { padding: 12px; gap: 12px; }
  .cx-offer-t { padding: 20px 12px; }
  .cx-offer-p .amt { font-size: 84px; }
  .cx-offer-u { font-size: 26px; }
  .cx-offer-v { min-height: 0; }
  .cx-swm-l .ka-pair .ka-card { font-size: 18px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-made::after, .cx-span::before, .cx-span::after { transition: none !important; transform: none !important; animation: none !important; }
  .cx-span b { opacity: 1 !important; transition: none !important; }
}
.cs-sep { color: rgba(58, 30, 60, .62); }
/* two cards side by side at tablet width leave each Free-plan tile too narrow for "Comparisons": stack them */
@container cxw (max-width: 860px) {
  .cx-ways4 { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cx-ways4 li { height: 44px; }
}

/* ---------- the five pages after Typeform (5 Nov 2026) ---------- */
/* Pairs: the competitor's two-option question, two pictures in a row with no "vs" and no result */
.cx-ab.is-tf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cx-ab.is-tf figure { box-shadow: inset 0 0 0 1px var(--cx-tf-line); }
.cx-swm.is-tf .cx-tf-line { height: 40px; }
/* Templates (Google Forms): three of the site's cards, each a template's Form, Moodboard and Comparison */
.cx-tpl { --vis-h: 300px; max-width: 1040px; }
.cx.cx-tpl { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.cx-tpl .pat-card-t { font-size: 26px; }
.cx-tpl-card { color: var(--plum); text-decoration: none; }
.cx-tpl-card .pat-card-go { color: var(--plum); }
.cx-tpl-card:focus-visible { outline: 2px solid #8F83D6; outline-offset: 6px; border-radius: 22px; }
.cx-tpl .pat-card-vis { height: 330px; padding-block: 24px; }
.cx-tpl-pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cx-tpl-pics img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.cx-tpl-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.cx-tpl-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 10px; background: var(--cx-lav); font-size: 15px; line-height: 1.3; }
.cx-tpl-steps .cx-ico { width: 22px; height: 22px; }
.cx-tpl-steps b { font-weight: 500; }
.cx-tpl-steps span { font-size: 14px; color: #5E4A60; }
/* Wins with no free-plan panels (Google Forms states no free plan): the tiles start the visual */
.cx-tiles.is-first { margin-top: 0; }
@container cx (max-width: 900px) {
  .cx.cx-tpl { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .cx-tpl .pat-card-vis { height: auto; min-height: 240px; padding-block: 28px; }
}
/* Four tiles sit two by two (never three and an orphan); a lone tile keeps a tile's width, centred */
.cx-tiles:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-tiles:has(> :only-child) { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
@container cx (max-width: 640px) {
  .cx-tiles:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the other tool, in a neutral stand-in for its own look (5 Nov 2026). System sans only, no logos. ---------- */
/* Tally: a bare page in the manner of a document. Near-black text on white, bold question titles, thin grey rings on
   inputs and pictures, its blue for what is selected, and its badge as a small white tag. */
.cx-swm.cx-t-tally { --tl-ink: #37352F; --tl-mute: #787774; --tl-ring: rgba(55, 53, 47, .16); --tl-blue: #0070D7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--tl-ink); border-radius: 10px; border-color: #EAEAEA; padding: 20px 20px 18px; }
.cx-swm.cx-t-tally .swm-q { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--tl-ink); letter-spacing: -.005em; }
.cx-swm.cx-t-tally .swm-q:has(+ .cx-tf-q) { display: none; }
.cx-swm.cx-t-tally .cx-tf-q { margin-top: 0; font-size: 17px; font-weight: 600; color: var(--tl-ink); letter-spacing: -.005em; }
.cx-swm.cx-t-tally .cx-tf-line { margin-top: 12px; height: 40px; border: 0; border-radius: 8px; box-shadow: 0 0 0 1px var(--tl-ring); color: var(--tl-mute); font-size: 15px; }
.cx-swm.cx-t-tally .cx-ab + .cx-tf-line { height: auto; margin-top: 10px; padding: 0; box-shadow: none; font-size: 14px; }
.cx-swm.cx-t-tally .cx-pic { border-radius: 8px; }
.cx-swm.cx-t-tally .cx-pic.is-picked { box-shadow: 0 0 0 2px var(--tl-blue); }
.cx-swm.cx-t-tally .cx-tick { left: 10px; right: auto; width: 24px; height: 24px; background: var(--tl-blue); }
.cx-swm.cx-t-tally .cx-tick::after { width: 10px; height: 5px; }
.cx-swm.cx-t-tally .cx-chips span.is-tf { padding: 0; background: none; border-radius: 0; color: var(--tl-blue); font-size: 15px; font-weight: 500; }
.cx-swm.cx-t-tally .cx-ab.is-tf figure { border-radius: 8px; box-shadow: 0 0 0 1px var(--tl-ring); }
.cx-swm.cx-t-tally .cx-foot { border-top: 0; margin-top: 10px; padding-top: 0; }
.cx-swm.cx-t-tally .cx-tf-badge { height: 30px; padding: 0 10px; border-radius: 6px; background: #FFFFFF; color: var(--tl-ink); box-shadow: 0 0 0 1px var(--tl-ring), 0 1px 2px rgba(15, 15, 15, .06); font-size: 14px; font-weight: 500; }
.cx-swm.cx-t-tally .cx-tf-badge i { display: none; }
.cx-wash-tf.w-cx-t-tally { background: #FFFFFF; box-shadow: inset 0 0 0 1px #EAEAEA; }
.cx-wash-tf.w-cx-t-tally .cx-swm.cx-t-tally { border-color: transparent; padding-inline: 8px; }

/* The other five, the same way (5 Nov 2026, after Tally was approved). Shared: system sans, the tool's ink, its accent
   on what is selected, its ring on inputs and pictures. Then each tool's own layout marks. */
.cx-swm.cx-t-typeform, .cx-swm.cx-t-google-forms, .cx-swm.cx-t-jotform, .cx-swm.cx-t-paperform, .cx-swm.cx-t-fillout {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--t-ink); border-color: var(--t-line); }
:is(.cx-t-typeform, .cx-t-google-forms, .cx-t-jotform, .cx-t-paperform, .cx-t-fillout) .swm-q { color: var(--t-mute); }
:is(.cx-t-typeform, .cx-t-google-forms, .cx-t-jotform, .cx-t-paperform, .cx-t-fillout) .cx-tf-q { color: var(--t-ink); }
:is(.cx-t-typeform, .cx-t-google-forms, .cx-t-jotform, .cx-t-paperform, .cx-t-fillout) .cx-tf-line { color: var(--t-mute); border-color: var(--t-line); }
:is(.cx-t-typeform, .cx-t-google-forms, .cx-t-jotform, .cx-t-paperform, .cx-t-fillout) .cx-pic.is-picked { box-shadow: 0 0 0 2px var(--t-accent); }
:is(.cx-t-typeform, .cx-t-google-forms, .cx-t-jotform, .cx-t-paperform, .cx-t-fillout) .cx-tick { background: var(--t-accent); }
:is(.cx-t-typeform, .cx-t-google-forms, .cx-t-jotform, .cx-t-paperform, .cx-t-fillout) .cx-chips span.is-tf { background: none; padding: 0; border-radius: 0; color: var(--t-accent); font-size: 15px; font-weight: 500; }
:is(.cx-t-typeform, .cx-t-google-forms, .cx-t-jotform, .cx-t-paperform, .cx-t-fillout) .cx-ab.is-tf figure { box-shadow: 0 0 0 1px var(--t-line); }
:is(.cx-t-typeform, .cx-t-google-forms, .cx-t-jotform, .cx-t-paperform, .cx-t-fillout) .hb-stars path, :is(.cx-t-typeform, .cx-t-google-forms, .cx-t-jotform, .cx-t-paperform, .cx-t-fillout) .cx-stars path { stroke: var(--t-accent); }
:is(.cx-t-typeform, .cx-t-google-forms, .cx-t-jotform, .cx-t-paperform, .cx-t-fillout) .cx-stars path[fill="#34332F"] { fill: var(--t-accent); }

/* Typeform: one big question, numbered with an arrow, its blue for type and answers; inputs are a line under the text,
   picture options carry a letter key, and its badge is the dark tag at the corner. */
.cx-swm.cx-t-typeform { --t-ink: #0445AF; --t-mute: #5A7DBF; --t-line: rgba(4, 69, 175, .3); --t-accent: #0445AF; border-radius: 6px; border-color: #E6E6E6; }
.cx-t-typeform .swm-q { font-size: 15px; font-weight: 500; }
.cx-t-typeform .swm-q:has(+ .cx-tf-q) { display: none; }
.cx-t-typeform .cx-tf-q { margin-top: 0; font-size: 20px; line-height: 1.3; font-weight: 400; }
.cx-t-typeform .cx-tf-q::before { content: "1 \2192"; margin-right: 8px; font-size: 14px; vertical-align: 2px; }
.cx-t-typeform .cx-tf-line { height: 42px; border: 0; border-bottom: 1px solid var(--t-line); border-radius: 0; padding: 0 2px; font-size: 18px; color: rgba(4, 69, 175, .45); }
.cx-t-typeform .cx-pic { border-radius: 4px; }
.cx-t-typeform .cx-pic.is-picked::before { content: "A"; position: absolute; left: 10px; bottom: 10px; z-index: 1; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 3px; background: #FFFFFF; color: #0445AF; font-size: 14px; font-weight: 600; box-shadow: 0 0 0 1px #0445AF; }
.cx-t-typeform .cx-tick { width: 26px; height: 26px; border-radius: 4px; }
.cx-t-typeform .cx-tick::after { width: 10px; height: 5px; }
.cx-t-typeform .cx-foot { border-top: 0; padding-top: 4px; }
.cx-t-typeform .cx-tf-badge { height: 32px; border-radius: 4px; background: #191919; font-size: 14px; }
.cx-t-typeform .cx-tf-badge i { display: none; }

/* Google Forms: the coloured strip along the top of a white card on a tinted page, plain question text, an underlined
   short answer, a radio mark on the chosen picture, and its purple for what is chosen. */
.cx-wash-tf.w-cx-t-google-forms { background: #F0EBF8; }
.cx-swm.cx-t-google-forms { --t-ink: #202124; --t-mute: #5F6368; --t-line: #DADCE0; --t-accent: #673AB7; border-radius: 8px; border: 1px solid #DADCE0; border-top: 10px solid #673AB7; padding-top: 18px; }
.cx-t-google-forms .swm-q { font-size: 16px; color: var(--t-ink); }
.cx-t-google-forms .swm-q:has(+ .cx-tf-q) { display: none; }
.cx-t-google-forms .cx-tf-q { margin-top: 0; font-size: 16px; }
.cx-t-google-forms .cx-tf-line { height: 36px; border: 0; border-bottom: 1px solid var(--t-line); border-radius: 0; padding: 0; font-size: 14px; }
.cx-t-google-forms .cx-pic { border-radius: 4px; }
.cx-t-google-forms .cx-pic.is-picked { box-shadow: none; }
.cx-t-google-forms .cx-tick { display: none; }
.cx-t-google-forms .cx-chips span.is-tf { display: inline-flex; align-items: center; gap: 10px; color: var(--t-ink); font-weight: 400; }
.cx-t-google-forms .cx-chips span.is-tf::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #673AB7; background: radial-gradient(circle, #673AB7 0 4px, transparent 4.5px); }
.cx-t-google-forms .cx-ab.is-tf figure { border-radius: 4px; }

/* Jotform: a navy form on a pale blue-grey page, boxed inputs with small corners, its blue on the chosen picture, its
   green button, and its branding as a footer tag. */
.cx-wash-tf.w-cx-t-jotform { background: linear-gradient(180deg, #EAF0FB 0%, #F3F6FC 100%); }
.cx-swm.cx-t-jotform { --t-ink: #0A1551; --t-mute: #6C73A8; --t-line: #C8CEED; --t-accent: #2E69FF; border-radius: 4px; border-color: #E3E5F5; }
.cx-t-jotform .swm-q, .cx-t-jotform .cx-tf-q { font-size: 16px; font-weight: 600; color: var(--t-ink); }
.cx-t-jotform .swm-q:has(+ .cx-tf-q) { display: none; }
.cx-t-jotform .cx-tf-q { margin-top: 0; }
.cx-t-jotform .cx-tf-line { height: 40px; border-radius: 4px; border: 1px solid var(--t-line); }
.cx-t-jotform .cx-ab + .cx-tf-line, .cx-t-jotform .hb-stars + .cx-tf-line, .cx-t-jotform .cx-stars + .cx-tf-line { justify-content: center; border: 0; background: #18BD5B; color: #FFFFFF; font-weight: 600; }
.cx-t-jotform .cx-pic { border-radius: 4px; }
.cx-t-jotform .cx-foot { border-top-color: #E3E5F5; }
.cx-t-jotform .cx-tf-badge { height: 30px; border-radius: 4px; background: #0A1551; font-size: 14px; }
.cx-t-jotform .cx-tf-badge i { display: none; }

/* Paperform: a page more than a form, set like a document. Centred, roomy, inputs on a soft grey fill, rating
   questions in icons, and its badge as a quiet line of text under the form. */
.cx-wash-tf.w-cx-t-paperform { background: #FAFAFA; box-shadow: inset 0 0 0 1px #EDEDED; }
.cx-swm.cx-t-paperform { --t-ink: #2E2E2E; --t-mute: #8A8A8A; --t-line: #E4E4E4; --t-accent: #1F8FDB; border-radius: 4px; border-color: transparent; text-align: center; padding: 22px 20px; }
.cx-t-paperform .swm-q { font-size: 14px; letter-spacing: .02em; }
.cx-t-paperform .cx-tf-q { font-size: 19px; font-weight: 500; margin-top: 8px; }
.cx-t-paperform .cx-tf-line { height: 42px; border: 0; border-radius: 4px; background: #F2F2F2; justify-content: center; font-size: 15px; }
.cx-t-paperform .cx-stars { justify-content: center; }
.cx-t-paperform .cx-stars + .cx-tf-line, .cx-t-paperform .hb-stars + .cx-tf-line { background: #1F8FDB; color: #FFFFFF; font-weight: 500; }
.cx-t-paperform .cx-chips { justify-content: center; }
.cx-t-paperform .cx-foot { border-top: 0; justify-content: center; padding-top: 2px; }
.cx-t-paperform .cx-tf-badge { height: auto; padding: 0; background: none; color: #8A8A8A; font-size: 14px; font-weight: 400; }
.cx-t-paperform .cx-tf-badge i { display: none; }

/* Fillout: a clean modern form. Rounded boxed inputs, a square check on the chosen picture, its blue for what is
   chosen, and its badge as a small rounded tag. */
.cx-wash-tf.w-cx-t-fillout { background: #FFFFFF; box-shadow: inset 0 0 0 1px #ECECEC; }
.cx-swm.cx-t-fillout { --t-ink: #111827; --t-mute: #6B7280; --t-line: #D1D5DB; --t-accent: #2563EB; border-radius: 12px; border-color: #E5E7EB; }
.cx-t-fillout .swm-q, .cx-t-fillout .cx-tf-q { font-size: 16px; font-weight: 600; color: var(--t-ink); }
.cx-t-fillout .swm-q:has(+ .cx-tf-q) { display: none; }
.cx-t-fillout .cx-tf-q { margin-top: 0; }
.cx-t-fillout .cx-tf-line { height: 40px; border-radius: 8px; border: 1px solid var(--t-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.cx-t-fillout .cx-ab + .cx-tf-line { height: auto; border: 0; box-shadow: none; padding: 0; font-size: 14px; }
.cx-t-fillout .cx-pic { border-radius: 8px; }
.cx-t-fillout .cx-tick { width: 24px; height: 24px; border-radius: 6px; }
.cx-t-fillout .cx-tick::after { width: 10px; height: 5px; }
.cx-t-fillout .cx-ab.is-tf figure { border-radius: 8px; }
.cx-t-fillout .cx-foot { border-top: 0; padding-top: 4px; }
.cx-t-fillout .cx-tf-badge { height: 30px; padding: 0 12px; border-radius: 999px; background: #FFFFFF; color: #111827; box-shadow: 0 0 0 1px #E5E7EB, 0 1px 2px rgba(16, 24, 40, .06); font-size: 14px; }
.cx-t-fillout .cx-tf-badge i { display: none; }

/* still tier: the reduced-motion rules above */
html.mo-still .cx-made::after,html.mo-still .cx-span::before,html.mo-still .cx-span::after{transition: none !important; transform: none !important; animation: none !important;}html.mo-still .cx-span b{opacity: 1 !important; transition: none !important;}