/* ============================================================
   JUWEL - Shared chrome - juwel-chrome.css (v1, 2026-07-19)
   Packet PKT-CHROME / DD-UNIFY-01 (DESIGN-DIRECTOR finding 5).

   The single source of truth for the chrome every juwel.ai
   marketing page shares: the top nav (brand, links, menu, theme
   button), the full footer (newsletter form, gem, BETA TESTING
   line, domain links, legal), and the [data-rv] reveal
   primitive. Until now these rules were copy-paste maintained
   per page; any nav change was a 17-file edit.

   Pages keep their static markup (SEO and no-JS safe; a
   JS-injected footer is explicitly rejected). Each page adds
   one <link> to this sheet after the standard stack:
     juwel-ds.css -> luxliq.css -> juwel-liquid.css ->
     juwel-earth.css -> juwel-humanist.css -> juwel-chrome.css

   Token law (DESIGN-DIRECTOR spec, unification pass): no new
   color, radius, shadow, or font-family literals here; every
   value resolves to an existing juwel-ds.css / luxliq.css
   token. Eases come only from the ratified set (--ease-out /
   --ease-viscous, --ease-flow, --ease-buoyant). Bounce stays
   banned. Weight ceiling 700. Reduced-motion fallbacks ship
   with the reveal and menu motion below.
   ============================================================ */

:root{
  --nav-h:72px; /* canonical home of the nav-height token
                   (migrated from juwel-liquid.css; same value) */
}

/* ── nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;gap:10px;padding:0 clamp(18px,3.5vw,44px);
  transition:background .35s var(--ease),box-shadow .35s var(--ease);}
.nav.scrolled{background:color-mix(in srgb,var(--paper) 72%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 1px 0 var(--line-2);}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.brand img{width:34px;height:34px;transition:transform var(--visc-settle,.5s) var(--ease-viscous,var(--ease-out));}
.brand:hover img{transform:rotate(-14deg) scale(1.12);}
.brand .wm{font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--ink);}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:8px;}
.nlink{font-size:14.5px;font-weight:600;color:var(--ink-2);text-decoration:none;padding:10px 14px;border-radius:var(--r-full);
  transition:color .18s,background var(--visc-bead,.3s) var(--ease-viscous,var(--ease-out));}
.nlink:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 80%,transparent);
  box-shadow:inset 0 0 0 1px var(--line-2);}
@media(max-width:840px){.nlink{display:none;}}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);border-radius:var(--r-full);cursor:pointer;
  box-shadow:inset 0 1px 0 var(--edge);
  transition:color .15s ease,background .15s ease,border-color .15s ease,
    box-shadow var(--visc-bead,.32s) var(--ease-viscous,var(--ease-out));}
.icon-btn:hover{color:var(--ink);background:var(--surface-2);
  box-shadow:inset 0 1px 0 var(--edge);}
.icon-btn:active{transform:scale(.96);}
.icon-btn svg{width:19px;height:19px;}
#themeBtn .moon{display:none;}
html[data-theme="dark"] #themeBtn .sun{display:none;}
html[data-theme="dark"] #themeBtn .moon{display:block;}

/* melt-open menu */
.menu-wrap{position:relative;}
.menu-pop{position:absolute;top:calc(100% + 12px);right:0;min-width:236px;z-index:90;
  background:var(--surface);border-radius:var(--r-lg);padding:10px;
  box-shadow:var(--shadow-lg),inset 0 0 0 1.5px var(--line-2);
  transform-origin:top right;display:none;}
.menu-pop.open{display:block;animation:facetPop var(--visc-bead,.32s) var(--ease-viscous,var(--ease-out)) both;}
.menu-pop.closing{display:block;animation:facetPopOut var(--visc-bead,.24s) var(--ease-viscous,var(--ease-out)) both;}
@keyframes facetPop{from{transform:scale(.97) translateY(-4px);opacity:0;filter:blur(3px);}
  60%{filter:blur(0);}to{transform:none;opacity:1;filter:none;}}
@keyframes facetPopOut{to{transform:scale(.97) translateY(-4px);opacity:0;filter:blur(3px);}}
.menu-pop a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink);font-weight:600;font-size:14.5px;
  transition:background .15s ease;}
.menu-pop a:hover{background:var(--surface-2);}
.menu-pop a .mi{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--topaz-ink);flex:none;
  background:var(--surface-2);border:1px solid var(--line);}
