:root {
  color-scheme: light;
  --paper: #f4f7f5;
  --ink: #173236;
  --muted: #4a6566;
  --teal: #0b4f4d;
  --line: #c8d8d4;
  --amber: #f4ba60;
  font: 1rem/1.58 system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
a { color: var(--teal); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid #ad6311; outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1rem; }
.wrap { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.skip { position: absolute; top: .5rem; left: .5rem; z-index: 2; padding: .65rem; background: white; transform: translateY(-150%); }
.skip:focus { transform: none; }

.top, .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1rem;
}
.top nav, .footer nav { display: flex; flex-wrap: wrap; gap: .6rem 1rem; font-weight: 650; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 790; line-height: 1.13; }
.brand-mark {
  display: inline-block;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: repeating-radial-gradient(circle at center, #ffc66f 0 2px, transparent 3px 6px), #123f42;
  background-size: 27px 27px, auto;
  background-repeat: no-repeat;
  background-position: center;
}
.button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: .55rem .95rem;
  color: white;
  background: var(--teal);
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-weight: 740;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { filter: brightness(.9); }
.hero { background: #103438; color: #f5f8f4; }
.hero-inner { display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; gap: clamp(1.6rem, 5vw, 4.5rem); padding-block: clamp(2rem, 5vw, 4.2rem); }
.hero img { border-radius: .8rem; }
.hero .lead { color: #deebe7; }
.hero .button { background: var(--amber); color: #262009; }
h1, h2, h3 { line-height: 1.08; margin: 0 0 .65rem; }
h1 { font-size: clamp(2.55rem, 7vw, 5.6rem); letter-spacing: -.06em; overflow-wrap: anywhere; }
h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -.035em; }
h3 { font-size: 1.45rem; letter-spacing: -.02em; }
h4 { margin: 0 0 .35rem; font-size: 1.02rem; }
.lead { font-size: clamp(1.13rem, 2.6vw, 1.45rem); color: var(--muted); }
.section { padding-block: 2.3rem; border-bottom: 1px solid var(--line); scroll-margin-top: 1rem; }
.table-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; min-width: 38rem; border-collapse: collapse; background: white; }
td, th { padding: .65rem .85rem; text-align: left; vertical-align: top; }
thead { background: #d8e8e4; }
tbody tr:nth-child(even) { background: #f0f7f4; }
tbody tr + tr { border-top: 1px solid var(--line); }

.model-group { margin-top: 1.45rem; }
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.model-grid article {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .65rem;
}
.model-grid img { width: 74px; aspect-ratio: 1; object-fit: contain; }
.model-grid p { font-size: .86rem; margin: 0; color: var(--muted); }
.guide-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.guide-list li { border-top: 2px solid #73a9a1; background: #e7f1ee; padding: .9rem; }
.guide-list a { font-weight: 750; }
.guide-list p { margin: .3rem 0 0; }
.article { min-height: 65vh; padding-block: 1.55rem 3.2rem; }
.article h1 { font-size: clamp(2rem, 5vw, 4rem); }
.crumb { margin-bottom: 1.25rem; }
.detail { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.25rem, 4vw, 3rem); align-items: start; }
.product-photo { border: 1px solid var(--line); border-radius: 10px; background: white; }
.product-photo img { margin-inline: auto; max-height: 510px; object-fit: contain; }
.detail dl { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(0, 2fr); gap: .35rem .65rem; }
dt { font-weight: 750; }
dd { margin: 0; overflow-wrap: anywhere; }
.prose { max-width: 760px; margin-top: 1.65rem; }
.prose section { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1rem; }
.prose h2 { font-size: 1.55rem; }
.footer { border-top: 1px solid var(--line); align-items: flex-start; }
.footer p { color: var(--muted); font-size: .86rem; margin: .45rem 0 0; }

@media (max-width: 760px) {
  .wrap { width: calc(100% - 2rem); }
  .hero-inner, .detail { grid-template-columns: 1fr; }
  .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer { flex-direction: column; }
}
@media (max-width: 530px) {
  .model-grid, .guide-list { grid-template-columns: 1fr; }
}