/* Setup templates (form.ui_data.template). survey.js adds .sf-tpl.tpl-NN to the page and
   draws the template's parts (brand, stepper, progress, notes) around the question card.
   Backgrounds are the empty template images in avatars/template/NN.png. */

/* An image or colour set in the builder (survey.js puts it on the page) also replaces the
   background pieces some templates draw in these pseudo-elements. */
.sf-page.sf-tpl.has-own-background::before,
.sf-page.sf-tpl.has-own-background::after {
  content: none;
}

/* ---- Shared template layout ---- */
.sf-page.sf-tpl {
  --tpl-accent: #2563eb;
  --tpl-button: var(--tpl-accent);
  --tpl-button-text: #fff;
  --tpl-text: #0f1d3a;
  --tpl-title: var(--tpl-text);
  --tpl-muted: #64748b;
  --tpl-card: #fff;
  --tpl-card-border: transparent;
  --tpl-border: #d7deea;
  --tpl-input: #fff;
  --tpl-track: #e2e8f0;
  --tpl-soft: #e8f0fe;
  --tpl-heading: inherit;
  --sf-accent: var(--tpl-accent);
  --sf-accent-dark: var(--tpl-accent);
  --sf-text: var(--tpl-text);
  --sf-muted: var(--tpl-muted);
  --sf-border: var(--tpl-border);
  display: flex;
  flex-direction: column;
  padding: 48px 5%;
  background-color: #f4f7fc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--tpl-text);
  font-family: 'Figtree', 'Poppins', sans-serif;
}

.sf-tpl .sf-restart {
  z-index: 2;
  color: var(--tpl-accent);
}

.sf-tpl-layout {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6vw;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.sf-tpl-main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 750px;
}

.sf-tpl-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  padding: 44px 25px;
  border: 1px solid var(--tpl-card-border);
  border-radius: 24px;
  background: var(--tpl-card);
  box-shadow: 0 30px 60px -24px rgba(15, 23, 42, 0.22);
}

.sf-tpl-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.sf-tpl-foot,
.sf-tpl-after,
.sf-tpl-above {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.sf-tpl-aside {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 48px;
  width: 300px;
}

.sf-tpl-side {
  flex: none;
  width: 260px;
}

/* The question page inside the card. */
.sf-tpl .sf-shell {
  gap: 12px;
  max-width: none;
  margin: 0;
}

.sf-tpl .sf-single {
  padding-top: 0;
}

.sf-tpl .sf-single .sf-label {
  color: var(--tpl-title);
  font-family: var(--tpl-heading);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
}

.sf-tpl .sf-single .sf-question > :not(.sf-label):not(.sf-error) {
  max-width: none;
}

.sf-tpl .sf-label {
  color: var(--tpl-title);
}

.sf-tpl .sf-input-group {
  min-height: 45px;
  border-color: var(--tpl-border);
  border-radius: 12px;
  background: var(--tpl-input);
}

.sf-tpl .sf-input-group:focus-within {
  border-color: var(--tpl-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tpl-accent) 18%, transparent);
}

.sf-tpl .sf-input-icon {
  width: 58px;
  border-right: 0;
  background: transparent;
  color: var(--tpl-muted);
}

.sf-tpl .sf-input,
.sf-tpl .sf-select,
.sf-tpl .sf-area {
  color: var(--tpl-text);
}

.sf-tpl .sf-input {
  padding-left: 4px;
}

.sf-tpl .sf-input::placeholder,
.sf-tpl .sf-area::placeholder {
  color: var(--tpl-muted);
}

.sf-tpl .sf-actions {
  margin-top: 26px;
}

.sf-tpl .sf-next {
  min-width: 140px;
  height: 50px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--tpl-button);
  color: var(--tpl-button-text);
  font-size: 19px;
  box-shadow: 0 14px 26px -12px var(--tpl-accent);
}

.sf-tpl .sf-next:hover:not(:disabled) {
  background: var(--tpl-button);
  filter: brightness(1.06);
}

.sf-tpl .sf-actions .sf-next:not(.sf-secondary)::after {
  content: '\2192';
  margin-left: 10px;
  font-weight: 500;
}

/* Skip and Previous: the template's Next button colours, just narrower and without the arrow. */
.sf-tpl .sf-next.sf-secondary {
  min-width: 0;
  padding: 0 1.4em;
  border: 0;
}

.sf-tpl .sf-section {
  border: 0;
  background: transparent;
}

.sf-tpl .sf-section-head,
.sf-tpl .sf-section-body,
.sf-tpl .sf-section-foot {
  padding-inline: 0;
}

.sf-tpl .sf-section-head {
  padding-top: 0;
}

.sf-tpl .sf-section-head,
.sf-tpl .sf-section-foot {
  border-color: var(--tpl-track);
}

.sf-tpl .sf-done {
  padding: 8px 0;
}

.sf-tpl .sf-done h1 {
  color: var(--tpl-title);
  font-family: var(--tpl-heading);
}

/* Step title over the answer: only templates that ask the question as a heading show it. */
.sf-field-title {
  display: none;
}

/* Form description under the question: only templates that use it show it. */
.sf-question-sub {
  display: none;
}

/* Tick inside a typed answer: only drawn once the answer is valid. */
.sf-input-ok {
  display: none;
}

.sf-input-group.is-valid .sf-input-ok {
  display: grid;
  flex: none;
  place-items: center;
  align-self: center;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  border-radius: 50%;
  background: #1f9d63;
  color: #fff;
}

/* ---- Template parts ---- */
.sf-tpl-brand h1 {
  margin: 0;
  color: var(--tpl-title);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
}

.sf-tpl-brand p {
  margin: 8px 0 0;
  color: var(--tpl-muted);
  font-size: 18px;
}

.sf-tpl-pill {
  padding: 7px 24px;
  border-radius: 999px;
  background: var(--tpl-soft);
  color: var(--tpl-accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sf-tpl-avatar {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--tpl-soft);
  color: var(--tpl-accent);
}

.sf-tpl-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--tpl-soft);
  color: var(--tpl-accent);
  font-size: 16px;
  font-weight: 500;
}

.sf-tpl-stepchip {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--tpl-muted);
  font-size: 18px;
}

.sf-tpl-stepchip .sf-tpl-avatar {
  width: 62px;
  height: 62px;
}

.sf-tpl-stepchip .sf-tpl-avatar svg {
  width: 28px;
  height: 28px;
}

.sf-tpl-note {
  margin: 0;
  color: var(--tpl-accent);
  font-family: 'Dancing Script', cursive;
  font-size: 32px;
  line-height: 1.2;
}

.sf-tpl-dots {
  display: inline-flex;
  align-self: flex-start;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
}

.sf-tpl-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tpl-accent);
  animation: sf-tpl-typing 1.2s ease-in-out infinite;
}

.sf-tpl-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.sf-tpl-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes sf-tpl-typing {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* Progress: "Step X of N" over segments or one line. */
.sf-tpl-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.sf-tpl-progress-label {
  color: var(--tpl-muted);
  font-size: 15px;
}

.sf-tpl-progress-label strong {
  font-weight: inherit;
}

.sf-tpl-eyebrow:empty {
  display: none;
}

.sf-tpl-bar {
  display: flex;
  gap: 6px;
  width: 100%;
}

.sf-tpl-bar > span {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--tpl-track);
}

.sf-tpl-bar > span.is-on {
  background: var(--tpl-accent);
}

.sf-tpl-bar.is-line {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--tpl-track);
}

.sf-tpl-bar.is-line > .sf-tpl-fill {
  flex: none;
  background: var(--tpl-accent);
  transition: width 0.3s ease;
}

/* Steppers: steps (numbers in a row), isteps (icons in a row), vsteps (numbers in a column). */
.sf-tpl-steps {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-tpl-steps li {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--tpl-muted);
  font-size: 15px;
  text-align: center;
}

.sf-tpl-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 21px;
  left: calc(50% + 26px);
  right: calc(-50% + 26px);
  height: 2px;
  background: var(--tpl-track);
}

.sf-tpl-steps li.is-done::after {
  background: var(--tpl-accent);
}

.sf-tpl-step-dot {
  position: relative;
  z-index: 1;
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--tpl-track);
  border-radius: 50%;
  background: #fff;
  color: var(--tpl-text);
  font-size: 17px;
  font-weight: 600;
}

.sf-tpl-steps li.is-current,
.sf-tpl-steps li.is-done {
  color: var(--tpl-text);
}

.sf-tpl-steps li.is-current {
  font-weight: 600;
}

.sf-tpl-steps li.is-current .sf-tpl-step-dot {
  border-color: var(--tpl-accent);
  background: var(--tpl-accent);
  color: #fff;
  box-shadow: 0 8px 18px -8px var(--tpl-accent);
}

.sf-tpl-steps li.is-done .sf-tpl-step-dot {
  border-color: var(--tpl-accent);
  color: var(--tpl-accent);
}

