/* pyull — site styles.
   One logo cell is the unit `u` (4px). Every space and box size is u × N
   where N itself is prime (2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 37, 53, 167, 293 …),
   never a product or fraction. Pixel art (logo, bird) is the one exception:
   it is sized as cells × cell size, where the cell is u/2, u or u × a prime.
   Store badges keep their own artwork ratios. Colors use prime channels. */

:root {
  --u: 4px;
  --s2: calc(var(--u) * 2);
  --s3: calc(var(--u) * 3);
  --s5: calc(var(--u) * 5);
  --s7: calc(var(--u) * 7);
  --s11: calc(var(--u) * 11);
  --s13: calc(var(--u) * 13);
  --s17: calc(var(--u) * 17);
  --s19: calc(var(--u) * 19);
  --s23: calc(var(--u) * 23);
  --s29: calc(var(--u) * 29);
  --s53: calc(var(--u) * 53);

  --accent: #fb3571;
  --light: #efefef;
  --bg: #fbfbfb;
  --text: #353535;
  --strong: #1d1d1d;
  --sub: #a7a7a7;
  --rule: #dfdfdf;

  --wrap: calc(var(--u) * 293);
  /* Reading width for secondary pages. */
  --measure: calc(var(--u) * 167);
  /* Pixel art: 11 cells × u. */
  --bird: calc(var(--u) * 11);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Avenir Next", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: break-word;
  /* Short pages keep the footer at the bottom of the window. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

:lang(ja) body,
body:lang(ja) {
  font-family: var(--font-ja);
  line-height: 1.9;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--strong);
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3 {
  font-family: var(--font-ja);
  letter-spacing: 0.03em;
  word-break: auto-phrase;
}

p {
  margin: 0 0 var(--s3);
}

a {
  color: var(--strong);
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.skip-link {
  position: absolute;
  left: var(--s2);
  top: calc(var(--u) * -13);
  padding: var(--s2) var(--s3);
  background: var(--strong);
  color: var(--bg);
  z-index: 3;
}

.skip-link:focus {
  top: var(--s2);
}

/* Keep phrases whole so lines never break mid-word. */
.phrase {
  display: inline-block;
}

/* Masthead: the logo is the header. */

.mast {
  padding-block: var(--s5);
  border-bottom: 1px solid var(--strong);
}

.mast__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--s5);
}

.brand {
  display: block;
  justify-self: start;
}

.mast .logo {
  /* Pixel art: 11 cells × u. */
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
}

.lang-switch {
  justify-self: end;
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: var(--s2) var(--s3);
  line-height: 1;
}

.lang-switch:hover {
  border-color: var(--accent);
}

.mast--home {
  padding-block: var(--s7) var(--s13);
}

.mast--home .mast__grid {
  align-items: start;
}

.mast--home .lang-switch {
  grid-row: 1;
  grid-column: 2;
}

.mast--home .logo {
  /* Pixel art: 11 cells × 2u. */
  width: calc(var(--u) * 2 * 11);
  height: calc(var(--u) * 2 * 11);
  /* Blocks can be dragged out of the frame (eggs.js): let them show, above the copy
     (positioned) but under the bird, which comes later in the page. */
  position: relative;
  overflow: visible;
}

/* Chromium reads touch-action only from the outer <svg>, not its shapes, so both get it;
   a touch on the logo drags a block instead of scrolling. */
.mast--home .logo,
.mast--home .logo-block {
  touch-action: none;
}

@media (hover: hover) {
  .mast--home .logo-block {
    cursor: grab;
  }

  .mast--home .logo-block.drag {
    cursor: grabbing;
  }
}

.logo-block.glow {
  animation: glow 1009ms ease-in-out infinite;
}

/* Lit blocks pulse dark against the pink frame. */
@keyframes glow {
  50% {
    fill: var(--strong);
  }
}

.overline {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s7) 0 var(--s5);
  color: var(--text);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.overline:lang(ja) {
  letter-spacing: 0.08em;
  text-transform: none;
}

