/* ====================== TW TEAM CALCULATOR, DESIGN SYSTEM ====================== */
#twc-root, #twc-root * { box-sizing: border-box; }
#twc-root {
  --twc-navy: #0a2c52;
  --twc-navy-deep: #071d38;
  --twc-blue: #2b7bc4;
  --twc-blue-light: #5fa8e0;
  --twc-gold: #d9b310;
  --twc-teal: #3fb8af;
  --twc-green: #1f8a4c;
  --twc-red: #c0392b;
  --twc-bg: #e9eef4;
  --twc-panel-bg: #fff;
  --twc-card-bg: #fbfcfe;
  --twc-border: #e1e8f0;
  --twc-ink: #13243c;
  --twc-ink-soft: #445168;
  --twc-muted: #7d8ba0;
  --twc-radius: 14px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--twc-ink);
  background: var(--twc-bg);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
#twc-root a { color: var(--twc-blue); }
#twc-root h1,#twc-root h2,#twc-root h3,#twc-root h4 { margin: 0; font-weight: 800; color: var(--twc-navy); }
#twc-root p { margin: 0 0 10px; }
#twc-root .twc-wrap { max-width: 1180px; margin: 0 auto; padding: 6px 0 28px; }

/* Tabs, one uniform row; on narrower screens it scrolls horizontally instead of wrapping to a
   second, lopsided row. flex-shrink:0 on the buttons keeps them from getting squeezed as the
   row scrolls, and the slim scrollbar treatment keeps it from looking like a stray UI element. */
#twc-root .twc-tabs {
  display: flex; flex-wrap: nowrap; gap: 6px; padding: 18px 4px 18px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--twc-border) transparent;
}
#twc-root .twc-tabs::-webkit-scrollbar { height: 5px; }
#twc-root .twc-tabs::-webkit-scrollbar-track { background: transparent; }
#twc-root .twc-tabs::-webkit-scrollbar-thumb { background: var(--twc-border); border-radius: 999px; }
#twc-root .twc-tab {
  appearance: none; border: 1px solid var(--twc-border); background: #fff; color: var(--twc-ink-soft);
  font-family: inherit; font-size: 13px; font-weight: 700; padding: 10px 14px; border-radius: 999px;
  cursor: pointer; transition: all .15s ease; white-space: nowrap; flex: 0 0 auto;
}
#twc-root .twc-tab:hover { border-color: var(--twc-blue); color: var(--twc-navy); }
#twc-root .twc-tab.is-active { background: var(--twc-navy); border-color: var(--twc-navy); color: #fff; box-shadow: 0 3px 10px rgba(10,44,82,.25); }

/* Tabs-as-dropdown: on phone-width screens the horizontal tab row gives way to a single native
   <select> so picking a calculator is a tap-and-choose instead of a scroll-and-hunt. Both controls
   stay in the DOM and in sync (see the JS tab-switch handler); CSS alone decides which is shown. */
#twc-root .twc-tabs-select-wrap { display: none; padding: 18px 4px 18px; }
#twc-root .twc-tabs-select {
  appearance: none; -webkit-appearance: none; width: 100%; border: 1px solid var(--twc-border);
  border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237d8ba0'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E") no-repeat right 14px center;
  background-size: 16px; color: var(--twc-navy); font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 13px 40px 13px 18px; cursor: pointer;
}
#twc-root .twc-tabs-select:focus { outline: none; border-color: var(--twc-blue); box-shadow: 0 0 0 3px rgba(43,123,196,.15); }
@media (max-width: 640px) {
  #twc-root .twc-tabs { display: none; }
  #twc-root .twc-tabs-select-wrap { display: block; }
}

/* Panels */
#twc-root .twc-panels { background: var(--twc-panel-bg); border-radius: var(--twc-radius); box-shadow: 0 2px 14px rgba(10,44,82,.09); overflow: hidden; }
#twc-root .twc-panel { display: none; padding: 28px; }
#twc-root .twc-panel.is-active { display: block; }

