/* ==========================================================================
   ZAO — Shared components: nav, buttons, cards, footer, forms, waitlist,
   consent banner, marquee ticker. Style is the single source of truth;
   markup partials paste identically across pages.
   ========================================================================== */

/* ---------------------------------------------------------------- Buttons */
.btn{
  --btn-fg:var(--ink); --btn-bg:transparent; --btn-bd:var(--line-2);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--f-mono);
  font-size:var(--step--1); font-weight:600;
  letter-spacing:.02em;
  padding:.85rem 1.4rem;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid var(--btn-bd);
  border-radius:var(--radius);
  cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease),
             color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

/* Primary — solid ink, the "stamp" */
.btn-p{ --btn-fg:var(--paper); --btn-bg:var(--ink); --btn-bd:var(--ink); box-shadow:var(--shadow-1); }
.btn-p:hover{ --btn-bg:#000; box-shadow:var(--shadow-2); }

/* Accent — red */
.btn-r{ --btn-fg:#fff; --btn-bg:var(--red); --btn-bd:var(--red); }
.btn-r:hover{ --btn-bg:var(--red-ink); }

/* Outline / ghost */
.btn-o{ --btn-fg:var(--ink); --btn-bg:transparent; --btn-bd:var(--line-2); }
.btn-o:hover{ --btn-bg:var(--ink); --btn-fg:var(--paper); --btn-bd:var(--ink); }

.btn-s{ padding:.6rem 1rem; font-size:var(--step--2); }
.btn-lg{ padding:1rem 1.7rem; font-size:var(--step-0); }

/* ------------------------------------------------------------------- Logo */
.logo{ display:inline-flex; align-items:center; gap:.6rem; }
.logo-mark{ flex:none; }
.logo-mark .z-top{ fill:var(--red); }
.logo-mark .z-bottom{ fill:var(--blue); }
.logo-mark .z-line{ stroke:var(--amber); }
.logo-wm{
  display:block; font-family:var(--f-display); font-weight:800;
  font-size:1.12rem; line-height:1; letter-spacing:-.01em; color:var(--ink);
  font-variation-settings:'wght' 800, 'opsz' 24;
}
.logo-sub{
  display:block; font-family:var(--f-mono); font-size:.52rem; line-height:1;
  letter-spacing:.34em; color:var(--ink-3); margin-top:3px;
}

/* -------------------------------------------------------------------- Nav */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-inline:var(--gutter);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
          backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.nav-links{
  display:flex; align-items:center; gap:.3rem; list-style:none;
}
.nav-links a{
  font-family:var(--f-mono); font-size:var(--step--2); font-weight:600;
  letter-spacing:.04em; color:var(--ink-2);
  padding:.5rem .7rem; border-radius:var(--radius);
  position:relative; transition:color .18s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="true"]{ color:var(--ink); }
.nav-links a::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.28rem; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current="true"]::after{ transform:scaleX(1); }

.nav-r{ display:flex; align-items:center; gap:.75rem; }

/* Language toggle */
.lt{ display:inline-flex; border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; }
.lt a{
  font-family:var(--f-mono); font-size:.72rem; font-weight:600; letter-spacing:.05em;
  padding:.35rem .55rem; color:var(--ink-3); transition:background .16s var(--ease), color .16s var(--ease);
}
.lt a.on{ background:var(--ink); color:var(--paper); }
.lt a:not(.on):hover{ background:var(--paper-3); color:var(--ink); }

/* Hamburger */
.nav-toggle{
  display:none;
  width:42px; height:42px; flex:none;
  border:1px solid var(--line-2); border-radius:var(--radius);
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.nav-toggle-bar{ width:18px; height:2px; background:var(--ink); transition:transform .25s var(--ease), opacity .2s; }
body.nav-open .nav-toggle-bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle-bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-scrim{
  position:fixed; inset:0; z-index:98;
  background:rgba(20,23,26,.42);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease), visibility .28s;
}
body.nav-open .nav-scrim{ opacity:1; visibility:visible; }

/* Collapse to off-canvas below 900px. A viewport media query is used (not a
   container query) because the nav is page-level, and container-type would
   turn .nav into the containing block for the position:fixed panel, clipping
   the off-canvas drawer to the 68px bar height. */
@media (max-width: 900px){
  /* Drop the blur here: backdrop-filter on .nav would create a containing
     block that traps the position:fixed off-canvas panel to the bar height. */
  .nav{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--paper); }
  .nav-toggle{ display:flex; }
  .nav-panel{
    position:fixed; top:0; right:0; bottom:0; z-index:99;
    width:min(86vw,340px);
    display:flex; flex-direction:column; gap:1.4rem;
    padding:calc(var(--nav-h) + 1.4rem) 1.6rem 2rem;
    background:var(--paper-2);
    border-left:1px solid var(--line);
    box-shadow:var(--shadow-3);
    transform:translateX(100%);
    transition:transform .3s var(--ease);
    overflow-y:auto;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:28px 28px;
  }
  body.nav-open .nav-panel{ transform:translateX(0); }
  .nav-links{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .nav-links a{ font-size:var(--step-0); padding:.7rem .2rem; border-bottom:1px solid var(--line); }
  .nav-links a::after{ display:none; }
  .nav-panel .nav-r{ flex-direction:column; align-items:stretch; gap:1rem; margin-top:.5rem; }
  .nav-panel .lt{ align-self:flex-start; }
  .nav-panel .btn{ width:100%; }
}
/* When panel is inline (desktop), it must not carry off-canvas styles */
@media (min-width: 901px){
  .nav-panel{ display:flex; align-items:center; gap:1.5rem; transform:none!important; }
}
.nav-panel{ display:flex; align-items:center; gap:1.5rem; }

/* ------------------------------------------------------------------ Cards */
.card{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.3rem,3vw,2rem);
  box-shadow:var(--shadow-1);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--line-2); }

