/* Demo demo33 "Two Keys" — the live DEPO site: #18171a, surfaces #27262b / #2d2c31, green #469a58, yellow #ffb500, Lazurski titles, Lato text, Poppins labels. */
.demo33-page { --su-pad: 16px; --su-focus: var(--yellow); --su-meter-on: var(--green); --su-meter-off: rgba(255,255,255,.12); }
.tk { padding: 0; }
.tk__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: start; max-width: 1240px; margin: 0 auto; padding: 56px 24px 88px; }

/* left: the promise */
.tk__intro { position: sticky; top: 110px; }
.tk__kicker { margin: 0 0 14px; font: 600 13px/1 "Poppins", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.tk__title { margin: 0; font: 700 clamp(44px, 5.6vw, 82px)/.98 "Lazurski", Georgia, serif; letter-spacing: -.01em; }
.tk__lead { margin: 22px 0 0; max-width: 46ch; font: 400 18px/1.6 "Lato", sans-serif; color: rgba(255,255,255,.72); }
.tk__photos { position: relative; height: 300px; margin: 40px 0 0; max-width: 520px; }
.tk__photo { position: absolute; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.tk__photo--a { left: 0; top: 30px; width: 46%; height: 260px; object-position: center 20%; }
.tk__photo--b { left: 32%; top: 0; width: 38%; height: 220px; z-index: 1; border: 4px solid var(--bg); }
.tk__photo--c { right: 0; top: 70px; width: 34%; height: 230px; object-position: center 15%; }
.tk__steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 10px; font: 400 15px/1.4 "Lato", sans-serif; color: rgba(255,255,255,.75); }
.tk__steps b { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; background: var(--surface-2); color: var(--yellow); font: 600 12px/1 "Poppins", sans-serif; }

/* right: the card */
.tk__card { position: relative; padding: 32px 32px 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.tk__card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tk__card-title { margin: 0; font: 700 34px/1.1 "Lazurski", Georgia, serif; }
.tk__signin { margin: 0; font: 400 14px/1.4 "Lato", sans-serif; color: var(--muted); }
.tk__signin a { color: var(--yellow); }
.tk__progress { position: relative; margin: 18px 0 24px; height: 22px; border-radius: 11px; background: var(--surface-2); overflow: hidden; }
.tk__progress-bar { position: absolute; inset: 0 auto 0 0; width: max(var(--su-progress, 0%), 0%); background: linear-gradient(90deg, #37804a, var(--green)); transition: width .4s cubic-bezier(.2,.7,.2,1); }
.tk__progress-label { position: relative; display: block; padding-left: 12px; font: 600 11.5px/22px "Poppins", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; }

.su [data-su-core], .tk__more { display: grid; gap: 18px; }
.su-label, .su-group-label { margin-bottom: 8px; font: 600 13px/1.2 "Poppins", sans-serif; letter-spacing: .02em; color: rgba(255,255,255,.88); }
.su-num { color: var(--yellow); font-size: 11px; }
.su-input { height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: #1f1e22; color: #fff; font: 400 16px/1 "Lato", sans-serif; transition: border-color .2s, box-shadow .2s; }
.su-input::placeholder { color: rgba(255,255,255,.35); }
.su-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(70,154,88,.28); }
.su-input[type="date"] { color-scheme: dark; }
.is-invalid .su-input { border-color: #ef6b5b; }
.is-valid .su-input { border-color: rgba(70,154,88,.6); }
.su-prefix { color: rgba(255,255,255,.45); }
.su-status.is-free { color: #6fd38a; } .su-status.is-taken { color: #ef6b5b; } .su-status.is-checking { color: var(--muted); }
.su-hint { margin-top: 7px; font: 400 13px/1.45 "Lato", sans-serif; color: var(--muted); }
.su-error { margin-top: 7px; font: 400 13px/1.45 "Lato", sans-serif; color: #ff8f80; }
.su-suggest { color: var(--yellow); }
.su-eye { height: 38px; padding: 0 12px; border-radius: 9px; color: rgba(255,255,255,.7); font: 500 13px/1 "Poppins", sans-serif; }
.su-eye:hover { background: var(--surface-2); color: #fff; }
.su-checks { padding-top: 4px; font: 400 14px/1.45 "Lato", sans-serif; color: rgba(255,255,255,.8); }
.su-check input { width: 18px; height: 18px; accent-color: var(--green); }
.su-check a { color: var(--yellow); }
.su-checks.is-invalid .su-check span { color: #ffb3a9; }
.su-quick, .su-full { height: 56px; border: 0; border-radius: 14px; background: var(--green); color: #fff; font: 600 16px/1 "Poppins", sans-serif; letter-spacing: .02em; transition: background .2s, transform .2s; }
.su-quick:hover, .su-full:hover { background: var(--primary-hover); }
.su-quick:active, .su-full:active { transform: translateY(1px); }
.su-note { margin: 0; font: 400 13.5px/1.5 "Lato", sans-serif; color: var(--muted); }
.su-more-link { margin-top: 4px; color: var(--yellow); font: 600 15px/1 "Poppins", sans-serif; }
.su-more-link::after { content: " ↓"; }
.is-open .su-more-link::after { content: " ↑"; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.tk__more { margin-top: 26px; padding-top: 26px; border-top: 1px dashed var(--line-strong); }
.su-phone { gap: 8px; }
.su-cc { height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: #1f1e22; color: #fff; font: 500 15px/1 "Poppins", sans-serif; }
.su-places { background: #232227; border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 24px 48px -16px rgba(0,0,0,.8); }
.su-place { border-radius: 10px; color: #fff; font: 400 15px/1.3 "Lato", sans-serif; }
.su-place:hover, .su-place.is-active { background: var(--surface-2); }
.su-place.is-priority .su-place-name::after { content: "  ·  first"; color: var(--yellow); font-size: 12px; }
.su-place-note, .su-place--none { padding: 8px 10px 4px; font: 400 12px/1.4 "Lato", sans-serif; color: var(--muted); }
.su-chip span { min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--line-strong); color: rgba(255,255,255,.82); font: 400 14px/1 "Lato", sans-serif; transition: background .2s, border-color .2s; }
.su-chip:hover span { border-color: rgba(255,255,255,.4); }
.su-chip input:checked + span { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.su-chip input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }
.su-sub { font-weight: 400; color: var(--muted); }
.su-full { background: transparent; border: 1px solid var(--green); color: #fff; }
[data-su-complete="yes"] .su-full { background: var(--yellow); border-color: var(--yellow); color: #18171a; }

/* done */
.tk__done { padding: 8px 0 4px; }
.is-done [data-su-core], .is-done .tk__more { display: none; }
.su-done-kicker { margin: 0; font: 600 12px/1 "Poppins", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.su-done-title { margin: 10px 0 0; font: 700 38px/1.05 "Lazurski", Georgia, serif; overflow-wrap: anywhere; }
.su-done-title:focus { outline: none; }
.su-done-text { margin: 12px 0 18px; font: 400 16px/1.6 "Lato", sans-serif; color: rgba(255,255,255,.78); }
.su-done-data { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.su-done-data summary { cursor: pointer; font: 500 13px/1.4 "Poppins", sans-serif; color: var(--muted); }
.su-done-data pre { margin: 10px 0 0; overflow-x: auto; font-size: 12.5px; color: #cfe8d5; }
.su-again { height: 46px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--line-strong); background: none; color: #fff; }

@media (max-width: 980px) {
  .tk__stage { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
  .tk__intro { position: static; }
  .tk__photos { display: none; }
  .tk__steps { display: none; }
}
@media (max-width: 520px) {
  .tk__stage { padding: 24px 14px 64px; }
  .tk__card { padding: 22px 16px; border-radius: 18px; }
  .tk__title { font-size: 42px; }
  .tk__lead { font-size: 16px; }
}