/* ══════════════════════════════════════════════════════════════════════
   MINTCRATE PUBLIC SITE — Unified Stylesheet
   ──────────────────────────────────────────────────────────────────────
   Replaces: index_style.css, services_style.css, about_style.css,
             contact_style.css, thankyou_style.css
   Load order on every public HTML:
     1. mintcrate_tokens.css        (variables)
     2. mintcrate_public.css        (this file)
     3. mintcrate_public_animations.css  (motion layer)
   ══════════════════════════════════════════════════════════════════════ */

/* ──────────── PAGE BASE ──────────── */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
  overflow-x: hidden; /* prevent horizontal scroll on mobile */
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* belt and braces */
}

/* Prevent any element from causing horizontal overflow */
*,
*::before,
*::after {
  min-width: 0; /* critical: allows grid/flex children to shrink below content size */
  box-sizing: border-box;
}

/* Sections — always full width with safe padding on mobile */
section, footer, nav > div {
  max-width: 100%;
}

/* Mobile section padding */
@media (max-width: 767px) {
  section > div,
  footer > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ──────────── WORDMARK ──────────── */
.logo-text {
  color: var(--text-deep);
}

/* ──────────── FOCUS STATES ──────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════════════════
   REVAMP COMPONENTS (2026)
   ══════════════════════════════════════════════════════════════════════ */

/* ──────────── EYEBROW LABEL ──────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  background: var(--accent-weak);
  color: #1d4ed8;
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}

/* ──────────── HERO HEADING ──────────── */
.hero-h1 {
  font-size: clamp(32px, 5.5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

/* Dynalight cursive emphasis — hero signature */
.cursive-emphasis {
  font-family: 'Dynalight', cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 1.1em;
  color: var(--accent);
  letter-spacing: 0.5px;
}

/* ──────────── HEADINGS ──────────── */
h1, h2 { letter-spacing: -0.02em; line-height: 1.08; }
h1 { font-size: clamp(28px, 4.5vw, 48px); font-weight: 800; color: var(--ink); }
h2 { font-size: clamp(22px, 3.5vw, 36px); font-weight: 800; color: var(--ink); }
h3 { font-size: 17px; font-weight: 700; color: var(--ink); }

/* ──────────── BUTTONS ──────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  border: none;
  transition: background 0.2s ease;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary:hover { background: #1D4ED8; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  transition: border-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}
.btn-outline:hover { border-color: #CBD5E1; color: var(--ink); }

/* ──────────── CARDS ──────────── */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.card:hover { border-color: #CBD5E1; background: var(--bg-soft); }

/* ──────────── SECTIONS ──────────── */
.section { padding: var(--section-y) 0; }
.section-soft {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ──────────── HERO SECTION ──────────── */
.hero-bg {
  background: var(--hero-gradient);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-steel);
}

.hero-glow {
  position: absolute;
  inset: -10% -5% -15% -5%;
  background: radial-gradient(55% 50% at 60% 45%, rgba(37,99,235,0.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ──────────── NAV ──────────── */
.nav-link {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-tech);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
  letter-spacing: 0.3px;
}
.nav-link:hover, .nav-link.active { color: var(--accent); }

/* ──────────── TAB BUTTONS ──────────── */
.tab-btn {
  padding: 8px 22px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-tech);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--bg);
  cursor: pointer;
  transition: all 0.15s ease;
}
.tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ──────────── COMPARISON TABLE ──────────── */
.comparison-table { border-collapse: collapse; width: 100%; }
.comparison-table th {
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 16px;
  text-align: left;
}
.comparison-table td {
  padding: 14px 16px;
  font-size: 14px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.comparison-table tr:first-child td { border-top: none; }
.comparison-table .col-bad { color: var(--ink-faint); }
.comparison-table .col-good { color: var(--ink); font-weight: 500; }
.comparison-table .col-good-wrap { display: flex; align-items: center; gap: 8px; }
.check-icon { color: var(--accent); flex-shrink: 0; }

/* ──────────── SYSTEM PILLARS ──────────── */
.pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-weak);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  margin-bottom: 16px;
}

/* ──────────── PROFILE PHOTO ──────────── */
.profile-photo {
  width: 80px;
  height: 80px;
  border-radius: var(--r-pill);
  overflow: hidden;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgb(15 23 42 / 0.10);
  flex-shrink: 0;
}

/* ──────────── FAQ ──────────── */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  gap: 16px;
}
.faq-btn:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }
.faq-answer {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.7;
  padding-bottom: 20px;
  display: none;
}
.faq-answer.open { display: block; }
.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--ink-faint);
  transition: transform 0.2s ease;
}
.faq-icon.rotated { transform: rotate(45deg); }

/* ──────────── CTA BAND ──────────── */
.cta-band {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--section-y) 24px;
  text-align: center;
}
.cta-band h2 { color: var(--ink); }
.cta-band p { color: var(--ink-soft); margin-top: 16px; font-size: 18px; }
.cta-fine { font-size: 13px; color: var(--ink-faint); margin-top: 24px; }
.cta-fine a { color: var(--accent); text-decoration: underline; }

