ul h6 {
     text-decoration: underline;
     color: #f59e0b;
 }

 h3 ul {
     text-decoration: underline;
     color: #f59e0b;
 }

 .modal-body {
     flex: 1 1 auto;
     overflow: hidden;
     padding: var(--bs-modal-padding);
 }

 .modal-dialog.modal-dialog--fullwidth {
     width: 40vw !important;
     max-width: 40vw !important;
     margin-left: auto !important;
     margin-right: auto !important;
 }

 /* Ensure the modal content fits */
 .modal-dialog.modal-dialog--fullwidth .modal-content {
     width: 100% !important;
     max-width: 100% !important;
 }

 /* Remove justify-content from modal-body */
 .modal-dialog.modal-dialog--fullwidth .modal-body {
     max-height: 70vh;
     overflow-y: auto;
     /* Remove justify-content: center */
 }

 .modal-content {
     height: auto;
     overflow: auto;
 }

 .btn-outline-save {
     background-color: #efa63e !important;
     border-color: #efa63e !important;
     font-weight: 400;
     border-radius: 0.4rem;
     transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
     color: #000 !important;
     justify-content: center;
     align-items: center;
     border: 1px solid #efa63e !important;
 }

 .btn-outline-save:hover {
     background-color: white !important;
     border-color: #efa63e !important;
     font-weight: 400;
     border-radius: 0.4rem;
     transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
     color: #efa63e !important;
     justify-content: center;
     align-items: center;
     border: 1px solid #efa63e !important;
 }

 .btn-secondary:hover {
     background-color: white;
     color: #6c757d;
 }




 html,
 body {
     height: 100%;
 }

 body.thsr-body {
     background: #fff6e9;
     color: #1f2937;
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji",
         "Segoe UI Emoji", "Segoe UI Symbol";
 }

 /* Layout */
 .thsr-hero {
     padding-block: clamp(1rem, 2vw, 1rem);
 }

 .thsr-badge {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     background: rgba(31, 41, 55, 0.06);
     color: #6b7280;
     border-radius: 999px;
     padding: .5rem .9rem;
     font-size: .9rem;
     line-height: 1;
 }

 .thsr-badge i {
     width: 18px;
     height: 18px;
     display: inline-block;
     background: #fff6e9;
     border: 1px solid rgba(31, 41, 55, .15);
     border-radius: 4px;
     position: relative;
 }

 .thsr-badge i::after {
     content: "";
     position: absolute;
     inset: 4px;
     background: #f2a634;
     border-radius: 2px;
     opacity: .35;
 }

 .thsr-title {
     margin: 0.8rem 0 1rem;
     font-weight: 800;
     letter-spacing: -0.02em;
     line-height: 1.1;
     font-size: clamp(2rem, 4.8vw, 3rem);
 }

 .thsr-title .thsr-brand {
     color: #f2a634;
 }

 .thsr-lead {
     color: #6b7280;
     max-width: 52ch;
     font-size: 1.05rem;
     line-height: 1.6;
     margin-bottom: 0rem;
 }

 /* Buttons (custom pill buttons to avoid conflicts) */
 .thsr-actions {
     display: flex;
     gap: .8rem;
 }

 .img-fluid {
     width: 450px;
 }

 .thsr-btn {
     display: inline-flex;
     align-items: center;
     gap: .6rem;
     border-radius: 10px;
     padding: .7rem 1.1rem;
     font-weight: 600;
     border: 1px solid rgba(31, 41, 55, .12);
     background: #ffffff;
     color: #1f2937;
     text-decoration: none;
     transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
 }

 .thsr-btn:hover {
     transform: translateY(-1px);
     box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
     background: #f2a634;
     color: white;

 }

 .thsr-btn-ghost {
     background: #f2a634;
     border-color: rgba(242, 166, 52, .35);
     color: white;
 }

 .thsr-btn-ghost:hover {
     background: white;
     color: #f2a634;
 }

 .thsr-btn svg {
     flex: 0 0 auto;
 }

 /* Social proof row */
 .thsr-proof {
     display: flex;
     align-items: center;
     gap: 1rem;
     flex-wrap: wrap;
     margin-top: 1.2rem;
 }

 .thsr-dots {
     display: inline-flex;
     gap: .35rem;
 }

 .thsr-dot {
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: #1f2937;
     opacity: .85;
     box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
 }

 .thsr-dot:last-child {
     opacity: .55;
 }

 .thsr-proof-text {
     color: #6b7280;
     display: inline-flex;
     align-items: center;
     gap: .35rem;
     white-space: nowrap;
 }

 .thsr-stars {
     color: #f59e0b;
     /* star color derived from primary family */
     display: inline-flex;
     gap: .15rem;
     margin-left: .2rem;
 }

 /* Right illustration */
 .thsr-illustration {
     position: relative;
     margin-top: 2rem;
 }

 @media (min-width: 992px) {
     .thsr-illustration {
         margin-top: 0;
     }
 }

 .thsr-device {
     position: relative;
     background: #ffffff;
     border-radius: 18px;
     box-shadow:
         0 1px 0 rgba(0, 0, 0, .03),
         0 12px 40px rgba(31, 41, 55, .08);
     padding: 1.1rem;
 }

 /* Corner accents */
 .thsr-corner {
     position: absolute;
     width: 36px;
     height: 36px;
     background: #f2a634;
     border-bottom-left-radius: 8px;
 }

 .thsr-corner.thsr-top-right {
     top: 0;
     right: 0;
     border-bottom-left-radius: 12px;
 }

 .thsr-corner.thsr-bottom-left {
     bottom: 0;
     left: 0;
     border-top-right-radius: 12px;
 }

 .thsr-corner::after {
     /* small glyph notch */
     content: "";
     position: absolute;
     width: 10px;
     height: 10px;
     border: 2px solid #fff;
     border-radius: 3px;
     bottom: 8px;
     left: 8px;
     opacity: .9;
 }

 .thsr-top-right::after {
     content: "";
     position: absolute;
     right: 8px;
     top: 8px;
     width: 8px;
     height: 8px;
     background: #fff;
     border-radius: 2px;
     opacity: .85;
 }

 .thsr-app {
     position: relative;
     background: #ffffff;
     border-radius: 14px;
     border: 1px solid rgba(31, 41, 55, .06);
     padding: 1rem;
     margin: .3rem;
     box-shadow: 0 1px 0 rgba(31, 41, 55, .04);
 }

 /* App div pills */
 .thsr-tabs {
     display: flex;
     align-items: center;
     gap: .6rem;
     padding: .3rem 0 .7rem;
 }

 .thsr-tab {
     height: 12px;
     border-radius: 999px;
     background: rgba(31, 41, 55, .12);
     flex: 0 0 64px;
 }

 .thsr-tab--active {
     background: #f2a634;
     opacity: .95;
     box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
 }

 /* App content block + skeleton lines */
 .thsr-hero-block {
     background: rgba(242, 166, 52, .12);
     border-radius: 10px;
     height: 96px;
     margin: .2rem 0 1rem;
 }

 .thsr-line {
     height: 30px;
     border-radius: 8px;
     background: rgba(31, 41, 55, .08);
 }

 .thsr-line+.thsr-line {
     margin-top: .7rem;
 }

 .thsr-line--short {
     width: 56%;
 }

 .thsr-line--half {
     width: 48%;
 }

 .thsr-line--full {
     width: 100%;
 }

 .thsr-line--wide {
     width: 86%;
 }

 /* Small hover animation for tabs */
 .thsr-tab-btn {
     cursor: pointer;
 }

 .thsr-tab-btn:focus-visible {
     outline: 2px solid #f2a634;
     outline-offset: 2px;
 }

 .section-wrap {
     padding-top: 56px;
     padding-bottom: 72px;
     background-color: #FDFBF5;
 }

 /* Stats */
 .stat-value {
     color: #f7c948;
     font-weight: 800;
     font-size: 1.75rem;
     /* ~28px */
     letter-spacing: .2px;
 }

 .stat-label {
     color: #6b7280;
     font-size: .95rem;
 }

 /* Heading */
 .headline {
     font-weight: 800;
     font-size: clamp(1.75rem, 1.05rem + 2.2vw, 2.4rem);
     letter-spacing: .2px;
 }

 .subhead {
     color: #6b7280;
     max-width: 780px;
     margin-inline: auto;
     font-size: 1rem;
 }

 /* Cards */
 .hs-card {
     background: #ffffff;
     border: 1px solid #f0f0f0;
     border-radius: 14px;
     box-shadow: 0 5px 10px rgba(0, 0, 0, .07), 0 15px 30px rgba(0, 0, 0, .06),
         0 12px 24px rgba(240, 180, 41, .14);
     padding: 26px;
     transition: transform .2s ease, box-shadow .2s ease;
 }

 .hs-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 24px rgba(0, 0, 0, .08), 0 13px 36px rgba(0, 0, 0, .08),
         0 12px 24px rgba(240, 180, 41, .14);
 }

 .icon-tile {
     width: 48px;
     height: 48px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     background: #feefd1;
     color: #f0b429;
     font-size: 1.25rem;
 }

 .eyebrow {
     color: #6b7280;
     font-size: .92rem;
 }

 .card-title {
     margin-top: 10px;
     font-weight: 700;
     font-size: 1.25rem;
 }

 .card-desc {
     color: #4b5563;
     font-size: .98rem;
 }

 /* Checklist */
 .checklist {
     list-style: none;
     padding-left: 0;
     margin-bottom: 0;
 }

 .checklist li {
     display: flex;
     gap: .6rem;
     align-items: flex-start;
     padding: .35rem 0;
     color: #394150;
 }

 .check-badge {
     flex: none;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: rgba(247, 201, 72, .2);
     color: #f0b429;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: .9rem;
     margin-top: .1rem;
 }

 /* Utilities for spacing similar to the reference */
 .stats-row {
     margin-top: 18px;
     margin-bottom: 22px;
 }

 .cards-row {
     margin-top: 28px;
 }

 /* Scope all custom styles to the namespaced root to avoid conflicts */
 .medx-root {
     color: #1f2a37;
     background: #ffffff;
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
 }

 /* Top intro */
 .medx-intro {
     padding-top: 56px;
     padding-bottom: 20px;
     text-align: center;
 }

 .medx-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 10px;
     border-radius: 999px;
     font-size: 12px;
     color: #475569;
     background: #f2f5f9;
     border: 1px solid #e6ebf2;
 }

 .medx-pill span {
     font-size: 15px;
 }

 .medx-title {
     margin-top: 16px;
     font-weight: 800;
     letter-spacing: -0.02em;
     color: #1a2433;
 }

 .medx-subtitle {
     max-width: 800px;
     margin: 10px auto 0;
     color: #6b7280;
 }

 /* Twin Cards Row */
 .medx-suite {
     margin-top: 28px;
     margin-bottom: 40px;
 }

 .medx-card {
     background: #fff;
     border: 1px solid #eef1f5;
     border-radius: 16px;
     box-shadow: 0 10px 20px rgba(31, 42, 55, 0.08), 0 2px 6px rgba(31, 42, 55, 0.06);
     padding: 22px;
 }

 .medx-card-head {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 18px;
     justify-content: flex-start;
 }

 .medx-icon-badge {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     background: #fff7e6;
     border: 1px solid #ffe9bf;
     display: grid;
     place-items: center;
     color: #e29412;
     flex: 0 0 28px;
 }

 .medx-card-title {
     margin: 0;
     font-weight: 700;
     font-size: 15px;
 }

 .medx-card-sub {
     margin: 0;
     font-size: 12.5px;
     color: #6b7280;
 }

 .medx-desktop-mock {
     border: 1px solid #e5e7eb;
     border-radius: 10px;
     background: #ffffff;
     padding: 16px;
     width: 100%;
     max-width: 400px;
     /* ← Increase this value to control how wide the mock appears */
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin: 0 auto;
     /* ← Optional: center it horizontally */
     height: 320px;
 }


 .medx-row {
     display: flex;
     justify-content: space-between;
     gap: 8px;
 }

 .medx-bar {
     height: 10px;
     border-radius: 6px;
     background-color: #e2e8f0;
     flex: 1;
 }

 .medx-bar--accent {
     background-color: #ffba08;
 }

 .medx-feature-chips {
     display: flex;
     flex-wrap: wrap;
     gap: 24px;
     margin-top: 16px;
     font-size: 14px;
     align-items: center;
     color: #334155;
     font-weight: 500;
 }

 .medx-chip {
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .medx-dot {
     width: 8px;
     height: 8px;
     background-color: #cbd5e1;
     /* neutral gray-blue */
     border-radius: 50%;
 }

 .medx-dot--brand {
     background-color: #ffba08;
 }



 .medx-bar+.medx-bar {
     margin-top: 8px;
 }


 .medx-feature-chips {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 10px 14px;
     margin-top: 8px;
 }

 .medx-chip {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: #748096;
     font-size: 12px;
 }

 .medx-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #d4dae3;
     flex: 0 0 8px;
 }

 .medx-dot--brand {
     background: #f4a62a;
 }

 /* Phone mock */
 .medx-phone-wrap {
     display: grid;
     place-items: center;
     padding: 10px 0 6px;
 }

 .medx-phone {
     width: 220px;
     height: 320px;
     border: 6px solid #101726;
     border-radius: 26px;
     background: #fbfbfd;
     position: relative;
 }

 .medx-notch {
     position: absolute;
     top: 12px;
     left: 50%;
     transform: translateX(-50%);
     width: 64px;
     height: 12px;
     border-radius: 10px;
     background: #101726;
 }

 .medx-phone-ui {
     position: absolute;
     inset: 28px 16px 16px 16px;
     display: grid;
     grid-template-rows: 54px 1fr 32px;
     gap: 12px;
 }

 .medx-phone-div {
     background: #f1f4f9;
     border-radius: 10px;
     border: 1px solid #e5e7eb;
 }

 .medx-phone-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
 }

 .medx-card-mini {
     background: #f7f9fc;
     border: 1px solid #e5e7eb;
     border-radius: 10px;
 }

 .medx-phone-footer {
     height: 32px;
     background: #f1f4f9;
     border: 1px solid #e5e7eb;
     border-radius: 10px;
 }

 .medx-under-chips {
     display: grid;
     grid-template-columns: repeat(2, max-content);
     margin-left: 44px;
     gap: 16px 26px;
     color: #748096;
     font-size: 14.5px;
     margin-top: 14px;
 }

 /* Divider Section */
 .medx-divider {
     height: 56px;
 }

 /* Features grid */
 .medx-features {
     background: linear-gradient(to left, #FDF6E5, #DFE1E6);
     padding: 36px 0 64px;
 }



 .medx-feat-title {
     text-align: center;
     font-weight: 800;
     letter-spacing: -0.01em;
     margin-bottom: 24px;
 }

 .medx-feat-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 18px;
 }

 .medx-feat-card {
     background: #ffffff;
     border: 1px solid #eceff3;
     border-radius: 16px;
     box-shadow: 0 10px 20px rgba(31, 42, 55, 0.08), 0 2px 6px rgba(31, 42, 55, 0.06);
     padding: 40px 60px;
     display: grid;
     /* grid-template-columns: 40px 1fr; */
     gap: 12px;
 }

 .medx-feat-icon {
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: #fff7e6;
     border: 1px solid #ffe3b5;
     display: grid;
     place-items: center;
     color: #e29412;
 }

 .medx-feat-card h4 {
     margin: 2px 0 6px;
     font-size: 16px;
     font-weight: 700;
 }

 .medx-feat-card p {
     margin: 0;
     font-size: 13px;
     color: #6b7280;
 }

 /* Utilities */
 .medx-muted {
     color: #6b7280;
 }

 .medx-hr {
     height: 1px;
     background: #e5e7eb;
     border: 0;
 }

 /* Responsiveness */
 @media (max-width: 991.98px) {
     .medx-feature-chips {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .medx-feat-grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (max-width: 575.98px) {
     .medx-feat-grid {
         grid-template-columns: 1fr;
     }

     .medx-under-chips {
         grid-template-columns: repeat(2, max-content);
     }
 }

 .medx-row {
     display: flex;
     justify-content: space-between;
     gap: 6px;
 }

 .garaj-section {
     /* background: #1f2429; */
     color: #f3f5f7;
     padding: 60px 0 70px;
     letter-spacing: 0.1px;
 }

 .garaj-wrap {
     max-width: 1060px;
 }

 .garaj-title {
     font-weight: 700;
     font-size: clamp(28px, 4vw, 40px);
     line-height: 1.15;
     text-align: center;
     margin-bottom: 18px;
 }

 .garaj-subtitle {
     color: #b9c0c7;
     font-size: 16px;
     line-height: 1.6;
     text-align: center;
     max-width: 860px;
     margin: 0 auto 40px;
 }

 .garaj-features {
     margin-top: 32px;
 }

 .garaj-feature {
     text-align: center;
     padding: 10px 12px;
 }

 .garaj-icon {
     width: 52px;
     height: 52px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     background: #f6b33a;
     color: #ffffff;
     box-shadow: 0 4px 16px rgba(246, 179, 58, 0.25);
     margin-bottom: 16px;
     transform: translateZ(0);
 }

 .garaj-feature h6 {
     font-weight: 700;
     font-size: 16px;
     margin-bottom: 8px;
     color: #f3f5f7;
 }

 .garaj-feature p {
     color: #b9c0c7;
     font-size: 14px;
     line-height: 1.7;
     max-width: 260px;
     margin: 0 auto;
 }

 /* Simple reveal animation (JS toggles .garaj-visible) */
 .garaj-reveal {
     transform: translateY(10px);
     transition: opacity .5s ease, transform .5s ease;
 }

 .garaj-visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Accessibility focus styles */
 .garaj-icon:focus-visible {
     outline: 3px solid #fff;
     outline-offset: 3px;
 }




 .dual-interface-box {
     background-color: #f4a933;
     border-radius: 60px;
     padding: 1px 3px;
     text-align: center;
     margin-bottom: 1rem;
 }


 .dual-interface-title {
     color: #000;
     font-weight: 600;
     margin: 0;
 }

 .dual-interface-description {
     margin-top: 6px;
     font-size: 19px;
     color: #000;
     font-weight: 400;
     margin-bottom: 6px;
 }


 .ui-card {
     border: 1px solid #6570704d;
     border-radius: 30px;
     padding: 20px;
     text-align: center;
     /* height: 100%; */
 }

 .ui-cards {
     border: 1px solid #6570704d;
     border-radius: 30px;
     padding: 20px;
     text-align: center;
     height: 100%;
 }

 .ui-title {
     font-weight: 600;
     color: #000 !important;
     margin-bottom: 10px;
 }

 .ui-description {
     font-weight: 300;
     color: #555;
     font-size: 18px;
     margin-bottom: 20px;
 }

 .ui-image,
 .ui-images {
     height: 500px;
     /* Set this to the height you want (match second image) */
     width: auto;
     max-width: 100%;
     object-fit: contain;
     /* Keeps image proportionate inside the fixed height */
 }

 @media (min-width: 1024px) {
     #sidebar .sidebarContent {
         padding: 1rem 0 3rem 2rem;
     }

     .thsr-title {
         font-size: clamp(2rem, 4.8vw, 2rem);
     }

     .thsr-lead {
         font-size: 0.9rem;
     }

     .headline {
         font-weight: 800;
         font-size: clamp(1.75rem, 1.05rem + 2.2vw, 1.5rem);
     }

     .section-wrap {
         padding-top: 18px;
     }

     .stat-value {
         font-size: 1.4rem;
     }

     .checklist span {
         font-size: 0.8;
     }

     .card-desc {
         font-size: .88rem;
     }

     .card-title {
         font-size: 1rem;
     }

     .eyebrow {
         font-size: .82rem;
     }

     .medx-content h3 {
         font-size: clamp(1.75rem, 1.05rem + 2.2vw, 1.5rem);
     }

     .ui-title {
         font-size: 1rem;
     }

     .ui-image,
     .ui-images {
         height: 350px;
     }

     .medx-feat-title {
         font-size: 1.4rem;
     }

     .medx-feat-card h4 {
         margin: 2px 0 6px;
         font-size: 14px;
         font-weight: 700;
     }

     .medx-feat-card p {
         margin: 0;
         font-size: 12px;
         color: #6b7280;
     }

     .garaj-title {
         font-weight: 700;
         font-size: clamp(24px, 3vw, 25px);
         line-height: 1.15;
         text-align: center;
         margin-bottom: 18px;
         color: #000000ab;
     }

     .garaj-subtitle {
         color: #939699;
         font-size: 14px;
         line-height: 1.6;
         text-align: center;
         max-width: 860px;
         margin: 0 auto 40px;
     }

     .garaj-feature h6 {
         font-weight: 700;
         font-size: 14px;
         margin-bottom: 8px;
         color: #000000ab;
     }

     .garaj-feature p {
         color: #939699;
         font-size: 13px;
         line-height: 1.7;
         max-width: 260px;
         margin: 0 auto;
     }

     .garaj-section {
         color: #f3f5f7;
         padding: 60px 0 70px;

     }

     .medx-feat-title h3 {
         font-size: 1.4rem;
         text-align: center;
         font-weight: 800;
         letter-spacing: -0.01em;
         margin-bottom: 24px;
     }
 }