/*
Theme Name: HANIWA404 LAB.
Theme URI: https://example.com/
Author: HANIWA404 LAB.
Description: HANIWA404 LAB.専用の1ページ型コーポレートテーマ。カスタマイザーから会社情報、アプリ情報、ロゴ、価格、問い合わせ先を編集できます。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: haniwa404lab
*/

:root {
  --depth-bg:#000000;
  --bg:#050607;
  --surface:#0a0d0f;
  --surface-2:#0d1114;
  --white:#f5f7f8;
  --muted:#9aa5aa;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.2);
  --cyan:#00D8FF;
  --header-height:76px;
  --max:1120px;
  --radius:2px;
}
* { box-sizing:border-box; }
html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-height) + 20px);
}
body {
  margin:0;
  min-height:100%;
  color:var(--white);
  background:#000;
  font-family:"Segoe UI","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  line-height:1.75;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.container {
  width:min(calc(100% - 40px),var(--max));
  margin:auto;
}

/* Fixed navigation */
.site-header {
  position:fixed;
  inset:0 0 auto 0;
  z-index:9999;
  background:rgba(5,6,7,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.header-inner {
  height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.brand-text {
  flex:0 0 auto;
  font:800 clamp(1.05rem,2vw,1.45rem)/1 "Segoe UI",sans-serif;
  letter-spacing:.13em;
  white-space:nowrap;
}
.brand-text .accent { color:var(--cyan); }
.main-nav {
  display:flex;
  align-items:center;
  gap:26px;
  color:#c4cdd1;
  font:11px Consolas,monospace;
  letter-spacing:.12em;
}
.main-nav a {
  padding:9px 0;
  border-bottom:1px solid transparent;
}
.main-nav a:hover {
  color:var(--cyan);
  border-bottom-color:var(--cyan);
}

main { padding-top:var(--header-height); }
.hero {
  min-height:calc(100vh - var(--header-height));
  display:grid;
  align-items:center;
  padding:72px 0 82px;
}
.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
  gap:72px;
  align-items:center;
}
.eyebrow,
.section-no {
  color:var(--cyan);
  font:11px Consolas,monospace;
  letter-spacing:.18em;
}
.eyebrow { margin:0 0 20px; }
h1 {
  margin:0;
  font-size:clamp(3.5rem,8vw,6.8rem);
  line-height:.9;
  letter-spacing:-.05em;
}
h1 span {
  display:block;
  margin-top:18px;
  font-size:.42em;
  font-weight:500;
  letter-spacing:.16em;
}
.hero-copy {
  margin:30px 0 8px;
  font-size:clamp(1.2rem,2vw,1.45rem);
  color:#dce3e6;
}
.hero-sub {
  max-width:650px;
  margin:0;
  color:var(--muted);
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}
.btn {
  min-height:46px;
  padding:0 21px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line-strong);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.05em;
  transition:.18s ease;
}
.btn.primary {
  color:#020304;
  background:var(--white);
  border-color:var(--white);
}
.btn:hover {
  border-color:var(--cyan);
  color:var(--cyan);
}
.btn.primary:hover {
  color:#020304;
  background:var(--cyan);
}
.logo-frame {
  border:1px solid var(--line-strong);
  background:#000;
  padding:18px;
}
.logo-frame img {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
}

section {
  padding:96px 0;
  border-top:1px solid var(--line);
}
.section-head {
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:34px;
  align-items:start;
  margin-bottom:48px;
}
.section-no { padding-top:8px; }
.section-head h2 {
  margin:0;
  padding-left:26px;
  border-left:2px solid var(--cyan);
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.12;
  letter-spacing:-.035em;
}

/* Philosophy */
.philosophy-hero {
  max-width:780px;
  padding:0 0 0 26px;
  border-left:2px solid var(--cyan);
}
.brand-message {
  margin:0;
  color:var(--white);
  font:700 clamp(2rem,4.5vw,4rem)/1.08 "Segoe UI",sans-serif;
  letter-spacing:-.035em;
  max-width:900px;
}
.closing-message {
  margin:0;
  font-size:clamp(1.35rem,2.8vw,2.15rem);
  font-weight:700;
  line-height:1.45;
}
.philosophy {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px;
  padding-top:10px;
}
.lead {
  margin:0 0 24px;
  font-size:clamp(1.45rem,2.8vw,2.15rem);
  line-height:1.45;
}
.copy {
  margin:0;
  color:#aeb8bc;
}
.copy strong { color:var(--white); }
.values {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:42px;
}
.value {
  min-height:150px;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--line);
}
.value strong {
  display:block;
  margin-bottom:10px;
  color:var(--cyan);
  font:700 13px Consolas,monospace;
  letter-spacing:.1em;
}
.value span {
  color:#99a5aa;
  font-size:.9rem;
}

