/* =========================================================
   CAKXO STUDY PAGE
   ========================================================= */


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

* {
  box-sizing: border-box;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* =========================================================
   COLORS
   ========================================================= */

:root {

  --cream: #F7EBDD;
  --warm-white: #FFF9F2;

  --navy: #172A3A;
  --navy-text: #18232C;
  --navy-soft: #243B4D;

  --terracotta: #C46A4A;
  --burnt-clay: #A94F35;
  --dark-clay: #8C3F27;

  --sand: #EBD8C5;
  --gold: #C49A5A;

  --border: #D8C9BC;

  --soft-shadow:
    0 10px 28px rgba(23, 42, 58, 0.10);

  --large-shadow:
    0 16px 40px rgba(23, 42, 58, 0.13);
}


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

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {

  min-height: 100vh;

  padding:
    2rem
    1rem
    4rem;

  background:
    var(--cream);

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


/* =========================================================
   CONTAINER
   ========================================================= */

.page-container {

  width: 100%;

  max-width: 720px;

  margin:
    0 auto;
}


/* =========================================================
   TOP ACTIONS
   ========================================================= */

.top-action {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 9px;

  margin-bottom: 22px;
}


/* =========================================================
   CAKXO + CALENDLY BUTTONS
   ========================================================= */

.cakxo-button,
.calendly-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: fit-content;

  min-width: 170px;

  padding:
    11px
    22px;

  border-radius:
    8px;

  font-family: inherit;

  font-size:
    14px;

  font-weight:
    700;

  line-height:
    1.2;

  text-align:
    center;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


/* =========================================================
   VISIT CAKXO
   ========================================================= */

.cakxo-button {

  background:
    var(--navy);

  color:
    var(--warm-white);

  border:
    2px solid
    var(--navy);
}


.cakxo-button:hover {

  background:
    var(--navy-soft);

  border-color:
    var(--navy-soft);

  color:
    var(--warm-white);

  transform:
    translateY(-1px);

  box-shadow:
    0 4px 10px
    rgba(23, 42, 58, 0.14);
}


/* =========================================================
   BOOK AN APPOINTMENT
   ========================================================= */

.calendly-button {

  background:
    var(--terracotta);

  color:
    var(--warm-white);

  border:
    2px solid
    var(--terracotta);
}


.calendly-button:hover {

  background:
    var(--burnt-clay);

  border-color:
    var(--burnt-clay);

  color:
    var(--warm-white);

  transform:
    translateY(-1px);

  box-shadow:
    0 4px 10px
    rgba(169, 79, 53, 0.16);
}


/* =========================================================
   CARDS
   ========================================================= */

.engagement-card,
.lead-card {

  width: 100%;

  max-width: 620px;

  margin:
    0 auto;

  padding:
    2.25rem;

  background:
    var(--warm-white);

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

  border-radius:
    18px;

  box-shadow:
    var(--large-shadow);
}


/* =========================================================
   HIDDEN
   ========================================================= */

.hidden {
  display: none;
}


/* =========================================================
   STEP LABEL
   ========================================================= */

.step-label {

  margin-bottom:
    0.55rem;

  color:
    var(--terracotta);

  font-size:
    12px;

  font-weight:
    750;

  letter-spacing:
    0.13em;

  text-align:
    center;
}


/* =========================================================
   HEADINGS
   ========================================================= */

.engagement-card h1,
.lead-card h2 {

  margin:
    0;

  color:
    var(--navy);

  font-size:
    2rem;

  line-height:
    1.2;

  font-weight:
    700;

  letter-spacing:
    -0.02em;

  text-align:
    center;
}


.engagement-card h1::after,
.lead-card h2::after {

  content:
    "";

  display:
    block;

  width:
    52px;

  height:
    3px;

  margin:
    0.7rem
    auto
    1rem;

  background:
    var(--terracotta);

  border-radius:
    999px;
}


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

.intro-text {

  max-width:
    520px;

  margin:
    0 auto
    1.5rem;

  color:
    #5F5751;

  font-size:
    15px;

  line-height:
    1.65;

  text-align:
    center;
}


/* =========================================================
   QUESTION CATEGORY
   ========================================================= */

.question-category {

  width:
    fit-content;

  margin:
    0 auto
    1rem;

  padding:
    6px
    12px;

  border-radius:
    999px;

  background:
    var(--sand);

  color:
    var(--navy);

  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


/* =========================================================
   QUESTION BOX
   ========================================================= */

.question-box {

  padding:
    1.4rem;

  background:
    var(--cream);

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

  border-radius:
    14px;
}


.question-text {

  margin:
    0 0
    1.2rem;

  color:
    var(--navy);

  font-size:
    18px;

  font-weight:
    650;

  line-height:
    1.5;
}


/* =========================================================
   ANSWERS
   ========================================================= */

.answer-choices {

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


.answer-button {

  width:
    100%;

  padding:
    13px
    15px;

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

  border-radius:
    10px;

  background:
    var(--warm-white);

  color:
    var(--navy-text);

  font-size:
    15px;

  line-height:
    1.45;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}


.answer-button:hover:not(:disabled) {

  background:
    var(--sand);

  border-color:
    var(--navy);

  transform:
    translateY(-1px);
}


.answer-button:disabled {

  cursor:
    default;
}


/* =========================================================
   ANSWER STATES
   ========================================================= */

.answer-button.correct {

  background:
    #E3EFE5;

  border-color:
    #557A5B;
}


.answer-button.incorrect {

  background:
    #F5E0DC;

  border-color:
    var(--burnt-clay);
}


/* =========================================================
   FEEDBACK
   ========================================================= */

.question-feedback {

  min-height:
    24px;

  margin:
    1rem 0;

  font-size:
    14px;

  line-height:
    1.55;

  text-align:
    center;
}


.correct-feedback {

  color:
    #3F6745;
}


.incorrect-feedback {

  color:
    var(--dark-clay);
}


/* =========================================================
   CONTINUE + SUBMIT
   ========================================================= */

.continue-button,
.submit-button {

  width:
    100%;

  min-height:
    50px;

  padding:
    13px
    20px;

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

  border-radius:
    10px;

  background:
    var(--terracotta);

  color:
    #FFFFFF;

  font-size:
    16px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}


.continue-button:hover:not(:disabled),
.submit-button:hover {

  background:
    var(--burnt-clay);

  border-color:
    var(--burnt-clay);

  transform:
    translateY(-1px);

  box-shadow:
    0 6px 14px
    rgba(140, 63, 39, 0.18);
}


.continue-button:disabled {

  opacity:
    0.45;

  cursor:
    not-allowed;

  transform:
    none;

  box-shadow:
    none;
}


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

#leadForm {

  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;
}


#leadForm label {

  margin-top:
    8px;

  color:
    var(--navy);

  font-size:
    14px;

  font-weight:
    700;
}


#leadForm input[type="text"],
#leadForm input[type="email"],
#leadForm input[type="tel"],
#leadForm textarea {

  width:
    100%;

  padding:
    13px
    14px;

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

  border-radius:
    9px;

  background:
    #FFFFFF;

  color:
    var(--navy-text);

  font-size:
    15px;

  outline:
    none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


#leadForm input:focus,
#leadForm textarea:focus {

  border-color:
    var(--navy);

  box-shadow:
    0 0 0 3px
    rgba(23, 42, 58, 0.08);
}


#leadForm textarea {

  min-height:
    130px;

  resize:
    vertical;
}


