:root {
  color-scheme: light dark;

  /* Surfaces — the app's palette, so the mock-ups below are the real thing. */
  --canvas: #ffffff;
  --canvas-alt: #f4f7fc;
  --surface: #ffffff;
  --soft: #e3ecfd;
  --line: #dde4ee;
  --line-soft: #eef2f7;

  /* Ink */
  --ink: #14181f;
  --ink-soft: #4a5261;
  --ink-muted: #606a79;

  /* Action. Navy carries every forward step; the accent marks one thing per section. */
  --navy: #16305c;
  --on-navy: #ffffff;
  /* Navy drawn as *text on a surface*, as opposed to navy drawn as the surface.
     The two cannot be one token: on a dark ground the fill has to be bright enough to
     read as raised, and the same value used as a label on top of that fill measured
     2.16:1 — the app learned this and named the token navyText. */
  --navy-text: #16305c;
  --accent: #2f6bea;
  --accent-pale: #b8cdf5;

  /* できた — the only warm colour in the system. */
  --amber: #f5b93f;
  --amber-ink: #8a5a00;
  --amber-soft: #fdf6e6;

  /* Spacing: a 4px scale. Nothing is spaced by feel. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  --s9: 112px;

  --radius: 14px;
  --radius-lg: 22px;
  --measure: 34rem;
  --page: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0e1420;
    --canvas-alt: #121a29;
    --surface: #182233;
    --soft: #1e2d4a;
    --line: #2a3548;
    --line-soft: #212c3e;
    --ink: #edf0f5;
    --ink-soft: #a9b3c4;
    --ink-muted: #94a0b3;
    --navy: #2f5bb7;
    --navy-text: #8fb0e8;
    --accent: #6f9dff;
    --accent-pale: #33456b;
    --amber: #e8ad3c;
    --amber-ink: #f0d9a8;
    --amber-soft: #2a2314;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* System stack only. A Japanese web font is 2–4MB and would cost more first-paint time
     than any typeface can earn back on a page whose only channel is search. */
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
    "Yu Gothic UI", Meiryo, sans-serif;
  font-feature-settings: "palt" 1;
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.85;
  font-size: 16px;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

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

a { color: inherit; }

/* --- header ------------------------------------------------------------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
}

.brand .mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--navy);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.tagline { font-size: 12px; color: var(--ink-muted); }
@media (max-width: 34rem) { .tagline { display: none; } }

.bar .spacer { margin-left: auto; }

/* The header's action is smaller than a call to action in the body.
   At 52px it made the sticky bar 76px tall on a phone — a fifth of the viewport, held
   there permanently, in front of the content it is trying to sell. 40px still clears the
   44px target guidance once the bar's own padding is counted as part of the hit area. */
.bar .cta-quiet {
  min-height: 40px;
  padding: var(--s2) var(--s4);
  font-size: 14px;
  white-space: nowrap;
}

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

main { max-width: var(--page); margin: 0 auto; padding: 0 var(--s4) var(--s8); }

section { margin: var(--s8) 0; }
@media (min-width: 48rem) { section { margin: var(--s9) 0; } }

h1, h2, h3 { letter-spacing: -0.015em; text-wrap: balance; }

h1 {
  font-size: clamp(30px, 7.2vw, 58px);
  line-height: 1.24;
  margin: 0 0 var(--s4);
  font-weight: 800;
}

h2 {
  font-size: clamp(21px, 3.4vw, 30px);
  line-height: 1.45;
  margin: 0 0 var(--s4);
  font-weight: 700;
}

h3 { font-size: 17px; line-height: 1.55; margin: 0 0 var(--s2); font-weight: 700; }

p { margin: 0 0 var(--s4); max-width: var(--measure); }

.lead {
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--ink-soft);
  line-height: 1.8;
  max-width: 32rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  text-transform: none;
  margin: 0 0 var(--s4);
  padding: var(--s1) var(--s3) var(--s1) var(--s2);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}

.meta { font-size: 13px; color: var(--ink-muted); }
small { color: var(--ink-muted); font-size: 13px; line-height: 1.7; }

/* --- hero --------------------------------------------------------------- */

/* Centred, because the page has one thing to say and one thing to press. A two-column
   hero splits attention between the words and the picture at the exact moment a visitor
   is deciding whether to keep reading; centred puts the claim first and the product
   underneath it, which is also the order they are read in on a phone. */
.hero { padding: var(--s7) 0 0; margin-top: 0; text-align: center; }

.hero-copy { max-width: 44rem; margin: 0 auto; }
.hero-copy p { margin-inline: auto; }
.hero .cta-row { justify-content: center; }