/* Application and company cards */
.apps {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.card,
.info-panel {
  background:var(--surface);
  border:1px solid var(--line);
}
.card {
  min-height:310px;
  padding:30px;
}
.tag {
  display:inline-block;
  color:var(--cyan);
  font:11px Consolas,monospace;
  letter-spacing:.06em;
}
.card h3 {
  margin:20px 0 12px;
  font-size:1.9rem;
}
.card p {
  max-width:560px;
  color:#aeb8bc;
}
.meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
}
.meta span {
  padding:4px 8px;
  border:1px solid var(--line);
  color:#aeb9bd;
  font-size:.72rem;
}
.detail {
  display:inline-flex;
  margin-top:25px;
  font-weight:700;
}
.detail::after { content:"  ↗"; color:var(--cyan); }

.company-grid { display:grid; }
.info-panel { padding:24px 28px; }
.info-row {
  display:grid;
  grid-template-columns:150px 1fr;
  gap:20px;
  padding:17px 0;
  border-bottom:1px solid var(--line);
}
.info-row:last-child { border-bottom:0; }
.info-row dt { color:#89969b; }
.info-row dd {
  margin:0;
  overflow-wrap:anywhere;
}

/* Contact */
.contact {
  min-height:290px;
  display:grid;
  place-items:center;
  padding:40px;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--line);
}
.contact h2 {
  margin:0 0 14px;
  font-size:clamp(2rem,4vw,3.4rem);
}
.contact p {
  margin:0 0 25px;
  color:#a6b1b5;
}

