.menu-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    vertical-align: middle;
}

@media (max-width: 768px) {
  .event-card .media {
    height: 160px;
  }
}

:root {
  --green-500: #1f8f2e;
  --green-100: #e9f9ec;
  --muted: #546a6a;
  --card-radius: 12px;
  --soft-border: rgba(31, 143, 46, 0.08);
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #0b2b25;
  background: #fff;
}

/* Section wrapper */
#tools-features {
  background: #f7fff8;
  padding: 56px 0;
}

.section-head {
  text-align: center;
  margin-bottom: 32px;
}

.section-head h2 {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0;
}

.section-head p {
  color: var(--muted);
  margin-top: 10px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Grid cards */
.feature-card {
  background: #fff;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid var(--soft-border);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex;
  flex-direction: column;
  min-height: 230px;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(12, 60, 30, 0.08);
  border-color: rgba(31, 143, 46, 0.12);
}

.feature-card .card-top {
  background: linear-gradient(180deg, rgba(223, 249, 235, 1), rgba(244, 255, 250, 1));
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.feature-card .card-top .icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(31, 143, 46, 0.08);
  color: var(--green-500);
  font-size: 18px;
}

.feature-card .card-top h5 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #08301b;
}

.feature-card .card-body {
  padding: 16px 18px;
  flex: 1 1 auto;
  font-size: 0.9rem;
  color: var(--muted);
  border-top: 1px solid rgba(10, 40, 30, 0.02);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  padding: 6px 0;
  line-height: 1.25;
}

.feature-list li strong {
  color: #0b2b25;
  font-weight: 600;
  font-size: 0.92rem;
  display: inline-block;
}

.feature-list li .sub {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 4px;
}

/* Bottom green banner */
.feature-banner {
  margin-top: 28px;
  border-radius: 12px;
  padding: 28px;
  color: #fff;
  background: linear-gradient(90deg, rgba(34, 131, 58, 1) 0%, rgba(16, 94, 37, 1) 100%);
  box-shadow: 0 12px 36px rgba(16, 94, 37, 0.12);
}

.feature-banner h4 {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
}

.banner-sub {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  margin-top: 6px;
}

.banner-item {
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
}

.banner-item i {
  font-size: 22px;
  display: block;
  margin-bottom: 8px;
}

/* Responsive spacing */
@media (max-width: 767px) {
  .feature-card {
    min-height: unset;
  }

  .feature-card .card-top h5 {
    font-size: 0.95rem;
  }
}



#monthly-themes {
  --accent: #1f8f2e;
  --muted: #557372;
  --card-bg: #fff;
  --pill-bg: #e9f9ec;
}

#monthly-themes .section-head {
  text-align: center;
  margin-bottom: 1.6rem;
  color: #0b2b25;
}

#monthly-themes .section-head h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

#monthly-themes .section-head p {
  margin: 0.45rem auto 0;
  color: var(--muted);
  max-width: 740px;
  font-size: .95rem;
}

/* Grid cards */
#monthly-themes .theme-card {
  background: var(--card-bg);
  border: 1px solid rgba(31, 143, 46, 0.09);
  border-radius: 12px;
  padding: 16px;
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#monthly-themes .theme-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(10, 70, 30, 0.08);
}

#monthly-themes .card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#monthly-themes .month-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pill-bg);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .78rem;
  border: 1px solid rgba(31, 143, 46, 0.06);
  box-shadow: inset 0 -2px 0 rgba(31, 143, 46, 0.03);
}

#monthly-themes .theme-title {
  font-size: 1rem;
  font-weight: 700;
  color: #08301b;
  margin: 0 0 6px;
}

#monthly-themes .theme-desc {
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 8px;
}

#monthly-themes .key-acts {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .84rem;
  color: var(--muted);
}

#monthly-themes .key-acts li {
  margin: 6px 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

#monthly-themes .key-acts li b {
  color: #0b2b25;
  font-weight: 600;
  font-size: 0.9rem;
  /* or .9rem (0.9rem preferred) */
}


/* fallback: b used visually */

/* small icon in top-right */
#monthly-themes .mini-icon {
  font-size: 1rem;
  opacity: .85;
  color: var(--accent);
}

/* Achievements row */
#monthly-themes .achievements {
  margin-top: 1.6rem;
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  border: 1px solid rgba(10, 80, 40, 0.03);
  box-shadow: 0 12px 26px rgba(4, 40, 20, 0.03);
}

#monthly-themes .ach-item {
  text-align: center;
  padding: 12px 8px;
}