.overline::before {
  content: "";
  flex: none;
  width: var(--s2);
  height: var(--s2);
  background: var(--accent);
}

.mast__text {
  grid-column: 1 / -1;
}

.hero__copy {
  font-size: calc(var(--u) * 11);
  line-height: 1.13;
  letter-spacing: -0.01em;
}

:lang(ja) .hero__copy {
  font-size: calc(var(--u) * 7);
  line-height: 1.37;
  word-break: auto-phrase;
}

.lede {
  margin: var(--s5) 0 0;
  max-width: 29em;
  font-size: 1.0625rem;
}

/* Products and Company: stacked, side by side on wide screens. */

.cols {
  display: grid;
}

.col {
  padding-block: var(--s11);
}

.col + .col {
  border-top: 1px solid var(--rule);
}

.label {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s7);
}

.label__no {
  color: var(--accent);
  font: 600 0.75rem/1 var(--font-head);
  letter-spacing: 0.08em;
}

.label h2 {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Product card: one tight block, no stretched middle. */

.product {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s5);
  padding: var(--s5);
  background: var(--light);
}

.product__icon {
  width: var(--s19);
  height: var(--s19);
}

.product__name {
  font-size: calc(var(--u) * 7);
  line-height: 1.13;
  margin-bottom: var(--s2);
}

.product__tagline {
  margin: 0;
}

:lang(ja) .product__tagline {
  word-break: auto-phrase;
}

.product__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin: 0;
}

.badge {
  display: block;
}

.badge--appstore img {
  height: var(--s11);
  width: auto;
}

/* The Google Play PNGs carry their own transparent margins (symmetric).
   Center the image in a box with the visible badge's ratio so the visible
   badge is 11u high, like the App Store badge. Ratios come from the PNGs. */
.badge--googleplay {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: var(--s11);
  aspect-ratio: 564 / 168;
}

.badge--googleplay img {
  flex: none;
  max-width: none;
  height: calc(var(--s11) * 250 / 168);
  width: auto;
}

:lang(ja) .badge--googleplay {
  aspect-ratio: 646 / 192;
}

:lang(ja) .badge--googleplay img {
  height: calc(var(--s11) * 250 / 192);
}

.video {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  text-decoration: none;
}

