/* TIMWORK Ponder — /contact/ inquiry survey. Same design language as the landing
   (dark violet, faint 64px grid, amber accent). Logical properties only, so dir="rtl" just works.
   Contract: docs/contact-survey/SPEC.md */

:root {
  --bg: #0d0929;
  --text: #f4f2ff;
  --text-2: #c9c5e3;
  --text-3: #e6e3f7;
  --muted: #8e88bb;
  --muted-2: #a9a4cc;
  --amber: #f5a800;
  --amber-hover: #ffbb24;
  --on-amber: #0d0929;
  --violet: #5B21D9;
  --err: #E5484D;
  --err-text: #ff6b70;
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .18);
  --hdr: 64px;
  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans Devanagari', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='%230d0929' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Chinese / Japanese: Pretendard has Latin, Hangul and kana but no Han characters. With the
   default stack those fell back to the Korean system fonts (Apple SD Gothic Neo / Malgun
   Gothic: Korean glyph forms, mixed with a second CJK font inside one line). Put the
   language's own system fonts right after Pretendard. */
:lang(zh) {
  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
}
:lang(ja) {
  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', YuGothic, Meiryo, 'Noto Sans JP', 'Noto Sans CJK JP', 'Source Han Sans JP', 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr) + 16px);  /* scrollIntoView/focus keep targets below the fixed header */
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font: 400 16px/1.6 var(--sans);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
/* keep-all would forbid every break in Chinese/Japanese running text. */
:lang(zh) body, :lang(ja) body, body:lang(zh), body:lang(ja) { word-break: normal; line-break: strict; }

/* The page stays hidden until survey.js has rendered the texts of the chosen language
   (no Korean flash). If the script never runs, it appears anyway after 3 s. */
html:not(.sv-ready) body { visibility: hidden; animation: sv-reveal 0s 3s forwards; }
@keyframes sv-reveal { to { visibility: visible; } }
html.sv-ready body { animation: sv-fade .28s ease-out both; }
@keyframes sv-fade { from { opacity: 0; } }

/* Background: violet glow + faint 64px grid, fixed behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 50% at 16% 8%, rgba(91, 33, 217, .34), rgba(13, 9, 41, 0) 70%),
    radial-gradient(45% 45% at 92% 92%, rgba(91, 33, 217, .16), rgba(13, 9, 41, 0) 70%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 64px 64px;
}
[dir="rtl"] body::before {
  background:
    radial-gradient(55% 50% at 84% 8%, rgba(91, 33, 217, .34), rgba(13, 9, 41, 0) 70%),
    radial-gradient(45% 45% at 8% 92%, rgba(91, 33, 217, .16), rgba(13, 9, 41, 0) 70%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 64px 64px;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
button { font: inherit; }

.sv-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
[dir="rtl"] .sv-arrow { display: inline-block; transform: scaleX(-1); }

/* ---------- Header (same as the landing nav) ---------- */
.sv-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  height: var(--hdr);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 0 clamp(16px, 3vw, 40px);
  background: rgba(13, 9, 41, .82);
  -webkit-backdrop-filter: saturate(1.6) blur(22px);
  backdrop-filter: saturate(1.6) blur(22px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.sv-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-height: 44px;
  border-radius: 6px;
}
.sv-brand img { height: 20px; width: auto; display: block; }
.sv-brand-label {
  font: 500 11px/1 var(--mono);
  letter-spacing: .18em;
  color: #8e88bb;
}
.sv-header-end {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  min-width: 0;
}
.sv-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: color .2s;
}
.sv-back:hover { color: #fff; }
.sv-back .sv-arrow { font-size: 15px; line-height: 1; }

.sv-lang { position: relative; flex: none; }
.sv-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: transparent;
  cursor: pointer;
  font: 600 12px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--text);
  transition: border-color .2s, background-color .2s;
}
.sv-lang-btn:hover, .sv-lang-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, .55); }
.sv-globe {
  position: relative;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid #b9b5d6;
  flex: none;
}
.sv-globe span {
  position: absolute;
  left: 3px; right: 3px; top: -1.5px; bottom: -1.5px;
  border-radius: 50%;
  border: 1.5px solid #b9b5d6;
  border-top: 0; border-bottom: 0;
}
.sv-caret { font-size: 9px; color: #8e88bb; }
.sv-lang-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 10px);
  z-index: 60;
  width: min(360px, 86vw);
  padding: 6px;
  border-radius: 12px;
  background: rgba(20, 14, 58, .98);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  animation: sv-pop .16s ease-out both;
}
@keyframes sv-pop { from { opacity: 0; transform: translateY(-4px); } }
.sv-lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: 600 14px/1.3 var(--sans);
  text-align: start;
  cursor: pointer;
}
.sv-lang-item:hover { background: rgba(255, 255, 255, .08); }
.sv-lang-item[aria-checked="true"] { background: rgba(245, 168, 0, .16); color: var(--amber); }
.sv-lang-item:focus-visible { outline-offset: -2px; }
.sv-lang-code { font: 600 11px/1 var(--mono); color: #8e88bb; flex: none; }
/* Each native name carries its own lang: re-resolve --sans there (中文 / 日本語 in their fonts). */
.sv-lang-item > [lang] { font-family: var(--sans); }

/* ---------- Layout ---------- */
.sv-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: calc(var(--hdr) + clamp(28px, 5vw, 72px)) clamp(16px, 4vw, 48px) clamp(48px, 6vw, 96px);
}
.sv-layout { display: grid; gap: 28px; }
.sv-intro { min-width: 0; display: flex; flex-direction: column; }