#monthly-themes .ach-item .ach-emoji {
  font-size: 1.3rem;
  display: block;
  margin-bottom: 8px;
}

#monthly-themes .ach-item .ach-title {
  font-weight: 700;
  font-size: .95rem;
  color: #0b2b25;
}

#monthly-themes .ach-item .ach-sub {
  color: var(--muted);
  font-size: .85rem;
  margin-top: 6px;
}

/* Responsive spacing */
@media (max-width: 575px) {
  #monthly-themes .theme-card {
    padding: 14px;
    min-height: unset;
  }

  #monthly-themes .section-head h3 {
    font-size: 1.25rem;
  }
}

#tutooz-hero h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
}

#tutooz-hero p.lead {
  font-family: 'Inter', sans-serif;
}

.card p.small,
.text-muted {
  color: var(--muted) !important;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(16, 37, 34, 0.06);
  transition: all .22s ease;
}

:root {
  --karreo-green: #1f8f2e;
  --karreo-dark: #0b2b25;
  --muted: #35373b;
}

/* Base */
.hero {
  background: linear-gradient(90deg, rgba(31, 143, 46, 0.04), rgba(0, 0, 0, 0));
  padding: 32px 0;
}

.pill {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(31, 143, 46, 0.08);
  color: var(--karreo-green);
  font-weight: 600;
  font-size: .85rem
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: var(--karreo-dark)
}

body,
p,
small {
  font-family: 'Inter', sans-serif;
  color: #918d8d;
}

.lead-small {
  font-size: 1rem;
  color: #333;
  line-height: 1.5
}

.card-light {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(16, 37, 34, 0.04);
  padding: 14px
}

.icon-box {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(180deg, var(--karreo-green), #10923a);
  font-size: 18px;
  flex-shrink: 0
}

.feature-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(16, 37, 34, 0.03)
}

.muted {
  color: var(--muted);
  font-size: .96rem
}

/* Why grid */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.why-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 37, 34, 0.03);
}

.why-item h6 {
  margin: 0;
  font-size: 0.98rem
}

.why-item p {
  margin: .25rem 0 0 0;
  color: var(--muted);
  font-size: .93rem
}

/* timeline (compact) */
.timeline {
  position: relative;
  padding-left: 72px
}

.timeline::before {
  content: '';
  position: absolute;
  left: 36px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: #eaf6ea;
  border-radius: 3px;
  opacity: .9
}

.timeline-item {
  position: relative;
  margin-bottom: 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start
}

.timeline-item .marker {
  position: absolute;
  left: 24px;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--karreo-green);
  background: #fff;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center
}

.timeline-item .marker::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--karreo-green);
  display: block
}

.timeline-item h6 {
  margin: 0;
  font-size: .98rem
}

.timeline-item p {
  margin: 4px 0 0 0;
  color: var(--muted);
  font-size: .95rem
}

/* faq */
.accordion-button {
  font-weight: 600;
  color: var(--karreo-dark);
}

/* responsive */
@media (max-width:767px) {
  .timeline {
    padding-left: 56px
  }

  .timeline::before {
    left: 28px
  }

  .timeline-item .marker {
    left: 18px
  }
}


.contact-page-section {
  background: #fff;
  color: #222;
  padding: 40px 0;
}

.contact-page-section h3 {
  font-weight: 600;
  margin-bottom: 18px;
  color: #0f1720;
}

.map-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* form styling */
.contact-page-section .form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  color: #111;
}

.contact-page-section .form-control {
  background: #fff;
  color: #222;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: none;
}

.contact-page-section .form-control:focus {
  outline: none;
  box-shadow: 0 0 0 0.15rem rgba(31, 143, 46, 0.12);
  border-color: #1f8f2e;
}

.contact-page-section textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.btn-send {
  background: #1f8f2e;
  color: #fff;
  border: 0;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-send:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* small-screen spacing */
@media (max-width: 767px) {
  .contact-page-section {
    padding: 25px 0;
  }

  .map-responsive {
    margin-bottom: 20px;
  }
}

/* message container minimum height so layout doesn't jump */
#form-messages {
  min-height: 30px;
  margin-bottom: 12px;
}

