

:root {

  --modal-plate: #F8F6F2;

  --modal-chip: #EFEAE3;

  --modal-ink: #4E251B;

  --modal-grey: var(--warm-grey, #746056);

  --modal-line: #D8CFC5;

  --modal-flare: var(--flare-ink, #BF3719);

  --modal-flare-press: #E8431F;

  --modal-scrim: rgba(40, 18, 12, .46);

  --modal-radius: 28px;

  --modal-shadow: 0 24px 60px rgba(40, 18, 12, .22);

  --modal-close: 34px;

}





.sam,

.gc-modal,

.dl-gate {

  position: fixed;

  inset: 0;

  z-index: 200;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

  font-family: "DM Sans", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;

  color: var(--modal-ink);

}

.sam[hidden],

.gc-modal[hidden],

.dl-gate[hidden] { display: none; }



.dl-gate { z-index: 5000; }



.sam { background: var(--modal-scrim); opacity: 0; transition: opacity .22s ease; }

.sam.open { opacity: 1; }

.gc-scrim,

.dl-scrim {

  position: absolute;

  inset: 0;

  background: var(--modal-scrim);

  animation: modal-in .18s ease both;

}





.sam-box,

.gc-panel,

.dl-panel {

  position: relative;

  background: var(--modal-plate);

  border-radius: var(--modal-radius);

  box-shadow: var(--modal-shadow);

  padding: 26px 34px 24px;

  max-height: min(640px, calc(100vh - 48px));

  display: flex;

  flex-direction: column;

}



.sam-box {

  width: min(880px, 100%);

  transform: translateY(10px) scale(.985);

  transition: transform .22s cubic-bezier(.22,.61,.36,1);

}

.sam.open .sam-box { transform: none; }



.gc-panel,

.dl-panel {

  width: min(560px, 100%);

  overflow: auto;

  padding-top: 62px;

  animation: modal-rise .22s cubic-bezier(.2,.7,.3,1) both;

}



@keyframes modal-in { from { opacity: 0 } to { opacity: 1 } }

@keyframes modal-rise {

  from { opacity: 0; transform: translateY(12px) }

  to { opacity: 1; transform: none }

}

@media (prefers-reduced-motion: reduce) {

  .gc-scrim, .dl-scrim, .gc-panel, .dl-panel { animation: none; }

  .sam, .sam-box { transition: none; }

}





.sam-close,

.gc-close,

.dl-x {

  position: absolute;

  top: 20px;

  right: 22px;

  width: var(--modal-close);

  height: var(--modal-close);

  padding: 0;

  border: 0;

  border-radius: 999px;

  background: var(--modal-chip);

  color: var(--modal-ink);

  font-family: inherit;

  font-size: 17px;

  line-height: 1;

  cursor: pointer;

  transition: background .2s ease, color .2s ease;

  z-index: 3;

}

.sam-close:hover,

.gc-close:hover,

.dl-x:hover { background: var(--modal-flare); color: #ffffff; }

.sam-close:focus-visible,

.gc-close:focus-visible,

.dl-x:focus-visible { outline: 2px solid var(--modal-flare); outline-offset: 3px; }





.sam-go,

.ar-btn {

  display: inline-block;

  font-family: "DM Sans", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;

  font-size: 15px;

  font-weight: 500;

  line-height: 1.55;

  border: 0;

  border-radius: 999px;

  background: var(--modal-flare);

  color: #ffffff;

  padding: 14px 26px;

  cursor: pointer;

  text-decoration: none;

  -webkit-appearance: none;

  appearance: none;

}

.sam-go:hover,

.ar-btn:hover { background: var(--modal-flare-press); }

.sam-go:focus-visible,

.ar-btn:focus-visible {

  outline: 2px solid var(--modal-flare);

  outline-offset: 3px;

}

.sam-go[disabled] { opacity: .45; cursor: not-allowed; }

.sam-go[disabled]:hover { background: var(--modal-flare); }

.sam-go[hidden] { display: none; }



.ar-btn-quiet {

  background: transparent;

  color: var(--modal-ink);

  box-shadow: inset 0 0 0 1px var(--modal-line);

}

.ar-btn-quiet:hover { background: var(--modal-chip); }





.hs-form { display: flex; flex-direction: column; min-height: 100%; }

.hs-form .hs-step { display: flex; flex-direction: column; flex: 1 1 auto; }



.sam-field input {

  font: inherit;

  font-size: 16px;

  width: 100%;

  background: transparent;

  color: var(--modal-ink);

  border: 0;

  border-bottom: 1px solid var(--modal-line);

  border-radius: 0;

  padding: 6px 0 7px;

  transition: border-color .2s ease;

}



.hs-form input[type="text"], .hs-form input[type="email"], .hs-form input[type="tel"],

.hs-form textarea {

  font: inherit;

  font-family: "Borna", "DM Sans", ui-sans-serif, system-ui, sans-serif;

  font-size: 22px;

  font-weight: 400;

  width: 100%;

  background: transparent;

  color: var(--modal-ink);

  border: 0;

  border-bottom: 1px solid var(--modal-line);

  border-radius: 0;

  padding: 4px 0 8px;

  transition: border-color .2s ease;

}

.hs-form textarea { font-size: 19px; line-height: 1.45; resize: none; }

.sam-field input:focus,

.hs-form input:focus, .hs-form textarea:focus {

  outline: 0;

  border-bottom-color: var(--modal-flare);

}

.hs-form .hs-f.is-focus input, .hs-form .hs-f.is-focus textarea {

  border-bottom-width: 2px;

  padding-bottom: 7px;

}

.hs-form .hs-f.is-error input, .hs-form .hs-f.is-error textarea {

  border-bottom-color: var(--modal-flare);

}

.sam-field ::placeholder,

.hs-form ::placeholder { color: var(--modal-grey); opacity: .8; }



.sam-field label { display: block; font-size: 10px; letter-spacing: .1em;

  text-transform: uppercase; color: var(--modal-grey); margin-bottom: 2px; }



.hs-form .hs-f { margin: 0 0 22px; }

.hs-form .hs-f > label {

  display: block;

  font-size: 12px;

  letter-spacing: .16em;

  text-transform: uppercase;

  color: var(--modal-grey);

  margin: 0 0 6px;

}

.hs-form .hs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }



.hs-form .hs-title {

  font-family: "Borna", "DM Sans", ui-sans-serif, system-ui, sans-serif;

  font-weight: 500;

  font-size: 30px;

  line-height: 1.15;

  letter-spacing: -.02em;

  margin: 0 0 10px;

}

.hs-form .hs-stand {

  margin: 0 0 26px;

  font-size: 15px;

  line-height: 1.55;

  color: #6B4A3E;

  max-width: 34ch;

}

.hs-form .hs-done .hs-stand { margin-bottom: 12px; }



.hs-form .hs-err {

  display: block;

  margin: 6px 0 0;

  font-size: 13px;

  line-height: 1.4;

  color: var(--modal-flare);

}

.hs-form .hs-global {

  margin: 0 0 18px;

  font-size: 13px;

  line-height: 1.45;

  color: var(--modal-flare);

}





.hs-form .hs-rail-row { margin-top: 22px; }

.hs-form .hs-rail-n {

  font-size: 12px;

  letter-spacing: .16em;

  text-transform: uppercase;

  color: var(--modal-grey);

  margin: 0 0 6px;

}

.hs-form .hs-rail {

  height: 2px;

  background: var(--modal-line);

  border-radius: 2px;

  position: relative;

}

.hs-form .hs-rail i {

  position: absolute;

  left: 0; top: 0; bottom: 0;

  display: block;

  background: var(--modal-flare);

  border-radius: 2px;

}



.hs-form .hs-nav {

  display: flex;

  margin-top: auto;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding-top: 26px;

}

.hs-form .hs-nav.end { justify-content: flex-end; }

.hs-form .ar-btn[disabled] { opacity: .45; cursor: not-allowed; }



.hs-form .hs-retry { margin: 22px 0 0; }

.hs-form .hs-retry-note { margin: 0 0 12px; font-size: 15px; color: var(--modal-flare); }



.dl-done { margin: 4px 0 0; }



.dl-done .dl-note {

  margin: 0;

  padding-top: 14px;

  border-top: 1px solid var(--modal-line);

  font-size: 15px;

  line-height: 1.55;

}

.dl-done .dl-note:focus { outline: none; }



.gc-note, .dl-note { margin: 0; font-size: 15px; color: #6B4A3E; }

.gc-note a { color: var(--modal-flare); }



html.dl-open, html.gc-open { overflow: hidden; }



@media (max-width: 720px) {

  .sam, .gc-modal, .dl-gate { padding: 12px; }

  .hs-form .hs-pair { grid-template-columns: 1fr; gap: 0; }

  .hs-form .hs-title { font-size: 26px; }

  .sam-box, .gc-panel, .dl-panel { padding: 22px 20px 20px; border-radius: 22px; }

  .gc-panel, .dl-panel { padding-top: 58px; }

}

