/* ============================================================
   Zayed Software — shared shell
   Menu overlay + case study system. Loaded by every page.
   ============================================================ */

:root {
  --paper: #FAF9F6;
  --ink: #1A1815;
  --dark: #0D0C0F;
  --accent: #BC4A18;
  /* Same burnt orange, lightened for use on --dark. #BC4A18 measures
     4.83:1 on the cream paper (passes) but only 3.83:1 on #0D0C0F.
     This one is 5.62:1 on #0D0C0F. Never swap it in on cream. */
  --accent-on-dark: #E0651F;
  --muted: #736C61;
  --body: #4A443C;
  --line: #E5E0D6;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Floating nav pill ---------- */

.zs-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(16px, 3vw, 30px);
  pointer-events: none;
}
.zs-bar > * { pointer-events: auto; }

.zs-pill {
  appearance: none;
  border: 1px solid rgba(245, 242, 236, .18);
  background: rgba(20, 18, 24, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #F5F2EC;
  font: 500 14px/1 'Instrument Sans', ui-sans-serif, sans-serif;
  letter-spacing: -.01em;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.zs-pill:hover { background: #F5F2EC; color: #0D0C0F; border-color: #F5F2EC; }

/* The bar floats over live content, so the wordmark and clock carry the same
   frosted plate as the pills — otherwise text scrolls underneath and both
   become unreadable. */
.zs-wordmark {
  font: 700 17px/1 'Instrument Sans', ui-sans-serif, sans-serif;
  letter-spacing: -.02em;
  color: #F5F2EC;
  text-decoration: none;
  white-space: nowrap;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(245, 242, 236, .18);
  background: rgba(20, 18, 24, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.zs-bar-right { display: flex; align-items: center; gap: 10px; }
.zs-clock {
  font: 400 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  color: rgba(245, 242, 236, .6);
  white-space: nowrap;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(245, 242, 236, .14);
  background: rgba(20, 18, 24, .5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.zs-icon {
  width: 40px; height: 40px;
  padding: 0;
  justify-content: center;
}

/* Light-page variant — set by JS when the bar sits over a pale section. */
.zs-bar.is-light .zs-pill { background: rgba(255, 255, 255, .7); border-color: rgba(26, 24, 21, .12); color: var(--ink); }
.zs-bar.is-light .zs-pill:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.zs-bar.is-light .zs-wordmark { color: var(--ink); background: rgba(255, 255, 255, .7); border-color: rgba(26, 24, 21, .12); }
.zs-bar.is-light .zs-clock { color: var(--muted); background: rgba(255, 255, 255, .6); border-color: rgba(26, 24, 21, .1); }

/* ---------- Menu overlay ---------- */

.zs-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px clamp(20px, 4vw, 44px) 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.zs-menu.is-open { opacity: 1; visibility: visible; transform: none; }
body.zs-menu-open { overflow: hidden; }

.zs-menu-inner { width: 100%; max-width: 1240px; margin: 0 auto; }

.zs-menu-banner {
  height: clamp(120px, 22vh, 240px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--dark);
  margin-bottom: clamp(28px, 5vh, 56px);
  position: relative;
}
.zs-menu-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; display: block; }

.zs-menu-nav { display: flex; flex-direction: column; gap: 2px; }
.zs-menu-nav a {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--ink);
  text-decoration: none;
  width: fit-content;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .25s var(--ease);
}
.zs-menu.is-open .zs-menu-nav a { opacity: 1; transform: none; }
.zs-menu-nav a:hover { color: var(--accent); }
.zs-menu-nav a .zs-num {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  color: #736C61;
  vertical-align: super;
  margin-right: 14px;
}

.zs-menu-foot {
  margin-top: clamp(28px, 6vh, 60px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  font-size: 14px;
  color: var(--muted);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease) .35s, transform .5s var(--ease) .35s;
}
.zs-menu.is-open .zs-menu-foot { opacity: 1; transform: none; }
.zs-menu-foot a { color: var(--accent); text-decoration: none; font-weight: 600; }

/* ---------- Case study page ---------- */

body.zs-case {
  margin: 0;
  background: var(--dark);
  color: #F5F2EC;
  font-family: 'Instrument Sans', ui-sans-serif, sans-serif;
  font-size: 1.06rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.zs-case-hero {
  min-height: 56vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 132px clamp(20px, 4vw, 44px) 0;
  position: relative;
}
.zs-case-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(3.4rem, 12vw, 10rem);
  line-height: .95;
  letter-spacing: -.035em;
  margin: 0 0 clamp(40px, 8vh, 90px);
  color: #F5F2EC;
}
.zs-case-title span { display: block; overflow: hidden; padding-bottom: .08em; }
.zs-case-title span > i {
  display: block;
  font-style: normal;
  transform: translateY(110%);
  animation: zsRise .9s var(--ease) .1s forwards;
}
@keyframes zsRise { to { transform: translateY(0); } }

.zs-case-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 22px 40px;
  padding: 26px 0 34px;
  border-top: 1px solid rgba(245, 242, 236, .16);
}
.zs-case-meta dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #F5F2EC;
  margin: 0 0 6px;
}
.zs-case-meta dd { margin: 0; color: rgba(245, 242, 236, .6); font-size: 15px; }

/* The parallax and zoom-in effects scale images past their box; without
   clipping here they push the whole page into horizontal overflow. */
.zs-full { width: 100%; display: block; background: #141218; overflow: hidden; }
.zs-full img { width: 100%; height: auto; display: block; }

.zs-sec { padding: clamp(80px, 14vh, 160px) clamp(20px, 4vw, 44px); max-width: 1240px; margin: 0 auto; }
/* When media follows a section, its own top margin supplies the gap — otherwise
   the two stack and leave a dead band of several hundred pixels. */
.zs-sec:has(+ .zs-media) { padding-bottom: 0; }
/* A block with no media slot puts two full section paddings back to back, a
   gap that reads as an image that failed to load. Halve it. */
.zs-sec + .zs-sec { padding-top: clamp(34px, 6vh, 68px); }
.zs-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, .62);
  margin: 0 0 18px;
}
.zs-statement {
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.025em;
  margin: 0;
  max-width: 20ch;
  color: #F5F2EC;
}
.zs-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(24px, 4vw, 70px);
  margin-top: clamp(36px, 6vh, 64px);
}
.zs-body p { margin: 0; color: rgba(245, 242, 236, .68); }

.zs-media { margin: clamp(40px, 8vh, 90px) auto 0; max-width: 1240px; padding: 0 clamp(20px, 4vw, 44px); overflow: hidden; }
.zs-media img { width: 100%; height: auto; display: block; border-radius: 12px; }
.zs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}
/* A grid that holds a single portrait shot must not stretch it across the
   whole 1240px column; keep it figure-sized and centred. */
