/* Tsukiai: the site's one stylesheet, on the arcade kit (look.css). Night navy, moon gold, cream paper. */
:root {
  --display: 'Bricolage Grotesque', 'Hiragino Sans', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic', system-ui, sans-serif;
  --text: 'Figtree', 'Hiragino Sans', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic', system-ui, sans-serif;
  --serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --accent: #c9a44c;
  --gold-2: #e7c76d;
  --night: #10223d;
  --night-2: #1b3358;
  --night-3: #24426e;
  --moon: #f6ecd0;
  --tint: #fbecc3;
  --h1: clamp(1.68rem, 7vw, 3.15rem);
  --h2: clamp(1.5rem, 4.2vw, 2.5rem);
  --rhythm: clamp(3rem, 8vw, 6.5rem);
  --link: var(--ink);
}
.hero-grid > *, .what-grid > *, .price-grid > *, .result > *, .split > * { min-width: 0; }
.top .brand, .foot .brand { min-height: 44px; }
.foot nav a { display: inline-block; padding: .7em 0; }
.linkish { min-height: 44px; display: inline-flex; align-items: center; }
.carousel-dots button { width: 40px; height: 44px; padding: 18px 12px; background-clip: content-box; }
.carousel-dots button[aria-current="true"] { width: 56px; }
.carousel-nav [data-prev], .carousel-nav [data-next] { width: 48px; height: 48px; }
/* results that arrive after the page loaded: one after another */
.arrive > * { animation: arrive .45s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } }
html { scroll-padding-top: 80px; }
body { line-break: strict; }
h1, h2, h3 { word-break: auto-phrase; }
::selection { background: var(--accent); color: var(--night); }
input { caret-color: var(--night); }
.serif { font-family: var(--serif); }
.yen { font-family: var(--display); }

/* top bar */
.top .brand img { border-radius: 10px; border: 2px solid var(--ink); }
.top .brand span { font-size: 1.25rem; }
.top-right { display: flex; align-items: center; gap: .9rem; }
.top-right .login { color: var(--ink); font-weight: 700; text-decoration: none; padding: .6em .2em; }
.top-right .login:hover { text-decoration: underline; }
.top .btn { min-height: 46px; padding: 0 1.1em; }
@media (max-width: 420px) { .top .brand span { font-size: 1.05rem; } .top .btn { padding: 0 .9em; font-size: .92rem; } .top-right { gap: .5rem; } }

/* the hero */
.hero { padding-block: clamp(.5rem, 2vw, 1.5rem) 0; overflow: hidden; border-bottom: 3px solid var(--ink); }
.hero-grid { display: grid; gap: 1.6rem; align-items: start; }
.hero h1 { margin: .2em 0 .45em; }
.hero .sub { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ink); max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.2rem 0 .4rem; }
.cta-row .note { font-weight: 700; display: inline-flex; align-items: center; gap: .4em; }
.stage { position: relative; height: 560px; max-height: 600px; }
.scene { position: absolute; inset: 0 0 auto 0; height: 420px; background: var(--night); border: 3px solid var(--ink);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--card-shadow); }
.scene svg { width: 100%; height: 100%; }
.phone { position: absolute; left: 50%; top: 70px; width: min(320px, 84%); transform: translateX(-50%); background: var(--ink);
  border: 3px solid var(--ink); border-radius: 42px 42px 0 0; padding: 10px 10px 0; box-shadow: 8px 8px 0 var(--accent); }
.phone .screen { background: var(--bg); border-radius: 32px 32px 0 0; height: 480px; overflow: hidden; }
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1rem .6rem;
  font: 800 .85rem/1 var(--display); }
.app-bar .badge { font-size: .7rem; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; min-height: min(700px, calc(100vh - 84px)); }
  .hero-copy { padding-bottom: 3rem; }
  .stage { height: 600px; align-self: end; }
  .scene { height: 460px; top: 20px; }
  .phone { left: 8%; transform: none; top: 120px; width: 330px; }
}

/* the card, as the product draws it (HTML version for pages without scripts) */
.mooncard { background: var(--night); color: var(--moon); border-radius: 18px; margin: 0 .8rem; padding: 1.1rem 1rem 1.2rem;
  text-align: center; border: 3px solid var(--ink); position: relative; }
