/* Grand Mirage walk-in form · tablet kiosk (12.9" iPad, portrait or landscape)
   Type and colours follow the sales landing page: Lexend Exa (display) + Roboto (text), cream / ink / gold. */
:root{
  --cream:#f3eee6; --paper:#fbf8f3; --ink:#23201c; --ink2:#4b453d; --ink3:#6b6358;
  --gold:#d1a954; --goldb:#c9a04f; --goldd:#8f6b27; --line:#e2d9ca; --line2:#cfc4b2;
  --dark:#161514; --err:#b3261e;
  --f:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif; --fd:'Lexend Exa',Verdana,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{margin:0;min-height:100vh;background:var(--cream);color:var(--ink);font-family:var(--f);font-size:22px;line-height:1.5;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--goldb);outline-offset:3px}

/* Header */
.top{position:sticky;top:0;z-index:5;height:104px;padding:0 40px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#000 0%,#0e0d0c 55%,#1a1816 100%);border-bottom:1px solid rgba(209,169,84,.25)}
.top__logo{height:60px;width:auto;display:block}
.top__reset{position:absolute;right:28px;top:50%;transform:translateY(-50%);background:none;border:1px solid rgba(255,255,255,.35);color:#e9e2d6;
  border-radius:999px;padding:10px 20px;font-family:var(--fd);font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.bar{height:6px;background:var(--line)}
.bar__f{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--goldd),var(--gold));transition:width .35s ease}

/* Layout */
.wrap{max-width:900px;margin:0 auto;padding:44px 48px 64px}
.count{margin:0 0 18px;font-family:var(--fd);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--goldd);min-height:1.4em}
.step{animation:in .3s ease both}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.step{animation:none}.bar__f{transition:none}}
.kicker{margin:0 0 14px;font-family:var(--fd);font-weight:500;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--goldd)}
.q{margin:0 0 26px;font-family:var(--fd);font-weight:400;font-size:34px;line-height:1.3;letter-spacing:.01em;color:var(--ink)}
.q--2{margin-top:44px}
.hint{margin:-12px 0 26px;font-size:22px;font-weight:300;color:var(--ink3)}
.lead{margin:0 0 30px;font-size:24px;font-weight:300;line-height:1.6;color:var(--ink2)}
.fine{margin:24px 0 0;font-size:17px;color:var(--ink3)}

/* Choices: large tap targets */
.ch{display:grid;gap:16px}
.ch--1{grid-template-columns:1fr}
.ch--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ch--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ch--4{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:28px}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt__b{height:100%;min-height:84px;padding:18px 22px;display:flex;align-items:center;gap:18px;background:var(--paper);border:2px solid var(--line2);border-radius:14px;
  transition:border-color .15s,background .15s,box-shadow .15s}
