/* ============================================================
   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);
  /* GOLIVE-PHONE-HEADER-20260904: the nav sizes its own contents, so it is
     the query container for the phone header rules below. Everything the
     nav owns is asked about the NAV's inline size, not the viewport, so a
     narrow desk column gets the phone header too. Inline-size containment
     only; the nav's width still comes from its left/right insets. */
  container-type:inline-size;container-name:juwelnav;}
.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;}}

/* ── phone header (GOLIVE-PHONE-HEADER-20260904) ──
   MEASURED on /pricing at 390x844 and 873x325 in the mobile pass: the
   header carried five text links, two icon buttons and the CTA on one
   390px row, so the last link clipped and the CTA never rendered. On a
   phone the header carries three things: the logo, the menu, and one
   Open JUWEL button. The menu already holds every destination the hidden
   links point at, so nothing becomes unreachable.

   Asked of the NAV's own inline size (@container), not the viewport, so
   this survives a resizable window and a narrow column. The sizes are
   fluid (clamp, cqi) rather than a second breakpoint. No new colour: the
   opaque ground is the same --paper the nav already mixes. */
/* The four destination links need roughly 950px of nav before they fit on
   one line beside the brand, the menu, the theme button and the CTA. Below
   that they shrink and wrap: MEASURED at 873x325 (the Android landscape
   viewport from session 01a06cef, the churn-worst session of the day),
   where every label broke to two lines and the header ate 72 of the 325
   available pixels. So the destinations fold into the menu from 900 down,
   and only the Sign in link stays, because it is a door and the menu on
   most pages does not carry one. The old @media hid this link too from
   840 down, so nothing is lost anywhere; between 641 and 900 it is gained. */
@container juwelnav (max-width:900px){
  .nav-r .nlink{display:none;}
  .nav-r .nlink.signin{display:inline-flex;align-items:center;
    min-height:44px;white-space:nowrap;}
}
@container juwelnav (max-width:640px){
  .nav-r .nlink,.nav-r .nlink.signin{display:none;}
  .nav-r{gap:6px;}
  .brand{gap:8px;}
  .brand img{width:clamp(28px,7.6cqi,34px);height:clamp(28px,7.6cqi,34px);}
  .brand .wm{font-size:clamp(17px,4.8cqi,21px);}
  .nav-r .cbtn{white-space:nowrap;padding-inline:clamp(12px,3.6cqi,20px);}
}
/* The scrolled nav was translucent enough for page text to read straight
   through it and collide with the header (MEASURED: "no charge, with a
   monthly action" legible behind the header on the Pro-card frame). On a
   phone-width header it is opaque, both scrolled and not, and the blur is
   dropped so browsers without backdrop-filter get the same result. Kept as
   @media because a container query cannot restyle its own container. */
@media(max-width:640px){
  .nav,.nav.scrolled{background:var(--paper);backdrop-filter:none;}
  .nav.scrolled{box-shadow:0 1px 0 var(--line-2);}
}
.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;}
/* GOLIVE-PHONE-FIELD-20260904, MEASURED on /pricing at 390px: this field
   rendered as a ~200px tall oval with the placeholder against its left
   inner edge. Root cause: `flex:1 1 220px` plus a `flex-direction:column`
   at max-width:520px below. Once the row is a column, 220px is a flex
   basis on the BLOCK axis -- it is the field's HEIGHT -- and
   border-radius:var(--r-full) turned that 220px box into an ellipse.

   The fix is fluid, not another breakpoint: the row stays a row and wraps.
   The basis is `min(220px,100%)`, so it can never exceed the line box, and
   it is always an inline measure because the direction never flips. Below,
   the 520px block keeps only what it is actually for (iOS zoom and the
   44px target); the direction flip is gone. */
.f-newsletter .fn-row{margin-top:14px;display:flex;flex-flow:row wrap;gap:8px;
  justify-content:center;align-items:center;}
.f-newsletter .fn-email{
  flex:1 1 min(220px,100%);min-width:0;max-width:280px;min-height:44px;
  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){
  /* No flex-direction flip here any more (see the fluid note above). What
     is left is the two things this breakpoint is really for: a 44px target
     and a 16px field, which is the size below which iOS Safari zooms the
     page on focus. max-width:none lets the wrapped field fill its line. */
  .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.

   GOLIVE-PHONE-HEADER-20260904 root cause, MEASURED on /pricing at 390px
   in the 2026-09-04 mobile pass: this block used to read
   `.menu-pop a,.nlink{min-height:44px;display:flex;...}`. That re-declared
   `display` at EQUAL specificity AFTER `@media(max-width:840px){.nlink{
   display:none;}}` on line 47, so the later rule won and the whole desktop
   nav came back on the phone -- "Product vision" clipped at the right edge,
   the Sign in link and the Open JUWEL button pushed off screen entirely.
   A tap target for a link that is display:none at this width is dead CSS,
   so .nlink is simply out of the selector now and the hide on line 47
   stands. .nlink keeps its own desktop padding (10px 14px) above. */
@media(max-width:840px){
  .menu-pop a{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;}
}