/* Inkito launch page
   A manga page printed on e-paper: ink panels, paper gutters, and gray made from dots (screentone),
   never from color. Black and white only. The one thing that moves on its own is the hero screen,
   which refreshes like real e-ink. Everything else moves only when someone acts. */

:root {
  --paper: #e4e5e1;          /* e-paper white: a cool, matte gray, never cream */
  --paper-lit: #f0f0ed;      /* the device body, a shade lighter than the page */
  --screen: #ebebe7;         /* the device's own e-paper */
  --ink: #161717;            /* e-ink black */
  --ink-2: #4b4c4c;          /* secondary text; still passes AA on paper */
  --ink-3: #a7a8a5;          /* muted text on ink */

  --line: 3px;               /* panel border */
  --gap: 14px;               /* manga gutter */
  --pad: clamp(20px, 3vw, 36px);
  --max: 1240px;
  --side: clamp(16px, 3vw, 32px);

  --display: "Dela Gothic One", "Hiragino Sans", "Yu Gothic", sans-serif;
  --text: "Literata", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --tone: radial-gradient(circle at center, var(--ink) 0 1.15px, transparent 1.55px);
  --tone-size: 6px 6px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

/* paper grain, very faint */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.05;
}

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

a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }

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

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--side);
  top: -80px;
  z-index: 60;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- buttons: pills, like the device's page keys ---------- */

.key-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 80ms ease-out;
}
/* hover inverts, the way an e-ink highlight does */
.key-btn:hover { background: var(--paper); color: var(--ink); }
.key-btn:active { transform: translateY(2px); }

.key-btn-sm { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; }

.nowrap { white-space: nowrap; }

.text-link { font-weight: 600; }
.text-link:hover { text-decoration-thickness: 3px; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: var(--line) solid var(--ink);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 11px var(--side);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
}
.brand-word { font-family: var(--display); font-size: 1.75rem; line-height: 1; }
.brand-by { font-size: 0.875rem; color: var(--ink-2); }

.nav-links { display: flex; gap: 24px; }
.nav-links a { font-size: 1rem; text-decoration: none; }
.nav-links a:hover { text-decoration: underline; }

/* ---------- panels ---------- */

.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--pad);
  background: var(--paper);
  border: var(--line) solid var(--ink);
}

/* A frame draws the ink outline around a clipped (slanted) panel; clip-path would cut a normal border. */
.frame {
  filter:
    drop-shadow(var(--line) 0 0 var(--ink))
    drop-shadow(calc(var(--line) * -1) 0 0 var(--ink))
    drop-shadow(0 var(--line) 0 var(--ink))
    drop-shadow(0 calc(var(--line) * -1) 0 var(--ink));
}
.frame > .panel { border: 0; }

.panel-title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
}

/* :where() keeps this at element specificity, so any class can set its own margins */
:where(.panel) p { margin: 0; max-width: 38em; }

/* screentone */
.tone {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-image: var(--tone);
  background-size: var(--tone-size);
}

/* ---------- layout ---------- */

.hero,
.section {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--side);
}

.section { padding-top: clamp(72px, 9vw, 120px); }

.section-head {
  display: grid;
  gap: 12px;
  max-width: 46em;
  margin-bottom: 28px;
}

.section-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

.section-lede { margin: 0; max-width: 40em; color: var(--ink-2); }

