/* =====================================================================
   zoyel-site.css — shared additions for zoyel.com (loaded right after common.css)
   ---------------------------------------------------------------------
   The design is the live zoyel.com design (common.css + each page's own CSS).
   This file only adds:
     1. ROOT TOKENS: primary colour (V2 blue) and layout tokens. Edit here.
     2. Readable text on primary buttons (dark text on teal → white on blue).
     3. Shared navbar + footer extras (dropdowns, buttons, 6-column footer).
     4. Building blocks for the 10 new V2 pages, drawn from live components
        (section labels, serif titles, cards, .bp/.bg buttons, hero grid).
   ===================================================================== */

/* ── 1. ROOT TOKENS ──────────────────────────────────────────────── */
/* Primary colour: V2 blue replaces the teal of common.css on every page that loads this file.
   (All live CSS uses var(--teal), so nothing else needs to change.) */
:root {
  --teal: #2f7df6;                     /* primary */
  --teal-dark: #1f66e0;                /* primary hover */
  --teal-glow: rgba(47, 125, 246, 0.15);
}
[data-theme="light"] {
  --teal: #1f5fd0;
  --teal-dark: #1a4fb0;
  --teal-glow: rgba(31, 95, 208, 0.12);
}
:root {
  --z-maxw: 1600px;                              /* content max width (new pages) */
  --z-pad-x: 4vw;                                /* side padding (live: 4vw) */
  --z-pad-y: clamp(4.5rem, 8vw, 8rem);           /* section padding (live: 8rem) */
  --z-radius: 4px;                               /* card radius (live: 4px) */
  --z-accent: var(--teal);
  --z-accent-2: var(--teal-dark);
  --z-text: var(--white);
  --z-text-2: color-mix(in srgb, var(--white) 68%, transparent);
  --z-text-3: color-mix(in srgb, var(--white) 46%, transparent);
  --z-bg-1: var(--black);
  --z-bg-2: var(--ink);
  --z-bg-3: var(--slate);
  --z-card: rgba(255, 255, 255, 0.02);           /* live .cat-col */
  --z-card-hover: rgba(255, 255, 255, 0.04);
  --z-line: var(--border);
  --z-amber: var(--amber);
  --z-glow: rgba(37, 99, 235, 0.10);             /* live hero glow */
  --z-grid: rgba(37, 99, 235, 0.05);             /* live hero grid lines */
  --z-th: rgba(0, 0, 0, 0.25);
}
[data-theme="light"] {
  --z-card: #ffffff;
  --z-card-hover: #fbfaf6;
  --z-th: var(--slate);
}

