/* =========================================================
  REDOVAR — DEMO
========================================================= */


/* =========================================================
  PAGE VARIABLES
========================================================= */

:root {
 --demo-blue:
   var(
     --redovar-blue,
     #0B369A
   );

 --demo-terracotta:
   var(
     --redovar-terracotta,
     #C34811
   );

 --demo-text:
   var(
     --light-text,
     #171717
   );

 --demo-secondary:
   var(
     --light-secondary,
     #6B6B68
   );

 --demo-soft:
   var(
     --light-soft,
     #8B8B86
   );

 --demo-surface:
   var(
     --light-surface,
     #F7F7F5
   );

 --demo-hover:
   var(
     --light-hover,
     #F2F2EF
   );

 --demo-stone:
   var(
     --light-hover,
     #F2F2EF
   );

 --demo-white:
   #FFFFFF;

 --demo-dark:
   #111111;

 --demo-radius:
   var(
     --radius,
     4px
   );

 --demo-ease:
   var(
     --ease,
     cubic-bezier(
       .22,
       .72,
       .22,
       1
     )
   );
}


/* =========================================================
  BASE
========================================================= */

html,
body {
 width:
   100%;

 max-width:
   100%;

 margin:
   0;

 overflow-x:
   hidden;
}


body {
 min-height:
   100vh;

 background:
   var(--demo-white);

 color:
   var(--demo-text);

 font-family:
   "Onest",
   "Segoe UI Variable",
   "Helvetica Neue",
   Arial,
   sans-serif;

 -webkit-font-smoothing:
   antialiased;

 text-rendering:
   optimizeLegibility;
}


*,
*::before,
*::after {
 box-sizing:
   border-box;
}


main,
header,
footer,
section,
div,
form,
nav {
 min-width:
   0;
}


img {
 display:
   block;

 max-width:
   100%;
}


a {
 color:
   inherit;

 text-decoration:
   none;
}


button,
input,
select,
textarea {
 min-width:
   0;

 font:
   inherit;
}


button {
 border:
   0;
}


h1,
h2,
p {
 text-wrap:
   pretty;
}


::selection {
 background:
   rgba(
     11,
     54,
     154,
     .14
   );

 color:
   var(--demo-text);
}


/* =========================================================
  DEMO HEADER
========================================================= */

.demo-header {
  position:
    fixed;

  top:
    0;

  left:
    0;

  right:
    0;

  z-index:
    1000;

  width:
    100%;

  height:
    var(
      --header-h,
      76px
    );

  background:
    var(--demo-dark);

  color:
    #FFFFFF;

  border-bottom: 0;
}



.demo-header-inner {
 min-height:
   var(
     --header-h,
     76px
   );

 display:
   flex;

 align-items:
   center;

 justify-content:
   space-between;

 gap:
   36px;
}


.demo-brand {
 flex:
   0
   0
   auto;
}


/* =========================================================
  HEADER RIGHT

  Sales/email now sit closer to the real account avatar.

  16–18px is enough separation to keep them distinct
  without leaving the large empty gap from before.
========================================================= */

.demo-header-actions {
 margin-left:
   auto;

 display:
   flex;

 align-items:
   center;

 gap:
   clamp(
     14px,
     1.3vw,
     18px
   );
}


.demo-header-email {
 display: none;
 width: 26px;
 height: 26px;
 padding: 0;
 place-items: center;
 flex: 0 0 auto;
 border: 1px solid rgba(231, 231, 227, .48);
 border-radius: 50%;
 background: transparent;
}


.demo-header-email img {
 width: 13px;
 height: 13px;
 filter: brightness(0) invert(96%);
 opacity: .86;
 transition: opacity 150ms ease, transform 150ms ease;
}


.demo-header-email:hover,
.demo-header-email:focus-visible {
 border-color: rgba(245, 245, 243, .78);
 outline: 0;
}


.demo-header-email:hover img,
.demo-header-email:focus-visible img {
 opacity: 1;
 transform: scale(1.08);
}


/* =========================================================
  SALES EMAIL
========================================================= */

.demo-sales {
 display:
   flex;

 align-items:
   center;

 gap:
   9px;

 color:
   rgba(
     255,
     255,
     255,
     .50
   );

 font-size:
   12px;

 line-height:
   1;

 white-space:
   nowrap;
}


