/* ==========================================================================
   MonsterPin — Zen-Minimal Design System
   Shared across all production pages. Washi-paper calm, sumi-ink contrast,
   warm amber brand accent. All animation is progressive-enhancement only.
   ========================================================================== */

:root {
  /* --- Palette: washi paper × sumi ink × amber --- */
  --washi:        #F7F4ED;   /* paper background          */
  --washi-deep:   #EFEAE0;   /* recessed panels           */
  --washi-card:   #FCFAF5;   /* raised cards              */
  --sumi:         #1A1714;   /* ink — primary text        */
  --sumi-soft:    #4A443C;   /* ink — body                */
  --sumi-faint:   #847C70;   /* ink — muted/captions      */
  --amber:        #E8A23D;   /* brand accent              */
  --amber-deep:   #C8822A;   /* brand accent, pressed     */
  --amber-wash:   rgba(232,162,61,.12);
  --celadon:      #8FA99B;   /* secondary cool accent     */
  --line:         rgba(26,23,20,.12);
  --line-soft:    rgba(26,23,20,.07);

  /* --- Type --- */
  --serif: "Zen Old Mincho", "Shippori Mincho", "Noto Serif JP", Georgia, "Times New Roman", serif;
  --sans:  "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, "PingFang TC", "Noto Sans TC", "Hiragino Sans", sans-serif;

  /* --- Rhythm --- */
  --maxw: 1140px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(72px, 11vh, 140px);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  /* --- Elevation (soft, paper-like) --- */
  --shadow-sm: 0 1px 2px rgba(26,23,20,.05), 0 4px 12px rgba(26,23,20,.04);
  --shadow:    0 2px 6px rgba(26,23,20,.06), 0 18px 44px rgba(26,23,20,.09);
  --shadow-lg: 0 8px 18px rgba(26,23,20,.08), 0 36px 80px rgba(26,23,20,.14);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--sumi-soft);
  background: var(--washi);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* faint washi fibre texture via data-URI noise (no extra request) */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-blend-mode: multiply;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* --- Typography --- */
h1, h2, h3 { font-family: var(--serif); color: var(--sumi); font-weight: 600; line-height: 1.18; letter-spacing: .005em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
p  { color: var(--sumi-soft); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--sumi-soft); }

.eyebrow {
  font-family: var(--sans);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--amber-deep);
  display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--amber); display: inline-block; }

/* --- Layout --- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--paper { background: var(--washi-deep); }
.section--ink {
  background: var(--sumi);
  color: #E9E3D7;
}
.section--ink h2, .section--ink h3 { color: #FBF7EE; }
.section--ink p { color: #C3BBAB; }

.rule { height: 1px; background: var(--line); border: 0; }
.stack-sm > * + * { margin-top: .6rem; }
.stack > * + * { margin-top: 1.1rem; }
.center { text-align: center; }
.measure { max-width: 40ch; }
.measure-wide { max-width: 60ch; }

.section-head { max-width: 60ch; margin-inline: auto; text-align: center; margin-bottom: clamp(40px, 6vh, 72px); }
.section-head .lead { margin-top: 1rem; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .85em 1.6em;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  letter-spacing: .01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--sumi); color: var(--washi); box-shadow: var(--shadow); }
.btn--primary:hover { background: #000; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--amber { background: var(--amber); color: var(--sumi); box-shadow: 0 8px 22px rgba(232,162,61,.32); }
.btn--amber:hover { background: var(--amber-deep); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--sumi); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--sumi); background: rgba(26,23,20,.03); }
.btn--on-ink { background: var(--washi); color: var(--sumi); }
.btn--on-ink:hover { background: #fff; transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* --- Nav --- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 14px var(--gutter);
  background: color-mix(in oklab, var(--washi) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__brand { display: flex; align-items: center; gap: .6em; font-family: var(--serif); font-weight: 600; color: var(--sumi); font-size: 1.15rem; }
.nav__brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav__links { display: flex; align-items: center; gap: 1.8rem; }
.nav__links a { font-size: .94rem; color: var(--sumi-soft); transition: color .2s; }
.nav__links a:hover { color: var(--sumi); }
@media (max-width: 760px) { .nav__links a:not(.btn) { display: none; } }

/* --- Cards & grids --- */
.grid { display: grid; gap: clamp(18px, 2.5vw, 28px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--washi-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line); }
.card__num { font-family: var(--serif); font-size: 1.05rem; color: var(--amber-deep); letter-spacing: .1em; }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .98rem; }

/* Numbered "how it works" step */
.step__index {
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--amber);
  color: var(--amber-deep);
  font-family: var(--serif); font-size: 1.1rem;
}

/* Pill / tag */
.pill {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .35em .85em; border-radius: 999px;
  background: var(--amber-wash); color: var(--amber-deep);
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
}

/* --- Comparison table --- */
.compare { width: 100%; border-collapse: collapse; background: var(--washi-card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: .96rem; }
.compare thead th { font-family: var(--serif); color: var(--sumi); background: var(--washi-deep); }
.compare td:first-child { color: var(--sumi); font-weight: 500; }
.compare .yes { color: var(--amber-deep); font-weight: 600; }
.compare .no { color: var(--sumi-faint); }
.compare tr:last-child td { border-bottom: 0; }

/* --- FAQ (details/summary) --- */
.faq { max-width: 760px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 20px 4px; font-family: var(--serif); font-size: 1.1rem; color: var(--sumi);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; color: var(--amber-deep); font-size: 1.3rem; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 22px; font-size: .98rem; }

/* --- Footer --- */
.footer { background: var(--sumi); color: #B8B0A2; padding-block: clamp(48px, 7vh, 80px); }
.footer a { color: #D8D0C2; transition: color .2s; }
.footer a:hover { color: var(--amber); }
.footer__grid { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; }
.footer__brand { font-family: var(--serif); color: #FBF7EE; font-size: 1.3rem; }
.footer small { color: #877F72; }

/* --- Scroll-reveal base (GSAP toggles these via [data-reveal]) --- */
[data-reveal] { opacity: 0; transform: translateY(28px); will-change: transform, opacity; }
.is-revealed [data-reveal], [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Respect reduced motion: never hide content, never animate */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}