/* Zipify 2026 — global frame. Requires tokens.css. */
html { -webkit-text-size-adjust:100%; }
html.zp-loaded { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html.zp-loaded { scroll-behavior:auto; } }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
*, *::before, *::after { box-sizing:border-box; }
a { color:var(--blue-700); text-decoration:none; }
a:hover { color:var(--blue-500); }
img { max-width:100%; }
.zp-site { min-height:100vh; overflow-x:clip; }
.zp-skip { position:absolute; left:-999px; top:8px; z-index:200; padding:8px 12px; background:#fff; color:var(--ink-900); border-radius:8px; }
.zp-skip:focus { left:8px; z-index:1100; }

/* Text that has to be in the accessibility tree but not on screen. It lives in
   the global frame rather than in `home.css`, where it started: the widget
   partials under `template-parts/home/widgets/` use it for the one sentence
   that stands in for each `aria-hidden` illustration, and those widgets are
   reused off Home — the Zipify AI hero renders `ai-constellation`. Scoped to
   Home's stylesheet, that sentence showed up as visible body copy on any other
   page that borrowed a widget. */
.zp-visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Buttons shared by header */
/* Note: `button.` (not just `.class`) is used throughout this file so these rules
   always outrank the hello-elementor parent theme's `[type=button],button{...}`
   reset — both are single-selector specificity (0,1,0), and the parent's reset.css
   is enqueued after this stylesheet, so on a plain class selector it wins on source
   order. Qualifying with the `button` element bumps us to (0,1,1). */
button.zp-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:var(--r-pill); font-family:inherit; font-weight:800; font-size:13px; letter-spacing:var(--ls-button); text-transform:uppercase; cursor:pointer; white-space:nowrap; padding:12px 22px; transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
button.zp-btn--primary { background:var(--grad-ocu); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 6px 18px rgba(240,48,90,.26); }
button.zp-btn--primary:hover, button.zp-btn--primary:focus { filter:brightness(1.07); transform:translateY(-1px); color:#fff; }
button.zp-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.35); }
.is-solid button.zp-btn:focus-visible, body.zp-header-light button.zp-btn:focus-visible { box-shadow:var(--focus-ring); }
button.zp-iconbtn { display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; flex:0 0 auto; border:1px solid rgba(255,255,255,.24); border-radius:var(--r-pill); background:transparent; color:rgba(255,255,255,.86); cursor:pointer; transition:color var(--dur-base), border-color var(--dur-base), background var(--dur-fast); }
button.zp-iconbtn:hover, button.zp-iconbtn:focus { background:rgba(127,127,127,.16); }
button.zp-iconbtn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.35); }
.is-solid button.zp-iconbtn:focus-visible, body.zp-header-light button.zp-iconbtn:focus-visible { box-shadow:var(--focus-ring); }