.zs-fig:only-child { max-width: 420px; margin-inline: auto; }
.zs-shot {
  border-radius: 14px;
  overflow: hidden;
  background: #141218;
  border: 1px solid rgba(245, 242, 236, .12);
}
.zs-shot img { border-radius: 0; }
.zs-cap { margin: 12px 2px 0; font-size: 13px; color: rgba(245, 242, 236, .62); }

/* Next project */
.zs-next {
  border-top: 1px solid rgba(245, 242, 236, .14);
  padding: clamp(60px, 10vh, 110px) clamp(20px, 4vw, 44px);
  max-width: 1240px;
  margin: 0 auto;
}
.zs-next a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  text-decoration: none;
  color: #F5F2EC;
}
.zs-next-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  transition: color .3s var(--ease);
}
.zs-next a:hover .zs-next-name { color: var(--accent); }

/* ---------- Scroll reveal ---------- */

[data-r] { opacity: 0; transform: translateY(26px); }
[data-r].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
[data-zoom-in] > img { transform: scale(1.07); transition: transform 1.5s var(--ease); }
[data-zoom-in].is-in > img { transform: scale(1); }

/* Parallax writes a new transform on every scroll frame, so this one image
   keeps its own compositor layer. The zoom-in is a single one-shot transition
   and Chrome promotes it on its own, so it does not need the standing hint. */
[data-parallax] img { will-change: transform; transform-origin: 50% 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-delay: 0s !important; }
  [data-r] { opacity: 1; transform: none; }
  [data-zoom-in] > img { transform: none; }
  .zs-case-title span > i { transform: none; }
}

@media (max-width: 700px) {
  .zs-clock { display: none; }
}

/* ============================================================
   Shared components
   Used by the homepage, the generated case pages, and /privacy/.
   Every one has a cream default and an .is-dark variant, because the
   same component has to sit on paper (#FAF9F6) and on #0D0C0F.
   ============================================================ */

/* ---------- Numbered steps ---------- */

.zs-steps {
  counter-reset: zs-step;
  list-style: none;
  margin: clamp(28px, 5vh, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 44px);
}
.zs-steps > li { counter-increment: zs-step; margin: 0; }
/* Serif numeral, generated rather than typed, so the markup stays a plain ol. */
.zs-steps > li::before {
  content: counter(zs-step, decimal-leading-zero);
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
  margin-bottom: 14px;
}
.zs-steps h3 {
  font: 600 1.02rem/1.35 'Instrument Sans', ui-sans-serif, sans-serif;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 8px;
}
.zs-steps p { margin: 0; color: var(--body); font-size: .97rem; line-height: 1.55; }

