/* Своя мультистеп-форма: один вопрос на экран, почти всё — тап.
   Палитра и шрифты те же, что на ленде. Всё рассчитано на телефон. */
#ownform{--o:#f97316;--od:#dd5f08;--lime:#8cc63f;--plum:#3b2416;--body:#6b5644;
  --cream:#fff7ed;--cream2:#ffeeda;--line:#eddcc8;--err:#c2410c;
  display:block;background:#fff;padding:22px 18px 26px;
  font-family:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--body)}

/* шапка: стрелка назад, тонкая полоса прогресса и напоминание суммы —
   так у IncredibleFi, чья короткая форма взята за образец. */
.of-top{display:flex;align-items:center;gap:12px;margin:0 0 4px}
.of-back{flex:0 0 auto;border:0;background:none;padding:6px;margin:-6px;cursor:pointer;
  color:var(--body);line-height:0;border-radius:10px;visibility:hidden}
.of-back.on{visibility:visible}
.of-back svg{width:22px;height:22px}
.of-bar{flex:1 1 auto;height:7px;border-radius:99px;background:#f2e6d8;overflow:hidden}
.of-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff9a3d,var(--o));
  transition:width .35s ease}
/* строка под полосой прогресса: сумма и сколько вопросов осталось */
.of-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:8px 2px 2px;font-size:13px;color:#9b8b79}
.of-meta b{font-weight:700;color:var(--od);white-space:nowrap}

/* вопрос */
.of-q{margin:14px 0 6px;font-family:"Chillax","Satoshi",sans-serif;font-weight:700;
  letter-spacing:-.03em;line-height:1.15;color:var(--plum);font-size:clamp(23px,6.4vw,30px);text-align:center}