/* ── 2. TEXT ON PRIMARY BUTTONS ─────────────────────────────────── */
/* The live pages put dark text on the teal; on the blue primary, white text keeps them readable. */
html body .bp, html body .nav-cta, html body .mobile-menu .m-cta, html body .submit-btn, html body .modal-submit, html body .msub,
html body .inline-otp-verify, html body .cover-badge, html body .shr.fill, html body .hrc-badge, html body .hbtn.pri, html body .sb-btn,
html body .nl-sub-btn, html body .newsletter-btn, html body .ty-btn-primary, html body .aud-btn.selected .ab-icon { color: #fff !important; }
html body .bp:hover, html body .nav-cta:hover { color: #fff !important; }

/* ── 3. SHARED NAVBAR + FOOTER (markup in common.py) ────────────── */
.znav .nav-links { gap: 1.3rem; }
.znav .nav-dropdown-label { cursor: pointer; }
.znav .nav-dropdown:focus-within .nav-dropdown-menu {
  visibility: visible; opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0); transition: opacity .18s ease, transform .18s ease, visibility 0s 0s;
}
.znav .nav-dropdown:focus-within .nav-dropdown-label, .znav .nav-dropdown.is-active .nav-dropdown-label { color: var(--teal); }
.znav .nav-dropdown-menu { min-width: 220px; }
.znav .nav-dropdown-menu a.active { color: var(--teal) !important; }
.znav .znav-sep { width: 1px; height: 18px; background: var(--border); }
.znav .nav-links a.znav-door { border: 1px solid var(--border); border-radius: 8px; padding: .45rem .8rem; font-size: .7rem; }
.znav .nav-links a.znav-door:hover, .znav .nav-links a.znav-door.on { border-color: var(--teal); color: var(--teal); }
.znav-mobile .znav-mdoors { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .75rem; }
.znav-mobile a.znav-mdoor { border: 1px solid var(--teal) !important; color: var(--teal) !important; text-align: center;
  border-radius: 2px; padding: .6rem .25rem !important; font-size: .8rem !important; }
.znav-mobile { max-height: calc(100vh - 56px); overflow-y: auto; }
@media (max-width: 1360px) { .znav .nav-links { display: none; } .znav .nav-burger { display: flex; } }

footer.zfoot { grid-template-columns: 2fr repeat(5, minmax(0, 1fr)); gap: 2.25rem; }
footer.zfoot ul { list-style: none; }
footer.zfoot li { margin-bottom: .2rem; }
@media (max-width: 1100px) { footer.zfoot { grid-template-columns: repeat(3, minmax(0, 1fr)); } footer.zfoot > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 768px) { footer.zfoot { grid-template-columns: 1fr 1fr; } }

/* ── 4. BUILDING BLOCKS FOR THE NEW PAGES (live components) ─────── */
/* Every new-page section carries class "z"; nothing here touches the live pages. */
[id] { scroll-margin-top: 84px; }
.anchor { display: block !important; position: relative; height: 0 !important; width: 0; overflow: hidden;
  padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }

.z { position: relative; padding: var(--z-pad-y) var(--z-pad-x); background: var(--z-bg-1); color: var(--z-text); }
.z.band { background: var(--z-bg-2); border-top: 1px solid var(--z-line); border-bottom: 1px solid var(--z-line); }
.z.band-ink { background: var(--z-bg-3); }
.z.band-blue { background: linear-gradient(135deg, var(--z-bg-2) 0%, var(--z-bg-1) 50%, var(--z-bg-2) 100%); border-top: 1px solid var(--z-line); border-bottom: 1px solid var(--z-line); }
.z.tight { padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.z.rule-top { border-top: 1px solid var(--z-line); }
/* hero: live #hero gradient + live 64px grid */
.z.hero { padding-top: calc(var(--z-pad-y) + 3.5rem); overflow: hidden;
  background: radial-gradient(ellipse 70% 50% at 65% 45%, var(--z-glow) 0%, transparent 70%), linear-gradient(180deg, var(--black) 0%, var(--ink) 100%);
  border-bottom: 1px solid var(--z-line); }
.z.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--z-grid) 1px, transparent 1px), linear-gradient(90deg, var(--z-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 100% at 90% 0%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 100% at 90% 0%, #000 20%, transparent 80%); }
.z.hero > * { position: relative; }
.z .wrap { max-width: var(--z-maxw); margin: 0 auto; }

/* type (live .stitle / .sbody / .slabel) */
.z h1 { font-family: var(--fd); font-weight: 400; font-size: clamp(2.6rem, 5.6vw, 5.2rem); line-height: 1.04; letter-spacing: -.01em; margin-bottom: 1.6rem; max-width: 18ch; }
.z h2 { font-family: var(--fd); font-weight: 400; font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.1; letter-spacing: -.01em; margin-bottom: 1.4rem; max-width: 22ch; }
.z h2::before { content: ""; display: block; width: 2rem; height: 1px; background: var(--z-accent); margin-bottom: 1.25rem; }
.z .panel h2::before, .z .doors h2::before { display: none; }
.z h3 { font-family: var(--fd); font-weight: 400; font-size: 1.45rem; line-height: 1.2; margin-bottom: .65rem; }
.z h4 { font-family: var(--fb); font-weight: 600; font-size: 1rem; line-height: 1.35; margin-bottom: .45rem; }
.z h1 em, .z h2 em, .z h3 em { font-style: italic; color: var(--z-accent); }
.z p { color: var(--z-text-2); line-height: 1.75; max-width: 68ch; margin-bottom: 1em; }
.z p:last-child { margin-bottom: 0; }
.z .lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 300; max-width: 62ch; line-height: 1.75; }
.z a { color: var(--z-accent); text-decoration: none; }
.z a:hover { text-decoration: underline; }
.z strong { color: var(--z-text); font-weight: 600; }
.z .small { font-size: .88rem; color: var(--z-text-3); }
.z .kicker, .z .breadcrumb { font-family: var(--fm); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--z-accent);
  margin-bottom: 1.25rem; display: flex; align-items: center; gap: .8rem; font-weight: 500; flex-wrap: wrap; }
