:root{
  --green:#7CE0D3;
  --green-hover:var(--green);   /* hover background = the standard green */
  --green-tint:rgba(124,224,211,0.07);   /* subtle section wash */
  --green-tint-bdr:rgba(124,224,211,0.35);
  --black:#1a1a1a;
  --white:#ffffff;
  --off:#f7f7f5;
  --mid:#707070;            /* muted text — AA 4.5:1 on white & off-white */
  --bdr:#e4e4e2;            /* decorative dividers / card edges (exempt from 1.4.11) */
  --field-bdr:#8a8a8a;      /* form-control borders — AA 3:1 non-text */
  --err:#c0392b;            /* error text/border — AA 4.5:1 on white */
  --radius:3px;
  /* ---- type system (mirrors highercommercial.com.au: Poppins, light/medium) ---- */
  --fw-light:300;
  --fw-medium:500;
  --fw-semibold:600;
  --tracking-tight:-0.02em;   /* brand headings */
  --tracking-caps:0.1em;      /* brand eyebrows / small-caps */
  --text-xs:0.75rem;          /* 12px */
  --text-sm:0.875rem;         /* 14px */
  --text-eyebrow:0.7em;       /* small-caps labels */
  --text-base:1rem;           /* 16px — inputs stay here */
  --text-lg:1.125rem;         /* 18px */
}
*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;}
/* Skip link (2.4.1) — injected by common.js as the first tab stop; off-screen
   until focused, then pinned to the top-left over everything. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--black);color:var(--green);
  font-family:'Poppins',sans-serif;font-size:var(--text-sm);font-weight:var(--fw-medium);
  padding:0.7em 1.1em;border-radius:0 0 var(--radius) 0;text-decoration:none;
}
.skip-link:focus{left:0;outline:2px solid var(--green);outline-offset:2px;}
body{
  font-family:'Poppins',sans-serif;
  font-weight:300;
  letter-spacing:-0.017em;
  background:var(--off);
  color:var(--black);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ============ HEADER ============ */
header{
  background:var(--white);
  border-bottom:1px solid var(--bdr);
  padding:1.1em 1.25em;
  display:flex;
  align-items:center;
  justify-content:center;
}
header img{height:2.2em;display:block;}

/* ============ HERO — darkened-photo banner ============ */
/* To swap the banner image: change the url(...) on --banner-img below
   to your own image (a data: URI or an https:// URL). Nothing else to touch. */
:root{
  --banner-img:url("/img/hero.jpg");
}
.hero{
  position:relative;
  background:var(--black);
  padding:0;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--banner-img);
  background-size:cover;
  background-position:center 42%;
  /* lighter, gently desaturated for the premium, on-brand treatment */
  filter:grayscale(22%) brightness(0.86);
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  /* flat dark wash so the heading stays legible across the full banner */
  background:rgba(20,19,17,0.82);
  z-index:1;
}
.hero-inner{
  position:relative;z-index:2;
  max-width:680px;margin:0 auto;
  padding:3.4em 1.25em 3.1em;
}
.hero h1{
  font-size:var(--text-eyebrow);font-weight:var(--fw-medium);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--green);margin-bottom:0.7em;
  display:flex;align-items:center;gap:0.6em;
}
.hero h1::before{
  content:"";width:1.6em;height:1px;background:var(--green);display:inline-block;
}
.hero h2{font-size:2.1em;font-weight:var(--fw-light);letter-spacing:var(--tracking-tight);line-height:1.18;color:var(--white);}
.hero h2 strong{font-weight:600;}
/* When the page's big title IS the <h1> (offer-to-lease / application forms),
   it carries .hero-title so it keeps the large-title look rather than the
   green eyebrow styling that bare .hero h1 applies elsewhere (new-listing). */