#leadForm .short-textarea {

  min-height:
    82px;
}


/* =========================================================
   TOPIC FIELDSET
   ========================================================= */

.topic-fieldset {

  margin:
    14px 0
    5px;

  padding:
    16px;

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

  border-radius:
    12px;

  background:
    var(--cream);
}


.topic-fieldset legend {

  padding:
    0 6px;

  color:
    var(--navy);

  font-size:
    14px;

  font-weight:
    700;
}


.field-help {

  margin:
    3px 0
    12px;

  color:
    #6A625B;

  font-size:
    13px;
}


/* =========================================================
   TOPIC GRID
   ========================================================= */

.topic-grid {

  display:
    grid;

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

  gap:
    9px;
}


.topic-option {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin:
    0 !important;

  padding:
    9px
    10px;

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

  border-radius:
    8px;

  background:
    var(--warm-white);

  color:
    var(--navy-text);

  font-size:
    14px !important;

  font-weight:
    500 !important;

  cursor:
    pointer;
}


.topic-option input {

  width:
    16px;

  height:
    16px;

  accent-color:
    var(--terracotta);
}


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

.lead-status {

  min-height:
    22px;

  margin:
    5px 0
    0;

  color:
    var(--navy);

  font-size:
    14px;

  line-height:
    1.5;

  text-align:
    center;
}


/* =========================================================
   CONSULTATION CTA
   ========================================================= */

.consultation-cta {

  margin-top:
    2rem;

  padding-top:
    1.5rem;

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

  text-align:
    center;
}


.consultation-cta p {

  margin:
    0 0
    1rem;

  color:
    var(--navy-text);

  font-size:
    15px;

  line-height:
    1.5;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  body {

    padding:
      1rem
      0.75rem
      3rem;
  }


  .engagement-card,
  .lead-card {

    padding:
      1.35rem;
  }


  .engagement-card h1,
  .lead-card h2 {

    font-size:
      1.65rem;
  }


  .topic-grid {

    grid-template-columns:
      1fr;
  }


  /* Keep the two top buttons compact */

  .cakxo-button,
  .calendly-button {

    width:
      fit-content;

    min-width:
      165px;

    max-width:
      90%;

    padding:
      11px
      22px;

    font-size:
      14px;
  }


  .top-action {

    gap:
      8px;

    margin-bottom:
      18px;
  }

}