:root {
  --bg: #eef3fb;
  --bg-deep: #0f1728;
  --panel: rgba(255,255,255,0.86);
  --panel-solid: #ffffff;
  --panel-dark: rgba(14, 24, 44, 0.88);
  --border: rgba(124, 146, 191, 0.18);
  --text: #132033;
  --muted: #5f6f86;
  --primary: #3868ff;
  --primary-dark: #2447cf;
  --secondary: #8d63ff;
  --teal: #0eb4a4;
  --sun: #ffb44c;
  --rose: #ff6d96;
  --shadow: 0 20px 55px rgba(13, 25, 49, 0.08);
  --shadow-soft: 0 10px 28px rgba(13, 25, 49, 0.05);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(56,104,255,0.10), transparent 25%),
    radial-gradient(circle at top right, rgba(14,180,164,0.10), transparent 20%),
    linear-gradient(180deg, #f9fbff 0%, var(--bg) 100%);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.site-shell { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(20px);
  background: rgba(249, 251, 255, 0.78);
  border-bottom: 1px solid rgba(124,146,191,0.14);
}
.header-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: -0.03em; }
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  box-shadow: 0 12px 26px rgba(56,104,255,0.22);
}
.brand-text { font-size: 19px; }
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.site-nav a {
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  transition: 0.18s ease;
}
.site-nav a:hover,
.site-nav a.active { color: var(--text); background: rgba(56,104,255,0.10); }

