:root{--ink:#123844;--sea:#17647b;--paper:#faf9f5;--muted:#5a7078;--line:#d8e4e4;--orange:#dc722f}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.85}a{color:inherit}button,input{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.skip-link{position:absolute;top:-100px;background:white;padding:10px;z-index:20}.skip-link:focus{top:10px}.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(22px,calc((100vw - 1180px)/2));background:#faf9f5ed;backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:24px;font-weight:800;letter-spacing:-1px}.brand span{display:block;font-size:10px;font-weight:500;letter-spacing:.12em}nav{display:flex;gap:24px;font-size:12px}nav a{text-decoration:none}.menu-toggle{border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:white;font-size:12px}.hero{max-width:1240px;margin:auto;padding:80px 30px 100px;display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--sea);margin:0 0 24px}h1{font-size:clamp(32px,3.7vw,52px);line-height:1.5;letter-spacing:-.045em;margin:0 0 26px}h2{font-size:clamp(28px,3.3vw,44px);line-height:1.5;letter-spacing:-.035em;margin:0 0 32px}h3{font-size:19px;line-height:1.6;margin:12px 0}p{margin:0 0 22px}.lead{font-size:16px;color:var(--muted)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;max-width:100%;padding:16px 24px;color:white;background:var(--sea);border-radius:6px;font-size:13px;font-weight:700;text-decoration:none;white-space:normal}.button:hover{background:#0e4a60}.small{font-size:11px;color:var(--muted);margin:12px 0}.hero-visual{margin:0;border:1px solid #c4d7d8;background:linear-gradient(150deg,#e2f4f3,#f9faf6);border-radius:16px;padding:25px;box-shadow:0 30px 65px #224c5914}.visual-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;color:var(--sea)}svg{width:100%;height:auto;display:block}figcaption{font-size:12px;font-weight:700}figcaption span{display:block;font-size:10px;font-weight:400;color:var(--muted)}.section{padding:85px max(30px,calc((100vw - 1120px)/2))}.tint{background:#edf3f1}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.cards article{border-top:1px solid var(--line);padding:22px 0}.cards p{font-size:14px;color:var(--muted)}.number{font-size:12px;color:var(--orange);letter-spacing:.12em}.note{font-size:12px;color:var(--muted);margin-top:25px}.workflow{list-style:none;counter-reset:step;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.workflow li{counter-increment:step;border-top:1px solid var(--line);padding:20px 0}.workflow li:before{content:"0" counter(step);display:block;font-size:12px;color:var(--orange);margin-bottom:15px}.workflow b,.workflow span{display:block}.workflow span{font-size:13px;color:var(--muted);margin-top:10px}.dark{background:#123844;color:#f1f5ef}.dark .eyebrow{color:#aadad7}.dark .lead,.dark .cards p,.dark .note{color:#c4d9dd}.dark .cards article{border-color:#44616b}.checklist{display:grid;gap:15px}.checklist label{display:flex;align-items:baseline;gap:10px;font-size:14px}.checklist input{accent-color:var(--sea);flex:none}#review-status{margin-top:24px;color:var(--sea);font-size:13px}.release{background:#e1efee;text-align:center}footer{display:flex;justify-content:space-between;padding:30px;font-size:11px;color:var(--muted)}@media(max-width:760px){html{scroll-padding-top:105px}.site-header{flex-wrap:wrap;padding:12px 22px}.brand{font-size:22px}nav{width:100%;flex-wrap:wrap;gap:12px 20px}body.js-enabled nav:not(.open){display:none}.hero{grid-template-columns:1fr;padding:50px 22px 60px;gap:28px}.hero-visual{padding:18px}.section{padding:55px 22px}.cards,.workflow{grid-template-columns:1fr;gap:8px}.lead{font-size:14px}.eyebrow{font-size:10px}.button{font-size:12px;padding:15px 18px}footer{padding:24px 22px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:root {
  --ink: #123844;
  --sea: #17647b;
  --paper: #faf9f5;
  --muted: #5a7078;
  --line: #d8e4e4;
  --orange: #dc722f;
}

.release-status {
  margin-bottom: 24px;
  padding: 14px 18px;
  border-left: 3px solid var(--sea);
  background: #edf3f1;
  font-size: 14px;
}

.release-status strong {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
}

.release-status p { margin: 0; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Keep the design study readable at phone width and with enlarged text. */
.product-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}

.product-capture {
  min-width: 0;
  margin: 0;
  padding: 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.product-capture img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

.weight-capture img {
  max-width: 300px;
  margin: auto;
}

.product-capture figcaption {
  margin-top: 20px;
  font-size: 15px;
}

.product-capture figcaption span {
  margin-top: 6px;
  font-size: 13px;
}

@media (max-width: 760px) {
  .product-gallery { grid-template-columns: minmax(0, 1fr); }
  .product-capture { padding: 16px; }
}

.hero-copy, .hero-visual, .cards article, .workflow li, nav {
  min-width: 0;
}

h1, h2, h3, .button, .workflow b, .checklist label {
  overflow-wrap: anywhere;
}

.site-header {
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

.hero {
  background: radial-gradient(ellipse at 82% 35%, #ddf2f4 0, transparent 62%);
}

.hero-visual {
  border-radius: 16px 16px 36px 16px;
}

.visual-top {
  flex-wrap: wrap;
  gap: 8px;
}

.visual-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.visual-key span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.section-key {
  width: 16px;
  height: 18px;
  border: 1px dashed #3688af;
  border-radius: 50%;
}

.ballast-key {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
}

.checklist label {
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 8px;
  background: #edf4f4;
  cursor: pointer;
}

.checklist input {
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
}

.button {
  min-height: 48px;
  text-align: left;
  line-height: 1.6;
}

.button span {
  flex: none;
}

@media (min-width: 761px) {
  .menu-toggle {
    display: none;
  }
}

@media (max-width: 760px) {
  .site-header {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px;
  }

  .menu-toggle {
    min-height: 44px;
    padding: 8px 14px;
  }

  nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .hero {
    padding: 40px 20px 56px;
    gap: 24px;
  }

  h1 {
    font-size: clamp(27px, 7.6vw, 38px);
    line-height: 1.55;
    letter-spacing: -.035em;
  }

  h1 br {
    display: initial;
  }

  h2 {
    font-size: 28px;
  }

  .lead {
    font-size: 15px;
  }

  .hero-visual {
    padding: 16px;
  }

  .section {
    padding: 52px 20px;
  }

  .cards article {
    padding: 18px 0;
  }

  .cards p, .workflow span, .checklist label {
    font-size: 15px;
  }

  .workflow li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 14px;
  }

  .workflow li::before {
    grid-row: span 2;
    padding-top: 2px;
  }

  .workflow span {
    grid-column: 2;
    margin-top: 4px;
  }

  .release .button, .hero .button {
    width: 100%;
    font-size: 13px;
  }

  footer {
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}