.sv-eyebrow {
  margin: 0;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: .16em;
  color: var(--amber);
}
.sv-title {
  margin: 16px 0 0;
  font-size: clamp(30px, 3.3vw, 50px);
  line-height: 1.14;
  letter-spacing: -.04em;
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
}
.sv-title-2 {
  background: linear-gradient(90deg, #ffc53d 0%, #f5a800 40%, #f4f2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[dir="rtl"] .sv-title-2 { background-image: linear-gradient(270deg, #ffc53d 0%, #f5a800 40%, #f4f2ff 100%); }
.sv-lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.7;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Step indicator: vertical on desktop, horizontal below 1024px. */
.sv-steps { list-style: none; margin: 36px 0 0; padding: 0; display: grid; }
.sv-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  transition: color .25s;
}
.sv-step + .sv-step::before {
  content: "";
  position: absolute;
  inset-inline-start: 17px;
  top: -10px;
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, .14);
}
.sv-step-num {
  flex: none;
  width: 35px; height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(13, 9, 41, .7);
  font: 600 12px/1 var(--mono);
  letter-spacing: .04em;
  color: var(--muted-2);
  transition: background-color .25s, border-color .25s, color .25s;
}
.sv-step.is-current { color: #fff; }
.sv-step.is-current .sv-step-num {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--on-amber);
  box-shadow: 0 0 0 5px rgba(245, 168, 0, .14);
}
.sv-step.is-done { color: var(--text-2); }
.sv-step.is-done .sv-step-num {
  border-color: rgba(245, 168, 0, .6);
  color: transparent;
  background: rgba(245, 168, 0, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='%23f5a800' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.sv-step.is-done + .sv-step::before { background: rgba(245, 168, 0, .5); }

.sv-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 28px 0 0;
  max-width: 34em;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-2);
}
.sv-note-icon {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a9a4cc' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.6'/%3E%3Cpath d='M5.4 7V5.2a2.6 2.6 0 0 1 5.2 0V7'/%3E%3C/svg%3E") center / 16px no-repeat;
}

@media (min-width: 1024px) {
  .sv-layout {
    grid-template-columns: minmax(0, 400px) minmax(0, 720px);
    justify-content: space-between;
    align-items: start;
    column-gap: clamp(48px, 6vw, 112px);
  }
  .sv-intro { position: sticky; top: calc(var(--hdr) + 48px); padding-top: 8px; }
}
@media (min-width: 1024px) and (max-height: 720px) {
  .sv-intro { position: static; }
}
@media (max-width: 1023.98px) {
  .sv-intro .sv-note { order: 3; margin-top: 16px; }
  .sv-intro .sv-steps { order: 4; }
  .sv-steps {
    margin-top: 28px;
    /* Equal thirds, but never narrower than the longest word: at 320px "Arbeitsumfeld" (de) was wider
       than its third and ran into "Kontaktdaten". Other languages/widths keep three equal columns. */
    grid-template-columns: repeat(3, minmax(min-content, 1fr));
    gap: 8px;
  }
  .sv-step {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 0 0;
    border-top: 3px solid rgba(255, 255, 255, .14);
    font-size: 13.5px;
    line-height: 1.35;
    transition: color .25s, border-color .25s;
  }
  .sv-step + .sv-step::before { display: none; }
  .sv-step-num,
  .sv-step.is-current .sv-step-num,
  .sv-step.is-done .sv-step-num {
    width: auto; height: auto;
    display: block;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 11px;
    letter-spacing: .1em;
    color: inherit;
  }
  .sv-step.is-current { border-top-color: var(--amber); }
  .sv-step.is-current .sv-step-num { color: var(--amber); }
  .sv-step.is-done { border-top-color: rgba(245, 168, 0, .45); }
}