footer {
  padding:30px 0;
  border-top:1px solid var(--line);
  color:#869399;
  font-size:.78rem;
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.reveal {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .65s ease,transform .65s ease;
}
.reveal.visible {
  opacity:1;
  transform:none;
}

@media(max-width:900px) {
  .hero-grid,
  .philosophy,
  .section-head {
    grid-template-columns:1fr;
  }
  .hero-grid { gap:44px; }
  .section-head { gap:18px; }
  .section-no { padding-top:0; }
  .values { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:720px) {
  :root { --header-height:68px; }
  .container { width:min(calc(100% - 24px),var(--max)); }
  .brand-text {
    font-size:.98rem;
    letter-spacing:.08em;
  }
  .main-nav {
    gap:13px;
    font-size:9px;
    letter-spacing:.05em;
  }
  .main-nav a:nth-child(2) { display:none; }
  .apps { grid-template-columns:1fr; }
}
@media(max-width:560px) {
  h1 { font-size:3rem; }
  section { padding:72px 0; }
  .values { grid-template-columns:1fr; }
  .info-row {
    grid-template-columns:1fr;
    gap:3px;
  }
  .actions { flex-direction:column; }
  .btn { width:100%; }
  .main-nav a:nth-child(3) { display:none; }
  .philosophy-hero,
  .section-head h2 { padding-left:18px; }
}

/* Scroll-linked depth gauge and progressive darkening */
.depth-gauge {
  position:fixed;
  top:50%;
  right:18px;
  z-index:9000;
  width:58px;
  transform:translateY(-50%);
  pointer-events:none;
  font-family:Consolas,monospace;
}
.depth-scale {
  position:relative;
  height:260px;
  border-right:1px solid rgba(255,255,255,.22);
}
.depth-scale::before {
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:26px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 11px,
      rgba(255,255,255,.22) 11px 12px,
      transparent 12px 23px,
      rgba(255,255,255,.10) 23px 24px
    );
}
.depth-marker {
  position:absolute;
  right:-4px;
  top:0;
  width:34px;
  height:2px;
  background:var(--cyan);
  box-shadow:0 0 8px rgba(0,216,255,.45);
  transform:translateY(0);
}
.depth-marker::before {
  content:"";
  position:absolute;
  right:0;
  top:-4px;
  width:9px;
  height:9px;
  border:1px solid var(--cyan);
  background:var(--bg);
  transform:rotate(45deg);
}
.depth-label {
  margin-top:10px;
  color:var(--cyan);
  font-size:10px;
  letter-spacing:.08em;
  text-align:right;
}
.depth-value {
  display:block;
  margin-top:3px;
  color:var(--white);
  font-size:12px;
  letter-spacing:.04em;
}
.depth-darkener {
  position:fixed;
  inset:0;
  z-index:8500;
  pointer-events:none;
  background:transparent;
  opacity:0;
}
@media(max-width:720px) {
  .depth-gauge {
    right:7px;
    width:42px;
    opacity:.82;
  }
  .depth-scale { height:190px; }
  .depth-label { font-size:8px; }
  .depth-value { font-size:10px; }
}


/* Excavation Blueprint Background */
#excavation-canvas {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-3;
  pointer-events:none;
}
.excavation-shade {
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(8,20,28,.18) 0%,
      rgba(3,12,17,.32) 35%,
      rgba(0,5,8,.58) 68%,
      rgba(0,0,0,.86) 100%);
}
.excavation-vignette {
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 8%,
      rgba(0,216,255,.055),
      transparent 38%),
    radial-gradient(circle at 50% 100%,
      rgba(0,216,255,.025),
      transparent 45%);
}
.depth-stage {
  position:fixed;
  left:18px;
  bottom:16px;
  z-index:9000;
  pointer-events:none;
  color:rgba(255,255,255,.34);
  font:10px Consolas,monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.depth-stage strong {
  display:block;
  margin-top:3px;
  color:rgba(0,216,255,.82);
  font-size:11px;
  font-weight:700;
}
.depth-gauge {
  background:rgba(0,0,0,.18);
  padding:10px 8px 8px;
  border:1px solid rgba(255,255,255,.08);
}
.depth-scale::after {
  content:"000\A100\A200\A300\A404";
  white-space:pre;
  position:absolute;
  right:31px;
  top:-3px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:rgba(255,255,255,.24);
  font:8px/1 Consolas,monospace;
  text-align:right;
}
@media(max-width:720px) {
  .depth-stage { display:none; }
}


.platform-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  margin-top:18px;
}
.platform-badge,
.release-badge {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:28px;
  padding:5px 9px;
  border:1px solid var(--line);
  font:700 10px Consolas,monospace;
  letter-spacing:.08em;
}
.platform-badge {
  color:#dce5e8;
}
.platform-badge svg {
  width:15px;
  height:15px;
  fill:var(--cyan);
}
.release-badge {
  color:var(--cyan);
  border-color:rgba(0,216,255,.28);
  background:rgba(0,216,255,.035);
}
.price-box {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:18px;
  border:1px solid var(--line);
}
.price-item {
  padding:12px 14px;
}
.price-item + .price-item {
  border-left:1px solid var(--line);
}
.price-item small {
  display:block;
  margin-bottom:3px;
  color:#7f8d92;
  font:9px Consolas,monospace;
  letter-spacing:.1em;
}
.price-item strong {
  color:#eef4f6;
  font-size:1rem;
}
.price-item strong em {
  color:var(--cyan);
  font-style:normal;
}
@media(max-width:440px) {
  .price-box { grid-template-columns:1fr; }
  .price-item + .price-item {
    border-left:0;
    border-top:1px solid var(--line);
  }
}


/* Hero navigation buttons */
.actions .btn,
.actions .btn.primary,
.actions .btn.secondary {
  background:rgba(255,255,255,.94);
  color:#050505;
  border-color:rgba(255,255,255,.94);
}
.actions .btn:hover,
.actions .btn.primary:hover,
.actions .btn.secondary:hover {
  background:#fff;
  color:#000;
  border-color:#fff;
  transform:translateY(-2px);
}


/* Hero logo */
.hero-logo-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.hero-logo {
  display:block;
  width:min(100%, 420px);
  max-height:520px;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.06));
}
@media(max-width:820px) {
  .hero-logo-wrap {
    margin-top:28px;
  }
  .hero-logo {
    width:min(76vw, 360px);
    max-height:420px;
  }
}