.zs-steps.is-dark h3 { color: #F5F2EC; }
.zs-steps.is-dark p { color: rgba(245, 242, 236, .68); }

@media (min-width: 700px) {
  .zs-steps { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- FAQ accordion ---------- */
/* Native <details>, no script. The indicator is a ::after glyph rather than the
   default marker, which cannot be styled consistently across browsers. */

.zs-faq { border-top: 1px solid var(--line); margin: clamp(24px, 4vh, 40px) 0 0; }
.zs-faq > details { border-bottom: 1px solid var(--line); }
.zs-faq > details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  font: 500 1.04rem/1.4 'Instrument Sans', ui-sans-serif, sans-serif;
  letter-spacing: -.012em;
  color: var(--ink);
}
.zs-faq > details > summary::-webkit-details-marker { display: none; }
.zs-faq > details > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--accent);
  transform: translateY(2px);
}
.zs-faq > details[open] > summary::after { content: "−"; }
.zs-faq > details > summary:hover { color: var(--accent); }
.zs-faq > details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.zs-faq > details > div, .zs-faq > details > p {
  margin: 0;
  padding: 0 2px 22px;
  max-width: 62ch;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.6;
}
.zs-faq > details > div > p { margin: 0 0 12px; }
.zs-faq > details > div > p:last-child { margin-bottom: 0; }