/* Calculator layout */
#twc-root .twc-calc-head { margin-bottom: 18px; }
#twc-root .twc-calc-head h2 { font-size: 22px; }
#twc-root .twc-calc-head .twc-sub { color: var(--twc-muted); font-size: 13.5px; margin-top: 4px; }
#twc-root .twc-grid { display: grid; grid-template-columns: minmax(280px,1fr) minmax(300px,1fr); gap: 26px; align-items: start; }
@media (max-width: 820px) { #twc-root .twc-grid { grid-template-columns: 1fr; } }

#twc-root .twc-card { background: var(--twc-card-bg); border: 1px solid var(--twc-border); border-radius: var(--twc-radius); padding: 22px; }
#twc-root .twc-card + .twc-card { margin-top: 16px; }
#twc-root .twc-card h3 { font-size: 14px; letter-spacing: .4px; text-transform: uppercase; color: var(--twc-blue); margin-bottom: 14px; }

/* Sub-tabs (loan type pills, purchase-type toggles etc) */
#twc-root .twc-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
#twc-root .twc-subtab { flex: 1 1 auto; text-align: center; appearance: none; border: 1px solid var(--twc-border); background: #fff; color: var(--twc-ink-soft); font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
#twc-root .twc-subtab.is-active { background: var(--twc-blue); border-color: var(--twc-blue); color: #fff; }

/* Fields */
#twc-root .twc-field { margin-bottom: 16px; }
#twc-root .twc-field:last-child { margin-bottom: 0; }
#twc-root .twc-field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 10px; }
#twc-root .twc-label { font-size: 13px; font-weight: 700; color: var(--twc-ink); }
#twc-root .twc-label .twc-hint { display: block; font-weight: 400; color: var(--twc-muted); font-size: 11.5px; margin-top: 1px; }
#twc-root .twc-input-combo { display: flex; align-items: center; gap: 6px; }
#twc-root .twc-inputbox {
  border: 1px solid var(--twc-border); border-radius: 8px; padding: 7px 10px; font-family: inherit; font-size: 13.5px;
  font-weight: 700; color: var(--twc-navy); width: 118px; text-align: right; background: #fff;
}
#twc-root .twc-inputbox:focus { outline: none; border-color: var(--twc-blue); box-shadow: 0 0 0 3px rgba(43,123,196,.15); }
#twc-root select.twc-inputbox { text-align: left; width: auto; min-width: 118px; }
#twc-root .twc-unit-toggle { display: flex; border: 1px solid var(--twc-border); border-radius: 8px; overflow: hidden; }
#twc-root .twc-unit-toggle button { appearance: none; border: 0; background: #fff; color: var(--twc-muted); font-family: inherit; font-size: 12px; font-weight: 700; padding: 7px 10px; cursor: pointer; }
#twc-root .twc-unit-toggle button.is-active { background: var(--twc-blue); color: #fff; }

#twc-root input[type="range"].twc-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 4px;
  background: linear-gradient(90deg, var(--twc-blue) var(--twc-fill,50%), var(--twc-border) var(--twc-fill,50%));
  outline: none; margin-top: 4px;
}
#twc-root input[type="range"].twc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--twc-navy);
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(10,44,82,.5); cursor: pointer; margin-top: -6.5px;
}
#twc-root input[type="range"].twc-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--twc-navy); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(10,44,82,.5); cursor: pointer;
}
#twc-root input[type="range"].twc-slider::-moz-range-track { height: 5px; border-radius: 4px; background: var(--twc-border); }

#twc-root .twc-checkrow { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--twc-ink-soft); }
#twc-root .twc-checkrow input { width: 16px; height: 16px; accent-color: var(--twc-blue); }
#twc-root .twc-radiorow { display: flex; flex-wrap: wrap; gap: 14px; }
#twc-root .twc-radioopt { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--twc-ink-soft); }
#twc-root .twc-radioopt input { accent-color: var(--twc-blue); width: 15px; height: 15px; }

/* Results side */
#twc-root .twc-result-hero { background: var(--twc-navy); border-radius: var(--twc-radius); padding: 22px; color: #fff; text-align: center; }
#twc-root .twc-result-hero .twc-eyebrow { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--twc-blue-light); font-weight: 700; }
#twc-root .twc-result-hero .twc-bignum { font-size: 38px; font-weight: 800; margin: 4px 0 2px; }
#twc-root .twc-result-hero .twc-bignum small { font-size: 15px; font-weight: 600; color: #b9cee6; }
#twc-root .twc-result-hero .twc-subline { font-size: 12.5px; color: #a9c3de; }