/* ---------- Card ---------- */
.sv-card {
  position: relative;
  min-width: 0;
  container-type: inline-size;
  padding: clamp(20px, 3.4vw, 40px);
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)), rgba(13, 9, 41, .72);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}
.sv-noscript {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(229, 72, 77, .4);
  background: rgba(229, 72, 77, .1);
  font-size: 14px;
}
.sv-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sv-step-title { margin: 0; min-width: 0; }
.sv-step-title:focus { outline: none; }
.sv-step-of {
  display: block;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: .12em;
  color: var(--amber);
}
.sv-step-name {
  display: block;
  margin-top: 6px;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -.02em;
  color: #fff;
}
.sv-req-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted-2); }

.sv-panel { animation: sv-in .36s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sv-in { from { opacity: 0; transform: translateY(8px); } }
/* (0,2,0) so it wins over the margin reset of .sv-group/.sv-field. */
.sv-panel > :not(:first-child) { margin-top: 36px; }
.sv-panel > :first-child { margin-top: 28px; }

/* Progressive questions keep the essential route short without discarding detail. */
.sv-extra { border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; }
.sv-extra > summary {
  padding-block: 16px; cursor: pointer; color: var(--text-2); font-size: 14px;
  line-height: 1.6; min-height: 48px; overflow-wrap: anywhere;
}
.sv-extra > summary:hover { color: var(--amber); }
.sv-extra[open] > summary { color: var(--amber); border-bottom: 1px solid var(--line); }
.sv-extra-body { padding-block: 22px; }
.sv-extra-body > :not(:first-child) { margin-top: 28px; }
.sv-expect { margin: 16px 0 0; color: var(--muted-2); font-size: 13px; line-height: 1.7; }
.sv-preview { margin-top: 28px; padding: 18px 20px; border-inline-start: 2px solid var(--amber); background: rgba(245,168,0,.05); border-radius: 0 12px 12px 0; }
.sv-preview p { margin: 0; }
.sv-preview .sv-preview-label { margin-bottom: 8px; font-size: 12px; color: var(--amber); }
#work-preview-text { font-weight: 650; font-size: 15px; line-height: 1.6; }
.sv-preview .sv-preview-hint { margin-top: 10px; font-size: 12px; color: var(--muted-2); }
.sv-draft { margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-2); font-size: 13px; }
.sv-done-summary { margin: 24px auto 0; padding: 16px; max-width: 34em; border-radius: 12px; border: 1px solid var(--line); color: var(--text-2); font-size: 14px; }
@media (max-width: 1023.98px) {
  .sv-intro .sv-expect { order: 2; }
  .sv-intro .sv-preview { order: 5; margin-top: 18px; }
}
@media (max-width: 600px) {
  .sv-intro .sv-note { font-size: 11px; line-height: 1.55; }
  .sv-panel > :not(:first-child) { margin-top: 26px; }
  .sv-extra { padding-inline: 14px; }
}