.zs-faq.is-dark { border-top-color: rgba(245, 242, 236, .16); }
.zs-faq.is-dark > details { border-bottom-color: rgba(245, 242, 236, .16); }
.zs-faq.is-dark > details > summary { color: #F5F2EC; }
.zs-faq.is-dark > details > div, .zs-faq.is-dark > details > p { color: rgba(245, 242, 236, .68); }

/* ---------- Inline form status ---------- */
/* role="status" is announced when its text changes, so the region stays in the
   DOM and only the state class flips. */

.zs-form-status {
  display: none;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: 500 .95rem/1.45 'Instrument Sans', ui-sans-serif, sans-serif;
}
.zs-form-status.is-ok,
.zs-form-status.is-err { display: block; }
.zs-form-status.is-ok {
  color: #8F3711;
  background: rgba(188, 74, 24, .09);
  border-color: rgba(188, 74, 24, .3);
}
.zs-form-status.is-err {
  color: #8A1F1F;
  background: rgba(138, 31, 31, .07);
  border-color: rgba(138, 31, 31, .28);
}
.zs-form-status.is-dark.is-ok { color: #F0BFA6; background: rgba(188, 74, 24, .18); border-color: rgba(188, 74, 24, .5); }
.zs-form-status.is-dark.is-err { color: #F0B4B4; background: rgba(214, 96, 96, .14); border-color: rgba(214, 96, 96, .42); }

/* ---------- Shared site footer ---------- */
/* One footer for every page: homepage, case pages, privacy. Always dark, so it
   reads as the same object no matter what the page above it is doing. */

.zs-site-footer {
  background: var(--dark);
  color: rgba(245, 242, 236, .78);
  font-family: 'Instrument Sans', ui-sans-serif, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  padding: clamp(48px, 8vh, 76px) clamp(20px, 4vw, 44px) 0;
}
.zs-foot-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px clamp(24px, 4vw, 56px);
}
.zs-foot-mark {
  font: 700 17px/1.2 'Instrument Sans', ui-sans-serif, sans-serif;
  letter-spacing: -.02em;
  color: #F5F2EC;
  margin: 0 0 12px;
}
.zs-foot-line { margin: 0 0 14px; max-width: 34ch; color: rgba(245, 242, 236, .78); }
.zs-foot-meta { margin: 0; color: rgba(245, 242, 236, .72); font-size: 13.5px; }
.zs-foot-meta + .zs-foot-meta { margin-top: 6px; }
.zs-foot-head {
  font: 600 11.5px/1 'Instrument Sans', ui-sans-serif, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, .72);
  margin: 0 0 14px;
}
.zs-foot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.zs-site-footer a {
  color: rgba(245, 242, 236, .78);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color .25s var(--ease);
}
/* The contact address is the longest string in the grid. It carries a <wbr>
   after the @, so it folds there; break-word is only the last resort. */
.zs-foot-list a { padding: 4px 0; overflow-wrap: break-word; }
.zs-site-footer a:hover { color: #F5F2EC; text-decoration: underline; text-underline-offset: 3px; }
/* "Built by Mohammad Zayed" sits inside a sentence, so position signals
   nothing: without an underline it is indistinguishable from the prose. */
.zs-foot-meta a {
  color: #F5F2EC;
  text-decoration: underline;
  text-decoration-color: rgba(245, 242, 236, .45);
  text-underline-offset: 3px;
}
.zs-foot-meta a:hover { text-decoration-color: #F5F2EC; }
.zs-site-footer a:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 3px; border-radius: 4px; }
.zs-foot-base {
  max-width: 1240px;
  margin: clamp(36px, 6vh, 56px) auto 0;
  padding: 20px 0 26px;
  border-top: 1px solid rgba(245, 242, 236, .14);
  font-size: 13px;
  color: rgba(245, 242, 236, .72);
}

/* Company is wider than the other link columns because it holds the address. */
@media (min-width: 880px) {
  .zs-foot-inner { grid-template-columns: 1.4fr .9fr 1.3fr 1.2fr; }
}
/* Touch targets: every footer link is at least 44px tall on phones. */
@media (max-width: 879px) {
  .zs-foot-list a { min-height: 44px; padding: 6px 0; }
}

/* ---------- Simple page ---------- */
/* Reading pages such as /privacy/: one column, no media, existing tokens only. */

body.zs-page {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: 'Instrument Sans', ui-sans-serif, sans-serif;
  font-size: 1.02rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
.zs-page-main {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(120px, 18vh, 172px) clamp(20px, 5vw, 44px) clamp(72px, 12vh, 120px);
}
.zs-page-main h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 14px;
}
.zs-page-lede { margin: 0 0 8px; color: var(--body); font-size: 1.08rem; max-width: 58ch; }
.zs-page-date {
  margin: 0 0 clamp(26px, 4vh, 34px);
  padding-bottom: clamp(34px, 5vh, 48px);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
}
.zs-page-main h2 {
  font: 600 1.06rem/1.35 'Instrument Sans', ui-sans-serif, sans-serif;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: clamp(34px, 5vh, 48px) 0 10px;
  padding-top: clamp(26px, 4vh, 34px);
  border-top: 1px solid var(--line);
}
.zs-page-main h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.zs-page-main p { margin: 0 0 14px; }
.zs-page-main ul { margin: 0 0 14px; padding-left: 1.1em; }
.zs-page-main li { margin: 0 0 8px; }
.zs-page-main a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.zs-page-main a:hover { color: var(--ink); }

/* ---------- Pricing tiers ---------- */
/* The Websites offer on the homepage: three tier cards, then the care-plan
   row. They sit on the sand band (#F3F0E9), so a card is paper with a
   hairline and no shadow at all. Only the anchor tier lifts, and it borrows
   the exact soft pair .zs-frame already uses, so nothing on the page is
   heavier than anything else. */

.zs-tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: clamp(34px, 4vw, 52px) 0 0;
  align-items: stretch;
}
.zs-tier {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid #DDD7CA;
  border-radius: 14px;
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px);
  font-family: 'Instrument Sans', ui-sans-serif, sans-serif;
}
.zs-tier.is-anchor {
  border-color: rgba(188, 74, 24, .38);
  box-shadow: 0 1px 2px rgba(26, 24, 21, .05), 0 12px 32px rgba(26, 24, 21, .06);
}
/* The flag row is reserved on every card, empty ones included, so the three
   prices sit on one optical line no matter which card carries the chip. It
   collapses below 900px, where the cards are stacked and alignment is moot. */
.zs-tier-name {
  margin: 0;
  font: 600 12px/1 'Instrument Sans', ui-sans-serif, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.zs-tier-price {
  margin: 16px 0 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 3.4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}
/* "From" is a small label pinned above the numeral. Every price reserves the
   same label line (empty on Launch and Growth), so the three numerals share
   both a left edge and a top edge across the row. */
.zs-tier-price { position: relative; padding-top: 18px; }
.zs-tier-from {
  position: absolute;
  left: 0;
  top: 0;
  font: 600 12px/1 'Instrument Sans', ui-sans-serif, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.zs-tier-for {
  margin: 16px 0 0;
  color: var(--body);
  font-size: .97rem;
  line-height: 1.55;
}
.zs-tier-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--body);
}
.zs-tier-list > li { position: relative; padding-left: 19px; }
.zs-tier-list > li::before {
  content: "";
  position: absolute;
  left: 1px; top: .58em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .5;
}
/* margin-top:auto pins the button to the bottom of whichever card is tallest,
   so the three CTAs share a baseline without a fixed card height. */