/* A play mark: 2u × 3u. */
.video::before {
  content: "";
  width: var(--s2);
  height: var(--s3);
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Company facts */

.facts {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.facts th,
.facts td {
  display: block;
  text-align: left;
  vertical-align: top;
  padding: 0;
}

.facts th {
  padding-top: var(--s3);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.facts td {
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
  color: var(--strong);
}

.facts tr:first-child th {
  padding-top: 0;
}

/* JA: break between phrases, never mid-word (Safari lacks auto-phrase; .phrase spans cover it). */
:lang(ja) .facts td {
  word-break: auto-phrase;
}

/* Contact strip */

.contact {
  background: var(--strong);
  color: var(--light);
}

.contact__inner {
  display: grid;
  gap: var(--s5);
  align-items: center;
  padding-block: var(--s11);
}

.contact h2 {
  color: var(--light);
  font-size: calc(var(--u) * 7);
}

.contact__lead {
  margin-bottom: var(--s5);
}

:lang(ja) .contact__lead,
:lang(ja) .lede {
  word-break: auto-phrase;
}

.contact .contact__lead {
  margin: 0;
  color: var(--sub);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border: 2px solid var(--strong);
  color: var(--strong);
  font-weight: 600;
  text-decoration: none;
}

.button::before {
  content: "";
  width: var(--s2);
  height: var(--s2);
  background: var(--accent);
}

button.button {
  background: none;
  font: inherit;
  cursor: pointer;
}

.button:hover {
  background: var(--strong);
  color: var(--bg);
}

.button--accent {
  justify-self: start;
  border-color: var(--accent);
  background: var(--accent);
}

.button--accent::before {
  background: var(--light);
}

.button--accent:hover {
  border-color: var(--light);
  background: var(--light);
  color: var(--strong);
}

.button--accent:hover::before {
  background: var(--accent);
}

/* Secondary pages */

.page {
  padding-block: var(--s13) var(--s23);
}

.page > .wrap > * {
  max-width: var(--measure);
}

.letter {
  margin-top: var(--s7);
}

/* Read by screen readers, not shown (the "Sent it!" thank-you). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.page__title {
  margin-bottom: var(--s5);
  font-size: calc(var(--u) * 7);
}

.notfound h2.page__title {
  margin-top: var(--s13);
  font-size: calc(var(--u) * 5);
}

.page-blocks {
  min-height: var(--s11);
  margin-bottom: var(--s5);
}

/* Pixel art: the block-built "404", 11 × 5 cells of 3u (5u on wider screens), like the logo. */
.page-blocks svg {
  display: block;
  width: calc(var(--u) * 3 * 11);
  height: calc(var(--u) * 3 * 5);
}

.prose h1 {
  margin-bottom: var(--s3);
  font-size: calc(var(--u) * 7);
}

.prose h2 {
  margin: var(--s11) 0 var(--s3);
  font-size: calc(var(--u) * 5);
}

.prose ul {
  margin: 0 0 var(--s3);
  padding-left: var(--s5);
}

.form-frame iframe {
  display: block;
  width: 100%;
  height: calc(var(--u) * 167);
  border: 1px solid var(--rule);
}

.form-soon {
  margin-bottom: var(--s2);
}

/* Footer */

.site-footer {
  padding-block: var(--s7);
  font-size: 0.8125rem;
  /* The bird walks in from past the right edge: never scroll sideways for it. */
  overflow-x: clip;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s7);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--text);
}

.copyright {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  color: var(--text);
}

.footprint {
  width: var(--s3);
  height: var(--s3);
}

/* Looks like the plain footprint; a 7u square to tap. */
.footprint-button {
  display: block;
  margin: calc(var(--u) * -2);
  padding: var(--s2);
  border: 0;
  background: none;
  cursor: pointer;
}

/* Bird stage: hidden until the bird is summoned (bird.js); then a strip under the footer row,
   so the bird never covers text. Peeking or on an errand it sits fixed at the viewport's
   right edge instead, taking no space. */

#bird-stage {
  position: relative;
  height: var(--bird);
  margin-top: var(--s5);
  pointer-events: none;
}

#bird-stage.peek,
#bird-stage.visit {
  position: fixed;
  right: 0;
  bottom: var(--s5);
  z-index: 2;
  width: var(--bird);
  margin: 0;
}

/* Only the head shows; the rest stays past the edge. */
#bird-stage.peek {
  overflow: hidden;
}

#bird-stage.visit {
  right: var(--s5);
}

.bird {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--bird);
  height: var(--bird);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 233ms linear;
}

/* A heavy block on the way back (eggs.js): bird and block sag and bob together, unevenly.
   --h is one CSS pixel; a block sits in logo cells, so it is 1px / the home logo's cell size. */
body:has(.logo-block.heavy) #bird-stage .bird {
  --h: 1px;
}

body:has(.logo-block.heavy) #bird-stage .bird,
.logo-block.heavy {
  animation: heave 607ms ease-in-out infinite;
}

.logo-block.heavy {
  --h: 0.125px;
}

@keyframes heave {
  0% { translate: 0 calc(var(--h) * 3); }
  23% { translate: 0 calc(var(--h) * 7); }
  41% { translate: 0 calc(var(--h) * 5); }
  67% { translate: 0 calc(var(--h) * 11); }
  100% { translate: 0 calc(var(--h) * 3); }
}

/* What the bird carries off (eggs.js): a 404 block, or a letter. */
.bird-carry {
  position: absolute;
}

/* Pixel art: an envelope of 9 × 6 cells of u/2, with a pink stamp. */
.bird-carry--letter {
  width: calc(var(--u) / 2 * 9);
  height: calc(var(--u) / 2 * 6);
  background: var(--bg);
  box-shadow: inset 0 0 0 calc(var(--u) / 2) var(--strong);
}

