/* ==========================================================================
   MASKED HANMA · home.css — main landing ("Hanma style": newsprint, ink, red)
   ========================================================================== */

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--ink) 9%, transparent), transparent 60%),
    var(--paper);
  border-bottom: var(--bw) solid var(--line);
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: clamp(600px, calc(92vh - var(--header-h)), 880px);
  padding-block: 56px 80px;
  pointer-events: none;
}
.hero__copy { width: min(47%, 610px); pointer-events: auto; }
.hero__eyebrow { display: inline-block; padding: 6px 10px; margin-bottom: 22px; background: var(--ink); color: var(--paper); }
.hero__title {
  display: grid;
  font-size: clamp(3.2rem, 0.6rem + 6vw, 7.4rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero__line { display: block; animation: slam 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) both; transform-origin: 0 80%; }
.hero__line--red {
  color: var(--red);
  text-shadow: 0.055em 0.055em 0 var(--ink);
  transform-origin: 10% 80%;
  animation-delay: 0.08s;
}
.hero__lead { margin-top: 28px; max-width: 33ch; font-weight: 500; }
.hero__copy .btn-row { margin-top: 32px; }

/* the art panel: a slanted manga panel (コマ) with a real ink border */
.hero__art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  z-index: 1;
  background: var(--ink);
  clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%);
}
.hero__art-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--white);
  clip-path: polygon(calc(17% + 8px) 0, 100% 0, 100% 100%, 8px 100%);
}
.hero__kanji {
  position: absolute;
  top: 3%;
  right: 2%;
  z-index: 1;
  writing-mode: vertical-rl;
  font-family: var(--f-brush);
  font-size: clamp(8rem, 2rem + 17vw, 20rem);
  line-height: 0.85;
  color: var(--red);
}
.hero__vertical {
  position: absolute;
  top: 6%;
  left: 21%;
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--f-display);
  font-size: 0.95rem;
  letter-spacing: 0.35em;
  color: var(--ink);
}
.hero__figure {
  position: absolute;
  left: 12%;
  right: 0;
  bottom: 0;
  height: 90%;
  z-index: 3;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.hero__figure img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom;
  animation: rise 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) both 0.1s;
}
.hero__bubble { top: 5%; left: 29%; --tail-x: 62%; --tail-skew: -20deg; }
.hero__sfx { bottom: 9%; left: 21%; --sfx-rot: -12deg; animation: shake 0.5s ease 0.55s 2 both; }

/* ---------- about ---------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.about__art { position: relative; margin-bottom: 20px; }
.about__photo { aspect-ratio: 4 / 5; }
.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(1) contrast(1.18) brightness(1.02);
  transition: filter 0.5s ease;
}
.about__caption {
  position: absolute;
  left: -14px;
  bottom: -20px;
  padding: 12px 16px;
  --tone: rgba(21, 18, 18, 0.2);
  background-color: var(--paper);
}
.about__sfx { top: -34px; right: -8px; --sfx-rot: 9deg; --sfx-fill: var(--red); --sfx-stroke: var(--paper); }
.about__copy .sec-head { margin-bottom: 28px; }
.creds { display: grid; margin-block: 32px; border-bottom: 3px solid var(--line); }
.creds li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-top: 3px solid var(--line); }
.creds__k { font-family: var(--f-brush); font-size: 2.6rem; line-height: 1; color: var(--red); text-align: center; }
.creds strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.1rem; text-transform: uppercase; }
.creds span:not(.creds__k) { color: var(--muted); font-size: var(--t-s); }
.social span:not([aria-hidden]) { font-weight: 500; color: var(--muted); }
.social:hover span:not([aria-hidden]) { color: inherit; }

/* ---------- proof ---------- */
.proof { background: var(--paper-2); border-block: var(--bw) solid var(--line); }
.proof__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gap);
  align-items: start;
}
.compare {
  width: 100%;
  --pos: 52%;
  aspect-ratio: 5 / 6;
  background: var(--ink);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}
.compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; pointer-events: none; }
.compare__top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 6px;
  margin-left: -3px;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--white);
  pointer-events: none;
}
.compare__handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  padding: 10px 12px;
  background: var(--red);
  color: var(--white);
  border: 3px solid var(--ink);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.compare:focus-within .compare__handle span { outline: 3px solid var(--white); outline-offset: 2px; }