.hero h1.hero-title{
  font-size:2.1em;font-weight:var(--fw-light);letter-spacing:var(--tracking-tight);
  line-height:1.18;color:var(--white);text-transform:none;display:block;margin-bottom:0;
}
.hero h1.hero-title::before{content:none;}
.hero h1.hero-title strong{font-weight:600;}
.hero p{font-size:var(--text-sm);color:rgba(255,255,255,0.72);margin-top:0.85em;line-height:1.625;max-width:34em;}

/* ============ PROGRESS INDICATOR ============ */
/* Rendered + updated by forms.js: step title (left), "Step X of Y" (right),
   and a thin bar beneath that fills (currentIndex+1)/totalSteps. */
.progress{max-width:680px;margin:1.75em auto 0;padding:0 1.25em;width:100%;}
.progress-head{display:flex;justify-content:space-between;align-items:baseline;gap:1em;margin-bottom:0.6em;}
.progress-title{font-family:'Poppins',sans-serif;font-weight:var(--fw-medium);font-size:var(--text-lg);color:var(--black);letter-spacing:var(--tracking-tight);}
.progress-count{font-family:'Poppins',sans-serif;font-weight:400;font-size:var(--text-sm);color:var(--mid);white-space:nowrap;}
.progress-track{height:5px;background:var(--bdr);border-radius:999px;overflow:hidden;}
.progress-fill{height:100%;width:0;background:var(--green);border-radius:999px;transition:width 1s cubic-bezier(.4,0,.2,1);}
@media (prefers-reduced-motion:reduce){.progress-fill{transition:none;}}

/* ============ FORM CARD ============ */
main{flex:1;max-width:680px;width:100%;margin:0 auto;padding:1.5em 1.25em 4em;}
.card{background:var(--white);border:1px solid var(--bdr);}
.card-body{padding:1.75em 1.5em;position:relative;}
.card-body.steps-animating{overflow:hidden;transition:height .5s cubic-bezier(.4,0,.2,1);}

.step{display:none;}
.step.show{display:block;}
/* slide transition driven by forms.js (500ms — keep DUR in sync) */
.step.sliding{transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s cubic-bezier(.4,0,.2,1);}
.step.slide-abs{position:absolute;top:0;left:0;right:0;}
@media (prefers-reduced-motion:reduce){
  .step.sliding{transition:none;}
}

.field{margin-bottom:1.25em;}
.field label{
  display:block;font-size:var(--text-base);font-weight:var(--fw-medium);
  margin-bottom:0.45em;color:var(--black);
}
.field label .opt{font-weight:var(--fw-light);font-size:var(--text-eyebrow);color:var(--mid);}
.hint{font-size:var(--text-eyebrow);color:var(--mid);margin-top:0.4em;line-height:1.5;}
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],select,textarea{
  width:100%;
  font-family:'Poppins',sans-serif;
  font-weight:300;
  letter-spacing:-0.017em;
  font-size:0.95em;
  padding:0.7em 0.85em;
  border:1px solid var(--field-bdr);
  background:var(--white);
  color:var(--black);
  border-radius:var(--radius);
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .15s;
}
select{
  background-color:var(--white);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1a1a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.85em center;
  padding-right:2.4em;
}
select option{
  background-color:var(--white);
  color:var(--black);
}
select option:checked,
select option:hover{
  background-color:var(--green-hover);
}
/* Date fields: one consistent on-brand calendar icon; whole field opens the
   picker (handled in common.js). Native indicator kept but made invisible. */
input[type=date]{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231a1a1a' stroke-width='1.5'%3E%3Crect x='2' y='3.5' width='12' height='11' rx='1.5'/%3E%3Cpath d='M2 7.5h12M5.5 2v3M10.5 2v3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 0.85em center;
  background-size:1.05em auto;
  padding-right:2.4em;
}
input[type=date]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer;}

/* ===== Custom <select> dropdown — every native <select> is enhanced by
   common.js. The native control stays in the DOM (value / validation /
   onchange); this styled listbox mirrors it so option hover is green and the
   look matches the property selector. Keyboard accessible (listbox pattern). */