.bird-carry--letter::after {
  content: "";
  position: absolute;
  top: calc(var(--u) / 2);
  right: calc(var(--u) / 2);
  width: calc(var(--u) / 2);
  height: calc(var(--u) / 2);
  background: var(--accent);
}

/* Pixel art: one bird cell (u). */
.bird-block {
  position: absolute;
  width: var(--u);
  height: var(--u);
  background: var(--accent);
}

/* Wider screens */

@media (min-width: 44em) {
  .logo-block.heavy {
    --h: 0.05px;
  }

  .wrap {
    padding-inline: var(--s11);
  }

  .mast .logo {
    /* Pixel art: 11 cells × 2u. */
    width: calc(var(--u) * 2 * 11);
    height: calc(var(--u) * 2 * 11);
  }

  .mast--home {
    padding-block: var(--s11) var(--s19);
  }

  .mast--home .mast__grid {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    column-gap: 0;
  }

  .mast__logo {
    grid-row: 1 / span 2;
    margin-right: var(--s13);
  }

  .mast--home .logo {
    /* Pixel art: 11 cells × 5u. */
    width: calc(var(--u) * 5 * 11);
    height: calc(var(--u) * 5 * 11);
  }

  /* The rule under the overline and the language switch. */
  .mast--home .mast__grid::before {
    content: "";
    grid-row: 1;
    grid-column: 2 / -1;
    align-self: end;
    border-bottom: 1px solid var(--rule);
  }

  .mast--home .overline,
  .mast--home .lang-switch {
    grid-row: 1;
    margin: 0 0 var(--s3);
  }

  .mast--home .overline {
    grid-column: 2;
  }

  .mast--home .lang-switch {
    grid-column: 3;
  }

  .mast__text {
    grid-column: 2 / -1;
    grid-row: 2;
    align-self: end;
    padding-top: var(--s7);
  }

  .hero__copy {
    font-size: calc(var(--u) * 13);
  }

  :lang(ja) .hero__copy {
    font-size: calc(var(--u) * 11);
  }

  .lede {
    margin-top: var(--s7);
    font-size: 1.1875rem;
  }

  .page-blocks svg {
    width: calc(var(--u) * 5 * 11);
    height: calc(var(--u) * 5 * 5);
  }

  .product {
    gap: var(--s5) var(--s7);
    padding: var(--s7);
  }

  .product__icon {
    width: var(--s23);
    height: var(--s23);
  }

  .contact__inner {
    grid-template-columns: auto 1fr auto;
    column-gap: var(--s11);
  }

  .foot {
    flex-wrap: nowrap;
  }

  .facts th,
  .facts td {
    display: table-cell;
    padding-block: var(--s3);
    border-bottom: 1px solid var(--rule);
  }

  .facts th {
    width: 1%;
    white-space: nowrap;
    padding-right: var(--s7);
    padding-top: calc(var(--s3) + 3px);
  }

  .facts tr:first-child th,
  .facts tr:first-child td {
    padding-top: 0;
  }
}

@media (min-width: 64em) {
  .logo-block.heavy {
    --h: 0.0357px;
  }

  .mast--home .logo {
    /* Pixel art: 11 cells × 7u. */
    width: calc(var(--u) * 7 * 11);
    height: calc(var(--u) * 7 * 11);
  }

  .hero__copy {
    font-size: calc(var(--u) * 17);
  }

  :lang(ja) .hero__copy {
    font-size: calc(var(--u) * 13);
  }

  .cols {
    grid-template-columns: 7fr 5fr;
  }

  .col {
    padding-block: var(--s13) var(--s17);
  }

  .col:first-child {
    padding-right: var(--s13);
  }

  .col + .col {
    border-top: 0;
    border-left: 1px solid var(--rule);
    padding-left: var(--s13);
  }

  .product__icon {
    width: var(--s29);
    height: var(--s29);
  }

  .product__name {
    font-size: calc(var(--u) * 11);
  }

  .product__tagline {
    font-size: 1.0625rem;
  }
}

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

  /* No pulse: lit blocks simply stay dark for the glow's 5003 ms. */
  .logo-block.glow {
    fill: var(--strong);
  }
}