.demo-sales a {
 position:
   relative;

 color:
   rgba(
     255,
     255,
     255,
     .94
   );

 font-size:
   13px;

 line-height:
   1;

 font-weight:
   550;

 letter-spacing:
   -.01em;

 text-decoration:
   none !important;

 transition:
   color
   160ms
   ease;
}


.demo-sales a:hover,
.demo-sales a:focus-visible {
 color:
   var(--demo-terracotta);

 text-decoration:
   none !important;
}


/* =========================================================
  LEGACY DEMO LOGIN CONTROL

  header-footer.js replaces this with the real
  account/avatar control.
========================================================= */

.demo-login {
 min-height:
   40px;

 padding:
   0
   15px;

 display:
   inline-flex;

 align-items:
   center;

 justify-content:
   center;

 border:
   0;

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

 background:
   var(--demo-hover);

 color:
   var(--demo-text);

 font-size:
   12px;

 line-height:
   1;

 font-weight:
   550;

 text-decoration:
   none !important;
}


/* =========================================================
  REAL ACCOUNT CONTROL INSIDE DEMO HEADER

  Do not add additional spacing around it.
  The parent gap controls the Sales → Account relationship.
========================================================= */

.demo-header-actions
.site-account {
 margin:
   0;

 flex:
   0
   0
   auto;
}


/* =========================================================
  MAIN
========================================================= */

.demo-main {
  width:
    100%;

  padding-top:
    var(
      --header-h,
      76px
    );

  overflow:
    clip;

  background:
    var(--demo-white);
}



/* =========================================================
  SPLIT LAYOUT
========================================================= */

.demo-layout {
 width:
   100%;

 max-width:
   100%;

 min-height:
   calc(
     100svh
     -
     var(
       --header-h,
       76px
     )
   );

 display:
   grid;

 grid-template-columns:
   repeat(
     2,
     minmax(
       0,
       1fr
     )
   );

 align-items:
   stretch;
}


/* =========================================================
  FORM SIDE
========================================================= */

.demo-form-side {
 min-width:
   0;

 padding:
   clamp(
     72px,
     7vw,
     112px
   )
   clamp(
     38px,
     6vw,
     96px
   )
   clamp(
     78px,
     8vw,
     120px
   );

 display:
   flex;

 align-items:
   center;

 justify-content:
   flex-end;

 background:
   var(--demo-surface);
}


/* =========================================================
  FORM INNER
========================================================= */

.demo-form-inner {
 width:
   min(
     100%,
     650px
   );

 min-width:
   0;
}


/* =========================================================
  INTRO
========================================================= */

.demo-intro {
 width:
   100%;

 max-width:
   650px;
}


/* =========================================================
  PAGE TITLE
========================================================= */

.demo-intro h1 {
 width:
   max-content;

 max-width:
   100%;

 margin:
   0;

 color:
   var(--demo-text);

 font-size:
   clamp(
     44px,
     4.8vw,
     70px
   );

 line-height:
   .96;

 letter-spacing:
   -.055em;

 font-weight:
   500;
}


.demo-intro h1 span {
 display:
   block;

 white-space:
   nowrap;
}


/* =========================================================
  INTRO COPY
========================================================= */

.demo-intro p {
 margin:
   28px
   0
   0;

 max-width:
   560px;

 color:
   var(--demo-secondary);

 font-size:
   clamp(
     15px,
     1.15vw,
     17px
   );

 line-height:
   1.66;
}


/* =========================================================
  FORM
========================================================= */

.demo-form {
 width:
   100%;

 margin-top:
   clamp(
     46px,
     5vw,
     64px
   );
}


/* =========================================================
  FORM GRID
========================================================= */

.demo-form-grid {
 width:
   100%;

 display:
   grid;

 grid-template-columns:
   repeat(
     2,
     minmax(
       0,
       1fr
     )
   );

 gap:
   24px
   14px;
}


/* =========================================================
  FIELD
========================================================= */

.demo-field {
 min-width:
   0;

 display:
   grid;

 align-content:
   start;

 gap:
   9px;
}


.demo-field--wide {
 grid-column:
   1
   /
   -1;
}


/* =========================================================
  LABELS
========================================================= */

.demo-field label {
 display:
   flex;

 align-items:
   baseline;

 gap:
   7px;

 color:
   var(--demo-secondary);

 font-size:
   11px;

 line-height:
   1.25;

 font-weight:
   550;
}


