.elementor-2519 .elementor-element.elementor-element-dfd9996{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2519 .elementor-element.elementor-element-79cd6cd{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2519 .elementor-element.elementor-element-d1057c6{--display:flex;}.elementor-2519 .elementor-element.elementor-element-114aa10{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2519 .elementor-element.elementor-element-2a8c099{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2519 .elementor-element.elementor-element-1cdbd34{--display:flex;--padding-top:0px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-2519 .elementor-element.elementor-element-1cdbd34:not(.elementor-motion-effects-element-type-background), .elementor-2519 .elementor-element.elementor-element-1cdbd34 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#071B21;}.elementor-2519 .elementor-element.elementor-element-48caadb{padding:0px 20px 20px 20px;}.elementor-2519 .elementor-element.elementor-element-48caadb .upk-alex-carousel .upk-item{border-radius:15px 15px 15px 15px;}.elementor-2519 .elementor-element.elementor-element-48caadb .upk-alex-carousel .upk-item:hover{box-shadow:0px 0px 10px 0px #000000;}.elementor-2519 .elementor-element.elementor-element-48caadb .upk-alex-carousel .upk-content-wrap{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}.elementor-2519 .elementor-element.elementor-element-48caadb .upk-navigation-prev i, .elementor-2519 .elementor-element.elementor-element-48caadb .upk-navigation-next i{color:#FDE6E6;}.elementor-2519 .elementor-element.elementor-element-48caadb .upk-navigation-prev i,
                .elementor-2519 .elementor-element.elementor-element-48caadb .upk-navigation-next i{font-size:24px;}.elementor-2519 .elementor-element.elementor-element-48caadb .upk-navigation-prev:hover i, .elementor-2519 .elementor-element.elementor-element-48caadb .upk-navigation-next:hover i{color:#FF7B00;}.elementor-2519 .elementor-element.elementor-element-48caadb .upk-navigation-prev{left:0px;}.elementor-2519 .elementor-element.elementor-element-48caadb .upk-navigation-next{right:0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-2519 .elementor-element.elementor-element-48caadb .upk-navigation-prev i,
                .elementor-2519 .elementor-element.elementor-element-48caadb .upk-navigation-next i{font-size:24px;}}@media(max-width:767px){.elementor-2519 .elementor-element.elementor-element-48caadb .upk-navigation-prev i,
                .elementor-2519 .elementor-element.elementor-element-48caadb .upk-navigation-next i{font-size:24px;}}/* Start custom CSS for html, class: .elementor-element-6622fe8 */.th1hd *{box-sizing:border-box;margin:0;padding:0;}
.th1hd{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
.th1hd a{text-decoration:none;}
.th1hd-bg{background:linear-gradient(135deg,#060d1f 0%,#0d1b40 100%);padding:48px 24px 60px;position:relative;overflow:hidden;}
.th1hd-glow{position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(29,78,216,.18) 0%,transparent 68%);top:-120px;right:-60px;pointer-events:none;}
.th1hd-inner{max-width:860px;margin:0 auto;position:relative;z-index:1;}
.th1hd-crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:#64748b;margin-bottom:28px;flex-wrap:wrap;}
.th1hd-crumb a{color:#60a5fa;}.th1hd-crumb a:hover{color:#93c5fd;}
.th1hd-crumb svg{opacity:.5;flex-shrink:0;}
.th1hd-meta{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.th1hd-cat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;background:rgba(29,78,216,.2);border:1px solid rgba(29,78,216,.4);color:#60a5fa;padding:5px 14px;border-radius:20px;}
.th1hd-free{font-size:12px;font-weight:600;background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.3);color:#4ade80;padding:5px 14px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;}
.th1hd-h1{font-size:36px;font-weight:800;color:#fff;line-height:1.15;letter-spacing:-.025em;margin-bottom:14px;}
.th1hd-sub{font-size:16px;color:#94a3b8;line-height:1.7;max-width:640px;margin-bottom:24px;}
.th1hd-catlink{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(29,78,216,.4);color:#60a5fa;font-size:13px;font-weight:500;padding:9px 18px;border-radius:9px;}
@media(max-width:600px){.th1hd-h1{font-size:24px;}}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-70a75ef */#hdWrap *{box-sizing:border-box;margin:0;padding:5px;}
#hdWrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;width:100%;box-sizing:border-box;padding:24px 16px;background:#f4f6f9;}
#hdWrap .hd-inner{max-width:1180px;width:90%;margin:0 auto;}
.hd-card{background:#fff;border:1.5px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px;}
.hd-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.hd-row-input{margin-bottom:20px;}
.hd-row-results{width:100%;}
@media(min-width:900px){
  .hd-grid{grid-template-columns:repeat(4,1fr);}
}
.hd-field{display:flex;flex-direction:column;gap:5px;}
.hd-lbl{font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;}
.hd-sub{font-size:10px;color:#9ca3af;font-weight:500;}
.hd-input{padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:9px;font-size:15px;font-family:monospace;color:#111827;outline:none;width:100%;}
.hd-input:focus{border-color:#1d4ed8;box-shadow:0 0 0 3px rgba(29,78,216,.1);}
.hd-input.error{border-color:#dc2626;}
.hd-empty{padding:28px;text-align:center;color:#9ca3af;font-size:14px;background:#fff;border-radius:14px;border:1.5px dashed #e5e7eb;}
.hd-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.hd-preset{padding:6px 14px;border:1.5px solid #e5e7eb;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;background:#f9fafb;color:#374151;font-family:monospace;}
.hd-preset:hover{border-color:#1d4ed8;color:#1d4ed8;}
.hd-color-row{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid #e5e7eb;border-radius:14px;padding:16px 20px;margin-bottom:14px;}
.hd-color-swatch{width:56px;height:56px;border-radius:10px;border:1.5px solid #e5e7eb;flex-shrink:0;}
.hd-color-info{flex:1;}
.hd-color-name{font-size:14px;font-weight:700;color:#111827;}
.hd-color-mode{font-size:12px;color:#6b7280;margin-top:2px;}
.hd-info-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px;}
.hd-info-card{background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;padding:14px;text-align:center;}
.hd-info-lbl{font-size:10px;color:#9ca3af;font-weight:700;text-transform:uppercase;margin-bottom:5px;}
.hd-info-val{font-size:16px;font-weight:800;color:#111827;font-family:monospace;}
@media(max-width:580px){.hd-grid{grid-template-columns:1fr;}.hd-info-grid{grid-template-columns:1fr 1fr;}}
/* === Modern Enhancements === */
#hdWrap .hd-card{box-shadow:0 1px 4px rgba(0,0,0,.06),0 2px 10px rgba(0,0,0,.04);transition:box-shadow .22s,transform .22s;}
#hdWrap .hd-card:hover{box-shadow:0 4px 18px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.06);transform:translateY(-1px);}
#hdWrap .hd-card2{box-shadow:0 1px 4px rgba(0,0,0,.06);transition:box-shadow .22s,transform .22s;}
#hdWrap .hd-card2:hover{box-shadow:0 4px 14px rgba(0,0,0,.1);transform:translateY(-1px);}
#hdWrap .hd-input{transition:border-color .15s,box-shadow .15s;letter-spacing:.01em;}
#hdWrap .hd-empty{background:linear-gradient(135deg,#fff 0%,#f9fafb 100%);border:1.5px dashed #d1d5db;border-radius:14px;color:#9ca3af;}
#hdWrap .hd-row{transition:background .12s;}
#hdWrap .hd-bd-row{transition:background .12s;}
 
/* === Material Button System === */
#hdWrap button{white-space:nowrap;overflow:visible;}
/* All inline/ghost/secondary btn baseline */
#hdWrap .hd-btn,
#hdWrap .hd-ghost-btn,
#hdWrap .hd-btn-ghost,
#hdWrap .hd-btn-outline,
#hdWrap .hd-swap-btn,
#hdWrap .hd-navbtn,
#hdWrap .hd-todaybtn,
#hdWrap .hd-tab-btn,
#hdWrap .hd-pre-btn,
#hdWrap .hd-fb,
#hdWrap .hd-exbtn,
#hdWrap .hd-dl,
#hdWrap .hd-sugg-use,
#hdWrap .hd-copy-btn{
  min-height:40px;
  padding:10px 20px;
  font-size:14px;
  font-weight:600;
  border-radius:8px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .12s;
}
/* Ghost/outline hover → clear accent fill */
#hdWrap .hd-btn-ghost:hover,
#hdWrap .hd-ghost-btn:hover,
#hdWrap .hd-btn-outline:hover,
#hdWrap .hd-navbtn:hover,
#hdWrap .hd-tab-btn:hover{
  background:#eff3ff;
  border-color:#1d4ed8;
  color:#1d4ed8;
  box-shadow:0 2px 8px rgba(29,78,216,.18);
  transform:translateY(-1px);
}
/* Preset/chip buttons hover */
#hdWrap .hd-pre-btn:hover,
#hdWrap .hd-fb:hover,
#hdWrap .hd-exbtn:hover,
#hdWrap .hd-preset:hover,
#hdWrap .hd-sugg-use:hover{
  background:#1d4ed8;
  border-color:#1d4ed8;
  color:#fff;
  box-shadow:0 2px 8px rgba(29,78,216,.18);
}
/* Today / primary outline CTA */
#hdWrap .hd-todaybtn:hover,
#hdWrap .hd-swap-btn:hover{
  background:#1d4ed8;
  color:#fff;
  border-color:#1d4ed8;
  box-shadow:0 4px 14px rgba(29,78,216,.35);
  transform:translateY(-2px);
}
/* Type/segment btn active state */
#hdWrap .hd-type-btn.active,
#hdWrap .hd-tab-btn.active{
  background:#1d4ed8;
  border-color:#1d4ed8;
  color:#fff;
  box-shadow:0 2px 8px rgba(29,78,216,.18);
}
/* Primary CTA full-width buttons — already styled; reinforce active press */
#hdWrap .hd-calc-btn:active,
#hdWrap .hd-btn-primary:active,
#hdWrap .hd-btn:not(.hd-btn-ghost):not(.hd-btn-outline):active{
  transform:translateY(0) scale(.99);
  box-shadow:0 1px 4px rgba(29,78,216,.18)!important;
}
 
 
/* ═══════════════════════════════════════════════
   PRODUCTION INPUT SYSTEM — hdWrap
   ═══════════════════════════════════════════════ */
 
/* ── Field wrapper ── */
#hdWrap .hd-field {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:0;
}
 
/* ── Label ── */
#hdWrap .hd-lbl {
  font-size:11.5px;
  font-weight:700;
  color:#374151;
  text-transform:uppercase;
  letter-spacing:.08em;
  display:block;
  margin-bottom:0;
  line-height:1.2;
  user-select:none;
}
 
/* ── Universal input & select baseline ── */
#hdWrap input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]),
#hdWrap select {
  box-sizing:border-box;
  width:100%;
  min-height:48px;
  padding:12px 16px;
  font-size:15px;
  font-family:inherit;
  font-weight:400;
  color:#0f172a;
  background:#ffffff;
  border:1.5px solid #e2e8f0;
  border-radius:10px;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .18s,box-shadow .18s,background .18s;
  line-height:1.5;
}
 
/* ── Focus ── */
#hdWrap input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):focus,
#hdWrap select:focus {
  border-color:#1d4ed8;
  box-shadow:0 0 0 3px rgba(29,78,216,.13);
  background:#fafcff;
}
 
/* ── Hover (not focused) ── */
#hdWrap input:not(:focus):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):hover,
#hdWrap select:not(:focus):hover {
  border-color:#cbd5e1;
}
 
/* ── Placeholder ── */
#hdWrap input::placeholder,
#hdWrap textarea::placeholder {
  color:#a8b3c8;
  font-weight:400;
}
 
/* ── Select: custom arrow + right padding ── */
#hdWrap select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:42px;
  cursor:pointer;
  background-color:#ffffff;
}
 
/* ── Monospace / inline code inputs (hex, binary) ── */
#hdWrap input[style*="monospace"],
#hdWrap .hd-input[style*="monospace"] {
  font-family:'Fira Code','Courier New',monospace;
  font-size:15px;
  letter-spacing:.04em;
}
 
/* ── Number spinner: visible but subtle ── */
#hdWrap input[type="number"] {
  -moz-appearance:textfield;
}
#hdWrap input[type="number"]::-webkit-inner-spin-button,
#hdWrap input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance:inner-spin-button;
  opacity:.45;
  margin-right:2px;
  transform:scale(.95);
}
#hdWrap input[type="number"]:focus::-webkit-inner-spin-button,
#hdWrap input[type="number"]:focus::-webkit-outer-spin-button {
  opacity:.7;
}
 
/* ── Color picker ── */
#hdWrap input[type="color"] {
  min-height:44px!important;
  width:44px!important;
  padding:3px!important;
  border-radius:9px!important;
  cursor:pointer;
  background:none!important;
  border:1.5px solid #e2e8f0!important;
}
#hdWrap input[type="color"]:hover {
  border-color:#1d4ed8!important;
}
 
/* ── Regular textarea (output, notes) ── */
#hdWrap textarea:not([class*="textarea"]) {
  box-sizing:border-box;
  width:100%;
  min-height:100px;
  padding:12px 16px;
  font-size:15px;
  font-family:inherit;
  color:#0f172a;
  background:#ffffff;
  border:1.5px solid #e2e8f0;
  border-radius:10px;
  outline:none;
  resize:vertical;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .18s,box-shadow .18s;
  line-height:1.6;
}
#hdWrap textarea:not([class*="textarea"]):focus {
  border-color:#1d4ed8;
  box-shadow:0 0 0 3px rgba(29,78,216,.13);
  background:#fafcff;
}
 
/* Monospace input for hex-to-decimal-converter */
#hdWrap .hd-input {
  font-family:'Fira Code','Courier New',monospace!important;
  font-size:15px!important;
  letter-spacing:.04em!important;
}
 
 
/* ═══════════════════════════════════════════════
   SPACING & RESPONSIVE SYSTEM — hdWrap
   ═══════════════════════════════════════════════ */
 
/* Outer wrapper: generous, breathable padding */
#hdWrap {
  padding: 40px 24px !important;
  box-sizing: border-box !important;
}
 
/* Inner: centered, never overflows */
#hdWrap .hd-inner {
  width: 100% !important;
  box-sizing: border-box !important;
}
 
/* Cards: safe padding + overflow control */
#hdWrap .hd-card,
#hdWrap .hd-card2,
#hdWrap .hd-out,
#hdWrap .hd-result-card,
#hdWrap .hd-breakdown {
  padding: 28px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
 
/* All children of cards: prevent overflow */
#hdWrap .hd-card *,
#hdWrap .hd-card2 * {
  box-sizing: border-box;
  max-width: 100%;
}
 
