/* ============ 01. TOKENS / ROOT ============ */
.crystalline-hybrid-cms{--ink:#141821;--muted:#5b6472;--mute:#8a93a1;--line:#e6e9ee;--paper:#fff;--soft:#f5f7fa;--soft2:#eef2f7;--red:#e11d2a;--red2:#c0121e;--blue:#0a63b8;--green:#1f9d55;--radius:14px;--shadow:0 1px 2px rgba(20,24,33,.06),0 8px 24px rgba(20,24,33,.06);width:100%;color:var(--ink);font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* ============ 02. BASE / RESET ============ */
.crystalline-hybrid-cms,.crystalline-hybrid-cms *{box-sizing:border-box}
.crystalline-hybrid-cms img{max-width:100%;height:auto}
.crystalline-hybrid-cms .article{width:100%;min-width:0}
.crystalline-hybrid-cms figure{text-align:center}

/* ============ 03. ARTICLE TYPOGRAPHY ============ */
.crystalline-hybrid-cms .article h2{font-size:26px;line-height:1.2;letter-spacing:-.01em;margin:1rem 0 8px;padding-top:0}
.crystalline-hybrid-cms .article h3{font-size:19px;line-height:1.25;margin:1rem 0 8px}
.crystalline-hybrid-cms .heading-anchor{font-size:.7em;color:var(--mute)}
.crystalline-hybrid-cms .article p{margin:0 0 16px}
.crystalline-hybrid-cms .article hr{border:0;border-top:1px solid var(--line);margin:1rem 0}

/* ============ 04. TABLE (base) ============ */
.crystalline-hybrid-cms .article table{width:100%;border-collapse:collapse;margin:20px 0 30px;font-family:"Segoe UI","Be Vietnam Pro",Roboto,Arial,sans-serif;font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums;color:#303846;background:#fff;border:1px solid #e1e6ec;border-radius:14px;overflow:hidden}
.crystalline-hybrid-cms .article table thead th{padding:13px 14px;background:#f0f3f7;color:#283140;font-size:13px;line-height:1.35;font-weight:700;text-align:left;letter-spacing:0;white-space:normal;text-transform:none;border:0;border-bottom:1px solid #e1e6ec;vertical-align:top}
.crystalline-hybrid-cms .article table tbody td{padding:13px 14px;color:#3d4654;font-size:14px;font-weight:400;line-height:1.5;text-align:left;vertical-align:middle;border:0;border-bottom:1px solid #e1e6ec}
.crystalline-hybrid-cms .article table tbody td:first-child{color:#18202c;font-weight:650}
.crystalline-hybrid-cms .article table tbody tr:nth-child(even){background:#fafbfd}
.crystalline-hybrid-cms .article table tbody tr:hover{background:#f4f7fb}
.crystalline-hybrid-cms .article table tbody tr:last-child td{border-bottom:0}
.crystalline-hybrid-cms .article table strong{color:#b91020;font-weight:750}
.crystalline-hybrid-cms .article table a{color:#0a63b8;font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ============ 04B. TABLE-SCROLL WRAPPER ============ */
.crystalline-hybrid-cms .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;margin:20px 0 30px;border:1px solid #e1e6ec;border-radius:14px;background:#fff}
.crystalline-hybrid-cms .table-scroll table{margin:0;border:0;border-radius:0;box-shadow:none;min-width:680px}
.crystalline-hybrid-cms .table-scroll table th,.crystalline-hybrid-cms .table-scroll table td{min-width:100px;white-space:normal;word-break:normal;overflow-wrap:break-word}
.crystalline-hybrid-cms .table-scroll table th:first-child,.crystalline-hybrid-cms .table-scroll table td:first-child{min-width:130px}
.crystalline-hybrid-cms .table-scroll table th:last-child,.crystalline-hybrid-cms .table-scroll table td:last-child{min-width:150px}

/* ============ 05. HYBRID BLOCKS (intro + content) ============ */
.crystalline-hybrid-cms .article .hybrid-intro-block{margin:0 0 18px}
.crystalline-hybrid-cms .article .hybrid-content-block{margin:1rem 0 0}
.crystalline-hybrid-cms .article .hybrid-content-block>h2:first-child{margin-top:1rem}

/* ============ 06. CONTENT NOTE (info + is-quick + grid) ============ */
.crystalline-hybrid-cms .article .content-note{margin:20px 0 28px;padding:16px 18px;background:#f7f9fc;border:1px solid #dfe4ec;border-left:4px solid var(--blue);border-radius:0 12px 12px 0;box-shadow:0 6px 18px rgba(20,24,33,.04)}
.crystalline-hybrid-cms .article .content-note-label{display:block;margin:0 0 7px;color:var(--blue);font-size:11.5px;font-weight:800;line-height:1.3;text-transform:uppercase;letter-spacing:.055em}
.crystalline-hybrid-cms .article .content-note p{max-width:none;margin:0;color:#364152;font-size:14px;line-height:1.62}
.crystalline-hybrid-cms .article .content-note a{color:var(--blue);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.crystalline-hybrid-cms .article .content-note.is-quick{margin-top:14px;border-left-color:var(--red);background:#fff8f8}
.crystalline-hybrid-cms .article .content-note.is-quick .content-note-label{color:var(--red2)}
.crystalline-hybrid-cms .article .content-note-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 30px}
.crystalline-hybrid-cms .article .content-note-grid .content-note{height:100%;margin:0}

/* ============ 07. FAQ LIST ============ */
.crystalline-hybrid-cms .faq-list{margin:18px 0 42px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px}
.crystalline-hybrid-cms .faq-item{background:#fff;border:1px solid #dfe3e8;border-radius:14px;overflow:hidden;box-shadow:0 8px 22px rgba(20,24,33,.06)}
.crystalline-hybrid-cms .faq-item summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;padding:13px 50px 13px 14px;cursor:pointer;list-style:none;font-size:13px;line-height:1.4;font-weight:700;color:#0f1720;user-select:none}
.crystalline-hybrid-cms .faq-item summary::-webkit-details-marker{display:none}
.crystalline-hybrid-cms .faq-item summary::marker{display:none;content:""}
.crystalline-hybrid-cms .faq-icon{position:absolute;right:13px;top:50%;width:20px;height:20px;transform:translateY(-50%);border-radius:50%;background:#cf1231}
.crystalline-hybrid-cms .faq-icon:before,.crystalline-hybrid-cms .faq-icon:after{content:"";position:absolute;left:5px;right:5px;top:9px;height:2px;background:#fff;border-radius:2px}
.crystalline-hybrid-cms .faq-icon:after{top:5px;bottom:5px;left:9px;width:2px;height:auto}
.crystalline-hybrid-cms .faq-item[open] .faq-icon:after{display:none}
.crystalline-hybrid-cms .faq-answer{border-top:1px solid #dfe3e8;padding:10px 14px 13px;background:#fff}
.crystalline-hybrid-cms .faq-answer p{max-width:none;margin:0;color:#253041;font-size:13px;line-height:1.55}
.crystalline-hybrid-cms .faq-answer a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.crystalline-hybrid-cms .faq-item[open]{box-shadow:0 10px 26px rgba(20,24,33,.08)}
.crystalline-hybrid-cms .faq-item summary:hover{background:#fbfcfe}
.crystalline-hybrid-cms .faq-item summary:focus-visible{outline:3px solid rgba(10,99,184,.22);outline-offset:-3px}

/* ============ 08. CONFIG GRID / CARDS ============ */
.crystalline-hybrid-cms .config-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0 42px;align-items:stretch}
.crystalline-hybrid-cms .config-card{display:flex;flex-direction:column;min-width:0;margin:0;background:#fff;border:1px solid #dfe4ea;border-radius:15px;overflow:hidden;box-shadow:0 8px 24px rgba(20,24,33,.06)}
.crystalline-hybrid-cms .config-card.is-featured{border:2px solid var(--red);box-shadow:0 12px 30px rgba(225,29,42,.11)}
.crystalline-hybrid-cms .config-head{min-height:112px;padding:17px 17px 15px;background:#f3f5f8;border-bottom:1px solid #dfe4ea}
.crystalline-hybrid-cms .config-card.is-featured .config-head{background:#fff2f3;border-bottom-color:#f1c8cd}
.crystalline-hybrid-cms .config-head span{display:block;margin-bottom:7px;color:var(--red2);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.045em}
.crystalline-hybrid-cms .article .config-head h3{margin:0;color:#17202c;font-size:17px;line-height:1.3;letter-spacing:-.01em}
.crystalline-hybrid-cms .config-specs{margin:0;padding:0}
.crystalline-hybrid-cms .config-specs>div{display:grid;grid-template-columns:minmax(92px,.9fr) minmax(0,1.1fr);gap:10px;align-items:center;min-height:49px;padding:10px 15px;border-bottom:1px solid #e8ebef}
.crystalline-hybrid-cms .config-specs dt{color:#667080;font-size:12.5px;font-weight:600}
.crystalline-hybrid-cms .config-specs dd{margin:0;color:#18202c;font-size:13px;font-weight:750;text-align:right}
.crystalline-hybrid-cms .config-fit{flex:1;padding:14px 15px 16px;background:#fbfcfd}
.crystalline-hybrid-cms .config-fit strong{display:block;margin-bottom:5px;color:var(--blue);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.crystalline-hybrid-cms .article .config-fit p{margin:0;color:#596474;font-size:12.8px;line-height:1.5}

/* ============ 09. EXPERT BLOCK ============ */
.crystalline-hybrid-cms .expert-block{margin:26px 0 38px;padding:18px;background:linear-gradient(135deg,#f7f9fc,#fff);border:1px solid #dce3eb;border-left:4px solid var(--blue);border-radius:14px;box-shadow:0 8px 24px rgba(20,24,33,.055)}
.crystalline-hybrid-cms .expert-label{margin-bottom:7px;color:var(--blue);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.crystalline-hybrid-cms .article .expert-content>p{max-width:none;margin:0;color:#263140;font-size:14px;line-height:1.62;font-style:italic}
.crystalline-hybrid-cms .expert-sign{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 9px;margin-top:12px;padding-top:10px;border-top:1px solid #e1e6ec}
.crystalline-hybrid-cms .expert-sign strong{color:#17202c;font-size:13px}
.crystalline-hybrid-cms .expert-sign span{color:#748091;font-size:11.8px}

/* ============ 10. ARTICLE CTA (dark + light) ============ */
.crystalline-hybrid-cms .article-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;margin:1rem 0;padding:1rem;background:linear-gradient(135deg,#1b2330,#0d1117);color:#fff;border-radius:17px;box-shadow:0 14px 32px rgba(20,24,33,.13)}
.crystalline-hybrid-cms .cta-copy span{display:block;margin-bottom:5px;color:#ff9299;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.crystalline-hybrid-cms .article .cta-copy h3{margin:0 0 6px;color:#fff;font-size:20px;line-height:1.3}
.crystalline-hybrid-cms .article .cta-copy p{margin:0;color:#bcc5d1;font-size:13px;line-height:1.55}
.crystalline-hybrid-cms .cta-actions{display:flex;flex-direction:column;gap:8px;min-width:190px}
.crystalline-hybrid-cms .cta-actions a{display:flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:750;text-decoration:none;white-space:nowrap}
.crystalline-hybrid-cms .cta-main{background:var(--red);color:#fff}
.crystalline-hybrid-cms .cta-main:hover{background:var(--red2)}
.crystalline-hybrid-cms .cta-alt{background:transparent;color:#fff;border:1px solid #4a5565}
.crystalline-hybrid-cms .cta-alt:hover{background:#252e3b}
.crystalline-hybrid-cms .article-cta.cta-light{background:#f4f7fa;color:var(--ink);border:1px solid #dde3ea;box-shadow:0 9px 25px rgba(20,24,33,.06)}
.crystalline-hybrid-cms .cta-light .cta-copy span{color:var(--red2)}
.crystalline-hybrid-cms .article .cta-light .cta-copy h3{color:#17202c}
.crystalline-hybrid-cms .article .cta-light .cta-copy p{color:#5f6a79}
.crystalline-hybrid-cms .cta-light .cta-alt{color:#253041;border-color:#cfd6df}
.crystalline-hybrid-cms .cta-light .cta-alt:hover{background:#e7ebf0}

/* ============ 11. BRANCH HUB ============ */
.crystalline-hybrid-cms .branch-hub{margin:1rem 0;padding:1rem;background:linear-gradient(135deg,#f4f7fa,#fff);border:1px solid #dde3ea;border-radius:20px;box-shadow:0 12px 34px rgba(52,45,33,.07)}
.crystalline-hybrid-cms .branch-main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(330px,.9fr);gap:1rem;align-items:center}
.crystalline-hybrid-cms .branch-eyebrow{display:inline-flex;padding:6px 10px;background:#fff1f2;border:1px solid #f1c5ca;border-radius:999px;color:#b91020;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.055em}
.crystalline-hybrid-cms .article .branch-copy h2{margin:10px 0;padding:0;color:#12161d;font-size:30px;line-height:1.18;letter-spacing:-.025em}
.crystalline-hybrid-cms .article .branch-copy h2:before{display:none}
.crystalline-hybrid-cms .article .branch-copy>p{margin:0 0 18px;color:#5f6a79;font-size:14px;line-height:1.65}
.crystalline-hybrid-cms .branch-actions{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:8px}
.crystalline-hybrid-cms .branch-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 17px;border-radius:999px;font-size:13px;font-weight:750;text-decoration:none}
.crystalline-hybrid-cms .branch-primary{background:linear-gradient(135deg,#e11d2a,#c0121e);color:#fff;box-shadow:0 7px 18px rgba(225,29,42,.18)}
.crystalline-hybrid-cms .branch-primary:hover{filter:brightness(.97)}
.crystalline-hybrid-cms .branch-secondary{background:#fff;color:#253041;border:1px solid #d5dce5}
.crystalline-hybrid-cms .branch-secondary:hover{background:#f4f7fa}
.crystalline-hybrid-cms .branch-cta-panel{display:grid;gap:12px;padding:22px;background:rgba(255,255,255,.72);border:1px solid #dce3eb;border-radius:16px;box-shadow:0 8px 24px rgba(20,24,33,.05)}
.crystalline-hybrid-cms .branch-cta-panel .branch-actions{display:grid;grid-template-columns:1fr;gap:10px;margin:0}
.crystalline-hybrid-cms .branch-cta-panel .branch-actions a{width:100%}
.crystalline-hybrid-cms .branch-cta-panel small{display:block;color:#748091;font-size:11.5px;line-height:1.5;text-align:center}
.crystalline-hybrid-cms .branch-address{display:flex;flex-direction:column;gap:5px;margin-top:28px;padding:16px;background:linear-gradient(135deg,#f7f9fc,#eef3f8);border:1px solid #d9e1e9;border-radius:13px;color:#4d5968;font-size:12.5px;font-style:normal;line-height:1.55}
.crystalline-hybrid-cms .branch-address strong{color:#17202c;font-size:13.5px}
.crystalline-hybrid-cms .branch-address a{color:#0a63b8;font-weight:650;text-decoration:underline;text-underline-offset:2px}

/* ============ 12. VISUAL / GALLERY ============ */
.crystalline-hybrid-cms .article-visual{margin:1rem 0}
.crystalline-hybrid-cms .article-visual img{display:block;width:1200px;height:auto;object-fit:contain;border-radius:16px;border:1px solid #dce2e9;box-shadow:0 12px 30px rgba(20,24,33,.09)}
.crystalline-hybrid-cms .article-visual figcaption{margin-top:8px;color:#7a8492;font-size:11.5px;line-height:1.45;text-align:center}
.crystalline-hybrid-cms .evidence-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:26px 0 42px;align-items:start}
.crystalline-hybrid-cms .evidence-gallery .article-visual{margin:0}

/* ============ 13. LEAD FORM ============ */
.crystalline-hybrid-cms .lead-form{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--soft);margin:18px 0 28px}
.crystalline-hybrid-cms .lead-form h3{margin:0 0 6px}
.crystalline-hybrid-cms .lead-form>p{color:var(--muted);margin-bottom:18px}
.crystalline-hybrid-cms .lead-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.crystalline-hybrid-cms .lead-field{display:grid;gap:6px}
.crystalline-hybrid-cms .lead-field label{font-size:12px;font-weight:750;color:#3d4654}
.crystalline-hybrid-cms .lead-field input,.crystalline-hybrid-cms .lead-field select{width:100%;min-height:44px;padding:10px 12px;border:1px solid #cfd6df;border-radius:10px;background:#fff;color:var(--ink);font:inherit}
.crystalline-hybrid-cms .lead-field input:focus,.crystalline-hybrid-cms .lead-field select:focus{outline:2px solid rgba(10,99,184,.18);border-color:var(--blue)}
.crystalline-hybrid-cms .lead-submit{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.crystalline-hybrid-cms .lead-submit button{border:0;border-radius:10px;padding:12px 18px;background:var(--red);color:#fff;font:inherit;font-weight:750;cursor:pointer}
.crystalline-hybrid-cms .lead-status{font-size:12.5px;color:var(--muted)}

/* ============ 14. COMPARISON MATRIX ============ */
.crystalline-hybrid-cms .comparison-matrix .is-recommended td{background:#fff5f5}
.crystalline-hybrid-cms .comparison-matrix .is-recommended td:first-child{border-left:3px solid var(--red)}

/* ============ 15. RESPONSIVE @900px ============ */
@media (max-width:900px){
.crystalline-hybrid-cms .article h2{font-size:22px}
.crystalline-hybrid-cms .article table:has(tr>:nth-child(4)){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;max-width:100%}
.crystalline-hybrid-cms .article table:has(tr>:nth-child(4)) th,.crystalline-hybrid-cms .article table:has(tr>:nth-child(4)) td{min-width:90px;white-space:normal;word-break:normal;overflow-wrap:break-word}
.crystalline-hybrid-cms .article table:has(tr>:nth-child(4)) th:first-child,.crystalline-hybrid-cms .article table:has(tr>:nth-child(4)) td:first-child{min-width:120px}
.crystalline-hybrid-cms .article table:has(tr>:nth-child(4)) th:last-child,.crystalline-hybrid-cms .article table:has(tr>:nth-child(4)) td:last-child{min-width:180px}
.crystalline-hybrid-cms .config-grid{grid-template-columns:1fr}
.crystalline-hybrid-cms .config-head{min-height:auto}
.crystalline-hybrid-cms .config-specs>div{grid-template-columns:145px 1fr}
.crystalline-hybrid-cms .config-specs dd{text-align:left}
.crystalline-hybrid-cms .branch-main{grid-template-columns:1fr}
.crystalline-hybrid-cms .article .branch-copy h2{font-size:26px}
}

/* ============ 16. RESPONSIVE @760px ============ */
@media (max-width:760px){
.crystalline-hybrid-cms .article .content-note-grid{grid-template-columns:1fr}
.crystalline-hybrid-cms .article .content-note{padding:15px 16px}
.crystalline-hybrid-cms .faq-list{grid-template-columns:1fr}
.crystalline-hybrid-cms .article-cta{grid-template-columns:1fr;gap:18px;padding:21px}
.crystalline-hybrid-cms .cta-actions{display:grid;grid-template-columns:1fr 1fr;min-width:0}
.crystalline-hybrid-cms .expert-block{padding:15px}
}

/* ============ 17. RESPONSIVE @640px (compact grid, no stack) ============ */
@media (max-width:640px){
.crystalline-hybrid-cms .article h2{margin-top:44px}
.crystalline-hybrid-cms .article .hybrid-content-block{margin-top:36px}
.crystalline-hybrid-cms .article .hybrid-content-block>h2:first-child{margin-top:20px}
.crystalline-hybrid-cms .article table{font-size:13px}
.crystalline-hybrid-cms .article table thead th{padding:10px;font-size:12px;line-height:1.3}
.crystalline-hybrid-cms .article table tbody td{padding:10px;font-size:13px;line-height:1.5}
.crystalline-hybrid-cms .faq-list{gap:9px}
.crystalline-hybrid-cms .faq-item summary{padding:13px 46px 13px 13px;font-size:12.8px}
.crystalline-hybrid-cms .faq-answer{padding:10px 13px 13px}
.crystalline-hybrid-cms .faq-answer p{font-size:12.8px}
.crystalline-hybrid-cms .article-visual img{border-radius:12px}
.crystalline-hybrid-cms .evidence-gallery{grid-template-columns:1fr;gap:14px}
.crystalline-hybrid-cms .lead-form{padding:18px}
.crystalline-hybrid-cms .lead-grid{grid-template-columns:1fr}
.crystalline-hybrid-cms .lead-submit button{width:100%}
}

/* ============ 18. RESPONSIVE @620px ============ */
@media (max-width:620px){
.crystalline-hybrid-cms .branch-hub{border-radius:16px}
.crystalline-hybrid-cms .branch-cta-panel{padding:17px}
.crystalline-hybrid-cms .branch-actions{display:grid}
.crystalline-hybrid-cms .branch-actions a{width:100%}
.crystalline-hybrid-cms .article .branch-copy h2{font-size:23px}
.crystalline-hybrid-cms .branch-address{margin-top:20px}
}

/* ============ 19. RESPONSIVE @480px ============ */
@media (max-width:480px){
.crystalline-hybrid-cms .config-specs>div{grid-template-columns:1fr;gap:3px}
.crystalline-hybrid-cms .config-specs dd{text-align:left}
.crystalline-hybrid-cms .config-grid{gap:11px}
.crystalline-hybrid-cms .cta-actions{grid-template-columns:1fr}
.crystalline-hybrid-cms .article .cta-copy h3{font-size:18px}
}