/* ============================================================
   CONSCIOUS PULSE — BESS IP EVALUATION GATEWAY
   Header styles are inherited from demo.css.
   ============================================================ */

:root{
  --gateway-bg:#070a0c;
}

/* ------------------------------------------------------------
   GLOBAL PAGE RESET
   Does NOT touch cp-demo-header.
   ------------------------------------------------------------ */

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  min-height:100vh;
  overflow:auto;
}

*{
  box-sizing:border-box;
}

.gateway-container{
  width:min(1440px,100%);
  min-height:calc(100vh - 76px);

  margin:76px auto 0;

  display:grid;
  grid-template-columns:1fr 1fr;

  background:
    linear-gradient(
      rgba(77,224,192,.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(77,224,192,.012) 1px,
      transparent 1px
    );

  background-size:48px 48px;
}

/* ------------------------------------------------------------
   SHARED
   ------------------------------------------------------------ */

.mono-label{
  font-family:var(--mono);
  font-size:8px;
  line-height:1.25;
  letter-spacing:.12em;
  color:var(--muted);
  text-transform:uppercase;
}

.gateway-context{
  min-width:0;
  padding:52px 52px 46px;

  border-right:1px solid var(--line);

  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:34px;
}

.context-header{
  display:flex;
  flex-direction:column;
  gap:13px;
}

.context-header .mono-label{
  color:var(--teal);
}

.page-title{
  margin:0;
  max-width:650px;

  font-family:var(--sans);
  font-size:clamp(38px,4vw,58px);
  line-height:.96;
  letter-spacing:-.045em;
  font-weight:600;

  color:var(--text);
}

.context-desc{
  max-width:650px;

  margin:0;

  color:var(--soft);

  font-size:14px;
  line-height:1.55;
}

/* ------------------------------------------------------------
   PERIMETER
   ------------------------------------------------------------ */

.matrix-title{
  margin:0 0 13px;
}

.matrix-grid{
  display:grid;
  gap:9px;
}

.matrix-card{
  position:relative;

  padding:15px;

  border:1px solid var(--line);
  background:var(--panel);

  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  row-gap:6px;

  transition:
    border-color .16s ease,
    background .16s ease;
}

.matrix-card:hover{
  border-color:var(--line2);
  background:rgba(8,14,16,.92);
}

.matrix-icon{
  width:19px;
  height:19px;
  grid-row:1 / span 2;

  color:var(--teal);
}

.matrix-card h3{
  margin:0;

  font-family:var(--sans);
  font-size:10px;
  font-weight:600;

  color:var(--text);
}

.matrix-card p{
  margin:0;

  color:var(--muted);

  font-size:8px;
  line-height:1.45;
}

/* ------------------------------------------------------------
   MATURITY
   ------------------------------------------------------------ */

.maturity-notice{
  display:flex;
  align-items:center;
  gap:10px;

  padding:11px 12px;

  border:1px solid var(--line2);
  background:var(--teal2);

  color:var(--teal);

  font-family:var(--mono);
  font-size:7px;
  line-height:1.4;
  letter-spacing:.04em;
}

.maturity-notice svg{
  width:15px;
  height:15px;
  flex:none;
}

/* ------------------------------------------------------------
   INTAKE
   ------------------------------------------------------------ */

.gateway-intake{
  min-width:0;

  padding:52px;

  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.intake-panel{
  width:100%;
  max-width:600px;

  border:1px solid var(--line);
  background:rgba(8,14,16,.86);
}

.intake-header{
  padding:13px 16px;

  border-bottom:1px solid var(--line);

  background:rgba(8,14,16,.72);
}

.intake-header .mono-label{
  color:var(--teal);
}

.intake-form{
  padding:27px 18px 19px;

  display:flex;
  flex-direction:column;
  gap:25px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.tech-input{
  width:100%;
  height:38px;

  padding:0;

  border:0;
  border-bottom:1px solid var(--line2);

  outline:none;

  background:transparent;

  color:var(--text);

  font-family:var(--sans);
  font-size:11px;

  transition:border-color .16s ease;
}

.tech-input::placeholder{
  color:#566360;
}

.tech-input:focus{
  border-bottom-color:var(--teal);
}

.intent-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.intent-grid.split-2{
  grid-template-columns:1fr 1fr;
}

.intent-radio{
  position:relative;
  cursor:pointer;
}

.intent-radio input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.radio-box{
  min-height:45px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:8px 10px;

  border:1px solid var(--line);

  background:rgba(8,14,16,.58);

  color:var(--soft);

  text-align:center;

  font-size:8px;
  line-height:1.25;

  transition:
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
}

.intent-radio:hover .radio-box{
  border-color:var(--line2);
}

.intent-radio input:checked + .radio-box{
  border-color:var(--teal);
  background:var(--teal2);
  color:var(--teal);
}

.form-actions{
  padding-top:10px;

  border-top:1px solid var(--line);
}

.action-btn{
  width:100%;
  min-height:46px;

  border:1px solid var(--teal);

  background:var(--teal);
  color:#06100f;

  padding:0 14px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  cursor:pointer;

  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.10em;
  font-weight:700;

  transition:
    background .16s ease,
    border-color .16s ease;
}

.action-btn:hover{
  background:#f0f6f4;
  border-color:#f0f6f4;
}

.btn-icon{
  width:16px;
  height:16px;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width:1024px){

  .gateway-container{
    grid-template-columns:1fr;
  }

  .gateway-context{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:38px 30px;
  }

  .gateway-intake{
    padding:30px;
  }
}

@media (max-width:700px){

  .gateway-container{
    margin-top:76px;
  }

  .gateway-context{
    padding:30px 18px;
  }

  .gateway-intake{
    padding:18px;
  }

  .page-title{
    font-size:38px;
  }

  .form-row,
  .intent-grid,
  .intent-grid.split-2{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   FORMSPREE SUBMISSION STATUS
   ============================================================ */

.form-status{
  min-height:14px;
  margin-top:8px;

  font-family:var(--mono);
  font-size:7px;
  line-height:1.4;
  letter-spacing:.07em;

  color:#72807d;
  text-transform:uppercase;
}

.form-status.success{
  color:var(--teal);
}

.form-status.error{
  color:#c58f8f;
}

.action-btn:disabled{
  opacity:.65;
  cursor:wait;
}

/* ============================================================
   CP EVALUATION — FIT / NO SCROLL
   Expand into available space without increasing viewport height.
   ============================================================ */

.gateway-container{
    width:100%;
    min-height:calc(100vh - 76px);
}

/* LEFT */
.gateway-context{
    padding:3.25rem 3.25rem 2.75rem;
}

.context-header{
    max-width:none;
}

.page-title{
    max-width:100%;
    font-size:clamp(3rem,3.7vw,4.2rem);
    line-height:.98;
    letter-spacing:-.04em;
}

.context-desc{
    max-width:92%;
    font-size:1rem;
    line-height:1.55;
}

.perimeter-matrix{
    margin-top:3rem;
}

.matrix-grid{
    width:100%;
    gap:.7rem;
}

.matrix-card{
    width:100%;
    min-height:78px;
    padding:1rem 1.15rem;
}

.matrix-card h3{
    font-size:.94rem;
}

.matrix-card p{
    font-size:.72rem;
    line-height:1.4;
}

.maturity-notice{
    width:100%;
    margin-top:2.15rem;
    min-height:52px;
}

/* RIGHT */
.gateway-intake{
    padding:2.7rem 3.25rem;
}

.gateway-intake .intake-panel,
.intake-panel{
    width:100%;
    max-width:none;
}

.intake-header{
    width:100%;
    padding:1.3rem 1.5rem;
}

.gateway-form{
    width:100%;
    padding:1.5rem;
}

.form-group{
    width:100%;
    margin-bottom:1.25rem;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
}

/* Make the intent/disclosure blocks use all available width */
.intent-grid{
    width:100%;
    gap:.65rem;
}

.intent-option,
.disclosure-option{
    width:100%;
    min-height:60px;
    padding:.85rem 1rem;
}

/* CTA full width */
.form-actions{
    width:100%;
    margin-top:1.35rem;
}

.action-btn{
    width:100%;
    min-height:54px;
}

/* Avoid accidental overflow from long translations */
.gateway-context,
.gateway-intake,
.intake-panel,
.gateway-form{
    box-sizing:border-box;
    min-width:0;
}

@media (max-width:1100px){
    .gateway-context{
        padding-left:2.5rem;
        padding-right:2.5rem;
    }

    .gateway-intake{
        padding-left:2.5rem;
        padding-right:2.5rem;
    }

    .page-title{
        font-size:clamp(2.7rem,3.8vw,3.6rem);
    }
}

/* ============================================================
   CP EVALUATION — FIT V2
   Larger visual scale, same viewport footprint.
   ============================================================ */

/* ============================================================
   LEFT SIDE
   ============================================================ */

.gateway-context{
    padding:2.9rem 3.4rem 2.5rem;
}

.page-title{
    font-size:clamp(3.15rem,4vw,4.55rem);
    line-height:.94;
    letter-spacing:-.045em;
    max-width:96%;
}

.context-desc{
    max-width:94%;
    font-size:1.04rem;
    line-height:1.52;
    margin-top:1.35rem;
}

.perimeter-matrix{
    margin-top:2.65rem;
}

.matrix-title{
    font-size:.76rem;
    margin-bottom:.8rem;
}

.matrix-grid{
    gap:.65rem;
}

.matrix-card{
    min-height:82px;
    padding:1rem 1.2rem;
}

.matrix-icon{
    width:21px;
    height:21px;
    margin-right:1rem;
}

.matrix-card h3{
    font-size:.98rem;
    line-height:1.2;
}

.matrix-card p{
    font-size:.74rem;
    line-height:1.38;
}

.maturity-notice{
    margin-top:1.9rem;
    min-height:50px;
    padding:.9rem 1.1rem;
    font-size:.73rem;
}

/* ============================================================
   RIGHT SIDE
   ============================================================ */

.gateway-intake{
    padding:2.45rem 3.4rem;
}

.intake-panel{
    max-width:none;
}

.intake-header{
    padding:1.2rem 1.45rem;
}

.intake-header h2{
    font-size:1rem;
}

.gateway-form{
    padding:1.45rem;
}

.form-group{
    margin-bottom:1.1rem;
}

.form-group label{
    font-size:.72rem;
}

.form-group input,
.form-group select,
.form-group textarea{
    min-height:50px;
    font-size:.92rem;
    padding:.82rem .95rem;
}

.intent-grid{
    gap:.55rem;
}

.intent-option,
.disclosure-option{
    min-height:62px;
    padding:.8rem .95rem;
    font-size:.8rem;
}

.intent-option span,
.disclosure-option span{
    font-size:.8rem;
}

.form-actions{
    margin-top:1.2rem;
}

.action-btn{
    min-height:55px;
    font-size:.78rem;
}

/* ============================================================
   VERY WIDE DESKTOP
   ============================================================ */

@media (min-width:1400px){

    .gateway-context{
        padding-left:4rem;
        padding-right:4rem;
    }

    .gateway-intake{
        padding-left:4rem;
        padding-right:4rem;
    }

    .page-title{
        font-size:4.7rem;
    }

    .context-desc{
        font-size:1.08rem;
    }

    .matrix-card{
        min-height:86px;
    }
}

/* ============================================================
   KEEP IT INSIDE THE VIEWPORT
   ============================================================ */

html,
body{
    overflow-x:hidden;
}

.gateway-container{
    min-height:calc(100vh - 76px);
}

/* ============================================================
   CP EVALUATION — COMPACT LAYOUT
   Keep typography scale. Reduce container footprint.
   ============================================================ */

/* ============================================================
   GLOBAL
   ============================================================ */

.gateway-container{
    min-height:0;
}

/* ============================================================
   LEFT COLUMN
   ============================================================ */

.gateway-context{
    padding-top:2.15rem;
    padding-bottom:1.8rem;
}

/* Don't let the text create oversized vertical blocks */
.context-header{
    margin:0;
}

/* Keep existing font size; just tighten the text block */
.context-desc{
    margin-top:1rem;
    line-height:1.45;
}

/* Perimeter starts closer to description */
.perimeter-matrix{
    margin-top:2rem;
}

.matrix-title{
    margin-bottom:.65rem;
}

/* Cards: same readable typography, much less box around them */
.matrix-grid{
    gap:.5rem;
}

.matrix-card{
    min-height:0;
    padding:.72rem 1rem;
}

.matrix-icon{
    width:19px;
    height:19px;
    margin-right:.9rem;
}

.matrix-card h3{
    margin-bottom:.2rem;
}

.matrix-card p{
    line-height:1.3;
}

/* Maturity directly follows the cards */
.maturity-notice{
    margin-top:1.35rem;
    min-height:0;
    padding:.72rem 1rem;
    line-height:1.3;
}

/* ============================================================
   RIGHT COLUMN
   ============================================================ */

.gateway-intake{
    padding-top:1.9rem;
    padding-bottom:1.9rem;
}

.intake-header{
    padding:1rem 1.35rem;
}

.gateway-form{
    padding:1.25rem 1.35rem;
}

/* Less vertical waste between fields */
.form-group{
    margin-bottom:.9rem;
}

.form-group input,
.form-group select,
.form-group textarea{
    min-height:46px;
    padding:.7rem .9rem;
}

/* Compact option quadrants */
.intent-grid{
    gap:.45rem;
}

.intent-option,
.disclosure-option{
    min-height:54px;
    padding:.65rem .85rem;
}

/* CTA closer to the options */
.form-actions{
    margin-top:.95rem;
}

.action-btn{
    min-height:50px;
}

/* ============================================================
   LARGE DESKTOP — KEEP EVERYTHING INSIDE VIEWPORT
   ============================================================ */

@media (min-width:1200px){

    .gateway-context{
        padding-left:3.2rem;
        padding-right:3.2rem;
    }

    .gateway-intake{
        padding-left:3.2rem;
        padding-right:3.2rem;
    }
}

/* ============================================================
   PREVENT VERTICAL OVERFLOW
   ============================================================ */

html,
body{
    overflow-x:hidden;
}

/* ============================================================
   CP EVALUATION — TITLE SCALE
   Larger H1 without expanding the overall layout.
   ============================================================ */

.page-title{
    font-size:clamp(3.45rem,4.6vw,5.1rem);
    line-height:.92;
    letter-spacing:-.05em;
    max-width:100%;
    margin-bottom:0;
}

@media (max-width:1200px){
    .page-title{
        font-size:clamp(3.2rem,4.8vw,4.5rem);
    }
}

/* ============================================================
   CP EVALUATION — INTAKE SCALE
   Larger intake console without unnecessary page height.
   ============================================================ */

.gateway-intake{
    padding:2rem 3.2rem;
}

.intake-panel{
    width:100%;
    max-width:none;
}

.intake-header{
    padding:1.25rem 1.55rem;
}

.intake-header h2{
    font-size:1.05rem;
    letter-spacing:.15em;
}

.gateway-form{
    padding:1.55rem;
}

.form-group{
    margin-bottom:1rem;
}

.form-group label{
    font-size:.74rem;
    letter-spacing:.15em;
}

.form-group input,
.form-group select,
.form-group textarea{
    min-height:52px;
    padding:.82rem 1rem;
    font-size:.95rem;
}

.intent-grid{
    gap:.65rem;
}

.intent-option,
.disclosure-option{
    min-height:66px;
    padding:.9rem 1rem;
}

.intent-option span,
.disclosure-option span{
    font-size:.82rem;
    line-height:1.35;
}

.form-actions{
    margin-top:1.15rem;
}

.action-btn{
    min-height:58px;
    font-size:.82rem;
    letter-spacing:.13em;
}

/* ============================================================
   CP EVALUATION — OPTIONS TEXT SCALE
   Slightly larger option labels without enlarging boxes.
   ============================================================ */

.intent-option span,
.disclosure-option span{
    font-size:.9rem;
    line-height:1.35;
    font-weight:500;
}

/* ============================================================
   CP EVALUATION — OPTION TEXT FINAL SCALE
   Force readable option labels without changing box size.
   ============================================================ */

.intent-option,
.disclosure-option{
    font-size:1.02rem !important;
    line-height:1.35 !important;
    font-weight:500 !important;
}

.intent-option span,
.intent-option label,
.disclosure-option span,
.disclosure-option label{
    font-size:1.02rem !important;
    line-height:1.35 !important;
    font-weight:500 !important;
}

/* ============================================================
   CP EVALUATION — RADIO LABEL SCALE
   Targets the actual text-bearing .radio-box elements.
   ============================================================ */

.intent-radio .radio-box{
    font-size:1rem !important;
    line-height:1.35 !important;
    font-weight:500 !important;
}

/* ============================================================
   CP EVALUATION — RADIO LABEL REFINED SCALE
   ============================================================ */

.intent-radio .radio-box{
    font-size:.90rem !important;
    line-height:1.35 !important;
    font-weight:500 !important;
}

/* ============================================================
   CP EVALUATION — RADIO TEXT FINAL
   Exact IDs. Final visual scale.
   ============================================================ */

#lbl-intent-1,
#lbl-intent-2,
#lbl-intent-3,
#lbl-intent-4,
#lbl-disc-1,
#lbl-disc-2{
    font-size:.84rem !important;
    line-height:1.3 !important;
    font-weight:500 !important;
}
/* EVALUATION SECTION TITLES TUNING */

#lbl-protocol-title{
    font-size:1.38rem !important;
    line-height:1.15 !important;
}

#lbl-intent-title,
#lbl-disclosure-title{
    display:block;
    width:100%;
    text-align:center !important;
    margin-top:-0.28rem !important;
    margin-bottom:0.48rem !important;
}
/* PROTOCOL TITLE — ONLY THIS ELEMENT */
#lbl-protocol-title {
    font-size: 1.10rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
}
/* PROTOCOL TITLE CENTER — FINAL */
.intake-header{
    text-align:center !important;
}

#lbl-protocol-title{
    font-size:0.88rem !important;
}
/* COMPACT CONTEXT — REDUCE ONLY VERTICAL GAPS */

.gateway-context{
    gap:1.5rem !important;
}

.context-header{
    gap:0.5rem !important;
}

.matrix-grid{
    gap:0.5rem !important;
    margin-top:0.75rem !important;
}

.maturity-notice{
    margin-top:0 !important;
}
/* LAYOUT FIX — REMOVE DISTRIBUTED VERTICAL SPACE */

.gateway-context{
    justify-content:flex-start !important;
    gap:24px !important;
}

.perimeter-matrix{
    margin-top:12px !important;
}
/* BALANCED VERTICAL SPACING */

.gateway-context{
    justify-content:flex-start !important;
    gap:54px !important;
}

.perimeter-matrix{
    margin-top:12px !important;
}
/* INTAKE PANEL — COMPACT SCALE */

.intake-panel{
    zoom:0.90 !important;
}