/* Buttons: always constrained */
#hdWrap button {
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
 
/* Full-width CTA buttons: proper margin */
#hdWrap .hd-btn,
#hdWrap .hd-calc-btn,
#hdWrap .hd-btn-primary {
  margin-top: 8px !important;
}
 
/* Type/segment button grids: always wrap */
#hdWrap .hd-type-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}
#hdWrap .hd-type-btn {
  flex: 1 1 auto !important;
  min-width: 60px !important;
}
 
/* Standard 2-col rows */
#hdWrap .hd-row {
  gap: 16px !important;
  margin-bottom: 20px !important;
}
 
/* 3-col rows */
#hdWrap .hd-3col,
#hdWrap .hd-opts {
  gap: 14px !important;
  margin-bottom: 20px !important;
}
 
/* Fields: consistent spacing */
#hdWrap .hd-field {
  gap: 8px !important;
  margin-bottom: 4px !important;
}
 
/* Empty/error states */
#hdWrap .hd-empty,
#hdWrap .hd-error {
  padding: 36px 24px !important;
  border-radius: 12px !important;
}
 
/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 768px) {
  #hdWrap {
    padding: 28px 16px !important;
  }
  #hdWrap .hd-card,
  #hdWrap .hd-card2 {
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }
}
 
@media (max-width: 540px) {
  #hdWrap {
    padding: 20px 12px !important;
  }
  #hdWrap .hd-card,
  #hdWrap .hd-card2 {
    padding: 16px 14px !important;
  }
  /* All grids collapse to single column */
  #hdWrap .hd-row,
  #hdWrap .hd-3col,
  #hdWrap .hd-grid,
  #hdWrap .hd-macro-grid,
  #hdWrap .hd-hero-grid,
  #hdWrap .hd-info-grid,
  #hdWrap .hd-stats,
  #hdWrap .hd-meals,
  #hdWrap .hd-sched {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Type buttons: smaller but still comfortable */
  #hdWrap .hd-type-btn {
    min-width: 48px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  /* Full-width buttons: good tap target */
  #hdWrap .hd-btn-primary,
  #hdWrap .hd-calc-btn {
    padding: 14px 20px !important;
    font-size: 15px !important;
    min-height: 50px !important;
  }
}
 
 
/* ════════════════════════════════════════════
   MATERIAL CHECKBOX & SELECT SYSTEM — hdWrap
   ════════════════════════════════════════════ */
 