#twc-root .twc-chartwrap { position: relative; width: 190px; height: 190px; margin: 18px auto 6px; }
#twc-root .twc-chart-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
#twc-root .twc-chart-center .n { font-size: 20px; font-weight: 800; color: var(--twc-navy); }
#twc-root .twc-chart-center .l { font-size: 10.5px; color: var(--twc-muted); text-transform: uppercase; letter-spacing: .5px; }

#twc-root .twc-legend { display: grid; gap: 8px; margin-top: 14px; }
#twc-root .twc-legend-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed var(--twc-border); }
#twc-root .twc-legend-row:last-child { border-bottom: 0; font-weight: 800; padding-top: 8px; border-top: 2px solid var(--twc-ink); margin-top: 4px; }
#twc-root .twc-legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 8px; }
#twc-root .twc-legend-label { display: flex; align-items: center; color: var(--twc-ink-soft); }
#twc-root .twc-legend-val { font-weight: 700; color: var(--twc-navy); }

#twc-root .twc-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
#twc-root .twc-stat { background: #fff; border: 1px solid var(--twc-border); border-radius: 10px; padding: 12px; }
#twc-root .twc-stat .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--twc-muted); font-weight: 700; }
#twc-root .twc-stat .v { font-size: 17px; font-weight: 800; color: var(--twc-navy); margin-top: 2px; }
#twc-root .twc-stat .v.pos { color: var(--twc-green); }
#twc-root .twc-stat .v.neg { color: var(--twc-red); }

#twc-root .twc-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .3px; }
#twc-root .twc-badge.green { background: rgba(31,138,76,.12); color: var(--twc-green); }
#twc-root .twc-badge.gold { background: rgba(217,179,16,.15); color: #8a6f0a; }
#twc-root .twc-badge.red { background: rgba(192,57,43,.12); color: var(--twc-red); }
/* Higher-contrast variants for use on the dark navy hero card */
#twc-root .twc-result-hero .twc-badge.green { background: #2eb872; color: #06331b; }
#twc-root .twc-result-hero .twc-badge.gold { background: var(--twc-gold); color: #3a2e04; }
#twc-root .twc-result-hero .twc-badge.red { background: #e2564a; color: #3a0a05; }

#twc-root .twc-note { font-size: 12px; color: var(--twc-muted); margin-top: 12px; line-height: 1.55; }
#twc-root .twc-note-warn { color: #92400e; background: #fef3c7; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
#twc-root .twc-clamped { outline: 2px solid #d97706 !important; outline-offset: 1px; transition: outline .2s ease; }
#twc-root .twc-note b { color: var(--twc-ink-soft); }

#twc-root .twc-cta-row { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
#twc-root .twc-btn { appearance: none; border: 0; border-radius: 9px; padding: 13px 20px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; }
#twc-root .twc-btn-primary { background: var(--twc-blue); color: #fff; }
#twc-root .twc-btn-primary:hover { background: #2467a8; }
#twc-root .twc-btn-ghost { background: transparent; color: var(--twc-navy); border: 1.5px solid var(--twc-navy); }

/* Chart-only line/bar canvases (rent vs buy) */
#twc-root .twc-linechart-wrap { background: #fff; border: 1px solid var(--twc-border); border-radius: 12px; padding: 16px; margin-top: 16px; }
#twc-root .twc-linechart-wrap canvas { max-height: 260px; }

#twc-root .twc-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { #twc-root .twc-two-col { grid-template-columns: 1fr; } }

#twc-root .twc-disclaimer { padding: 22px 26px 4px; font-size: 11.5px; color: var(--twc-muted); line-height: 1.6; }
#twc-root .twc-disclaimer a { color: var(--twc-muted); text-decoration: underline; }

/* Scenario explainer strip (ARM calculator) */
#twc-root .twc-scenario-note { display: flex; gap: 8px; align-items: baseline; background: #eef4fb; border: 1px solid var(--twc-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 13px; line-height: 1.5; }
#twc-root .twc-scenario-note .lbl { flex: 0 0 auto; font-weight: 800; color: var(--twc-blue); text-transform: uppercase; font-size: 11px; letter-spacing: .4px; }
#twc-root .twc-scenario-note .txt { color: var(--twc-ink-soft); }

