:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #183d48;
  background: #eff5f4;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
.page { max-width: 1080px; margin: 0 auto; padding: 48px 28px 24px; }
.hero {
  position: relative;
  overflow: hidden;
  padding: 42px 64px 40px;
  border: 1px solid #dbe7e5;
  border-radius: 28px;
  background: radial-gradient(ellipse at top right, #e4f4dc 0, transparent 55%), #fff;
  box-shadow: 0 16px 48px #123d4810;
}
.brands { display: flex; align-items: center; gap: 30px; margin-bottom: 36px; }
.magic-logo { width: 100px; height: 120px; object-fit: contain; }
.comgas-logo { width: 180px; height: auto; }
.brand-divider { height: 54px; width: 1px; background: #ccdeda; }
.eyebrow { margin: 0 0 16px; color: #35705e; font-size: 12px; font-weight: 750; letter-spacing: .16em; }
h1 { margin: 0; color: #073f54; font-size: clamp(32px, 4.8vw, 52px); line-height: 1.13; letter-spacing: -.045em; }
h1 span { color: #33745e; }
.intro { max-width: 660px; margin: 23px 0 28px; font-size: 17px; line-height: 1.7; color: #4e6269; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 18px; min-height: 54px; padding: 14px 23px; border: 1px solid transparent; border-radius: 10px; font-size: 16px; font-weight: 700; text-decoration: none; transition: background-color .15s; }
.button-primary { background: #006480; color: #fff; }
.button-primary:hover { background: #004a60; }
.button-secondary { border-color: #b5ccc7; color: #184e43; background: #fff; }
.button-secondary:hover { background: #edf5f1; }
a:focus-visible { outline: 3px solid #8b5200; outline-offset: 5px; }
.pdf-label { font-size: 10px; letter-spacing: .06em; padding: 3px 5px; border: 1px solid #b5ccc7; border-radius: 4px; }
.helper { margin: 14px 0 0; font-size: 13px; color: #596f75; }
.tower-reminder { margin: 18px 0 0; font-size: 15px; line-height: 1.9; }
.tower-reminder strong { padding: 2px 5px; border-radius: 4px; white-space: nowrap; }
.tower-dream { color: #3434b5; background: #ededff; }
.tower-imagine { color: #b52e24; background: #fff0ed; }
.tower-fantasy { color: #326b20; background: #edf6e7; }
.notice { margin-top: 24px; padding: 30px 36px; border: 1px solid #ebce85; border-left: 5px solid #d89d24; border-radius: 16px; background: #fff8e8; color: #513f20; }
.notice-heading { display: flex; gap: 12px; align-items: center; }
.notice-icon { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #f5dfaa; color: #704900; font-weight: 800; }
h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.notice ul { margin: 20px 0 0; padding-left: 23px; }
.notice li { padding-left: 5px; font-size: 17px; line-height: 1.7; }
.notice li + li { margin-top: 14px; }
.units-highlight { display: inline-block; padding: 3px 10px; margin-block: 3px; border-radius: 6px; background: #f5cf65; color: #513500; font-size: 1.2em; font-weight: 850; }
.critical { color: #8c341d; }
.guide { margin-top: 40px; }
.guide-intro { margin: 12px 0 24px; color: #4e6269; line-height: 1.7; }
.guide-pages { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 24px; }
.guide-pages figure { margin: 0; background: #fff; border: 1px solid #dbe7e5; border-radius: 14px; overflow: hidden; }
.guide-pages figcaption { padding: 16px 20px; font-size: 15px; line-height: 1.6; }
.guide-pages figcaption span { display: block; color: #33745e; font-weight: 750; font-size: 12px; letter-spacing: .06em; margin-bottom: 4px; }
.guide-pages a { display: block; cursor: zoom-in; }
.guide-pages a:focus-visible { outline-offset: -4px; }
.guide-pages img { display: block; width: 100%; height: auto; }
footer { padding: 26px 0 4px; text-align: center; font-size: 12px; line-height: 1.8; color: #607670; }
footer span { padding: 0 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .page { padding: 16px 16px 20px; }
  .hero { padding: 26px 24px; border-radius: 20px; }
  .brands { gap: 22px; margin-bottom: 30px; }
  .magic-logo { width: 80px; height: 96px; }
  .comgas-logo { width: 136px; }
  .intro { font-size: 16px; }
  .actions { flex-direction: column; }
  .button { width: 100%; padding-inline: 12px; }
  .notice { padding: 24px 20px; }
  h2 { font-size: 21px; }
  .notice li { font-size: 16px; }
}
@media (max-width: 360px) {
  .brands { gap: 14px; }
  .comgas-logo { width: 115px; }
  .hero { padding-inline: 20px; }
}