:root {
  color-scheme: light;
  --ink: #25332c;
  --muted: #67756d;
  --cream: #fbf6e9;
  --paper: rgba(255, 253, 247, 0.9);
  --sage: #607f6d;
  --sage-soft: #dce8df;
  --gold: #c79a52;
  --line: rgba(37, 51, 44, 0.13);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  line-height: 1.8;
  background:
    radial-gradient(circle at 12% 4%, rgba(199, 154, 82, 0.2), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(96, 127, 109, 0.18), transparent 24rem),
    var(--cream);
}

a {
  color: #3f6e57;
  text-underline-offset: 0.18em;
}

.shell {
  width: min(880px, calc(100% - 32px));
  margin: 0 auto;
  padding: 56px 0 72px;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 7vw, 70px);
  border: 1px solid var(--line);
  border-radius: 34px 34px 110px 34px;
  background: var(--paper);
  box-shadow: 0 24px 70px rgba(70, 67, 52, 0.12);
}

.hero::after {
  position: absolute;
  right: -20px;
  bottom: -35px;
  width: 180px;
  height: 180px;
  border-radius: 46% 54% 55% 45%;
  background: var(--sage-soft);
  content: "";
  transform: rotate(18deg);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--sage);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1,
h2 {
  line-height: 1.35;
}

h1 {
  margin: 0;
  font-size: clamp(2.25rem, 9vw, 4.8rem);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.lead {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 18px;
  margin-top: 24px;
}

main > * {
  min-width: 0;
}

.card {
  padding: 28px clamp(24px, 5vw, 42px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
}

.card h2 {
  margin: 0 0 10px;
  color: var(--sage);
  font-size: 1.25rem;
}

.card p,
.card ul {
  margin-top: 8px;
  margin-bottom: 8px;
}

.card li + li {
  margin-top: 6px;
}

.contact {
  overflow-wrap: anywhere;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 700;
}

/* The one link people are most likely to want: a filled button rather than a line of text. */
.store {
  display: inline-block;
  padding: 0.7em 1.4em;
  border-radius: 999px;
  background: #3f6e57;
  color: #fffaf2;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 700;
  text-decoration: none;
}

.store:hover,
.store:focus-visible {
  background: #345c48;
}

footer {
  padding: 28px 8px 0;
  color: var(--muted);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 560px) {
  .shell {
    padding-top: 22px;
  }

  .hero {
    border-radius: 24px 24px 70px 24px;
  }
}

/* The diagram sits inside the article's own column, like every other figure. It is a preview at
   this size: tapping it opens the file, where a browser can zoom as far as anyone wants. */
.arch-figure {
  margin: 1.6em 0;
  width: 100%;
}

.arch-frame {
  display: block;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  overflow: hidden;
}

.arch-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.arch-figure figcaption {
  margin-top: 0.7em;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

/* The header carries the icon, the name and a phone showing the app, so a first-time visitor can see
   what this is before reading a word. Two columns on a desktop; stacked, phone last, on a narrow one. */
.hero {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
}

.hero-text {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.hero-icon {
  width: clamp(64px, 11vw, 96px);
  height: auto;
  margin-bottom: 18px;
  border-radius: 22%;
  box-shadow: 0 10px 24px rgba(70, 67, 52, 0.18);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
}

.ghost {
  display: inline-block;
  padding: 0.7em 1.4em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 700;
  text-decoration: none;
}

.ghost:hover,
.ghost:focus-visible {
  background: #ffffff;
}

.hero-phone {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: clamp(150px, 26vw, 232px);
}

/* A phone drawn in CSS rather than shipped as a picture frame: it stays sharp at any size, and the
   screenshot inside it can be swapped by changing one img. */
.phone {
  overflow: hidden;
  padding: 7px;
  border: 3px solid #25332c;
  border-radius: 34px;
  background: #25332c;
  box-shadow: 0 22px 46px rgba(37, 51, 44, 0.26);
  transform: rotate(3deg);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

@media (max-width: 720px) {
  .hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-phone {
    width: min(210px, 56%);
    align-self: center;
    margin-top: 10px;
  }
}