/* Constellar registration – pixel match live Divi page. Overrides Tailwind. */
*,*::before,*::after{box-sizing:border-box}

:root{
  --c1:#84acdb;
  --c2:#001b40;
  --c3:#f2f5fb;
  --r:30px;
  --input-r:20px;
  --gutter-v:20px;
  --gutter-h:15px;
}

/* Force Divi-like typography (win over Tailwind) */
#page-container{
  font-family: var(--font-open-sans, "Open Sans"), Arial, sans-serif !important;
  font-size: 19px !important;
  line-height: 1.5em !important;
  font-weight: 400 !important;
  color: var(--c2) !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
#page-container *{
  font-family: inherit;
}

/* Page: white background, no horizontal scroll on mobile */
html{overflow-x:hidden !important}
body{background:#fff !important;margin:0 !important;padding:0 !important;overflow-x:hidden !important}
a{color:var(--c1) !important}a:hover{opacity:.85}
/* Slightly subtler tap highlight on touch devices */
@media (hover: none){
  .form input,.form select,.form textarea,.btn,.opt-item,.thank-you-actions a{-webkit-tap-highlight-color:rgba(132,172,219,.2)}
}

/* Main = full width, no max-width constraint */
#main-content{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 6vw !important;
  font-size: 19px !important;
  line-height: 1.5em !important;
  color: var(--c2) !important;
  font-weight: 400 !important;
}
.entry-content{width:100% !important;max-width:none !important}
.et_builder_inner_content{width:100% !important;max-width:none !important}

/* Section 6 = logo above the card (on white) */
.et_pb_section_6{padding:30px 0 !important;padding-bottom:1.5em !important;background:transparent !important}
.et_pb_section_6 .et_pb_row{width:100% !important;max-width:100% !important}
.et_pb_section_6 .et_pb_image{text-align:center !important}
.et_pb_section_6 .et_pb_image_wrap{display:inline-block !important}
.et_pb_section_6 img{max-width:100% !important;height:auto !important;display:block !important;margin:0 auto !important}

/* Section 7 = outer wrapper (transparent), card is row_7 */
.et_pb_section_7{
  background: transparent !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 2vh 0 6vh !important;
  margin: 0 !important;
}
/* Row 7 = THE CARD: light grey #f2f5fb, rounded, no shadow */
.et_pb_section_7 .et_pb_row_7{
  width: 75% !important;
  max-width: none !important;
  margin: 3vh auto !important;
  padding: 4vh 6vw !important;
  background-color: var(--c3) !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
}
.et_pb_section_7 .et_pb_row{width:100% !important;max-width:none !important}
.et_pb_section_7 .et_pb_column{width:100% !important;max-width:none !important}

/* Rows/columns = full width */
.et_pb_row.et_flex_row{display:flex !important;flex-wrap:wrap !important;width:100% !important}
.et_flex_column_24_24{flex:0 0 100% !important;max-width:100% !important}

/* Prose = et_pb_text_inner (match reference: numbered terms, clean styling) */
.et_pb_text_inner p{margin:0 0 1em !important;font-size:19px !important;line-height:1.5em !important;color:var(--c2) !important}
.et_pb_text_inner ol{
  margin:1em 0 !important;
  padding-left:2em !important;
  font-size:17px !important;
  line-height:1.55em !important;
  color:var(--c2) !important;
  list-style-type: decimal !important;
}
.et_pb_text_inner ol li{margin-bottom:.6em !important;font-style:normal !important;padding-left:.25em !important}
.et_pb_text_inner strong{font-weight:700 !important}
.et_pb_text_inner .terms-subtitle{
  font-weight:700 !important;
  font-size:1.05em !important;
  text-transform:uppercase !important;
  letter-spacing:0.02em !important;
  margin:0 0 .6em !important;
  color:var(--c2) !important;
}
.et_pb_text_inner small{font-size:13px !important;color:#555 !important}
.et_pb_text_inner .required-note{font-size:13px !important;color:#555 !important;margin-bottom:.5em !important}
.terms-scroll-link{cursor:pointer !important;text-decoration:underline !important;color:var(--c1) !important}
.terms-scroll-link:hover{color:var(--c2) !important}
.et_pb_contact_form_container{margin-top:0 !important}

/* Headings = bold, dark blue (per reference) */
#main-content h1,#main-content h2,#main-content h3,#main-content h4,#main-content h5,#main-content h6{
  color: var(--c2) !important;
  font-weight: 600 !important;
  line-height: 1.2em !important;
}
#main-content h2{
  font-size: clamp(24px, 1.94rem, 31px) !important;
  margin: 0 0 .6em !important;
}
/* Main heading block: centered, large, uppercase, bold, blue accent line (match screenshots) */
.et_pb_heading_block{text-align:center !important}
.et_pb_heading_block h2{
  font-size: clamp(28px, 2.4rem, 38px) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 .4em !important;
  font-weight: 600 !important;
}
.et_pb_heading_block .et_pb_accent{
  width: 80px !important;
  max-width: 80px !important;
  height: 0 !important;
  border: 0 !important;
  border-top: 3px solid var(--c1) !important;
  margin: 0 auto 1em !important;
  padding: 0 !important;
}