.z .kicker::before, .z .breadcrumb::before { content: ""; display: block; width: 2rem; height: 1px; background: var(--z-accent); }
.z .breadcrumb a { color: inherit; }

/* grids */
.z .grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.z .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.z .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.z .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.z .g-side { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.z.hero .g-side { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
@media (max-width: 1024px) { .z .g3, .z .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .z .g-side, .z.hero .g-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .z .g2, .z .g3, .z .g4 { grid-template-columns: minmax(0, 1fr); } }

/* buttons = live .bp / .bg */
.z .btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.z .btn { display: inline-flex; align-items: center; gap: .5rem; background: transparent; color: var(--z-text); font-weight: 500; font-size: .85rem;
  padding: .85rem 1.6rem; border: 1px solid color-mix(in srgb, var(--white) 18%, transparent); border-radius: 2px; text-decoration: none; cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s; }
.z .btn:hover { border-color: var(--z-accent); color: var(--z-accent); text-decoration: none; }
.z .btn.primary { background: var(--z-accent); border-color: var(--z-accent); color: #fff; font-weight: 600; letter-spacing: .02em; }
.z .btn.primary::after { content: "→"; }
.z .btn.primary:hover { background: var(--z-accent-2); border-color: var(--z-accent-2); color: #fff; transform: translateY(-1px); }

/* cards = live .cat-col / .proof-group */
.z .panel { --pp: clamp(1.4rem, 2.2vw, 2.25rem); background: var(--z-card); border: 1px solid var(--z-line); border-radius: var(--z-radius);
  padding: var(--pp); transition: border-color .2s, background .2s; min-width: 0; }
.z .panel:hover { border-color: color-mix(in srgb, var(--z-accent) 35%, transparent); background: var(--z-card-hover); }
.z .panel > .thumb { display: block; width: calc(100% + 2 * var(--pp)); max-width: none; margin: calc(-1 * var(--pp)) calc(-1 * var(--pp)) 1.4rem;
  height: 210px; object-fit: cover; border-bottom: 1px solid var(--z-line); border-radius: var(--z-radius) var(--z-radius) 0 0; background: var(--z-bg-3); }
.z .panel > .thumb.contain { object-fit: contain; padding: 1rem; }
.z .tag { display: inline-block; font-family: var(--fm); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .55rem;
  border: 1px solid var(--z-line); border-radius: 2px; margin-left: .5rem; vertical-align: middle; color: var(--z-text-3); font-style: normal; background: rgba(0,0,0,.25); }
.z .tag.live { color: var(--z-accent); border-color: color-mix(in srgb, var(--z-accent) 40%, transparent); }
.z .tag.dev { color: var(--z-amber); border-color: color-mix(in srgb, var(--z-amber) 45%, transparent); }
[data-theme="light"] .z .tag { background: #fff; }
.z .doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--z-line); border-top: 2px solid var(--z-accent);
  border-radius: var(--z-radius); overflow: hidden; background: var(--z-card); }
.z .doors a { display: block; padding: clamp(1.5rem, 2.6vw, 2.4rem); color: var(--z-text); border-left: 1px solid var(--z-line); transition: background .2s; }
.z .doors a:first-child { border-left: 0; }
.z .doors a:hover { background: var(--z-card-hover); text-decoration: none; }
.z .doors .go { font-family: var(--fm); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--z-accent); }
.z .doors .go::after { content: " →"; }
@media (max-width: 820px) { .z .doors { grid-template-columns: 1fr; } .z .doors a { border-left: 0; border-top: 1px solid var(--z-line); } .z .doors a:first-child { border-top: 0; } }
.z .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem 2.25rem; margin-top: 2rem; }
.z .stat b { display: block; font-family: var(--fd); font-weight: 400; font-size: clamp(1.8rem, 2.5vw, 2.4rem); line-height: 1; color: var(--z-text); }
.z .stat span { display: block; margin-top: .4rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; line-height: 1.45; }

/* tables */
.z .tbl { overflow-x: auto; border: 1px solid var(--z-line); border-radius: var(--z-radius); background: var(--z-card); }
.z table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.z .tbl table { min-width: 640px; }
.z th, .z td { text-align: left; vertical-align: top; padding: .85rem 1rem; border-bottom: 1px solid var(--z-line); }
.z th { font-family: var(--fm); font-weight: 500; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--z-accent); background: var(--z-th); }
.z td { color: var(--z-text-2); }
.z tr:last-child td { border-bottom: 0; }