.zs-tier-cta { margin: auto 0 0; padding-top: 28px; }
.zs-tier-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid rgba(26, 24, 21, .55);
  background: transparent;
  color: var(--ink);
  font: 600 15px/1 'Instrument Sans', ui-sans-serif, sans-serif;
  text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.zs-tier-cta a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.zs-tier.is-anchor .zs-tier-cta a {
  background: var(--accent);
  border-color: var(--accent);
  color: #FAF9F6;
}
.zs-tier.is-anchor .zs-tier-cta a:hover {
  background: color-mix(in oklab, var(--accent) 82%, #0D0C0F);
  border-color: color-mix(in oklab, var(--accent) 82%, #0D0C0F);
  color: #FAF9F6;
}
.zs-tier-cta a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (min-width: 900px) {
  .zs-tiers { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  /* One price only: a single card, capped so it does not stretch across the whole column. */
  .zs-tiers.is-one { grid-template-columns: minmax(0, 720px); }
}
/* Between 900 and 1100 a card is narrow enough that the anchor chip wraps to
   two lines. Reserving the taller flag there keeps the prices aligned. */
@media (min-width: 900px) and (max-width: 1099px) {
}
@media (max-width: 899px) {
}

/* ---------- Care plans ---------- */
/* Two plan cards and one shared inclusion list. Above 900px the list takes
   the wider third column, because it is prose and the cards are not. */

.zs-care {
  margin: clamp(46px, 5.5vw, 70px) 0 0;
  padding: clamp(30px, 3.5vw, 44px) 0 0;
  border-top: 1px solid #DDD7CA;
}
.zs-care-lede {
  margin: 10px 0 0;
  max-width: 64ch;
  color: var(--body);
}
.zs-care-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: clamp(24px, 3vw, 32px) 0 0;
  align-items: start;
}
/* The two priced cards live in their own two-column grid (.zs-care-pair) and
   stretch against each other, so Essentials and Active bottom out together
   without either being stretched to the height of the includes column. */
.zs-care-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.zs-care-card {
  background: var(--paper);
  border: 1px solid #DDD7CA;
  border-radius: 12px;
  padding: 22px clamp(20px, 2.2vw, 26px) 24px;
}
.zs-care-name {
  margin: 0;
  font: 600 12px/1 'Instrument Sans', ui-sans-serif, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.zs-care-price {
  margin: 14px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.9rem, 2.4vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.zs-care-per {
  font: 600 12px/1 'Instrument Sans', ui-sans-serif, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.zs-care-what {
  margin: 14px 0 0;
  color: var(--body);
  font-size: .95rem;
  line-height: 1.5;
}
.zs-care-incl { padding-top: 4px; }
.zs-care-incl > p {
  margin: 0 0 14px;
  font: 600 12px/1 'Instrument Sans', ui-sans-serif, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.zs-care-incl > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--body);
}
.zs-care-incl > ul > li { position: relative; padding-left: 19px; }
.zs-care-incl > ul > li::before {
  content: "";
  position: absolute;
  left: 1px; top: .58em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .5;
}
.zs-care-note {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  max-width: 82ch;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.65;
}
.zs-pay {
  margin: clamp(26px, 3vw, 36px) 0 0;
  padding-top: clamp(22px, 2.6vw, 28px);
  border-top: 1px solid #DDD7CA;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 500;
}

@media (max-width: 479px) {
  .zs-care-pair { grid-template-columns: 1fr; }
}
@media (min-width: 700px) {
  .zs-care-grid { gap: 22px; }
  .zs-care-pair { gap: 22px; }
  .zs-care-incl { padding-top: 6px; }
}
@media (min-width: 980px) {
  .zs-care-grid { grid-template-columns: 2fr 1.35fr; gap: clamp(22px, 2.6vw, 34px); align-items: start; }
  .zs-care-pair { gap: clamp(22px, 2.6vw, 34px); }
  .zs-care-incl { padding-top: 4px; }
}

/* ---------- Offer anchor and proof ---------- */

.zs-anchor-line {
  margin: 0;
  max-width: 56ch;
  color: var(--body);
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.6;
}
.zs-proof {
  margin: clamp(34px, 4vw, 48px) 0 0;
  padding: clamp(20px, 2.4vw, 26px) 0 0;
  border-top: 1px solid #DDD7CA;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px clamp(18px, 3vw, 34px);
}
.zs-proof > p { margin: 0; max-width: 60ch; color: var(--body); font-size: 1rem; line-height: 1.6; }
.zs-proof a { text-decoration: none; font-weight: 600; color: var(--accent); }
.zs-proof-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  white-space: nowrap;
}