/* ════════════════════════════════════════════
   LOT CALCULATOR — DESIGN SYSTEM V2
   Prefixed with .lotc- to avoid conflicts
   ════════════════════════════════════════════ */
:root {
    --lotc-navy: var(--navy, #0a1f44);
    --lotc-navy-2: var(--navy-deep, #112858);
    --lotc-navy-3: var(--navy, #1a3a7e);
    --lotc-teal: var(--teal, #1abc9c);
    --lotc-teal-light: var(--teal-light, #2dd4bf);
    --lotc-teal-dark: var(--teal, #0e8b7a);
    --lotc-gold: var(--gold, #f0b73f);
    --lotc-gold-light: var(--gold-light, #f5c869);
    --lotc-gold-dark: var(--gold, #c89320);
    --lotc-bg: var(--bg, #f5f7fb);
    --lotc-bg-2: var(--bg-card, #ffffff);
    --lotc-bg-3: var(--bg-muted, #eef1f8);
    --lotc-surface: var(--bg-card, #ffffff);
    --lotc-border: var(--border);
    --lotc-border-strong: var(--border);
    --lotc-text: var(--text, var(--navy-deep));
    --lotc-text-2: var(--text-mid);
    --lotc-text-3: var(--text-muted);
    --lotc-success: var(--teal, var(--success));
    --lotc-danger: var(--light-red-color, var(--danger));
    --lotc-warning: var(--gold, #f59e0b);
    --lotc-shadow-sm: 0 1px 3px rgba(10,31,68,0.06),0 1px 2px rgba(10,31,68,0.04);
    --lotc-shadow-md: 0 4px 12px rgba(10,31,68,0.08),0 2px 4px rgba(10,31,68,0.04);
    --lotc-shadow-lg: 0 12px 36px rgba(10,31,68,0.12),0 4px 12px rgba(10,31,68,0.06);
    --lotc-shadow-xl: 0 24px 60px rgba(10,31,68,0.18);
    --lotc-radius-sm: 8px;
    --lotc-radius: 12px;
    --lotc-radius-lg: 18px;
    --lotc-radius-xl: 24px;
}

/* ── HERO ── */
.lotc-hero {
    background: radial-gradient(ellipse at top right,rgba(26,188,156,0.18),transparent 50%),
        radial-gradient(ellipse at bottom left,rgba(240,183,63,0.12),transparent 50%),
        linear-gradient(135deg,var(--lotc-navy) 0%,var(--lotc-navy-2) 100%);
    color: var(--bg-card, #fff);
    padding: 60px 0 100px;
    position: relative;
    overflow: hidden;
    border-radius: var(--lotc-radius-xl);
    margin-bottom: -50px;
}
.lotc-hero::before {
    content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
    background-size:50px 50px;pointer-events:none;
}
.lotc-hero-inner {
    max-width:1200px;margin:0 auto;padding:0 24px;
    display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center;position:relative;
}
.lotc-hero-content h1 {font-size:42px;line-height:1.25;font-weight:800;margin-bottom:18px;letter-spacing:-0.5px;color:var(--text-on-navy)}
.lotc-hero-content h1 .lotc-accent {background:linear-gradient(135deg,var(--lotc-gold),var(--lotc-gold-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lotc-hero-content p {font-size:17px;opacity:.88;margin-bottom:24px;line-height:1.85}
.lotc-hero-badges {display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.lotc-hero-badge {background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);padding:8px 14px;border-radius:999px;font-size:13px;display:flex;align-items:center;gap:6px;backdrop-filter:blur(8px)}
.lotc-hero-badge .lotc-dot {width:6px;height:6px;border-radius:50%;background:var(--lotc-teal-light);box-shadow:0 0 8px var(--lotc-teal-light);animation:lotcPulse 2s ease-in-out infinite}
@keyframes lotcPulse{0%,100%{opacity:1}50%{opacity:.5}}
.lotc-hero-stats {display:flex;gap:30px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.12)}
.lotc-hero-stat strong {display:block;font-size:28px;font-weight:800;color:var(--lotc-gold-light);line-height:1}
.lotc-hero-stat span {font-size:13px;opacity:.75;margin-top:4px;display:block}

/* ── CALCULATOR CARD ── */
.lotc-calc-card {background:var(--lotc-surface);border-radius:var(--lotc-radius-xl);box-shadow:var(--lotc-shadow-xl);overflow:hidden;color:var(--lotc-text)}
.lotc-calc-tabs {display:flex;background:var(--lotc-bg-3);border-bottom:1px solid var(--lotc-border);overflow-x:auto;scrollbar-width:none}
.lotc-calc-tabs::-webkit-scrollbar{display:none}
.lotc-calc-tab {flex:1 0 auto;padding:18px;border:none;background:transparent;font-family:inherit;font-size:14px;font-weight:700;color:var(--lotc-text-2);cursor:pointer;position:relative;transition:all .25s;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px}
.lotc-calc-tab:hover {color:var(--lotc-navy);background:rgba(26,188,156,0.04)}
.lotc-calc-tab.active {color:var(--lotc-navy);background:var(--lotc-surface)}
.lotc-calc-tab.active::after {content:'';position:absolute;bottom:-1px;right:0;left:0;height:3px;background:linear-gradient(90deg,var(--lotc-teal),var(--lotc-teal-light));border-radius:3px 3px 0 0}
.lotc-calc-body {padding:32px;display:none}
.lotc-calc-body.active {display:block;animation:lotcFadeIn .3s ease}
@keyframes lotcFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.lotc-field-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:22px}
.lotc-field {display:flex;flex-direction:column}
.lotc-field label {font-size:13px;font-weight:700;color:var(--lotc-text-2);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.lotc-field label .lotc-help {width:16px;height:16px;border-radius:50%;background:var(--lotc-bg-3);color:var(--lotc-text-3);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;cursor:help}
.lotc-field input,.lotc-field select {font-family:inherit;font-size:15px;font-weight:700;padding:12px 14px;border:2px solid var(--lotc-border);border-radius:var(--lotc-radius-sm);background:var(--lotc-bg-2);color:var(--lotc-text);transition:all .2s;direction:ltr;text-align:left}
.lotc-field input:focus,.lotc-field select:focus {outline:none;border-color:var(--lotc-teal);box-shadow:0 0 0 3px rgba(26,188,156,0.12)}
.lotc-field .lotc-input-suffix {position:relative}
.lotc-field .lotc-input-suffix input {padding-inline-start:50px;width:100%}
.lotc-field .lotc-input-suffix .lotc-suffix {position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:700;color:var(--lotc-text-3);pointer-events:none}

/* Risk slider */
.lotc-risk-row {background:var(--lotc-bg-3);border-radius:var(--lotc-radius);padding:18px 20px;margin-bottom:22px}
.lotc-risk-head {display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.lotc-risk-head label {font-size:13px;font-weight:700;color:var(--lotc-text-2)}
.lotc-risk-value {font-size:22px;font-weight:800;color:var(--lotc-navy);display:flex;align-items:baseline;gap:4px}
.lotc-risk-value .lotc-pct {font-size:14px;color:var(--lotc-text-2)}
.lotc-risk-slider {width:100%;-webkit-appearance:none;appearance:none;height:6px;background:linear-gradient(90deg,var(--lotc-teal) 0%,var(--lotc-gold) 50%,var(--lotc-danger) 100%);border-radius:3px;outline:none;direction:ltr}
.lotc-risk-slider::-webkit-slider-thumb {-webkit-appearance:none;width:22px;height:22px;background:#fff;border:3px solid var(--lotc-navy);border-radius:50%;cursor:pointer;box-shadow:var(--lotc-shadow-md)}
.lotc-risk-slider::-moz-range-thumb {width:22px;height:22px;background:#fff;border:3px solid var(--lotc-navy);border-radius:50%;cursor:pointer;box-shadow:var(--lotc-shadow-md)}
.lotc-risk-marks {display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--lotc-text-3);direction:ltr}

/* Calculate button */
.lotc-calc-actions {display:flex;gap:10px;flex-wrap:wrap}
.lotc-calc-btn {flex:1;min-width:200px;padding:16px;background:linear-gradient(135deg,var(--lotc-navy) 0%,var(--lotc-navy-3) 100%);color:var(--text-on-navy,#fff);border:none;border-radius:var(--lotc-radius);font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:var(--lotc-shadow-md);transition:all .25s}
.lotc-calc-btn:hover {transform:translateY(-2px);box-shadow:var(--lotc-shadow-lg);background:linear-gradient(135deg,var(--lotc-navy-3) 0%,var(--lotc-navy) 100%)}
.lotc-reset-btn {padding:14px 22px;background:transparent;color:var(--lotc-text-2);border:1px solid var(--border);border-radius:var(--lotc-radius);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;min-height:44px;transition:all .2s}
.lotc-reset-btn:hover {background:var(--bg-muted);border-color:var(--lotc-text-3)}
.lotc-reset-btn:focus-visible {outline:2px solid var(--teal-light);outline-offset:2px}

/* Result */
.lotc-result {margin-top:24px;background:linear-gradient(135deg,rgba(26,188,156,0.06),rgba(240,183,63,0.06));border:1px solid rgba(26,188,156,0.2);border-radius:var(--lotc-radius-lg);padding:24px}
.lotc-result-head {display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px dashed rgba(10,31,68,0.15)}
.lotc-result-head h3 {font-size:15px;color:var(--lotc-text-2);font-weight:700}
.lotc-result-head .lotc-verdict {background:var(--lotc-success);color:#fff;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700}
.lotc-result-main {text-align:center;margin-bottom:22px}
.lotc-result-main .lotc-label {font-size:13px;color:var(--lotc-text-2);margin-bottom:6px}
.lotc-result-main .lotc-value {font-size:48px;font-weight:800;color:var(--lotc-navy);line-height:1;letter-spacing:-1px}
.lotc-result-main .lotc-value .lotc-unit {font-size:22px;color:var(--lotc-teal);margin-inline-end:8px;font-weight:700}
.lotc-result-meta {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lotc-result-meta-item {background:var(--bg-card,#fff);border-radius:var(--lotc-radius-sm);padding:12px;text-align:center;border:1px solid var(--lotc-border)}
.lotc-result-meta-item .lotc-k {font-size:11px;color:var(--lotc-text-3);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px}
.lotc-result-meta-item .lotc-v {font-size:16px;font-weight:800;color:var(--lotc-navy)}

/* ── SECTIONS ── */
.lotc-section {padding:60px 0}
.lotc-section-head {text-align:center;margin-bottom:50px}
.lotc-section-head .lotc-eyebrow {display:inline-block;background:linear-gradient(135deg,rgba(26,188,156,0.1),rgba(240,183,63,0.1));color:var(--lotc-teal-dark);padding:6px 16px;border-radius:999px;font-size:13px;font-weight:700;margin-bottom:14px;border:1px solid rgba(26,188,156,0.2)}
.lotc-section-head h2 {font-size:34px;color:var(--lotc-navy);font-weight:800;margin-bottom:12px;letter-spacing:-0.5px}
.lotc-section-head p {color:var(--lotc-text-2);font-size:16px;max-width:640px;margin:0 auto}

/* ── PRESETS ── */
.lotc-presets {background:var(--lotc-surface);border-top:1px solid var(--lotc-border);border-bottom:1px solid var(--lotc-border);padding:30px 0;position:relative;margin-top:-50px;border-radius:var(--lotc-radius-lg)}
.lotc-presets-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1200px;margin:0 auto;padding:0 24px}
.lotc-preset-card {background:var(--lotc-bg-2);border:1.5px solid var(--lotc-border);border-radius:var(--lotc-radius);padding:18px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden}
.lotc-preset-card::before {content:'';position:absolute;top:0;right:0;width:60px;height:60px;background:radial-gradient(circle,rgba(26,188,156,0.12),transparent);transition:all .3s}
.lotc-preset-card:hover {border-color:var(--lotc-teal);transform:translateY(-3px);box-shadow:var(--lotc-shadow-md)}
.lotc-preset-card .lotc-icon {font-size:24px;margin-bottom:8px}
.lotc-preset-card h4 {font-size:15px;color:var(--lotc-navy);font-weight:800;margin-bottom:4px}
.lotc-preset-card p {font-size:12px;color:var(--lotc-text-2);line-height:1.5;margin:0}

/* ── LIVE PRICES ── */
.lotc-prices-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1200px;margin:0 auto;padding:0 24px}
.lotc-price-card {background:var(--lotc-surface);border-radius:var(--lotc-radius);padding:20px;border:1px solid var(--lotc-border);transition:all .25s}
.lotc-price-card:hover {transform:translateY(-3px);box-shadow:var(--lotc-shadow-md);border-color:var(--lotc-teal)}
.lotc-price-head {display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.lotc-price-pair {font-size:16px;font-weight:800;color:var(--lotc-navy);direction:ltr}
.lotc-price-trend {font-size:11px;padding:3px 8px;border-radius:999px;font-weight:700;direction:ltr}
.lotc-price-trend.up {background:rgba(22,163,74,0.1);color:var(--lotc-success)}
.lotc-price-trend.down {background:rgba(220,38,38,0.1);color:var(--lotc-danger)}
.lotc-price-value {font-size:26px;font-weight:800;color:var(--lotc-text);direction:ltr;line-height:1.2;margin-bottom:8px}
.lotc-price-meta {display:flex;justify-content:space-between;font-size:11px;color:var(--lotc-text-3);padding-top:10px;border-top:1px dashed var(--lotc-border)}

/* ── HOW IT WORKS ── */
.lotc-how-grid {display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;max-width:1200px;margin:0 auto;padding:0 24px}
.lotc-formula-card {background:linear-gradient(135deg,var(--lotc-navy) 0%,var(--lotc-navy-2) 100%);color:var(--text-on-navy,#fff);border-radius:var(--lotc-radius-lg);padding:36px;position:relative;overflow:hidden}
.lotc-formula-card::before {content:'';position:absolute;top:-50%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(240,183,63,0.15),transparent);border-radius:50%}
.lotc-formula-card h3 {font-size:22px;margin-bottom:8px;color:var(--lotc-gold-light);position:relative}
.lotc-formula-card .lotc-sub {opacity:.8;margin-bottom:24px;font-size:14px;position:relative}
.lotc-formula-box {background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);border-radius:var(--lotc-radius);padding:24px;text-align:center;font-size:17px;line-height:2;position:relative;backdrop-filter:blur(10px)}
.lotc-formula-box .lotc-frac {display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 6px}
.lotc-formula-box .lotc-num {border-bottom:2px solid var(--lotc-gold);padding:4px 0}
.lotc-formula-box .lotc-den {padding:4px 0}
.lotc-formula-box .lotc-equals {color:var(--lotc-gold);font-weight:800;margin:0 12px;font-size:22px}
.lotc-formula-box .lotc-var {color:var(--lotc-teal-light);font-weight:700}
.lotc-formula-legend {margin-top:20px;display:grid;gap:8px;position:relative}
.lotc-formula-legend div {font-size:13px;opacity:.85;display:flex;align-items:center;gap:8px}
.lotc-formula-legend div::before {content:'◆';color:var(--lotc-gold);font-size:10px}

.lotc-steps {list-style:none;counter-reset:lotc-steps;padding:0;margin:0}
.lotc-steps li {counter-increment:lotc-steps;padding:16px 0 16px 0;padding-inline-end:54px;border-bottom:1px solid var(--lotc-border);position:relative}
.lotc-steps li:last-child {border-bottom:none}
.lotc-steps li::before {content:counter(lotc-steps);position:absolute;inset-inline-end:0;top:16px;width:40px;height:40px;background:linear-gradient(135deg,var(--lotc-teal),var(--lotc-teal-dark));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;box-shadow:0 4px 12px rgba(26,188,156,0.3)}
.lotc-steps li h4 {font-size:clamp(14px,1.1rem,17px);color:var(--lotc-navy);margin-bottom:6px;font-weight:800}
.lotc-steps li p {color:var(--lotc-text-2);font-size:clamp(13px,0.9rem,14px);line-height:1.7;margin:0}

/* ── SCENARIOS ── */
.lotc-scenarios-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1200px;margin:0 auto;padding:0 24px}
.lotc-scenario-card {background:var(--lotc-surface);border-radius:var(--lotc-radius-lg);overflow:hidden;box-shadow:var(--lotc-shadow-sm);border:1px solid var(--lotc-border);transition:all .3s}
.lotc-scenario-card:hover {transform:translateY(-5px);box-shadow:var(--lotc-shadow-lg)}
.lotc-scenario-head {background:linear-gradient(135deg,var(--lotc-navy) 0%,var(--lotc-navy-2) 100%);color:var(--text-on-navy,#fff);padding:22px 24px;position:relative}
.lotc-scenario-head .lotc-level {position:absolute;top:16px;left:16px;background:var(--lotc-gold);color:var(--lotc-navy);padding:4px 12px;border-radius:999px;font-size:11px;font-weight:800}
.lotc-scenario-head h3 {font-size:18px;margin-bottom:4px;margin-top:8px;color:var(--text-on-navy,#fff)}
.lotc-scenario-head p {font-size:13px;opacity:.85;margin:0}
.lotc-scenario-body {padding:24px}
.lotc-scenario-row {display:flex;justify-content:space-between;padding:10px 0;font-size:14px;border-bottom:1px dashed var(--lotc-border)}
.lotc-scenario-row:last-of-type {border-bottom:none}
.lotc-scenario-row .lotc-k {color:var(--lotc-text-2)}
.lotc-scenario-row .lotc-v {font-weight:800;color:var(--lotc-navy)}
.lotc-scenario-result {margin-top:16px;padding:14px;background:linear-gradient(135deg,rgba(26,188,156,0.08),rgba(240,183,63,0.08));border-radius:var(--lotc-radius);text-align:center;border:1px solid rgba(26,188,156,0.2)}
.lotc-scenario-result .lotc-lbl {font-size:12px;color:var(--lotc-text-2);margin-bottom:4px}
.lotc-scenario-result .lotc-res {font-size:22px;font-weight:800;color:var(--lotc-teal-dark)}

/* ── TIPS ── */
.lotc-tips-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1200px;margin:0 auto;padding:0 24px}
.lotc-tip {display:flex;gap:18px;padding:24px;background:var(--lotc-bg);border-radius:var(--lotc-radius);border-inline-end:4px solid var(--lotc-teal);transition:all .25s}
.lotc-tip:hover {background:var(--lotc-bg-3);transform:translateX(-4px)}
.lotc-tip:nth-child(2) {border-inline-end-color:var(--lotc-gold)}
.lotc-tip:nth-child(3) {border-inline-end-color:var(--lotc-navy)}
.lotc-tip:nth-child(4) {border-inline-end-color:var(--lotc-danger)}
.lotc-tip .lotc-tip-icon {flex-shrink:0;width:48px;height:48px;background:var(--bg-card,#fff);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:var(--lotc-shadow-sm)}
.lotc-tip h4 {font-size:16px;color:var(--lotc-navy);font-weight:800;margin-bottom:6px}
.lotc-tip p {color:var(--lotc-text-2);font-size:14px;line-height:1.7;margin:0}

/* ── BROKER CTA ── */
.lotc-broker-cta {background:linear-gradient(135deg,var(--lotc-navy) 0%,var(--lotc-navy-3) 100%);color:var(--text-on-navy,#fff);padding:70px 24px;position:relative;overflow:hidden;border-radius:var(--lotc-radius-xl);margin:30px 0}
.lotc-broker-cta::before {content:'';position:absolute;top:0;right:0;bottom:0;width:50%;background:radial-gradient(circle at right,rgba(240,183,63,0.15),transparent 70%)}
.lotc-cta-grid {display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:center;position:relative;max-width:1200px;margin:0 auto}
.lotc-cta-grid h2 {font-size:32px;margin-bottom:14px;line-height:1.3;letter-spacing:-0.5px;color:var(--text-on-navy,#fff)}
.lotc-cta-grid h2 .lotc-accent {color:var(--lotc-gold-light)}
.lotc-cta-grid > div:first-child > p {opacity:.88;font-size:16px;margin-bottom:24px;line-height:1.85}
.lotc-cta-features {display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.lotc-cta-feature {display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);padding:8px 14px;border-radius:999px;font-size:13px}
.lotc-cta-feature::before {content:'✓';color:var(--lotc-teal-light);font-weight:800}
.lotc-cta-buttons {display:flex;gap:14px;flex-wrap:wrap}
.lotc-btn-primary,.lotc-btn-secondary {padding:14px 26px;border-radius:var(--lotc-radius);font-family:inherit;font-size:15px;font-weight:800;text-decoration:none;transition:all .25s;display:inline-flex;align-items:center;gap:8px}
.lotc-btn-primary {background:linear-gradient(135deg,var(--lotc-gold),var(--lotc-gold-dark));color:var(--lotc-navy);box-shadow:0 8px 20px rgba(240,183,63,0.3)}
.lotc-btn-primary:hover {transform:translateY(-2px);box-shadow:0 12px 28px rgba(240,183,63,0.4);color:var(--lotc-navy)}
.lotc-btn-secondary {background:rgba(255,255,255,0.1);color:#fff;border:1.5px solid rgba(255,255,255,0.25)}
.lotc-btn-secondary:hover {background:rgba(255,255,255,0.18);color:#fff}

.lotc-broker-card {background:var(--lotc-surface);color:var(--lotc-text);border-radius:var(--lotc-radius-lg);padding:28px;box-shadow:var(--lotc-shadow-xl)}
.lotc-broker-logo {width:60px;height:60px;background:linear-gradient(135deg,var(--lotc-navy),var(--lotc-navy-3));border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--lotc-gold);font-size:24px;font-weight:800;margin-bottom:16px;overflow:hidden}
.lotc-broker-logo img {width:100%;height:100%;object-fit:contain}
.lotc-broker-card h4 {font-size:19px;color:var(--lotc-navy);margin-bottom:4px}
.lotc-broker-card .lotc-rating {color:var(--lotc-gold-dark);font-size:14px;margin-bottom:16px}
.lotc-broker-specs {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;padding:16px;background:var(--lotc-bg);border-radius:var(--lotc-radius)}
.lotc-broker-specs div {font-size:12px;color:var(--lotc-text-2)}
.lotc-broker-specs div strong {display:block;font-size:16px;color:var(--lotc-navy);font-weight:800;margin-top:2px}
.lotc-broker-card .lotc-btn-primary {width:100%;justify-content:center}

/* ── RELATED TOOLS ── */
.lotc-tools-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1200px;margin:0 auto;padding:0 24px}
.lotc-tool-card {background:var(--lotc-bg);border:1.5px solid var(--lotc-border);border-radius:var(--lotc-radius);padding:24px;text-decoration:none;color:inherit;transition:all .25s;display:flex;align-items:center;gap:18px}
.lotc-tool-card:hover {border-color:var(--lotc-teal);background:var(--lotc-surface);box-shadow:var(--lotc-shadow-md);transform:translateY(-3px);color:inherit}
.lotc-tool-card .lotc-tool-icon {width:54px;height:54px;background:linear-gradient(135deg,var(--lotc-teal),var(--lotc-teal-dark));border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;flex-shrink:0}
.lotc-tool-card:nth-child(2) .lotc-tool-icon {background:linear-gradient(135deg,var(--lotc-gold),var(--lotc-gold-dark));color:var(--lotc-navy)}
.lotc-tool-card:nth-child(3) .lotc-tool-icon {background:linear-gradient(135deg,var(--lotc-navy-3),var(--lotc-navy))}
.lotc-tool-card:nth-child(4) .lotc-tool-icon {background:linear-gradient(135deg,var(--lotc-danger),#b91c1c)}
.lotc-tool-card:nth-child(5) .lotc-tool-icon {background:linear-gradient(135deg,var(--lotc-teal-dark),var(--lotc-navy-3))}
.lotc-tool-card:nth-child(6) .lotc-tool-icon {background:linear-gradient(135deg,var(--lotc-gold-dark),var(--lotc-gold));color:var(--lotc-navy)}
.lotc-tool-card h4 {font-size:16px;color:var(--lotc-navy);font-weight:800;margin-bottom:4px}
.lotc-tool-card p {font-size:13px;color:var(--lotc-text-2);margin:0}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
    .lotc-hero-inner{grid-template-columns:1fr;gap:40px}
    .lotc-hero-content h1{font-size:32px}
    .lotc-how-grid{grid-template-columns:1fr;gap:40px}
    .lotc-scenarios-grid,.lotc-tools-grid{grid-template-columns:1fr 1fr}
    .lotc-presets-grid{grid-template-columns:1fr 1fr}
    .lotc-prices-grid{grid-template-columns:1fr 1fr}
    .lotc-cta-grid{grid-template-columns:1fr}
    .lotc-tips-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
    .lotc-hero{padding:40px 0 70px}
    .lotc-hero-content h1{font-size:26px}
    .lotc-field-grid{grid-template-columns:1fr}
    .lotc-scenarios-grid,.lotc-tools-grid,.lotc-presets-grid,.lotc-prices-grid{grid-template-columns:1fr}
    .lotc-section{padding:50px 0}
    .lotc-section-head h2{font-size:26px}
    .lotc-calc-body{padding:22px}
    .lotc-result-meta{grid-template-columns:1fr}
    .lotc-result-main .lotc-value{font-size:38px}
}

/* CV-045: extracted from inline span style on flag emoji inside JS price
   template in lot-size-calculator.blade.php. */
.lotc-flag {font-size:14px;opacity:.7}

/* ═══════════════════════════════════════════════════════════════
   DI-124 (CV-044 P1.2) — mobile hero responsive hardening
   ═══════════════════════════════════════════════════════════════
   Mohammed live-browser audit 2026-04-18: hero title/content cut
   from left side on mobile, "block looks broken". CV-045 removed
   2 inline styles but did NOT touch hero layout. This block
   addresses the actual layout root causes:

   1. `.lotc-hero-content` + `.lotc-calc-wrap` are grid items.
      Default `min-width:auto` forbids shrinking below intrinsic
      content width — so wide inner content (long Arabic heading,
      calc-card tabs with `flex:1 0 auto`) pushes column past
      grid-column assigned width, creating horizontal overflow
      that `.lotc-hero { overflow:hidden }` then clips. Fix:
      `min-width:0` on grid children → grid can constrain them
      to column width.

   2. `.lotc-hero-stats` at 320–480px viewport: 3 stats × (28px
      number + label) + 2 × 30px gap = ~210px minimum. On a 272px
      content area that fits BUT if Arabic labels wrap the stats
      line-break unexpectedly. `flex-wrap:wrap` lets each stat
      keep its own width and fall to next row cleanly.

   3. `.lotc-hero-content h1` has `letter-spacing:-0.5px` + Arabic
      compound words. `overflow-wrap:break-word` + `hyphens:auto`
      prevents a single long word from pushing the line past
      container edge.

   4. `.lotc-hero-inner { padding:0 24px }` is tight on 320px
      viewports (224px usable). Reduce to 16px at ≤ 480px for
      ~32px extra content width.

   5. `.lotc-hero` border-radius renders oddly on edge-to-edge
      viewports. Reduce on ≤ 480px for clean look.
   ═══════════════════════════════════════════════════════════════ */
.lotc-hero-content,
.lotc-calc-wrap {
    min-width: 0;
}
.lotc-hero-content h1 {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

@media (max-width: 640px) {
    .lotc-hero-stats {
        flex-wrap: wrap;
        gap: 18px;
    }
    .lotc-hero-stat {
        flex: 1 1 28%;
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    .lotc-hero-inner {
        padding: 0 16px;
        gap: 28px;
    }
    .lotc-hero {
        border-radius: var(--lotc-radius, 12px);
        margin-inline: 0;
    }
    .lotc-hero-content h1 {
        font-size: 22px;
    }
    .lotc-hero-badges {
        gap: 6px;
    }
    .lotc-hero-badge {
        padding: 6px 10px;
        font-size: 11.5px;
    }
}