.sgfc-calculator {
  --sgfc-primary: var(--bde-brand-primary-color, #3e63dd);
  --sgfc-primary-hover: var(--bde-brand-primary-color-hover, #3657c3);
  --sgfc-dark: var(--hcl-brand-12, #1d2d5c);
  --sgfc-accent: var(--hcl-brand-3, #edf2fe);
  --sgfc-soft: var(--hcl-neutral-2, #f9f9f9);
  --sgfc-surface: var(--hcl-neutral-1, #fcfcfc);
  --sgfc-text: var(--hcl-neutral-12, #202020);
  --sgfc-muted: var(--hcl-neutral-11, #646464);
  --sgfc-line: var(--hcl-neutral-4, #e8e8e8);
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--sgfc-line);
  border-radius: var(--hrd-l, 18px);
  background: var(--sgfc-surface);
  color: var(--sgfc-text);
  box-shadow: 0 24px 70px rgba(29, 45, 92, 0.1);
}

.sgfc-calculator *,
.sgfc-calculator *::before,
.sgfc-calculator *::after { box-sizing: border-box; }

.sgfc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  align-items: stretch;
  gap: var(--hsp-m, 32px);
  padding: clamp(28px, 5vw, 64px);
}

.sgfc-controls { padding: var(--hsp-xs, 18px) 0; }

.sgfc-eyebrow {
  margin: 0 0 var(--hsp-xs, 14px);
  color: var(--sgfc-primary);
  font-family: var(--sg-body, 'Arimo', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.sgfc-title {
  margin: 0;
  color: var(--sgfc-dark);
  font-family: var(--sg-display, 'Cormorant Garamond', serif);
  font-size: var(--hfs-h1, clamp(2.441rem, 1.842rem + 2.003vw, 3.552rem));
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.sgfc-description {
  max-width: 620px;
  margin: var(--hsp-s, 24px) 0 0;
  color: var(--sgfc-muted);
  font-family: var(--sg-body, 'Arimo', sans-serif);
  font-size: var(--hfs-text-m, 1.125rem);
  line-height: 1.7;
}

.sgfc-field { margin-top: var(--hsp-m, 32px); }

.sgfc-field-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
  color: var(--sgfc-text);
  font-family: var(--sg-body, 'Arimo', sans-serif);
  font-size: 14px;
}

.sgfc-field-header label { font-weight: 600; }
.sgfc-field-value { color: var(--sgfc-primary); font-variant-numeric: tabular-nums; font-weight: 700; }

.sgfc-range {
  width: 100%;
  height: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--hrd-pill, 500px);
  outline-offset: 5px;
  background: linear-gradient(to right, var(--sgfc-primary) 0%, var(--sgfc-primary) var(--sgfc-progress, 0%), var(--sgfc-line) var(--sgfc-progress, 0%), var(--sgfc-line) 100%);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.sgfc-range:focus-visible { outline: 3px solid color-mix(in srgb, var(--sgfc-primary) 32%, transparent); }

.sgfc-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 4px solid var(--sgfc-primary);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(29, 45, 92, 0.24);
  appearance: none;
  -webkit-appearance: none;
}

.sgfc-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 4px solid var(--sgfc-primary);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(29, 45, 92, 0.24);
}

.sgfc-results {
  padding: clamp(26px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--hrd-l, 18px);
  background: var(--sgfc-dark);
  color: #fff;
}

.sgfc-result-label {
  margin: 0;
  color: var(--hcl-brand-11, #93b4ff);
  font-family: var(--sg-body, 'Arimo', sans-serif);
  font-size: 14px;
}

.sgfc-monthly {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-family: var(--sg-display, 'Cormorant Garamond', serif);
  font-size: clamp(42px, 6vw, 68px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sgfc-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--hsp-m, 32px);
}

.sgfc-result-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--hcl-brand-4, #dfeaff);
  border-radius: var(--hrd-m, 12px);
  background: var(--hcl-brand-2, #f7f9ff);
}

.sgfc-result-card span {
  display: block;
  color: var(--sgfc-muted);
  font-family: var(--sg-body, 'Arimo', sans-serif);
  font-size: 12px;
}

.sgfc-result-card strong {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
  color: var(--sgfc-dark);
  font-family: var(--sg-body, 'Arimo', sans-serif);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.sgfc-disclaimer {
  margin: var(--hsp-s, 24px) 0 0;
  color: var(--hcl-brand-11, #93b4ff);
  font-family: var(--sg-body, 'Arimo', sans-serif);
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 1023px) {
  .sgfc-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 479px) {
  .sgfc-layout { padding: 24px 18px; }
  .sgfc-results { padding: 24px 18px; }
  .sgfc-result-grid { grid-template-columns: minmax(0, 1fr); }
}