/* ==========================================================
       CMK Pricing cards  (prefix: .cmk-price-)
       ========================================================== */
 .cmk-price-section {
     --cmk-price-navy: #14233b;
     --cmk-price-accent: #c85000;
     --cmk-price-accent-dark: #a94300;
     --cmk-price-green: #2f7d4f;
     --cmk-price-muted: #6b7280;
     --cmk-price-border: #e5e8ee;
     --cmk-price-chip: #eef0f4;
     --cmk-price-radius: 22px;

     font-family: "Noto Sans Thai", system-ui, sans-serif;
     color: var(--cmk-price-navy);
     background: #f6f7f9;

 }

 /* ---------- card ---------- */
 .cmk-price-card {
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
     background: #fff;
     border: 1px solid var(--cmk-price-border);
     border-radius: var(--cmk-price-radius);
     padding: 2rem;
     transition: box-shadow .2s ease, transform .2s ease;
 }

 .cmk-price-card:hover {
     box-shadow: 0 12px 32px rgba(20, 35, 59, .10);
     transform: translateY(-2px);
 }

 .cmk-price-card--featured {
     border: 2px solid var(--cmk-price-accent);
     box-shadow: 0 10px 30px rgba(200, 80, 0, .12);
 }

 .cmk-price-badge {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translate(-50%, -50%);
     background: var(--cmk-price-accent);
     color: #fff;
     font-size: .85rem;
     font-weight: 600;
     white-space: nowrap;
     padding: .4rem 1.4rem;
     border-radius: 999px;
 }

 /* ---------- media ---------- */
 .cmk-price-media {
     position: relative;
     aspect-ratio: 16 / 9;
     border-radius: 18px;
     overflow: hidden;
     background: #dfe3ea;
 }

 .cmk-price-pane {
     position: absolute;
     inset: 0;
     display: none;
 }

 .cmk-price-pane.is-active {
     display: block;
 }

 .cmk-price-pane img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .cmk-price-caption {
     position: absolute;
     right: .75rem;
     bottom: .75rem;
     background: rgba(20, 35, 59, .78);
     color: #fff;
     font-size: .75rem;
     font-weight: 500;
     padding: .3rem .8rem;
     border-radius: 999px;
     backdrop-filter: blur(2px);
 }

 /* ---------- view toggle ---------- */
 .cmk-price-toggle {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: .5rem;
     margin-top: .9rem;
 }

 .cmk-price-toggle-btn {
     border: 1px solid var(--cmk-price-border);
     background: #fff;
     color: var(--cmk-price-navy);
     font: 600 .9rem "Noto Sans Thai", sans-serif;
     padding: .7rem .5rem;
     border-radius: 12px;
     cursor: pointer;
     transition: background .15s, color .15s;
 }

 .cmk-price-toggle-btn.is-active {
     background: var(--cmk-price-navy);
     border-color: var(--cmk-price-navy);
     color: #fff;
 }

 .cmk-price-toggle-btn:focus-visible,
 .cmk-price-btn:focus-visible {
     outline: 3px solid rgba(200, 80, 0, .35);
     outline-offset: 2px;
 }

 /* ---------- heading ---------- */
 .cmk-price-tag {
     align-self: flex-start;
     background: var(--cmk-price-chip);
     font-weight: 600;
     font-size: .95rem;
     padding: .35rem 1rem;
     border-radius: 999px;
     margin-top: 1.1rem;
 }

 .cmk-price-title {
     font-family: "Prompt", "Noto Sans Thai", sans-serif;
     font-weight: 700;
     font-size: 1.6rem;
     line-height: 1.3;
     margin: .9rem 0 .5rem;
 }

 .cmk-price-desc {
     color: var(--cmk-price-muted);
     font-size: .95rem;
     line-height: 1.7;
     margin: 0;
     min-height: 3.4em;
 }

 /* ---------- price ---------- */
 .cmk-price-amount {
     display: flex;
     flex-wrap: wrap;
     align-items: baseline;
     gap: .5rem;
     margin: 1.25rem 0 1rem;
     color: var(--cmk-price-muted);
 }

 .cmk-price-number {
     font-family: "Prompt", sans-serif;
     font-weight: 700;
     font-size: 2.6rem;
     line-height: 1;
     color: var(--cmk-price-navy);
 }

 /* ---------- CTA ---------- */
 .cmk-price-btn {
     display: block;
     width: 100%;
     text-align: center;
     text-decoration: none;
     font: 700 1rem "Noto Sans Thai", sans-serif;
     color: var(--cmk-price-navy);
     background: #fff;
     border: 1.5px solid var(--cmk-price-navy);
     border-radius: 14px;
     padding: .9rem 1rem;
     transition: background .15s, color .15s, border-color .15s;
 }

 .cmk-price-btn:hover {
     background: var(--cmk-price-navy);
     color: #fff;
 }

 .cmk-price-btn--primary {
     background: var(--cmk-price-accent);
     border-color: var(--cmk-price-accent);
     color: #fff;
 }

 .cmk-price-btn--primary:hover {
     background: var(--cmk-price-accent-dark);
     border-color: var(--cmk-price-accent-dark);
     color: #fff;
 }

 /* ---------- spec list ---------- */
 .cmk-price-specs {
     list-style: none;
     margin: 1.5rem 0 0;
     padding: 1.25rem 0 0;
     border-top: 1px solid var(--cmk-price-border);
 }

 .cmk-price-spec {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     gap: 1rem;
     padding: .5rem 0 .5rem 2rem;
     position: relative;
     font-size: .95rem;
 }

 .cmk-price-spec::before {
     content: "";
     position: absolute;
     left: 0;
     top: .65rem;
     width: 1.1rem;
     height: 1.1rem;
     background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d4f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
 }

 .cmk-price-spec-label {
     color: var(--cmk-price-muted);
     flex: 0 0 auto;
 }

 .cmk-price-spec-value {
     font-weight: 700;
     text-align: right;
 }

 /* ---------- responsive ---------- */
 @media (min-width: 992px) {

     /* featured card stands a little taller on desktop */
     .cmk-price-col--featured {
         margin-top: -2px;
         margin-bottom: -2px;
     }
 }

 @media (max-width: 991.98px) {
     .cmk-price-col--featured {
         order: -1;
     }

     /* recommended plan first */
     .cmk-price-badge {
         font-size: .8rem;
     }
 }

 @media (max-width: 575.98px) {
     .cmk-price-section {
         padding: 2rem 0;
     }

     .cmk-price-card {
         padding: 1.25rem;
     }

     .cmk-price-number {
         font-size: 2.2rem;
     }

     .cmk-price-title {
         font-size: 1.4rem;
     }

     .cmk-price-desc {
         min-height: 0;
     }

     .cmk-price-spec {
         font-size: .9rem;
         flex-wrap: wrap;
         gap: .1rem 1rem;
     }
 }

 /* ==========================================================
       CMK Pricing — wide card (prefix: .cmk-price-02-)
       Shares tokens/classes with cmk-pricing.html; safe to merge.
       ========================================================== */
 .cmk-price-02-section {
     --cmk-price-02-navy: #14233b;
     --cmk-price-02-accent: #c85000;
     --cmk-price-02-green: #2f7d4f;
     --cmk-price-02-muted: #6b7280;
     --cmk-price-02-border: #e5e8ee;
     --cmk-price-02-chip: #eef0f4;
     --cmk-price-02-radius: 22px;

     font-family: "Noto Sans Thai", system-ui, sans-serif;
     color: var(--cmk-price-02-navy);
     background: #f6f7f9;
     padding: 2.5rem 0 3rem;
 }

 .cmk-price-02-heading {
     font-family: "Prompt", "Noto Sans Thai", sans-serif;
     font-weight: 700;
     font-size: 1.6rem;
     margin: 0 0 1.5rem;
 }

 /* ---------- wide card ---------- */
 .cmk-price-02-card {
     background: #fff;
     border: 1px solid var(--cmk-price-02-border);
     border-radius: var(--cmk-price-02-radius);
     padding: 2.5rem;
 }

 .cmk-price-02-card--wide .cmk-price-02-info {
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 /* ---------- media ---------- */
 .cmk-price-02-media {
     position: relative;
     aspect-ratio: 16 / 9;
     border-radius: 18px;
     overflow: hidden;
     background: #dfe3ea;
 }

 .cmk-price-02-pane {
     position: absolute;
     inset: 0;
     display: none;
 }

 .cmk-price-02-pane.is-active {
     display: block;
 }

 .cmk-price-02-pane img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .cmk-price-02-caption {
     position: absolute;
     right: .75rem;
     bottom: .75rem;
     background: rgba(20, 35, 59, .78);
     color: #fff;
     font-size: .75rem;
     font-weight: 500;
     padding: .3rem .8rem;
     border-radius: 999px;
 }

 /* ---------- view toggle ---------- */
 .cmk-price-02-toggle {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: .5rem;
     margin-top: .9rem;
 }

 .cmk-price-02-toggle-btn {
     border: 1px solid var(--cmk-price-02-border);
     background: #fff;
     color: var(--cmk-price-02-navy);
     font: 600 .9rem "Noto Sans Thai", sans-serif;
     padding: .7rem .5rem;
     border-radius: 12px;
     cursor: pointer;
     transition: background .15s, color .15s;
 }

 .cmk-price-02-toggle-btn.is-active {
     background: var(--cmk-price-02-navy);
     border-color: var(--cmk-price-02-navy);
     color: #fff;
 }

 .cmk-price-02-toggle-btn:focus-visible,
 .cmk-price-02-btn:focus-visible {
     outline: 3px solid rgba(200, 80, 0, .35);
     outline-offset: 2px;
 }

 /* ---------- text ---------- */
 .cmk-price-02-tag {
     align-self: flex-start;
     background: var(--cmk-price-02-chip);
     font-weight: 600;
     font-size: .95rem;
     padding: .35rem 1rem;
     border-radius: 999px;
     margin-top: 1.1rem;
 }

 .cmk-price-02-title {
     font-family: "Prompt", "Noto Sans Thai", sans-serif;
     font-weight: 700;
     font-size: 1.6rem;
     line-height: 1.3;
     margin: .9rem 0 .5rem;
 }

 .cmk-price-02-desc {
     color: var(--cmk-price-02-muted);
     font-size: .95rem;
     line-height: 1.7;
     margin: 0;
 }

 /* ---------- price ---------- */
 .cmk-price-02-amount {
     display: flex;
     flex-wrap: wrap;
     align-items: baseline;
     gap: .5rem;
     margin: 1.25rem 0 1rem;
     color: var(--cmk-price-02-muted);
 }

 .cmk-price-02-number {
     font-family: "Prompt", sans-serif;
     font-weight: 700;
     font-size: 2.6rem;
     line-height: 1;
     color: var(--cmk-price-02-navy);
 }

 /* ---------- CTA ---------- */
 .cmk-price-02-btn {
     display: block;
     width: 100%;
     text-align: center;
     text-decoration: none;
     font: 700 1rem "Noto Sans Thai", sans-serif;
     color: var(--cmk-price-02-navy);
     background: #fff;
     border: 1.5px solid var(--cmk-price-02-navy);
     border-radius: 14px;
     padding: .9rem 1rem;
     margin-top: auto;
     /* pins button to the bottom of the column */
     transition: background .15s, color .15s;
 }

 .cmk-price-02-btn:hover {
     background: var(--cmk-price-02-navy);
     color: #fff;
 }

 .cmk-price-02-amount+.cmk-price-02-btn {
     margin-top: 0;
 }

 /* ---------- spec list (divided rows) ---------- */
 .cmk-price-02-specs {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .cmk-price-02-spec {
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     gap: 1rem;
     padding: 1.05rem 0 1.05rem 2.2rem;
     border-bottom: 1px solid var(--cmk-price-02-border);
     font-size: 1rem;
 }

 .cmk-price-02-spec:first-child {
     padding-top: .4rem;
 }

 .cmk-price-02-spec::before {
     content: "";
     position: absolute;
     left: 0;
     top: 1.2rem;
     width: 1.15rem;
     height: 1.15rem;
     background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d4f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
 }

 .cmk-price-02-spec:first-child::before {
     top: .55rem;
 }

 .cmk-price-02-spec-label {
     color: var(--cmk-price-02-muted);
     flex: 0 0 auto;
 }

 .cmk-price-02-spec-value {
     font-weight: 700;
     text-align: right;
 }

 /* ---------- responsive ---------- */
 @media (max-width: 991.98px) {
     .cmk-price-02-card {
         padding: 1.75rem;
     }

     .cmk-price-02-btn {
         margin-top: 0;
     }

     .cmk-price-02-specs {
         margin-top: .5rem;
     }
 }

 @media (max-width: 575.98px) {
     .cmk-price-02-section {
         padding: 1.5rem 0 2rem;
     }

     .cmk-price-02-heading {
         font-size: 1.35rem;
         margin-bottom: 1rem;
     }

     .cmk-price-02-card {
         padding: 1.1rem;
         border-radius: 18px;
     }

     .cmk-price-02-number {
         font-size: 2.2rem;
     }

     .cmk-price-02-title {
         font-size: 1.4rem;
     }

     .cmk-price-02-spec {
         flex-wrap: wrap;
         gap: .1rem 1rem;
         font-size: .92rem;
         padding-top: .85rem;
         padding-bottom: .85rem;
     }

     .cmk-price-02-spec::before {
         top: 1rem;
     }

     .cmk-price-02-spec-value {
         text-align: left;
         flex: 1 1 100%;
     }
 }

 /* ==========================================================
       CMK Pricing — included items + notes (prefix: .cmk-price-03-)
       ========================================================== */
 .cmk-price-03-section {
     --cmk-price-03-navy: #14233b;
     --cmk-price-03-green: #2f7d4f;
     --cmk-price-03-muted: #6b7280;
     --cmk-price-03-border: #e5e8ee;
     --cmk-price-03-radius: 22px;

     font-family: "Noto Sans Thai", system-ui, sans-serif;
     color: var(--cmk-price-03-navy);
     background: #f6f7f9;
     padding: 1.5rem 0 2.5rem;
 }

 /* ---------- included card ---------- */
 .cmk-price-03-card {
     background: #fff;
     border: 1px solid var(--cmk-price-03-border);
     border-radius: var(--cmk-price-03-radius);
     padding: 2.25rem 2.5rem 2rem;
 }

 .cmk-price-03-title {
     font-family: "Prompt", "Noto Sans Thai", sans-serif;
     font-weight: 600;
     font-size: 1.15rem;
     margin: 0 0 1.25rem;
 }

 .cmk-price-03-list {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .cmk-price-03-item {
     position: relative;
     padding-left: 2rem;
     font-size: 1rem;
     line-height: 1.6;
 }

 .cmk-price-03-item::before {
     content: "";
     position: absolute;
     left: 0;
     top: .38rem;
     width: 1.1rem;
     height: 1.1rem;
     background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d4f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
 }

 /* ---------- footnote ---------- */
 .cmk-price-03-note {
     color: var(--cmk-price-03-muted);
     font-size: .95rem;
     line-height: 1.8;
     margin: 1.75rem .25rem 0;
 }

 /* ---------- responsive ---------- */
 @media (max-width: 767.98px) {
     .cmk-price-03-card {
         padding: 1.5rem 1.25rem;
     }
 }

 @media (max-width: 575.98px) {
     .cmk-price-03-section {
         padding: 1rem 0 2rem;
     }

     .cmk-price-03-card {
         border-radius: 18px;
     }

     .cmk-price-03-item {
         font-size: .95rem;
     }

     .cmk-price-03-note {
         font-size: .88rem;
         margin-top: 1.25rem;
     }
 }