.event-apply a {
  text-decoration: none;
  font-size: 14px;
  color: #444;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

.event-apply a:hover {
  color: #0066cc;
}

.event-apply i {
  margin-left: 5px;
}


.profile-info p {
  font-size: 18px;        /* bigger text */
  font-weight: 600;       /* bold text */
  color: #2a2a2a;         /* darker for readability */
  margin-bottom: 10px;    /* spacing between lines */
}

.profile-info .team-title {
  font-size: 20px;
  font-weight: 700;
  color: #000;
}

.profile-info i {
  margin-right: 8px;      /* space between icon and text */
  color: #548b2b;         /* your theme color */
  font-size: 20px;
}

.profile-info .label {
  font-weight: 700;
  color: #000;
}

/* =========================
   Karreo Payments (kp-) theme
   Green + White combo
   ========================= */

/* color tokens */
:root{
  --kp-green: #1f8f2e;        /* primary green (matches your buttons) */
  --kp-green-dark: #154e20;   /* dark hover */
  --kp-muted: #6b7785;
  --kp-bg: #ffffff;
  --kp-soft: rgba(31,142,46,0.06);
  --kp-radius: 12px;
  --kp-gap: 14px;
  --kp-shadow: 0 6px 18px rgba(17,24,34,0.08);
}

/* Card / panel wrapping the form */
.kp-card{
  background: linear-gradient(180deg, var(--kp-bg) 0%, #fbfffb 100%);
  border-radius: var(--kp-radius);
  padding: 1.5rem;
  box-shadow: var(--kp-shadow);
  border: 1px solid rgba(31,142,46,0.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* subtle lift on hover for desktop */
.kp-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 30px rgba(17,24,34,0.10); }

/* Header inside card */
.kp-card .kp-header{
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.kp-card .kp-title{
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--kp-green-dark);
  letter-spacing: .2px;
}
.kp-card .kp-sub{
  color: var(--kp-muted);
  font-size: .95rem;
}

/* Input rows / labels */
.kp-label{
  display:block;
  font-size:.95rem;
  color: var(--kp-green-dark);
  margin-bottom: .375rem;
  font-weight:600;
}
.kp-input, .kp-select, .kp-textarea{
  width:100%;
  padding:.625rem .75rem;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:8px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  transition: border-color .12s ease, box-shadow .12s ease;
  font-size:.95rem;
  color:#222;
}
.kp-input:focus, .kp-select:focus, .kp-textarea:focus{
  outline: none;
  border-color: var(--kp-green);
  box-shadow: 0 0 0 4px var(--kp-soft);
}

/* file input (custom) */
.kp-file {
  position: relative;
  display: inline-block;
  width: 100%;
}
.kp-file input[type="file"]{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.kp-file .kp-file-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.55rem .75rem;
  border-radius:8px;
  border:1px dashed rgba(31,142,46,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,255,250,0.98));
  color: var(--kp-green-dark);
  font-size:.95rem;
}

/* small note text */
.kp-note{
  font-size:.85rem;
  color:var(--kp-muted);
  margin-top:.45rem;
}

/* Buttons */
.kp-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem .9rem;
  border-radius:10px;
  font-weight:600;
  border:0;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease;
  text-decoration:none;
}
.kp-btn-primary{
  background: linear-gradient(180deg,var(--kp-green),var(--kp-green-dark));
  color:#fff;
  box-shadow: 0 6px 18px rgba(31,142,46,0.18);
}
.kp-btn-primary:hover{ transform: translateY(-2px); background: var(--kp-green-dark); }
.kp-btn-secondary{
  background: #fff;
  color: var(--kp-green-dark);
  border: 1px solid rgba(31,142,46,0.12);
}
.kp-btn-secondary:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(17,24,34,0.06); }