/* A small mono index tag, e.g. "LAYER 01" */
.tag{
  display:inline-block; font-family:var(--f-mono); font-size:var(--step--2);
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius);
  padding:.2rem .5rem;
}
.tag-red{ color:var(--red-ink); border-color:color-mix(in srgb,var(--red) 40%,var(--line)); }
.tag-blue{ color:var(--blue-ink); border-color:color-mix(in srgb,var(--blue) 40%,var(--line)); }

/* ----------------------------------------------------------- Chips / dots */
.chip{
  font-family:var(--f-mono); font-size:.66rem; font-weight:600; letter-spacing:.06em;
  padding:.28rem .5rem; border-radius:var(--radius);
  background:var(--ink); color:var(--paper);
}

/* ----------------------------------------------------------------- Ticker */
.ticker{
  border-block:1px solid var(--line);
  background:var(--paper-2);
  overflow:hidden; padding-block:.8rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-track{
  display:inline-flex; align-items:center; gap:2.6rem; white-space:nowrap;
  animation:ticker 46s linear infinite; will-change:transform;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-item{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-mono); font-size:var(--step--1); font-weight:600;
  color:var(--ink-2); letter-spacing:.02em;
}
.ticker-item::before{ content:""; width:6px; height:6px; background:var(--red); border-radius:50%; }
.ticker-item:nth-child(even)::before{ background:var(--blue); }

/* ------------------------------------------------------------------ Forms */
.field{
  width:100%;
  font-family:var(--f-body); font-size:var(--step-0);
  padding:.9rem 1rem;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--radius);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field::placeholder{ color:var(--ink-3); }
.field:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--tint-blue); }

/* --------------------------------------------------------------- Waitlist */
.waitlist{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  padding:clamp(1.6rem,5vw,3rem);
  box-shadow:var(--shadow-2);
  overflow:hidden;
}
.waitlist::before{ /* corner registration crosshair */
  content:""; position:absolute; top:14px; right:14px; width:18px; height:18px;
  background:
    linear-gradient(var(--line-2),var(--line-2)) center/100% 1px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) center/1px 100% no-repeat;
  opacity:.7;
}
.waitlist-form{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem; }
.waitlist-form .field{ flex:1 1 240px; }
.waitlist-gdpr{ margin-top:1rem; }
.waitlist-gdpr label{ display:flex; gap:.6rem; align-items:flex-start; font-size:var(--step--1); color:var(--ink-2); line-height:1.5; }
.waitlist-gdpr input{ margin-top:.25rem; accent-color:var(--red); width:1rem; height:1rem; flex:none; }
.waitlist-gdpr a{ color:var(--blue-ink); text-decoration:underline; text-underline-offset:2px; }
.waitlist-note{ margin-top:.9rem; font-family:var(--f-mono); font-size:var(--step--2); color:var(--ink-3); }
.waitlist-div{ border:none; border-top:1px solid var(--line); margin:1.6rem 0 1.2rem; }
.waitlist-contact{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; justify-content:space-between; font-size:var(--step--1); color:var(--ink-2); }