.ch--1 .opt__b{min-height:96px;padding:22px 28px}
.ch--4 .opt__b{justify-content:center;min-height:76px}
.ch--4 .opt__dot{display:none}
.opt__dot{flex:0 0 28px;height:28px;border-radius:50%;border:2px solid var(--line2);background:#fff;transition:all .15s}
.opt__t{font-size:24px;line-height:1.25}
.opt:active .opt__b{transform:scale(.99)}
.opt input:checked + .opt__b{border-color:var(--goldb);background:#fff;box-shadow:0 0 0 4px rgba(201,160,79,.22)}
.opt input:checked + .opt__b .opt__dot{border-color:var(--goldd);background:radial-gradient(circle,var(--goldd) 0 45%,#fff 50%)}
.opt input:focus-visible + .opt__b{outline:3px solid var(--goldb);outline-offset:3px}
.is-bad .opt__b{border-color:var(--err)}

/* Text fields */
.fields{display:flex;flex-direction:column;gap:22px}
.f{display:flex;flex-direction:column;gap:10px}
.f--other{margin-top:22px}
.f__l{font-size:20px;font-weight:500;color:var(--ink2)}
.in{width:100%;height:80px;padding:0 24px;font:inherit;font-size:28px;color:var(--ink);background:#fff;border:2px solid var(--line2);border-radius:14px;
  -webkit-appearance:none;appearance:none}
.in:focus{outline:none;border-color:var(--goldb);box-shadow:0 0 0 4px rgba(201,160,79,.22)}
.in--ta{height:auto;min-height:170px;padding:20px 24px;line-height:1.45;resize:none}
.in--cc{flex:0 0 190px;width:190px;padding:0 44px 0 20px;font-size:24px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%238f6b27' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 18px center}
.tel{display:flex;gap:14px}
.f.is-bad .in,.in.is-bad{border-color:var(--err)}
.tel.is-bad .in{border-color:var(--err)}

/* Toggles (checkbox as a big chip) */
.tog{display:block;cursor:pointer}
.tog input{position:absolute;opacity:0;pointer-events:none}
.tog__b{display:flex;align-items:center;gap:16px;min-height:72px;padding:14px 22px;font-size:22px;background:transparent;border:2px dashed var(--line2);border-radius:14px}
.tog__b::before{content:"";flex:0 0 30px;height:30px;border-radius:8px;border:2px solid var(--line2);background:#fff}
.tog input:checked + .tog__b{border-style:solid;border-color:var(--goldb);background:#fff}
.tog input:checked + .tog__b::before{border-color:var(--goldd);background:var(--goldd) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14'%3E%3Cpath d='M1.5 7l5 5 10-10' fill='none' stroke='%23fff' stroke-width='2.6'/%3E%3C/svg%3E") no-repeat center}
.tog--consent{margin-top:28px}
.tog--consent .tog__b{border-style:solid;background:var(--paper)}
.tog.is-bad .tog__b{border-color:var(--err)}
.in:disabled{background:#efe9df;color:var(--ink3)}

/* Buttons */
.nav{margin-top:44px;display:flex;gap:16px;justify-content:space-between}
.btn{min-height:84px;padding:0 44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:500;
  font-size:17px;letter-spacing:.14em;text-transform:uppercase;border:2px solid transparent;cursor:pointer;touch-action:manipulation}
.btn--gold{flex:1;background:var(--goldb);border-color:var(--goldb);color:#15130f}
.btn--gold:active{background:#b98f3f}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink);min-width:200px}
.btn[disabled]{opacity:.55}
.err{margin:26px 0 0;padding:16px 22px;border-radius:12px;background:#fbe9e7;color:var(--err);font-size:21px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Thank-you */
.thanks{text-align:center;padding-top:40px;animation:in .4s ease both}
.thanks__tick{color:var(--goldd);display:flex;justify-content:center;margin-bottom:24px}
.thanks .lead{max-width:680px;margin:0 auto 40px}

/* Idle overlay */
.idle{position:fixed;inset:0;z-index:20;background:rgba(22,21,20,.72);display:flex;align-items:center;justify-content:center;padding:40px}
.idle__box{max-width:640px;width:100%;background:var(--cream);border-radius:20px;padding:48px;text-align:center}
.idle__box .btn{width:100%}

/* Landscape tablet: a little wider, three columns where it helps */
@media (min-width:1200px){
  .wrap{max-width:1040px}
  .ch[data-group=unit],.ch[data-group=budget_buy],.ch[data-group=position]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ch--1[data-group=interest]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ch--1[data-group=interest] .opt__b{min-height:120px}
  .ch--1[data-group=for_whom]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Phones (not the target, but keep it usable) */
@media (max-width:700px){
  body{font-size:18px}
  .top{height:76px}.top__logo{height:42px}.top__reset{right:12px;padding:8px 12px;font-size:10px}
  .wrap{padding:28px 18px 48px}
  .q{font-size:24px}
  .ch--2,.ch--3{grid-template-columns:1fr}
  .ch--4{grid-template-columns:repeat(2,1fr)}
  .opt__b{min-height:64px}.opt__t{font-size:20px}
  .in{height:64px;font-size:20px}.in--cc{flex-basis:130px;width:130px;font-size:18px}
  .btn{min-height:64px;padding:0 24px;font-size:14px}.btn--ghost{min-width:110px}
}

/* Website / WhatsApp forms */
.is-embed .wrap{padding-top:28px}
.is-embed .bar{display:none}
.top a{display:block}
.f__l em{font-style:normal;font-weight:400;color:var(--ink3)}
/* Short form (website / WhatsApp): the questions of the old Pipedrive forms, one screen */
.is-simple{font-size:18px}
.is-simple .wrap{max-width:760px;padding-top:36px}
.is-simple .q{font-size:30px;margin-bottom:10px}
.is-simple .hint{margin:0 0 28px;font-size:19px}
.simple .sf{margin-bottom:22px}
.simple .sf > .f__l{display:block;margin-bottom:10px}
.simple .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.simple .ch--3,.simple .ch--4{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:0}
.simple .ch--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.simple .opt__b{min-height:58px;padding:12px 16px;gap:12px}
.simple .opt__t{font-size:19px}
.simple .opt__dot{flex-basis:22px;height:22px}
.simple .in{height:60px;font-size:20px}
.simple .in--ta{height:auto;min-height:120px}
.simple .in--sel{padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%238f6b27' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 18px center}
.simple .in--cc{flex-basis:150px;width:150px;font-size:18px}
.simple .nav{margin-top:28px}
.simple .btn{min-height:64px}
.simple .is-bad .opt__b,.simple .in.is-bad{border-color:var(--err)}
@media (max-width:700px){
  .is-simple .q{font-size:24px}
  .simple .row2{grid-template-columns:1fr}
  .simple .ch--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .simple .opt__b{padding:10px 10px;justify-content:center}.simple .opt__dot{display:none}
  .simple .opt__t{font-size:17px}
  .simple .in{height:56px;font-size:18px}.simple .in--cc{flex-basis:118px;width:118px;font-size:16px}
}
.simple .note{margin:-2px 0 12px;font-size:16px;color:var(--ink3);line-height:1.45}
.simple .ch--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.simple .err{margin-top:0;margin-bottom:18px}
@media (max-width:700px){.simple .ch--2,.simple .ch--3[data-group=heard],.simple .ch--3[data-group=budget_rent],.simple .ch--3[data-group=timeline_buy],.simple .ch--3[data-group=timeline_rent],.simple .ch--3[data-group=unit]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.simple .in--cc{flex-basis:134px;width:134px;padding:0 32px 0 12px;background-position:right 12px center}}
/* Short form as steps (29 Sep 2026): one short question per screen */
.simple .sst{animation:in .3s ease both}
.simple .count{margin-bottom:12px;font-size:13px}
.simple .kicker{font-size:13px;margin-bottom:10px}
.is-simple .q{margin-bottom:22px}
.is-simple .q + .hint{margin-top:-12px;margin-bottom:24px;font-size:17px}
.simple .ch--1 .opt__b{min-height:66px;padding:14px 20px}
.simple .ch--1 .opt__t{font-size:20px}
.simple [data-s=name] .ch--4{margin-bottom:6px}
.simple .btn--ghost{min-width:150px}
.simple .nav{margin-top:30px}
@media (prefers-reduced-motion:reduce){.simple .sst{animation:none}}
@media (max-width:700px){.simple .btn--ghost{min-width:104px}.simple .ch--1 .opt__b{justify-content:flex-start;padding-left:18px}}