.hero h1 {
  /* Larger than the section headings by a wide margin. The size *is* the hierarchy —
     with the display line this big, nothing else has to compete to be seen first. */
  font-size: clamp(34px, 8.4vw, 76px);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

/* The one line the eye lands on first. Scrambled once on load by the inline script;
   without JavaScript it is simply this text, which is the point. */
.decode { display: inline-block; }

/* --- the fanned phones -------------------------------------------------- */

/* Three screens, the middle one in front.
   One screenshot says "there is an app"; three say "there is a product with a shape to
   it", and the two behind are what let a visitor see the loop — analyse, check, record —
   without reading a word. Drawn in HTML, so this costs a few hundred bytes. */
.fan {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s7);
  padding-bottom: var(--s5);
}

.fan .phone { margin: 0; }

/* On a phone, one phone. Two more at a third of the width would be decoration nobody
   can read, and they would push the fold down past the call to action. */
@media (max-width: 52rem) {
  .fan > *:not(.fan-lead) { display: none; }
  .fan { gap: 0; }
}

@media (min-width: 52rem) {
  .fan > * { flex: 0 0 auto; }
  .fan-side { transform: scale(0.86); opacity: 0.92; }
  .fan-side:first-child { transform: scale(0.86) rotate(-4deg); margin-right: calc(var(--s6) * -1); }
  .fan-side:last-child { transform: scale(0.86) rotate(4deg); margin-left: calc(var(--s6) * -1); }
  .fan-lead { position: relative; z-index: 2; }
}

/* --- the three promises ------------------------------------------------- */

/* A tinted panel over a short heading and two lines. The panel carries the idea as a
   picture so the heading does not have to; the two lines underneath are the whole
   explanation, because a card that needs a paragraph is a card nobody finishes. */
.promises { display: grid; gap: var(--s5); }
@media (min-width: 48rem) { .promises { grid-template-columns: repeat(3, 1fr); } }

.promise .panel {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--canvas-alt);
  display: grid;
  place-items: center;
  padding: var(--s5);
  margin-bottom: var(--s4);
  overflow: hidden;
}

.promise:nth-child(2) .panel { background: var(--soft); border-color: var(--accent-pale); }
.promise:nth-child(3) .panel { background: var(--amber-soft); border-color: var(--amber); }

.promise h3 { font-size: 19px; }
.promise p { color: var(--ink-soft); max-width: none; margin: 0; }

/* The figure inside a panel: a number and its unit, or a short state. Large enough to
   read as the subject of the card rather than as a caption. */
.panel .big {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
}

.panel .big small { display: block; font-size: 14px; font-weight: 600; margin-top: var(--s2); }

/* A strike-through stack: the things this product does not have. */
.panel .struck { display: grid; gap: var(--s2); width: 100%; }

.panel .struck span {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-align: center;
}

/* --- calls to action ---------------------------------------------------- */

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 var(--s4); }

.cta, .cta-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: var(--s3) var(--s6);
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

/* One filled button per view. Two equally loud buttons is the same as none. */
.cta { background: var(--navy); color: var(--on-navy); border: 1px solid var(--navy); }
.cta:hover { transform: translateY(-1px); }

.cta-quiet { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.cta-quiet:hover { border-color: var(--accent-pale); }

@media (prefers-reduced-motion: reduce) { .cta:hover { transform: none; } }

@media (max-width: 30rem) {
  .cta, .cta-quiet { width: 100%; }
}

.cta-note { font-size: 13px; color: var(--ink-muted); margin: 0; }

/* --- marquee ------------------------------------------------------------ */

.marquee {
  --gap: var(--s6);
  position: relative;
  display: flex;
  overflow: hidden;
  gap: var(--gap);
  padding: var(--s4) 0;
  border-block: 1px solid var(--line);
  margin: var(--s7) 0;
  /* Fades the ends so the loop has no visible seam. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  user-select: none;
}

.marquee ul {
  display: flex;
  gap: var(--gap);
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 100%;
  animation: slide 42s linear infinite;
}

.marquee li {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.marquee li::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-pale);
}

@keyframes slide { to { transform: translateX(calc(-100% - var(--gap))); } }

.marquee:hover ul { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee ul { animation: none; }
  .marquee { mask-image: none; overflow-x: auto; }
}

/* --- cards -------------------------------------------------------------- */

.grid { display: grid; gap: var(--s4); }
@media (min-width: 40rem) { .grid.two { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .grid.three { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  background: var(--surface);
}

.card p:last-child { margin-bottom: 0; }
.card p { max-width: none; }

.card-link {
  display: block;
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease;
}

.card-link:hover { border-color: var(--accent-pale); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card-link:hover { transform: none; } }

.card-link .name { font-weight: 700; display: block; margin-bottom: var(--s1); }

/* --- the numbered loop -------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid var(--line-soft);
}

.steps li:first-child { border-top: 0; }

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* The one step the whole product turns on. Exactly one highlight in the list. */
.steps li.key::before { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.steps li.key h3 { color: var(--accent); }

.steps p { margin: 0; }

/* --- "what this is not" ------------------------------------------------- */

.nots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }

.nots li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s3);
  align-items: start;
  font-size: 16px;
}

.nots li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 6px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background:
    linear-gradient(45deg, transparent 44%, var(--ink-muted) 44%, var(--ink-muted) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--ink-muted) 44%, var(--ink-muted) 56%, transparent 56%);
}