/* Form = et_pb_contact_form */
.form{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: var(--gutter-v) var(--gutter-h) !important;
  margin: 1.5em 0 !important;
}
.field{margin-bottom:0 !important;min-width:0}
.field--8{flex:0 0 calc(33.333% - var(--gutter-h)*2/3) !important;max-width:calc(33.333% - var(--gutter-h)*2/3) !important}
.field--12{flex:0 0 calc(50% - var(--gutter-h)/2) !important;max-width:calc(50% - var(--gutter-h)/2) !important}
.field--24{flex:0 0 100% !important}

/* Labels = et_pb_contact_form_label: bold, uppercase (per reference) */
.field label,
.et_pb_contact_form_label{
  display: block !important;
  font-size: clamp(12px, 1rem, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.2em !important;
  margin-bottom: 8px !important;
  padding-left: 10px !important;
  color: var(--c2) !important;
  text-transform: uppercase !important;
}

/* Inputs = white, pill-shaped, thin grey border (match screenshots) */
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea,
.form .input{
  width: 100% !important;
  background: #fff !important;
  color: var(--c2) !important;
  border: 1px solid #d0d5dd !important;
  border-radius: var(--input-r) !important;
  padding: 12px 18px 14px !important;
  font-family: inherit !important;
  font-size: 19px !important;
  line-height: 1em !important;
  text-align: left !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.form input::placeholder,.form textarea::placeholder{color:var(--c2) !important;opacity:.6 !important;font-size:19px !important}
.form input:focus,.form select:focus,.form textarea:focus{outline:0 !important;background:#fff !important;border-color:var(--c1) !important}

/* Radio buttons: pill-style parity with inputs */
.form input[type="radio"]{
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  margin: 0 !important;
  border: 2px solid #d0d5dd !important;
  border-radius: 50% !important;
  background: #fff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  transition: border-color .2s ease, background .2s ease !important;
}
.form input[type="radio"]:hover{border-color: var(--c1) !important}
.form input[type="radio"]:focus{outline: none !important;border-color: var(--c1) !important}
.form input[type="radio"]:checked{
  background: radial-gradient(circle, #fff 5px, var(--c1) 6px) !important;
  border-color: var(--c1) !important;
}

/* Checkboxes: same parity */
.form input[type="checkbox"]{
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  margin: 0 !important;
  border: 2px solid #d0d5dd !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  transition: border-color .2s ease, background .2s ease !important;
}
.form input[type="checkbox"]:hover{border-color: var(--c1) !important}
.form input[type="checkbox"]:focus{outline: none !important;border-color: var(--c1) !important}
.form input[type="checkbox"]:checked{
  background: var(--c1) !important;
  border-color: var(--c1) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") !important;
  background-size: 14px 14px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.form select{
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23001b40' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 40px !important;
}
.form select:focus{background-color:#fff !important}

/* Radio/checkbox options: align with text inputs (same left padding as field label) */
.opt{display:block !important;margin-top:8px !important;padding-left:10px !important}
.opt-list{display:flex !important;flex-wrap:wrap !important;gap:1em 2em !important;align-items:center !important;row-gap:14px !important}
.opt-item{display:inline-flex !important;align-items:center !important;gap:12px !important;cursor:pointer !important;min-height:1.5em !important}
.opt-item label{font-size:19px !important;font-weight:400 !important;text-transform:none !important;margin:0 !important;padding:0 !important;cursor:pointer !important;color:var(--c2) !important;line-height:1.4em !important;vertical-align:middle !important}
.opt-item input{flex-shrink:0 !important;margin:0 !important;vertical-align:middle !important}

.cond{display:none !important;flex:0 0 100% !important}
.cond.cond--visible{display:flex !important;flex-direction:column !important;flex-wrap:wrap !important}
.cond--visible .form-row{display:flex !important;flex-wrap:wrap !important;gap:var(--gutter-v) var(--gutter-h) !important;width:100% !important}

.form-foot{margin-top:1vh !important;width:100% !important;flex-basis:100% !important;text-align:right !important}
.btn{
  background: var(--c2) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 9999px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 12px 2.5em !important;
  cursor: pointer;
  transition: background .3s ease;
  text-transform: uppercase !important;
}
.btn:hover:not(:disabled){background:var(--c1) !important}
.btn:disabled{opacity:.7 !important;cursor:not-allowed}

.footer{margin-top:1.5em !important;font-size:13px !important;color:#666 !important}
.footer a{color:var(--c1) !important}
.form-error{color:#c00 !important;font-size:13px !important;margin-top:8px !important}

/* Validation: highlight required/missed fields + format hints (smooth transitions) */
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea{transition:border-color .25s ease,background-color .25s ease}
.field--invalid input:not([type="radio"]):not([type="checkbox"]),
.field--invalid select,
.field--invalid textarea{border-color:#c00 !important;background:#fff8f8 !important}
.field label{transition:color .25s ease}
.field--invalid .opt-item input{border-color:#c00 !important;transition:border-color .25s ease}
.field--invalid .opt{border-radius:8px;padding:8px 10px 8px 10px !important;margin-top:8px !important;background-color:#fff8f8;transition:background-color .25s ease}
.field--invalid label{color:#c00 !important}
.field-hint{
  display:block !important;
  font-size:13px !important;
  color:#c00 !important;
  margin-top:6px !important;
  padding-left:10px !important;
  transition:opacity .25s ease,transform .25s ease;
}
.field-hint:empty{display:none !important}
.field-hint:not(:empty){
  animation:field-hint-in .3s ease forwards;
}
@keyframes field-hint-in{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .form input,.form select,.form textarea,.field label,.field-hint{transition:none !important}
  .field-hint:not(:empty){animation:none !important}
}

/* Thank-you state */
.thank-you-block{text-align:center !important;padding:3vh 0 !important}
.thank-you-title{font-size:clamp(24px,2rem,32px) !important;margin:0 0 .5em !important;color:var(--c2) !important}
.thank-you-message{font-size:19px !important;line-height:1.5 !important;margin:0 0 2em !important;color:var(--c2) !important}
.thank-you-actions{display:flex !important;flex-wrap:wrap !important;gap:1rem !important;justify-content:center !important;align-items:center !important}
.btn--secondary{background:transparent !important;color:var(--c2) !important;border:2px solid var(--c2) !important;text-decoration:none !important}
.btn--secondary:hover{background:var(--c2) !important;color:#fff !important}

/* Tablet */
@media (max-width: 980px){
  #main-content{padding-left:4vw !important;padding-right:4vw !important}
  .et_pb_section_7 .et_pb_row_7{width:88% !important;padding:3vh 5vw !important}
  .field--8,.field--12{flex:0 0 100% !important;max-width:100% !important}
  .et_pb_heading_block h2{font-size:clamp(22px,1.75rem,28px) !important}
  .et_pb_text_inner ol{font-size:16px !important}
}

/* Mobile */
@media (max-width: 767px){
  #page-container{font-size:17px !important}
  #main-content{padding-left:4vw !important;padding-right:4vw !important;font-size:17px !important}
  .et_pb_section_6{padding:20px 0 1em !important}
  .et_pb_section_7{padding:1.5vh 0 4vh !important}
  .et_pb_section_7 .et_pb_row_7{width:100% !important;max-width:100% !important;margin:2vh 0 !important;padding:2.5vh 5vw !important;border-radius:20px !important}
  .et_pb_heading_block h2{font-size:clamp(20px,1.5rem,26px) !important;line-height:1.25 !important}
  .et_pb_heading_block .et_pb_accent{margin-bottom:.75em !important}
  .et_pb_text_inner p,.et_pb_text_inner ol{font-size:16px !important}
  .et_pb_text_inner ol{padding-left:1.5em !important}
  .form{gap:16px 0 !important;margin:1em 0 !important}
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="tel"],
  .form select,
  .form textarea{font-size:16px !important;padding:14px 16px !important;min-height:48px !important}
  .form input::placeholder,.form textarea::placeholder{font-size:16px !important}
  .field label,.et_pb_contact_form_label{font-size:13px !important;margin-bottom:6px !important}
  .field--8,.field--12{flex:0 0 100% !important;max-width:100% !important}
  .opt{padding-left:10px !important}
  .opt-item{min-height:44px !important;padding:4px 0 !important;gap:14px !important;align-items:center !important}
  .opt-item label{font-size:16px !important;line-height:1.4em !important}
  .form input[type="radio"],
  .form input[type="checkbox"]{width:24px !important;height:24px !important;min-width:24px !important;flex-shrink:0 !important}
  .form-foot{text-align:center !important;margin-top:1.5em !important}
  .btn{display:block !important;width:100% !important;padding:14px 1.5em !important;min-height:48px !important;font-size:15px !important}
  .thank-you-block{padding:2vh 0 !important}
  .thank-you-title{font-size:clamp(20px,1.4rem,24px) !important}
  .thank-you-message{font-size:16px !important;margin-bottom:1.5em !important}
  .thank-you-actions{flex-direction:column !important;width:100% !important}
  .thank-you-actions .btn,
  .thank-you-actions .btn--secondary{width:100% !important;min-height:48px !important;justify-content:center !important}
  .footer{font-size:12px !important}
  .field-hint{font-size:12px !important}
}

/* Safe area for notched devices */
@supports (padding: env(safe-area-inset-left)){
  #main-content{padding-left:max(6vw, env(safe-area-inset-left)) !important;padding-right:max(6vw, env(safe-area-inset-right)) !important}
}
@supports (padding: env(safe-area-inset-left)){
  @media (max-width: 767px){
    #main-content{padding-left:max(4vw, env(safe-area-inset-left)) !important;padding-right:max(4vw, env(safe-area-inset-right)) !important}
    .et_pb_section_7 .et_pb_row_7{padding-left:max(5vw, env(safe-area-inset-left)) !important;padding-right:max(5vw, env(safe-area-inset-right)) !important}
  }
}