/* ──────────── FOOTER ──────────── */
.footer-label {
  font-family: var(--font-tech);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.footer-link {
  font-size: 13px;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.15s ease;
  display: block;
  margin-bottom: 10px;
}
.footer-link:hover { color: var(--accent); }

/* ──────────── MOBILE MENU ──────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  height: 100dvh;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  z-index: 200;
  transform: translateY(-100%);
  transition: transform var(--dur-slow) cubic-bezier(0.32, 0.72, 0, 1);
  padding: 24px;
  padding-top: 80px;
  overflow-y: auto;
}
.mobile-menu.active { transform: translateY(0); }

/* ──────────── TIER CARDS (services page) ──────────── */
.tier-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.2s ease;
}
.tier-card:hover { border-color: #CBD5E1; }
.tier-card.featured { border-color: #10B981; border-width: 2px; }
.tier-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  font-family: var(--font-tech);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.feature-check { color: #10B981; flex-shrink: 0; margin-top: 2px; }

/* ──────────── CONTACT STRIPS ──────────── */
.contact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 28px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.contact-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.assist-strip {
  background: var(--accent-weak);
  border: 1px solid #bfdbfe;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  gap: 16px;
  flex-wrap: wrap;
}

/* ──────────── FORM INPUTS ──────────── */
.form-field {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  font-family: var(--font-body);
}
.form-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}
select.form-field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

/* ──────────── CONTACT STEPS ──────────── */
.step-node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.steps-desktop { display: flex; }
.steps-mobile { display: none; }

/* ──────────── BLOG ARTICLE CARDS ──────────── */
.article-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: white;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.article-card:hover { border-color: #bfdbfe; background: var(--bg-soft); }
.card-header { padding: 2rem; display: flex; align-items: flex-end; min-height: 160px; }
.card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.tag {
  display: inline-flex;
  align-items: center;
  background: var(--accent-weak);
  color: var(--accent);
  font-family: var(--font-tech);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--accent-weak);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
  flex-shrink: 0;
}
.card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}
.article-card:hover .card-title { color: var(--accent); }
.card-desc { font-size: 0.875rem; color: var(--ink-soft); line-height: 1.6; flex: 1; }


/* ══════════════════════════════════════════════════════════════════════
   LEGACY COMPONENTS (preserved for back-compat)
   ══════════════════════════════════════════════════════════════════════ */

/* ──────────── SERVICE CARD (legacy) ──────────── */
.service-card {
  background-color: var(--card-white);
  border: 1px solid var(--border-steel);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    transform var(--dur-slow) var(--ease-soft),
    box-shadow var(--dur-slow) var(--ease-soft),
    border-color var(--dur-base) ease;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-blue);
  box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.08);
}

/* ──────────── CTA BUTTON (legacy) ──────────── */
.cta-primary {
  background: var(--accent-blue);
  color: white;
  border: 1px solid var(--accent-blue);
  transition: all var(--dur-base) ease;
}
.cta-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
}

/* ──────────── FADE-IN (legacy observer) ──────────── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s var(--ease-soft);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ──────────── HAMBURGER (legacy) ──────────── */
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--text-deep);
  margin: 5px 0;
  transition: all var(--dur-slow) var(--ease-smooth);
}

.close-btn {
  position: absolute;
  top: 28px;
  right: 28px;
  font-size: 36px;
  color: var(--text-deep);
  cursor: pointer;
  transition: all var(--dur-base) ease;
  z-index: 110;
}
.close-btn:hover {
  transform: scale(1.15) rotate(90deg);
  color: var(--accent-blue);
}

/* ──────────── NAV DESKTOP (legacy helper) ──────────── */
.nav-desktop {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ──────────── ABOUT — profile image + journey (legacy) ──────────── */
.profile-img {
  width: 160px;
  height: 160px;
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.1);
  border: 4px solid white;
  transition:
    transform 0.5s var(--ease-spring),
    box-shadow 0.5s ease;
}
.profile-img:hover {
  transform: scale(1.04);
  box-shadow:
    0 20px 25px -5px rgb(15 23 42 / 0.1),
    0 8px 10px -6px rgb(15 23 42 / 0.1);
}

.section-animate,
.journey-phase {
  opacity: 0;
  transform: translateY(45px);
  transition: all 0.75s var(--ease-spring);
  will-change: transform, opacity;
}
.section-animate.in-view,
.journey-phase.in-view {
  opacity: 1;
  transform: translateY(0);
}
.section-animate.delay-100 { transition-delay: 100ms; }
.section-animate.delay-200 { transition-delay: 200ms; }
.section-animate.delay-300 { transition-delay: 300ms; }

.timeline-progress {
  transition: height 1.4s var(--ease-spring);
}

/* ──────────── CONTACT FORM (legacy) ──────────── */
input, textarea {
  transition: all var(--dur-base) ease;
  border: 1px solid var(--border-steel);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  font-size: 1rem;
  background: white;
}
input:focus, textarea:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  outline: none;
}