/* --- phone mock-ups ----------------------------------------------------- */

.showcase { display: grid; gap: var(--s5); }
@media (min-width: 60rem) { .showcase { grid-template-columns: repeat(3, 1fr); } }

/* Drawn rather than photographed: an HTML mock-up is a few hundred bytes, stays sharp on
   any display, follows the reader's colour scheme, and cannot go stale against a
   screenshot taken from a build that has since changed. */
.phone {
  width: 100%;
  max-width: 264px;
  margin: 0 auto;
  aspect-ratio: 9 / 18;
  border: 8px solid var(--ink);
  border-radius: 34px;
  background: var(--canvas-alt);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  overflow: hidden;
  position: relative;
}

.phone::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink);
  opacity: 0.25;
}

.phone .screen-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  margin: var(--s3) 0 0;
  letter-spacing: 0.04em;
}

.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--s3);
  font-size: 11px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.tile b { display: block; color: var(--ink); font-size: 12px; margin-bottom: 2px; }
.tile.soft { background: var(--soft); border-color: var(--accent-pale); color: var(--navy-text); }
.tile.done { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-ink); }

.pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px var(--s2);
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-muted);
}

.pill.on { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.pill.amber { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-ink); }

.bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 42px; }
.bar-chart i { flex: 1; background: var(--accent-pale); border-radius: 2px 2px 0 0; }
.bar-chart i.on { background: var(--accent); }

.ring { display: flex; gap: 4px; }
.ring i { width: 100%; height: 5px; border-radius: 999px; background: var(--accent-pale); }
.ring i.on { background: var(--accent); }
.ring i.amber { background: var(--amber); }

.phone-caption { text-align: center; font-size: 13px; color: var(--ink-muted); margin: var(--s3) 0 0; }

/* --- proof -------------------------------------------------------------- */

.figures { display: grid; gap: var(--s4); }
@media (min-width: 40rem) { .figures { grid-template-columns: repeat(3, 1fr); } }

.figure { border-left: 2px solid var(--accent); padding-left: var(--s4); }
.figure .value { font-size: clamp(26px, 4vw, 34px); font-weight: 800; line-height: 1.2; display: block; }
.figure .label { font-size: 14px; color: var(--ink-soft); }

/* --- tables, FAQ, references ------------------------------------------- */

table { width: 100%; border-collapse: collapse; margin: var(--s4) 0; font-size: 14px; display: block; overflow-x: auto; }
th, td { text-align: left; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
td:last-child, th:last-child { white-space: normal; min-width: 14rem; }

details { border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; gap: var(--s3); align-items: baseline; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "＋"; color: var(--accent); font-weight: 700; }
details[open] summary::before { content: "−"; }
details p { margin: var(--s3) 0 0; color: var(--ink-soft); max-width: var(--measure); }

ul.plain, ul.links { padding-left: 1.2em; }
ul.plain li, ul.links li { margin-bottom: var(--s2); }

.refs ol { padding-left: 1.2em; }
.refs li { margin-bottom: var(--s5); }
.refs p { margin: var(--s2) 0 0; font-size: 14px; color: var(--ink-soft); }
.refs strong { color: var(--ink); }

.close { margin-top: var(--s8); padding: var(--s6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--canvas-alt); }

footer { border-top: 1px solid var(--line); padding: var(--s6) var(--s4); font-size: 13px; color: var(--ink-muted); }
footer nav { display: flex; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s3); max-width: var(--page); margin-inline: auto; }
footer .fine { max-width: var(--page); margin-inline: auto; }

/* --- motion ------------------------------------------------------------- */

/* Scroll-driven, so it costs no JavaScript. Browsers without animation-timeline simply
   show the element — the content is never hidden behind an animation that may not run. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    /* Parallax: the mock-ups drift a little slower than the page. Transform only, so it
       never triggers layout. */
    .drift {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes drift {
  from { transform: translateY(18px); }
  to { transform: translateY(-18px); }
}

/* Read by the inline script, so the one behaviour that needs JavaScript honours the same
   preference the CSS does. */
@media (prefers-reduced-motion: reduce) { :root { --motion: none; } }

@media print {
  .bar, .marquee, .cta-row { display: none; }
  body { background: #fff; color: #000; }
}