/* ---------- Choice groups ---------- */
.sv-group { margin: 0; padding: 0; border: 0; min-width: 0; min-inline-size: 0; }
.sv-legend {
  float: none;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
}
.sv-req { margin-inline-start: 4px; color: var(--amber); font-weight: 700; }
.sv-opt {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .04em;
  color: var(--muted-2);
  vertical-align: 2px;
  white-space: nowrap;
}
.sv-hint { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted-2); }
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.chip { position: relative; display: inline-flex; max-width: 100%; }
.chip input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 16px;
  padding-inline-start: 13px;
  border-radius: 22px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03);
  color: var(--text-3);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  transition: border-color .15s, background-color .15s, color .15s;
}
.chip span::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, .34);
  background: center / 13px no-repeat;
  transition: background-color .15s, border-color .15s;
}
.chip input[type="radio"] + span::before { border-radius: 50%; }
.chip input:checked + span {
  border-color: var(--amber);
  background: rgba(245, 168, 0, .14);
  color: #fff;
}
.chip input:checked + span::before {
  border-color: var(--amber);
  background-color: var(--amber);
  background-image: var(--check-dark);
}
.chip input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.sv-group.is-invalid .chip input:not(:checked) + span { border-color: rgba(229, 72, 77, .55); }
@media (hover: hover) {
  .chip:hover input:not(:checked) + span { border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .06); }
  .chip:hover input:not(:checked) + span::before { border-color: rgba(255, 255, 255, .6); }
}

.sv-other { margin-top: 12px; max-width: 440px; }

/* ---------- Text fields ---------- */
.sv-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 16px; }
@container (min-width: 520px) {
  .sv-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sv-field { min-width: 0; display: flex; flex-direction: column; }
.sv-field--full { grid-column: 1 / -1; }
.sv-label { margin-bottom: 8px; font-size: 14.5px; font-weight: 650; line-height: 1.45; color: #ece9fb; }
.sv-field .sv-hint { margin-top: 6px; font-size: 12.5px; }

.sv-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font: 500 16px/1.4 var(--sans);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.sv-input::placeholder { color: var(--muted); opacity: 1; }
@media (hover: hover) { .sv-input:hover { border-color: rgba(255, 255, 255, .3); } }
.sv-input:focus {
  outline: none;
  border-color: var(--amber);
  background-color: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 3px rgba(245, 168, 0, .24);
}
.sv-input[aria-invalid="true"] { border-color: var(--err); }
.sv-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(229, 72, 77, .28); }
.sv-input:-webkit-autofill,
.sv-input:-webkit-autofill:hover,
.sv-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px #1b163b inset;
  transition: background-color 9999s;
}
.sv-input[dir="ltr"] { text-align: start; }
[dir="rtl"] .sv-input[dir="ltr"] { text-align: right; }

.sv-select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a9a4cc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
}
[dir="rtl"] .sv-select { background-position: left 16px center; }
.sv-select option { background: #1a1440; color: var(--text); }
.sv-select:invalid, .sv-select.is-empty { color: var(--muted); }

.sv-field--message { position: relative; }
.sv-textarea { min-height: 136px; resize: vertical; line-height: 1.6; }
.sv-count {
  align-self: flex-end;
  direction: ltr;           /* "0 / 2000" stays in that order in RTL (was shown as "2000 / 0") */
  unicode-bidi: isolate;
  margin-top: 6px;
  font: 500 11.5px/1 var(--mono);
  letter-spacing: .04em;
  color: var(--muted);
}

/* ---------- Errors and status ---------- */
.sv-err {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 10px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--err-text);
}
.sv-err::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  margin-top: 1.5px;
  border-radius: 50%;
  background: var(--err);
  color: #fff;
  font: 800 11px/1 var(--sans);
}
.sv-status { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--err-text); }
.sv-status:not(:empty) {
  margin-top: 28px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(229, 72, 77, .42);
  background: rgba(229, 72, 77, .1);
}

/* ---------- Consent ---------- */
.sv-consent {
  padding: 8px 18px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .025);
}
.sv-consent.is-invalid { border-color: rgba(229, 72, 77, .55); }
.sv-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
}
.sv-check input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.sv-check-box {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .04) center / 15px no-repeat;
  transition: background-color .15s, border-color .15s;
}
.sv-check input:checked + .sv-check-box {
  border-color: var(--amber);
  background-color: var(--amber);
  background-image: var(--check-dark);
}
.sv-check input:focus-visible + .sv-check-box { outline: 2px solid var(--amber); outline-offset: 2px; }
.sv-check input[aria-invalid="true"] + .sv-check-box { border-color: var(--err); }
@media (hover: hover) { .sv-check:hover input:not(:checked) + .sv-check-box { border-color: rgba(255, 255, 255, .7); } }
.sv-check-text { font-size: 14.5px; line-height: 1.55; color: var(--text-3); }
.sv-check--marketing { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 14px; }
.sv-check--marketing .sv-check-text { font-size: 14px; color: var(--text-2); }
.sv-consent > .sv-err { margin: 0 0 8px; padding-inline-start: 34px; }