/* ── Select: visually distinct from text inputs ──
   Tinted bg + arrow icon tells users it's a choice control */
#hdWrap select {
  background-color: #f9fafb !important;
  color: #1e293b !important;
}
#hdWrap select:focus {
  background-color: #fafcff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.12) !important;
}
#hdWrap select:not(:focus):hover {
  border-color: #cbd5e1 !important;
  background-color: #f4f6f8 !important;
}
 
/* ── Text / number inputs: pure white, distinct from selects ── */
#hdWrap input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]) {
  background-color: #ffffff !important;
}
 
/* ── Checkbox pill: any .xx-chk label ── */
#hdWrap .hd-chk,
#hdWrap .hd-check,
#hdWrap .hd-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  cursor: pointer !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  min-height: 44px !important;
  transition: border-color .15s, background .15s, box-shadow .15s, color .15s !important;
  user-select: none !important;
  line-height: 1.4 !important;
}
#hdWrap .hd-chk:hover,
#hdWrap .hd-check:hover,
#hdWrap .hd-toggle:hover {
  border-color: #1d4ed8 !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.08) !important;
}
#hdWrap .hd-chk input[type="checkbox"],
#hdWrap .hd-check input[type="checkbox"],
#hdWrap .hd-toggle input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: #1d4ed8 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
 
