/* Auth dialog states the ported design system did not need for its stub modals:
   server-rendered error banners, the terms row, and the reset-sent confirmation. */
.auth-error,
.auth-msg {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.45;
}
.auth-error {
  color: #8a1c20;
  background: #fdecec;
  border: 1px solid #f3c2c2;
}
.auth-error a { color: #8a1c20; text-decoration: underline; }
.auth-msg {
  color: var(--navy);
  background: var(--paper-alt);
  border: 1px solid #dfe2ea;
}
#fpEmailError { margin-top: -6px; }

.mform .check.terms-check {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 2px 0 20px;
  font-size: 15px;
  line-height: 1.45;
}
.mform .check.terms-check input { margin-top: 3px; flex: 0 0 auto; }
/* the copy is one run of text with an inline link, so it must not become a row of
   flex items — that breaks "Terms of Service" across a gap mid-phrase */
.mform .check.terms-check > span { display: inline; }
.mform .check.terms-check a { color: var(--red); white-space: nowrap; }

.fp-tick {
  width: 54px;
  height: 54px;
  margin: 4px auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #1c7a4a;
  background: #e7f6ee;
}
.fp-tick svg { width: 26px; height: 26px; }
#fpSuccessView { text-align: center; }
/* the message ran straight into the button; give it room to breathe */
#fpSuccessView .modal-sub { margin-bottom: 4px; }
#fpSuccessView .btn { margin-top: 22px; }
#fpSuccessView .mform-foot { margin-top: 16px; }

.mform button[disabled] { opacity: .65; cursor: default; }

/* the real reCAPTCHA widget replaces the preview's dashed placeholder box */
.captcha { border: 0; background: none; padding: 0; min-height: 0; color: inherit; font: inherit; }
.form-status.is-ok  { color: #1c7a4a; }
.form-status.is-err { color: #8a1c20; }

/* The v2 checkbox widget is a fixed 304px iframe, which overflows a 360px
   viewport once page padding is taken off. Scale it down rather than let the
   whole document scroll sideways. */
@media (max-width:400px){
  /* the widget is still laid out as a 304px box, so centring it pushed the
     scaled result off the right edge — pin it left and scale from that edge */
  .captcha{display:flex;justify-content:flex-start;overflow:hidden}
  .captcha .g-recaptcha{
    transform:scale(.84);
    transform-origin:0 50%;
    height:66px;
  }
}

/* long-form legal copy: the legacy pages carried their own fonts and colours
   inline, which were stripped on port, so set readable defaults here */
.legal .legal-body{max-width:78ch;margin-top:30px}
.legal .legal-body h2{font-size:20px;font-weight:800;color:var(--navy);margin:34px 0 10px}
.legal .legal-body h3{font-size:18px;font-weight:800;color:var(--red);margin:28px 0 8px}
.legal .legal-body p{font-size:16.5px;line-height:1.7;margin:0 0 12px;color:var(--gray)}
.legal .legal-body ul,.legal .legal-body ol{margin:0 0 14px 22px;font-size:16.5px;line-height:1.7;color:var(--gray)}
.legal .legal-body li{margin-bottom:6px}
.legal .legal-body a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.legal .legal-body strong,.legal .legal-body b{color:var(--navy)}

/* Numbered legal clauses. The legacy page drew these with inline Open Sans and
   #B42914 circles; here they carry the 2026 navy and type scale. Three levels:
   numbered clauses, lettered sub-points (a-g), roman sub-sub-points (i-viii). */
.legal .lg-intro{
  margin-top:30px;padding:26px 30px;border-radius:8px;
  background:var(--paper-2);border:1px solid var(--line);
  font-size:15.5px;line-height:1.7;color:var(--gray);
}
.legal .lg-intro b,.legal .lg-intro strong{color:var(--navy)}
.legal .lg-item{display:grid;grid-template-columns:52px 1fr;gap:22px;margin-top:32px}
.legal .lg-num{
  width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:22px;font-weight:700;
}
.legal .lg-item.l2{grid-template-columns:38px 1fr;gap:18px;margin-top:22px;margin-left:74px}
.legal .lg-item.l2 .lg-num{width:38px;height:38px;font-size:16px;background:#2C3D74}
.legal .lg-item.l3{grid-template-columns:32px 1fr;gap:16px;margin-top:16px;margin-left:130px}
.legal .lg-item.l3 .lg-num{
  width:32px;height:32px;font-size:13px;background:#fff;color:var(--navy);
  border:1px solid #C3CADC;
}
.legal .lg-close{margin-top:26px;font-size:15.5px;line-height:1.7;color:var(--gray)}
.legal .lg-close:first-of-type{margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}
.legal .lg-txt p{font-size:16.5px;line-height:1.7;margin:0 0 12px;color:var(--gray)}
.legal .lg-txt p:last-child{margin-bottom:0}
.legal .lg-txt b,.legal .lg-txt strong{color:var(--navy)}
.legal .lg-txt ul{margin:0 0 14px 22px;padding:0;font-size:16.5px;line-height:1.7;color:var(--gray)}
.legal .lg-txt li{margin-bottom:6px}
.legal .lg-item.l2 .lg-txt p,.legal .lg-item.l2 .lg-txt li{font-size:16px}
.legal .lg-item.l3 .lg-txt p,.legal .lg-item.l3 .lg-txt li{font-size:15.5px}
@media(max-width:980px){
  .legal .lg-item.l2{margin-left:26px}
  .legal .lg-item.l3{margin-left:48px}
}
@media(max-width:700px){
  .legal .lg-item{grid-template-columns:42px 1fr;gap:14px}
  .legal .lg-num{width:42px;height:42px;font-size:19px}
  .legal .lg-item.l2,.legal .lg-item.l3{margin-left:14px}
}


/* ---------- a single CRE Insights article ---------- */
/* Body copy comes from the blog, so style by element rather than by class. */
.article .wrap{max-width:820px}
.article h1{font-size:clamp(28px,2.8vw,40px);line-height:1.15}
.art-back{margin-bottom:22px;font-size:15px;font-weight:700}
.art-back a{color:var(--navy);text-decoration:none}
.art-back a:hover{color:var(--red)}
.art-meta{margin-top:14px;font-size:15.5px;color:var(--gray)}
.art-dot{margin:0 4px}
.art-labels{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.art-labels span{
  font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--navy);background:#EEF0F4;border-radius:3px;padding:5px 11px;
}
.art-body{margin-top:30px}
.art-body p{font-size:17px;line-height:1.75;margin:0 0 18px;color:var(--gray)}
.art-body h1,.art-body h2,.art-body h3,.art-body h4{
  color:var(--navy);margin:34px 0 12px;line-height:1.25;
}
.art-body h1{font-size:26px}
.art-body h2{font-size:23px}
.art-body h3{font-size:20px}
.art-body h4{font-size:18px}
.art-body b,.art-body strong{color:var(--navy)}
.art-body a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.art-body ul,.art-body ol{margin:0 0 18px 24px;padding:0;font-size:17px;line-height:1.75;color:var(--gray)}
.art-body li{margin-bottom:8px}
/* the blog sets pixel widths and table layouts inline; keep them contained */
.art-body img{max-width:100%;height:auto;display:block;margin:24px auto;border-radius:6px}
.art-body iframe,.art-body table{max-width:100%}
.art-body table{display:block;overflow-x:auto}
.art-body blockquote{
  margin:24px 0;padding:4px 0 4px 22px;border-left:3px solid var(--red);
  font-size:18px;line-height:1.7;color:var(--navy);
}
.art-body div[style]{max-width:100% !important}
/* Post callouts colour themselves inline on a wrapper — a dark card carrying
   color:white. Every rule above is an element rule on a descendant, which beats
   that inherited colour, so the card's own text was repainted var(--gray) and
   its heading var(--navy): the paragraph ended up rgb(71,83,98) on a rgb(71,83,98)
   card, i.e. a solid empty-looking rectangle in a published article, and the hero
   card's h1 came out navy on slate (UI review, 8/24).
   So: wherever the post states a colour, that colour wins for what is inside it.
   Links keep their red — a link is a control, not body copy — but if a future
   post puts one inside a dark card it will need its own inline colour. */
.art-body [style*="color"] p,
.art-body [style*="color"] h1,
.art-body [style*="color"] h2,
.art-body [style*="color"] h3,
.art-body [style*="color"] h4,
.art-body [style*="color"] ul,
.art-body [style*="color"] ol,
.art-body [style*="color"] li,
.art-body [style*="color"] b,
.art-body [style*="color"] strong,
.art-body [style*="color"] blockquote{color:inherit}


/* ---------- Set Password (reset-password.php) ---------- */
.setpass{padding:70px 0 90px}
.sp-card{
  max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:38px 40px 40px;box-shadow:0 10px 34px rgba(19,33,86,.08);
}
.sp-card h1{font-size:clamp(26px,2.4vw,34px);text-align:center}
.sp-card .modal-sub{text-align:center;margin-top:10px}
.sp-card .mform{margin-top:26px}
.sp-req{margin-top:4px;font-size:13.5px;color:var(--gray)}
.field-err{margin-top:6px;font-size:13.5px;color:#c0392b}
.form-status.is-err{color:#c0392b}
#m-setpass-done .modal-box{text-align:center}
#m-setpass-done .fp-tick{margin:4px auto 16px}
#m-setpass-done .btn{margin-top:22px}
@media(max-width:560px){
  .sp-card{padding:28px 22px 30px}
}


/* ---------- field with an icon and a floating label ---------- */
/* The label starts inside the field, as placeholder text beside the icon, and
   animates up to a caption when the field is focused or holds a value. Uses
   :placeholder-shown, so it needs the input to carry placeholder=" ". */
.field-float{position:relative;display:block}
.field-float input{
  width:100%;padding:16px 14px 16px 46px;   /* room for the icon */
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field-float .fi-icon{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:#8C97AE;pointer-events:none;
  transition:color .18s ease, transform .18s ease;
}
.field-float .fi-icon svg{width:100%;height:100%;display:block}
.field-float label{
  position:absolute;left:46px;top:50%;transform:translateY(-50%);
  margin:0;padding:0 4px;background:#fff;color:#8C97AE;
  font-size:16px;font-weight:400;pointer-events:none;
  transition:transform .16s ease, font-size .16s ease, color .16s ease, left .16s ease;
}
/* focused, or filled: label rises to the top edge of the field */
.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label{
  transform:translateY(-34px);
  left:12px;font-size:12.5px;font-weight:700;color:var(--navy);
  letter-spacing:.02em;
}
.field-float input:focus ~ .fi-icon,
.field-float:focus-within .fi-icon{color:var(--red);transform:translateY(-50%) scale(1.06)}
.field-float{margin-top:26px}          /* the risen label needs headroom */
@media (prefers-reduced-motion:reduce){
  .field-float label,.field-float .fi-icon{transition:none}
}


/* ---------- animated envelope (ported from the legacy modal) ---------- */
/* Structure and timings are the legacy site's, so the two behave identically;
   only the red comes from the 2026 token instead of --color-red. */
.fp-mail-icon svg{width:100%;height:100%;overflow:visible}
.fp-env-shell{transform-box:fill-box;transform-origin:50% 55%}
.fp-env-body{fill:none;stroke:currentColor;stroke-width:1.6}
.fp-env-flap{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fp-env-letter{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.fp-env-letter rect{fill:var(--red)}
.fp-env-letter line{stroke:#fff;stroke-width:.7}
.fp-env-spark{fill:var(--red);opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.fp-field.sending .fp-env-shell{animation:fp-env-wobble 1.2s ease-in-out}
.fp-field.sending .fp-env-letter{animation:fp-env-send 1.2s cubic-bezier(.3,.6,.25,1) forwards}
.fp-field.sending .spark-1{animation:fp-env-spark 1.2s ease-out .16s}
.fp-field.sending .spark-2{animation:fp-env-spark 1.2s ease-out .30s}
.fp-field.sending .spark-3{animation:fp-env-spark 1.2s ease-out .44s}
@keyframes fp-env-wobble{
  0%,32%{transform:rotate(0)}
  48%{transform:rotate(-6deg)}
  64%{transform:rotate(4deg)}
  80%{transform:rotate(-2deg)}
  100%{transform:rotate(0)}
}
@keyframes fp-env-send{
  0%{opacity:0;transform:translate(0,0) scale(.6)}
  14%{opacity:1;transform:translate(0,-1px) scale(.88)}
  42%{opacity:1;transform:translate(1px,-8px) scale(.95) rotate(4deg)}
  76%{opacity:1;transform:translate(11px,-19px) scale(.7) rotate(16deg)}
  100%{opacity:0;transform:translate(20px,-30px) scale(.4) rotate(26deg)}
}
@keyframes fp-env-spark{
  0%{opacity:0;transform:scale(.4) translate(0,0)}
  35%{opacity:1;transform:scale(1) translate(0,0)}
  100%{opacity:0;transform:scale(.3) translate(5px,-7px)}
}
@media (prefers-reduced-motion:reduce){
  .fp-field.sending .fp-env-shell,
  .fp-field.sending .fp-env-letter,
  .fp-field.sending .spark-1,
  .fp-field.sending .spark-2,
  .fp-field.sending .spark-3{animation-duration:.001ms !important}
}