:root {
  --paper:#fff;
  --ink:#172237;
  --muted:#586477;
  --line:#eaedf2;
  font-family:"Roboto Flex",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

::selection {
  background:var(--ink);
  color:var(--paper);
}

a {
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
}

a:hover {
  text-decoration-thickness:2px;
}

a:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:6px;
}

p {
  line-height:1.6;
  margin:0 0 1em;
}

h1,h2 {
  margin:0;
  font-weight:640;
  letter-spacing:-.04em;
  text-wrap:balance;
}

h1 {
  font-size:clamp(3.3rem,7.5vw,6rem);
  line-height:1.02;
}

h2 {
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.1;
}

.wrap {
  padding-inline:clamp(24px,6.25vw,100px);
  max-width:1600px;
  margin-inline:auto;
}

.icon {
  width:24px;
  height:24px;
  flex:none;
  vertical-align:middle;
}

.skip {
  position:absolute;
  top:8px;
  left:12px;
  background:white;
  padding:12px;
  transform:translateY(-180%);
  z-index:10;
}

.skip:focus {
  transform:translateY(0);
}

.site-header {
  min-height:116px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.wordmark {
  font-size:42px;
  font-weight:760;
  letter-spacing:-.04em;
  text-decoration:none;
}

.site-header>a:last-child {
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  font-size:15px;
}

.intro {
  padding-block:92px 112px;
}

.intro-note {
  margin:40px 0 0 50%;
  max-width:390px;
  font-size:20px;
}

.intro-note p:last-child {
  color:var(--muted);
  font-size:16px;
}

.product {
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding-block:72px 88px;
  gap:48px;
}

.product-copy {
  max-width:480px;
}

.product-copy h2 {
  margin-bottom:24px;
}

.product-copy p {
  font-size:18px;
}

.product-copy p+p {
  font-size:16px;
  color:var(--muted);
}

.product-link {
  display:flex;
  width:fit-content;
  align-items:center;
  gap:28px;
  min-height:52px;
  margin-top:28px;
  font-weight:680;
}

.product-art {
  margin:0;
  text-align:center;
}

.product-art img {
  width:240px;
  height:auto;
  max-width:100%;
}

.product-art figcaption {
  margin-top:24px;
  color:var(--muted);
  font-size:14px;
}

.contact {
  border-top:1px solid var(--line);
  padding-block:64px 88px;
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:center;
}

.contact h2 {
  font-size:24px;
}

.contact a {
  font-size:clamp(23px,3vw,36px);
  display:flex;
  align-items:center;
  gap:24px;
  min-height:48px;
}

.site-footer {
  padding-block:28px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:13px;
  color:var(--muted);
  border-top:1px solid var(--line);
}

@media(max-width:640px) {
  .site-header {
    min-height:90px;
  }
  .wordmark {
    font-size:36px;
  }
  .intro {
    padding-block:64px 64px;
  }
  .intro-note {
    margin:32px 0 0;
    max-width:320px;
  }
  .product {
    grid-template-columns:1fr;
    padding-block:48px 56px;
    gap:32px;
  }
  .product-art {
    text-align:left;
  }
  .product-art img {
    display:block;
  }
  .contact {
    align-items:flex-start;
    flex-direction:column;
    padding-block:48px;
    gap:22px;
  }
  .site-footer {
    font-size:12px;
  }
  .site-header>a:last-child {
    font-size:14px;
    gap:8px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important;
  }
}


/* Motion: the intro rises in on load; the mascot settles in with a hop, then breathes. Static with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .intro h1, .intro-note { animation: rise 800ms cubic-bezier(.2,.7,.2,1) both; }
  .intro-note { animation-delay: 140ms; }
  .product-copy { animation: rise 800ms cubic-bezier(.2,.7,.2,1) 260ms both; }
  .product-art img { transform-origin: 50% 100%; animation: hop 900ms cubic-bezier(.3,.7,.3,1) 500ms both, breathe 3.6s ease-in-out 1500ms infinite; }
  .product-link .icon, .site-header a .icon, .contact a .icon { transition: transform 180ms ease-out; }
  .product-link:hover .icon, .site-header a:hover .icon, .contact a:hover .icon { transform: translateX(4px); }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hop {
  0% { opacity: 0; transform: translateY(14px) scale(1.04,.92); }
  25% { opacity: 1; transform: translateY(8px) scale(1.06,.9); }
  55% { transform: translateY(-28px) scale(.97,1.04); }
  80% { transform: translateY(0) scale(1.05,.94); }
  100% { transform: none; }
}
@keyframes breathe { 0%,100% { transform: none; } 50% { transform: translateY(-3px) scale(1.01,.99); } }