/* ── Opts / options row: proper spacing & separator ── */
#hdWrap .hd-opts {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding: 16px 0 4px !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 4px !important;
}
 
/* ── Links inside tool widget: always visible on hover ── */
#hdWrap a {
  color: #1d4ed8;
  text-decoration: none;
  transition: color .15s, text-decoration .15s;
}
#hdWrap a:hover {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 3px;
  filter: brightness(.85);
}
 
 
/* ── Solid buttons: always white text on hover, regardless of cascade ── */
#hdWrap .hd-btn-primary:hover,
#hdWrap .hd-btn-green:hover,
#hdWrap .hd-calc-btn:hover,
#hdWrap .hd-min-btn:hover {
  color: #fff !important;
}
 
/* ═══════════════════════════════════════════════
   RESULT OUTPUT SYSTEM — hdWrap
   Styles for classes generated by hex-to-decimal-converter.js
   (hd-cards, hd-card, hd-detail, hd-drow) — previously unstyled,
   plus the live colour preview box (hdColorBox), which was
   missing from the markup entirely so the feature never rendered.
   ═══════════════════════════════════════════════ */
 
/* ── Four base-value result cards ── */
#hdWrap .hd-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
#hdWrap .hd-cards .hd-card {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-left-width: 4px;
  border-radius: 12px;
  padding: 16px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: transform .15s, box-shadow .15s;
  min-width: 0;
  margin-bottom: 0;
}
#hdWrap .hd-cards .hd-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
#hdWrap .hd-card-lbl {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #9ca3af;
  margin-bottom: 8px;
}
#hdWrap .hd-card-val {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.4;
}
 