.sf-tpl-step-label {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-tpl-steps.is-vsteps {
  flex-direction: column;
}

.sf-tpl-steps.is-vsteps li {
  flex-direction: row;
  gap: 24px;
  padding-bottom: 40px;
  font-size: 19px;
  text-align: left;
}

.sf-tpl-steps.is-vsteps li:last-child {
  padding-bottom: 0;
}

.sf-tpl-steps.is-vsteps li:not(:last-child)::after {
  top: 46px;
  bottom: 0;
  left: 21px;
  right: auto;
  width: 2px;
  height: auto;
}

.sf-tpl-steps.is-vsteps .sf-tpl-step-dot {
  border: 0;
  background: var(--tpl-track);
  color: var(--tpl-muted);
}

.sf-tpl-steps.is-isteps .sf-tpl-step-dot {
  width: 80px;
  height: 80px;
  border-color: color-mix(in srgb, var(--tpl-accent) 30%, #fff);
  color: var(--tpl-accent);
}

.sf-tpl-steps.is-isteps li:not(:last-child)::after {
  top: 39px;
  left: calc(50% + 42px);
  right: calc(-50% + 42px);
}

.sf-tpl-steps.is-isteps li {
  font-size: 18px;
}

/* ---- 01 Temple: dark glass card, gold accents, serif question ---- */
.sf-page.tpl-01 {
  --tpl-accent: #e2ac4a;
  --tpl-button: linear-gradient(180deg, #f6c75e, #e09c2c);
  --tpl-button-text: #3b2410;
  --tpl-text: #f6e7c9;
  --tpl-title: #fbf0dc;
  --tpl-muted: #d8c4a0;
  --tpl-card: rgba(48, 30, 14, 0.55);
  --tpl-card-border: rgba(226, 172, 74, 0.65);
  --tpl-border: rgba(255, 255, 255, 0.85);
  --tpl-track: rgba(255, 255, 255, 0.22);
  --tpl-heading: 'Cormorant Garamond', Georgia, serif;
  background-color: #2a190b;
  font-family: 'Poppins', sans-serif;
}

/* The photo fills everything right of 26vw at any screen size (cover), so the lingam sits
   beside the card; its left edge fades into the solid colour behind the card. */
.sf-page.tpl-01::before {
  content: '';
  position: absolute;
  inset: 0 0 0 26vw;
  background:
    linear-gradient(90deg, #2a190b 0, rgba(42, 25, 11, 0.65) 10vw, rgba(42, 25, 11, 0) 30vw),
    url('avatars/template/01.png') center / cover no-repeat;
}

.tpl-01 .sf-tpl-layout {
  position: relative;
  z-index: 1;
}

.tpl-01 .sf-tpl-layout {
  justify-content: flex-start;
  padding-left: 9vw;
}

/* Single-question pages are narrower; section pages keep the shared 750px. */
.tpl-01 .sf-tpl-main:not(.is-section) {
  max-width: 600px;
}

.tpl-01 .sf-tpl-card {
  /* backdrop-filter: blur(10px); */
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}

.tpl-01 .sf-tpl-head {
  gap: 8px;
  color: var(--tpl-accent);
  text-align: center;
}

.tpl-01 .sf-tpl-brand h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--tpl-accent);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.tpl-01 .sf-tpl-brand h1::before,
.tpl-01 .sf-tpl-brand h1::after {
  content: '';
  width: 58px;
  height: 1px;
  background: currentColor;
}

.tpl-01 .sf-tpl-brand p {
  color: var(--tpl-muted);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.tpl-01 .sf-single .sf-label {
  font-size: 30px;
  font-weight: 500;
}

.tpl-01 .sf-single .sf-label::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 30px;
  margin-right: 16px;
  vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' fill='none' stroke='%23e2ac4a' stroke-width='1.3'%3E%3Cpath d='M16 22c-3-3-4.5-7-4.5-10S13 6 16 2.5C19 6 20.5 9 20.5 12S19 19 16 22z'/%3E%3Cpath d='M16 22c-4.5-1-8.5-4.5-9.5-10 3.5 0 6.5 1.5 8.5 3.5'/%3E%3Cpath d='M16 22c4.5-1 8.5-4.5 9.5-10-3.5 0-6.5 1.5-8.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tpl-01 .sf-input-icon {
  border-right: 1px solid #e5e7eb;
  color: #6b7280;
}

.tpl-01 .sf-input-group {
  border-radius: 8px;
}

.tpl-01 .sf-input {
  padding-left: 14px;
  color: #1f2937;
}

.tpl-01 .sf-input::placeholder {
  color: #9ca3af;
}

.tpl-01 .sf-next {
  font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(246, 199, 94, 0.8);
}

.tpl-01 .sf-tpl-progress-label {
  font-size: 13px;
}

.tpl-01 .sf-tpl-bar.is-line {
  height: 4px;
}

/* ---- 02 Robot: wide card, robot and waves on the left, question on the right ----
   Sized from the 1665 x 945 design: --u is 1px there and shrinks with the window (width or height,
   whichever is tighter). The robot panel and corner shape are cut from that design (02-panel.png,
   02-corner.png), so the card's radius and their sizes use the same unit. */
.sf-page.tpl-02 {
  --u: min(calc(100vw / 1665), calc(100vh / 945));
  --tpl-accent: #0f66ee;
  --tpl-button: linear-gradient(90deg, #1c95fb, #0650e6);
  --tpl-text: #0a1f4e;
  --tpl-title: #0a1f4e;
  --tpl-muted: #5b6b86;
  --tpl-card: #fafbfd;
  --tpl-border: #c6dcf7;
  --tpl-soft: #d3e4fc;
  --tpl-track: #dde4f0;
  padding: max(16px, calc(40 * var(--u))) max(16px, calc(52 * var(--u)));
  background-color: #e9f1fd;
  background-image:
    radial-gradient(circle at 100% 0, #7fc2fe 0, #c4e0fc calc(480 * var(--u)), transparent calc(482 * var(--u))),
    linear-gradient(180deg, #eef4fd, #e4edfd);
  background-size: auto;
}

/* The card is wider than the shared 1440px layout at the design's full size. */
.tpl-02 .sf-tpl-layout {
  max-width: none;
}

.tpl-02 .sf-tpl-main {
  max-width: max(780px, calc(1560 * var(--u)));
}

.tpl-02 .sf-tpl-card {
  gap: 0;
  min-height: calc(776 * var(--u));
  padding: calc(63 * var(--u)) calc(55 * var(--u)) calc(43 * var(--u)) calc(578 * var(--u));
  border: 0;
  border-radius: calc(85 * var(--u));
  background:
    url('avatars/template/02-panel.png') left bottom / calc(555 * var(--u)) calc(776 * var(--u)) no-repeat,
    url('avatars/template/02-corner.png') right top / calc(221 * var(--u)) calc(177 * var(--u)) no-repeat,
    var(--tpl-card);
  box-shadow: 0 30px 70px -30px rgba(15, 102, 238, 0.35);
}

.tpl-02 .sf-tpl-head {
  align-items: flex-start;
  margin-bottom: max(10px, calc(35 * var(--u)));
}

.tpl-02 .sf-tpl-pill {
  padding: max(5px, calc(18 * var(--u))) max(16px, calc(48 * var(--u)));
  color: #0b5fe0;
  font-size: max(13px, calc(36 * var(--u)));
  font-weight: 700;
  letter-spacing: 0;
}

.tpl-02 .sf-single .sf-question {
  gap: max(8px, calc(30 * var(--u)));
}

.tpl-02 .sf-single .sf-label {
  font-size: max(24px, calc(72 * var(--u)));
  font-weight: 700;
}

.tpl-02 .sf-single .sf-question-sub {
  display: block;
  margin: 0 0 max(4px, calc(30 * var(--u)));
  color: var(--tpl-muted);
  font-size: max(14px, calc(40 * var(--u)));
}

.tpl-02 .sf-input-group {
  min-height: max(44px, calc(116 * var(--u)));
  border-width: 2px;
  border-radius: max(12px, calc(30 * var(--u)));
}

.tpl-02 .sf-input-icon {
  width: max(48px, calc(130 * var(--u)));
}

.tpl-02 .sf-input-icon svg {
  width: max(20px, calc(50 * var(--u)));
  height: max(20px, calc(50 * var(--u)));
}

.tpl-02 .sf-input {
  font-size: max(16px, calc(44 * var(--u)));
}

.tpl-02 .sf-actions {
  justify-content: flex-end;
  margin-top: max(10px, calc(50 * var(--u)));
}

.tpl-02 .sf-next {
  min-width: max(150px, calc(333 * var(--u)));
  height: max(42px, calc(115 * var(--u)));
  font-size: max(16px, calc(48 * var(--u)));
  box-shadow: 0 16px 30px -14px rgba(6, 80, 230, 0.6);
}

.tpl-02 .sf-tpl-progress {
  gap: max(6px, calc(16 * var(--u)));
}

.tpl-02 .sf-tpl-progress-label {
  color: #0a4fc7;
  font-size: max(13px, calc(34 * var(--u)));
}

.tpl-02 .sf-tpl-bar.is-line {
  height: max(5px, calc(14 * var(--u)));
}

.tpl-05 .sf-tpl-avatar::before,
.tpl-05 .sf-tpl-avatar::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--tpl-accent);
}

.tpl-05 .sf-tpl-avatar::before {
  left: -34px;
}

.tpl-05 .sf-tpl-avatar::after {
  right: -34px;
}

/* ---- 03 Leaf: cream card, green serif ---- */
.sf-page.tpl-03 {
  --tpl-accent: #2f6b45;
  --tpl-text: #2a3a2c;
  --tpl-title: #2f5a35;
  --tpl-muted: #6b7466;
  --tpl-card: rgba(250, 247, 239, 0.94);
  --tpl-card-border: #ddd6c4;
  --tpl-border: #c9c2b0;
  --tpl-input: transparent;
  --tpl-track: #e3ddd0;
  --tpl-heading: 'Lora', Georgia, serif;
  padding-top: 24px;
  padding-bottom: 24px;
  background-color: #ebe4d6;
}

/* The leaves sit in the image's top-right and bottom-left corners. One "cover" image would crop
   them on wide or tall screens, so the top half shows the image's top edge and the bottom half
   its bottom edge, blended where they meet. */
.sf-page.tpl-03::before,
.sf-page.tpl-03::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  background-image: url('avatars/template/03.png');
  background-repeat: no-repeat;
  background-size: max(100vw, 177.78vh) auto;
  pointer-events: none;
}

.sf-page.tpl-03::before {
  top: 0;
  height: 50%;
  background-position: center top;
}

.sf-page.tpl-03::after {
  bottom: 0;
  height: 70%;
  background-position: center bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%);
  mask-image: linear-gradient(to bottom, transparent, #000 30%);
}

.tpl-03 .sf-tpl-layout {
  position: relative;
  z-index: 1;
}

/* Sized to the screen width, like the sample: the card is about 40% of it. */
.tpl-03 .sf-tpl-main {
  gap: clamp(10px, 1.2vw, 22px);
  max-width: clamp(480px, 55vw, 780px);
}

.tpl-03 .sf-tpl-card {
  gap: clamp(12px, 1.3vw, 24px);
  padding: clamp(24px, 2.4vw, 44px) clamp(28px, 3.1vw, 60px) clamp(26px, 2.9vw, 52px);
  border-radius: clamp(18px, 1.4vw, 28px);
  box-shadow: 0 30px 60px -32px rgba(60, 50, 20, 0.35);
}

.tpl-03 .sf-tpl-leaf {
  color: var(--tpl-accent);
}

.tpl-03 .sf-tpl-leaf svg {
  width: clamp(36px, 3vw, 60px);
  height: clamp(36px, 3vw, 60px);
}

.tpl-03 .sf-single .sf-label {
  font-size: clamp(28px, 2vw, 48px);
  text-align: center;
}

.tpl-03 .sf-input-group {
  min-height: clamp(48px, 4.2vw, 80px);
}

.tpl-03 .sf-input {
  font-size: clamp(16px, 1.25vw, 24px);
}

.tpl-03 .sf-actions {
  margin-top: clamp(12px, 1.4vw, 28px);
}

.tpl-03 .sf-next {
  min-width: clamp(170px, 16.4vw, 316px);
  height: clamp(46px, 4.3vw, 84px);
  font-size: clamp(16px, 1.5vw, 28px);
}

.tpl-03 .sf-tpl-foot .sf-tpl-progress {
  max-width: 76%;
}

.tpl-03 .sf-tpl-progress-label {
  font-size: clamp(14px, 1.1vw, 20px);
}

.tpl-03 .sf-tpl-note {
  align-self: flex-end;
  /* Two lines like the sample: "Your opinion" / "matters ♡". */
  max-width: 6.5em;
  margin-right: -0.5em;
  color: #3f6b4a;
  font-size: clamp(22px, 1.8vw, 36px);
  line-height: 1.15;
  text-align: center;
  transform: rotate(-3deg);
}

/* ---- 04 Night: logo bar, double-bordered dark card, neon gradient ----
   Drawn for a 1648 x 928 screen: --u is 1px there and shrinks with the window (width or height,
   whichever is tighter), so the whole design scales instead of overflowing short screens. */
.sf-page.tpl-04 {
  --u: min(calc(100vh / 928), calc(100vw / 1648));
  --tpl-accent: #8b5cf6;
  --tpl-button: linear-gradient(90deg, #9333ea, #0a9bff);
  --tpl-text: #e2e8f0;
  --tpl-title: #ffffff;
  --tpl-muted: #a5b4fc;
  --tpl-card: rgba(9, 15, 44, 0.9);
  --tpl-card-border: rgba(99, 102, 241, 0.55);
  --tpl-border: #3b4a8a;
  --tpl-input: #172452;
  --tpl-track: #2a3766;
  padding-top: max(16px, calc(48 * var(--u)));
  padding-bottom: max(16px, calc(40 * var(--u)));
  background-color: #060a24;
  background-image: url('avatars/template/04.png');
}

.tpl-04 .sf-tpl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto max(10px, calc(28 * var(--u)));
  padding: 0 64px 0 4%;
}

.tpl-04 .sf-tpl-logo {
  color: #fff;
  font-size: max(18px, calc(26 * var(--u)));
  font-weight: 700;
}

.tpl-04 .sf-tpl-logo span {
  margin-left: 4px;
  color: #a78bfa;
}

.tpl-04 .sf-tpl-badge {
  min-width: max(140px, calc(200 * var(--u)));
  padding: max(7px, calc(11 * var(--u))) max(18px, calc(30 * var(--u)));
  border: 1px solid rgba(99, 102, 241, 0.5);
  border-radius: 999px;
  background: #141d45;
  color: #c7d2fe;
  font-size: max(12px, calc(15 * var(--u)));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tpl-04 .sf-tpl-main {
  gap: max(10px, calc(28 * var(--u)));
  max-width: max(480px, calc(810 * var(--u)));
}

/* Outer border on the card, a second one inset inside it. */
.tpl-04 .sf-tpl-card {
  position: relative;
  gap: max(10px, calc(24 * var(--u)));
  padding: max(20px, calc(40 * var(--u))) max(28px, calc(68 * var(--u))) max(18px, calc(36 * var(--u)));
  border-width: 1.5px;
  border-radius: max(20px, calc(30 * var(--u)));
  box-shadow: 0 0 70px -24px rgba(99, 102, 241, 0.6);
}

.tpl-04 .sf-tpl-card::before {
  content: '';
  position: absolute;
  inset: max(7px, calc(12 * var(--u)));
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: max(14px, calc(20 * var(--u)));
  pointer-events: none;
}

.tpl-04 .sf-tpl-avatar {
  width: max(52px, calc(98 * var(--u)));
  height: max(52px, calc(98 * var(--u)));
  border: 4px solid transparent;
  background:
    linear-gradient(#0f1d4a, #0f1d4a) padding-box,
    linear-gradient(135deg, #a855f7, #3b82f6) border-box;
  color: #fff;
  box-shadow: inset 0 0 0 4px #0a1130, inset 0 0 0 6px #0ea5e9;
}

.tpl-04 .sf-tpl-avatar svg {
  width: max(22px, calc(36 * var(--u)));
  height: max(22px, calc(36 * var(--u)));
}

.tpl-04 .sf-tpl-avatar::before,
.tpl-04 .sf-tpl-avatar::after {
  content: '';
  position: absolute;
  top: 50%;
  width: max(60px, calc(120 * var(--u)));
  height: 4px;
  border-radius: 999px;
  transform: translateY(-50%);
}

.tpl-04 .sf-tpl-avatar::before {
  right: calc(100% + max(16px, calc(30 * var(--u))));
  background: #7c3aed;
}

.tpl-04 .sf-tpl-avatar::after {
  left: calc(100% + max(16px, calc(30 * var(--u))));
  background: #0a9bff;
}

/* The question is the heading; the step title sits over the answer as a small field label. */
.tpl-04 .sf-single .sf-label {
  font-size: max(24px, calc(44 * var(--u)));
  font-weight: 700;
  letter-spacing: 0.01em;
}

.tpl-04 .sf-single .sf-question {
  gap: max(8px, calc(18 * var(--u)));
}

.tpl-04 .sf-single .sf-label .sf-required {
  display: none;
}

.tpl-04 .sf-single .sf-field-title {
  display: block;
  margin: max(4px, calc(18 * var(--u))) 10px max(-4px, calc(-6 * var(--u)));
  color: #c7d2fe;
  font-size: max(12px, calc(15 * var(--u)));
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tpl-04 .sf-single .sf-field-title .sf-required {
  margin-left: max(12px, calc(30 * var(--u)));
}

.tpl-04 .sf-input-group {
  min-height: max(44px, calc(78 * var(--u)));
  border-width: 1.5px;
  border-radius: max(12px, calc(16 * var(--u)));
}

.tpl-04 .sf-input-icon {
  color: #cbd5e1;
}

.tpl-04 .sf-input {
  font-size: max(15px, calc(22 * var(--u)));
}

.tpl-04 .sf-input::placeholder {
  color: #8b9bd0;
}

.tpl-04 .sf-actions {
  margin-top: max(10px, calc(26 * var(--u)));
}

.tpl-04 .sf-next {
  min-width: max(170px, calc(310 * var(--u)));
  height: max(44px, calc(78 * var(--u)));
  font-size: max(16px, calc(26 * var(--u)));
  font-weight: 700;
  box-shadow: none;
}

.tpl-04 .sf-tpl-progress {
  gap: max(6px, calc(10 * var(--u)));
}

.tpl-04 .sf-tpl-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tpl-04 .sf-tpl-progress-label,
.tpl-04 .sf-tpl-progress-percent {
  font-size: max(12px, calc(15 * var(--u)));
}

.tpl-04 .sf-tpl-progress-label {
  color: #a5b4fc;
  text-transform: uppercase;
}

.tpl-04 .sf-tpl-progress-percent {
  color: #cbd5e1;
}

.tpl-04 .sf-tpl-bar {
  gap: max(6px, calc(11 * var(--u)));
  max-width: 640px;
}

.tpl-04 .sf-tpl-bar > span {
  height: max(5px, calc(7 * var(--u)));
}

.tpl-04 .sf-tpl-bar > span.is-on {
  background: linear-gradient(90deg, #9333ea, #a855f7);
}

.tpl-04 .sf-tpl-note {
  color: #8b95b8;
  font-family: inherit;
  font-size: max(12px, calc(15 * var(--u)));
  text-align: center;
}

.tpl-04 .sf-single .sf-label,
.tpl-05 .sf-single .sf-label,
.tpl-11 .sf-single .sf-label {
  text-align: center;
}

/* ---- 05 Sunrise: peach, orange button ---- */
.sf-page.tpl-05 {
  --tpl-accent: #fb6f3d;
  --tpl-text: #1e2a4a;
  --tpl-soft: #fde4c4;
  --tpl-border: #f3cf9f;
  --tpl-card: rgba(255, 255, 255, 0.88);
  /* The leaves are low on both sides: the image keeps the full width and sits on the bottom,
     so it is cropped (or extended) only at the plain peach top, filled with its top-edge colours. */
  background-color: #fce3c4;
  background-image:
    url('avatars/template/05.png'),
    linear-gradient(90deg, #fce2c3, #fdf2e5 50%, #fbe5c9);
  background-position: center bottom, center;
  background-size: 100vw auto, cover;
}

/* Sized from the 1920 x 1080 sample: --u is 1px there and shrinks with the window
   (width or height, whichever is tighter); max() keeps text and controls usable. */
.sf-page.tpl-05 {
  --u: min(calc(100vh / 1080), calc(100vw / 1920));
}

/* Template 05 drops the shared vertical centring (align-items: center), as tuned in DevTools. */
.tpl-05 .sf-tpl-layout {
  align-items: normal;
}

.tpl-05 .sf-tpl-main {
  max-width: max(600px, calc(730 * var(--u)));
}

.tpl-05 .sf-tpl-card {
  gap: max(18px, calc(30 * var(--u)));
  padding: max(28px, calc(40 * var(--u))) max(24px, calc(62 * var(--u))) max(34px, calc(64 * var(--u)));
  border-radius: max(18px, calc(28 * var(--u)));
  box-shadow: 0 30px 60px -30px rgba(251, 111, 61, 0.35);
}

.tpl-05 .sf-tpl-avatar {
  width: max(52px, calc(100 * var(--u)));
  height: max(52px, calc(100 * var(--u)));
  color: #1e2a4a;
}

.tpl-05 .sf-tpl-avatar svg {
  width: max(24px, calc(44 * var(--u)));
  height: max(24px, calc(44 * var(--u)));
}

.tpl-05 .sf-tpl-avatar::before,
.tpl-05 .sf-tpl-avatar::after {
  width: max(12px, calc(22 * var(--u)));
  height: 2px;
  background: #f5b779;
}

.tpl-05 .sf-tpl-avatar::before {
  left: auto;
  right: calc(100% + max(14px, calc(28 * var(--u))));
}

.tpl-05 .sf-tpl-avatar::after {
  right: auto;
  left: calc(100% + max(14px, calc(28 * var(--u))));
}

.tpl-05 .sf-single .sf-label {
  font-size: max(22px, calc(44 * var(--u)));
  font-weight: 600;
}

.tpl-05 .sf-single .sf-question {
  gap: max(18px, calc(30 * var(--u)));
}

.tpl-05 .sf-input-group {
  min-height: max(44px, calc(80 * var(--u)));
  border-radius: max(10px, calc(14 * var(--u)));
}

.tpl-05 .sf-input {
  font-size: max(15px, calc(26 * var(--u)));
}

.tpl-05 .sf-actions {
  margin-top: max(18px, calc(22 * var(--u)));
}

.tpl-05 .sf-next {
  min-width: max(150px, calc(292 * var(--u)));
  height: max(42px, calc(82 * var(--u)));
  font-size: max(16px, calc(30 * var(--u)));
}

.tpl-05 .sf-tpl-foot .sf-tpl-progress {
  gap: max(6px, calc(12 * var(--u)));
  max-width: 84%;
}

.tpl-05 .sf-tpl-progress-label {
  font-size: max(13px, calc(22 * var(--u)));
}

.tpl-05 .sf-tpl-bar > span {
  height: max(5px, calc(8 * var(--u)));
}

/* ---- 06 Lavender: steps on the left, card on the right ----
   Sized from the 1920 x 1080 sample: --u is 1px there and shrinks with the window (width or
   height, whichever is tighter), so the page fits the screen without an outer scrollbar. */
.sf-page.tpl-06 {
  --u: min(calc(115vh / 1080), calc(100vw / 1920));
  --tpl-accent: #4f3bd8;
  --tpl-text: #111c44;
  --tpl-muted: #7c86a2;
  --tpl-soft: #ece9fd;
  --tpl-track: #e6e8f2;
  padding-top: max(16px, calc(48 * var(--u)));
  padding-bottom: max(16px, calc(48 * var(--u)));
  background-color: #f3f4fb;
  background-image:
    radial-gradient(circle at 96% 92%, rgba(129, 140, 248, 0.45), transparent 26%),
    radial-gradient(circle at 0% 0%, #ffffff, transparent 40%),
    linear-gradient(135deg, #f8f9fe 0%, #eceffa 100%);
}

/* Template 06: top-aligned (no vertical centring) with 50px above, as tuned in DevTools. */
.tpl-06 .sf-tpl-layout {
  align-items: normal;
  gap: 10vw;
  margin-top: 50px;
}

.tpl-06 .sf-tpl-aside {
  gap: max(22px, calc(80 * var(--u)));
  width: max(220px, calc(300 * var(--u)));
}

.tpl-06 .sf-tpl-brand h1 {
  font-size: max(26px, calc(44 * var(--u)));
}

.tpl-06 .sf-tpl-brand p {
  margin-top: max(4px, calc(8 * var(--u)));
  font-size: max(13px, calc(18 * var(--u)));
}

.tpl-06 .sf-tpl-steps.is-vsteps li {
  gap: max(14px, calc(26 * var(--u)));
  padding-bottom: max(18px, calc(36 * var(--u)));
  font-size: max(14px, calc(22 * var(--u)));
}

.tpl-06 .sf-tpl-steps.is-vsteps .sf-tpl-step-dot {
  width: max(30px, calc(50 * var(--u)));
  height: max(30px, calc(50 * var(--u)));
  font-size: max(13px, calc(20 * var(--u)));
}

.tpl-06 .sf-tpl-steps.is-vsteps li:not(:last-child)::after {
  top: max(32px, calc(52 * var(--u)));
  left: calc(max(30px, calc(50 * var(--u))) / 2 - 1px);
}

.tpl-06 .sf-tpl-main {
  max-width: max(520px, calc(890 * var(--u)));
}

.tpl-06 .sf-tpl-card {
  gap: max(10px, calc(18 * var(--u)));
  padding: max(22px, calc(64 * var(--u))) max(30px, calc(95 * var(--u))) max(24px, calc(72 * var(--u)));
  border-radius: max(18px, calc(28 * var(--u)));
}

.tpl-06 .sf-tpl-head {
  align-items: flex-start;
  gap: max(8px, calc(18 * var(--u)));
}

.tpl-06 .sf-tpl-head .sf-tpl-progress {
  align-self: flex-end;
  align-items: flex-end;
  gap: max(6px, calc(12 * var(--u)));
  width: max(180px, calc(300 * var(--u)));
}

.tpl-06 .sf-tpl-progress-label {
  font-size: max(12px, calc(18 * var(--u)));
}

.tpl-06 .sf-tpl-avatar {
  width: max(50px, calc(90 * var(--u)));
  height: max(50px, calc(90 * var(--u)));
}

.tpl-06 .sf-tpl-avatar svg {
  width: max(22px, calc(38 * var(--u)));
  height: max(22px, calc(38 * var(--u)));
}

.tpl-06 .sf-single .sf-label {
  font-size: 22px;
}

.tpl-06 .sf-single .sf-question {
  gap: max(12px, calc(34 * var(--u)));
}

.tpl-06 .sf-input-group {
  min-height: max(44px, calc(88 * var(--u)));
  border-radius: max(10px, calc(16 * var(--u)));
}

.tpl-06 .sf-input {
  font-size: max(15px, calc(26 * var(--u)));
}

.tpl-06 .sf-actions {
  justify-content: flex-end;
  margin-top: max(12px, calc(26 * var(--u)));
}

.tpl-06 .sf-next {
  min-width: max(150px, calc(303 * var(--u)));
  height: max(42px, calc(92 * var(--u)));
  font-size: max(16px, calc(30 * var(--u)));
}

.tpl-06 .sf-tpl-note {
  font-size: max(22px, calc(36 * var(--u)));
  white-space: nowrap;
  transform: rotate(-10deg);
}

.tpl-06 .sf-tpl-steps.is-vsteps li.is-current {
  color: var(--tpl-accent);
}

/* ---- 07 Chat: a bot bubble asks, the answer sits on the right ----
   The plant is at the bottom left, so the image keeps the full width and sits on the bottom
   (cropped or extended only at its plain top). Sizes come from the 1920 x 1080 sample:
   --u is 1px there and shrinks with the window (width or height, whichever is tighter). */
.sf-page.tpl-07 {
  --u: min(calc(100vh / 1080), calc(100vw / 1920));
  --tpl-accent: #0a6cf0;
  --tpl-text: #1e2a4a;
  --tpl-track: #d6e2f5;
  padding-top: max(16px, calc(60 * var(--u)));
  padding-bottom: max(16px, calc(60 * var(--u)));
  background-color: #edf3fb;
  background-image: url('avatars/template/07.png');
  background-position: center bottom;
  background-size: 100vw auto;
}

.tpl-07 .sf-tpl-layout {
  gap: 8vw;
}

.tpl-07 .sf-tpl-aside {
  gap: max(30px, calc(110 * var(--u)));
  width: max(220px, calc(320 * var(--u)));
}

.tpl-07 .sf-tpl-brand h1 {
  font-size: max(34px, calc(72 * var(--u)));
}

.tpl-07 .sf-tpl-brand p {
  font-size: max(13px, calc(22 * var(--u)));
}

.tpl-07 .sf-tpl-note {
  max-width: 7em;
  color: #1e3a6e;
  font-size: max(22px, calc(42 * var(--u)));
  transform: rotate(-6deg);
}

.tpl-07 .sf-tpl-main {
  align-items: stretch;
  gap: max(22px, calc(70 * var(--u)));
  max-width: max(560px, calc(940 * var(--u)));
}

.tpl-07 .sf-tpl-above .sf-tpl-steps {
  max-width: max(380px, calc(720 * var(--u)));
  margin-left: auto;
}

.tpl-07 .sf-tpl-steps li {
  gap: max(6px, calc(12 * var(--u)));
  font-size: max(12px, calc(18 * var(--u)));
}

.tpl-07 .sf-tpl-step-dot {
  width: max(30px, calc(52 * var(--u)));
  height: max(30px, calc(52 * var(--u)));
  font-size: max(13px, calc(22 * var(--u)));
}

.tpl-07 .sf-tpl-steps li:not(:last-child)::after {
  top: calc(max(30px, calc(52 * var(--u))) / 2 - 1px);
  left: calc(50% + max(18px, calc(30 * var(--u))));
  right: calc(-50% + max(18px, calc(30 * var(--u))));
}

.tpl-07 .sf-tpl-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tpl-07 .sf-single .sf-question {
  gap: max(16px, calc(64 * var(--u)));
}

.tpl-07 .sf-single .sf-label {
  position: relative;
  max-width: max(380px, calc(580 * var(--u)));
  margin-left: max(70px, calc(120 * var(--u)));
  padding: max(16px, calc(34 * var(--u))) max(20px, calc(36 * var(--u)));
  border-radius: max(18px, calc(26 * var(--u)));
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 40px -26px rgba(30, 64, 175, 0.35);
  font-size: max(18px, calc(28 * var(--u)));
}

.tpl-07 .sf-single .sf-label::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-1 * max(70px, calc(120 * var(--u))));
  width: max(54px, calc(92 * var(--u)));
  height: max(54px, calc(92 * var(--u)));
  border-radius: 50%;
  background: #cfe0fb url('avatars/bot.png') center 25% / 62% no-repeat;
}

.tpl-07 .sf-single .sf-question > :not(.sf-label):not(.sf-error) {
  width: min(100%, max(340px, calc(540 * var(--u))));
  margin-left: auto;
}

.tpl-07 .sf-input-group {
  min-height: max(44px, calc(92 * var(--u)));
  border-color: transparent;
  border-radius: max(12px, calc(18 * var(--u)));
  box-shadow: 0 16px 34px -22px rgba(30, 64, 175, 0.45);
}

.tpl-07 .sf-input {
  font-size: max(15px, calc(26 * var(--u)));
}

.tpl-07 .sf-actions {
  justify-content: flex-end;
  margin-top: max(12px, calc(30 * var(--u)));
}

.tpl-07 .sf-next {
  min-width: max(150px, calc(302 * var(--u)));
  height: max(42px, calc(88 * var(--u)));
  font-size: max(16px, calc(30 * var(--u)));
}

.tpl-07 .sf-tpl-dots {
  margin-top: calc(-1 * max(20px, calc(40 * var(--u))));
}

/* ---- 08 Mountain: photo panel with the form name, card beside it ----
   The background (16:9) is drawn the full window height, so nothing is cropped and every spot in
   it has a fixed place: --bgw is its width, the photo panel is its left 34.8%, and the frosted
   panel the card covers runs from 34.9% to 81.8% across and 8.15% to 92.15% down. Wider windows
   get the image's right-edge colours past it. --u is 1px at 1920 x 1080 and shrinks with the window. */
.sf-page.tpl-08 {
  --bgw: calc(100vh * 16 / 9);
  --u: min(calc(100vh / 1080), calc(100vw / 1920));
  --tpl-accent: #17897d;
  --tpl-text: #102a43;
  --tpl-soft: #dcefeb;
  padding: 0;
  background-color: #e8f0ef;
  background-image:
    url('avatars/template/08.png'),
    linear-gradient(to bottom, #e8f1f1 0%, #e6eeee 64%, #dbe6e5 67%, #c4d2d2 72%, #a5b9b8 78%, #8da4a2 84%, #7e9794 100%);
  background-position: left top, left top;
  background-repeat: no-repeat;
  background-size: var(--bgw) 100vh, 100% 100vh;
}

/* The leaves over the card's bottom-right corner, cut from the background (08-leaves.png covers
   x 1365-1570, y 850-995 of the 1920 x 1080 image), so they sit in front of the card. */
.sf-page.tpl-08::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: calc(100vh * 850 / 1080);
  left: calc(var(--bgw) * 1365 / 1920);
  width: calc(var(--bgw) * 205 / 1920);
  height: calc(100vh * 145 / 1080);
  background: url('avatars/template/08-leaves.png') center / 100% 100% no-repeat;
  pointer-events: none;
}

.tpl-08 .sf-tpl-layout {
  display: block;
  max-width: none;
}

.tpl-08 .sf-tpl-aside {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  width: calc(var(--bgw) * 0.348);
  padding: 0 calc(var(--bgw) * 0.03) 18vh calc(var(--bgw) * 0.048);
}

.tpl-08 .sf-tpl-brand h1 {
  color: #fff;
  font-size: max(30px, calc(64 * var(--u)));
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

.tpl-08 .sf-tpl-brand h1::before {
  content: '';
  display: block;
  width: max(40px, calc(70 * var(--u)));
  height: 3px;
  margin-bottom: max(16px, calc(36 * var(--u)));
  background: #fff;
}

.tpl-08 .sf-tpl-brand p {
  margin-top: max(8px, calc(18 * var(--u)));
  color: rgba(255, 255, 255, 0.92);
  font-size: max(14px, calc(28 * var(--u)));
}

/* The card starts on the panel edge and spans 8% to 92% of the height, like the sample. */
.tpl-08 .sf-tpl-main {
  position: absolute;
  top: 8.15vh;
  left: calc(var(--bgw) * 0.349);
  width: min(calc(var(--bgw) * 0.469), calc(100vw - var(--bgw) * 0.349 - 24px));
  height: 84vh;
  max-width: none;
}

.tpl-08 .sf-tpl-card {
  flex: 1 1 auto;
  gap: max(14px, calc(40 * var(--u)));
  padding: max(24px, calc(76 * var(--u))) max(28px, calc(97 * var(--u))) max(24px, calc(70 * var(--u)));
  border-radius: max(18px, calc(28 * var(--u)));
}

.tpl-08 .sf-tpl-head {
  align-items: stretch;
  gap: max(18px, calc(70 * var(--u)));
}

.tpl-08 .sf-tpl-steps li {
  gap: max(6px, calc(12 * var(--u)));
  font-size: max(12px, calc(22 * var(--u)));
}

.tpl-08 .sf-tpl-step-dot {
  width: max(30px, calc(58 * var(--u)));
  height: max(30px, calc(58 * var(--u)));
  font-size: max(13px, calc(24 * var(--u)));
}

.tpl-08 .sf-tpl-steps li:not(:last-child)::after {
  top: calc(max(30px, calc(58 * var(--u))) / 2 - 1px);
  left: calc(50% + max(18px, calc(32 * var(--u))));
  right: calc(-50% + max(18px, calc(32 * var(--u))));
}

.tpl-08 .sf-tpl-stepchip {
  gap: max(12px, calc(22 * var(--u)));
  font-size: max(13px, calc(24 * var(--u)));
}

.tpl-08 .sf-tpl-stepchip .sf-tpl-avatar {
  width: max(36px, calc(62 * var(--u)));
  height: max(36px, calc(62 * var(--u)));
}

.tpl-08 .sf-single .sf-label {
  font-size: max(22px, calc(46 * var(--u)));
  font-weight: 700;
}

.tpl-08 .sf-single .sf-question {
  gap: max(14px, calc(40 * var(--u)));
}

.tpl-08 .sf-input-group {
  min-height: max(44px, calc(102 * var(--u)));
  border-width: 2px;
  border-radius: max(12px, calc(20 * var(--u)));
}

.tpl-08 .sf-input {
  font-size: max(15px, calc(30 * var(--u)));
}

.tpl-08 .sf-actions {
  margin-top: max(16px, calc(76 * var(--u)));
}

.tpl-08 .sf-next {
  min-width: max(160px, calc(318 * var(--u)));
  height: max(44px, calc(102 * var(--u)));
  font-size: max(16px, calc(32 * var(--u)));
}

/* ---- 09 Illustration: brand, stepper and question in one square card ----
   Sized from the 1920 x 1080 sample. --u scales the artwork so it covers the window; --off-x and
   --off-y keep the woman and the card in view. The card sits where the sample has it, and --c holds
   it back only on windows too short to show its full height. */
.sf-page.tpl-09 {
  --u: max(calc(100vw / 1920), calc(100vh / 1080));
  --c: min(var(--u), calc((100vh - 24px) / 777));
  --off-x: clamp(calc(100vw - 1920 * var(--u)), calc(50vw - 927 * var(--u)), 0px);
  --off-y: min(0px, calc(50vh - 501 * var(--u)));
  --card: max(480px, calc(777 * var(--c)));
  --dot: max(30px, calc(46 * var(--c)));
  --tpl-accent: #4f2fd8;
  --tpl-text: #1e2a4a;
  --tpl-muted: #6b7690;
  --tpl-soft: #ebe7fd;
  --tpl-border: #d5dbea;
  padding: calc(var(--off-y) + 501 * var(--u) - 388.5 * var(--c)) 0 0 max(0px, calc(var(--off-x) + 1181 * var(--u) - var(--card) / 2));
  background-color: #fbefe6;
  background-image: url('avatars/template/09-full.png');
  background-position: var(--off-x) var(--off-y);
  background-size: calc(1920 * var(--u)) calc(1080 * var(--u));
}

.tpl-09 .sf-tpl-layout {
  align-items: flex-start;
  justify-content: flex-start;
  max-width: none;
  margin: 0;
}

.tpl-09 .sf-tpl-main {
  flex: none;
  width: var(--card);
  max-width: none;
}

.tpl-09 .sf-tpl-card {
  gap: max(8px, calc(22 * var(--c)));
  min-height: calc(777 * var(--c));
  padding: max(14px, calc(34 * var(--c))) max(24px, calc(75 * var(--c))) max(14px, calc(79 * var(--c)));
  border: 0;
  border-radius: max(18px, calc(28 * var(--c)));
}

.tpl-09 .sf-tpl-head {
  align-items: stretch;
  gap: max(8px, calc(38 * var(--c)));
}

.tpl-09 .sf-tpl-brand {
  text-align: center;
}

.tpl-09 .sf-tpl-brand h1 {
  font-size: max(22px, calc(40 * var(--c)));
}

.tpl-09 .sf-tpl-brand p {
  margin-top: max(2px, calc(8 * var(--c)));
  font-size: max(12px, calc(18 * var(--c)));
}

.tpl-09 .sf-tpl-steps li {
  gap: max(4px, calc(12 * var(--c)));
  font-size: max(11px, calc(17 * var(--c)));
}

.tpl-09 .sf-tpl-steps li.is-current {
  color: var(--tpl-accent);
}

.tpl-09 .sf-tpl-step-dot {
  width: var(--dot);
  height: var(--dot);
  border-color: var(--tpl-border);
  color: #4b5a73;
  font-size: max(13px, calc(22 * var(--c)));
}

.tpl-09 .sf-tpl-steps li:not(:last-child)::after {
  top: calc(var(--dot) / 2 - 1px);
  left: calc(50% + var(--dot) / 2 + 4px);
  right: calc(-50% + var(--dot) / 2 + 4px);
}

.tpl-09 .sf-tpl-stepchip {
  gap: max(10px, calc(17 * var(--c)));
  font-size: max(12px, calc(19 * var(--c)));
}

.tpl-09 .sf-tpl-stepchip .sf-tpl-avatar {
  width: max(28px, calc(48 * var(--c)));
  height: max(28px, calc(48 * var(--c)));
}

.tpl-09 .sf-tpl-stepchip .sf-tpl-avatar svg {
  width: max(16px, calc(26 * var(--c)));
  height: max(16px, calc(26 * var(--c)));
}

.tpl-09 .sf-single .sf-question {
  gap: max(5px, calc(18 * var(--c)));
}

.tpl-09 .sf-single .sf-label {
  font-size: max(22px, calc(36 * var(--c)));
  font-weight: 700;
}

.tpl-09 .sf-single .sf-required {
  margin-left: max(4px, calc(8 * var(--c)));
}

.tpl-09 .sf-single .sf-question-sub {
  display: block;
  margin: 0 0 max(4px, calc(32 * var(--c)));
  color: var(--tpl-muted);
  font-size: max(13px, calc(23 * var(--c)));
}

.tpl-09 .sf-input-group {
  min-height: max(40px, calc(80 * var(--c)));
  border-radius: max(12px, calc(20 * var(--c)));
}

.tpl-09 .sf-input-icon {
  width: max(44px, calc(92 * var(--c)));
}

.tpl-09 .sf-input-icon svg {
  width: max(18px, calc(32 * var(--c)));
  height: max(18px, calc(32 * var(--c)));
}

.tpl-09 .sf-input {
  font-size: max(14px, calc(24 * var(--c)));
}

.tpl-09 .sf-single .sf-actions {
  margin-top: max(8px, calc(62 * var(--c)));
}

.tpl-09 .sf-single .sf-next:not(.sf-secondary) {
  width: min(100%, calc(497 * var(--c)));
  min-width: 180px;
  height: max(42px, calc(84 * var(--c)));
  font-size: max(15px, calc(27 * var(--c)));
  font-weight: 600;
}

/* ---- 10 Feedback: artwork on the left, stepper and a wide card on the right ----
   Sized from the 1536 x 1024 design: --u is 1px there and shrinks with the window (width or height,
   whichever is tighter). The artwork is cut from that design (10-left, 10-wave, 10-right, 10-note) so it stays
   in its corners on any window shape, and the stepper is the survey's real steps. */
.sf-page.tpl-10 {
  --u: min(calc(100vw / 1536), calc(100vh / 1024));
  --dot: max(30px, calc(40 * var(--u)));
  --tpl-accent: #2563eb;
  --tpl-text: #0f1d3a;
  --tpl-muted: #5f6f8a;
  --tpl-soft: #e8f0fe;
  --tpl-border: #d5deed;
  --tpl-track: #dfe6f1;
  padding: calc(127 * var(--u)) calc(101 * var(--u)) max(12px, calc(40 * var(--u))) calc(551 * var(--u));
  background-color: #f5f9fe;
  background-image:
    url('avatars/template/10-left.png'),
    url('avatars/template/10-wave.png'),
    url('avatars/template/10-right.png'),
    url('avatars/template/10-note.png');
  background-position: left top, left bottom, right bottom, right max(40px, calc(40 * var(--u))) top calc(28 * var(--u));
  background-size:
    calc(590 * var(--u)) calc(890 * var(--u)),
    calc(590 * var(--u)) calc(134 * var(--u)),
    calc(496 * var(--u)) calc(434 * var(--u)),
    calc(166 * var(--u)) calc(80 * var(--u));
}

.tpl-10 .sf-restart {
  top: 6px;
  right: 8px;
}

.tpl-10 .sf-tpl-layout {
  align-items: flex-start;
}

.tpl-10 .sf-tpl-main {
  gap: max(10px, calc(22 * var(--u)));
  max-width: max(640px, calc(884 * var(--u)));
}

.tpl-10 .sf-tpl-above {
  align-self: flex-start;
  width: 88.2%;
  margin-left: 0.9%;
}

.tpl-10 .sf-tpl-steps li {
  gap: max(5px, calc(14 * var(--u)));
  font-size: max(12px, calc(17 * var(--u)));
}

.tpl-10 .sf-tpl-step-dot {
  width: var(--dot);
  height: var(--dot);
  border-color: #d5deed;
  color: #4b5a73;
  font-size: max(13px, calc(21 * var(--u)));
}

.tpl-10 .sf-tpl-steps li:not(:last-child)::after {
  top: calc(var(--dot) / 2 - 1px);
  left: calc(50% + var(--dot) / 2 + 10 * var(--u));
  right: calc(-50% + var(--dot) / 2 + 10 * var(--u));
}

/* The question, its field and the buttons sit together in the middle of the card, top to bottom. */
.tpl-10 .sf-tpl-card {
  --row-bottom: max(16px, calc(71 * var(--u)));
  --row-side: max(22px, calc(57 * var(--u)));
  --button: max(44px, calc(65 * var(--u)));
  position: relative;
  justify-content: center;
  gap: max(10px, calc(39 * var(--u)));
  min-height: calc(632 * var(--u));
  padding: max(18px, calc(66 * var(--u))) var(--row-side);
  border: 0;
  border-radius: max(16px, calc(22 * var(--u)));
  box-shadow: 0 30px 60px -28px rgba(37, 99, 235, 0.2);
}

.tpl-10 .sf-tpl-head {
  align-items: flex-start;
}

.tpl-10 .sf-tpl-chip {
  padding: max(5px, calc(10 * var(--u))) max(14px, calc(18 * var(--u)));
  font-size: max(13px, calc(18 * var(--u)));
}

.tpl-10 .sf-tpl-chip svg {
  width: max(16px, calc(28 * var(--u)));
  height: max(16px, calc(28 * var(--u)));
}

.tpl-10 .sf-single .sf-question {
  gap: max(6px, calc(18 * var(--u)));
}

.tpl-10 .sf-single .sf-label {
  font-size: max(24px, calc(40 * var(--u)));
  font-weight: 700;
}

.tpl-10 .sf-single .sf-required {
  margin-left: max(4px, calc(10 * var(--u)));
}

.tpl-10 .sf-single .sf-question-sub {
  display: block;
  margin: 0 0 max(6px, calc(34 * var(--u)));
  color: var(--tpl-muted);
  font-size: max(14px, calc(22 * var(--u)));
}

.tpl-10 .sf-input-group {
  min-height: max(44px, calc(84 * var(--u)));
  border-radius: max(12px, calc(16 * var(--u)));
}

.tpl-10 .sf-input-icon {
  width: max(48px, calc(86 * var(--u)));
}

.tpl-10 .sf-input-icon svg {
  width: max(20px, calc(32 * var(--u)));
  height: max(20px, calc(32 * var(--u)));
}

.tpl-10 .sf-input {
  font-size: max(15px, calc(23 * var(--u)));
}

.tpl-10 .sf-single .sf-actions {
  justify-content: flex-end;
  margin: max(16px, calc(40 * var(--u))) 0 0;
}

.tpl-10 .sf-next {
  min-width: max(150px, calc(243 * var(--u)));
  height: var(--button);
  font-size: max(16px, calc(22 * var(--u)));
  font-weight: 600;
}

.tpl-10 .sf-tpl-foot {
  position: absolute;
  bottom: calc(var(--row-bottom) + 5 * var(--u));
  left: var(--row-side);
  gap: max(6px, calc(14 * var(--u)));
  width: max(180px, calc(345 * var(--u)));
}

.tpl-10 .sf-tpl-progress-label {
  font-size: max(12px, calc(17 * var(--u)));
}

/* ---- 11 Sky: icon stepper above a centred card ---- */
/* --u is 1px on a tall window and shrinks on short ones, so the card keeps fitting. */
.sf-page.tpl-11 {
  --u: min(1px, calc(100vh / 840));
  --tpl-accent: #0f3d7a;
  --tpl-button: linear-gradient(180deg, #1a5cb4, #0f3d7a);
  --tpl-text: #0f2a52;
  --tpl-title: #0f3d7a;
  --tpl-soft: #e3edf9;
  --tpl-track: #c9d9ef;
  padding: 5px 5%;
  background-color: #e8f1fc;
  background-image: url('avatars/template/11.png');
}

.tpl-11 .sf-tpl-layout {
  align-items: normal;
}

.tpl-11 .sf-tpl-main {
  gap: 15px;
  max-width: 1120px;
}

.tpl-11 .sf-tpl-steps.is-isteps .sf-tpl-step-dot {
  width: 40px;
  height: 40px;
}

/* The line between the steps follows the smaller icon. */
.tpl-11 .sf-tpl-steps.is-isteps li:not(:last-child)::after {
  top: 24px;
  left: calc(50% + 27px);
  right: calc(-50% + 27px);
}

.tpl-11 .sf-tpl-card {
  gap: max(10px, calc(20 * var(--u)));
  max-width: 830px;
  padding: max(16px, calc(32 * var(--u))) 56px max(12px, calc(26 * var(--u)));
  border: 1px solid #fff;
  border-radius: 26px;
  background: linear-gradient(180deg, #f1f6fd, #fff 160px);
  box-shadow: 0 30px 60px -24px rgba(15, 61, 122, 0.3);
}

.tpl-11 .sf-tpl-head {
  gap: max(10px, calc(22 * var(--u)));
}

/* Avatar: soft disc, white band, dashed ring. */
.tpl-11 .sf-tpl-avatar {
  width: max(52px, calc(84 * var(--u)));
  height: max(52px, calc(84 * var(--u)));
  margin: 8px 0;
  background: linear-gradient(145deg, #edf3fc, #d9e6f7);
  box-shadow: 0 0 0 6px #fff, 0 12px 22px -6px rgba(15, 61, 122, 0.28);
}

.tpl-11 .sf-tpl-avatar::before {
  content: '';
  position: absolute;
  inset: -9px;
  border: 1.5px dashed #c3d4ec;
  border-radius: 50%;
}

.tpl-11 .sf-tpl-avatar svg {
  width: max(24px, calc(36 * var(--u)));
  height: max(24px, calc(36 * var(--u)));
}

.tpl-11 .sf-tpl-avatar-emoji {
  font-size: max(26px, calc(42 * var(--u)));
  line-height: 1;
}

.tpl-11 .sf-single .sf-question {
  gap: max(6px, calc(12 * var(--u)));
}

.tpl-11 .sf-single .sf-label {
  font-size: max(22px, calc(32 * var(--u)));
  font-weight: 700;
}

.tpl-11 .sf-single .sf-required {
  margin-left: 4px;
}

.tpl-11 .sf-greeting {
  margin: 0 0 max(4px, calc(8 * var(--u)));
  color: var(--tpl-muted);
  font-size: 15px;
  text-align: center;
}

.tpl-11 .sf-greeting strong {
  color: var(--tpl-text);
  font-weight: 700;
}

.tpl-11 .sf-input-icon {
  width: 50px;
  color: var(--tpl-accent);
}

.tpl-11 .sf-input-group:focus-within {
  border-color: var(--tpl-accent);
  box-shadow: 0 0 0 3px #dbe7f7;
}

.tpl-11 .sf-input-hints,
.tpl-12 .sf-input-hints {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: -4px;
  color: var(--tpl-muted);
  font-size: 12px;
}

.tpl-11 .sf-input-hints kbd,
.tpl-12 .sf-input-hints kbd {
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--tpl-soft);
  color: var(--tpl-accent);
  font: inherit;
  font-weight: 600;
}

.tpl-11 .sf-actions {
  justify-content: center;
  margin-top: max(10px, calc(18 * var(--u)));
}

.tpl-11 .sf-next {
  min-width: 220px;
  height: max(42px, calc(50 * var(--u)));
  font-size: 17px;
  font-weight: 600;
}

/* Privacy line under a dashed rule; .sf-tpl-foot is already hidden on section pages. */
.tpl-11 .sf-tpl-foot {
  align-items: center;
  padding-top: max(10px, calc(18 * var(--u)));
  border-top: 1px dashed #c3d4ec;
}

.tpl-11 .sf-tpl-trust,
.tpl-12 .sf-tpl-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--tpl-muted);
  font-size: 13px;
}

/* ---- 12 Stack: stacked card on the left, steps down the right ----
   Sized from the 1920 x 1080 sample: --u is 1px there and follows the window width, held back on
   short windows (100vh / 900) so the card and the five-step list still fit without page scroll. */
.sf-page.tpl-12 {
  --u: min(calc(100vw / 1920), calc(100vh / 900));
  --tpl-accent: #43399e;
  --tpl-button: linear-gradient(180deg, #5b4fc4, #43399e);
  --tpl-text: #141a4a;
  --tpl-muted: #7d84a8;
  --tpl-soft: #e5e3f8;
  --tpl-track: #e3e4f0;
  padding-top: max(16px, calc(48 * var(--u)));
  padding-bottom: max(16px, calc(48 * var(--u)));
  background-color: #f1f1fb;
  background-image: url('avatars/template/12.png');
}

.tpl-12 .sf-tpl-layout {
  gap: 9vw;
}

.tpl-12 .sf-tpl-main {
  max-width: max(480px, calc(825 * var(--u)));
}

/* The sample card is 825 x 657; its content sits in the middle of that height. */
.tpl-12 .sf-tpl-card {
  justify-content: center;
  min-height: calc(657 * var(--u));
  gap: max(10px, calc(24 * var(--u)));
  position: relative;
  padding: max(20px, calc(48 * var(--u))) max(24px, calc(56 * var(--u)));
  border: 1px solid #ebebf6;
  background: radial-gradient(circle at 100% 0, #ece9fb, transparent calc(190 * var(--u))), var(--tpl-card);
  box-shadow: 0 24px 50px -24px rgba(67, 57, 158, 0.22);
}

/* Two cards stacked behind, down and to the right, each with its own edge and shadow (as in the
   sample). They hang off the main column, a stacking context that keeps them above the page
   background, so they stay put while the front card moves. */
.tpl-12 .sf-tpl-main {
  z-index: 0;
}

.tpl-12 .sf-tpl-main::before,
.tpl-12 .sf-tpl-main::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid #e7e7f4;
  border-radius: 24px;
  pointer-events: none;
}

.tpl-12 .sf-tpl-main::before {
  z-index: -1;
  background: #fafaff;
  box-shadow: 0 18px 40px -22px rgba(67, 57, 158, 0.2);
  transform: translate(calc(40 * var(--u)), calc(38 * var(--u)));
}

.tpl-12 .sf-tpl-main::after {
  z-index: -2;
  background: #f5f5fd;
  box-shadow: 0 18px 40px -22px rgba(67, 57, 158, 0.16);
  transform: translate(calc(80 * var(--u)), calc(72 * var(--u)));
}

/* Card shuffle on Next: the answered card swings out to the left, drops behind the deck and settles
   at the back, while the next card comes forward from the first stacked position. */
.sf-page.is-shuffling {
  overflow: hidden;
}

.is-shuffling .sf-tpl-layout {
  position: relative;
  z-index: 0;
}

.tpl-12 .sf-tpl-main.is-leaving {
  position: absolute;
  max-height: none;
  margin: 0;
  pointer-events: none;
  animation: sf-card-leave 0.7s ease-in-out both;
}

.tpl-12 .sf-tpl-main.is-leaving::before,
.tpl-12 .sf-tpl-main.is-leaving::after {
  display: none;
}

.tpl-12 .sf-tpl-card.is-arriving {
  animation: sf-card-arrive 0.7s ease-in-out both;
}

.is-leaving .sf-stage,
.is-arriving .sf-stage {
  animation: none;
}

@keyframes sf-card-leave {
  0% {
    z-index: 3;
    transform: none;
  }

  42% {
    z-index: 3;
    transform: translate(-16%, -3%) rotate(-5deg) scale(0.96);
  }

  43% {
    z-index: -3;
    transform: translate(-16%, -3%) rotate(-5deg) scale(0.96);
  }

  85% {
    z-index: -3;
    opacity: 1;
  }

  100% {
    z-index: -3;
    opacity: 0;
    transform: translate(calc(80 * var(--u)), calc(72 * var(--u)));
  }
}

@keyframes sf-card-arrive {
  0%,
  30% {
    transform: translate(calc(40 * var(--u)), calc(38 * var(--u)));
  }

  100% {
    transform: none;
  }
}

.tpl-12 .sf-tpl-head {
  flex-flow: row wrap;
  justify-content: flex-start;
  gap: max(10px, calc(26 * var(--u))) max(14px, calc(30 * var(--u)));
}

.tpl-12 .sf-tpl-avatar {
  width: max(50px, calc(84 * var(--u)));
  height: max(50px, calc(84 * var(--u)));
  border-radius: 28%;
  background: linear-gradient(145deg, #6355d6, #43399e);
  color: #fff;
  box-shadow: 0 12px 22px -10px rgba(67, 57, 158, 0.7);
}

.tpl-12 .sf-tpl-avatar-initials {
  font-size: max(18px, calc(32 * var(--u)));
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tpl-12 .sf-tpl-avatar svg {
  width: max(22px, calc(36 * var(--u)));
  height: max(22px, calc(36 * var(--u)));
}

.tpl-12 .sf-tpl-head .sf-tpl-progress {
  flex: 1 1 0;
  min-width: 0;
  gap: max(6px, calc(12 * var(--u)));
}

/* No "Step X of N" and no bar here: only the percentage, on the right. */
.tpl-12 .sf-tpl-progress .sf-tpl-bar {
  display: none;
}

.tpl-12 .sf-tpl-progress-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.tpl-12 .sf-tpl-progress-label {
  display: none;
}

.tpl-12 .sf-tpl-progress-label strong {
  color: var(--tpl-text);
  font-weight: 700;
}

.tpl-12 .sf-tpl-progress-percent {
  padding: 1px max(8px, calc(14 * var(--u)));
  border-radius: 999px;
  background: var(--tpl-soft);
  color: var(--tpl-accent);
  font-size: max(11px, calc(20 * var(--u)));
  font-weight: 700;
}

.tpl-12 .sf-tpl-eyebrow {
  flex-basis: 100%;
  margin-bottom: calc(-10 * var(--u));
  color: #5b4fd1;
  font-size: max(11px, calc(20 * var(--u)));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tpl-12 .sf-single .sf-label {
  font-size: max(24px, calc(56 * var(--u)));
  font-weight: 800;
}

.tpl-12 .sf-single .sf-required {
  margin-left: 4px;
}

.tpl-12 .sf-single .sf-question {
  gap: max(6px, calc(14 * var(--u)));
}

.tpl-12 .sf-greeting {
  margin: 0 0 max(2px, calc(12 * var(--u)));
  color: var(--tpl-muted);
  font-size: max(14px, calc(26 * var(--u)));
}

.tpl-12 .sf-greeting strong {
  color: var(--tpl-accent);
  font-weight: 700;
}

.tpl-12 .sf-single .sf-field-title {
  display: block;
  color: var(--tpl-text);
  font-size: max(13px, calc(22 * var(--u)));
  font-weight: 700;
}

.tpl-12 .sf-field-title .sf-required {
  display: none;
}

.tpl-12 .sf-input-group {
  min-height: max(44px, calc(88 * var(--u)));
  border-radius: max(10px, calc(16 * var(--u)));
}

.tpl-12 .sf-input-group:focus-within {
  border-color: var(--tpl-accent);
  box-shadow: 0 0 0 3px #e5e3f8;
}

.tpl-12 .sf-input-icon {
  width: max(46px, calc(76 * var(--u)));
  color: var(--tpl-accent);
}

/* The field's icon sits in its own soft tile. */
.tpl-12 .sf-input-icon svg {
  box-sizing: content-box;
  width: max(16px, calc(24 * var(--u)));
  height: max(16px, calc(24 * var(--u)));
  padding: max(4px, calc(7 * var(--u)));
  border-radius: max(6px, calc(10 * var(--u)));
  background: var(--tpl-soft);
}

.tpl-12 .sf-input {
  font-size: max(15px, calc(28 * var(--u)));
}

.tpl-12 .sf-input-hints {
  font-size: max(12px, calc(20 * var(--u)));
}

.tpl-12 .sf-actions {
  justify-content: flex-start;
  margin-top: max(8px, calc(24 * var(--u)));
}

.tpl-12 .sf-next {
  min-width: max(160px, calc(455 * var(--u)));
  height: max(42px, calc(88 * var(--u)));
  font-size: max(16px, calc(28 * var(--u)));
  font-weight: 700;
}

.tpl-12 .sf-single .sf-next {
  border-radius: max(12px, calc(20 * var(--u)));
}

.tpl-12 .sf-single .sf-next:not(.sf-secondary) {
  flex: 1;
}

/* The arrow sits in its own small tile on the button. */
.tpl-12 .sf-single .sf-actions .sf-next:not(.sf-secondary)::after {
  display: inline-block;
  margin-left: max(10px, calc(18 * var(--u)));
  padding: 0 max(7px, calc(12 * var(--u)));
  border-radius: max(6px, calc(10 * var(--u)));
  background: rgba(255, 255, 255, 0.2);
}

.tpl-12 .sf-tpl-foot {
  align-items: center;
}

.tpl-12 .sf-tpl-trust {
  font-size: max(12px, calc(20 * var(--u)));
}

.tpl-12 .sf-tpl-side {
  width: max(200px, calc(300 * var(--u)));
}

.tpl-12 .sf-tpl-steps.is-vsteps li {
  gap: max(14px, calc(30 * var(--u)));
  padding-bottom: max(16px, calc(84 * var(--u)));
  font-size: max(14px, calc(24 * var(--u)));
}

.tpl-12 .sf-tpl-steps.is-vsteps .sf-tpl-step-dot {
  width: max(30px, calc(58 * var(--u)));
  height: max(30px, calc(58 * var(--u)));
  font-size: max(13px, calc(24 * var(--u)));
}

.tpl-12 .sf-tpl-steps.is-vsteps li:not(:last-child)::after {
  top: calc(max(30px, calc(58 * var(--u))) + 2px);
  left: calc(max(30px, calc(58 * var(--u))) / 2 - 1px);
}

.tpl-12 .sf-tpl-steps.is-vsteps li.is-current {
  color: var(--tpl-accent);
}

/* ---- 13 Aurora: glass card over a moving aurora, stepper inside the card ----
   Drawn for a 1920 x 1080 screen: --u is 1px there and only shrinks the spacing on short windows,
   so the sample's section page still fits without scrolling on a 555px tall window. */
.sf-page.tpl-13 {
  --u: min(1px, calc(100vh / 830));
  --pad-x: 40px;
  --pad-y: calc(30 * var(--u));
  --tpl-accent: #a78bfa;
  --tpl-button: #fff;
  --tpl-button-text: #2a1a8a;
  --tpl-text: #fff;
  --tpl-muted: #c3bfe3;
  --tpl-card: linear-gradient(145deg, rgba(134, 110, 255, 0.45), rgba(134, 118, 214, 0.2) 34%, rgba(150, 160, 235, 0.13));
  --tpl-card-border: rgba(255, 255, 255, 0.28);
  --tpl-border: rgba(255, 255, 255, 0.2);
  --tpl-input: rgba(14, 10, 48, 0.42);
  --tpl-track: rgba(255, 255, 255, 0.18);
  --tpl-soft: rgba(255, 255, 255, 0.14);
  z-index: 1;
  color-scheme: dark;
  background-color: transparent;
  font-family: 'Inter', 'Figtree', sans-serif;
}

/* The moving background: three blurred colours drifting, four shapes floating, a little grain. */
.sf-tpl-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #140f3a;
}

.sf-tpl-backdrop span {
  position: absolute;
  border-radius: 50%;
}

.sf-tpl-backdrop .is-aurora-a,
.sf-tpl-backdrop .is-aurora-b,
.sf-tpl-backdrop .is-aurora-c {
  filter: blur(90px);
  mix-blend-mode: screen;
  will-change: transform;
}

.sf-tpl-backdrop .is-aurora-a {
  top: -25vw;
  left: -15vw;
  width: 60vw;
  height: 60vw;
  background: #5b3df5;
  opacity: 0.75;
  animation: sf-aurora-one 16s ease-in-out infinite alternate;
}

.sf-tpl-backdrop .is-aurora-b {
  top: 10vh;
  right: -15vw;
  width: 50vw;
  height: 50vw;
  background: #ff4fa3;
  opacity: 0.5;
  animation: sf-aurora-two 20s ease-in-out infinite alternate;
}

.sf-tpl-backdrop .is-aurora-c {
  bottom: -25vw;
  left: 25vw;
  width: 45vw;
  height: 45vw;
  background: #22c3ee;
  opacity: 0.45;
  animation: sf-aurora-one 24s ease-in-out infinite alternate-reverse;
}

.sf-tpl-backdrop .is-ball-a {
  top: 14%;
  left: 10%;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at 30% 30%, #fff, #a99cff 40%, #5b3df5 80%);
  box-shadow: 0 30px 60px -10px rgba(91, 61, 245, 0.6);
  animation: sf-float 9s ease-in-out infinite;
}

.sf-tpl-backdrop .is-ball-b {
  top: 18%;
  right: 14%;
  width: 70px;
  height: 70px;
  background: radial-gradient(circle at 30% 30%, #fff, #ffa6d1 40%, #ff4fa3 85%);
  animation: sf-float 9s ease-in-out -3s infinite;
}

.sf-tpl-backdrop .is-tile {
  right: 8%;
  bottom: 10%;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.04));
  transform: rotate(25deg);
  animation: sf-float-tile 12s ease-in-out infinite;
}

.sf-tpl-backdrop .is-ring {
  bottom: 14%;
  left: 12%;
  width: 90px;
  height: 90px;
  border: 14px solid rgba(34, 195, 238, 0.55);
  animation: sf-float 9s ease-in-out -5s infinite;
}

.sf-tpl-backdrop .is-noise {
  inset: 0;
  border-radius: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
}

@keyframes sf-aurora-one {
  to { transform: translate(10vw, 8vh) scale(1.15); }
}

@keyframes sf-aurora-two {
  to { transform: translate(-12vw, -6vh) scale(0.9); }
}

@keyframes sf-float {
  50% { transform: translateY(-28px); }
}

@keyframes sf-float-tile {
  50% { transform: rotate(40deg) translateY(-20px); }
}

@media (prefers-reduced-motion: reduce) {
  .sf-tpl-backdrop span {
    animation: none;
  }
}

.tpl-13 .sf-tpl-main {
  max-width: 640px;
}

.tpl-13 .sf-tpl-card,
.tpl-13 .sf-tpl-main.is-section .sf-tpl-card {
  position: relative;
  gap: calc(25 * var(--u));
  padding: var(--pad-y) var(--pad-x);
  border-radius: 28px;
  box-shadow: 0 40px 80px -24px rgba(6, 4, 30, 0.75);
  backdrop-filter: blur(24px);
}

.tpl-13 .sf-tpl-steps li {
  flex: 1 1 auto;
  flex-direction: row;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}

.tpl-13 .sf-tpl-steps li:last-child {
  flex: 0 1 auto;
}

.tpl-13 .sf-tpl-steps li:not(:last-child)::after {
  position: static;
  flex: 1 1 12px;
  min-width: 12px;
  height: 2px;
  margin: 0 12px 0 3px;
}

.tpl-13 .sf-tpl-steps li.is-done::after {
  background: #3ddc97;
}

.tpl-13 .sf-tpl-step-label {
  flex: 0 1 auto;
}

/* Four or five labels do not fit in the row, so only the current step keeps its name. */
.tpl-13 .sf-tpl-steps:has(li:nth-child(4)) li:not(.is-current) .sf-tpl-step-label {
  display: none;
}

.tpl-13 .sf-tpl-steps:has(li:nth-child(4)) li.is-current .sf-tpl-step-label {
  flex: none;
}

.tpl-13 .sf-tpl-step-dot {
  width: 30px;
  height: 30px;
  margin: 5px 0;
  border: 0;
  background: var(--tpl-soft);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.tpl-13 .sf-tpl-steps li.is-current .sf-tpl-step-dot {
  margin-inline: 5px;
  background: #fff;
  color: #3b27b0;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.24);
}

/* A finished step shows a tick in place of its number. */
.tpl-13 .sf-tpl-steps li.is-done .sf-tpl-step-dot {
  background: #3ddc97 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c3b2b' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat;
  font-size: 0;
}

.tpl-13 .sf-tpl-steps li.is-current {
  color: #fff;
}

.tpl-13 .sf-tpl-steps li.is-done {
  color: var(--tpl-muted);
}

.tpl-13 .sf-required {
  margin-left: 5px;
  color: #ff6b8a;
}

.tpl-13 .sf-error {
  color: #ffa3b4;
}

.tpl-13 .sf-question {
  gap: 12px;
}

.tpl-13 .sf-label,
.tpl-13 .sf-tpl-main.is-section .sf-section-body .sf-label {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.tpl-13 .sf-single .sf-label {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
}

.tpl-13 .sf-area,
.tpl-13 .sf-file,
.tpl-13 .sf-select {
  border-color: var(--tpl-border);
  background: var(--tpl-input);
  color: var(--tpl-text);
}

.tpl-13 .sf-terms {
  border-color: var(--tpl-border);
  background: var(--tpl-input);
}

.tpl-13 .sf-captcha-sum {
  background: var(--tpl-soft);
  color: #fff;
}

.tpl-13 .sf-check.is-correct {
  color: #6ee7b7;
}

.tpl-13 .sf-check.is-wrong {
  color: #ffa3b4;
}

/* The section's title is the small line over its description, which is the heading. */
.tpl-13 .sf-section-head {
  padding-bottom: 0;
  border-bottom: 0;
}

.tpl-13 .sf-tpl-main.is-section .sf-section-head h2 {
  color: var(--tpl-muted);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tpl-13 .sf-tpl-main.is-section .sf-section-head p {
  display: block;
  margin-top: 7px;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
}

/* The side padding keeps a raised scale button inside the box that scrolls. */
.tpl-13 .sf-tpl-main.is-section .sf-section-body {
  gap: calc(28 * var(--u));
  margin-inline: -6px -12px;
  padding: calc(30 * var(--u)) 12px calc(28 * var(--u)) 6px;
}

.tpl-13 .sf-choice:not(.is-selected) {
  border-color: var(--tpl-border);
  background: rgba(255, 255, 255, 0.07);
}

.tpl-13 .sf-choice.is-selected {
  border-color: #fff;
  background: #fff;
  color: #2a1a8a;
}

.tpl-13 .sf-choice-box.is-on {
  border-color: #2a1a8a;
  color: #2a1a8a;
}

/* Yes / No: one dark track with the chosen side in white. */
.tpl-13 .sf-yesno {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: var(--tpl-input);
}

.tpl-13 .sf-yesno .sf-yesno-btn {
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 11px;
  font-size: 18px;
  font-weight: 700;
}

.tpl-13 .sf-yesno .sf-yesno-btn:not(.is-selected) {
  background: transparent;
}

/* The thumbs are emoji here; with thumbs turned off for the step there is no icon to replace. */
.tpl-13 .sf-yesno-btn svg {
  display: none;
}

.tpl-13 .sf-yesno-btn:first-child svg + span::before {
  content: '\1F44D\00A0';
}

.tpl-13 .sf-yesno-btn:last-child svg + span::before {
  content: '\1F44E\00A0';
}

/* Opinion scale: red to green up to the chosen number, which lifts and glows. */
.tpl-13 .sf-scale-btn:nth-child(1) { --scale: #ed2121; }
.tpl-13 .sf-scale-btn:nth-child(2) { --scale: #ed5126; }
.tpl-13 .sf-scale-btn:nth-child(3) { --scale: #ee7f2b; }
.tpl-13 .sf-scale-btn:nth-child(4) { --scale: #eeab2f; }
.tpl-13 .sf-scale-btn:nth-child(5) { --scale: #efd634; }
.tpl-13 .sf-scale-btn:nth-child(6) { --scale: #e0ef39; }
.tpl-13 .sf-scale-btn:nth-child(7) { --scale: #b7ef34; }
.tpl-13 .sf-scale-btn:nth-child(8) { --scale: #8cee2f; }
.tpl-13 .sf-scale-btn:nth-child(9) { --scale: #5fee2b; }
.tpl-13 .sf-scale-btn:nth-child(10) { --scale: #3fe02f; }
.tpl-13 .sf-scale-btn:nth-child(11) { --scale: #22cc3a; }

.tpl-13 .sf-scale-btn {
  height: 45px;
  padding: 0;
  border: 1px solid var(--tpl-border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 17px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease;
}

.tpl-13 .sf-scale-btn:hover,
.tpl-13 .sf-scale-btn:has(~ .is-on),
.tpl-13 .sf-scale-btn.is-on {
  border-color: transparent;
  background: var(--scale);
}

.tpl-13 .sf-scale-btn.is-on {
  transform: translateY(-5px) scale(1.14);
  box-shadow: 0 10px 22px -4px var(--scale);
}

.tpl-13 .sf-scale-wrap .sf-scale-ends {
  margin-top: 9px;
  color: var(--tpl-muted) !important;
}

.tpl-13 .sf-scale-wrap .sf-scale-ends span:first-child::before {
  content: '\1F61E\00A0';
}

.tpl-13 .sf-scale-wrap .sf-scale-ends span:last-child::after {
  content: '\00A0\1F929';
}

/* A line over the button row, whichever page it is on; the trust note sits at its left. */
.tpl-13 .sf-single .sf-actions,
.tpl-13 .sf-tpl-main.is-section .sf-section-foot {
  border-top: 1px solid var(--tpl-track);
}

.tpl-13 .sf-single .sf-actions {
  margin-top: calc(26 * var(--u));
  padding-top: calc(22 * var(--u));
}

.tpl-13 .sf-tpl-main.is-section .sf-section-foot {
  align-items: stretch;
  padding: calc(22 * var(--u)) 0 0;
}

.tpl-13 .sf-actions {
  justify-content: flex-end;
}

.tpl-13 .sf-section-foot .sf-actions {
  margin-top: 0;
}

.tpl-13 .sf-next,
.tpl-13 .sf-tpl-main.is-section .sf-next {
  min-width: 140px;
  height: 48px;
  padding: 0 24px;
  font-size: 17px;
  font-weight: 700;
  box-shadow: none;
}

/* Drawn, because Inter's web font has no arrow and the fallback's is long and thin. */
.tpl-13 .sf-actions .sf-next:not(.sf-secondary)::after {
  content: '';
  width: 17px;
  height: 17px;
  margin-left: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1a8a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tpl-13 .sf-tpl-foot,
.tpl-13 .sf-tpl-main.is-section .sf-tpl-foot {
  position: absolute;
  bottom: var(--pad-y);
  left: var(--pad-x);
  display: flex;
  justify-content: center;
  width: auto;
  height: 48px;
}

/* The thank you page has no button row for it to sit beside. */
.tpl-13 .sf-tpl-card:has(.sf-done) .sf-tpl-foot {
  display: none;
}

.tpl-13 .sf-tpl-trust {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--tpl-muted);
  font-size: 13px;
}

.tpl-13 .sf-tpl-trust svg {
  color: #f2b63c;
}

/* ---- Custom: the builder's popup picks the background and the side of the screen ---- */
.tpl-custom .sf-tpl-main {
  max-width: 620px;
}

/* Only the form, no card. A section keeps the shared white card: its several questions need it to stay readable. */
.tpl-custom .sf-tpl-main:not(.is-section) .sf-tpl-card {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* A dark background colour with no card: light text, and answers that are glass instead of white. */
.sf-page.tpl-custom.is-dark {
  --tpl-text: #f1f5f9;
  --tpl-muted: #cbd5e1;
  --tpl-border: rgba(255, 255, 255, 0.35);
  --tpl-input: rgba(255, 255, 255, 0.1);
  --tpl-track: rgba(255, 255, 255, 0.2);
  color-scheme: dark;
}

.tpl-custom.is-dark .sf-choice:not(.is-selected),
.tpl-custom.is-dark .sf-area,
.tpl-custom.is-dark .sf-file {
  border-color: var(--tpl-border);
  background: var(--tpl-input);
  color: var(--tpl-text);
}

/* Small screens keep the one centred column: the card fills the width there anyway. */
@media (min-width: 901px) {
  .tpl-custom .sf-tpl-layout {
    max-width: none;
  }

  .tpl-custom.is-align-left .sf-tpl-layout {
    justify-content: flex-start;
  }

  .tpl-custom.is-align-right .sf-tpl-layout {
    justify-content: flex-end;
  }

  /* The restart button moves out of the card's way. */
  .tpl-custom.is-align-right .sf-restart {
    right: auto;
    left: 5%;
  }
}

/* Dark templates: choice buttons on glass instead of white, so their light text stays readable. */
.tpl-01 .sf-choice:not(.is-selected),
.tpl-04 .sf-choice:not(.is-selected) {
  background: rgba(255, 255, 255, 0.07);
}

.tpl-01 .sf-choice:not(.is-selected) {
  border-color: rgba(226, 172, 74, 0.45);
}

.tpl-04 .sf-choice:not(.is-selected) {
  border-color: rgba(148, 163, 184, 0.35);
}

/* Template 01's text boxes and upload box stay white, so their text is dark;
   template 04's turn dark glass like its inputs. */
.tpl-01 .sf-area,
.tpl-01 .sf-select {
  color: #1f2937;
}

.tpl-01 .sf-file {
  color: #4b5563;
}

.tpl-04 .sf-area,
.tpl-04 .sf-file {
  border-color: var(--tpl-border);
  background: var(--tpl-input);
  color: var(--tpl-text);
}

/* Section pages show no "Step X of N" (bar, chip or counter); the questions get the room. */
.sf-tpl-main.is-section .sf-tpl-foot,
.tpl-10 .sf-tpl-main.is-section .sf-tpl-head,
.tpl-02 .sf-tpl-main.is-section .sf-tpl-head,
.tpl-03 .sf-tpl-main.is-section .sf-tpl-head,
.tpl-04 .sf-tpl-main.is-section .sf-tpl-head,
.tpl-11 .sf-tpl-main.is-section .sf-tpl-head,
.tpl-12 .sf-tpl-main.is-section .sf-tpl-head,
.sf-tpl-main.is-section .sf-tpl-progress,
.sf-tpl-main.is-section .sf-tpl-chip,
.sf-tpl-main.is-section .sf-tpl-stepchip {
  display: none;
}

/* Template 07 section pages: no gap between the stepper, the section card and the dots. */
.tpl-07 .sf-tpl-main.is-section {
  gap: 0;
}

.tpl-07 .sf-section-head {
  border-bottom: 0;
}

.tpl-07 .sf-section-foot {
  border-top: 0;
}

/* Template 05 keeps its icon on section pages, smaller. */
.tpl-05 .sf-tpl-main.is-section .sf-tpl-avatar {
  width: 45px;
  height: 45px;
}

.tpl-05 .sf-tpl-main.is-section .sf-tpl-avatar svg {
  width: 22px;
  height: 22px;
}

/* Template 05 section card: tight top and bottom padding (other templates keep 28px). */
@media (min-width: 901px) {
  .tpl-05 .sf-tpl-main.is-section .sf-tpl-card {
    gap: 1px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* ---- Section pages: the card keeps to the screen height and its questions scroll inside ---- */
@media (min-width: 901px) {
  .sf-page.sf-tpl:has(.sf-tpl-main.is-section) {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .sf-page.tpl-11:has(.sf-tpl-main.is-section) {
    padding-top: 7px;
  }

  .sf-tpl-main.is-section {
    max-height: calc(90vh - 40px);
  }

  /* The page padding here is 7px + 20px, so the card runs down to the bottom padding. */
  .tpl-11 .sf-tpl-main.is-section {
    max-height: calc(100vh - 27px);
  }

  .sf-tpl-main.is-section .sf-section-body .sf-label {
    font-size: 20px;
  }

  .tpl-10 .sf-tpl-main.is-section {
    max-height: calc(100vh - 40px);
  }

  .sf-tpl-main.is-section .sf-tpl-card,
  .tpl-10 .sf-tpl-main.is-section .sf-tpl-card {
    flex: 0 1 auto;
    gap: 14px;
    min-height: 0;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .tpl-11 .sf-tpl-main.is-section .sf-tpl-card {
    padding-inline: 30px;
  }

  .tpl-10 .sf-tpl-main.is-section .sf-tpl-foot {
    position: static;
    width: 100%;
  }

  .sf-tpl-main.is-section .sf-section-head {
    padding-bottom: 1px;
  }

  .sf-tpl-main.is-section .sf-section-head h2 {
    font-size: 20px;
  }

  /* Only the section title shows; its description would take room from the questions. */
  .sf-tpl-main.is-section .sf-section-head p {
    display: none;
  }

  .sf-tpl-main.is-section .sf-section-body {
    gap: 28px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .sf-tpl-main.is-section .sf-section-foot {
    padding: 4px 0 0;
  }

  .tpl-09 .sf-tpl-main.is-section,
  .tpl-13 .sf-tpl-main.is-section {
    max-height: calc(100vh - 40px);
  }

  /* The section has its own title, so the form name header (01, 09) gives its room to the questions. */
  .sf-tpl-main.is-section .sf-tpl-head .sf-tpl-brand,
  .tpl-01 .sf-tpl-main.is-section .sf-tpl-head {
    display: none;
  }

  .sf-tpl-main.is-section .sf-actions {
    margin-top: 0;
  }

  .sf-tpl-main.is-section .sf-next {
    min-width: 90px;
    height: 34px;
    padding: 0 15px;
    font-size: 15px;
  }

  .sf-tpl-main.is-section .sf-tpl-head,
  .sf-tpl-main.is-section .sf-tpl-foot,
  .sf-tpl-main.is-section .sf-section-head,
  .sf-tpl-main.is-section .sf-section-foot {
    flex: none;
  }

  .sf-tpl-main.is-section .sf-shell,
  .sf-tpl-main.is-section .sf-stage,
  .sf-tpl-main.is-section .sf-section {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .sf-tpl-main.is-section .sf-section-body {
    flex: 1 1 auto;
    min-height: 0;
    margin-right: -12px;
    padding-right: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: color-mix(in srgb, var(--tpl-accent) 55%, transparent) transparent;
    scrollbar-width: thin;
  }
}

/* ---- The page keeps to the screen: the background never scrolls, the card scrolls inside ----
   Like RBot. The head (logo, title) and foot (progress) stay in place; the question area scrolls. */
.sf-page.sf-tpl {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.sf-tpl-layout {
  min-height: 0;
}

@media (min-width: 901px) {
  .sf-tpl-main:not(.is-section) {
    max-height: 100%;
  }

  /* Low specificity on purpose: a template's own card min-height still wins. */
  .sf-tpl-card {
    min-height: 0;
  }

  .sf-tpl-main:not(.is-section) .sf-tpl-card {
    flex: 0 1 auto;
  }

  .sf-tpl-main:not(.is-section) .sf-tpl-head,
  .sf-tpl-main:not(.is-section) .sf-tpl-foot,
  .sf-tpl-main:not(.is-section) .sf-tpl-above,
  .sf-tpl-main:not(.is-section) .sf-tpl-after,
  .sf-tpl-main:not(.is-section) .sf-shell > .sf-html {
    flex: none;
  }

  .sf-tpl-main:not(.is-section) .sf-shell {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* The side padding keeps focus rings and raised buttons inside the box that scrolls. */
  .sf-tpl-main:not(.is-section) .sf-stage {
    flex: 1 1 auto;
    min-height: 0;
    margin-inline: -12px;
    padding-inline: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: color-mix(in srgb, var(--tpl-accent) 55%, transparent) transparent;
    scrollbar-width: thin;
  }
}

/* One column on small screens: the column scrolls over the still background. */
@media (max-width: 900px) {
  .sf-tpl-layout {
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sf-tpl-layout > :first-child {
    margin-top: auto;
  }

  .sf-tpl-layout > :last-child {
    margin-bottom: auto;
  }
}

/* ---- Spin wheel page: no head mark (leaf) over the question, and a taller card ---- */
.sf-tpl-main.is-spin .sf-tpl-leaf,
.sf-tpl-main.is-spin .sf-tpl-head:has(> .sf-tpl-leaf:only-child) {
  display: none;
}

@media (min-width: 901px) {
  .sf-page.sf-tpl:has(.sf-tpl-main.is-spin) {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* A compact foot (Step X of N) so the wheel gets the room. */
  .sf-tpl-main.is-spin .sf-tpl-card {
    gap: 10px;
    padding-top: clamp(16px, 1.4vw, 26px);
    padding-bottom: clamp(14px, 1.2vw, 22px);
  }

  .sf-tpl-main.is-spin .sf-tpl-foot {
    gap: 6px;
  }

  .sf-tpl-main.is-spin .sf-tpl-progress-label {
    font-size: 14px;
  }

  .sf-tpl-main.is-spin .sf-actions {
    margin-top: 6px;
  }

  .sf-tpl-main.is-spin .sf-next {
    height: 46px;
    font-size: 17px;
  }

  /* The wheel follows the screen height, so it shows whole with Submit under it. */
  .sf-tpl-main.is-spin .sf-spin {
    gap: 10px;
    width: min(100%, 420px, calc(100vh - var(--spin-room, 312px)));
  }

  .sf-tpl-main.is-spin .sf-spin-stage {
    margin-top: 8px;
  }

  /* Room for the Submit button's shadow inside the box that scrolls. */
  .sf-tpl-main.is-spin .sf-stage {
    padding-bottom: 18px;
  }
}

/* ---- Small screens: one column, decorations off ---- */
@media (max-width: 900px) {
  /* Phones have no Enter key to point at. */
  .tpl-11 .sf-input-enter,
  .tpl-12 .sf-input-enter {
    visibility: hidden;
  }

  .tpl-11 .sf-tpl-card {
    padding-inline: 20px;
  }

  /* The card fills the width, so the shapes would only blur behind its text; the colours keep moving. */
  .sf-tpl-backdrop .is-ball-a,
  .sf-tpl-backdrop .is-ball-b,
  .sf-tpl-backdrop .is-tile,
  .sf-tpl-backdrop .is-ring {
    display: none;
  }

  /* The trust note goes under the button: the row is too narrow for both. */
  .sf-page.tpl-13 {
    --pad-x: 18px;
    --pad-y: 24px;
  }

  .tpl-13 .sf-tpl-foot,
  .tpl-13 .sf-tpl-main.is-section .sf-tpl-foot {
    position: static;
    align-items: center;
    width: 100%;
    height: auto;
  }

  .tpl-13 .sf-actions .sf-next:not(.sf-secondary) {
    flex: 1;
  }

  /* The scale wraps to two rows here, so the chosen number must not ride up over the row above. */
  .tpl-13 .sf-scale-btn.is-on {
    transform: scale(1.08);
  }

  .sf-page.sf-tpl {
    padding: 64px 16px 32px;
    background-position: center;
    background-size: cover;
  }

  .sf-tpl-layout,
  .tpl-10 .sf-tpl-layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 0;
  }

  .tpl-01 .sf-tpl-layout,
  .tpl-09 .sf-tpl-layout {
    padding: 0;
  }

  .sf-tpl-aside {
    gap: 20px;
    width: 100%;
  }

  .sf-page.tpl-01::before {
    left: 0;
  }

  .tpl-08 .sf-tpl-aside {
    position: static;
    width: 100%;
    padding: 0;
  }

  .sf-page.tpl-08 {
    padding: 64px 16px 32px;
  }

  .tpl-08 .sf-tpl-main {
    height: auto;
  }

  .sf-page.tpl-08::after {
    display: none;
  }

  .sf-page.tpl-08 {
    background-size: cover, 100% 100%;
  }

  .tpl-08 .sf-tpl-main,
  .tpl-10 .sf-tpl-main {
    position: static;
    width: 100%;
    margin: 0;
  }

  /* The cut-up artwork needs the wide layout; phones use the empty background behind a full-width card. */
  .sf-page.tpl-09 {
    background-image: url('avatars/template/09.png');
    background-position: right center;
  }

  .tpl-09 .sf-tpl-main {
    width: 100%;
  }

  .tpl-09 .sf-tpl-card {
    min-height: 0;
  }

  /* No room for the artwork; the button and progress go back into the card's flow. */
  .sf-page.tpl-10 {
    background-image: none;
  }

  .tpl-10 .sf-tpl-above {
    width: 100%;
    margin-left: 0;
  }

  .tpl-10 .sf-tpl-card {
    min-height: 0;
  }

  .tpl-10 .sf-single .sf-actions {
    position: static;
    margin-top: 16px;
  }

  .tpl-10 .sf-tpl-foot {
    position: static;
    width: 100%;
  }

  .sf-tpl-side,
  .sf-tpl-note,
  .tpl-09 .sf-tpl-after,
  .sf-tpl-steps.is-vsteps,
  .sf-tpl-step-label {
    display: none;
  }

  .sf-tpl-card,
  .tpl-02 .sf-tpl-card,
  .tpl-06 .sf-tpl-card,
  .tpl-08 .sf-tpl-card,
  .tpl-09 .sf-tpl-card,
  .tpl-10 .sf-tpl-card {
    padding: 28px 20px;
  }

  /* No room for the robot panel: a plain card, full width. */
  .tpl-02 .sf-tpl-main {
    max-width: 100%;
  }

  .tpl-02 .sf-tpl-card {
    min-height: 0;
    border-radius: 24px;
    background: var(--tpl-card);
  }

  .sf-tpl .sf-single .sf-label,
  .tpl-02 .sf-single .sf-label,
  .tpl-12 .sf-single .sf-label {
    font-size: 26px;
  }

  .sf-tpl-brand h1,
  .tpl-07 .sf-tpl-brand h1,
  .tpl-08 .sf-tpl-brand h1 {
    font-size: 30px;
  }

  .tpl-04 .sf-tpl-avatar::before,
  .tpl-04 .sf-tpl-avatar::after {
    width: 40px;
  }

  .tpl-04 .sf-tpl-top {
    margin-bottom: 16px;
    padding: 0 48px 0 0;
  }

  .tpl-04 .sf-tpl-badge {
    display: none;
  }

  .tpl-07 .sf-single .sf-label {
    margin-left: 0;
    padding: 20px;
    font-size: 22px;
  }

  .tpl-07 .sf-single .sf-label::before {
    display: none;
  }

  .sf-tpl .sf-next {
    min-width: 160px;
  }
}