.section-foot { margin: 18px 0 0; font-size: 1rem; color: var(--ink-2); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-12 { grid-column: span 12; }

/* ---------- hero: two panels with a diagonal gutter ---------- */

.hero {
  --slant: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: calc(var(--gap) + var(--line) * 2);
  padding-top: 28px;
}

.frame-hero-copy > .panel {
  height: 100%;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  padding-right: calc(var(--pad) + var(--slant));
}

.frame-hero-device { margin-left: calc(var(--slant) * -1); }
.frame-hero-device > .panel {
  height: 100%;
  clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
  padding-left: calc(var(--pad) + var(--slant) * 0.6);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding-block: clamp(40px, 6vw, 80px);
}

.hero-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 4.7vw, 4.25rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.hero-title span { display: block; white-space: nowrap; }

.hero-lede { margin: 0; max-width: 33em; font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

.hero-price {
  display: grid;
  gap: 2px;
  margin: 0;
  font-size: 1rem;
}
.hero-price strong { font-weight: 700; }
.hero-price span { color: var(--ink-2); }

.hero-device {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-height: 680px;
  padding-block: 64px 32px;
}

/* vertical katakana title, the way a manga cover sets it */
.hero-kana {
  position: absolute;
  top: 26px;
  right: 22px;
  z-index: 1;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}

.stage {
  position: relative;
  width: clamp(210px, 21vw, 280px);
}

/* 集中線 focus lines. One SVG unit = 1% of the stage, so the clear middle always fits the device. */
.focus {
  position: absolute;
  left: -100%;
  top: -60%;
  z-index: -1;
  width: 300%;
  height: 220%;
  max-width: none;
  fill: var(--ink);
  opacity: 0.22;
  pointer-events: none;
}

.shadow {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -7%;
  height: 7%;
  z-index: -1;
  background-image: var(--tone);
  background-size: 5px 5px;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
  mask-image: radial-gradient(closest-side, #000 35%, transparent);
}

.stage-note {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 2px 10px;
  background: var(--paper);
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-align: center;
}

/* ---------- the device, drawn in ink (proportions from the 69.5 × 125 mm concept) ---------- */

.device {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 69.5 / 125.1;
  width: 100%;
  background: var(--paper-lit);
  border: var(--line) solid var(--ink);
  border-radius: 10% / 5.6%;
  transform: rotate(-3deg);
}

.device-power {
  position: absolute;
  top: -2.6%;
  left: 26%;
  width: 10%;
  height: 2.6%;
  background: var(--ink);
  border-radius: 4px 4px 0 0;
}

.device-glass {
  position: absolute;
  inset: 1.1% 1.9%;
  border: 1.5px solid rgb(22 23 23 / 0.3);
  border-radius: 8.6% / 4.8%;
  pointer-events: none;
}

.screen {
  position: absolute;
  top: 5.2%;
  left: 9.35%;
  width: 81.3%;
  height: 74.8%;
  container-type: inline-size;
  overflow: hidden;
  background: var(--screen);
  border: 2px solid var(--ink);
  border-radius: 1.4% / 0.8%;
}

.page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
}
.page[hidden] { display: none; }

/* page-turn rockers on both side edges; they start inside the border so only the bump shows */
.rocker {
  position: absolute;
  top: 38%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: calc(var(--line) + 3.6%);
  height: 20%;
}
.rocker-right { left: 100%; }
.rocker-left { right: 100%; }
.rocker button {
  position: relative;
  flex: 1 1 0;
  padding: 0;
  background: var(--ink);
  border: 0;
  cursor: pointer;
  transition: transform 80ms ease-out;
}
/* a bigger, invisible hit area reaching outwards from the edge */
.rocker button::after { content: ""; position: absolute; inset: -1px -18px -1px -6px; }
.rocker-left button::after { inset: -1px -6px -1px -18px; }
.rocker-right button:first-child { border-radius: 0 999px 0 0; }
.rocker-right button:last-child { border-radius: 0 0 999px 0; }
.rocker-left button:first-child { border-radius: 999px 0 0 0; }
.rocker-left button:last-child { border-radius: 0 0 0 999px; }
.rocker button:hover { background: var(--ink-2); }
.rocker-right button:active { transform: translateX(-2px); }
.rocker-left button:active { transform: translateX(2px); }

.device-logo {
  position: absolute;
  top: 88.4%;
  left: 0;
  right: 0;
  font-family: var(--display);
  font-size: 5cqi;
  line-height: 1;
  color: var(--ink-2);
  text-align: center;
  pointer-events: none;
}

/* the full e-ink refresh: black, white, black, then the new page settles in a few gray steps */
.screen-flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: var(--ink);
}
.screen-flash.is-on { animation: eink-refresh 720ms linear forwards; }

@keyframes eink-refresh {
  0%   { opacity: 1; background: var(--ink); }
  20%  { background: var(--ink); }
  21%  { background: var(--screen); }
  40%  { background: var(--screen); }
  41%  { background: var(--ink); }
  58%  { background: var(--ink); }
  59%  { opacity: 1; background: var(--screen); animation-timing-function: steps(3, end); }
  100% { opacity: 0; background: var(--screen); }
}

/* page-turn sound effect, only after a key press */
.sfx {
  position: absolute;
  top: -6%;
  left: -34%;
  z-index: 3;
  font-family: var(--display);
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  text-shadow:
    3px 0 var(--paper), -3px 0 var(--paper), 0 3px var(--paper), 0 -3px var(--paper),
    2px 2px var(--paper), -2px -2px var(--paper), 2px -2px var(--paper), -2px 2px var(--paper);
  opacity: 0;
  transform: rotate(-12deg);
  pointer-events: none;
}
.sfx.is-on { animation: sfx-pop 760ms ease-out forwards; }

@keyframes sfx-pop {
  0%   { opacity: 0; transform: rotate(-12deg) scale(0.6); }
  18%  { opacity: 1; transform: rotate(-12deg) scale(1.08); }
  32%  { transform: rotate(-12deg) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(-12deg) scale(1); }
}

/* screen: book page */
.page-book { padding: 8cqi 7cqi 4.5cqi; }

.book-chapter {
  margin: 0;
  font-size: 4.2cqi;
  font-style: italic;
  color: var(--ink-2);
  text-align: center;
}
.book-title {
  margin: 2.2cqi 0 0;
  font-size: 6.6cqi;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.book-rule {
  display: block;
  width: 14cqi;
  margin: 3.4cqi auto 5cqi;
  border-top: 1px solid var(--ink-2);
}
/* overflow flows into hidden extra columns, so the page always ends on a whole line */
.book-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  columns: 1;
  column-gap: 40cqi;
  column-fill: auto;
}
.book-text {
  margin: 0;
  font-size: 4.45cqi;
  line-height: 1.5;
  text-align: justify;
  hyphens: auto;
}
.book-indent { text-indent: 1.6em; }
.book-sc { font-size: 0.84em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

.book-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3cqi;
  padding-top: 2.2cqi;
  border-top: 1px solid rgb(22 23 23 / 0.35);
  font-size: 3.3cqi;
  color: var(--ink-2);
}
.book-battery { display: inline-flex; align-items: center; gap: 1.2cqi; }
.book-battery i {
  width: 6cqi;
  height: 3cqi;
  padding: 0.5cqi;
  border: 1px solid var(--ink-2);
  background: linear-gradient(to right, var(--ink-2) 86%, transparent 86%) content-box;
}

/* screen: manga page */
.page-manga svg { width: 100%; height: 100%; }

/* screen: someone's homemade dashboard */
.page-dash { padding: 7cqi 7cqi 6cqi; }
.dash-top {
  display: flex;
  justify-content: space-between;
  gap: 2cqi;
  font-size: 3.6cqi;
  color: var(--ink-2);
}
.dash-time {
  margin: 11cqi 0 4cqi;
  font-family: var(--display);
  font-size: 24cqi;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dash-weather { margin: 0; font-size: 4.6cqi; font-style: italic; }
.dash-rule { display: block; margin: 7cqi 0 5cqi; border-top: 2px solid var(--ink); }
.dash-list {
  display: grid;
  gap: 3.8cqi;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 5cqi;
}
.dash-list b { margin-right: 3cqi; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-foot {
  margin: auto 0 0;
  font-family: var(--mono);
  font-size: 3.2cqi;
  color: var(--ink-2);
}

/* ---------- what's inside ---------- */

.feature-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 48px;
  align-items: center;
}

/* front light, drawn the manga way: tone all around, an untouched glow in the middle */
.light-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 168px;
  aspect-ratio: 1;
}
.light-rays {
  inset: -20%;
  -webkit-mask-image: radial-gradient(circle, transparent 0 30%, #000 48%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 0 30%, #000 48%, transparent 70%);
}
.light-screen {
  width: 52%;
  aspect-ratio: 480 / 800;
  padding: 14px 10px;
  background: repeating-linear-gradient(to bottom, transparent 0 8px, var(--ink) 8px 9.5px) content-box var(--screen);
  border: var(--line) solid var(--ink);
  border-radius: 4px;
}

.feature-keys {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 28px;
  align-items: center;
}
.keys-art { width: 104px; overflow: visible; }

.frame-slant > .panel {
  --cut: 22px;
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--pad) + var(--cut));
}