.compare__range { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.compare__tag {
  position: absolute;
  top: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--ink);
  color: var(--white);
  border: 2px solid var(--white);
  font-stretch: 75%;
  font-weight: 800;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
.compare__tag b { font-size: 1.1rem; letter-spacing: 0; font-weight: 400; }
.compare__tag--l { left: 14px; }
.compare__tag--r { right: 14px; background: var(--red); }

.proof__side { display: grid; gap: 22px; align-content: start; }
.proof__quote {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.3rem);
  line-height: 1.12;
  text-transform: uppercase;
}
.proof__quote span { color: var(--red); }
.proof__text { color: var(--muted); max-width: 44ch; }
.reel { width: min(100%, 300px); aspect-ratio: 9 / 16; background: var(--ink); margin: 6px 0 0; }
.reel__video { width: 100%; height: 100%; object-fit: cover; }
.reel__toggle {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border: 4px solid var(--ink);
  background: var(--red);
  color: var(--white);
  font-size: 1.4rem;
  transition: opacity 0.2s;
}
.reel.is-playing .reel__toggle { opacity: 0; }
.reel.is-playing:hover .reel__toggle, .reel__toggle:focus-visible { opacity: 1; }
.reel__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  font-size: var(--t-s);
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.reel__cap .eyebrow { color: var(--red); }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.pillar { padding: 24px 22px 26px; display: grid; gap: 8px; align-content: start; }
.pillar__k { font-family: var(--f-brush); font-size: 4rem; line-height: 1; color: var(--red); }
.pillar h3 { font-size: 1.3rem; text-transform: uppercase; }
.pillar p { color: var(--muted); font-size: var(--t-s); }

/* ---------- results (transformations) ---------- */
.results__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.tf { display: flex; flex-direction: column; border: var(--bw) solid var(--line); background: var(--panel); min-width: 0; }
.tf__imgs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--bw) solid var(--line); }
.tf__slot { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); }
.tf__slot + .tf__slot { border-left: var(--bw) solid var(--line); }
.tf__slot img { width: 100%; height: 100%; object-fit: cover; }
.tf__slot > span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 3px 8px;
  background: var(--ink);
  color: var(--white);
  font-stretch: 75%;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tf__slot + .tf__slot > span { background: var(--red); }
.tf--placeholder .tf__slot {
  --tone: rgba(21, 18, 18, 0.22);
  background-image: repeating-linear-gradient(-38deg, var(--tone) 0 1.5px, transparent 1.5px 8px);
  display: grid;
  place-items: center;
}
.tf--placeholder .tf__slot::before {
  content: "?";
  font-family: var(--f-display);
  font-size: 4.5rem;
  color: var(--paper);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}
.tf__meta { display: grid; gap: 4px; padding: 18px 18px 20px; }
.tf__gain { font-family: var(--f-display); font-size: 2rem; line-height: 1; color: var(--red); font-variant-numeric: tabular-nums; }
.tf__name { font-family: var(--f-display); font-size: 1.05rem; text-transform: uppercase; }
.tf__note { color: var(--muted); font-size: var(--t-s); }
.tf__quote { margin-top: 8px; font-size: var(--t-s); }

