/* Mihakk landing page — self-contained stylesheet.
   Ported from the Claude Design "Industry" system's component CSS,
   recolored via the token overrides below (which match the green
   palette already specified in the design handoff, and reuse the
   same --go/--modify/--nogo verdict colors used elsewhere in the app). */

:root {
  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-text: #1a1d23;
  --color-accent: #2f5c46;
  --color-divider: color-mix(in srgb, #1a1d23 18%, transparent);

  --color-accent-100: #eef3f0;
  --color-accent-200: #d7e3dc;
  --color-accent-300: #b3c8bd;
  --color-accent-400: #8aa89a;
  --color-accent-500: #5b8570;
  --color-accent-600: #244836;
  --color-accent-700: #1c3a2b;
  --color-accent-800: #162d22;
  --color-accent-900: #0f2019;

  --go: #1f8a4c;
  --modify: #b8860b;
  --nogo: #b23b3b;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;
}

[dir="rtl"] {
  --font-heading: "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", Tahoma, sans-serif;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; }

* { box-sizing: border-box; }
body.mihakk-page {
  margin: 0;
  background: var(--color-bg);
  font-family: var(--font-body);
}
.mihakk-page h1, .mihakk-page h2, .mihakk-page h3, .mihakk-page h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  margin: 0;
  line-height: 1.12;
}
.mihakk-page a { color: var(--color-accent-700); text-underline-offset: 3px; }
.mihakk-page a:hover { color: var(--color-accent); }

/* — buttons (ported verbatim from Industry — already token-driven) — */
.mihakk-page .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid var(--color-divider);
  padding: 10px 14px;
}
.mihakk-page .btn-primary { background: var(--color-accent); color: #ffffff; border-color: var(--color-accent); }
.mihakk-page .btn-primary:hover { background: var(--color-accent-600); }
.mihakk-page .btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.mihakk-page .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }

/* — blueprint frame: square, hairline-bordered, with corner registration marks — */
.mihakk-page .blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
}
.mihakk-page .blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.mihakk-page .blueprint > .corner::before,
.mihakk-page .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.mihakk-page .blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.mihakk-page .blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.mihakk-page .blueprint > .corner.tl { top: -6px; left: -6px; }
.mihakk-page .blueprint > .corner.tr { top: -6px; right: -6px; }
.mihakk-page .blueprint > .corner.bl { bottom: -6px; left: -6px; }
.mihakk-page .blueprint > .corner.br { bottom: -6px; right: -6px; }

/* — table (worked-example breakdown) — */
.mihakk-page .table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mihakk-page .table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: 8px; border-bottom: 1px solid var(--color-divider);
}
.mihakk-page .table td {
  padding: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* — language toggle pill — */
.mihakk-page .lang-toggle-group { display: inline-flex; border: 1px solid var(--color-divider); }
.mihakk-page .lang-toggle-group a {
  font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.04em;
  padding: 6px 12px; text-decoration: none; color: #6b7280;
}
.mihakk-page .lang-toggle-group a.active { background: var(--color-accent); color: #ffffff; }

/* — mobile hamburger menu — */
.mihakk-page .mihakk-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  padding: 6px;
}
@media (max-width: 860px) {
  .mihakk-page .mihakk-menu-toggle { display: inline-flex; align-items: center; }
  .mihakk-page .mihakk-menu {
    display: none;
    width: 100%;
    order: 10;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-divider);
  }
  .mihakk-page .mihakk-menu.open { display: flex; }
  .mihakk-page .mihakk-menu nav {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
}
@media (min-width: 861px) {
  .mihakk-page .mihakk-menu {
    display: flex;
    align-items: center;
    gap: 22px;
  }
}

@media (max-width: 720px) {
  .mihakk-page .hero-grid { grid-template-columns: 1fr !important; }
}