.sv-details { margin-inline-start: 34px; }
.sv-details summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
}
.sv-details summary::-webkit-details-marker { display: none; }
.sv-details summary::after {
  content: "";
  width: 7px; height: 7px;
  margin-top: -3px;
  /* Physical on purpose: a down/up chevron must not mirror in RTL (inline-end made it "<"). */
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s, margin .2s;
}
.sv-details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.sv-details summary:hover { color: #fff; }
.sv-privacy {
  display: grid;
  gap: 6px;
  margin: 2px 0 10px;
  padding: 14px 16px;
  padding-inline-start: 32px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(13, 9, 41, .5);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-2);
}
.sv-privacy li::marker { color: var(--muted); }
.sv-privacy a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.sv-privacy a:hover { color: var(--amber); }

/* ---------- Buttons ---------- */
.sv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.sv-actions [data-action="next"],
.sv-actions [data-action="submit"] { margin-inline-start: auto; }
.sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 700 15.5px/1.25 var(--sans);
  text-align: center;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.sv-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sv-btn-primary {
  background: var(--amber);
  color: var(--on-amber);
  box-shadow: 0 10px 30px rgba(245, 168, 0, .25);
}
.sv-btn-primary:hover { background: var(--amber-hover); color: var(--on-amber); }
.sv-btn-primary:active { transform: translateY(1px); }
.sv-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .25); color: var(--text); }
.sv-btn-ghost:hover { border-color: rgba(255, 255, 255, .55); color: #fff; }
.sv-btn[disabled] { cursor: progress; opacity: .75; box-shadow: none; }
.sv-btn .sv-arrow, .sv-ext { font-weight: 700; line-height: 1; }
.sv-btn[disabled] .sv-arrow { display: none; }
.sv-btn[disabled]::before {
  content: "";
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(13, 9, 41, .3);
  border-top-color: var(--on-amber);
  animation: sv-spin .8s linear infinite;
}
@keyframes sv-spin { to { transform: rotate(360deg); } }
@media (max-width: 599.98px) {
  /* Back and Next/Submit share the row when they fit. When a long label forces a wrap
     (fr/de/es/it/pt/ru/id/vi/ar at 390px, more at 360px), wrap-reverse puts the primary
     button on top and Back below it (instead of Back alone above Submit), both full width. */
  .sv-actions { flex-wrap: wrap-reverse; }
  .sv-actions .sv-btn { flex: 1 1 auto; }
  /* Success screen: the two links always stack here; same width instead of two ragged pills. */
  .sv-done-actions .sv-btn { flex: 1 1 100%; }
}

/* ---------- Honeypot (off-screen, not announced) ---------- */
.sv-hp {
  position: absolute;
  inset-inline-start: -10000px;
  top: 0;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Success ---------- */
.sv-done { padding: clamp(12px, 4vw, 44px) 0 clamp(8px, 2vw, 20px); text-align: center; animation: sv-in .4s cubic-bezier(.2, .8, .2, 1) both; }
.sv-done-icon {
  width: 72px; height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(245, 168, 0, .55);
  background: rgba(245, 168, 0, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='%23f5a800' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 34px no-repeat;
  box-shadow: 0 0 0 10px rgba(245, 168, 0, .06), 0 16px 40px rgba(245, 168, 0, .18);
}
.sv-done-title {
  margin: 28px auto 0;
  max-width: 22em;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: balance;
}
.sv-done-title:focus { outline: none; }
.sv-done-body { margin: 14px auto 0; max-width: 32em; font-size: 16px; line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
.sv-ref {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  margin: 26px 0 0;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .03);
}
.sv-ref-label { font-size: 13px; font-weight: 600; color: var(--muted-2); }
.sv-ref-code { font: 600 17px/1 var(--mono); letter-spacing: .16em; color: #fff; }
.sv-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }

/* ---------- Footer ---------- */
.sv-footer { border-top: 1px solid rgba(255, 255, 255, .06); }
.sv-footer-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 48px) 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  font: 500 11px/1.6 var(--mono);
  letter-spacing: .1em;
  color: #8e88bb;
}
/* While the consent banner of analytics.js (fixed, bottom) is open on a phone/tablet, it covered
   the Next/Submit button even at the end of the page. Extra room lets that button scroll above it. */
@media (max-width: 1023.98px) {
  body:has(> .pc-banner:not([hidden])) .sv-footer { padding-bottom: 260px; }
}
.sv-pc:empty { display: none; }
.sv-pc a { display: inline-flex; align-items: center; min-height: 32px; color: #b9b5d6; }
.sv-pc a:hover { color: var(--amber); }

/* ---------- Script-specific spacing ---------- */
:lang(ar) .sv-title, :lang(ar) .sv-step-name, :lang(ar) .sv-done-title,
:lang(hi) .sv-title, :lang(hi) .sv-step-name, :lang(hi) .sv-done-title { letter-spacing: 0; }
:lang(ar) .sv-title { line-height: 1.35; }
:lang(hi) .sv-title { line-height: 1.3; }
/* The mono stack has no Arabic or Devanagari, so these translated labels fell back to a random
   system face (e.g. DejaVu Sans Mono / Lohit on Linux). Use the text face, and no tracking:
   letter-spacing breaks Arabic joining and the Devanagari headline. */
:lang(ar) .sv-eyebrow, :lang(ar) .sv-step-of, :lang(ar) .sv-opt,
:lang(hi) .sv-eyebrow, :lang(hi) .sv-step-of, :lang(hi) .sv-opt { font-family: var(--sans); letter-spacing: 0; }
:lang(ar) .sv-eyebrow, :lang(ar) .sv-step-of, :lang(hi) .sv-eyebrow, :lang(hi) .sv-step-of { font-size: 13px; }
/* Same for the footer's cookie-settings link (text set by analytics.js in the page language). */
:lang(ar) .sv-pc a, :lang(hi) .sv-pc a { font-family: var(--sans); letter-spacing: 0; font-size: 13px; }

/* ---------- Small screens ---------- */
@media (max-width: 559.98px) {
  .sv-back { justify-content: center; width: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); }
  .sv-back-txt {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .sv-lang-btn { min-height: 44px; padding: 8px 14px; }
  .sv-card { border-radius: 18px; }
  .sv-chips { gap: 8px 7px; }
  .chip span { font-size: 14px; padding: 10px 14px; padding-inline-start: 12px; gap: 9px; }
  .sv-consent { padding: 6px 14px 8px; }
  .sv-details { margin-inline-start: 0; }
  .sv-consent > .sv-err { padding-inline-start: 0; }
  .sv-privacy { padding-inline-start: 28px; }
  .sv-pc a { min-height: 44px; }
}
@media (max-width: 380px) {
  .sv-brand { gap: 9px; }
}
@media (pointer: coarse) {
  .sv-lang-btn { min-height: 44px; }
  .sv-lang-item { min-height: 46px; }
  .sv-details summary { min-height: 44px; }
  .sv-pc a { min-height: 44px; }  /* touch tablets (560px and up) had a 32px-high cookie-settings link */
}

/* ---------- Short viewports (landscape phones) ---------- */
/* At 844x390 the fixed 64px header took 16% of the screen and a large part of what stays visible above
   the on-screen keyboard; the language menu (358px, inside the fixed header) ran past the bottom edge,
   so Indonesian and Vietnamese could not be reached. Here the header scrolls away with the page and
   the menu uses three columns (5 rows, ~250px). */
@media (max-height: 500px) {
  .sv-header { position: absolute; }
  html { scroll-padding-top: 16px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  .sv-lang-menu { width: min(560px, calc(100vw - 32px)); grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Narrower landscape (e.g. 568x320): the two-column menu (358px) scrolls inside itself; a page scroll that
   starts outside the menu would close it. The height leaves part of a row showing, so more is visibly there. */
@media (max-height: 500px) and (max-width: 599.98px) {
  .sv-lang-menu { max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- Large booth screens ---------- */
@media (min-width: 1680px) {
  .sv-main { max-width: 1440px; }
  .sv-layout { grid-template-columns: minmax(0, 460px) minmax(0, 780px); }
  .sv-lead { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .chip input:checked + span, .sv-check input:checked + .sv-check-box { outline: 2px solid CanvasText; }
  .sv-title-2 { color: CanvasText; background: none; }
}