/* =========================================================
  OPTIONAL LABEL
========================================================= */

.demo-field-optional {
 color:
   var(--demo-soft);

 font-size:
   10px;

 font-weight:
   450;
}


/* =========================================================
  INPUTS + SELECTS
========================================================= */

.demo-field input,
.demo-field select {
 width:
   100%;

 min-width:
   0;

 height:
   56px;

 padding:
   0
   16px;

 border:
   0;

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

 outline:
   0;

 background:
   var(--demo-white);

 color:
   var(--demo-text);

 font-size:
   14px;

 line-height:
   1;

 font-weight:
   450;

 box-shadow:
   0
   0
   0
   0
   rgba(
     11,
     54,
     154,
     0
   );

 transition:
   background-color
   160ms
   ease,
   box-shadow
   180ms
   ease;
}


.demo-field input::placeholder {
 color:
   #999994;

 opacity:
   1;
}


/* =========================================================
  FIELD HOVER
========================================================= */

.demo-field input:hover,
.demo-field select:hover {
 background:
   #FDFDFC;
}


/* =========================================================
  FIELD FOCUS
========================================================= */

.demo-field input:focus,
.demo-field select:focus {
 background:
   #FFFFFF;

 box-shadow:
   0
   0
   0
   2px
   rgba(
     11,
     54,
     154,
     .14
   );
}


/* =========================================================
  FIELD ERROR
========================================================= */

.demo-field input[aria-invalid="true"],
.demo-field select[aria-invalid="true"] {
 box-shadow:
   0
   0
   0
   1px
   rgba(
     164,
     55,
     45,
     .62
   );
}


/* =========================================================
  SELECT
========================================================= */

.demo-select-wrap {
 position:
   relative;

 min-width:
   0;
}


.demo-select-wrap::after {
 content:
   "";

 position:
   absolute;

 top:
   50%;

 right:
   18px;

 width:
   7px;

 height:
   7px;

 border-right:
   1px
   solid
   var(--demo-secondary);


 transform:
   translateY(
     -70%
   )
   rotate(
     45deg
   );

 pointer-events:
   none;
}


.demo-field select {
 appearance:
   none;

 -webkit-appearance:
   none;

 padding-right:
   52px;

 box-sizing:
   border-box;

 line-height:
   normal;

 text-overflow:
   ellipsis;

 white-space:
   nowrap;

 cursor:
   pointer;
}


/* =========================================================
  FIELD ERRORS
========================================================= */

.demo-field-error {
 min-height:
   12px;

 color:
   #A4372D;

 font-size:
   10px;

 line-height:
   1.35;
}


/* =========================================================
  SUBMIT
========================================================= */

.demo-submit {
 width:
   100%;

 min-height:
   48px;

 margin-top:
   26px;

 padding:
   0
   20px;

 border:
   0;

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

 background:
   var(--demo-terracotta);

 color:
   #FFFFFF;

 font-size:
   12px;

 line-height:
   1;

 font-weight:
   600;

 cursor:
   pointer;

 transition:
   background-color
   160ms
   ease,
   transform
   180ms
   var(--demo-ease),
   opacity
   160ms
   ease;
}


.demo-submit:hover,
.demo-submit:focus-visible {
 background:
   #D15821;
}


.demo-submit:active {
 transform:
   translateY(
     1px
   );
}


.demo-submit:disabled {
 opacity:
   .54;

 cursor:
   not-allowed;
}


/* =========================================================
  FORM STATUS
========================================================= */

.demo-form-status {
 min-height:
   18px;

 margin:
   15px
   0
   0;

 color:
   var(--demo-secondary);

 text-align:
   center;

 font-size:
   11px;

 line-height:
   1.5;
}


.demo-form-status.is-error {
 color:
   #A4372D;
}


.demo-form-status.is-success {
 color:
   #246139;
}


/* =========================================================
  CONSENT
========================================================= */

.demo-consent {
 margin:
   8px
   auto
   0;

 max-width:
   540px;

 color:
   var(--demo-soft);

 text-align:
   center;

 font-size:
   10px;

 line-height:
   1.6;
}


/* =========================================================
  PRIVACY STATEMENT
========================================================= */

.demo-consent a {
 position:
   relative;

 display:
   inline-block;

 padding-bottom:
   2px;

 color:
   var(--demo-text);

 text-decoration:
   none;

 transition:
   color
   180ms
   ease;
}


