.dream-compare { --compare-green:#285f4c; --compare-mint:#eef8f1; --compare-edge:#c5dfce; margin-top:78px; scroll-margin-top:125px; }
.compare-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.compare-intro .eyebrow { font-size:.75rem; letter-spacing:.08em; color:var(--muted); }
.compare-intro h3 { font-family:var(--play-font); font-size:clamp(32px,4.3vw,52px); letter-spacing:-.045em; line-height:1.15; margin:14px 0 16px; }
.compare-intro h3 em { color:var(--compare-green); font-style:normal; }
.compare-intro p { color:var(--muted); line-height:1.75; }
.compare-cloud { position:relative; flex:0 0 175px; text-align:center; }
.compare-cloud img { width:155px; height:135px; object-fit:contain; animation:compare-float 6s ease-in-out infinite; }
.compare-cloud > span { display:inline-block; background:#fff0ce; border:1px solid #ebd59f; border-radius:10px; padding:4px 12px; color:#755627; font-weight:700; font-size:.8125rem; transform:rotate(5deg); }
.compare-cloud i { position:absolute; bottom:15px; right:0; color:#c58a27; font-size:28px; font-style:normal; }
.compare-context { color:var(--muted); font-size:.875rem; max-width:770px; margin:26px 0 20px; }
.compare-board { border:2px solid var(--compare-edge); border-radius:28px; overflow:hidden; background:var(--surface); box-shadow:0 8px 0 var(--compare-edge); }
.compare-table { border-collapse:separate; border-spacing:0; width:100%; table-layout:fixed; text-align:left; }
.compare-label-col { width:24%; }.compare-ours-col { width:42%; }.compare-other-col { width:34%; }
.compare-table th,.compare-table td { padding:23px 24px; vertical-align:middle; }
.compare-table thead th { background:var(--surface-2); font-size:.9375rem; line-height:1.45; }
.compare-table thead th:nth-child(2) { background:#d7eddf; color:#244f40; }
.compare-table thead th small { display:block; font-family:var(--font); font-size:.75rem; font-weight:500; margin-top:6px; }
.compare-brand { display:flex; gap:12px; align-items:center; font-family:var(--play-font); font-size:1.1875rem; font-weight:750; }
.compare-brand img { width:48px; height:48px; flex-shrink:0; object-fit:contain; transform:rotate(-7deg); }
.compare-table tbody th,.compare-table tbody td { border-top:1px solid var(--compare-edge); }
.compare-table tbody th { font-size:.9375rem; font-weight:700; }
.compare-feature { display:flex; align-items:center; gap:13px; line-height:1.45; }
.compare-icon { width:39px; height:39px; flex:0 0 39px; display:grid; place-items:center; border:1px solid #d4e1f2; border-radius:13px; color:#355d98; background:#eaf2ff; box-shadow:0 3px 0 #d4e1f2; transform:rotate(-5deg); transition:transform .2s ease; }
.compare-icon-1 { background:#fff0e6; color:#8a4a39; border-color:#ebd6c9; box-shadow:0 3px 0 #ebd6c9; transform:rotate(5deg); }
.compare-icon-2 { background:#f0ebff; color:#63508e; border-color:#ddd4f1; box-shadow:0 3px 0 #ddd4f1; }
.compare-table tbody tr:hover .compare-icon { transform:translateY(-3px) rotate(0); }
.compare-icon svg { width:21px; height:21px; }
.compare-ours { background:var(--compare-mint); color:var(--compare-green); }
.compare-answer { display:flex; gap:11px; align-items:flex-start; }
.compare-check { display:grid; place-items:center; width:23px; height:23px; flex:0 0 23px; margin-top:1px; border:1px solid var(--compare-edge); border-radius:50%; background:var(--surface); font-size:.8125rem; font-weight:800; }
.compare-answer strong { display:block; line-height:1.45; font-size:.9375rem; font-weight:750; }
.compare-answer p { font-size:.8125rem; line-height:1.65; margin-top:6px; }
.compare-other strong { display:block; color:var(--text); font-size:.9375rem; line-height:1.45; font-weight:650; }
.compare-other p { color:var(--muted); font-size:.8125rem; line-height:1.65; margin-top:6px; }
.compare-mobile-label { display:none; }
.compare-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:29px; }
.compare-sticker { display:inline-flex; align-items:center; gap:8px; background:#fff0ce; color:#755627; border:1px solid #ebd59f; border-radius:10px; padding:6px 13px; font-size:.875rem; font-weight:700; transform:rotate(-1deg); }
.compare-sticker > span { font-size:20px; line-height:1; }
.compare-back { font-size:.875rem; font-weight:700; padding-block:10px; text-underline-offset:5px; }
.compare-back:hover { text-decoration:underline; }
.compare-back > span { padding-left:9px; }
.compare-scope { margin-top:24px; color:var(--muted); font-size:.8125rem; line-height:1.75; max-width:930px; }
.compare-scope p + p { margin-top:8px; }
.compare-details { margin-top:15px; color:var(--muted); font-size:.8125rem; }
.compare-details summary { cursor:pointer; min-height:44px; padding:10px 0; width:fit-content; font-weight:650; }
.compare-details summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:5px; }
.compare-details > div { padding:15px 20px; border:1px solid var(--line); border-radius:16px; background:var(--surface); line-height:1.8; }
.compare-details p + p { margin-top:12px; }.compare-details a { text-decoration:underline; text-underline-offset:3px; }
.compare-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
[data-theme="dark"] .dream-compare { --compare-green:#d7f3e5; --compare-mint:#203e35; --compare-edge:#3c5a4e; }
[data-theme="dark"] .compare-table thead th:nth-child(2) { background:#2d5142; color:#e5f9ec; }
[data-theme="dark"] .compare-cloud > span,[data-theme="dark"] .compare-sticker { background:#483f2d; color:#ffe4a9; border-color:#74613e; }
[data-theme="dark"] .compare-icon { color:#c9e0ff; background:#283e5d; border-color:#435b7b; box-shadow:0 3px 0 #435b7b; }
[data-theme="dark"] .compare-icon-1 { color:#ffdccb; background:#4a3631; border-color:#715047; box-shadow:0 3px 0 #715047; }
[data-theme="dark"] .compare-icon-2 { color:#e0d6ff; background:#3c3454; border-color:#5e517c; box-shadow:0 3px 0 #5e517c; }
@keyframes compare-float { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-7px) rotate(3deg); } }
@media (min-width:701px) and (max-width:1000px) { .compare-table th,.compare-table td { padding:19px 16px; }.compare-feature { flex-direction:column; align-items:flex-start; gap:10px; }.compare-brand { gap:8px; font-size:1rem; }.compare-brand img { width:37px; height:37px; } }
@media (max-width:700px) {
  .dream-compare { margin-top:58px; }.compare-intro { align-items:flex-start; gap:8px; }.compare-intro h3 { font-size:34px; }.compare-intro p { font-size:.9375rem; }.compare-cloud { flex-basis:78px; }.compare-cloud img { width:78px; height:90px; }.compare-cloud > span { display:none; }.compare-cloud i { font-size:19px; bottom:0; }
  .compare-board { overflow:visible; border:0; background:transparent; box-shadow:none; }.compare-table,.compare-table tbody { display:block; }.compare-table colgroup { display:none; }
  .compare-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .compare-table tbody tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); overflow:hidden; margin-bottom:20px; border:2px solid var(--compare-edge); border-radius:21px; background:var(--surface); box-shadow:0 5px 0 var(--compare-edge); }
  .compare-table tbody th { grid-column:1/-1; border-top:0; background:var(--surface); padding:17px; }.compare-table td { padding:17px 15px; }.compare-feature { gap:12px; }
  .compare-mobile-label { display:block; font-size:.6875rem; font-weight:750; line-height:1.45; margin-bottom:12px; letter-spacing:.02em; }
  .compare-answer { display:block; }.compare-check { display:none; }.compare-answer strong,.compare-other strong { font-size:.875rem; }.compare-answer p,.compare-other p { font-size:.8125rem; line-height:1.65; }
  .compare-bottom { align-items:flex-start; flex-direction:column; gap:8px; margin-top:27px; }.compare-scope { margin-top:14px; }
}
[data-motion="paused"] .compare-cloud img,[data-motion="paused"] .compare-icon { animation:none; transition:none; transform:none; }
@media (prefers-reduced-motion:reduce) { .compare-cloud img,.compare-icon { animation:none; transition:none; transform:none !important; } }