:root{
  --bg:#07101c;
  --bg-deep:#050a12;
  --surface:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.10);
  --text:#f7f9fc;
  --soft:#dce5ef;
  --muted:#95a4b7;
  --blue:#5d8eff;
  --blue2:#4267e8;
  --gold:#d9bd7a;
  --green:#43d891;
  --danger:#ff9aaa;
  --fib-5:5px;
  --fib-8:8px;
  --fib-13:13px;
  --fib-21:21px;
  --fib-34:34px;
  --fib-55:55px;
  --fib-89:89px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 6% 0%,rgba(93,142,255,.13),transparent 28%),
    radial-gradient(circle at 94% 2%,rgba(217,189,122,.055),transparent 20%),
    linear-gradient(180deg,var(--bg) 0%,#09121f 54%,var(--bg-deep) 100%);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,black,transparent 74%);
}
.page{width:min(1200px,calc(100% - 30px));margin:0 auto}
.nav-wrap{position:sticky;top:0;z-index:50;padding-top:13px}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:21px;
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:34px;
  background:rgba(7,16,28,.78);
  backdrop-filter:blur(18px);
  box-shadow:0 14px 34px rgba(0,0,0,.16)
}
.nav-logo img{width:132px;height:auto;display:block}
.nav-cta{
  min-height:40px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#6f8fff 0%,#5379f2 52%,#4267e8 100%);
  box-shadow:0 8px 22px rgba(66,103,232,.22);
  transition:.18s ease
}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.04)}
.hero{
  position:relative;
  isolation:isolate;
  min-height:calc(100vh - 84px);
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(410px,.84fr);
  gap:89px;
  align-items:center;
  padding:55px 21px;
  overflow:hidden
}
.hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  top:50%;
  right:-22%;
  width:min(1020px,82vw);
  height:min(1020px,82vw);
  transform:translateY(-50%) rotate(-9deg);
  background:url("../img/propvestra-p.png") center/contain no-repeat;
  opacity:.035;
  pointer-events:none
}
.copy{text-align:center;display:flex;flex-direction:column;align-items:center;max-width:760px;margin:0 auto}
.brand-lockup{width:min(400px,70%);margin:0 auto 34px}
.brand-lockup img{width:100%;display:block;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.24))}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(67,216,145,.72)}
h1{max-width:780px;margin:21px auto;font-size:clamp(52px,6.4vw,78px);line-height:1.08;letter-spacing:-.045em;font-weight:760}
.headline-line{display:block}
.headline-line+.headline-line{margin-top:13px}
.lead{max-width:620px;margin:0 auto;color:#e1e8f0;font-size:clamp(20px,1.9vw,24px);line-height:1.5}
.form-shell{position:relative;z-index:3;display:flex;justify-content:flex-end;align-items:center;padding-top:13px}
.form-shell::before{content:"";position:absolute;inset:2% -7%;z-index:-1;border-radius:46% 54% 58% 42%;background:radial-gradient(circle at 32% 22%,rgba(93,142,255,.12),transparent 38%),radial-gradient(circle at 78% 80%,rgba(217,189,122,.05),transparent 38%);filter:blur(5px)}
.card{
  width:100%;
  max-width:455px;
  padding:34px;
  position:relative;
  border:1px solid rgba(255,255,255,.12);
  border-radius:34px;
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.02)),rgba(9,19,33,.88);
  backdrop-filter:blur(24px);
  box-shadow:0 36px 90px rgba(0,0,0,.40)
}
.card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.038);border-radius:21px;pointer-events:none}
.card>*{position:relative;z-index:1}
.card h2{margin:0 0 8px;font-size:35px;line-height:1;letter-spacing:-.05em}
.card-intro{margin:0 0 21px;color:var(--muted);font-size:14px;line-height:1.55}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field{margin-bottom:13px}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:13px}
label{display:block;margin-bottom:8px;color:#e5ebf4;font-size:13px;font-weight:800}
.optional{color:var(--muted);font-size:11px;font-weight:600}
input,textarea{width:100%;padding:13px;border:1px solid rgba(255,255,255,.115);border-radius:13px;outline:none;background:rgba(255,255,255,.048);color:#fff;font:inherit;transition:border-color .18s,box-shadow .18s,background .18s}
textarea{min-height:89px;resize:vertical}
input:focus,textarea:focus{border-color:rgba(93,142,255,.86);box-shadow:0 0 0 4px rgba(93,142,255,.115);background:rgba(255,255,255,.072)}
.consent{margin:8px 0 13px;padding:13px;border:1px solid rgba(255,255,255,.085);border-radius:13px;background:rgba(255,255,255,.024)}
.consent-row{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin:0;color:#dce4ef;font-size:12px;line-height:1.48;cursor:pointer}
.consent-row input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--blue)}
.privacy-note{margin:8px 0 0 25px;color:var(--muted);font-size:11px;line-height:1.5}
.privacy-note a,.consent-row a{color:#fff;text-underline-offset:3px}
.submit{width:100%;min-height:55px;border:0;border-radius:13px;background:linear-gradient(135deg,#7091ff 0%,#5579ef 52%,#4267e8 100%);color:#fff;font:inherit;font-weight:900;cursor:pointer;box-shadow:0 18px 40px rgba(66,103,232,.24)}
.micro{margin:8px 0 0;text-align:center;color:var(--muted);font-size:11px}
.form-errors{margin-bottom:21px;padding:13px;border:1px solid rgba(255,154,170,.22);border-radius:13px;background:rgba(255,154,170,.07);color:#ffd8df;font-size:13px}
.form-errors ul{margin:8px 0 0;padding-left:21px}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.footer{display:flex;justify-content:space-between;align-items:center;gap:21px;flex-wrap:wrap;padding:21px 8px 34px;border-top:1px solid rgba(255,255,255,.07);color:var(--muted);font-size:12px}
.footer-links{display:flex;gap:21px;flex-wrap:wrap}
.footer a{color:#e0e7f0;text-decoration:none}
.footer a:hover{text-decoration:underline;text-underline-offset:3px}

@media(max-width:920px){
  .hero{display:flex;flex-direction:column;min-height:auto;gap:34px;padding:55px 13px 34px}
  .brand-lockup{margin-bottom:21px}
  .form-shell{width:100%;justify-content:center}
  .card{margin:0 auto}
}
@media(max-width:620px){
  .page{width:calc(100% - 18px)}
  .nav-wrap{padding-top:8px}
  .nav{gap:13px;padding:8px 13px;border-radius:21px}
  .nav-logo img{width:116px}
  .nav-cta{min-height:38px;padding:0 13px}
  .hero{align-items:stretch;gap:34px;padding:34px 8px}
  .brand-lockup{width:min(300px,78vw);margin-bottom:21px}
  h1{max-width:355px;margin:21px auto;font-size:clamp(42px,11.7vw,52px);line-height:1.10;letter-spacing:-.04em}
  .headline-line+.headline-line{margin-top:13px}
  .lead{max-width:330px;font-size:18px}
  .form-shell{padding-top:5px}
  .card{max-width:none;padding:21px;border-radius:21px}
  .card::before{border-radius:13px}
  .grid{grid-template-columns:1fr;gap:0}
  input,textarea{font-size:16px}
  .footer{justify-content:center;text-align:center;gap:13px}
  .footer-links{justify-content:center;gap:13px}
}


.legal-body{min-height:100vh;background:linear-gradient(180deg,#07101c,#050a12);color:#f7f9fc}
.legal-wrap{width:min(820px,calc(100% - 28px));margin:0 auto;padding:55px 0 89px}
.legal-logo img{width:178px;height:auto;display:block;margin-bottom:34px}
.legal-card{padding:34px;border:1px solid rgba(255,255,255,.10);border-radius:21px;background:rgba(255,255,255,.04)}
.legal-card h1{font-size:clamp(42px,7vw,68px);margin:0 0 21px;letter-spacing:-.05em}
.legal-card h2{margin:34px 0 8px;font-size:21px}
.legal-card p{color:#95a4b7;line-height:1.72}
.legal-card a{color:#fff}
.legal-lead{font-size:18px}
.legal-warning{margin-top:34px;padding:13px;border:1px solid rgba(217,189,122,.18);border-radius:13px;background:rgba(217,189,122,.05);color:#dce5ef;font-size:13px;line-height:1.6}
.thank-card{text-align:center;padding-top:55px;padding-bottom:55px}
.success-dot{width:13px;height:13px;margin:0 auto 21px;border-radius:50%;background:#43d891;box-shadow:0 0 21px rgba(67,216,145,.6)}
.back-button{display:inline-flex;margin-top:21px;padding:13px 21px;border-radius:13px;text-decoration:none;background:linear-gradient(135deg,#7091ff,#4267e8);font-weight:800}

.phone-choice{margin-top:13px}.phone-choice+ .privacy-note{margin-top:13px}

/* Centre branding on legal pages */
.legal-page .brand,
.legal-page .site-brand,
.legal-page header .brand,
.legal-page header .site-brand {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* Email verification pages */
.verify-card{text-align:center}
.mail-icon{
  width:55px;height:55px;margin:0 auto 21px;border-radius:18px;
  display:grid;place-items:center;font-size:25px;
  background:rgba(93,142,255,.10);border:1px solid rgba(93,142,255,.18)
}
.verify-note{color:var(--muted);font-size:13px}
.verify-actions{margin:21px 0 13px}
.verify-button{border:0;color:#fff;cursor:pointer;font:inherit;font-weight:800}
.verify-back{display:inline-block;color:var(--muted)!important;font-size:13px}
.verify-message{
  margin:21px auto 0;padding:13px;max-width:520px;border-radius:13px;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);
  color:#dce5ef;font-size:13px;line-height:1.5
}


/* =========================================================
   Visual-only tenant-report phone graphic
   Ported from the earlier Propvestra landing-page concept.
   No form or application logic depends on these classes.
   ========================================================= */
.product-phone-visual{
  position:relative;
  width:min(650px,100%);
  min-height:590px;
  margin:34px auto -21px;
  display:grid;
  place-items:center;
  isolation:isolate
}
.product-phone-orbit{
  position:absolute;
  width:520px;
  height:520px;
  max-width:88vw;
  max-height:88vw;
  border:1px solid rgba(255,255,255,.075);
  border-radius:50%;
  background:
    radial-gradient(circle at center,rgba(93,142,255,.085),transparent 53%),
    radial-gradient(circle at 50% 2%,rgba(217,189,122,.14),transparent 20%);
  box-shadow:inset 0 0 80px rgba(93,142,255,.045),0 0 100px rgba(93,142,255,.05)
}
.product-phone-wrap{
  position:relative;
  z-index:4;
  perspective:1100px
}
.product-phone-shadow{
  position:absolute;
  inset:auto 22px -24px;
  height:44px;
  background:rgba(0,0,0,.48);
  filter:blur(18px);
  border-radius:50%
}
.product-phone{
  position:relative;
  width:300px;
  padding:11px;
  border-radius:45px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.05) 18%,rgba(255,255,255,.16)),
    linear-gradient(145deg,#202938,#070b14);
  box-shadow:0 34px 100px rgba(0,0,0,.50),0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.12);
  transform:rotate(1.2deg) rotateY(-6deg)
}
.product-phone-metal{
  position:absolute;
  inset:6px;
  border-radius:39px;
  border:1px solid rgba(255,255,255,.07);
  pointer-events:none
}
.product-phone-notch{
  position:absolute;
  z-index:3;
  top:19px;
  left:50%;
  width:90px;
  height:25px;
  transform:translateX(-50%);
  background:#050814;
  border-radius:999px
}
.product-phone-notch span{
  position:absolute;
  right:15px;
  top:8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#152033
}
.product-phone-screen{
  position:relative;
  min-height:510px;
  padding:49px 18px 17px;
  overflow:hidden;
  border-radius:35px;
  color:#0f172a;
  background:
    radial-gradient(circle at top right,rgba(59,130,246,.22),transparent 32%),
    linear-gradient(180deg,#f8fafc,#eef4fb)
}
.product-phone-screen::before{
  content:"";
  position:absolute;
  left:-80px;
  right:-80px;
  top:-120px;
  height:220px;
  background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(214,179,106,.16));
  transform:rotate(-8deg)
}
.product-phone-screen>*{position:relative;z-index:1}
.product-screen-header{
  display:flex;
  justify-content:space-between;
  gap:11px;
  align-items:flex-start;
  margin-bottom:10px;
  text-align:left
}
.product-screen-pill{
  display:inline-flex;
  margin-bottom:9px;
  padding:6px 9px;
  border-radius:999px;
  background:#dbeafe;
  color:#1d4ed8;
  font-size:9px;
  font-weight:900
}
.product-phone-screen h2{
  margin:0;
  color:#0f172a;
  font-size:27px;
  line-height:.95;
  letter-spacing:-.055em
}
.product-mini-qr{
  width:48px;
  min-width:48px;
  height:48px;
  padding:6px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
  border-radius:13px;
  background:#0f172a;
  box-shadow:0 10px 24px rgba(15,23,42,.16)
}
.product-mini-qr span{border-radius:2px;background:#fff}
.product-mini-qr span:nth-child(2),
.product-mini-qr span:nth-child(6){opacity:.15}
.product-progress{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin:13px 0 14px
}
.product-progress span{
  height:5px;
  border-radius:999px;
  background:#cbd5e1
}
.product-progress .active{
  background:linear-gradient(135deg,var(--blue),var(--green))
}
.product-mock-field,
.product-mock-textarea,
.product-tenant-card{
  margin-bottom:9px;
  padding:11px;
  border:1px solid #e2e8f0;
  border-radius:15px;
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 20px rgba(15,23,42,.065);
  backdrop-filter:blur(10px);
  text-align:left
}
.product-mock-field span{
  display:block;
  margin-bottom:3px;
  color:#64748b;
  font-size:9px;
  font-weight:900
}
.product-mock-field strong{font-size:11px}
.product-issue-selector{
  display:flex;
  gap:6px;
  margin-bottom:9px
}
.product-issue-selector span{
  flex:1;
  border:1px solid #dbe4f0;
  background:rgba(255,255,255,.82);
  color:#475569;
  padding:8px 5px;
  border-radius:999px;
  font-weight:900;
  font-size:9px;
  text-align:center
}
.product-issue-selector .selected{
  border-color:rgba(59,130,246,.35);
  background:#dbeafe;
  color:#1d4ed8
}
.product-mock-textarea{
  color:#334155;
  line-height:1.42;
  font-size:11px
}
.product-photo-preview{
  display:grid;
  grid-template-columns:1.4fr .75fr;
  gap:7px;
  margin:10px 0
}
.product-photo-main,
.product-photo-stack span{
  position:relative;
  border-radius:14px;
  background:
    linear-gradient(135deg,rgba(15,23,42,.3),rgba(59,130,246,.12)),
    linear-gradient(135deg,#cbd5e1,#f8fafc);
  overflow:hidden
}
.product-photo-main{height:76px}
.product-photo-main::after,
.product-photo-stack span::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  height:22px;
  border-radius:999px 999px 9px 9px;
  background:rgba(15,23,42,.18)
}
.product-photo-stack{display:grid;gap:7px}
.product-photo-stack span{height:34.5px}
.product-photo-glow{
  position:absolute;
  width:32px;
  height:32px;
  right:13px;
  top:12px;
  border-radius:50%;
  background:rgba(214,179,106,.7)
}
.product-tenant-card{
  display:flex;
  align-items:center;
  gap:9px
}
.product-avatar{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  font-size:11px;
  font-weight:900
}
.product-tenant-card strong,
.product-tenant-card span{display:block}
.product-tenant-card strong{font-size:10px}
.product-tenant-card span{
  color:#64748b;
  font-size:9px;
  margin-top:2px
}
.product-mock-submit{
  width:100%;
  padding:11px;
  border-radius:14px;
  background:linear-gradient(135deg,#111827,#020617);
  color:#fff;
  text-align:center;
  font-size:10px;
  font-weight:900
}
.product-process-card{
  position:absolute;
  z-index:8;
  display:flex;
  align-items:center;
  gap:10px;
  width:202px;
  padding:11px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.045)),
    rgba(15,23,42,.88);
  backdrop-filter:blur(20px);
  box-shadow:0 22px 55px rgba(0,0,0,.3);
  text-align:left
}
.product-process-card strong,
.product-process-card small{display:block}
.product-process-card strong{font-size:12px}
.product-process-card small{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
  line-height:1.25
}
.product-qr-card{top:69px;left:5px}
.product-form-card{right:0;top:251px}
.product-notify-card{left:49px;bottom:48px}
.product-process-icon{
  width:47px;
  min-width:47px;
  height:47px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:rgba(255,255,255,.10)
}
.product-qr-art{
  padding:7px;
  grid-template-columns:repeat(4,1fr);
  gap:3px;
  background:#fff
}
.product-qr-art span{
  width:100%;
  height:100%;
  border-radius:2px;
  background:#111827
}
.product-qr-art span:nth-child(3n),
.product-qr-art span:nth-child(8),
.product-qr-art span:nth-child(13){background:transparent}
.product-form-icon{align-content:center;gap:5px}
.product-form-icon span{
  width:29px;
  height:5px;
  border-radius:999px;
  background:var(--soft)
}
.product-form-icon span:nth-child(2){
  width:20px;
  justify-self:start;
  margin-left:10px
}
.product-bell-icon{
  position:relative;
  background:linear-gradient(135deg,var(--green),#86efac)
}
.product-bell-icon span{
  width:20px;
  height:21px;
  border-radius:11px 11px 8px 8px;
  background:#fff;
  position:relative
}
.product-bell-icon span::after{
  content:"";
  position:absolute;
  left:7px;
  bottom:-6px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff
}
.product-flow-lines{
  position:absolute;
  z-index:2;
  width:535px;
  height:535px;
  pointer-events:none;
  opacity:.62
}
.product-flow-path{
  fill:none;
  stroke:rgba(93,142,255,.55);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:10 12
}
.product-path-two{stroke:rgba(217,189,122,.52)}
.product-path-three{stroke:rgba(67,216,145,.42)}

@media(max-width:1100px) and (min-width:921px){
  .product-phone-visual{transform:scale(.90);margin-top:21px;margin-bottom:-55px}
}
@media(max-width:620px){
  .product-phone-visual{
    width:100%;
    min-height:535px;
    margin:21px auto -13px;
    transform:none
  }
  .product-phone-orbit{
    width:430px;
    height:430px;
    max-width:112vw;
    max-height:112vw
  }
  .product-phone{
    width:260px;
    transform:rotate(1deg)
  }
  .product-phone-screen{
    min-height:456px;
    padding:45px 15px 15px
  }
  .product-phone-screen h2{font-size:23px}
  .product-process-card{width:166px;padding:9px;gap:8px;border-radius:15px}
  .product-process-card strong{font-size:10px}
  .product-process-card small{font-size:8px}
  .product-process-icon{width:39px;min-width:39px;height:39px;border-radius:12px}
  .product-qr-card{top:53px;left:-4px}
  .product-form-card{right:-5px;top:230px}
  .product-notify-card{left:4px;bottom:44px}
  .product-flow-lines{width:455px;height:455px;max-width:120vw;max-height:120vw}
}


/* =========================================================
   Restored landing-page product sections
   Content/graphics only — no application logic.
   ========================================================= */
.v1-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--gold);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em
}
.v1-statement,
.v1-demo-section,
.v1-how-section,
.v1-price-section{
  width:min(1120px,calc(100% - 26px));
  margin:0 auto
}
.v1-statement{
  margin-top:34px;
  margin-bottom:55px;
  padding:34px;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(135deg,rgba(217,189,122,.10),rgba(93,142,255,.08)),
    rgba(255,255,255,.02);
  text-align:center
}
.v1-statement p{
  max-width:850px;
  margin:0 auto;
  color:var(--soft);
  font-size:clamp(23px,3vw,36px);
  line-height:1.23;
  letter-spacing:-.03em;
  font-weight:760
}
.v1-demo-section{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:55px;
  align-items:center;
  padding:55px 0 89px
}
.v1-demo-copy h2,
.v1-section-heading h2,
.v1-price-copy h2{
  margin:13px 0 21px;
  font-size:clamp(40px,5vw,62px);
  line-height:1.04;
  letter-spacing:-.045em
}
.v1-demo-copy p,
.v1-step-card p,
.v1-price-copy p{
  color:var(--muted);
  font-size:16px;
  line-height:1.65
}
.v1-demo-actions{
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  margin-top:28px
}
.v1-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 21px;
  border-radius:13px;
  text-decoration:none;
  font-size:13px;
  font-weight:900
}
.v1-primary{
  color:#fff;
  background:linear-gradient(135deg,#7091ff,#4267e8);
  box-shadow:0 14px 30px rgba(66,103,232,.20)
}
.v1-secondary{
  color:#eef4fb;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035)
}
.v1-qr-panel{display:grid;gap:13px}
.v1-qr-card{
  padding:28px;
  text-align:center;
  border:1px solid rgba(255,255,255,.11);
  border-radius:28px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:0 28px 70px rgba(0,0,0,.28)
}
.v1-scan-label{
  display:inline-flex;
  margin-bottom:16px;
  padding:8px 12px;
  border-radius:999px;
  color:var(--gold);
  background:rgba(217,189,122,.09);
  border:1px solid rgba(217,189,122,.16);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em
}
.v1-qr-card img{
  display:block;
  width:min(245px,75vw);
  margin:0 auto;
  padding:13px;
  border-radius:23px;
  background:#fff;
  box-shadow:0 18px 55px rgba(0,0,0,.30)
}
.v1-qr-card h3{
  margin:21px 0 8px;
  font-size:25px;
  letter-spacing:-.04em
}
.v1-qr-card p{
  max-width:440px;
  margin:0 auto;
  color:var(--muted);
  font-size:13px;
  line-height:1.55
}
.v1-mini-flow{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px
}
.v1-mini-flow div{
  padding:13px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:rgba(255,255,255,.025);
  color:var(--soft);
  font-size:12px;
  font-weight:800
}
.v1-mini-flow span{
  display:block;
  color:var(--gold);
  margin-bottom:4px;
  font-size:10px
}
.v1-how-section{
  padding:55px 0 89px;
  border-top:1px solid rgba(255,255,255,.06)
}
.v1-section-heading{
  max-width:760px;
  margin-bottom:34px
}
.v1-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px
}
.v1-step-card{
  padding:28px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  background:rgba(255,255,255,.025)
}
.v1-step-card.v1-featured{
  border-color:rgba(93,142,255,.24);
  background:linear-gradient(180deg,rgba(93,142,255,.095),rgba(255,255,255,.025))
}
.v1-step-number{
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:15px;
  background:rgba(255,255,255,.05);
  color:var(--gold);
  font-size:12px;
  font-weight:900
}
.v1-step-card h3{
  margin:21px 0 8px;
  font-size:21px;
  letter-spacing:-.03em
}
.v1-step-card p{margin:0;font-size:14px}
.v1-price-section{
  padding:55px 0 89px;
  border-top:1px solid rgba(255,255,255,.06)
}
.v1-price-panel{
  display:grid;
  grid-template-columns:1fr auto;
  gap:34px;
  align-items:center;
  padding:42px;
  border:1px solid rgba(217,189,122,.14);
  border-radius:34px;
  background:
    radial-gradient(circle at 85% 20%,rgba(217,189,122,.07),transparent 38%),
    rgba(255,255,255,.025)
}
.v1-promise-list{
  margin:28px 0;
  padding:0;
  list-style:none
}
.v1-promise-list li{
  position:relative;
  margin:0 0 11px;
  padding-left:27px;
  color:var(--soft);
  font-size:14px
}
.v1-promise-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--green);
  font-weight:900
}
.v1-price-card{
  min-width:220px;
  padding:28px;
  text-align:center;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  background:rgba(7,16,28,.62)
}
.v1-price-card span{
  display:block;
  color:var(--gold);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em
}
.v1-price-card strong{
  display:block;
  margin:8px 0;
  font-size:48px;
  letter-spacing:-.05em
}
.v1-price-card small{
  color:var(--muted);
  font-size:12px;
  line-height:1.5
}
@media(max-width:900px){
  .v1-demo-section{grid-template-columns:1fr;gap:34px}
  .v1-price-panel{grid-template-columns:1fr}
  .v1-price-card{justify-self:start}
}
@media(max-width:620px){
  .v1-statement,
  .v1-demo-section,
  .v1-how-section,
  .v1-price-section{
    width:calc(100% - 16px)
  }
  .v1-statement{padding:24px;border-radius:24px}
  .v1-demo-section,
  .v1-how-section,
  .v1-price-section{padding-top:55px;padding-bottom:55px}
  .v1-demo-copy h2,
  .v1-section-heading h2,
  .v1-price-copy h2{
    font-size:clamp(36px,10.5vw,48px)
  }
  .v1-mini-flow{grid-template-columns:1fr}
  .v1-steps{grid-template-columns:1fr}
  .v1-price-panel{padding:27px;border-radius:24px}
  .v1-price-card{justify-self:stretch}
  .v1-demo-actions{flex-direction:column}
  .v1-button{width:100%}
}


/* Clickable QR affordance only */
.v1-clickable-qr{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 auto;
  border-radius:23px;
  text-decoration:none;
  cursor:pointer
}
.v1-clickable-qr img{
  transition:transform .18s ease,box-shadow .18s ease
}
.v1-clickable-qr:hover img,
.v1-clickable-qr:focus-visible img{
  transform:translateY(-2px) scale(1.015);
  box-shadow:0 22px 62px rgba(0,0,0,.34),0 0 0 3px rgba(93,142,255,.13)
}


/* =========================================================
   Mobile-only content order
   1. Hero / brand message
   2. QR demo
   3. Early adopter pricing
   4. Early access form
   Remaining supporting content follows afterwards.
   Desktop/tablet layout is unchanged.
   ========================================================= */
@media(max-width:620px){
  main{
    display:flex;
    flex-direction:column
  }

  /* Let the two hero children participate independently in the mobile page order. */
  .hero{
    display:contents
  }

  .copy{
    order:1;
    width:100%;
    padding:34px 8px 21px;
    position:relative
  }

  .v1-demo-section{
    order:2;
    margin-top:13px
  }

  .v1-price-section{
    order:3
  }

  .form-shell{
    order:4;
    width:calc(100% - 16px);
    margin:0 auto;
    padding:21px 0 55px
  }

  .v1-how-section{
    order:5
  }

  .v1-statement{
    order:6;
    margin-top:0;
    margin-bottom:55px
  }

  /* Give the standalone mobile hero copy the visual breathing room it had
     when it still sat inside the two-column hero wrapper. */
  .copy::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:18%;
    left:50%;
    width:520px;
    height:520px;
    max-width:118vw;
    max-height:118vw;
    transform:translateX(-50%) rotate(-9deg);
    background:url("../img/propvestra-p.png") center/contain no-repeat;
    opacity:.028;
    pointer-events:none
  }

  .form-shell::before{
    inset:4% -3%
  }
}


/* iPhone Safari mobile width fix */
@media(max-width:620px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    position:relative;
  }

  .page{
    width:100%;
    max-width:100%;
    margin:0;
    padding-left:9px;
    padding-right:9px;
    overflow:hidden;
  }

  .nav-wrap,
  main,
  .copy,
  .form-shell,
  .v1-demo-section,
  .v1-how-section,
  .v1-price-section,
  .v1-statement{
    width:100%;
    max-width:100%;
  }

  .v1-demo-section,
  .v1-how-section,
  .v1-price-section,
  .v1-statement,
  .form-shell{
    margin-left:0;
    margin-right:0;
  }

  .product-phone-visual{
    max-width:100%;
    overflow:visible;
  }

  .product-phone-orbit,
  .product-flow-lines{
    left:50%;
    transform:translateX(-50%);
  }

  .product-phone-wrap{
    max-width:100%;
  }
}


/* =========================================================
   iPhone Safari horizontal-overflow fix
   Keeps the mobile page centred inside the visual viewport.
   ========================================================= */
@media(max-width:620px){
  html{
    width:100%;
    max-width:100%;
    overflow-x:clip;
  }

  body{
    width:100%;
    max-width:100%;
    margin:0;
    overflow-x:clip;
  }

  .page{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding-left:9px;
    padding-right:9px;
    overflow-x:clip;
  }

  main,
  .copy,
  .form-shell,
  .v1-demo-section,
  .v1-how-section,
  .v1-price-section,
  .v1-statement,
  .v1-demo-copy,
  .v1-qr-panel,
  .v1-price-panel,
  .v1-price-copy,
  .v1-steps,
  .card{
    min-width:0;
    max-width:100%;
  }

  .nav-wrap,
  main{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    overflow-x:clip;
  }

  /* Decorative graphics must never establish a layout width wider than
     the iPhone visual viewport. */
  .product-phone-visual{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .product-phone-orbit{
    width:min(430px,100%);
    height:min(430px,100vw);
    max-width:100%;
    left:50%;
    transform:translateX(-50%);
  }

  .product-flow-lines{
    width:min(430px,100%);
    height:min(430px,100vw);
    max-width:100%;
    left:50%;
    transform:translateX(-50%);
  }

  .copy::before{
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio:1/1;
    left:50%;
    transform:translateX(-50%) rotate(-9deg);
  }

  /* Keep the floating workflow cards inside the viewport instead of
     hanging a few pixels beyond either side. */
  .product-qr-card{
    left:0;
  }

  .product-form-card{
    right:0;
  }

  .product-notify-card{
    left:0;
  }
}