/* Komame (English). Same parts as the Japanese page (../../komame/review.css), retuned to the English
   Loupe page: warm charcoal edit-suite, Bricolage + Instrument Sans, pink with amber, Apple's pacing —
   a centred hero, one idea per screen. No character art. */
:root {
  --ink: #1b1917;
  --ink-2: #24211e;
  --ink-3: #2e2a26;
  --pink: #ff4f6d;
  --pink-deep: #d93556;
  --cyan: #ffb347;
  --paper: #f5f1ec;
  --white: #f5f1ec;
  --mute-d: #a39a91;
  --mute-l: #6e655d;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --jp: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --tc: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
  --wrap: min(1120px, 100% - 40px);
}
body { font: 400 18px/1.6 var(--jp); }
h1, h2 { font-weight: 700; letter-spacing: -0.03em; }
.top { background: rgba(27, 25, 23, .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: rgba(255, 255, 255, .06); }
.brand { font: 700 18px/1 var(--display); letter-spacing: -0.02em; }
.sib, .player .bar .track i, .tbl, .sib-card, .verdict { border-color: #3a3531; }
.top nav a { font-weight: 500; }
.btn { font: 600 16px/1 var(--jp); }

/* centred hero, the frame below like a product shot */
.hero { padding: 96px 0 30px; text-align: center; }
.hero-grid { grid-template-columns: 1fr; gap: 44px; justify-items: center; }
.hero h1 { font-size: clamp(42px, 7vw, 96px); line-height: 1.02; }
.hero .lede { margin: 22px auto 30px; max-width: 34em; color: #d9d2ca; }
.hero .cta { justify-content: center; }
.hero .player { width: min(920px, 100%); text-align: left; }
.status { color: var(--cyan); border-color: rgba(255, 179, 71, .45); }
.status::before { background: var(--cyan); }
.tape { background: var(--paper); transform: rotate(-1.5deg); }

.story h2, .feat h2, .vs h2 { line-height: 1.1; }
.big small { font: 700 .24em var(--display); }
.kicker { font-family: var(--tc); background: var(--cyan); color: var(--ink); }
.feat:nth-of-type(even) { background: var(--ink-2); }
.feat, .faq { border-top-color: #2c2926; }
.tbl th, .tbl td { border-bottom-color: #2c2926; }
.tbl .me { background: rgba(255, 79, 109, .1); }
.ticks li::before { color: var(--cyan); }
.price { background: var(--paper); }
.signup { background: var(--pink); }
.signup .btn { background: var(--ink); }
.faq summary::before { color: var(--cyan); }
.wipe .old { filter: brightness(.5) saturate(.55) contrast(.9); }
@media (max-width: 880px) { .hero { padding-top: 48px; } }