.app-bar .badge, .mooncard .rd { font-size: .78rem; }
.mooncard .k { font: 600 .78rem/1.3 var(--text); color: var(--gold-2); letter-spacing: .08em; }
.mooncard svg.moonart { width: 132px; height: 132px; margin: .6rem auto .5rem; }
.mooncard .nm { font: 700 2rem/1.1 var(--serif); color: #fff8e6; }
.mooncard .rd { font-size: .72rem; color: var(--gold-2); margin-top: .2rem; }
.mooncard .ln { font: 600 .98rem/1.5 var(--serif); margin: .7rem 0 .3rem; }
.mooncard .who { font-size: .78rem; color: #d9cfb6; }
.mooncard .months { position: absolute; top: .7rem; right: .7rem; background: var(--accent); color: var(--night);
  font: 800 .72rem/1 var(--display); padding: .35em .6em; border-radius: 999px; border: 2px solid var(--ink); }
.rows { list-style: none; margin: .8rem .8rem 0; padding: 0; }
.rows li { display: flex; align-items: center; gap: .7rem; padding: .62rem .4rem; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  font-size: .9rem; }
.rows li .i { color: var(--accent); stroke: var(--ink); }
.rows li b { margin-left: auto; font-family: var(--display); font-weight: 800; text-align: right; }

/* sections */
.sec-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.sec-head h2 { margin: 0; }
.rounds { display: grid; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.round { background: var(--surface); border: 3px solid var(--ink); border-radius: var(--r); padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--card-shadow); position: relative; }
.round .top-line { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.round .i-box { border: 3px solid var(--ink); background: var(--tint); color: var(--ink); }
.round h3 { font-size: 1.3rem; margin: 0 0 .4rem; }
.round p { margin: 0; }
.round .eg { margin-top: .9rem; background: var(--bg-2); border-radius: 12px; padding: .6rem .8rem; font-weight: 600; font-size: .92rem; }
@media (min-width: 860px) { .rounds { grid-template-columns: repeat(3, 1fr); } }

#how { background: var(--bg); }
#price { background: var(--tint); border-block: 3px solid var(--ink); }
.price-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .price-grid { grid-template-columns: .9fr 1.1fr; gap: 3rem; } }
.plan { background: var(--surface); border: 3px solid var(--ink); border-radius: var(--r); box-shadow: var(--card-shadow); overflow: hidden; }
.plan .plan-top { background: var(--night); color: var(--moon); padding: 1.3rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.plan .plan-top h3 { margin: 0; color: #fff8e6; }
.plan .amount { font: 800 clamp(2.6rem, 6vw, 3.4rem)/1 var(--display); letter-spacing: -.03em; }
.plan .amount small { font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.plan .plan-body { padding: 1.3rem 1.4rem 1.5rem; }
.ticks { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .55rem; }
.ticks li { display: flex; gap: .6rem; align-items: flex-start; }
.ticks .i { color: var(--good); margin-top: .15em; }
.plan .fine { font-size: .9rem; margin: .9rem 0 0; }
#faq h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
.qa { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.qa li { background: var(--surface); border: 3px solid var(--ink); border-radius: 16px; padding: 1rem 1.1rem; }
.qa p { margin: 0; }
.more { display: inline-flex; align-items: center; gap: .4em; margin-top: 1.1rem; min-height: 44px; font-weight: 700; color: var(--ink); }

#what { background: var(--night); color: var(--moon); }
#what h2 { color: #fff8e6; }
#what .lead { font-size: 1.08rem; max-width: 40em; }
.what-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .what-grid { grid-template-columns: .8fr 1.2fr; gap: 3rem; } }
.month-card { background: var(--night-2); border: 3px solid var(--ink); border-radius: 20px; padding: 1.1rem; text-align: center;
  box-shadow: 0 6px 0 #050d1a; color: var(--moon); }
.month-card .when { display: flex; justify-content: space-between; font: 700 .8rem/1 var(--display); color: var(--gold-2); }
.month-card svg { width: 120px; height: 120px; margin: .8rem auto; }
.month-card .nm { font: 700 1.6rem/1.1 var(--serif); color: #fff8e6; }
.month-card .meta { font-size: .85rem; margin-top: .4rem; color: #d9cfb6; }
.month-card .badge { background: var(--accent); }
#what .carousel-nav button { background: var(--night-2); color: var(--moon); border-color: var(--moon); }
#what .carousel-dots button { background: #50607a; }
#what .carousel-dots button[aria-current="true"] { background: var(--accent); }
.mail { margin-top: 1.4rem; color: var(--ink); background: var(--surface); }
.mail .body p { margin: 0 0 .7rem; font-size: .95rem; }
.mail .subj { font: 800 1.05rem/1.4 var(--display); }
.mail .serif { font-size: 1.05rem; font-weight: 600; }
.mail .btn { pointer-events: none; min-height: 44px; font-size: .92rem; }
.compare { margin-top: 1.6rem; background: var(--surface); border: 3px solid var(--ink); border-radius: var(--r); padding: 1.1rem 1.3rem; }
.compare h3 { margin: 0 0 .6rem; font-size: 1.1rem; }
.compare ul { list-style: none; margin: 0; padding: 0; }
.compare li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .55rem 0; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.compare li:last-child { border-bottom: 0; font-weight: 700; }
.compare b { font-family: var(--display); }
.mail-line { display: flex; align-items: center; gap: .6rem; background: var(--night-2); border: 3px solid #050d1a; border-radius: 14px;
  padding: .8rem 1rem; font-weight: 700; margin-top: 1.2rem; }
.mail-line .i { color: var(--accent); }

.band { background: var(--accent); border-block: 3px solid var(--ink); text-align: center; padding-block: clamp(3rem, 7vw, 5rem); }
.band h2 { margin-bottom: 1.2rem; }
.band .btn { background: var(--night); color: #fff8e6; }

footer.site { border-top: 0; background: var(--bg); color: var(--ink); }
.foot { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.foot .brand { display: flex; align-items: center; gap: .5rem; font: 800 1.1rem/1 var(--display); color: var(--ink); text-decoration: none; }
.foot .brand img { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--ink); }
.foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.foot a { color: var(--ink); }
.credit { font-size: .82rem; color: var(--ink-2); margin: 1rem 0 0; max-width: none; }

/* the questions page */
.doc { padding-block: 2rem 4rem; }
.doc h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.doc h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin-top: 2.6rem; }
.doc-grid { display: grid; gap: 1.2rem; }
@media (min-width: 860px) { .doc-grid { grid-template-columns: 1fr 1fr; } }

/* the product's pages */
.page h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); }
.formcard { background: var(--surface); border: 3px solid var(--ink); border-radius: var(--r); padding: 1.4rem; box-shadow: var(--card-shadow); }
.formcard h2 { font-size: 1.3rem; }
.row2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
.hint { font-size: .85rem; color: var(--ink-2); margin: .3rem 0 0; }
.msg { min-height: 1.4em; margin: .6rem 0 0; }
.linkish { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; font-weight: 700; cursor: pointer; }
.result { display: grid; gap: 1.6rem; align-items: start; margin-top: 2rem; }
@media (min-width: 900px) { .result { grid-template-columns: 420px 1fr; } }
.cardview { background: var(--night); border: 3px solid var(--ink); border-radius: var(--r); padding: 12px; box-shadow: var(--card-shadow); }
.cardview canvas { width: 100%; height: auto; display: block; border-radius: 12px; aspect-ratio: 9 / 16; background: var(--night); }
.facts { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 3px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.facts li { display: flex; gap: .8rem; align-items: center; padding: .8rem 1rem; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.facts li:last-child { border-bottom: 0; }
.facts .i { color: var(--ink); }
.facts b { margin-left: auto; text-align: right; font-family: var(--display); }
.moon-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .8rem; }
.moon-title .nm { font: 700 clamp(2.2rem, 6vw, 3.2rem)/1 var(--serif); }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.2rem 0; }
.actions .btn { min-height: 48px; }
.cards-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); list-style: none; padding: 0; margin: 1rem 0 0; }
.cards-grid a { display: block; text-decoration: none; color: var(--moon); background: var(--night); border: 3px solid var(--ink); border-radius: 18px;
  padding: 1rem; box-shadow: var(--card-shadow); transition: transform .2s ease; }
.cards-grid a:hover { transform: translate(-2px, -2px); }
.cards-grid .nm { font: 700 1.4rem/1.2 var(--serif); color: #fff8e6; }
.cards-grid .t { font: 800 .82rem/1.2 var(--display); color: var(--gold-2); }
.cards-grid .d { font-size: .82rem; color: #d9cfb6; margin-top: .3rem; }
.cards-grid svg { width: 64px; height: 64px; margin: .5rem 0; }
.statusbar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; background: var(--tint); border: 3px solid var(--ink);
  border-radius: var(--r); padding: 1rem 1.2rem; margin: 1.4rem 0; }
.statusbar p { margin: 0; flex: 1 1 260px; font-weight: 600; }
.empty { text-align: center; padding: 2rem 1rem; background: var(--bg-2); border-radius: var(--r); }
.split { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.toggle { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.toggle input { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); }
.danger { background: #fff; color: var(--bad); border-color: var(--bad); box-shadow: 0 5px 0 var(--bad); }
.formcard + p { margin-top: 1.4rem; }
main.page { min-height: calc(100vh - 80px); }
.loading { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; }