.page { padding: 34px 0 64px; }
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  padding: 36px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(244,247,255,0.88) 100%);
  box-shadow: var(--shadow);
}
.hero::before {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(141,99,255,0.16) 0%, rgba(141,99,255,0.01) 70%);
}
.hero::after {
  content: "";
  position: absolute;
  left: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(14,180,164,0.14) 0%, rgba(14,180,164,0.01) 70%);
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(56,104,255,0.10);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.hero h1 { margin: 18px 0 14px; font-size: clamp(34px, 5vw, 58px); line-height: 0.98; letter-spacing: -0.05em; }
.hero p { margin: 0 0 22px; font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 66ch; }
.hero-actions, .stack-actions, .button-row { display: flex; gap: 12px; flex-wrap: wrap; }
.button, .ghost-button, .link-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.18s ease;
}
.button {
  color: white;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  box-shadow: 0 14px 30px rgba(56,104,255,0.20);
}
.button:hover, .ghost-button:hover { transform: translateY(-1px); }
.ghost-button, .link-pill {
  color: var(--text);
  border-color: rgba(19,32,51,0.10);
  background: rgba(255,255,255,0.78);
}
.link-pill { min-height: 40px; font-size: 13px; }
.hero-side { display: grid; gap: 16px; }
.hero-card, .card, .info-panel, .calculator-panel, .blog-card, .detail-card, .mini-card, .quote-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.hero-card, .card, .blog-card, .detail-card, .mini-card, .quote-card { padding: 22px; }
.hero-card h3, .card h3, .detail-card h3, .blog-card h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.02em; }
.hero-card p, .card p, .info-panel p, .tiny-note, .blog-card p, .detail-card p { margin: 0; line-height: 1.65; color: var(--muted); }
.card-grid, .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.card .icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 22px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(56,104,255,0.14) 0%, rgba(141,99,255,0.14) 100%);
}
.two-col, .content-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 22px; margin-top: 28px; }
.info-panel { padding: 24px; }
.info-panel h2, .section-head h2 { margin: 0 0 8px; font-size: 30px; letter-spacing: -0.03em; }
.section-head { margin: 38px 0 18px; }
.section-head p { margin: 0; max-width: 70ch; color: var(--muted); line-height: 1.7; }
.stack, .highlight-list, .article-list, .faq-list, .blog-list { display: grid; gap: 14px; }
.metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(124,146,191,0.14);
}
.metric:last-child { border-bottom: 0; }
.metric span:first-child { color: var(--muted); }
.metric strong { font-size: 21px; letter-spacing: -0.03em; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(14,180,164,0.10);
  color: #0f766d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.highlight {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(124,146,191,0.16);
}
.highlight strong, .blog-card h3 { display: block; margin-bottom: 6px; }
.blog-card .meta, .mini-label, .kicker {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.kicker { margin-bottom: 12px; }
.ribbon {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,180,76,0.16);
  color: #b45309;
  font-size: 12px;
  font-weight: 900;
}
.callout, .formula-box, .micro-tool, .feature-strip {
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(56,104,255,0.12);
  background: linear-gradient(135deg, rgba(56,104,255,0.08) 0%, rgba(141,99,255,0.08) 100%);
}
.callout strong, .warning-card strong { display: block; margin-bottom: 4px; }
.warning-card {
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,180,76,0.24);
  background: rgba(255,180,76,0.12);
}
.site-table, .calc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.site-table th, .site-table td, .calc-table th, .calc-table td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(124,146,191,0.14);
  vertical-align: top;
}
.site-table th, .calc-table th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.quote-card blockquote { margin: 0; font-size: 22px; line-height: 1.5; letter-spacing: -0.02em; }
.quote-card footer { margin-top: 14px; color: var(--muted); font-size: 14px; }
.site-footer { margin-top: 46px; padding: 24px 0 46px; color: var(--muted); font-size: 14px; }
.footer-panel {
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.74);
  box-shadow: var(--shadow-soft);
}
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.jump-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.jump-links a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.76); border: 1px solid rgba(124,146,191,0.18); font-size: 13px; font-weight: 800;
}
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }
.detail-card ul, .detail-card ol, .long-copy ul, .long-copy ol { margin: 12px 0 0 20px; padding: 0; color: var(--muted); line-height: 1.7; }
.detail-card li, .long-copy li { margin-bottom: 8px; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.mini-card strong { display: block; font-size: 20px; letter-spacing: -0.03em; margin-bottom: 6px; }
.long-copy { display: grid; gap: 16px; color: var(--muted); line-height: 1.75; }
.feature-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(242,246,255,0.86));
  border: 1px solid rgba(124,146,191,0.16);
  margin-top: 28px;
}
.feature-chip {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(124,146,191,0.14);
}
.feature-chip strong { display: block; margin-bottom: 6px; font-size: 20px; letter-spacing: -0.03em; }
.article-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  padding: 30px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(17,26,48,0.96) 0%, rgba(42,57,92,0.94) 100%);
  box-shadow: var(--shadow);
  color: white;
}
.article-hero p, .article-hero .tiny-note { color: rgba(255,255,255,0.78); }
.article-content {
  max-width: 900px;
  margin: 28px auto 0;
  display: grid;
  gap: 22px;
}
.article-section {
  padding: 26px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.86);
  box-shadow: var(--shadow-soft);
}
.article-section h2 { margin: 0 0 10px; font-size: 28px; letter-spacing: -0.03em; }
.article-section p, .article-section li { color: var(--muted); line-height: 1.75; }
.article-section ul, .article-section ol { margin: 10px 0 0 20px; }
.article-index {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.accordion-group { display: grid; gap: 12px; margin-top: 20px; }
.accordion-item {
  border: 1px solid rgba(124,146,191,0.16);
  border-radius: 18px;
  background: rgba(255,255,255,0.82);
  overflow: hidden;
}
.accordion-trigger {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
}
.accordion-trigger .icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(56,104,255,0.10);
  color: var(--primary-dark);
  font-size: 18px;
  flex: 0 0 auto;
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}
.accordion-content-inner {
  padding: 0 20px 20px;
  color: var(--muted);
  line-height: 1.75;
}
.accordion-item.open .accordion-trigger .icon { transform: rotate(45deg); }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.micro-tool h3 { margin: 0 0 6px; font-size: 20px; }
.tool-form { display: grid; gap: 12px; margin-top: 14px; }
.tool-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.tool-form input, .tool-form select {
  width: 100%;
  border: 1px solid rgba(124,146,191,0.22);
  border-radius: 14px;
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: rgba(255,255,255,0.9);
}
.tool-output {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(124,146,191,0.16);
  display: grid;
  gap: 8px;
}
.tool-output strong { font-size: 20px; letter-spacing: -0.03em; }
.tool-output .muted { color: var(--muted); }
.inline-metric {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(56,104,255,0.08);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
}
.article-thumb {
  display: grid;
  place-items: end start;
  min-height: 190px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(56,104,255,0.18), rgba(14,180,164,0.16));
  margin-bottom: 14px;
}
.article-thumb.alt { background: linear-gradient(135deg, rgba(141,99,255,0.18), rgba(255,109,150,0.16)); }
.article-thumb.warm { background: linear-gradient(135deg, rgba(255,180,76,0.18), rgba(255,109,150,0.15)); }
.article-thumb strong { font-size: 18px; letter-spacing: -0.03em; }
@media (max-width: 1080px) {
  .hero, .two-col, .content-grid, .blog-grid, .card-grid, .feature-strip, .detail-grid, .mini-grid, .tool-grid, .article-hero { grid-template-columns: 1fr; }
  .site-nav { display: none; }
}
@media (max-width: 720px) {
  .page { padding-top: 22px; }
  .hero, .info-panel, .card, .blog-card, .calculator-panel, .detail-card, .article-section { padding: 22px; }
  .footer-grid { grid-template-columns: 1fr; }
}