.cs{position:relative;}
select.cs-native{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;pointer-events:none;}
.cs-trigger{
  width:100%;text-align:left;font-family:'Poppins',sans-serif;font-weight:300;
  letter-spacing:-0.017em;font-size:0.95em;color:var(--black);background:var(--white);
  padding:0.7em 2.4em 0.7em 0.85em;border:1px solid var(--field-bdr);border-radius:var(--radius);
  cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1a1a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0.85em center;
}
.cs-trigger.cs-placeholder{color:var(--mid);}
.cs-trigger:focus-visible{outline:2px solid var(--black);outline-offset:2px;}
.field.invalid .cs-trigger{border-color:var(--err);}
.cs-list{
  position:absolute;top:calc(100% - 1px);left:0;right:0;z-index:30;margin:0;padding:0;list-style:none;
  background:var(--white);border:1px solid var(--black);border-radius:var(--radius);
  max-height:18.5em;overflow-y:auto;box-shadow:0 10px 28px rgba(26,26,26,0.14);
}
.cs-list[hidden]{display:none;}
.cs-option{
  display:flex;align-items:center;min-height:2.6em;padding:0.55em 0.85em;cursor:pointer;
  font-size:0.95em;color:var(--black);border-bottom:1px solid var(--off);
}
.cs-option:last-child{border-bottom:none;}
.cs-option.cs-active,.cs-option:hover{background:var(--green-hover);}
.cs-option[aria-selected="true"]{font-weight:var(--fw-medium);}
.cs-option[aria-disabled="true"]{color:var(--mid);cursor:default;}
textarea{min-height:8em;resize:vertical;line-height:1.6;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--black);outline-offset:2px;border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint);}
/* visible focus ring for the remaining interactive controls (2.4.7 / 1.4.11) */
.btn:focus-visible,.btn-add:focus-visible,.upload-btn:focus-visible,.btn-remove:focus-visible,.ac-change:focus-visible,.radio-row:focus-within{outline:2px solid var(--black);outline-offset:2px;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--err);}
.err-msg{display:none;font-size:var(--text-sm);color:var(--err);margin-top:0.4em;}
.field.invalid .err-msg{display:block;}
.term-total{font-size:var(--text-sm);color:var(--mid);margin:-0.4em 0 1.25em;line-height:1.5;}
.term-total:empty{display:none;}
.term-err{display:none;font-size:var(--text-sm);color:var(--err);margin:-0.6em 0 1.25em;line-height:1.5;}
.term-err.show{display:block;}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:1em;}

.money-wrap{position:relative;}
.money-wrap .sym{
  position:absolute;left:0.85em;top:50%;transform:translateY(-50%);
  font-weight:400;color:var(--mid);pointer-events:none;
}
.money-wrap input{padding-left:1.9em;}