.feature-port {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 24px 48px;
  align-items: end;
}

.pinout { margin: 0; }
.pins {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 12px;
  list-style: none;
  border: var(--line) solid var(--ink);
  border-radius: 6px;
}
.pins li {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.pins b {
  display: grid;
  place-items: center;
  width: 100%;
  height: 40px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 3px;
  font-family: var(--text);
  font-weight: 600;
}
.pinout figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--ink-2); }

/* spec sheet */
.specs {
  margin-top: var(--gap);
  background: var(--paper);
  border: var(--line) solid var(--ink);
}
.specs summary,
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px var(--pad);
  font-size: 1.125rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.specs summary::-webkit-details-marker,
.faq summary::-webkit-details-marker { display: none; }
.specs summary::after,
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
}
.specs[open] summary::after,
.faq details[open] summary::after { content: "\2212"; }
.specs summary:hover,
.faq summary:hover { text-decoration: underline; }

.specs dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin: 0;
  padding: 0 var(--pad) var(--pad);
}
.specs dl > div {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgb(22 23 23 / 0.3);
  font-size: 1rem;
}
.specs dt { font-weight: 600; }
.specs dd { margin: 0; }

/* ---------- hack it ---------- */

.hack-panel { display: flex; flex-direction: column; gap: 4px; }