.offer-stack { display:grid; gap:16px; margin-top:24px; }
.offer-card {
  display:grid;
  grid-template-columns: 220px 1fr auto;
  gap:18px;
  align-items:center;
  padding: 20px 22px;
  border-radius: 22px;
  border: 1px solid rgba(124,146,191,0.16);
  background: rgba(255,255,255,0.9);
  box-shadow: var(--shadow-soft);
}
.offer-brand { display:grid; gap:8px; }
.offer-brand-badge {
  width: 54px; height: 54px; border-radius: 16px; display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(56,104,255,0.14), rgba(14,180,164,0.16));
  font-size: 20px; font-weight: 900; color: var(--primary-dark);
}
.offer-brand strong { font-size: 24px; letter-spacing: -0.03em; }
.offer-brand span { color: var(--muted); font-size: 13px; }
.offer-meta { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; }
.offer-stat {
  padding: 12px 14px; border-radius: 16px; background: rgba(243,247,255,0.92);
  border: 1px solid rgba(124,146,191,0.14);
}
.offer-stat .label { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: 0.10em; text-transform: uppercase; }
.offer-stat .value { margin-top: 6px; font-size: 28px; font-weight: 900; letter-spacing: -0.04em; }
.offer-stat .sub { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.offer-cta { display:grid; gap:10px; justify-items:end; min-width: 180px; }
.offer-cta .tiny-note { text-align:right; max-width: 180px; }
.disclosure-box {
  margin-top: 24px; padding: 18px 20px; border-radius: 20px;
  border: 1px solid rgba(255,180,76,0.24);
  background: rgba(255,248,234,0.88);
}
.disclosure-box strong { display:block; margin-bottom:6px; }
.offer-checklist { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
.offer-checklist .mini-card p { margin:0; }
.offer-preview-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-top:22px; }
.offer-preview {
  border:1px solid rgba(124,146,191,0.16); border-radius:20px; background: rgba(255,255,255,0.86);
  padding:18px; box-shadow: var(--shadow-soft); display:grid; gap:12px;
}
.offer-preview .row { display:flex; justify-content:space-between; gap:12px; font-size:14px; color: var(--muted); }
.offer-preview .row strong { color: var(--text); font-size: 17px; }
@media (max-width: 1080px) {
  .offer-card { grid-template-columns: 1fr; }
  .offer-meta, .offer-checklist, .offer-preview-grid { grid-template-columns: 1fr; }
  .offer-cta { justify-items:start; }
  .offer-cta .tiny-note { text-align:left; }
}


.widget-grid { display:grid; grid-template-columns: minmax(320px, 360px) minmax(0, 1fr); gap: 22px; margin-top: 0; }
.widget-panel {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.widget-frame-wrap {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(124,146,191,0.16);
  background: rgba(255,255,255,0.96);
  min-height: 420px;
}
.rate-widget-frame {
  width: 100%;
  min-height: 420px;
  border: 0;
  display: block;
  background: white;
}
@media (max-width: 1080px) {
  .widget-grid { grid-template-columns: 1fr; }
}


.tools-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:24px; }
.tool-card { padding:22px; border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-soft); }
.tool-card h3 { margin: 0 0 8px; font-size: 22px; letter-spacing:-0.03em; }
.tool-card p { margin:0 0 14px; color: var(--muted); line-height:1.7; }
.tool-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.tool-meta span { display:inline-flex; padding:6px 10px; border-radius:999px; background: rgba(56,104,255,0.10); color: var(--primary-dark); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; }
.jump-nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.jump-nav a { display:inline-flex; min-height:38px; padding:0 14px; align-items:center; border-radius:999px; background:#fff; border:1px solid rgba(19,32,51,0.10); font-size:13px; font-weight:800; color:var(--muted); }
.jump-nav a:hover { color: var(--text); }
.article-layout { display:grid; grid-template-columns: minmax(320px, 420px) minmax(480px, 1fr); gap:22px; margin-top:28px; align-items:start; }
.tool-panel { padding:24px; border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-soft); position: sticky; top: 96px; }
.tool-panel h2 { margin:0 0 8px; font-size:28px; letter-spacing:-0.03em; }
.tool-panel p { margin:0 0 18px; color:var(--muted); line-height:1.65; }
.calc-form-grid { display:grid; gap:14px; }
.calc-field label { display:block; margin-bottom:6px; font-size:13px; font-weight:800; color:var(--text); text-transform:uppercase; letter-spacing:0.08em; }
.calc-field input, .calc-field select, .calc-field textarea { width:100%; min-height:46px; border:1px solid rgba(138,153,185,0.24); border-radius:14px; padding:12px 14px; font-size:16px; color:var(--text); background:#fff; }
.calc-field textarea { min-height: 110px; resize: vertical; }
.calc-inline-2, .calc-inline-3 { display:grid; gap:14px; }
.calc-inline-2 { grid-template-columns:1fr 1fr; }
.calc-inline-3 { grid-template-columns:repeat(3,1fr); }
.result-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
.result-card { padding:16px; border-radius:18px; background: rgba(255,255,255,0.86); border:1px solid rgba(124,146,191,0.16); }
.result-card .label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px; }
.result-card .value { font-size:22px; font-weight:900; letter-spacing:-0.03em; }
.result-note { margin-top:14px; color:var(--muted); font-size:14px; line-height:1.65; }
.content-panel { padding:24px; border:1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-soft); }
.content-panel + .content-panel { margin-top:20px; }
.content-panel h2 { margin:0 0 10px; font-size:30px; letter-spacing:-0.03em; }
.content-panel h3 { margin:18px 0 8px; font-size:22px; letter-spacing:-0.02em; }
.content-panel p { margin:0 0 14px; color:var(--muted); line-height:1.8; }
.content-panel ul, .content-panel ol { margin: 0 0 16px 20px; color: var(--muted); line-height:1.8; }
.content-panel li + li { margin-top:6px; }
.side-stats { display:grid; gap:12px; margin-top:18px; }
.side-stat { padding:14px; border:1px solid rgba(124,146,191,0.16); border-radius:18px; background: rgba(255,255,255,0.78); }
.side-stat strong { display:block; font-size:20px; letter-spacing:-0.03em; margin-bottom:4px; }
.check-grid { display:grid; gap:12px; margin-top:18px; }
.check-item { padding:16px 18px; border-radius:18px; background: rgba(255,255,255,0.80); border:1px solid rgba(124,146,191,0.16); }
.check-item strong { display:block; margin-bottom:6px; }
.link-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:14px; margin-top:18px; }
.faq-wrap { margin-top:18px; }
.accordion-item { border:1px solid rgba(124,146,191,0.16); border-radius:18px; background: rgba(255,255,255,0.80); overflow:hidden; }
.accordion-item + .accordion-item { margin-top:12px; }
.accordion-trigger { width:100%; border:0; background:transparent; padding:18px 20px; display:flex; justify-content:space-between; align-items:center; text-align:left; font-size:16px; font-weight:800; cursor:pointer; color:var(--text); }
.accordion-content { max-height:0; overflow:hidden; transition:max-height .2s ease; }
.accordion-inner { padding:0 20px 18px; color:var(--muted); line-height:1.8; }
.table-wrap { overflow:auto; }
.development-banner { margin-top:22px; padding:16px 18px; border-radius:18px; border:1px solid rgba(255,180,76,0.22); background: rgba(255,180,76,0.12); color:#8a4b06; }
.module-shell { margin-top:18px; padding:20px; border-radius:22px; border:1px dashed rgba(124,146,191,0.26); background: rgba(255,255,255,0.72); }
.module-shell h3 { margin:0 0 6px; }
.module-shell p { margin:0 0 12px; }
.compare-preview { display:grid; gap:12px; }
.compare-row { display:grid; grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr auto; gap:12px; align-items:center; padding:14px; border-radius:16px; background: rgba(255,255,255,0.82); border:1px solid rgba(124,146,191,0.14); }
.compare-row .tiny { color:var(--muted); font-size:12px; }
.timeline { display:grid; gap:14px; margin-top:18px; }
.timeline-step { display:grid; grid-template-columns: 58px 1fr; gap:16px; align-items:start; }
.timeline-step .step-num { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; font-weight:900; background: linear-gradient(135deg, rgba(56,104,255,0.14) 0%, rgba(141,99,255,0.14) 100%); }
.timeline-step h3 { margin:0 0 6px; }
.timeline-step p { margin:0; }
.kpi-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px; }
.kpi { padding:16px; border-radius:18px; border:1px solid rgba(124,146,191,0.16); background: rgba(255,255,255,0.82); }
.kpi strong { display:block; font-size:24px; letter-spacing:-0.03em; margin-bottom:4px; }
.doc-list { display:grid; gap:12px; margin-top:18px; }
.doc-row { padding:16px 18px; border-radius:18px; border:1px solid rgba(124,146,191,0.16); background: rgba(255,255,255,0.80); }
.doc-row strong { display:block; margin-bottom:4px; }
.table-note { font-size:13px; color:var(--muted); margin-top:8px; }
@media (max-width: 1100px) {
  .article-layout, .tools-grid, .kpi-bar, .link-grid, .calc-inline-3, .calc-inline-2 { grid-template-columns:1fr; }
  .tool-panel { position:static; }
  .compare-row { grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px) {
  .hero, .two-col, .content-grid, .card-grid, .blog-grid, .tools-grid, .result-grid, .link-grid { grid-template-columns:1fr; }
}


.checklist-list{display:grid;gap:10px;padding-left:22px;margin:14px 0 18px;}
.checklist-list li{line-height:1.55;color:#203040;}