@import url("tokens.css");
main { max-width:560px; margin:0 auto; padding:0 20px 48px; }
.back { display:block; line-height:44px; font-size:14px; font-weight:700; }
.top { margin:0 -20px; padding:24px 20px; color:#fff; background:var(--black); }
.top .tag { display:inline-block; font-size:13px; font-weight:800; padding:2px 8px; background:var(--mint-soft); color:var(--teal); }
h1 { font-size:27px; line-height:36px; letter-spacing:-.6px; margin:10px 0 6px; font-weight:800; color:#fff; }
.lead { font-size:16px; line-height:25px; color:#d4d4d4; margin:0; }
.top .cta { display:block; text-align:center; background:var(--yellow); color:#111; font-size:17px; font-weight:800; padding:14px; margin-top:16px; }
.compare { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.compare div { border:1px solid #4a4a4a; padding:11px 12px; font-size:14px; line-height:21px; color:#d4d4d4; }
.compare b { display:block; font-size:15px; color:#bdbdbd; margin-bottom:4px; }
.compare ul { margin:0; padding:0; list-style:none; }
.compare li + li { margin-top:3px; }
.compare .now { border:2px solid var(--yellow); color:#fff; font-weight:700; }
.compare .now b { color:var(--yellow); }
.fine { font-size:14px; line-height:22px; color:#bdbdbd; margin:12px 0 0; }
section { margin-top:12px; background:#fff; border:1px solid #d8d4c8; padding:17px 18px; }
h2 { font-size:19px; line-height:26px; margin:0 0 6px; font-weight:800; }
h2 b { display:inline-block; min-width:26px; text-align:center; background:var(--mint); margin-right:8px; }
p { font-size:15px; line-height:24px; margin:0 0 10px; }
section p:last-child { margin-bottom:0; }
section a { color:var(--teal); text-decoration:underline; }
section img { display:inline-block; vertical-align:top; width:124px; height:auto; margin:4px 8px 4px 0; border:1px solid #cfcbbf; cursor:zoom-in; }
.note { color:var(--sub); padding:13px 2px; font-size:14px; line-height:22px; margin-top:6px; }
section.plain { background:none; border:0; padding:6px 2px; }
@media (min-width:600px) {
  main { max-width:760px; padding:0 32px 64px; }
  .top { margin:0; padding:32px; }
  h1 { font-size:34px; line-height:44px; }
  section { padding:22px 24px; }
  section img { width:160px; }
  .compare div { font-size:16px; line-height:25px; padding:14px 16px; }
}
@media (min-width:960px) {
  main { max-width:1100px; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
  .back, .top, .note, section.plain { grid-column:1 / -1; }
  section { margin-top:0; }
  .top.split { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:44px; }
  h1 { font-size:40px; line-height:52px; }
  .lead { font-size:18px; line-height:28px; }
}