/* Banner */
.zp-banner { position:relative; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; padding:9px 56px; background:var(--grad-banner); color:#fff; text-align:center; }
.zp-banner__text { margin:0; font-size:14px; line-height:1.4; }
.zp-banner__cta { flex:0 0 auto; padding:5px 12px; border:1.5px solid rgba(255,255,255,.55); border-radius:6px; color:#fff; font-size:13px; font-weight:600; line-height:1.2; transition:opacity .2s; }
.zp-banner__cta:hover { opacity:.8; color:#fff; }
button.zp-banner__close { position:absolute; top:50%; right:20px; transform:translateY(-50%); padding:4px; border:0; background:none; color:#fff; cursor:pointer; line-height:0; opacity:.85; }
button.zp-banner__close:hover { opacity:1; }
.zp-banner__close svg { width:16px; height:16px; }
.zp-banner[hidden] { display:none; }

/* Narrow, the centred stack pushes the CTA onto its own row and leaves the
   close button floating over the copy, ~102px tall at 390px. One row instead,
   the way the artboard shows it: copy left, CTA and close right. The close
   rejoins the flow so it cannot land on the text, and carries a 44px target
   around the 12px glyph. */
@media (max-width:899.98px) {
  .zp-banner { flex-wrap:nowrap; justify-content:flex-start; gap:12px; padding:8px 8px 8px 16px; text-align:left; }
  .zp-banner__text { flex:1 1 auto; font-size:13px; line-height:1.35; }
  .zp-banner__cta { padding:9px 14px; border-radius:8px; }
  button.zp-banner__close { position:static; transform:none; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; }
  .zp-banner__close svg { width:18px; height:18px; }
}

/* Header */
zp-header { display:block; }
.zp-header { position:sticky; top:0; z-index:1000; margin-bottom:calc(-1 * var(--zp-header-h)); background:transparent; border-bottom:1px solid transparent; transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.zp-header.is-solid, body.zp-header-light .zp-header { background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); border-bottom-color:rgba(13,31,78,.08); }
body.zp-header-light .zp-header { margin-bottom:0; }
.zp-header__inner { position:relative; max-width:1180px; margin:0 auto; padding:0 48px; height:var(--zp-header-h); display:flex; align-items:center; gap:20px; }
.zp-logo { display:flex; align-items:center; flex-shrink:0; }
.zp-logo img { height:24px; width:auto; display:block; }
/* Every rule below repeats `.zp-logo img` so specificity climbs monotonically
   (0,2,1) → (0,3,1) as state is added — a bare class selector like `.zp-logo__light`
   ties with `.zp-logo img` above on class count and loses the element-count
   tiebreak, leaving both logos visible (or, if only the show-rule is fixed, both
   hidden once `.is-solid` is added). */
.zp-logo img.zp-logo__light { display:none; }
.is-solid .zp-logo img.zp-logo__light, body.zp-header-light .zp-logo img.zp-logo__light { display:block; }
.is-solid .zp-logo img.zp-logo__dark, body.zp-header-light .zp-logo img.zp-logo__dark { display:none; }

.zp-nav { display:none; align-self:stretch; }
.zp-nav__list { display:flex; align-items:stretch; gap:24px; list-style:none; margin:0; padding:0; font-size:15px; font-weight:600; }
.zp-nav__item { position:relative; display:flex; align-items:center; }
.zp-nav__link, button.zp-nav__toggle { display:inline-flex; align-items:center; gap:6px; padding:9px 12px; margin:0; border:0; border-radius:var(--r-pill); background:none; font:inherit; font-weight:600; line-height:1.2; color:rgba(255,255,255,.86); cursor:pointer; transition:color var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.zp-nav__link:hover, button.zp-nav__toggle:hover, button.zp-nav__toggle:focus { background:rgba(127,127,127,.16); color:#fff; }
.is-solid .zp-nav__link, .is-solid .zp-nav__toggle, body.zp-header-light .zp-nav__link, body.zp-header-light .zp-nav__toggle { color:var(--ink-700); }
.is-solid .zp-nav__link:hover, .is-solid button.zp-nav__toggle:hover, .is-solid button.zp-nav__toggle:focus, body.zp-header-light .zp-nav__link:hover, body.zp-header-light button.zp-nav__toggle:hover, body.zp-header-light button.zp-nav__toggle:focus { color:var(--ink-1000); }
.zp-nav__link:focus-visible, button.zp-nav__toggle:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.35); }
.is-solid .zp-nav__link:focus-visible, .is-solid button.zp-nav__toggle:focus-visible, body.zp-header-light .zp-nav__link:focus-visible, body.zp-header-light button.zp-nav__toggle:focus-visible { box-shadow:var(--focus-ring); }
.zp-nav__toggle svg { width:16px; height:16px; flex-shrink:0; transition:transform var(--dur-fast) var(--ease-out); }
.zp-nav__item.is-open .zp-nav__toggle svg { transform:rotate(180deg); }
.zp-nav__link--highlight, .is-solid .zp-nav__link--highlight, body.zp-header-light .zp-nav__link--highlight { color:var(--ink-1000); background:var(--zip-yellow); border-radius:8px; padding:8px 14px; font-weight:700; white-space:nowrap; }
.zp-nav__link--highlight:hover { background:#f5c92e; color:var(--ink-1000); }

/* Simple dropdown */
.zp-dropdown { display:none; list-style:none; margin:0; padding:10px; position:absolute; top:calc(100% + 6px); left:-6px; min-width:250px; background:#fff; border:1px solid rgba(13,31,78,.07); border-radius:18px; box-shadow:0 24px 60px rgba(13,31,78,.16), 0 4px 10px rgba(13,31,78,.06); z-index:1010; }
.zp-dropdown--right { left:auto; right:0; top:calc(100% + 10px); min-width:252px; }
.is-open > .zp-dropdown { display:block; }
.zp-dropdown__link { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px; font-size:15px; font-weight:600; color:var(--ink-700); white-space:nowrap; transition:color var(--dur-fast), background var(--dur-fast); }
.zp-dropdown__link:hover { color:var(--ink-1000); background:var(--ink-050); }
.zp-dropdown__link:focus-visible { outline:none; box-shadow:var(--focus-ring); color:var(--ink-1000); background:var(--ink-050); }
.zp-dropdown__mark { flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:var(--blue-900) center / 14px auto no-repeat; }

/* Mega menus */
.zp-mega { display:none; position:absolute; top:calc(100% + 8px); left:0; width:min(760px, calc(100vw - 96px)); padding:16px; background:#fff; border:1px solid rgba(13,31,78,.07); border-radius:24px; box-shadow:0 32px 70px rgba(13,31,78,.18), 0 4px 10px rgba(13,31,78,.06); grid-template-columns:1fr 232px; gap:12px; z-index:1010; }
.zp-nav__item.is-open > .zp-mega { display:grid; }
/* Panel without its promo card: drop the promo column and the width it held, so the
   tiles keep their size instead of sitting next to a gap. */
.zp-mega--nopromo { width:min(520px, calc(100vw - 96px)); grid-template-columns:1fr; }

/* Hover bridge: the panels sit 6-10px below their trigger, and that gap belongs to
   neither the <li> nor the panel. Without it the pointer leaves the <li> on its way
   into the panel, mouseleave fires, and the menu closes before a link can be reached.
   A child of the panel, so hovering it keeps the pointer inside the open <li>. */
.zp-mega::before, .zp-dropdown::before { content:""; position:absolute; left:0; right:0; bottom:100%; height:12px; }
.zp-mega__grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.zp-tile { display:flex; gap:13px; padding:13px; border-radius:14px; color:inherit; transition:background var(--dur-fast) var(--ease-out); }
.zp-tile:hover { background:var(--ink-050); color:var(--ink-1000); }
.zp-tile:focus-visible { outline:none; box-shadow:var(--focus-ring); background:var(--ink-050); color:var(--ink-1000); }
.zp-tile__mark { display:block; flex:0 0 auto; width:40px; height:40px; border-radius:12px; background:var(--blue-900) center / 19px auto no-repeat; }
.zp-tile__icon { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:36px; height:36px; border-radius:11px; background:var(--blue-900); color:var(--zip-yellow); }
.zp-tile__body { display:block; min-width:0; }
.zp-tile__stage { display:block; font-size:10px; font-weight:800; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink-600); margin-bottom:4px; }
.zp-tile__label { display:block; font-size:15px; font-weight:800; letter-spacing:-0.01em; color:var(--ink-1000); margin-bottom:3px; }
.zp-tile__blurb { display:block; font-size:13px; line-height:1.45; color:var(--ink-600); font-weight:400; }

/* Promo card */
.zp-promo { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:20px; border-radius:18px; background:var(--grad-zipify); color:var(--fg-on-dark); }
.zp-promo::before { content:""; position:absolute; inset:0; background:radial-gradient(300px 180px at 80% 10%, rgba(255,215,72,.22), transparent 70%); }
.zp-promo:hover { color:var(--fg-on-dark); filter:brightness(1.08); }
.zp-promo:focus-visible { outline:none; box-shadow:var(--focus-ring); color:var(--fg-on-dark); filter:brightness(1.08); }
.zp-promo > * { position:relative; }
.zp-promo__art { display:block; width:100%; aspect-ratio:4/3; margin-bottom:6px; }
.zp-promo__art svg { position:absolute; inset:0; width:100%; height:100%; }
.zp-promo__core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 14px; border-radius:9px; background:rgba(11,23,48,.6); border:1px solid rgba(255,215,72,.55); box-shadow:0 0 22px rgba(255,215,72,.4); white-space:nowrap; }
.zp-promo__core span { font-size:11px; font-weight:800; color:#fff; }
.zp-promo__core small { font-size:6px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--zip-yellow); }
.zp-promo__chip { position:absolute; padding:3px 7px; border-radius:var(--r-pill); background:rgba(11,23,48,.55); border:1px solid rgba(255,255,255,.18); font-size:6px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.86); white-space:nowrap; }
.zp-promo__eyebrow { font-size:10px; font-weight:800; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--zip-yellow); }
.zp-promo__title { font-size:20px; font-weight:900; letter-spacing:var(--ls-display); line-height:1.15; color:#fff; }
.zp-promo__blurb { font-size:13px; line-height:1.5; color:rgba(255,255,255,.72); }
.zp-promo__cta { align-self:flex-start; padding:9px 16px; border-radius:var(--r-pill); border:1.5px solid rgba(255,215,72,.55); font-size:12px; font-weight:800; letter-spacing:var(--ls-button); text-transform:uppercase; color:var(--zip-yellow); }

/* Right side */
.zp-header__actions { margin-left:auto; display:flex; align-items:center; gap:12px; min-width:0; }
button.zp-search-toggle { display:none; }
.is-solid .zp-iconbtn, body.zp-header-light .zp-iconbtn { border-color:rgba(13,31,78,.1); color:var(--ink-600); }
.zp-install { position:relative; display:inline-flex; }
.zp-install__toggle svg { flex-shrink:0; width:16px; height:16px; transition:transform var(--dur-fast) var(--ease-out); }
.zp-install.is-open .zp-install__toggle svg { transform:rotate(180deg); }
.zp-install .zp-dropdown { z-index:1011; }
zp-burger { display:contents; }
button.zp-burger { flex-direction:column; justify-content:center; gap:5px; padding:9px; }
.zp-burger span { display:block; width:100%; height:2px; border-radius:2px; background:#fff; transition:background var(--dur-base), transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.is-solid .zp-burger span, body.zp-header-light .zp-burger span { background:var(--ink-900); }
.zp-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.zp-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.zp-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Search */
.zp-search { position:absolute; top:100%; left:0; right:0; background:rgba(255,255,255,.96); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid rgba(13,31,78,.08); box-shadow:0 24px 60px rgba(13,31,78,.14); }
.zp-search__inner { max-width:1180px; margin:0 auto; padding:20px 48px; }
.zp-search__form { display:flex; align-items:center; gap:12px; max-width:720px; margin:0 auto; }
.zp-search__field { position:relative; display:flex; align-items:center; flex:1 1 auto; min-width:0; color:var(--ink-500); }
.zp-search__field svg { position:absolute; left:18px; width:18px; height:18px; pointer-events:none; }
.zp-search__field:focus-within { color:var(--blue-700); }
.zp-search__input { width:100%; height:48px; padding:0 18px 0 46px; border:1.5px solid var(--ink-200); border-radius:var(--r-pill); background:#fff; font:inherit; font-size:15px; color:var(--ink-900); transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.zp-search__input::placeholder { color:var(--ink-500); }
.zp-search__input:focus { outline:none; border-color:var(--blue-500); box-shadow:var(--focus-ring); }
.zp-search__input::-webkit-search-cancel-button { -webkit-appearance:none; }
button.zp-search__submit { flex:0 0 auto; height:48px; padding:0 24px; }
.zp-search button.zp-btn:focus-visible { box-shadow:var(--focus-ring); }
.archive .zp-search__form, .search .zp-search__form { margin:0; }

/* Mobile drawer */
.zp-mobile { position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid rgba(13,31,78,.08); box-shadow:0 24px 60px rgba(13,31,78,.14); padding:0 24px 20px; max-height:calc(100vh - var(--zp-header-h)); overflow-y:auto; }
.zp-mobile[hidden] { display:none; }
.zp-mobile__link, .zp-mobile__toggle { display:flex; width:100%; align-items:center; justify-content:space-between; padding:16px 4px; border:0; border-top:1px solid var(--ink-100); background:none; font:inherit; font-size:16px; font-weight:600; color:var(--ink-600); cursor:pointer; text-align:left; list-style:none; }
.zp-mobile__toggle::-webkit-details-marker { display:none; }
.zp-mobile__toggle:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.zp-mobile__toggle svg { width:16px; height:16px; transition:transform var(--dur-fast); }
[open] > .zp-mobile__toggle svg { transform:rotate(180deg); }
.zp-mobile__sub { list-style:none; margin:0; padding:0 0 12px 16px; }
.zp-mobile__sub a { display:block; padding:8px 0; font-size:15px; font-weight:600; color:var(--ink-600); }
.zp-mobile__link[aria-current="page"], .zp-mobile__sub a[aria-current="page"] { color:var(--blue-700); }

/* Breakpoints */
@media (min-width:1024px) {
  .zp-nav { display:flex; }
  button.zp-search-toggle { display:flex; }
  button.zp-burger { display:none; }
  .zp-mobile { display:none !important; }
}
@media (max-width:1023px) {
  .zp-header__inner { padding:0 24px; }
}

/* Footer */
.zp-footer { position:relative; overflow:hidden; background:var(--grad-zipify); color:var(--fg-on-dark); }
.zp-footer__grid { max-width:1200px; margin:0 auto; padding:64px 24px 0; display:grid; gap:40px 24px; grid-template-columns:1fr 1fr; }
.zp-footer__col--contact { grid-column:1 / -1; }
@media (min-width:768px) {
  .zp-footer__grid { grid-template-columns:3fr 2fr 2fr 2fr 3fr; }
  .zp-footer__col--contact { grid-column:auto; }
}
.zp-footer__title { margin:0 0 16px; font-size:18px; line-height:1.43; font-weight:400; color:#fff; }
.zp-footer__col--legal .zp-footer__title { color:var(--zip-yellow); }
.zp-footer__links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.zp-footer__links a { font-size:14px; line-height:1.43; color:rgba(255,255,255,.82); text-decoration:underline; transition:opacity .2s; }
.zp-footer__links a:hover { opacity:.8; color:rgba(255,255,255,.82); }
.zp-footer__plain { margin:0 0 10px; font-size:18px; line-height:1.43; color:#fff; }
.zp-footer__rule { max-width:1200px; margin:56px auto 0; padding:0 24px; }
.zp-footer__rule::after { content:""; display:block; height:1px; background:rgba(255,255,255,.16); }
.zp-footer__legal { max-width:1200px; margin:0 auto; padding:28px 24px 48px; text-align:center; }
.zp-footer__legal p { margin:0 0 20px; font-size:12px; line-height:1.43; color:rgba(255,255,255,.72); }
.zp-footer__legal p a { color:var(--zip-yellow); text-decoration:underline; }
.zp-footer__legal p a:hover { color:var(--zip-yellow); opacity:.8; }
.zp-footer__social { display:flex; justify-content:center; gap:18px; margin-bottom:20px; }
.zp-footer__social a { color:#fff; line-height:0; transition:opacity .2s; }
.zp-footer__social a:hover { opacity:.8; color:#fff; }

@media (prefers-reduced-motion: reduce) {
  .zp-header, .zp-btn, .zp-nav__toggle svg, .zp-install__toggle svg { transition:none; }
}

zp-range { display:block; }
zp-range input[type="range"] {
  display:block; width:100%; height:8px; margin:0;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,
    var(--zp-range-from,#f0305a),
    var(--zp-range-to,#f07030) var(--zp-range-fill,0%),
    var(--zp-range-track,var(--ink-200)) var(--zp-range-fill,0%));
  outline:none; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.zp-range--dark { --zp-range-track:rgba(0,0,0,.3); }
zp-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:var(--r-pill);
  border:1px solid rgba(0,0,0,.06); background:#fff; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
zp-range input[type="range"]::-moz-range-thumb {
  width:20px; height:20px; border-radius:var(--r-pill);
  border:1px solid rgba(0,0,0,.06); background:#fff; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
zp-range input[type="range"]:focus-visible { box-shadow:var(--focus-ring); }