.of-sub{margin:0 0 22px;text-align:center;font-size:15px;color:#8a7461;line-height:1.45}

/* плитки-ответы */
.of-tiles{display:grid;gap:10px}
.of-tiles.c2{grid-template-columns:1fr 1fr}
.of-tiles.c1{grid-template-columns:1fr}
.of-tile{display:flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;gap:8px;text-align:center;
  min-height:58px;padding:14px 12px;border:2px solid var(--line);border-radius:14px;background:#fff;
  font-family:"Chillax","Satoshi",sans-serif;font-weight:600;font-size:17px;letter-spacing:-.02em;
  color:var(--plum);cursor:pointer;transition:border-color .12s,background .12s,transform .08s;
  -webkit-tap-highlight-color:transparent}
.of-tile:active{transform:scale(.98)}
.of-tile.sel{border-color:var(--o);background:#fff5eb}
.of-tile small{display:block;font-family:"Satoshi",sans-serif;font-weight:500;font-size:12.5px;color:#9b8b79;margin-top:2px}
.of-tile.col{flex-direction:column;gap:0;line-height:1.25}

/* поля */
.of-field{margin-bottom:12px}
.of-label{display:block;font-size:13.5px;font-weight:700;color:var(--plum);margin:0 0 6px 2px}
.of-input{width:100%;box-sizing:border-box;min-height:58px;padding:16px 16px;border:2px solid var(--line);
  border-radius:14px;background:#fff;font:inherit;font-size:17px;color:var(--plum);outline:0;
  transition:border-color .12s}
.of-input::placeholder{color:#bcaa96}
.of-input:focus{border-color:var(--o)}
.of-input.bad{border-color:var(--err)}
.of-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.of-pre{position:relative}
.of-pre .of-input{padding-left:38px}
.of-pre i{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-style:normal;
  font-size:17px;font-weight:700;color:#bcaa96}
select.of-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5644' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px}

.of-err{display:none;margin:2px 0 10px 2px;font-size:13.5px;color:var(--err);font-weight:600}
.of-err.on{display:block}

/* кнопка */
.of-cta{width:100%;min-height:58px;margin-top:6px;border:0;border-radius:14px;cursor:pointer;
  font-family:"Chillax","Satoshi",sans-serif;font-weight:700;font-size:18.5px;letter-spacing:-.02em;color:#fff;
  background:linear-gradient(180deg,#ff9a3d,#f97316);box-shadow:0 8px 18px -8px rgba(249,115,22,.9)}
.of-cta:active{transform:translateY(1px)}
.of-cta[disabled]{opacity:.55}

/* согласие: без галочки, подразумевается нажатием кнопки (как у FundsJoy).
   Текст держим читаемым и рядом с кнопкой, а не мелким шрифтом в подвале. */
.of-consent{margin:0 0 14px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;
  background:#fffaf4;font-size:12.5px;line-height:1.55;color:#7c6553}
.of-consent a{color:var(--od);text-decoration:underline;text-underline-offset:2px}

/* экран-награда и ожидание */
.of-mid{text-align:center;padding:14px 0 6px}
.of-mid .ic{width:76px;height:76px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:#f1f9e7;border:2px solid #d5ebbb}
.of-mid .ic svg{width:38px;height:38px;stroke:var(--lime);fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.of-spin{width:56px;height:56px;margin:8px auto 18px;border-radius:50%;
  border:4px solid #f2e6d8;border-top-color:var(--o);animation:ofspin .8s linear infinite}
@keyframes ofspin{to{transform:rotate(360deg)}}

/* доверие снизу */
.of-trust{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;
  font-size:12.5px;color:#9b8b79}
.of-trust svg{width:15px;height:15px;stroke:var(--lime);fill:none;stroke-width:2.2}
.of-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

@media (min-width:560px){
  #ownform{padding:26px 26px 30px}
  .of-tiles.c2{gap:12px}
}

/* Юридический подвал на КАЖДОМ экране — так у всех крупных в вертикали,
   это дешёвый и честный сигнал доверия: человек видит, что документы есть. */
.of-legal{margin:18px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.of-legal a{font-size:12.5px;color:#9b8b79;text-decoration:none;line-height:1.7}
.of-legal a:hover{color:var(--od);text-decoration:underline}

/* ── сумма ползунком (первый экран) ── */
.of-amount{text-align:center;font-family:"Chillax","Satoshi",sans-serif;font-weight:700;
  letter-spacing:-.03em;font-size:clamp(38px,11vw,50px);color:var(--plum);line-height:1;margin:6px 0 16px}
.of-range{--fill:50%;width:100%;height:30px;-webkit-appearance:none;appearance:none;background:none;margin:0}
.of-range::-webkit-slider-runnable-track{height:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--o) var(--fill),#f2e6d8 var(--fill))}
.of-range::-moz-range-track{height:8px;border-radius:99px;background:#f2e6d8}
.of-range::-moz-range-progress{height:8px;border-radius:99px;background:var(--o)}
.of-range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;
  border-radius:50%;background:#fff;border:3px solid var(--o);box-shadow:0 3px 8px -2px rgba(59,36,22,.45);cursor:pointer}
.of-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;
  border:3px solid var(--o);box-shadow:0 3px 8px -2px rgba(59,36,22,.45);cursor:pointer}
.of-ends{display:flex;justify-content:space-between;font-size:13px;color:#9b8b79;margin:2px 2px 0}
.of-note{text-align:center;margin:10px 0 0;font-size:13px;color:#9b8b79}

/* ── заголовок группы на экране с двумя вопросами ── */
.of-group{font-size:15px;font-weight:700;color:var(--plum);margin:14px 0 8px 2px}
.of-group:first-child{margin-top:0}

/* ── вторичная кнопка: «+ More options», «Read full consent» ── */
.of-more{display:block;width:100%;margin-top:10px;padding:13px 14px;border:1px dashed var(--line);
  border-radius:12px;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--od);cursor:pointer}
.of-more:hover{background:#fffaf4}

/* ── значки доверия ── */
.of-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:14px 0 0}
.of-badges span{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#9b8b79}
.of-badges svg{width:14px;height:14px;stroke:var(--lime);fill:none}

.of-okline{display:flex;align-items:center;gap:7px;margin:8px 0 0;font-size:13.5px;color:#6da62c;font-weight:600}
.of-okline svg{width:17px;height:17px;flex:0 0 17px}

/* ── поле SSN с глазом ── */
.of-eye{position:relative}
.of-eye .of-input{padding-right:52px;letter-spacing:.06em}
.of-eyebtn{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;
  font-size:19px;line-height:1;padding:8px;cursor:pointer;opacity:.55}

/* согласие с обрезкой до «Read full consent» */
.of-consent.clip{max-height:132px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}