.demo-consent a::after {
 content:
   "";

 position:
   absolute;

 left:
   0;

 right:
   0;

 bottom:
   0;

 height:
   1px;

 background:
   currentColor;

 transform:
   scaleX(
     1
   );

 transform-origin:
   left
   center;

 transition:
   transform
   320ms
   var(--demo-ease);
}


.demo-consent a:hover,
.demo-consent a:focus-visible {
 color:
   var(--demo-soft);
}


.demo-consent a:hover::after,
.demo-consent a:focus-visible::after {
 transform:
   scaleX(
     0
   );
}


/* =========================================================
  EXISTING ACCOUNT

  Restored beneath the form.

  Arrow is a real SVG asset supplied by you:
  assets/icons/changethisarrow.svg
========================================================= */

.demo-existing-account {
 margin-top:
   30px;

 display:
   flex;

 align-items:
   center;

 justify-content:
   center;

 gap:
   8px;

 color:
   var(--demo-secondary);

 font-size:
   11px;

 line-height:
   1.4;

 text-align:
   center;
}


/* =========================================================
  EXISTING ACCOUNT LINK
========================================================= */

.demo-existing-account-link {
 display:
   inline-flex;

 align-items:
   center;

 gap:
   7px;

 color:
   var(--demo-terracotta);

 font-weight:
   550;

 text-decoration:
   none !important;

 transition:
   color
   170ms
   ease;
}


.demo-existing-account-link:hover,
.demo-existing-account-link:focus-visible {
 color:
   var(--demo-blue);

 text-decoration:
   none !important;
}


/* =========================================================
  EXISTING ACCOUNT ARROW

  No filter is applied.

  Your SVG keeps whatever color/design you put inside it.
========================================================= */

.demo-existing-account-arrow {
  width:
    12px;

  height:
    12px;

  flex:
    0
    0
    12px;

  display:
    block;

  background-color:
    currentColor;

  -webkit-mask-image:
    url("../../assets/icons/arrow-right-363-svgrepo-com.svg");

  mask-image:
    url("../../assets/icons/arrow-right-363-svgrepo-com.svg");

  -webkit-mask-repeat:
    no-repeat;

  mask-repeat:
    no-repeat;

  -webkit-mask-position:
    center;

  mask-position:
    center;

  -webkit-mask-size:
    contain;

  mask-size:
    contain;

  transition:
    transform
    220ms
    var(--demo-ease);
}



.demo-existing-account-link:hover
.demo-existing-account-arrow,
.demo-existing-account-link:focus-visible
.demo-existing-account-arrow {
 transform:
   translateX(
     2px
   );
}


/* =========================================================
  VISUAL SIDE
========================================================= */

.demo-visual {
 position:
   relative;

 min-width:
   0;

 min-height:
   calc(
     100svh
     -
     var(
       --header-h,
       76px
     )
   );

 overflow:
   hidden;

 isolation:
   isolate;

 background:
   var(--demo-dark);
}


/* =========================================================
  VISUAL IMAGE
========================================================= */

.demo-visual-image {
 position:
   absolute;

 z-index:
   -3;

 inset:
   0;

 width:
   100%;

 height:
   100%;

 max-width:
   none;

 object-fit:
   cover;

 object-position:
   center;

 transform:
   scale(
     1.002
   );
}


/* =========================================================
  VISUAL SHADE
========================================================= */

.demo-visual-shade {
 position:
   absolute;

 z-index:
   -2;

 inset:
   0;

 pointer-events:
   none;

 background:
   linear-gradient(
     180deg,
     rgba(
       0,
       0,
       0,
       .01
     )
     0%,
     rgba(
       0,
       0,
       0,
       .015
     )
     48%,
     rgba(
       0,
       0,
       0,
       .50
     )
     100%
   );
}


/* =========================================================
  VISUAL COPY
========================================================= */

.demo-visual-copy {
 position:
   absolute;

 left:
   50%;

 bottom:
   clamp(
     46px,
     5vw,
     76px
   );

 width:
   min(
     calc(
       100%
       -
       72px
     ),
     760px
   );

 transform:
   translateX(
     -50%
   );

 text-align:
   center;

 color:
   #FFFFFF;
}


/* =========================================================
  VISUAL TITLE
========================================================= */