/* Card accent colors, one per number base */
#hdWrap .hd-c-purple { border-left-color: #7c3aed; }
#hdWrap .hd-c-cyan    { border-left-color: #0891b2; }
#hdWrap .hd-c-teal    { border-left-color: #0f766e; }
#hdWrap .hd-c-orange  { border-left-color: #c2410c; }
#hdWrap .hd-c-purple .hd-card-lbl { color: #7c3aed; }
#hdWrap .hd-c-cyan    .hd-card-lbl { color: #0891b2; }
#hdWrap .hd-c-teal    .hd-card-lbl { color: #0f766e; }
#hdWrap .hd-c-orange  .hd-card-lbl { color: #c2410c; }
 
/* ── Detail rows (grouped hex, bit length, byte count, CSS color) ── */
#hdWrap .hd-detail {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  padding: 6px 20px;
}
#hdWrap .hd-drow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 13px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13.5px;
  width: 100%;
  min-width: 0;
}
#hdWrap .hd-drow:last-child {
  border-bottom: none;
}
#hdWrap .hd-drow span:first-child {
  color: #6b7280;
  font-weight: 600;
  flex-shrink: 0;
}
#hdWrap .hd-drow span:last-child {
  color: #111827;
  font-weight: 700;
  font-family: 'Fira Code', 'Courier New', monospace;
  text-align: right;
  min-width: 0;
  flex: 1 1 auto;
  word-break: break-all;
  overflow-wrap: break-word;
}
#hdWrap .hd-drow code {
  background: #f1f2f6;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 12.5px;
}
 