/* ============ REVIEW ============ */
.review-group{margin-bottom:1.5em;}
.review-group h3{
  font-size:1.1em;font-weight:var(--fw-medium);letter-spacing:initial;
  text-transform:none;color:var(--black);
  border-bottom:1px solid #c4c3bf;padding-bottom:0.5em;margin-bottom:0.6em;
}
.review-line{display:flex;gap:1em;padding:0.5em 0;font-size:1em;line-height:1.5;align-items:baseline;}
/* Higher corner-mark bullet (logo's upper-right bracket, rotated to point lower-right) */
.rmark{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.1em;height:1em;flex:none;transform:translateY(0.12em);}
.rmark i{position:relative;width:0.62em;height:0.62em;transform:rotate(45deg) translateY(0.05em);}
.rmark i::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:var(--green);border-radius:1.5px;}
.rmark i::after{content:'';position:absolute;top:0;right:0;width:3px;height:100%;background:var(--green);border-radius:1.5px;}
.review-line .rk{color:#5f5e5a;width:13em;flex:none;font-weight:300;}
.review-line .rv{font-weight:var(--fw-medium);color:var(--black);word-break:break-word;}

/* ============ BUTTONS ============ */
/* Brand button type (highercommercial.com.au): 14px, medium, sentence-case, no extra tracking.
   Hover keeps each button's own colour and just slides an arrow in
   (adapted from codepen.io/konradwax/pen/woPNqJ: off-edge transparent arrow
   eases inward while the padding shifts the label aside).
   :active gives a pressed-in look. */
.btn-row{display:flex;gap:0.75em;margin-top:2em;}
.btn{
  position:relative;overflow:hidden;
  font-family:'Poppins',sans-serif;
  font-size:var(--text-sm);font-weight:var(--fw-medium);letter-spacing:normal;text-transform:none;
  padding:0.95em 1.75em;border:1px solid transparent;cursor:pointer;border-radius:var(--radius);
  transition:padding-left .5s,padding-right .5s,transform .1s ease,color .3s ease;
}
.btn::before,.btn::after{
  position:absolute;top:50%;transform:translateY(-50%);opacity:0;
  font-size:1.1em;line-height:1;transition:left .5s,right .5s,opacity .5s,color .3s ease;
}
/* pressed look on click only: the whole button nudges down */
.btn:active{transform:translateY(2px);}

/* Continue = black button; arrow → slides in from the right on hover */
.btn-next{background:var(--black);color:var(--white);flex:1;}
.btn-next::after{content:'\2192';right:-1.4em;}
.btn-next:hover,.btn-next:focus{padding-right:2.7em;padding-left:0.8em;color:var(--green);}
.btn-next:hover::after,.btn-next:focus::after{opacity:1;right:1em;}

/* Back = outline only (no fill); arrow ← comes in from the left on hover */
.btn-back{background:transparent;color:var(--black);border-color:var(--black);}
.btn-back::before{content:'\2190';left:-1.4em;}
.btn-back:hover,.btn-back:focus{padding-left:2.7em;padding-right:0.8em;}
.btn-back:hover::before,.btn-back:focus::before{opacity:1;left:1em;}

/* Submit = final action; black like Continue, fills green on click. Icon = paper plane (slides in on hover). */
.btn-submit{background:var(--black);color:var(--white);flex:1;}
.btn-submit::after{
  content:'';width:1.05em;height:1.05em;right:-1.7em;
  transform:translateY(-50%) rotate(-35deg);   /* paper plane angled up & to the right */
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 21l21-9L2 3v7l15 2-15 2v7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 21l21-9L2 3v7l15 2-15 2v7z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn-submit:hover,.btn-submit:focus{padding-right:2.9em;padding-left:0.7em;color:var(--green);}
.btn-submit:hover::after,.btn-submit:focus::after{opacity:1;right:1em;}
/* Submitting: JS sets the button disabled — a green fill grows left-to-right to 100% over the black base. */
.btn-submit:disabled{
  color:var(--white);cursor:default;border-color:var(--green);
  background:linear-gradient(var(--green),var(--green)) left center / 0% 100% no-repeat var(--black);
  /* green fills left→right; once it's filled the label flips to black */
  animation:submitFill 1.1s ease-out forwards, submitInk 1.1s ease-out forwards;
}
@keyframes submitFill{to{background-size:100% 100%;}}
@keyframes submitInk{0%,65%{color:var(--white);}100%{color:var(--black);}}

/* Success-screen icon overrides (placed AFTER .btn-next/.btn-back so they win) */
.btn-download::after{   /* 'Download a copy (PDF)' — download icon instead of the arrow */
  content:'';width:1.05em;height:1.05em;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 11l5 5 5-5M5 21h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 11l5 5 5-5M5 21h14'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn-restart::before{   /* 'Start a new form' — plus (new) icon instead of the back arrow */
  content:'';width:1.05em;height:1.05em;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============ SUCCESS ============ */
.success{display:none;text-align:center;padding:3em 1.4em;}
.success.show{display:block;}
.s-mark{
  width:3.5em;height:3.5em;border-radius:50%;background:var(--green);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.25em;font-size:1.4em;color:var(--black);font-weight:600;
}
/* higher wordmark shown on the success screen in place of the tick circle */
.s-wordmark{display:block;height:2.4em;width:auto;margin:0 auto 1.25em;}
.success h2{font-size:1.4em;font-weight:300;margin-bottom:0.4em;}
.success h2 strong{font-weight:600;}
.success p{font-size:var(--text-sm);color:var(--mid);line-height:1.7;max-width:26em;margin:0 auto 1.75em;}
.success .btn-row{max-width:24em;margin:0 auto;flex-direction:column;}

/* ============ FOOTER ============ */
footer{
  background:var(--black);padding:1.1em 1.25em;text-align:center;
  font-size:0.7em;color:#9a9a9a;line-height:1.8;
}
footer span{color:#aaa;}

/* ============ PRINT SUMMARY ============ */
.print-area{display:none;}
@media print{
  body.print-summary *{visibility:hidden;}
  body.print-summary header,
  body.print-summary .hero,
  body.print-summary .progress,
  body.print-summary main,
  body.print-summary footer{display:none;}
  body.print-summary .print-area{
    display:block;visibility:visible;
    position:absolute;left:0;top:0;width:100%;
    font-family:'Poppins',sans-serif;letter-spacing:-0.017em;color:#1a1a1a;
  }
  body.print-summary .print-area *{visibility:visible;}
  .p-head{display:flex;justify-content:space-between;align-items:center;padding:0 0 1.5em;border-bottom:2px solid #1a1a1a;}
  .p-head img{height:2.4em;}
  .p-head .p-title{text-align:right;}
  .p-head .p-title div:first-child{font-size:1.125em;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#888;}
  .p-head .p-title div:last-child{font-size:1.3em;font-weight:600;}
  .p-group{margin-top:1.75em;}
  .p-group h3{font-size:1.125em;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#888;margin-bottom:0.6em;}
  .p-line{display:flex;gap:0.7em;padding:0.35em 0;font-size:1em;}
  .p-line::before{content:'\2192';color:#7CE0D3;font-weight:600;}
  .p-line .rk{color:#888;width:16em;flex:none;}
  .p-line .rv{font-weight:400;}
  .p-foot{
    margin-top:3em;background:#7CE0D3;padding:1.4em 1.6em;
    font-size:1em;line-height:1.8;color:#1a1a1a;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .p-foot strong{font-weight:600;}
}

@media(max-width:560px){
  .row2{grid-template-columns:1fr;gap:0;}
  .btn-row{flex-direction:column-reverse;}
  /* keep the chevron locked beside its label; value drops below, tightly */
  .review-line{flex-wrap:wrap;align-items:center;gap:0.3em 0.5em;padding:0.3em 0;}
  .review-line .rmark{flex:0 0 auto;transform:none;}
  .review-line .rk{width:auto;min-width:0;flex:1 1 auto;}
  .review-line .rv{flex:0 0 100%;margin-left:1.5em;}
}

/* ============================================================
   FORM-SPECIFIC RULES
   Shared by application-form / offer-and-application /
   agent-deal-form (and harmless to offer-to-lease).
   These are NOT part of the locked offer-to-lease template;
   keep them here so all four forms can use one stylesheet.
   ============================================================ */

/* Confidential note inside the dark hero banner */
.hero .conf{font-weight:400;color:rgba(255,255,255,0.95);}

/* Intro paragraph + sub-headings */
.intro{font-size:var(--text-sm);color:var(--mid);line-height:1.625;margin-bottom:1.5em;}
.sub-head{
  font-size:var(--text-eyebrow);font-weight:var(--fw-medium);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--mid);
  border-bottom:1px solid var(--off);padding-bottom:0.5em;
  margin:1.75em 0 1em;
}
.sub-head:first-child{margin-top:0;}

.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1em;}

/* ============ GROUP CARDS (guarantors etc.) ============ */
.gcard{border:1px solid var(--bdr);padding:1.2em;margin-bottom:1.25em;background:var(--off);}
.gcard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1em;}
.gcard-title{font-size:var(--text-eyebrow);font-weight:var(--fw-medium);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--black);}
.gcard .field{margin-bottom:1em;}
.gcard input,.gcard select,.gcard textarea{background:var(--white);}

/* icon-only bin button — the visible text is hidden (font-size:0) and the
   accessible name comes from each instance's aria-label. 24px target (2.5.8). */
.btn-remove{
  background:none;border:none;color:var(--err);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;min-height:24px;padding:0.2em;font-size:0;line-height:0;
  transition:color .15s,transform .1s ease;
}
.btn-remove::before{
  content:'';width:18px;height:18px;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn-remove:hover{transform:scale(1.08);}
.btn-remove:active{transform:scale(0.95);}
/* .btn-add carries .btn for its shape/type; this rule only sets the
   outline-on-white look + the .3s hover colour ease. */
.btn-add{
  background:var(--white);border:1px solid var(--black);color:var(--black);
  transition:background-color .3s ease,color .3s ease;
}
.btn-add:hover{background:var(--black);color:var(--green);}

/* ============ TOTALS ============ */
.totals{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--bdr);border:1px solid var(--bdr);margin-top:1.25em;
}
.totals div{background:var(--white);padding:0.8em;text-align:center;}
.totals .tt-label{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:0.1em;text-transform:uppercase;color:var(--mid);margin-bottom:0.3em;}
.totals .tt-val{font-size:var(--text-base);font-weight:var(--fw-semibold);}
.totals .net,.totals .rex{border: solid var(--green) 2px;}
.totals .net .tt-label,.totals .rex .tt-label{color:rgba(0,0,0,0.55);}
.al-err{display:none;font-size:var(--text-sm);color:var(--err);margin-top:0.6em;line-height:1.5;}
.al-err.show{display:block;}

/* Term warning (agent-deal-form) */
.term-warn{display:none;font-size:var(--text-sm);color:var(--black);background:var(--off);border-left:3px solid var(--green);padding:0.7em 0.9em;margin:-0.4em 0 1.25em;line-height:1.6;}
.term-warn.show{display:block;}

/* ============ OUTGOINGS ROWS (agent-deal-form) ============ */
.out-row{display:grid;grid-template-columns:auto 1fr 11em;gap:0.9em;align-items:center;padding:0.65em 0;border-bottom:1px solid var(--off);}
.out-row input[type=checkbox]{width:1.25em;height:1.25em;accent-color:#1a1a1a;}
.out-row .out-label{font-size:var(--text-base);font-weight:var(--fw-light);}
.out-row .money-wrap{visibility:hidden;}
.out-row.on .money-wrap{visibility:visible;}
.out-row .money-wrap input{padding:0.5em 0.75em 0.5em 1.7em;font-size:0.95em;}
.out-row.invalid .money-wrap input{border-color:var(--err);}

/* ============ CHECKBOXES & CONSENT ============ */
.check-row{display:flex;gap:0.75em;align-items:flex-start;margin-bottom:1.25em;}
.check-row input[type=checkbox]{
  width:1.25em;height:1.25em;flex-shrink:0;margin-top:0.15em;
  accent-color:#1a1a1a;
}
.check-row label{font-size:var(--text-base);line-height:1.6;font-weight:var(--fw-light);}
.check-row.invalid label{color:var(--err);}
/* single-line consent rows: vertically centre the box with its label */
#cr_idLater{align-items:center;}
#cr_idLater input[type=checkbox]{margin-top:0;}

.consent-box{
  border:1px solid var(--bdr);background:var(--off);
  padding:1.1em 1.2em;font-size:var(--text-sm);line-height:1.7;color:var(--black);
  margin-bottom:1.25em;
}

/* ============ UPLOADS ============ */
.upload-wrap{margin-bottom:1.25em;}
/* Upload button: same shape/type as Continue (.btn-next) but green; upload icon slides in. */
.upload-btn{
  position:relative;overflow:hidden;display:inline-block;
  font-family:'Poppins',sans-serif;font-size:var(--text-sm);font-weight:var(--fw-medium);
  letter-spacing:normal;text-transform:none;
  background:var(--green);color:var(--black);border:1px solid transparent;border-radius:var(--radius);
  padding:0.95em 1.75em;cursor:pointer;
  transition:padding-left .5s,padding-right .5s,transform .1s ease;
}
.upload-btn::after{
  content:'';position:absolute;top:50%;right:-1.7em;transform:translateY(-50%);opacity:0;
  width:1.05em;height:1.05em;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M8 7l4-4 4 4M5 15v4a1 1 0 001 1h12a1 1 0 001-1v-4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M8 7l4-4 4 4M5 15v4a1 1 0 001 1h12a1 1 0 001-1v-4'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:right .5s,opacity .5s;
}
.upload-btn:hover,.upload-btn:focus{padding-right:2.9em;padding-left:0.7em;}
.upload-btn:hover::after,.upload-btn:focus::after{opacity:1;right:1em;}
.upload-btn:active{transform:translateY(2px);}
/* Upload-plan button: the standard .btn class (shape + font), coloured green,
   with an upload icon that slides in on hover like the other .btn buttons. */
.btn-upload{display:inline-block;background:var(--green);color:var(--black);}
.btn-upload::after{
  content:'';width:1.05em;height:1.05em;right:-1.7em;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M8 7l4-4 4 4M5 15v4a1 1 0 001 1h12a1 1 0 001-1v-4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M8 7l4-4 4 4M5 15v4a1 1 0 001 1h12a1 1 0 001-1v-4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn-upload:hover,.btn-upload:focus{padding-right:2.9em;padding-left:0.7em;}
.btn-upload:hover::after,.btn-upload:focus::after{opacity:1;right:1em;}
.upload-wrap input[type=file]{display:none;}
.upload-thumb{display:none;margin-top:0.9em;max-width:14em;border:1px solid var(--bdr);}
.upload-thumb.show{display:block;}
.upload-name{font-size:var(--text-sm);color:var(--mid);margin-top:0.5em;}
.file-name{font-size:var(--text-sm);color:#555;margin-top:0.6em;}

/* Visible submit error (the real silent-submit fix) */
#submitErr.show{display:block;font-size:1em;line-height:1.45;padding:11px 13px;border:1px solid var(--err);border-radius:8px;}
/* "Complete the fields marked in red" under the Continue button when a step is blocked */
.step-error{display:none;color:var(--err);font-size:var(--text-sm);text-align:center;margin-top:0.9em;}
.step-error.show{display:block;}

/* Mobile rules for the multi-column form layouts */
@media(max-width:560px){
  .row3{grid-template-columns:1fr;gap:0;}
  .out-row{grid-template-columns:auto 1fr;}
  .out-row .money-wrap{grid-column:2;}
  .totals{grid-template-columns:1fr;}
}

/* ============ RADIO AS BUTTON-CARDS (matches .btn-add) ============ */
.radio-group{display:grid;grid-template-columns:1fr 1fr;gap:0.7em;max-width:24em;margin-top:0.3em;}
.radio-group.advisor-choice{grid-template-columns:1fr 1fr;max-width:26em;}
.radio-group.radio-3{grid-template-columns:repeat(3,1fr);max-width:32em;}
@media(max-width:560px){.radio-group.radio-3{grid-template-columns:1fr;}}
.radio-row{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--white);border:1px solid var(--field-bdr);color:var(--black);
  /* match the form text inputs: 0.95em, weight 300, same tracking */
  font-size:0.95em;font-weight:var(--fw-light);letter-spacing:-0.017em;margin-bottom:0;
  padding:0.5em;cursor:pointer;transition:all .15s;border-radius:var(--radius);
}
.radio-row:hover{background:var(--green);}
.radio-row input[type=radio]{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;left:0;top:0;}
.radio-row span{pointer-events:none;}
/* selected = weight 500 + dark border (no fill, so it reads without colour alone — 1.4.1) */
.radio-row:has(input:checked){border-color:var(--black);box-shadow:inset 0 0 0 1px var(--black);font-weight:var(--fw-medium);}
.radio-row:has(input:checked):hover{background:var(--green);}
.field.invalid .radio-group .radio-row{border-color:var(--err);}
/* outrank the .field label rule so radio text is weight 300 (500 when selected) */
.radio-group .radio-row{font-size:0.95em;font-weight:var(--fw-light);}
.radio-group .radio-row:has(input:checked){font-weight:var(--fw-medium);}

/* ============ LIVE-LISTINGS AUTOCOMPLETE ============ */
.ac{position:relative;}
.ac-input{width:100%;font-size:16px;min-height:44px;}            /* 16px prevents iOS zoom; 44px tap target */
.ac-input.ac-locked{background:var(--off);cursor:not-allowed;}
.ac-input:disabled{background:var(--off);cursor:wait;}
.ac-list{position:absolute;top:calc(100% - 1px);left:0;right:0;z-index:30;margin:0;padding:0;list-style:none;
  background:var(--white);border:1px solid var(--black);max-height:18.5em;overflow-y:auto;
  box-shadow:0 10px 28px rgba(26,26,26,0.14);}
.ac-item{display:flex;align-items:center;gap:0.6em;min-height:44px;padding:0.55em 1em;cursor:pointer;
  font-size:1em;color:var(--black);border-bottom:1px solid var(--off);}
.ac-item:last-child{border-bottom:none;}
.ac-item.active,.ac-item:hover{background:var(--green-hover);}
.ac-empty{padding:0.85em 1em;color:var(--mid);font-size:1em;}
/* Structured address sub-fields (Suburb / State / Postcode row). */
.addr-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0.7em;margin-top:0.6em;}
@media(max-width:560px){.addr-row{grid-template-columns:1fr;gap:0.6em;}}
/* styled identically to agent-deal-form's .lock-edit */
.ac-change{margin-top:0.45em;padding:0.25em 0;background:none;border:none;cursor:pointer;
  display:inline-flex;align-items:center;min-height:24px;   /* 2.5.8 target size */
  font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;letter-spacing:-.017em;text-transform:uppercase;
  color:#33A99B;text-decoration:underline;text-underline-offset:2px;}
.ac-change:hover{color:var(--green);}
/* flat read-only display for the listing-resolved agent */
.locked-display{background:var(--off);border:1px solid var(--bdr);border-radius:var(--radius);padding:0.75em 0.9em;font-size:1em;color:var(--black);min-height:44px;display:flex;align-items:center;}
/* ===== Revealed-on-demand fields/blocks — shared classes for consistency.
   .reveal        = animate down when shown (single conditional fields)
   .reveal-block  = the above + green 2px left border (revealed container blocks) */
/* reveal slides in from just above its final position + fades in. The element
   takes its full height immediately (no height animation) — it just glides
   down into place. */
@keyframes revealDown{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:translateY(0);}
}
/* hide: fade opacity to 0 (no movement) before the element is removed from
   the flow (common.js holds it visible for the duration of this animation). */
@keyframes hideUp{
  from{opacity:1;}
  to{opacity:0;}
}
/* .reveal-anim is added by common.js to any inline display:block reveal so
   every conditionally-revealed section animates the same way (no left border). */
.reveal,.reveal-block,.reveal-anim{animation:revealDown .45s ease;}
.hiding{animation:hideUp .3s ease forwards;}
.reveal-block{margin:0.25em 0 1.5em;}
@media (prefers-reduced-motion:reduce){.reveal,.reveal-block,.reveal-anim,.hiding{animation:none;}}