.demo-visual-copy h2 {
 margin:
   0;

 color:
   #FFFFFF;

 font-size:
   clamp(
     42px,
     4.7vw,
     68px
   );

 line-height:
   .96;

 letter-spacing:
   -.055em;

 font-weight:
   500;
}


/* =========================================================
  DEMO LEGAL FOOTER
========================================================= */

.demo-footer {
 width:
   100%;

 background:
   var(--demo-dark);

}


.demo-footer-legal {
 min-height:
   6px;


 color:
   #FFFFFF;
}


.demo-footer
.footer-legal-links a,
.demo-footer
.footer-legal-links button,
.demo-footer
.footer-copyright {
 color:
   rgba(
     255,
     255,
     255,
     .58
   );
}


.demo-footer
.footer-legal-links a:hover,
.demo-footer
.footer-legal-links a:focus-visible,
.demo-footer
.footer-legal-links button:hover,
.demo-footer
.footer-legal-links button:focus-visible {
 color:
   #FFFFFF;
}


/* =========================================================
  RESPONSIVE — 1180
========================================================= */

@media (max-width: 1180px) {

 .demo-form-side {
   padding-left:
     44px;

   padding-right:
     44px;
 }

}


/* =========================================================
  RESPONSIVE — 900
========================================================= */

@media (max-width: 900px) {

 .demo-layout {
   min-height:
     0;

   grid-template-columns:
     1fr;
 }


 .demo-form-side {
   padding:
     84px
     clamp(
       24px,
       7vw,
       70px
     )
     92px;

   justify-content:
     center;
 }


 .demo-form-inner {
   width:
     min(
       100%,
       680px
     );
 }


 .demo-visual {
   min-height:
     680px;
 }

}


/* =========================================================
  RESPONSIVE — 700
========================================================= */

@media (max-width: 700px) {

 /* =======================================================
   HEADER
 ======================================================== */

 .demo-header-inner {
   gap:
     18px;
 }


 .demo-header-actions {
   gap:
     13px;
 }


 .demo-sales span {
   display:
     none;
 }


 .demo-sales a {
   font-size:
     12px;
 }


 /* =======================================================
   FORM
 ======================================================== */

 .demo-form-side {
   padding:
     68px
     20px
     78px;
 }


 .demo-intro h1 {
   font-size:
     clamp(
       40px,
       11vw,
       56px
     );
 }


 .demo-intro p {
   margin-top:
     24px;
 }


 .demo-form {
   margin-top:
     46px;
 }


 .demo-form-grid {
   grid-template-columns:
     1fr;

   gap:
     21px;
 }


 .demo-field--wide {
   grid-column:
     auto;
 }


 .demo-field input,
 .demo-field select {
   height:
     56px;

   font-size:
     14px;
 }


 .demo-existing-account {
   margin-top:
     28px;
 }


 /* =======================================================
   VISUAL
 ======================================================== */

 .demo-visual {
   min-height:
     580px;
 }


 .demo-visual-copy {
   width:
     calc(
       100%
       -
       40px
     );

   bottom:
     42px;
 }


 .demo-visual-copy h2 {
   font-size:
     clamp(
       38px,
       10.5vw,
       54px
     );
 }

}


/* =========================================================
  RESPONSIVE — 520
========================================================= */

@media (max-width: 520px) {

 .demo-header-email {
   display: grid;
 }

 .demo-sales {
   display:
     none;
 }


 .demo-header-actions {
   gap:
     10px;
 }


 .demo-form-side {
   padding-top:
     58px;
 }


 .demo-intro h1 {
   font-size:
     clamp(
       38px,
       10.5vw,
       50px
     );
 }


 .demo-submit {
   margin-top:
     22px;
 }


 .demo-existing-account {
   align-items:
     center;

   flex-wrap:
     wrap;

   row-gap:
     5px;
 }


 .demo-visual {
   min-height:
     520px;
 }


 .demo-footer-legal {
   padding-top:
     16px;

   padding-bottom:
     16px;
 }

}


/* =========================================================
  REDUCED MOTION
========================================================= */

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

 *,
 *::before,
 *::after {
   animation-duration:
     .01ms !important;

   animation-iteration-count:
     1 !important;

   transition-duration:
     .01ms !important;
 }


 .demo-consent a::after,
 .demo-existing-account-arrow {
   transition:
     none;
 }

}