/* ---------- the split: bulk / cut ---------- */
.way { padding-top: clamp(72px, 9vw, 136px); }
.way__head .sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.split {
  display: flex;
  min-height: clamp(560px, 80vh, 760px);
  border-block: var(--bw) solid var(--line);
  background: var(--ink);
}
.split__side {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  transition: flex-grow 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.split__side:focus-visible { outline-offset: -8px; }
.split__side--bulk { background: #0d0b0b; color: #ece3d0; }
.split__side--cut {
  margin-left: -5vw;
  padding-left: 5vw;
  clip-path: polygon(5vw 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #74c6ea 0%, #bfe8f8 55%, #e8f7fc 74%);
  color: #102c4e;
}
.split__kanji {
  position: absolute;
  top: 4%;
  right: 3%;
  z-index: 0;
  writing-mode: vertical-rl;
  font-family: var(--f-brush);
  font-size: clamp(7rem, 2rem + 13vw, 16rem);
  line-height: 0.85;
}
.split__side .focus-lines { z-index: -2; }
.split__side--bulk .split__kanji { color: #6b0b0f; }
.split__side--cut .split__kanji { color: #fff; text-shadow: 0 0 0 transparent; opacity: 0.92; }
.split__fig {
  position: absolute;
  bottom: 0;
  right: 8%;
  z-index: 1;
  height: 90%;
  width: auto;
  max-width: none;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.split__side--cut .split__fig { right: 4%; height: 92%; }
.split__body {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 12px;
  width: min(25rem, calc(100% - 32px));
  margin: 0 0 clamp(20px, 3vw, 40px) clamp(16px, 3vw, 40px);
  padding: 20px 22px 22px;
  border: var(--bw) solid currentColor;
}
.split__side--bulk .split__body { background: #0d0b0b; }
.split__side--cut .split__body { background: #fff8e8; border-color: #102c4e; }
.split__side--bulk .eyebrow { color: #b9afa2; }
.split__title { font-family: var(--f-display); font-size: clamp(3.4rem, 1.8rem + 5vw, 6.4rem); line-height: 0.85; text-transform: uppercase; }
.split__side--bulk .split__title { color: var(--red); text-shadow: 0.05em 0.05em 0 #000; }
.split__text { font-size: var(--t-s); line-height: 1.5; }
.split__side--bulk .btn--red { --b-line: #ece3d0; }
.split__side--cut .btn--paper { --b-bg: #102c4e; --b-fg: #fff8e8; --b-line: #102c4e; }
.split__sun {
  position: absolute;
  top: 9%;
  left: 16%;
  z-index: -2;
  width: clamp(170px, 20vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffd23f;
  box-shadow: 0 0 0 16px rgba(255, 210, 63, 0.32), 0 0 0 34px rgba(255, 210, 63, 0.14);
}
.split__sun::before {
  content: "";
  position: absolute;
  inset: -110%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.55) 0deg 3deg, transparent 3deg 11deg);
  -webkit-mask: radial-gradient(circle, transparent 22%, #000 23%, transparent 68%);
  mask: radial-gradient(circle, transparent 22%, #000 23%, transparent 68%);
  animation: spin 90s linear infinite;
}
.split__sea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 28%;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #2a9bc6, #13668e);
  -webkit-mask: radial-gradient(22px 12px at 22px 0, transparent 98%, #000) -22px 0 / 44px 100% repeat-x;
  mask: radial-gradient(22px 12px at 22px 0, transparent 98%, #000) -22px 0 / 44px 100% repeat-x;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- plans + faq on this page ---------- */
#plaene { background: var(--paper); }
.faq-sec { background: var(--paper-2); border-top: var(--bw) solid var(--line); }
.faq-aside { color: var(--muted); max-width: 36ch; }

/* ---------- final CTA ---------- */
.final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #151212;
  color: var(--paper);
  border-top: var(--bw) solid var(--line);
}
.final .focus-lines { z-index: -1; }
.final__inner {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding-block: clamp(110px, 14vw, 210px);
  text-align: center;
}
.final .eyebrow { color: #b9afa2; }
.final__title {
  font-size: clamp(2.3rem, 1rem + 5.4vw, 5.6rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.final__title span { color: var(--red); }
.final__btns { justify-content: center; margin-top: 10px; }
.final__sfx { right: 5%; bottom: 10%; --sfx-fill: var(--red); --sfx-stroke: #151212; --sfx-rot: -12deg; font-size: clamp(2.6rem, 1.2rem + 4vw, 5rem); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  /* mobile hero: headline -> figure -> text -> buttons, so the manga figure is on the first screen */
  .hero { display: flex; flex-direction: column; }
  .hero__inner, .hero__copy { display: contents; pointer-events: auto; }
  .hero__eyebrow { order: 1; align-self: flex-start; margin: 26px var(--gutter) 14px; }
  .hero__title { order: 2; padding-inline: var(--gutter); font-size: clamp(3.2rem, 15.6vw, 6.6rem); }
  .hero__art {
    order: 3;
    position: relative;
    width: auto;
    height: min(116vw, 620px);
    margin-top: 18px;
    clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%);
  }
  .hero__art-in { clip-path: polygon(0 calc(9% + 8px), 100% 8px, 100% 100%, 0 100%); }
  .hero__lead { order: 4; margin: 26px var(--gutter) 0; max-width: 40ch; font-size: 1.125rem; }
  .hero__copy .btn-row { order: 5; margin: 24px var(--gutter) 40px; }
  .hero__figure { left: 0; height: 86%; }
  .hero__vertical { top: auto; bottom: 5%; left: 12px; font-size: 0.75rem; z-index: 4; background: var(--white); padding: 8px 4px; border: 2px solid var(--ink); }
  .hero__kanji { top: 10%; font-size: clamp(7rem, 30vw, 14rem); }
  .hero__bubble { top: 11%; left: 4%; }
  .hero__sfx { top: auto; left: auto; right: 3%; bottom: 7%; --sfx-rot: -10deg; font-size: clamp(2.6rem, 13vw, 5rem); }

  .about__grid { grid-template-columns: minmax(0, 1fr); }
  .about__art { max-width: 520px; order: 2; margin-top: 12px; }
  .proof__grid { grid-template-columns: minmax(0, 1fr); }
  .proof__side { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .proof__side .reel { grid-column: 2; grid-row: 1 / span 2; width: min(38vw, 240px); margin: 0; }
  .pillars { grid-template-columns: minmax(0, 1fr); }

  .split { flex-direction: column; min-height: 0; }
  .split__side { min-height: 540px; flex: none; }
  .split__side--cut { margin: -10vw 0 0; padding: 0; clip-path: polygon(0 10vw, 100% 0, 100% 100%, 0 100%); }
  .split__fig { right: 0; height: 84%; }
  .split__side--cut .split__fig { right: -6%; height: 86%; }
  .split__sun { left: 8%; top: 14%; }
}
@media (max-width: 620px) {
  .hero__eyebrow .hide-sm { display: none; }
  .hero__copy .btn-row .btn { flex: 1 1 100%; }
  .hero__bubble { font-size: 0.8rem; padding: 0.85em 1.1em; max-width: 58%; }
  .hero__vertical { display: none; }

  .about .creds li { padding: 12px 0; }
  .socials .social { flex: 1 1 100%; justify-content: space-between; }

  .proof__side { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .proof__side .reel { grid-column: auto; grid-row: auto; width: min(78%, 300px); margin: 8px auto 0; }
  .compare__tag { top: 10px; padding: 5px 8px; }
  .compare__tag--l { left: 10px; }
  .compare__tag--r { right: 10px; }

  /* principles as compact rows */
  .pillar { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 16px 18px; }
  .pillar__k { grid-row: 1 / span 2; font-size: 3rem; align-self: center; }

  /* bulk/cut chooser: smaller caption box so the figures stay visible */
  .split__side { min-height: min(132vw, 540px); }
  .split__fig { right: -16%; height: 88%; }
  .split__side--cut .split__fig { right: -18%; height: 90%; }
  .split__kanji { font-size: clamp(5.5rem, 26vw, 8rem); }
  .split__body { width: auto; max-width: min(64%, 17rem); margin: 0 0 16px 16px; padding: 14px 16px 16px; gap: 8px; }
  .split__body .eyebrow { font-size: 0.75rem; letter-spacing: 0.1em; }
  .split__title { font-size: clamp(2.8rem, 15vw, 3.6rem); }
  .split__text { display: none; }
  .split__body .btn { min-height: 44px; padding: 0.55em 0.9em; font-size: 0.85rem; }

  .final__btns .btn { flex: 1 1 100%; }
  .final__sfx { right: 4%; bottom: 3%; font-size: clamp(2.2rem, 11vw, 3rem); }
}
@media (hover: hover) {
  .split:hover .split__side { flex-grow: 0.8; }
  .split .split__side:hover, .split .split__side:focus-visible { flex-grow: 1.35; }
  .split__side:hover .split__fig { transform: translateY(-12px) scale(1.025); }
  .about__art:hover .about__photo img { filter: none; }
}
@media (max-width: 900px) {
  .split:hover .split__side, .split .split__side:hover { flex-grow: 0; }
  .split__side:hover .split__fig { transform: none; }
}

/* mobile: cut chooser shows the real photo instead of the blue ink drawing */
@media (max-width: 900px) {
  .split__side--cut .split__fig { inset: 0; right: auto; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
  .split__side--cut .split__sun, .split__side--cut .split__sea, .split__side--cut .split__kanji { display: none; }
}
@media (min-width: 621px) and (max-width: 900px) {
  .split__side--cut .split__fig { inset: 0 0 0 auto; width: 58%; }
}