/* Hero balance refinement */
.hero-grid {
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  align-items:center;
  gap:clamp(28px,5vw,76px);
}
.hero-logo-wrap {
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.hero-logo {
  width:min(100%, 560px);
  max-height:640px;
  object-fit:contain;
  transform:scale(1.08);
  transform-origin:center;
}
.hero > .container {
  min-height:calc(100vh - 72px);
}
@media(max-width:980px) {
  .hero-grid {
    grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);
    gap:32px;
  }
  .hero-logo {
    width:min(100%, 470px);
    transform:scale(1.04);
  }
}
@media(max-width:820px) {
  .hero-grid {
    grid-template-columns:1fr;
  }
  .hero-logo-wrap {
    margin-top:20px;
  }
  .hero-logo {
    width:min(88vw, 470px);
    max-height:none;
    transform:none;
  }
  .hero > .container {
    min-height:auto;
  }
}


/* Application product logo */
.app-logo-wrap {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:112px;
  margin:18px 0 14px;
}
.app-logo {
  display:block;
  max-width:100%;
  object-fit:contain;
}
.masadi-logo {
  width:min(100%, 620px);
  max-height:170px;
  object-position:left center;
}
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
@media(max-width:720px) {
  .app-logo-wrap {
    min-height:88px;
    margin-top:15px;
  }
  .masadi-logo {
    max-height:130px;
  }
}


/* Applications: light gray product panels for logo visibility */
.apps .card {
  background:linear-gradient(145deg, rgba(229,233,235,.98), rgba(198,205,209,.96));
  border-color:rgba(255,255,255,.55);
  color:#101518;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
}
.apps .card p {
  color:#303a3f;
}
.apps .card .tag {
  color:#005f78;
  font-weight:700;
}
.apps .card .platform-badge {
  color:#172126;
  border-color:rgba(18,32,39,.24);
  background:rgba(255,255,255,.32);
}
.apps .card .platform-badge svg {
  fill:#006f8d;
}
.apps .card .release-badge {
  color:#005f78;
  border-color:rgba(0,95,120,.35);
  background:rgba(255,255,255,.34);
}
.apps .card .price-box {
  border-color:rgba(18,32,39,.24);
  background:rgba(255,255,255,.22);
}
.apps .card .price-item + .price-item {
  border-color:rgba(18,32,39,.24);
}
.apps .card .price-item small {
  color:#4f5d63;
}
.apps .card .price-item strong {
  color:#11191d;
}
.apps .card .price-item strong em {
  color:#006f8d;
}
.apps .card .meta span {
  color:#263238;
  border-color:rgba(18,32,39,.24);
  background:rgba(255,255,255,.24);
}
.apps .card .detail {
  color:#11191d;
}
.apps .card .detail::after {
  color:#006f8d;
}
.apps .app-logo-wrap {
  background:rgba(255,255,255,.18);
  border-radius:3px;
  padding:10px 8px;
}
.apps .masadi-logo {
  width:100%;
  max-width:none;
  max-height:190px;
}
@media(max-width:720px) {
  .apps .masadi-logo {
    max-height:145px;
  }
}


/* Yukarinka product logo */
.yukarinka-logo-wrap {
  min-height:112px;
}
.yukarinka-logo {
  width:100%;
  max-width:none;
  max-height:180px;
  object-position:left center;
}
@media(max-width:720px) {
  .yukarinka-logo {
    max-height:140px;
  }
}


/* Match Yukarinka logo scale to Masadi logo */
.yukarinka-logo-wrap {
  min-height:150px;
  padding:4px 0;
  overflow:visible;
}
.yukarinka-logo {
  width:100%;
  max-width:none;
  max-height:220px;
  object-fit:contain;
  object-position:left center;
  transform:scale(1.16);
  transform-origin:left center;
}
@media(max-width:720px) {
  .yukarinka-logo-wrap {
    min-height:118px;
  }
  .yukarinka-logo {
    max-height:170px;
    transform:scale(1.08);
  }
}


