/* The landing page. Big two-tone headlines (the store art's voice), one
   long hill line, phones drawn with a thin ink bezel and no shadow. */
.bar-soon { color: var(--ink-3); }

.headline, .feature h2, .sheet h2 {
  margin: 0;
  font-weight: 520;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.b { color: var(--ink-2); }
html[lang="ja"] .headline, html[lang="ja"] .feature h2, html[lang="ja"] .sheet h2 { letter-spacing: 0; line-height: 1.3; font-weight: 600; }

/* hero: the words left, the film right */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  padding: 48px var(--gutter) 24px;
}
.headline { font-size: clamp(42px, 5.6vw, 88px); }
html[lang="ja"] .headline { font-size: clamp(34px, 4.8vw, 72px); }
.promise { margin: 28px 0 0; }
.intro { max-width: 34em; margin: 28px 0 0; font-size: 17px; color: var(--ink-2); }
.status { margin: 28px 0 0; color: var(--ink); }

.film { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* the film is the store preview: it carries its own phone and headline */
.device { width: min(100%, 360px); }
.shot {
  width: min(100%, 320px);
  border: 7px solid var(--ink);
  border-radius: 44px;
  background: var(--paper);
  overflow: hidden;
}
/* show only the phone: the preview's own headline sits above it (the page
   already says it), and its paper is a shade lighter, so the edges fade out */
.device video {
  width: 100%;
  aspect-ratio: 886 / 1520;
  object-fit: cover;
  object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 94%, transparent);
  mask-composite: intersect;
}
.snd { padding: 6px 2px; border: 0; background: none; cursor: pointer; color: var(--ink-2); }
.snd:hover { color: var(--ink); }
.snd[aria-pressed="true"] .snd-off, .snd[aria-pressed="false"] .snd-on { display: none; }

/* the long field line */
.hill { padding: 8px 0 0; }
.hill svg { display: block; width: 100%; height: 120px; }
.hill-line { fill: none; stroke: var(--ink); stroke-width: 1; }
.hill-fill { fill: var(--ink); opacity: 0.07; }
.hill-base { stroke: var(--ink); stroke-width: 0.8; opacity: 0.7; }
.hill circle { fill: var(--ink); }

/* features: words and a phone, alternating sides */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  padding: 96px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.feature .shot { justify-self: center; height: auto; }
.feature:nth-of-type(odd) .feature-text { order: 2; }
.feature-text { max-width: 30em; }
.feature h2 { margin: 14px 0 22px; font-size: clamp(32px, 4.2vw, 60px); }
html[lang="ja"] .feature h2 { font-size: clamp(28px, 3.4vw, 46px); }
.feature-text > p:last-child { margin: 0; font-size: 16px; color: var(--ink-2); }

/* printed sheets: the app's own words in rows */
.sheet { padding: 96px var(--gutter); border-bottom: 1px solid var(--line); }
.sheet h2 { margin: 14px 0 40px; font-size: clamp(32px, 4.2vw, 60px); }
html[lang="ja"] .sheet h2 { font-size: clamp(28px, 3.4vw, 46px); }
.hints, .packs {
  display: grid;
  grid-template-columns: minmax(140px, 0.6fr) minmax(0, 2fr);
  max-width: 900px;
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
}
.hints dt, .hints dd, .packs dt, .packs dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.hints dt, .packs dt { color: var(--ink); font-weight: 500; }
.hints dd, .packs dd { color: var(--ink-2); }
.packs dt { text-transform: uppercase; letter-spacing: 0.12em; }
.sheet-foot { margin: 28px 0 0; color: var(--ink-3); }

/* closing */
.closing { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 120px var(--gutter); text-align: center; }
.closing img { width: 120px; height: 120px; margin-bottom: 18px; }
.closing p { margin: 0; color: var(--ink-2); }
.closing-name { font-family: var(--mono); font-size: 28px; font-weight: 500; color: var(--ink) !important; }
.closing .print { margin-top: 18px; color: var(--ink); }

@media (max-width: 820px) {
  .hero, .feature { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-top: 24px; }
  .feature { padding: 72px var(--gutter); }
  .feature:nth-of-type(odd) .feature-text { order: 0; }
  .shot { width: min(100%, 280px); border-width: 6px; border-radius: 38px; }
  .device { width: min(100%, 320px); }
  .hints, .packs { grid-template-columns: 1fr; }
  .hints dd, .packs dd { padding-top: 0; border-top: 0; }
  .sheet { padding: 72px var(--gutter); }
}
@media (max-width: 420px) {
  .bar-soon { display: none; }
}