/* Tenkiu inner pages — same Suave language as the landing. */
:root {
  --tk-red: #f61d32;
  --tk-coral: #f73a4f;
  --tk-blue: #20aeec;
  --tk-yellow: #ffc62b;
  --tk-amber: #f8af16;
  --tk-mint: #20d7a7;
  --tk-green: #1bc471;
  --tk-ink: #1a1a1a;
  --tk-peach: #f3d4c4;
  --tk-paper: #fff4ec;
  --tk-shadow: #ffd6a8;
  --bg: #fff4ec;
  --line: #f3d4c4;
}

html, body {
  background: var(--tk-paper);
  background-color: var(--tk-paper);
  color: var(--tk-ink);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

.topbar {
  background: var(--tk-paper);
  border-bottom: none;
}
.topbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.topbar-link,
.topbar-actions a:not(.primary) {
  border-radius: 10px;
}
.topbar-link:hover,
.topbar-actions a:not(.primary):hover {
  background: #fff;
  box-shadow: 3px 3px 0 var(--tk-yellow);
  color: var(--tk-ink);
}
.topbar-link.primary,
.topbar-actions a.primary {
  background: var(--tk-red);
  color: #fff;
  border: 2px solid var(--tk-red);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--tk-yellow);
}
.topbar-link.primary:hover,
.topbar-actions a.primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--tk-yellow);
}
.lang-switch {
  background: #fff;
  border: 2px solid var(--tk-peach);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--tk-shadow);
}
.lang-switch:hover {
  border-color: var(--tk-amber);
  box-shadow: 3px 3px 0 var(--tk-yellow);
}

.eyebrow,
.hero .badge,
.hero .verified {
  background: #fff;
  color: var(--tk-red);
  border: 2px solid var(--tk-red);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--tk-yellow);
}
.hero h1::after {
  content: '';
  display: block;
  width: 56px;
  height: 6px;
  margin: 12px auto 0;
  background: var(--tk-yellow);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--tk-coral);
}
.wrap > h1::after,
.wrap > h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 6px;
  margin: 12px 0 0;
  background: var(--tk-yellow);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--tk-coral);
}

.btn-main,
.cta-btn,
.cta-block .cta-btn {
  background: var(--tk-red);
  color: #fff;
  border: 2px solid var(--tk-red);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--tk-yellow);
}
.btn-main:hover,
.cta-btn:hover,
.cta-block .cta-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--tk-yellow);
}
.btn-ghost {
  background: #fff;
  color: var(--tk-ink);
  border: 2px solid var(--tk-blue);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--tk-blue);
}
.btn-ghost:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--tk-blue);
}

.card,
.shop,
.tile,
.plan,
.table-card,
.contrast-card,
.contrast-col,
.trust,
.methodology .block,
.caps span {
  background: #fff;
  border: 2px solid var(--tk-peach);
  box-shadow: 5px 5px 0 var(--tk-shadow);
}
.card:hover,
.shop:hover,
.plan:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--tk-yellow);
  border-color: var(--tk-amber);
}
.plan.featured {
  background: #fff;
  border-color: var(--tk-red);
  box-shadow: 6px 6px 0 var(--tk-red);
  transform: none;
}
.plan.featured:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--tk-red);
}
.plan.featured::before {
  background: var(--tk-red);
  box-shadow: 2px 2px 0 var(--tk-yellow);
}
.plan-cta {
  border: 2px solid var(--tk-peach);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--tk-shadow);
}
.plan-cta:hover {
  background: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--tk-yellow);
}
.plan.featured .plan-cta {
  background: var(--tk-red);
  color: #fff;
  border-color: var(--tk-red);
  box-shadow: 4px 4px 0 var(--tk-yellow);
}
.plan.featured .plan-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--tk-yellow);
}

.free-banner {
  background: #e9faf3;
  border: 2px solid var(--tk-mint);
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--tk-mint);
}
.free-banner-cta {
  background: var(--tk-green);
  border: 2px solid var(--tk-green);
  border-radius: 12px;
  box-shadow: 3px 3px 0 #b7f0d8;
}
.free-banner-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #b7f0d8;
}

.note {
  background: #fff8df;
  border: 2px solid var(--tk-yellow);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--tk-yellow);
  padding: 14px 18px;
}

table.compare thead th {
  background: #fff8f0;
  border-bottom: 2px solid var(--tk-peach);
}
table.compare tbody tr.tenkiu-row td {
  background: #fff1f2;
}

.contrast-col.tenkiu {
  background: #fff;
  border-color: var(--tk-red);
  box-shadow: 5px 5px 0 var(--tk-red);
}
.contrast-takeaway {
  background: #e9faf3;
  border: 2px solid var(--tk-mint);
  box-shadow: 4px 4px 0 var(--tk-mint);
}

.cta-block {
  background: linear-gradient(135deg, #f61d32 0%, #ff5e3a 100%);
  border: none;
  border-radius: 20px;
  box-shadow: none;
}
.cta-block h3,
.cta-block p { color: #fff; }
.cta-block .cta-btn,
.cta-block .cta-btn:hover {
  background: #fff;
  color: var(--tk-red);
  border: 2px solid #fff;
  box-shadow: 5px 5px 0 var(--tk-yellow);
}

.logoplate {
  background: #fff8f0;
}
.logoplate img {
  width: 96px;
  height: 96px;
  max-width: 96px;
  max-height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: #fff;
  border: 2px solid var(--tk-peach);
  box-shadow: 3px 3px 0 var(--tk-shadow);
}
.logoplate-fallback {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--tk-peach);
  box-shadow: 3px 3px 0 var(--tk-shadow);
  color: var(--tk-red);
}

.footer {
  border-top-color: var(--tk-peach);
}

@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  .topbar-actions { gap: 6px; }
  .topbar-link,
  .topbar-actions a {
    font-size: 13px;
    padding: 8px 10px;
  }
}