/* Inline disclaimer toggle + accordion "how it works" (ARM calculator) */
#twc-root .twc-inline-disclaimer { margin-top: 16px; }
#twc-root .twc-inline-disclaimer summary,
#twc-root .twc-accordion summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--twc-navy); list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 0; }
#twc-root .twc-inline-disclaimer summary::-webkit-details-marker,
#twc-root .twc-accordion summary::-webkit-details-marker { display: none; }
#twc-root .twc-inline-disclaimer summary::after,
#twc-root .twc-accordion summary::after { content: '\25BE'; font-size: 11px; color: var(--twc-muted); transition: transform .15s ease; }
#twc-root .twc-inline-disclaimer[open] summary::after,
#twc-root .twc-accordion[open] summary::after { transform: rotate(180deg); }
#twc-root .twc-inline-disclaimer p { font-size: 12px; color: var(--twc-muted); line-height: 1.6; margin: 8px 0 0; }
#twc-root .twc-accordion { background: var(--twc-card-bg); border: 1px solid var(--twc-border); border-radius: var(--twc-radius); padding: 18px 22px; margin-top: 16px; }
#twc-root .twc-accordion-body { font-size: 13.5px; color: var(--twc-ink-soft); line-height: 1.65; margin-top: 12px; }
#twc-root .twc-accordion-body p { margin: 0 0 10px; }
#twc-root .twc-accordion-body strong { color: var(--twc-ink); }

/* ===== Static calculator guide / FAQ section (crawlable without JS; matches the JSON-LD FAQPage) ===== */
#twc-root .twc-info-section { margin-top: 22px; }
#twc-root .twc-info-section .twc-accordion:first-of-type { margin-top: 18px; }
#twc-root .twc-guide-faq-head { font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--twc-blue); margin: 16px 0 10px; }
#twc-root .twc-guide-qa strong { color: var(--twc-ink); display: block; margin-bottom: 2px; }

/* ===== Amortization Overview (chart + table + download/email/share) ===== */
#twc-root .twc-amort-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
#twc-root .twc-amort-head h3 { font-size: 14px; letter-spacing: .4px; text-transform: uppercase; color: var(--twc-blue); }
#twc-root .twc-amort-table-wrap { overflow-x: auto; margin-top: 14px; border: 1px solid var(--twc-border); border-radius: 10px; }
#twc-root .twc-amort-table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
#twc-root .twc-amort-table th { background: var(--twc-navy); color: #fff; text-align: right; padding: 9px 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; font-weight: 700; }
#twc-root .twc-amort-table th:first-child, #twc-root .twc-amort-table td:first-child { text-align: left; }
#twc-root .twc-amort-table td { padding: 7px 12px; text-align: right; border-bottom: 1px solid var(--twc-border); color: var(--twc-ink-soft); }
#twc-root .twc-amort-table tr:nth-child(even) td { background: #f7f9fc; }
#twc-root .twc-amort-table tr:last-child td { border-bottom: none; }
#twc-root .twc-amort-showmore { display: block; margin-left: auto; margin-right: auto; }
#twc-root .twc-amort-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
#twc-root .twc-amort-actions .twc-btn { padding: 10px 16px; font-size: 13px; }
#twc-root .twc-amort-copied { font-size: 12px; color: var(--twc-blue); font-weight: 700; opacity: 0; transition: opacity .2s ease; }
#twc-root .twc-amort-copied.is-visible { opacity: 1; }

/* ---- TUME additions: single-calculator mode + email capture ---- */
#twc-root.twc-single .twc-tabs, #twc-root.twc-single .twc-tabs-select-wrap { display: none !important; }
#twc-root .twc-emailcap { margin: 12px 0 0; }
#twc-root .twc-emailcap[hidden] { display: none; }
#twc-root .twc-emailcap-row { display: flex; flex-wrap: wrap; gap: 8px; }
#twc-root .twc-emailcap-row input { flex: 1 1 180px; min-width: 0; border: 1px solid var(--twc-border, #dfe5ec); border-radius: 8px; padding: 10px 12px; font: inherit; }
#twc-root .twc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
#twc-root .twc-emailcap-note { font-size: 12.5px; color: #6b7c91; margin: 8px 0 0; }
#twc-root .twc-emailcap-status { font-size: 13px; margin: 6px 0 0; min-height: 1.2em; }
#twc-root .twc-emailcap-status.ok { color: #0d7a4f; }
#twc-root .twc-emailcap-status.err { color: #c0392b; }