/* ── Live colour preview box ── */
#hdWrap .hd-color-box {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  border-radius: 12px;
  border: 1.5px solid #e5e7eb;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 14px;
  transition: background .15s;
}
 
/* ── Responsive ── */
@media (max-width: 640px) {
  #hdWrap .hd-cards {
    grid-template-columns: 1fr 1fr;
  }
  #hdWrap .hd-drow {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  #hdWrap .hd-drow span:last-child {
    text-align: left;
  }
}
@media (max-width: 420px) {
  #hdWrap .hd-cards {
    grid-template-columns: 1fr;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f5382b9 */.hdcc *{box-sizing:border-box;margin:0;padding:0;}
.hdcc{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#fff;color:#2c1122;padding:64px 24px;}
.hdcc-in{max-width:90%;margin:0 auto;}
.hdcc-kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#be185d;background:#fce7f3;padding:5px 11px;border-radius:6px;margin-bottom:14px;}
.hdcc-h2{font-size:29px;font-weight:800;line-height:1.18;letter-spacing:-.021em;margin-bottom:15px;}
.hdcc-h3{font-size:19px;font-weight:800;letter-spacing:-.011em;margin:42px 0 14px;padding-left:12px;border-left:3px solid #be185d;}
.hdcc-p{font-size:15px;line-height:1.78;color:#5b2a49;margin-bottom:14px;max-width:760px;text-align:justify;}
.hdcc code{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:13px;background:#fce7f3;padding:2px 6px;border-radius:4px;color:#be185d;}



.hdcc-table{width:100%;border-collapse:collapse;font-size:13.5px;margin:14px 0;}
.hdcc-table th{text-align:left;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:#9d6884;padding:9px 12px;border-bottom:2px solid #fbcfe8;}
.hdcc-table td{padding:11px 12px;border-bottom:1px solid #fce7f3;color:#5b2a49;vertical-align:top;}
.hdcc-table td:first-child{font-weight:700;color:#2c1122;white-space:nowrap;}




.hdcc-refs{list-style:none;margin-top:10px;}
.hdcc-refs li{font-size:13.5px;line-height:1.75;color:#6b3a55;padding:8px 0;border-bottom:1px solid #fce7f3;}
.hdcc-refs a{color:#be185d;font-weight:600;text-decoration:none;}
.hdcc-refs a:hover{text-decoration:underline;}

@media(max-width:768px){.hdcc{padding:48px 18px;}.hdcc-h2{font-size:24px;}.hdcc-table{font-size:12.5px;}}
.hdcc-slabs{margin:18px 0;counter-reset:sl;}
.hdcc-slab{position:relative;padding:16px 18px 16px 74px;background:#fefafd;border-radius:10px;margin-bottom:8px;counter-increment:sl;}
.hdcc-slab::before{content:counter(sl,decimal-leading-zero);position:absolute;left:20px;top:14px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:26px;font-weight:800;color:#efc2d6;line-height:1;}
.hdcc-slabn{font-size:13.5px;font-weight:800;color:#be185d;display:block;margin-bottom:4px;}
.hdcc-slabt{font-size:13.5px;line-height:1.68;color:#5b2a49;display:block;}
@media(max-width:768px){.hdcc-slab{padding-left:58px;}.hdcc-slab::before{left:14px;font-size:20px;}}
.hdcc-pts{display:flex;flex-wrap:wrap;gap:7px 20px;margin:14px 0;}
.hdcc-pt{font-size:12.8px;font-weight:600;color:#5b2a49;position:relative;padding-left:15px;}
.hdcc-pt::before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;background:#be185d;transform:rotate(45deg);}
.hdcc-bricks{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:11px;margin:14px 0;}
.hdcc-brick{background:#fefafd;border:1px solid #fbcfe8;border-radius:10px;padding:16px 17px;}
.hdcc-brick h5{font-size:12px;font-weight:800;color:#be185d;margin-bottom:7px;text-transform:uppercase;letter-spacing:.07em;padding-bottom:6px;border-bottom:1px solid #fbcfe8;}
.hdcc-brick p{font-size:13px;line-height:1.68;color:#5b2a49;}
.hdcc-aside{border:1px solid #ae194d;border-radius:12px;padding:17px 20px;font-size:14px;line-height:1.72;color:#711032;margin:16px 0;background:#fef9fc;}
.hdcc-aside b{display:block;color:#ae194d;margin-bottom:5px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.hdcc-listing{background:#0f172a;color:#e2e8f0;border-radius:12px;padding:20px 22px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:12.5px;line-height:1.85;overflow-x:auto;white-space:pre;margin:14px 0;}
.hdcc-listing .c{color:#64748b;}
.hdcc-listing .k{color:#e297b6;}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cf81267 */.th5hd *{box-sizing:border-box;margin:0;padding:0;}
.th5hd{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#fff;padding:64px 24px 80px;border-top:1px solid #f1f5f9;}
.th5hd-inner{max-width:720px;margin:0 auto;}
.th5hd-eye{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#1d4ed8;margin-bottom:12px;}
.th5hd-h2{font-size:26px;font-weight:800;color:#111827;line-height:1.2;letter-spacing:-.02em;margin-bottom:32px;}
.th5hd-item{background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;margin-bottom:10px;overflow:hidden;}
.th5hd-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;}
.th5hd-qt{font-size:15px;font-weight:600;color:#111827;line-height:1.4;}
.th5hd-ico{width:26px;height:26px;border-radius:50%;background:#e9ecef;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.th5hd-ico svg{transition:transform .25s;width:13px;height:13px;}
.th5hd-item.open .th5hd-ico svg{transform:rotate(180deg);}
.th5hd-a{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0 20px;}
.th5hd-item.open .th5hd-a{max-height:380px;padding:0 20px 18px;}
.th5hd-a p{font-size:14px;color:#374151;line-height:1.7;}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c28f603 */.bp-section, .bp-section *, .bp-section *::before, .bp-section *::after {
  box-sizing: border-box;
}
.bp-section {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #071B21;
  padding: 24px 24px;
}
.bp-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 56px;
}

.bp-content {
  flex: 0 0 90%;
  max-width: 90%;
}
.bp-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A5B4FC;
  margin-bottom: 10px;
}
.bp-heading {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #F8FAFC;
  line-height: 1.25;
  margin-bottom: 12px;
}
.bp-sub {
  font-size: 14.5px;
  color: #A7B2C6;
  line-height: 1.65;
  margin-bottom: 22px;
}

/* Category chips -- reuse the same colored icon pattern as the header
   Tools/Blog dropdowns, wrapped to fill the remaining width */


@media (max-width: 1024px) {
  .bp-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .bp-content {
    flex: none;
    max-width: 100%;
  }
}
@media (max-width: 560px) {
  .bp-section { padding: 48px 20px; }
  .bp-heading { font-size: 22px; }
  .bp-chip { padding: 8px 12px 8px 8px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-cta, .bp-cta svg, .bp-chip { transition-duration: 0.01ms !important; }
}/* End custom CSS */