.code {
  margin: auto 0 0;
  padding: 16px 18px;
  overflow-x: auto;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.hack-panel .code { margin-top: 24px; }
.code-c { color: var(--ink-3); }

.hack-hardware {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 28px;
  align-items: center;
}
.back-art { width: 128px; overflow: visible; transform: rotate(6deg); }

/* ---------- pricing ---------- */

.price { display: flex; flex-direction: column; gap: 6px; }
.price-name { margin: 0; font-family: var(--display); font-size: 1.5rem; font-weight: 400; line-height: 1.2; }
.price-sub { color: var(--ink-2); font-size: 1rem; }
.price-amount {
  margin: 14px 0 10px;
  font-family: var(--display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
}

.price-best { background: var(--ink); color: var(--paper); }
.price-best .price-amount { font-size: clamp(4rem, 8vw, 6.5rem); }
.price-best .price-sub { color: var(--ink-3); }
.price-best .key-btn {
  align-self: flex-start;
  margin-top: 22px;
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.price-best .key-btn:hover { background: var(--ink); color: var(--paper); }

/* ink seal (hanko) */
.stamp {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 12px 8px;
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.04;
  letter-spacing: 0.04em;
  writing-mode: vertical-rl;
  border: var(--line) solid currentColor;
  border-radius: 8px;
  transform: rotate(9deg);
  -webkit-mask-image: var(--noise);
  mask-image: var(--noise);
}

/* ---------- join ---------- */

.join { align-items: start; }
/* the form is long, so its explainer stays in view beside it */
.join-copy {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.join-copy .section-title { margin-bottom: 2px; }

.steps {
  display: grid;
  gap: 16px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: -2px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 0.9375rem;
  line-height: 1;
}

.thanks {
  position: relative;
  margin-top: 8px;
  padding: 22px 132px 8px 0;
  border-top: 2px solid var(--ink);
}
.thanks[hidden] { display: none; }
.thanks-title { margin: 0 0 6px; font-family: var(--display); font-size: 1.375rem; line-height: 1.2; }
.stamp-round {
  top: 14px;
  right: 0;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  padding: 0;
  font-size: 1.0625rem;
  writing-mode: horizontal-tb;
  border-radius: 50%;
  transform: rotate(-10deg);
}
.thanks.is-in .stamp-round { animation: stamp-thunk 420ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }

@keyframes stamp-thunk {
  0%   { opacity: 0; transform: rotate(-10deg) scale(1.7); }
  60%  { opacity: 1; transform: rotate(-10deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(-10deg) scale(1); }
}

.join-form { padding: clamp(12px, 2vw, 28px); }
.join-form iframe { display: block; width: 100%; min-height: 560px; border: 0; }
.form-fallback { margin-top: 14px; font-size: 0.9375rem; color: var(--ink-2); }

/* ---------- faq ---------- */

.faq { padding: 0; }
.faq details + details { border-top: 2px solid var(--ink); }
.faq details p { padding: 0 var(--pad) 22px; max-width: 44em; }

/* ---------- footer ---------- */

.footer {
  margin-top: clamp(88px, 10vw, 136px);
  border-top: var(--line) solid var(--ink);
}
.footer-inner {
  display: grid;
  gap: 12px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 44px var(--side) 52px;
}
.tsuzuku {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.25rem, 8vw, 6rem);
  line-height: 1;
}
.tsuzuku-en { font-family: var(--text); font-size: 1.125rem; font-style: italic; }
.footer-cta { margin: 6px 0 0; }
.footer-cta a { font-weight: 600; }
.footer-meta { margin: 10px 0 0; font-size: 0.9375rem; color: var(--ink-2); }

/* ---------- responsive ---------- */

@media (max-width: 1040px) {
  .hero { --slant: 56px; }
  .feature-port { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 960px) {
  .span-4 { grid-column: span 6; }
  .span-3, .span-5, .span-6, .span-7 { grid-column: span 12; }
  .wide-md { grid-column: span 12; }
  .join-copy { position: relative; top: auto; }
  .specs dl { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* hero panels stack; the diagonal gutter turns horizontal */
  .hero {
    --slant: 32px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--gap) + var(--line) * 2);
    padding-top: 20px;
  }
  .frame-hero-copy > .panel {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
    padding-right: var(--pad);
    padding-bottom: calc(var(--pad) + var(--slant));
  }
  .frame-hero-device { margin: calc(var(--slant) * -1) 0 0; }
  .frame-hero-device > .panel {
    clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
    padding-left: var(--pad);
    padding-top: calc(var(--slant) + 48px);
  }
  .hero-device { min-height: 0; }
  .hero-title { font-size: clamp(2.5rem, 9vw, 4.5rem); }
  .stage { width: min(260px, 64vw); }
  .sfx { left: -16%; }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-inner { gap: 16px; }
}

@media (max-width: 640px) {
  .span-4, .wide-md { grid-column: span 12; }
  .feature-screen { grid-template-columns: minmax(0, 1fr); }
  .light-art { width: 132px; margin: 8px 0 4px 24px; }
  .feature-keys { grid-template-columns: minmax(0, 1fr) 68px; gap: 18px; }
  .keys-art { width: 68px; }
  .hack-hardware { grid-template-columns: minmax(0, 1fr) 84px; gap: 18px; }
  .back-art { width: 84px; }
  .specs dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hero-kana { font-size: 1.875rem; top: 44px; right: 14px; }
  .brand-by { display: none; }
  .thanks { padding-right: 0; padding-top: 136px; }
  .stamp-round { left: 0; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .screen-flash.is-on,
  .sfx.is-on,
  .thanks.is-in .stamp-round { animation: none; }
  .key-btn, .rocker button { transition: none; }
}