/* Table / payments list tweaks */
.kp-table { border-collapse: collapse; width:100%; }
.kp-table th, .kp-table td { padding:.6rem .75rem; border-bottom: 1px solid #f2f4f6; text-align:left; font-size:.95rem; }
.kp-table thead th { background: linear-gradient(90deg, rgba(31,142,46,0.03), transparent); color: var(--kp-green-dark); font-weight:700; }

/* status chips */
.kp-chip{
  display:inline-block;
  padding:.25rem .5rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
}
.kp-chip.pending{ background: #fff3e6; color:#8a5a00; border: 1px solid rgba(255,165,0,0.12); }
.kp-chip.success{ background: #eafbea; color:#0b6b20; border: 1px solid rgba(16,185,129,0.08); }
.kp-chip.failed{ background: #ffecee; color:#8b1b1b; border:1px solid rgba(220,38,38,0.06); }

/* responsive tweaks */
@media (max-width:767px){
  .kp-card{ padding:1rem; }
  .kp-title{ font-size:1.05rem; }
  .kp-btn{ width:100%; justify-content:center; }
}



   /* ========== KP Payments : Payments list styling ========== */
        .kp-card {
            background: linear-gradient(180deg, #ffffff, #fbfffb);
            border-radius: 12px;
            padding: 18px;
            box-shadow: 0 8px 28px rgba(17, 24, 34, 0.06);
            border: 1px solid rgba(31, 142, 46, 0.05);
            margin-bottom: 1rem;
        }

        /* header */
        .kp-page-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }

        .kp-page-title {
            font-size: 1.25rem;
            color: #154e20;
            font-weight: 700;
        }

        .kp-page-sub {
            color: #6b7785;
            font-size: 0.95rem;
        }

        /* buttons */
        .kp-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: .55rem .9rem;
            border-radius: 10px;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            border: 0;
        }

        .kp-btn-primary {
            background: linear-gradient(180deg, #1f8f2e, #154e20);
            color: #fff;
            box-shadow: 0 8px 18px rgba(31, 142, 46, 0.16);
        }

        .kp-btn-primary:hover {
            transform: translateY(-2px);
        }

        .kp-btn-ghost {
            background: #fff;
            color: #154e20;
            border: 1px solid rgba(31, 142, 46, 0.12);
        }

        .kp-btn-ghost:hover {
            box-shadow: 0 8px 20px rgba(17, 24, 34, 0.05);
        }

        /* table */
        .kp-table {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
        }

        .kp-table thead th {
            text-align: left;
            padding: .72rem .9rem;
            font-weight: 700;
            color: #154e20;
            background: linear-gradient(90deg, rgba(31, 142, 46, 0.03), transparent);
            font-size: .95rem;
            border-bottom: 1px solid #f2f4f6;
        }

        .kp-table tbody td {
            padding: .6rem .9rem;
            border-bottom: 1px solid #f7f8f9;
            font-size: .95rem;
            color: #222;
        }

        .kp-table tbody tr:hover {
            background: rgba(31, 142, 46, 0.02);
        }

        /* proof link */
        .kp-proof-link {
            display: inline-block;
            padding: .28rem .5rem;
            border-radius: 6px;
            background: #f5fff6;
            color: #0b6b20;
            border: 1px solid rgba(16, 185, 129, 0.06);
            text-decoration: none;
            font-weight: 600;
            font-size: .9rem;
        }

        /* status chips */
        .kp-chip {
            display: inline-block;
            padding: .28rem .6rem;
            border-radius: 999px;
            font-weight: 700;
            font-size: .85rem;
        }

        .kp-chip.Pending,
        .kp-chip.pending {
            background: #fff8e6;
            color: #8a5a00;
            border: 1px solid rgba(255, 165, 0, 0.08);
        }

        .kp-chip.Created,
        .kp-chip.created {
            background: #eafbea;
            color: #0b6b20;
            border: 1px solid rgba(16, 185, 129, 0.08);
        }

        .kp-chip.Authorized,
        .kp-chip.authorized {
            background: #e6f7ff;
            color: #04506a;
            border: 1px solid rgba(3, 169, 244, 0.06);
        }

        .kp-chip.Captured,
        .kp-chip.captured {
            background: #eafbea;
            color: #046633;
            border: 1px solid rgba(16, 185, 129, 0.08);
        }

        .kp-chip.Failed,
        .kp-chip.failed {
            background: #ffecec;
            color: #8b1b1b;
            border: 1px solid rgba(220, 38, 38, 0.06);
        }

        .kp-chip.Refunded,
        .kp-chip.refunded {
            background: #fff5f8;
            color: #8a1b4a;
            border: 1px solid rgba(220, 38, 90, 0.05);
        }

        /* responsive */
        @media (max-width:767px) {
            .kp-page-head {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            .kp-btn {
                width: 100%;
                justify-content: center;
            }

            .kp-table thead {
                display: none;
            }

            .kp-table tbody td {
                display: block;
                width: 100%;
                box-sizing: border-box;
            }

            .kp-table tbody tr {
                margin-bottom: 12px;
                display: block;
                border: 1px solid #f2f4f6;
                border-radius: 8px;
                padding: .6rem;
            }

            .kp-table tbody td::before {
                content: attr(data-label);
                display: block;
                font-weight: 700;
                color: #6b7785;
                margin-bottom: 6px;
            }
        }
        /* small-screen safe spacing so buttons won't sit under the footer */
@media (max-width: 767px) {
  .kp-card { margin-bottom: 140px !important; } /* increase if footer taller */
}


/* exam_instruction */
:root{
  --kreo-primary: #1f8f2e;
  --kreo-deep: #154e20;
  --kreo-white: #ffffff;
  --kreo-card-bg: #fff;
  --kreo-muted: #6b6b6b;
  --kreo-radius: 12px;
  --kreo-gap: 18px;
}

/* Panel / card */
.kreo-panel {
  max-width: 980px;
  margin: 32px auto;
  padding: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
  border-radius: var(--kreo-radius);
  box-shadow: 0 8px 28px rgba(8, 17, 10, 0.06);
  border: 1px solid rgba(21, 78, 32, 0.06);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial;
  color: #12221a;
}

/* Header */
.kreo-panel > h4 {
  margin: 0 0 12px 0;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--kreo-deep);
}

/* Responsive columns container */
.kreo-left {
  display: block;
  gap: var(--kreo-gap);
}

/* Table styles */
.kreo-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 15px;
  background: repeating-linear-gradient(90deg,#fff,#fff 10px,#fcfcfc 10px,#fcfcfc 20px);
  border-radius: 8px;
  overflow: hidden;
}

.kreo-spec-table th, .kreo-spec-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(20,78,32,0.06);
  text-align: left;
}

.kreo-spec-table th {
  background: linear-gradient(90deg, rgba(31,143,46,0.06), rgba(21,78,32,0.03));
  color: var(--kreo-deep);
  font-weight: 600;
  font-size: 14px;
}

/* section heading */
.kreo-section-title {
  margin: 18px 0 8px;
  font-size: 16px;
  color: var(--kreo-deep);
  font-weight: 600;
}

/* rules list */
.kreo-rules {
  margin-left: 18px;
  color: #333;
  line-height: 1.5;
}

/* Countdown */
.kreo-countdown {
  display: inline-block;
  margin: 18px 0;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(31,143,46,0.06), rgba(21,78,32,0.03));
  border-radius: 10px;
  color: var(--kreo-deep);
  font-weight: 700;
  font-size: 15px;
  border: 1px solid rgba(21,78,32,0.08);
}

/* CTA area */
.kreo-cta {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Primary start button — visible and prominent */
.kreo-start-btn {
  --btn-h: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: var(--btn-h);
  padding: 0 26px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  color: var(--kreo-white);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
  text-decoration: none;
  background-image: linear-gradient(135deg, var(--kreo-primary) 0%, var(--kreo-deep) 100%);
  box-shadow: 0 8px 20px rgba(31,143,46,0.18), inset 0 -2px 0 rgba(0,0,0,0.06);
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* subtle 3D hover & focus */
.kreo-start-btn:hover:not([disabled]) { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(31,143,46,0.18); }
.kreo-start-btn:active:not([disabled]){ transform: translateY(-1px); }
.kreo-start-btn:focus { outline: 3px solid rgba(31,143,46,0.14); outline-offset: 3px; }

/* pulse animation for attention (only when enabled) */
@keyframes kreo-pulse {
  0% { box-shadow: 0 8px 20px rgba(31,143,46,0.18); }
  50% { box-shadow: 0 18px 40px rgba(31,143,46,0.12); transform: translateY(-4px); }
  100% { box-shadow: 0 8px 20px rgba(31,143,46,0.18); transform: translateY(-0px); }
}
.kreo-start-btn.kreo-pulse {
  animation: kreo-pulse 2.6s infinite ease-in-out;
}

/* shiny sweep on hover */
.kreo-start-btn::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -60%;
  width: 40%;
  height: 200%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.18), rgba(255,255,255,0));
  transition: left .45s ease;
  pointer-events: none;
}
.kreo-start-btn:hover::after { left: 120%; }

/* Disabled state */
.kreo-start-btn[disabled] {
  background: linear-gradient(90deg, rgba(31,143,46,0.16), rgba(21,78,32,0.12));
  box-shadow: none;
  color: rgba(255,255,255,0.9);
  cursor: not-allowed;
  transform: none;
  opacity: 0.82;
}
/* small helper for secondary link */
.kreo-alt {
  color: var(--kreo-deep);
  font-size: 14px;
  text-decoration: none;
  border: 1px dashed rgba(21,78,32,0.06);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(31,143,46,0.02);
}

/* responsive */
@media (max-width: 767px) {
  .kreo-panel { padding: 16px; margin: 20px; }
  .kreo-start-btn { min-width: 180px; font-size: 15px; height: 52px; }
  .kreo-spec-table th, .kreo-spec-table td { padding: 10px; font-size: 14px; }
}