.design-page{background:#f2f1ee;--page-width:1180px}
[hidden]{display:none!important}
.comparison-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px max(24px,calc((100vw - var(--page-width))/2));border-bottom:1px solid #dad7d0;background:white}
.comparison-brand{font-size:15px;font-weight:750;letter-spacing:.08em}.back-link{font-size:14px;text-decoration:underline;text-underline-offset:4px}
.comparison-main{max-width:var(--page-width);margin:auto;padding:32px 24px 0}
.comparison-title{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.comparison-title h1{font-family:MockSans,sans-serif;font-size:30px;margin-top:4px;line-height:1.5}.comparison-title>p{font-size:14px;color:#64605a;margin-bottom:4px}
.comparison-controls{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start;margin-bottom:24px}
.purpose-switch{display:flex;flex-direction:column;background:#e4e1da;padding:4px;gap:4px;border-radius:8px}.purpose-switch button{display:flex;gap:12px;align-items:center;justify-content:center;border:1px solid transparent;background:transparent;color:#66615a;padding:13px 10px;border-radius:5px;font-size:20px;font-weight:750}.purpose-switch button span{font-size:14px;font-weight:500}.purpose-switch button[aria-pressed=true]{background:#242320;color:white;box-shadow:0 2px 5px #0001}
.variant-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.variant-options button{padding:0;overflow:hidden;border:2px solid #d8d4cc;background:white;border-radius:6px;text-align:left;color:#333;transition:border-color .15s,box-shadow .15s}.variant-options button[aria-pressed=true]{border-color:#9b763b;box-shadow:0 0 0 1px #9b763b}.variant-options button:hover{border-color:#9b763b}.variant-options button>img{width:100%;height:90px;object-fit:cover;object-position:top}.variant-options button>span{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:48px}.variant-options b{font-size:19px;color:#947136;flex:none}.variant-label{font-size:14px;font-weight:600;line-height:1.4}
.selected-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;background:white;border:1px solid #dcd9d2;border-bottom:0;border-radius:6px 6px 0 0}.selected-heading h2{font-family:MockSans,sans-serif;font-size:20px;line-height:1.6}.selected-heading p{font-size:14px;color:#69645e;margin-top:5px}.original-link{font-size:14px;white-space:nowrap;border-bottom:1px solid #a28c62;padding:6px 0;flex:none}.design-image-link{display:block;background:white;border:1px solid #dcd9d2;cursor:zoom-in}.design-image-link img{width:100%;height:auto;display:block}.comparison-footer{padding:25px 0 32px}.comparison-footer p{font-size:13px;color:#6c665e;line-height:1.9}.comparison-footer nav{display:flex;gap:12px 24px;flex-wrap:wrap;margin-top:20px}.comparison-footer nav a{font-size:14px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.comparison-header{padding:15px 18px;align-items:start}.comparison-brand{font-size:13px;max-width:160px}.back-link{font-size:12px;white-space:nowrap}.comparison-main{padding:24px 14px 0}.comparison-title{display:block;margin-bottom:18px}.comparison-title h1{font-size:24px}.comparison-title>p{font-size:14px;margin-top:9px}.comparison-controls{display:block;margin-bottom:18px}.purpose-switch{flex-direction:row;margin-bottom:14px}.purpose-switch button{flex:1;font-size:18px;gap:8px;padding:10px 6px}.purpose-switch button span{font-size:13px}.variant-options{gap:8px}.variant-options button>img{height:72px}.variant-options button>span{padding:8px;align-items:start;gap:5px;min-height:60px}.variant-options b{font-size:16px}.variant-label{font-size:13px;line-height:1.5}.selected-heading{display:block;padding:16px}.selected-heading h2{font-size:18px}.selected-heading p{font-size:14px}.original-link{display:inline-block;margin-top:10px}.comparison-footer nav{gap:14px 20px}.comparison-footer{padding:20px 3px 28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.variant-options button{transition:none}}
.variant-art{height:90px;display:flex;align-items:center;justify-content:center;padding:15px;font:600 15px Arial,sans-serif;text-align:center;letter-spacing:.07em}.art-a{background:#f4f1e9;color:#715731;font-family:MockMincho,serif}.art-b{background:#e0f3fb;color:#146286;font-family:MockSans,sans-serif}.art-c{background:#101929;color:#a5baff}.lp-live-preview{border:1px solid #dcd9d2;background:#e5e6e8}.viewport-switch{display:flex;align-items:center;gap:8px;padding:12px 18px;background:#f7f7f8;border-bottom:1px solid #d8dade;font-size:13px}.viewport-switch>span{margin-right:auto;color:#68717b}.viewport-switch button{border:1px solid transparent;border-radius:4px;padding:6px 12px;background:transparent;color:#59636e;font:inherit}.viewport-switch button[aria-pressed=true]{background:#253241;color:#fff}.lp-frame-stage{display:flex;justify-content:center;align-items:start;overflow:hidden}.lp-frame-stage iframe{border:0;display:block;width:100%;height:1000px;background:#fff}.mobile-view .lp-frame-stage{padding:22px 0}.mobile-view iframe{max-width:390px;box-shadow:0 0 0 1px #cad0d7,0 16px 50px #0002}.variant-options .hp-thumb{height:90px;object-fit:cover;object-position:top}.design-page .comparison-main{padding-bottom:0}@media(max-width:760px){.variant-art{height:72px;font-size:11px;padding:10px;letter-spacing:0}.variant-options .hp-thumb{height:72px}.viewport-switch{display:none}.mobile-view .lp-frame-stage{padding:0}.mobile-view iframe{max-width:none;box-shadow:none}.comparison-main{padding-inline:10px}.selected-heading{padding:16px}.lp-live-preview{margin-inline:-10px;border-inline:0}.selected-heading{border-radius:0}.comparison-footer{padding-inline:4px}.variant-label{font-size:12px}}