/* Applications card refinement */
.apps .card {
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(rgba(0,216,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,216,255,.025) 1px, transparent 1px),
    linear-gradient(145deg, rgba(35,41,45,.97), rgba(16,20,23,.98));
  background-size:28px 28px, 28px 28px, auto;
  border-color:rgba(0,216,255,.16);
  color:#f2f5f6;
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.035);
}
.apps .card::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,216,255,.28), rgba(0,216,255,0)) top left / 38% 1px no-repeat,
    linear-gradient(rgba(0,216,255,.22), rgba(0,216,255,0)) top left / 1px 32% no-repeat;
  opacity:.7;
}
.apps .card p {
  color:#b8c2c6;
}
.apps .card .tag {
  color:var(--cyan);
}
.apps .card .platform-badge {
  color:#e9f0f2;
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.025);
}
.apps .card .platform-badge svg {
  fill:var(--cyan);
}
.apps .card .release-badge {
  color:var(--cyan);
  border-color:rgba(0,216,255,.24);
  background:rgba(0,216,255,.035);
}
.apps .card .price-box {
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.018);
}
.apps .card .price-item + .price-item {
  border-color:rgba(255,255,255,.12);
}
.apps .card .price-item small {
  color:#7f8d92;
}
.apps .card .price-item strong {
  color:#eef4f6;
}
.apps .card .price-item strong em {
  color:var(--cyan);
}
.apps .card .meta span {
  color:#aeb9bd;
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.018);
}
.apps .card .detail {
  color:#f2f5f6;
}
.apps .card .detail::after {
  color:var(--cyan);
}
.apps .app-logo-wrap {
  background:transparent;
  border-radius:0;
  padding:0;
}
.yukarinka-logo-wrap {
  min-height:126px;
  margin:14px 0 10px;
  padding:0;
}
.yukarinka-logo {
  width:100%;
  max-width:none;
  max-height:178px;
  object-fit:contain;
  object-position:left center;
  transform:none;
}
@media(max-width:720px) {
  .yukarinka-logo-wrap {
    min-height:96px;
  }
  .yukarinka-logo {
    max-height:138px;
    transform:none;
  }
}