/* lists, notes, faq */
.z .list { padding-left: 1.1rem; margin: 0 0 1em; }
.z .list li { margin: .35rem 0; color: var(--z-text-2); max-width: 68ch; }
.z .check { list-style: none; margin: 0 0 1em; }
.z .check li { position: relative; padding-left: 1.6rem; margin: .5rem 0; color: var(--z-text-2); max-width: 68ch; }
.z .check li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--z-accent); font-size: .9rem; }
.z .steps { counter-reset: s; list-style: none; }
.z .steps li { counter-increment: s; position: relative; padding-left: 3.1rem; margin: 0 0 1.25rem; color: var(--z-text-2); max-width: 68ch; }
.z .steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: .05rem; width: 2.2rem; height: 2.2rem;
  border: 1px solid var(--z-accent); color: var(--z-accent); border-radius: 2px; display: grid; place-items: center; font-family: var(--fm); font-size: .68rem; }
.z .quote { font-family: var(--fd); font-style: italic; font-size: 1.45rem; line-height: 1.4; color: var(--z-text); border-left: 2px solid var(--z-accent); padding-left: 1.25rem; max-width: 36ch; }
.z .note { font-size: .92rem; color: var(--z-text-2); background: rgba(212, 136, 42, .06); border: 1px solid rgba(212, 136, 42, .3);
  border-left: 3px solid var(--z-amber); padding: 1rem 1.25rem; border-radius: 2px; max-width: 90ch; }
.z details.faq { border-top: 1px solid var(--z-line); padding: 1.2rem 0; }
.z details.faq:last-of-type { border-bottom: 1px solid var(--z-line); }
.z details.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font-family: var(--fd); font-size: 1.2rem; line-height: 1.35; color: var(--z-text); }
.z details.faq summary::-webkit-details-marker { display: none; }
.z details.faq summary::after { content: "+"; font-family: var(--fm); color: var(--z-accent); font-size: 1.2rem; }
.z details.faq[open] summary::after { content: "–"; }
.z details.faq p { margin-top: .8rem; }

/* media */
.z .cams { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; }
.z .cams div { background: var(--z-card); border: 1px solid var(--z-line); border-radius: 2px; padding: .8rem 1rem; font-size: .9rem; color: var(--z-text-2); }
.z figure { margin: 0; position: relative; }
.z figure img, .z img { max-width: 100%; height: auto; display: block; }
.z figcaption { font-family: var(--fm); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--z-text-3); margin-top: .75rem; }
.z .media { border: 1px solid var(--z-line); border-radius: var(--z-radius); overflow: hidden; background: var(--z-bg-3); }
.z .media img { width: 100%; }
.z .hero-figure img { max-height: 620px; width: auto; margin: 0 auto; object-fit: contain; }
[data-theme="light"] .z img.drawing { filter: invert(1) hue-rotate(180deg); opacity: .85; }
.z .strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 1.75rem 0; }
.z .strip figure { border: 1px solid var(--z-line); border-radius: var(--z-radius); overflow: hidden; background: var(--z-bg-3); }
.z .strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.z .strip figcaption { margin: 0; padding: .6rem .75rem; }
@media (max-width: 900px) { .z .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.z .pipe { width: 100%; height: auto; }
.z .pipe text { font-family: var(--fb); }
.z .pipe .mono { font-family: var(--fm); letter-spacing: .08em; }

/* ── 5. SMALL FIXES ON LIVE PAGES (CSS only) ────────────────────── */
.tcaboutt, .zoyellink { overflow-wrap: anywhere; }      /* privacy/terms: long text overflowed on phones */
.art-img img { max-width: 100%; height: auto; }          /* news articles: images overflowed on phones */