/* --------------------------------------------------------- Consent banner */
.consent-banner{
  position:fixed; left:16px; bottom:16px; z-index:150;
  width:min(400px,calc(100vw - 32px));
  background:var(--paper-2); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3); padding:1.2rem 1.3rem;
}
.consent-banner[hidden]{ display:none; }
.consent-title{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; }
.consent-text{ font-size:var(--step--1); color:var(--ink-2); margin-top:.4rem; line-height:1.5; }
.consent-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.consent-actions .btn{ flex:1 1 auto; }
.consent-prefs{ display:none; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.consent-prefs.show{ display:block; }
.consent-checkbox{ display:flex; gap:.6rem; align-items:flex-start; font-size:var(--step--1); color:var(--ink-2); }
.consent-checkbox input{ margin-top:.2rem; accent-color:var(--red); }
.consent-actions-top{ margin-top:.9rem; }
.consent-manage{ position:fixed; left:16px; bottom:16px; z-index:140; display:none; }
.consent-manage.show{ display:inline-flex; }
@media (max-width:560px){
  /* smaller footprint on phones — it's a persistent floating control, so it
     should cover as little content as possible while staying reachable */
  .consent-manage{ left:10px; bottom:10px; padding:.4rem .7rem; font-size:.72rem; }
}

/* ---------------------------------------------------------------- Footer */
.footer{
  border-top:1px solid var(--line);
  background:var(--paper-2);
  padding-block:clamp(2rem,5vw,3.2rem);
}
.footer-inner{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; flex-wrap:wrap; gap:1.2rem 2rem; align-items:center; justify-content:space-between;
}
.footer-brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--f-display); font-weight:800; }
.footer-tech{ color:var(--ink-3); font-weight:600; }
.footer-cp{ font-family:var(--f-mono); font-size:var(--step--2); color:var(--ink-3); }
.footer-links{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; }
.footer-links a{
  font-family:var(--f-mono); font-size:var(--step--2); color:var(--ink-2);
  letter-spacing:.03em; transition:color .16s var(--ease);
}
.footer-links a:hover{ color:var(--red-ink); }

/* ----------------------------------------------------- Thermal divider */
/* A slim heating-pipe rule with a hot-water pulse — separates major zones. */
.thermal-rule{
  position:relative; height:3px; width:100%; border-radius:3px; overflow:hidden;
  background:linear-gradient(90deg,transparent 0%,#1D4ED8 10%,#5B8DE8 28%,#E8A22B 66%,#D42B1C 90%,transparent 100%);
}
.thermal-rule::after{
  content:""; position:absolute; top:0; bottom:0; width:60px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  animation:thermal-pulse 4.5s linear infinite;
}
@keyframes thermal-pulse{ from{ left:-60px; } to{ left:100%; } }
@media (prefers-reduced-motion: reduce){ .thermal-rule::after{ display:none; } }

/* zone tag: a temperature-style chip, e.g. "ZONA 01 · 22°C" */
.zone-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:var(--step--2); font-weight:600; letter-spacing:.1em;
  color:var(--ink-2); border:1px solid var(--line-2); border-radius:99px; padding:.25rem .7rem;
}
.zone-tag::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--thermal); }

/* --------------------------------------------------------- Breadcrumbs */
.breadcrumb{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; font-family:var(--f-mono); font-size:var(--step--2); color:var(--ink-3); }
.breadcrumb a{ color:var(--ink-2); }
.breadcrumb a:hover{ color:var(--red-ink); }
.breadcrumb li{ display:flex; align-items:center; gap:.4rem; list-style:none; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0; }
.breadcrumb li+li::before{ content:"/"; color:var(--line-2); }