/* White panels only behind application logos */
.apps .app-logo-wrap {
  background:#fff;
  border:1px solid rgba(255,255,255,.72);
  border-radius:4px;
  padding:10px 12px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.apps .masadi-logo-wrap,
.apps .yukarinka-logo-wrap {
  min-height:132px;
}
.apps .masadi-logo,
.apps .yukarinka-logo {
  width:100%;
  max-width:none;
  object-fit:contain;
  object-position:center;
}
@media(max-width:720px) {
  .apps .app-logo-wrap {
    padding:8px 10px;
  }
  .apps .masadi-logo-wrap,
  .apps .yukarinka-logo-wrap {
    min-height:104px;
  }
}


/* Equalize application logo presentation */
.apps .masadi-logo-wrap,
.apps .yukarinka-logo-wrap {
  height:176px;
  min-height:176px;
  margin:16px 0 14px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.apps .masadi-logo,
.apps .yukarinka-logo {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  transform:none;
}
.apps .yukarinka-logo {
  width:104%;
  max-width:104%;
}
@media(max-width:720px) {
  .apps .masadi-logo-wrap,
  .apps .yukarinka-logo-wrap {
    height:136px;
    min-height:136px;
    padding:10px 12px;
  }
  .apps .yukarinka-logo {
    width:102%;
    max-width:102%;
  }
}


/* Keep application descriptions visually aligned */
.apps .card .app-description {
  min-height:4.8em;
}
@media(max-width:720px) {
  .apps .card .app-description {
    min-height:0;
  }
}


/* Replacement application logos */
.apps .masadi-logo-wrap,
.apps .yukarinka-logo-wrap {
  height:184px;
  min-height:184px;
  margin:16px 0 14px;
  padding:10px 14px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.apps .masadi-logo,
.apps .yukarinka-logo {
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  transform:none;
}
@media(max-width:720px) {
  .apps .masadi-logo-wrap,
  .apps .yukarinka-logo-wrap {
    height:138px;
    min-height:138px;
    padding:8px 10px;
  }
}


.apps .card .app-description{
    min-height:7.2em;
}
@media(max-width:720px){
    .apps .card .app-description{min-height:auto;}
}


/* Add one-line breathing room below Masadi description */
.masadi-card .masadi-description {
  margin-bottom:1.5em;
}
@media(max-width:720px) {
  .masadi-card .masadi-description {
    margin-bottom:1.2em;
  }
}


/* Precise vertical alignment for both application cards */
.apps {
  align-items:stretch;
}
.apps .card {
  display:grid;
  grid-template-rows:
    auto
    184px
    minmax(7.2em, auto)
    auto
    auto
    auto
    auto;
  height:100%;
}
.apps .card .tag {
  align-self:start;
}
.apps .card .app-logo-wrap {
  height:184px;
  min-height:184px;
  margin:16px 0 14px;
}
.apps .card .app-copy {
  min-height:7.2em;
  margin:0;
  line-height:1.8;
}
.apps .card .platform-row {
  align-self:start;
  margin-top:18px;
}
.masadi-card .masadi-description {
  margin-bottom:0;
}
.apps .card .price-box,
.apps .card .meta,
.apps .card .detail {
  align-self:start;
}

@media(max-width:720px) {
  .apps .card {
    display:block;
    height:auto;
  }
  .apps .card .app-logo-wrap {
    height:138px;
    min-height:138px;
  }
  .apps .card .app-copy {
    min-height:0;
  }
}


/* Add safe vertical clearance between logo, copy and Android badge */
.apps .card {
  grid-template-rows:
    auto
    204px
    minmax(8.4em, auto)
    auto
    auto
    auto
    auto;
  row-gap:0;
}
.apps .card .app-logo-wrap {
  height:204px;
  min-height:204px;
  margin:18px 0 22px;
  padding:14px 18px;
  overflow:hidden;
}
.apps .card .app-logo {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
}
.apps .card .app-copy {
  min-height:8.4em;
  margin:0;
  padding:0 2px 20px;
  line-height:1.85;
  position:relative;
  z-index:1;
}
.apps .card .platform-row {
  margin-top:0;
  padding-top:8px;
  position:relative;
  z-index:1;
}
.apps .card .platform-badge,
.apps .card .release-badge {
  position:relative;
  z-index:1;
}

@media(max-width:720px) {
  .apps .card {
    display:block;
  }
  .apps .card .app-logo-wrap {
    height:150px;
    min-height:150px;
    margin:14px 0 18px;
    padding:10px 12px;
  }
  .apps .card .app-copy {
    min-height:0;
    padding-bottom:16px;
  }
  .apps .card .platform-row {
    padding-top:4px;
  }
}


/* FINAL: prevent all logo/text overlap and keep both cards aligned */
.apps {
  align-items:stretch;
}
.apps .card {
  display:grid !important;
  grid-template-rows:
    auto
    210px
    168px
    auto
    auto
    auto
    auto !important;
  height:100%;
  row-gap:0;
}

.apps .card .tag {
  margin:0;
}

.apps .card .app-logo-wrap,
.apps .masadi-logo-wrap,
.apps .yukarinka-logo-wrap {
  box-sizing:border-box;
  width:100%;
  height:190px !important;
  min-height:190px !important;
  max-height:190px !important;
  margin:20px 0 0 !important;
  padding:18px 22px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff;
}

.apps .card .app-logo,
.apps .card .masadi-logo,
.apps .card .yukarinka-logo {
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
  position:static !important;
  margin:0 !important;
}

.apps .card .app-copy {
  box-sizing:border-box;
  min-height:168px !important;
  height:168px !important;
  margin:0 !important;
  padding:24px 2px 18px !important;
  overflow:hidden;
  line-height:1.8;
  position:static !important;
}

.apps .card .platform-row {
  margin:0 !important;
  padding:10px 0 0 !important;
  align-self:start;
  position:static !important;
}

.apps .card .platform-badge,
.apps .card .release-badge {
  position:static !important;
}

.depth-label,
.depth-value {
  display:none !important;
}

@media(max-width:720px) {
  .apps .card {
    display:block !important;
    height:auto;
  }
  .apps .card .app-logo-wrap,
  .apps .masadi-logo-wrap,
  .apps .yukarinka-logo-wrap {
    height:150px !important;
    min-height:150px !important;
    max-height:150px !important;
    margin:14px 0 0 !important;
    padding:14px 16px !important;
  }
  .apps .card .app-copy {
    height:auto !important;
    min-height:0 !important;
    padding:18px 0 14px !important;
    overflow:visible;
  }
  .apps .card .platform-row {
    padding-top:6px !important;
  }
}


/* Keep DEPTH / 000M, remove only the small unreadable scale text above it */
.depth-label {
  display:block !important;
}
.depth-value {
  display:block !important;
}
.depth-scale::after {
  content:none !important;
  display:none !important;
}