/* ──────────── SERVICES TABLE (legacy) ──────────── */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 20px 24px; text-align: left; border-bottom: 1px solid var(--border-steel); }
thead tr { background: white; border-bottom: 2px solid var(--border-steel); }
th { font-weight: 600; color: var(--text-deep); font-size: 1.05rem; }
tr:hover { background-color: #f0f9ff; }
.table-container {
  background: var(--card-white);
  border: 1px solid var(--border-steel);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.05);
}


/* ══════════════════════════════════════════════════════════════════════
   NAVBAR CONSISTENCY FIX (Logo + Menu)
   ══════════════════════════════════════════════════════════════════════ */

nav .max-w-7xl {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

nav .flex.justify-between > a:first-child,
nav .flex.justify-between > div:last-child {
  margin-left: 0;
  margin-right: 0;
}

/* Logo text — sized via inline style="font-size:20px" on each page.
   No !important override here so inline styles take precedence. */
nav .logo-text {
  font-size: 1.25rem;   /* 20px fallback only — inline style wins */
  line-height: 1.5;
}

/* Nav links — styled via .nav-link class, no !important needed */
nav .hidden.md\:flex a {
  font-size: 0.8125rem;
  font-weight: 600;
  transition: color 0.2s ease;
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .nav-desktop { display: none; }
  .steps-desktop { display: none !important; }
  .steps-mobile { display: flex !important; }
  .contact-strip { grid-template-columns: 1fr 1fr !important; }
  .assist-strip { flex-direction: column; align-items: flex-start; }
  .qr-grid { grid-template-columns: 1fr !important; }

  /* Hero heading — tighter on small screens */
  .hero-h1 { font-size: clamp(28px, 8vw, 40px); }

  /* Tables — allow horizontal scroll on tiny screens */
  .comparison-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Tier cards — stack on mobile */
  .tier-card { margin-bottom: 0; }

  /* Card grids — ensure text doesn't overflow */
  .card { word-break: break-word; }
  .card h3 { font-size: 14px; }

  /* CTA buttons — full width on mobile */
  .cta-band .btn-primary { width: 100%; justify-content: center; }

  /* Free resource card — stack on mobile */
  .card > div[style*="flex:1"] { min-width: 0; }
}

@media (max-width: 768px) {
  h1 { font-size: clamp(26px, 8vw, 38px); }
  h2 { font-size: clamp(22px, 6vw, 32px); }
}


/* ══════════════════════════════════════════════════════════════════════
   BLOG SVG DIAGRAM CLASSES
   Used in inline SVGs across blog articles (chain of custody,
   Venn diagram, concentric circles). All SVG nodes use these classes
   so HTML stays clean and styles are maintained here.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Node containers ── */
.node rect {
  stroke-width: 0.5px;
}

/* ── Teal node (inner ring / established / custody stages) ── */
.c-teal rect {
  fill: #0F6E56;
  stroke: #085041;
}

/* ── Bright teal node (focus / highlighted category) ── */
.c-teal-bright rect {
  fill: #1D9E75;
  stroke: #0F6E56;
  stroke-width: 2px;
}

/* ── Grey node (outer ring / adjacent / standard) ── */
.c-gray rect {
  fill: #444441;
  stroke: #2C2C2A;
}

/* ── Slate node (standard logistics) ── */
.c-slate rect {
  fill: #888780;
  stroke: #5F5E5A;
}

/* ── Node heading text ── */
.th {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  fill: #E1F5EE;
}

/* ── Node subtext ── */
.ts {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  fill: #9FE1CB;
}

/* ── Dark node text (for slate/grey nodes) ── */
.th-dark {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  fill: #F1EFE8;
}

.ts-dark {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  fill: #D3D1C7;
}

/* ── Evidence tag boxes (chain of custody) ── */
.evidence-tag rect {
  fill: #E1F5EE;
  stroke: #5DCAA5;
  stroke-width: 0.75px;
}

.evidence-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  fill: #085041;
}

.evidence-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  fill: #0F6E56;
}

/* ── Left column box (what this creates) ── */
.creates-box rect {
  fill: #F0FDF4;
  stroke: #BBF7D0;
  stroke-width: 0.75px;
}

.creates-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  fill: #166534;
}

.creates-text {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  fill: #166534;
}

/* ── SVG connector arrows ── */
.svg-arrow {
  stroke: #1D9E75;
  stroke-width: 2px;
  fill: none;
}

/* ── SVG diagram footer text ── */
.svg-footer {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  fill: #0F6E56;
}

/* ── SVG diagram section heading ── */
.svg-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 500;
  fill: #2C2C2A;
}

/* ── Pill label boxes (Venn diagram titles) ── */
.pill-standard rect {
  fill: #D3D1C7;
  stroke: #B4B2A9;
  stroke-width: 0.5px;
}

.pill-secured rect {
  fill: #9FE1CB;
  stroke: #5DCAA5;
  stroke-width: 0.5px;
}

.pill-text-standard {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  fill: #2C2C2A;
}

.pill-text-secured {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  fill: #04342C;
}

.pill-sub-standard {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  fill: #5F5E5A;
}

.pill-sub-secured {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  fill: #085041;
}