/* Huupa public site: base layer (fonts, tokens, shell, buttons, forms).
   Loaded on EVERY public page. Component styles for the new pages live in site.css and are
   loaded only by pages that do not carry the old app stylesheet (style.css). The tokens
   below are aliased to the old variable names under .pub so older public pages (scan,
   checkout, legal) pick up the same palette and type without being rewritten. */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/static/fonts/bricolage-grotesque-500-800.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/static/fonts/instrument-sans-400-600.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/dm-mono-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/dm-mono-500.woff2") format("woff2"); }

:root {
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* JBKlutse Ventures brand, from the company site's own tokens (jbklutseventures-site/app/globals.css):
     warm paper ground, deep green-black ink, one teal. --edge and --mint are lighter tints of that teal. */
  --bg: #faf6ee; --surface: #fefbf6; --ink: #0a1412; --mute: #52615d; --line: #d0cabc; --soft: #ede7db;
  --brand: #008577; --brand-ink: #f8fdfc; --brand-hover: #007569; --edge: #09b09f; --mint: #ace5da;
  --ok: #12804a; --warn: #a8690a; --bad: #b42318;
  --dark: #05100d; --dark-ink: #e8f1ee;
  --shadow: 0 1px 2px rgba(10, 20, 18, .06), 0 18px 40px -18px rgba(10, 20, 18, .28);
}

/* Older public pages use the app's variable names; point them at the new palette. */
.pub {
  --font: var(--f-body); --mono: var(--f-mono);
  --surface-2: var(--soft); --border: var(--line); --border-strong: #bdb6a6;
  --text: var(--ink); --text-2: #23312e; --muted: var(--mute); --muted-2: #8a9894;
  --accent: var(--brand); --accent-hover: var(--brand-hover); --accent-soft: var(--soft); --accent-contrast: var(--brand-ink);
  --ok-soft: #e0f3e8; --warn-soft: #f7ecd5; --bad-soft: #fbe6e3; --info: #1f5fbf; --info-soft: #e3ecfa;
  --radius: 14px; --radius-sm: 10px; --lift: var(--shadow);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.pub { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.pub img { max-width: 100%; height: auto; }
body.pub a { color: inherit; }
.p-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: 8px; }
.p-skip:focus { left: 8px; }

/* shell */
.p-wrap { max-width: 1180px; margin-inline: auto; padding-inline: max(clamp(18px, 4vw, 56px), env(safe-area-inset-left, 0px)) max(clamp(18px, 4vw, 56px), env(safe-area-inset-right, 0px)); }
.p-nav { display: flex; align-items: center; gap: 28px; padding-block: 18px; }
.p-logo { font: 800 1.45rem/1 var(--f-display); letter-spacing: -.04em; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.p-logo::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--edge); box-shadow: 0 0 0 4px rgba(172, 229, 218, .55); }
.p-links { display: flex; gap: 26px; font-size: 15px; font-weight: 500; margin-left: 12px; }
.p-links a { color: var(--mute); text-decoration: none; padding-block: 6px; }
.p-links a:hover, .p-links a[aria-current="page"] { color: var(--ink); }
.p-grow { flex: 1; }
.p-menu { display: none; position: relative; }
.p-menu summary { list-style: none; cursor: pointer; }
.p-menu summary::-webkit-details-marker { display: none; }
.p-menu-list { position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); min-width: 220px; display: flex; flex-direction: column; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.p-menu-list a { padding: 13px 14px; border-radius: 9px; text-decoration: none; font-size: 15px; font-weight: 500; }
.p-menu-list a:hover { background: var(--soft); }

.p-foot { border-top: 1px solid var(--line); margin-top: 8px; padding-block: 44px 64px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; font-size: 14.5px; color: var(--mute); }
.p-foot b { display: block; color: var(--ink); font: 700 14px var(--f-display); margin-bottom: 10px; }
.p-foot a { display: block; padding: 5px 0; text-decoration: none; }
.p-foot a:hover { color: var(--ink); }
.p-foot .p-fine { grid-column: 1 / -1; font: 400 12px var(--f-mono); padding-top: 22px; border-top: 1px solid var(--line); }
body.pub a.p-wa { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font: 600 14px var(--f-body); text-decoration: none; box-shadow: 0 10px 28px -8px rgba(0, 133, 119, .55); }
.p-wa svg { width: 20px; height: 20px; flex: none; }
body.pub a.p-wa:hover { background: var(--brand-hover); color: var(--brand-ink); }

/* buttons (also restyles the older .btn used on scan, checkout and legal pages) */
.pub .btn, .pub .btn-primary { font-family: var(--f-body); }
.pub .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1; border: 1.5px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer; text-decoration: none; transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pub .btn:hover { transform: translateY(-1px); background: transparent; text-decoration: none; }
.pub .btn.primary, .pub .btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pub .btn.primary:hover, .pub .btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: 0 10px 24px -10px var(--brand); }
.pub .btn.sm, .pub .btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.pub .btn.ghost, .pub .btn-ghost { border-color: transparent; color: var(--mute); }
.pub .btn.ghost:hover, .pub .btn-ghost:hover { color: var(--ink); background: var(--soft); }
.pub .btn svg { width: 16px; height: 16px; transition: transform .18s ease; }
.pub .btn:hover svg { transform: translateX(3px); }
.pub .btn[disabled] { opacity: .5; pointer-events: none; }
.pub :focus-visible { outline: 2.5px solid var(--brand); outline-offset: 3px; }

/* forms */
.pub .input, .pub .select, .pub .textarea { width: 100%; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: 500 16px var(--f-body); }
.pub .textarea { padding: 12px 16px; min-height: 120px; }
.pub .input:focus-visible, .pub .select:focus-visible, .pub .textarea:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 1px; border-color: var(--ink); }

@media (max-width: 900px) {
  .p-links { display: none; }
  .p-menu { display: block; }
  .p-nav { gap: 10px; }
  .p-foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .p-nav .btn.ghost { display: none; }
  .p-foot { grid-template-columns: 1fr; }
  .p-wa span { display: none; }
  body.pub a.p-wa { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pub .btn, .pub .btn svg { transition: none; }
}