.menu-pop a .mi svg{width:16px;height:16px;}
.menu-pop a small{display:block;font-weight:500;font-size:12px;color:var(--ink-3);margin-top:1px;}

/* ── footer ── */
footer{padding:70px 24px 60px;text-align:center;}
footer .f-gem{width:44px;height:44px;margin:0 auto;}
footer .f-line{margin-top:18px;font-weight:700;font-size:17px;letter-spacing:-.01em;}
footer .f-domains{margin:14px auto 0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--ink-3);}
footer .f-domains span{background:color-mix(in srgb,var(--surface) 75%,transparent);border:1px solid var(--line-2);border-radius:var(--r-full);padding:7px 14px;}
footer .f-domains b{color:var(--ink-2);font-weight:600;}
footer .f-legal{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-4);}
/* Product beta badge in footers (juwel.ai marketing) */
footer .f-beta{
  display:inline-block;
  margin-left:8px;
  padding:3px 9px;
  border-radius:var(--r-full,999px);
  border:1px solid color-mix(in srgb,var(--ink-3) 55%,transparent);
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  vertical-align:middle;
  color:var(--ink-2);
}

/* newsletter capture (EMAIL-MKT-01 slice 1) - a footer form is a user
   action (you act), so per the Amber Rule this stays ink, never amber. */
.f-newsletter{max-width:420px;margin:32px auto 0;text-align:center;}
.f-newsletter .fn-label{font-weight:700;font-size:14.5px;letter-spacing:-.005em;}
.f-newsletter .fn-copy{margin:6px 0 0;font-size:13px;color:var(--ink-3);line-height:1.5;}
.f-newsletter .fn-row{margin-top:14px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
.f-newsletter .fn-email{
  flex:1 1 220px;min-width:0;max-width:280px;padding:11px 14px;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;
  box-shadow:inset 0 1px 0 var(--edge);
}
.f-newsletter .fn-email:focus{outline:2px solid var(--focus-ring);outline-offset:2px;}
.f-newsletter .fn-submit{
  padding:11px 20px;border-radius:var(--r-full);border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);font-weight:700;font-size:14px;cursor:pointer;
  /* one-off cubic-bezier literal retired to the ratified ease token */
  transition:background 200ms var(--ease-out);
}
.f-newsletter .fn-submit:hover{background:color-mix(in srgb,var(--ink) 88%,var(--paper));}
.f-newsletter .fn-submit:disabled{opacity:.6;cursor:default;}
.f-newsletter .fn-status{margin-top:10px;font-size:12.5px;color:var(--ink-3);min-height:1.4em;}
.f-newsletter .fn-status[data-state="ok"]{color:var(--ink-2);}
.f-newsletter .fn-status[data-state="error"]{color:var(--ink-2);}
@media (max-width:520px){
  .f-newsletter .fn-row{flex-direction:column;}
  .f-newsletter .fn-email,.f-newsletter .fn-submit{max-width:none;min-height:44px;}
  .f-newsletter .fn-email{font-size:16px;}
}

/* ── reveals (flow + non-pinned). Fail visible until JS is ready. ── */
[data-rv]{opacity:1;transform:none;filter:none;}
body.reveals-ready [data-rv]:not(.in){opacity:0;transform:translateY(26px) scale(.985);filter:blur(5px);}
body.reveals-ready [data-rv].in{opacity:1;transform:none;filter:none;
  transition:opacity calc(.7s*var(--mx)) var(--ease),
    transform calc(.85s*var(--mx)) var(--ease-viscous,var(--ease-buoyant)),
    filter calc(.6s*var(--mx)) var(--ease);
  transition-delay:var(--d,0s);}
body.no-motion [data-rv]{opacity:1;transform:none;transition:none;}
body.mode-static [data-rv]{opacity:1;transform:none;transition:none;}

/* a11y: comfortable tap targets on touch screens.
   Order matters: the 44px tap-target block intentionally comes
   after the mobile .nlink hide above, matching the cascade the
   pages render today. */
@media(max-width:840px){
  .menu-pop a,.nlink{min-height:44px;display:flex;align-items:center;}
  .f-domains span{padding:0;}
  .f-domains a{min-height:44px;min-width:44px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;}
  .brand{min-height:44px;}
  .icon-btn{min-width:44px;}
}

/* reduced motion: reveals and menu pops settle instantly */
@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1;transform:none;filter:none;transition:none;}
  .menu-pop.open,.menu-pop.closing{animation:none;}
}