

:root {
  --bg: #e8e8e8;
  --line: rgba(0, 0, 0, 0.8);
  --pink: #ec4899;
  --orange: #fb923c;
  --purple: #a855f7;
  --ink: #0a0a0a;
  --muted: #2a2a2a;
  --white: #ffffff;
  --wrap: 1440px;
  --font-display: "Archivo Black", sans-serif;
  --font-accent: Syne, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.blobs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
.blob-a { top: -10%; left: -10%; width: 50vw; height: 50vw; background: linear-gradient(135deg, #ec4899, #fb923c); opacity: 0.55; }
.blob-b { bottom: -10%; right: -10%; width: 55vw; height: 55vw; background: linear-gradient(315deg, #a855f7, #f9a8d4); opacity: 0.45; }

.shell {
  position: relative;
  z-index: 10;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100vh;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: #fff;
}

header.bnav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1.1fr 2fr;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, #f4f0ea 90%, #ec4899 10%);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
}
header.bnav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0 17px,
      rgba(10, 10, 10, 0.55) 17px 18px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0 17px,
      rgba(10, 10, 10, 0.28) 17px 18px
    );
}
header.bnav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 2;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #ec4899 0 25%,
    #fb923c 25% 50%,
    #a855f7 50% 75%,
    #0a0a0a 75% 100%
  );
}
.bnav-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  border-right: 1px solid var(--line);
}
.bnav-brand a {
  display: inline-flex;
  align-items: baseline;
  padding: 4px 2px;
  font-family: var(--font-display), "Archivo Black", sans-serif;
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(10, 10, 10, 0.92);
  background: none;
  border: 0;
  box-shadow: none;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 3px rgba(0, 0, 0, 0.22),
    0 10px 20px rgba(255, 255, 255, 0.4);
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18))
    drop-shadow(0 6px 14px rgba(255, 255, 255, 0.45));
  transition: text-shadow 0.15s ease, filter 0.15s ease, color 0.15s ease;
}
.bnav-brand a:hover {
  transform: none;
  opacity: 1;
  color: rgba(10, 10, 10, 0.8);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 3px 5px rgba(0, 0, 0, 0.2),
    0 12px 24px rgba(255, 255, 255, 0.5);
  filter:
    drop-shadow(0 3px 3px rgba(0, 0, 0, 0.2))
    drop-shadow(0 8px 18px rgba(255, 255, 255, 0.55));
}
.bnav-brand a em,
.bnav-brand a .app {
  font-style: italic;
  font-weight: 400;
  font-family: var(--font-accent), Syne, sans-serif;
}
.bnav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid #000;
  background: color-mix(in srgb, #f4f0ea 90%, #ec4899 10%);
}
.bnav-links { position: relative; z-index: 1; display: flex; }
.bnav-links a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-right: 1px solid var(--line);
  font-family: var(--font-display), "Archivo Black", sans-serif;
  font-size: 16px;
  letter-spacing: -0.03em;
}
.bnav-links a:last-child { border-right: 0; }
.bnav-links a:hover { color: #fff; }
.bnav-links a:nth-child(1):hover { background: #ec4899; color: #fff; }
.bnav-links a:nth-child(2):hover { background: #fb923c; color: #0a0a0a; }
.bnav-links a:nth-child(3):hover { background: #a855f7; color: #fff; }
.bnav-links a:nth-child(4):hover { background: #0a0a0a; color: #fff; }
.bnav-links a:nth-child(5):hover { background: #0a0a0a; color: #ec4899; }
.bnav-links a:hover svg { transform: rotate(45deg); }
.bnav-links svg { transition: transform 0.2s; }

footer.gridf {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  background: rgba(255, 255, 255, 0.35);
  border-top: 1px solid var(--line);
}
footer.gridf > div { padding: 48px 40px; border-right: 1px solid var(--line); }
footer.gridf > div:last-child { border-right: 0; }
.flog {
  font-family: var(--font-display), "Archivo Black", sans-serif;
  font-size: 42px;
  letter-spacing: -0.06em;
  line-height: 0.95;
  margin: 0 0 20px;
}
.flog em { font-family: var(--font-accent), Syne, sans-serif; font-style: italic; font-weight: 700; }
.flog-lead { font-family: ui-monospace, monospace; font-size: 13px; color: #555; margin: 0; }
.col-h {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #000;
  padding-bottom: 8px;
  margin-bottom: 18px;
  font-family: var(--font-display), "Archivo Black", sans-serif;
  font-size: 20px;
}
footer.gridf a { display: block; padding: 8px 0; font-size: 17px; }
footer.gridf a:hover { transform: translateX(6px); color: var(--pink); }
.copybar {
  border-top: 1px solid var(--line);
  padding: 22px 24px;
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
  background: rgba(255, 255, 255, 0.5);
}

.siteBtn,
.siteBtnGhost,
.btn-dark,
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  font-family: var(--font-display), "Archivo Black", sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid #000;
  border-radius: 0;
}
.siteBtn,
.btn-dark { background: #000; color: #fff; }
.siteBtn:hover,
.btn-dark:hover { background: var(--orange); color: #000; box-shadow: 4px 4px 0 #000; transform: translateY(-3px); }
.siteBtnGhost,
.btn-line { background: transparent; }
.siteBtnGhost:hover,
.btn-line:hover { background: #fff; box-shadow: 4px 4px 0 #000; transform: translateY(-3px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 8px 14px;
  border: 1px solid #000;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 #000;
}

.pageHero,
.heroCenter {
  padding: 80px 64px 64px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
}
.pageHero { text-align: left; }
.heroCenter { text-align: center; }
.pageHero h1,
.heroCenter h1,
.manifesto h2,
.sectionIntro h2,
.stepsBand h2,
.supportBand h2,
.faqBand h2,
.bottomCta h2,
.splitRow h2 {
  font-family: var(--font-display), "Archivo Black", sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  margin: 0 0 20px;
}
.pageHero p,
.heroLead,
.pageHero > p:not(.eyebrow) {
  font-size: 20px;
  max-width: 72ch;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 28px;
}
.heroCenter h1 { font-size: clamp(36px, 6vw, 64px); }
.heroLead { margin-left: auto; margin-right: auto; }
.heroActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.heroTrustLabel {
  margin: 40px 0 14px;
  color: #555;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.logoRow {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.logoRow li {
  padding: 14px 20px;
  background: #fff;
  border-right: 1px solid var(--line);
  font-family: var(--font-display), "Archivo Black", sans-serif;
  font-size: 13px;
  letter-spacing: -0.02em;
}
.logoRow li:last-child { border-right: 0; }

.manifesto {
  padding: 64px 64px 32px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.manifesto h2 { font-size: clamp(28px, 4vw, 40px); }

.pillarGrid,
.cardGrid,
.zipyStandardGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}
.pillarGrid article,
.cardGrid article,
.zipyStandardGrid article {
  padding: 40px 36px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  border-radius: 0;
}
.pillarGrid article:nth-child(3n),
.cardGrid article:nth-child(3n),
.zipyStandardGrid article:nth-child(3n) { border-right: 0; }
.pillarGrid article:nth-child(1),
.cardGrid article:nth-child(1),
.zipyStandardGrid article:nth-child(1) { background: #fce7f3; }
.pillarGrid article:nth-child(5),
.cardGrid article:nth-child(5),
.zipyStandardGrid article:nth-child(2) { background: #ffedd5; }
.pillarGrid article:nth-child(3),
.cardGrid article:nth-child(6),
.zipyStandardGrid article:nth-child(3) { background: #f3e8ff; }
.pillarGrid h3,
.cardGrid h2,
.zipyStandardGrid h2 {
  font-family: var(--font-display), "Archivo Black", sans-serif;
  font-size: 22px;
  letter-spacing: -0.03em;
  margin: 10px 0 8px;
}
.pillarGrid p,
.cardGrid p,
.zipyStandardGrid p,
.splitRow p,
.stepsBand p,
.supportBand p,
.faqBand p,
.bottomCta p {
  color: #444;
  line-height: 1.55;
}

.cardGrid ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.cardGrid li,
.zipyBullet {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: #333;
  font-size: 14px;
}
.zipyBullet { margin: 10px 0; }
.cardGrid svg { color: var(--pink); flex-shrink: 0; }
.cardGrid a {
  font-family: var(--font-display), "Archivo Black", sans-serif;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.cardGrid a:hover { color: var(--pink); }

.quoteBand {
  padding: 56px 64px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  text-align: center;
}
.quoteBand p {
  font-family: var(--font-display), "Archivo Black", sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 12px;
}
.quoteBand cite {
  font-family: ui-monospace, monospace;
  font-style: normal;
  font-size: 12px;
  color: #555;
}

.sectionIntro {
  padding: 48px 64px 8px;
  background: #fff;
}
.sectionIntro h2 { font-size: clamp(28px, 3.6vw, 40px); }

.productStage,
.stepsBand,
.faqBand,
.bottomCta { background: #fff; }
.productStage { padding: 32px 64px 64px; border-bottom: 1px solid var(--line); }
.product-stage { min-height: 180px; border: 1px solid #000; background: #fff; background-image: radial-gradient(#000 1px, transparent 1px); background-size: 20px 20px; }
.product-stage-card { height: 180px; }

.stageLayout { display: grid; grid-template-columns: 220px 1fr; gap: 0; border: 1px solid #000; }
.stageTabs { display: flex; flex-direction: column; background: #000; }
.stageTabs button {
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #333;
  padding: 16px 14px;
  font-family: var(--font-display), "Archivo Black", sans-serif;
  color: #fff;
  cursor: pointer;
}
.stageTabs button.is-active,
.stageTabs button:hover { background: var(--pink); color: #000; }
.stagePanel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 32px;
  background: #f7f7f7;
  padding: 40px;
  min-height: 360px;
}
.stageCopy h3 { font-family: var(--font-display), "Archivo Black", sans-serif; font-size: 28px; margin: 0 0 12px; }
.stageFrame,
.splitFrame {
  background: #fff;
  border: 1px solid #000;
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: 24px;
}
.stagePreview {
  background: #fff;
  border: 1px solid #000;
  box-shadow: 4px 4px 0 #000;
  padding: 20px;
  width: min(100%, 280px);
}
.stagePreview small,
.stagePreview span { display: block; color: #555; }
.stagePreview strong { display: block; margin: 8px 0; }
.stagePreview.bio i,
.stagePreview.teams p,
.stagePreview.rules p {
  display: block;
  background: #fce7f3;
  border: 1px solid #000;
  padding: 10px 12px;
  margin-top: 8px;
  font-style: normal;
}
.stagePreview.api code {
  display: block;
  font-size: 13px;
  background: #111;
  color: #fff;
  padding: 10px;
  margin-top: 8px;
}
.stagePreview.dash header { display: flex; justify-content: space-between; margin-bottom: 12px; }
.stagePreview.dash strong { font-size: 32px; }
.bars { height: 84px; display: flex; align-items: end; gap: 6px; margin-top: 12px; }
.bars i { flex: 1; background: var(--pink); height: 45%; }
.bars i:nth-child(2),
.bars i:nth-child(5) { height: 70%; }
.bars i:nth-child(3) { height: 92%; }
.qrGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
}
.qrGrid i { background: var(--ink); }
.qrGrid i:nth-child(3n) { background: var(--pink); }

.splitRow {
  padding: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.splitRow.is-reverse { direction: rtl; }
.splitRow.is-reverse > * { direction: ltr; }
.splitRow h2 { font-size: clamp(28px, 3.4vw, 38px); }
.checkList { list-style: none; padding: 0; margin: 20px 0 0; }
.checkList li {
  font-weight: 600;
  padding: 8px 0 8px 28px;
  position: relative;
}
.checkList li::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--pink);
  border: 1px solid #000;
  position: absolute;
  left: 0;
  top: 12px;
}

.stepsBand { padding: 64px; border-bottom: 1px solid var(--line); }
.stepsBand h2 { font-size: clamp(28px, 3.6vw, 40px); }
.stepList { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.stepList li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  background: #fff;
  border: 1px solid #000;
  border-bottom: 0;
  padding: 24px 28px;
}
.stepList li:last-child { border-bottom: 1px solid #000; }
.stepList span { font-family: var(--font-display), "Archivo Black", sans-serif; color: var(--pink); }
.stepList h3 { margin: 0 0 6px; font-family: var(--font-display), "Archivo Black", sans-serif; font-size: 18px; }

.supportBand { padding: 56px 64px; border-bottom: 1px solid var(--line); text-align: center; }
.supportBand h2 { font-size: clamp(28px, 3.6vw, 40px); }

.faqBand { padding: 0 0 56px; border-bottom: 1px solid var(--line); }
.faqBand h2 { padding: 48px 64px 12px; font-size: clamp(28px, 4vw, 40px); }
.faqBand details { border-top: 1px solid var(--line); padding: 22px 64px; background: #fff; }
.faqBand summary { font-family: var(--font-display), "Archivo Black", sans-serif; font-size: 18px; cursor: pointer; }
.faqBand details p { margin: 12px 0 0; max-width: 720px; }

.bottomCta {
  padding: 80px 64px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.bottomCta h2 { font-size: clamp(32px, 5vw, 56px); }
.bottomCta p { margin: 0 0 22px; max-width: 560px; }

.proseBand {
  padding: 56px 64px 80px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.proseBand h2,
.capBand h2,
.aboutStory h2,
.principleList h2,
.storeBand h2,
.wizardPane h2,
.contactAside h2 {
  font-family: var(--font-display), "Archivo Black", sans-serif;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.04em;
  margin: 0 0 16px;
}
.proseBand p,
.aboutStory p,
.legalProse p,
.storeBand > p,
.wizardPane p,
.contactAside p { max-width: 72ch; color: #333; line-height: 1.65; }
.proseBand a,
.legalProse a,
.contactAside a { text-decoration: underline; text-underline-offset: 3px; }

.productSlabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.productSlabs article { padding: 44px 36px; background: #fff; border-right: 1px solid var(--line); }
.productSlabs article:nth-child(1) { background: #fce7f3; }
.productSlabs article:nth-child(2) { background: #ffedd5; }
.productSlabs article:nth-child(3) { background: #f3e8ff; }
.productSlabs article:nth-child(4) { background: #fff; }
.productSlabs article:last-child { border-right: 0; }
.productSlabs h2 { font-family: var(--font-display), "Archivo Black", sans-serif; font-size: 28px; margin: 0 0 12px; }
.productSlabs ul { margin: 18px 0 0; padding: 0 0 0 18px; }
.productSlabs li { margin: 8px 0; }

.capBand { background: #fff; border-bottom: 1px solid var(--line); }
.tableWrap { overflow-x: auto; border-bottom: 1px solid var(--line); background: #fff; }
.capTable,
.priceTable,
.compareTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.capTable th,
.priceTable th,
.compareTable th,
.capTable td,
.priceTable td,
.compareTable td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 16px 22px;
  text-align: left;
  vertical-align: top;
}
.capTable thead,
.priceTable thead,
.compareTable thead { background: #000; color: #fff; }
.priceTable caption,
.compareTable caption {
  caption-side: top;
  padding: 16px 18px 8px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
}
.priceTable tbody th,
.compareTable tbody th { font-family: var(--font-display), "Archivo Black", sans-serif; font-weight: 400; width: 22%; }
.priceTable td:nth-child(2),
.priceTable td:nth-child(3),
.priceTable td:nth-child(4) { text-align: center; }

.planCtas { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.planCtas article { padding: 40px 32px; background: #fff; border-right: 1px solid var(--line); }
.planCtas article:nth-child(1) { background: #fce7f3; }
.planCtas article:nth-child(2) { background: #ffedd5; }
.planCtas article:nth-child(3) { background: #f3e8ff; }
.planCtas article:nth-child(4) { background: #fff; }
.planCtas article:last-child { border-right: 0; }
.planCtas h2 { font-family: var(--font-display), "Archivo Black", sans-serif; font-size: 22px; margin: 0 0 8px; }
.planPrice { font-family: var(--font-display), "Archivo Black", sans-serif; font-size: 32px; margin: 0 0 8px; }

.steps { list-style: none; margin: 0; padding: 0; }
.steps > li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: 48px 64px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  align-items: start;
}
.steps > li.is-right { grid-template-columns: 1fr 100px; }
.steps > li.is-right .stepNum { order: 2; text-align: right; }
.stepNum {
  font-family: var(--font-display), "Archivo Black", sans-serif;
  font-size: 36px;
  color: var(--pink);
}
.steps h2 { font-family: var(--font-display), "Archivo Black", sans-serif; font-size: clamp(22px, 3vw, 32px); margin: 0 0 10px; }

.audienceGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}
.audienceGrid a {
  display: grid;
  gap: 12px;
  padding: 32px;
  background: #fff;
  border-right: 1px solid var(--line);
}
.audienceGrid a:nth-child(1) { background: #fce7f3; }
.audienceGrid a:nth-child(2) { background: #ffedd5; }
.audienceGrid a:nth-child(3) { background: #f3e8ff; }
.audienceGrid a:nth-child(4) { border-right: 0; }
.audienceGrid strong { font-family: var(--font-display), "Archivo Black", sans-serif; }
.useDeep { padding: 56px 64px; border-bottom: 1px solid var(--line); background: #fff; }
.useDeep:nth-of-type(even) { background: #fff7ed; }
.useDeep h2 { font-family: var(--font-display), "Archivo Black", sans-serif; font-size: clamp(28px, 4vw, 44px); margin: 0 0 12px; }
.useDeep h3 { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin: 24px 0 8px; }
.useOutcome { font-size: 20px; max-width: 70ch; }

.helpSearch { padding: 40px 64px; border-bottom: 1px solid var(--line); background: #fff; }
.helpSearch label { display: block; font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
.helpSearch input {
  width: 100%;
  max-width: 640px;
  border: 1px solid #000;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 4px 4px 0 #000;
}
.helpGrid { display: grid; grid-template-columns: repeat(3, 1fr); }
.helpGrid article { padding: 36px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.helpGrid article:nth-child(3n) { border-right: 0; }
.helpGrid h2 { font-family: var(--font-display), "Archivo Black", sans-serif; font-size: 22px; margin: 0 0 12px; }
.helpGrid ul { margin: 0; padding-left: 18px; }

.contactLayout { display: grid; grid-template-columns: 1.4fr 0.8fr; border-bottom: 1px solid var(--line); }
.contactForm, .contactThanks { padding: 48px 64px; background: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contactForm .is-full, .contactForm .siteBtn { grid-column: 1 / -1; }
.contactForm label { display: grid; gap: 6px; font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.contactForm input,
.contactForm textarea { border: 1px solid #000; padding: 12px; font: inherit; text-transform: none; letter-spacing: 0; background: #fff; }
.contactAside { padding: 48px 40px; background: #f3e8ff; border-left: 1px solid var(--line); }

.aboutStory { padding: 56px 64px; background: #fff; border-bottom: 1px solid var(--line); }
.principleList { padding: 0; background: #fff; border-bottom: 1px solid var(--line); }
.principleList h2 { padding: 48px 64px 0; }
.principleList article { padding: 32px 64px 40px; border-top: 1px solid var(--line); }
.principleList article:nth-child(odd) { background: #fce7f3; }
.principleList h3 { font-family: var(--font-display), "Archivo Black", sans-serif; margin: 0 0 8px; }

.legalProse { padding: 56px 64px 80px; background: #fff7ed; border-bottom: 1px solid var(--line); }
.legalProse h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  letter-spacing: 0;
  margin: 8px 0 16px;
}
.legalLabel {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 36px 0 0;
}

.controlList { display: grid; grid-template-columns: 1fr 1fr; }
.controlList article { padding: 40px 36px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.controlList article:nth-child(2n) { border-right: 0; }
.controlList article:nth-child(1) { background: #fce7f3; }
.controlList article:nth-child(4) { background: #ffedd5; }
.controlList h2 { font-family: var(--font-display), "Archivo Black", sans-serif; font-size: 22px; margin: 0 0 10px; }
.storeBand { padding: 56px 64px; background: #fff; border-bottom: 1px solid var(--line); }
.storeDl { display: grid; gap: 0; border: 1px solid #000; }
.storeDl > div { display: grid; grid-template-columns: 160px 1fr; border-bottom: 1px solid #000; }
.storeDl > div:last-child { border-bottom: 0; }
.storeDl dt { padding: 14px; font-family: ui-monospace, monospace; font-size: 12px; background: #000; color: #fff; }
.storeDl dd { margin: 0; padding: 14px; }

.wizard { border-bottom: 1px solid var(--line); background: #fff; }
.wizardNav { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.wizardNav button {
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 18px;
  background: #fff;
  border: 0;
  border-right: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
}
.wizardNav li:last-child button { border-right: 0; }
.wizardNav button.is-on { background: var(--orange); }
.wizardNav span { font-family: var(--font-display), "Archivo Black", sans-serif; color: var(--pink); }
.wizardPane { padding: 48px 64px 64px; }
.wizardChecks { list-style: none; padding: 0; margin: 0 0 24px; }
.wizardChecks label { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.wizardChecks em { display: block; font-style: normal; color: #555; font-size: 14px; }
.wizardList { margin: 0 0 24px; padding-left: 20px; }
.wizardList li { margin: 10px 0; }
.wizardActions { display: flex; gap: 12px; flex-wrap: wrap; }
.wizardSplit,
.wizardPanels { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; margin: 0 0 24px; }
.wizardPanel { border: 1px solid #000; background: #fff7ed; padding: 20px; }
.wizardPanel h3 { font-family: var(--font-display), "Archivo Black", sans-serif; margin: 0 0 12px; font-size: 18px; }
.wizardPanel label { display: grid; gap: 6px; margin: 0 0 12px; font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.wizardPanel input { border: 1px solid #000; padding: 10px; font: inherit; text-transform: none; letter-spacing: 0; background: #fff; }
.wizardPanel ol { margin: 0; padding-left: 18px; }
.wizardPanel li { margin: 8px 0; }
.wizardNote { margin-top: 16px; font-size: 14px; }
.wizardListChecks { list-style: none; padding: 0; margin: 0; }

@media (max-width: 1100px) {
  .productSlabs,
  .planCtas { grid-template-columns: 1fr 1fr; }
  .productSlabs article:nth-child(2n),
  .planCtas article:nth-child(2n) { border-right: 0; }
}

@media (max-width: 900px) {
  header.bnav { grid-template-columns: 1fr; }
  .bnav-brand { border-right: 0; border-bottom: 1px solid var(--line); }
  .bnav-toggle { display: grid; place-items: center; }
  .bnav-links { display: none; flex-direction: column; }
  .bnav-links.is-open { display: flex; }
  .bnav-links a { min-height: 56px; border-right: 0; border-bottom: 1px solid var(--line); }
  footer.gridf,
  .pillarGrid,
  .cardGrid,
  .zipyStandardGrid,
  .stageLayout,
  .stagePanel,
  .splitRow { grid-template-columns: 1fr; }
  footer.gridf > div,
  .pillarGrid article,
  .cardGrid article,
  .zipyStandardGrid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .splitRow.is-reverse { direction: ltr; }
  .pageHero,
  .heroCenter,
  .manifesto,
  .splitRow,
  .stepsBand,
  .supportBand,
  .bottomCta,
  .proseBand,
  .helpSearch,
  .useDeep,
  .aboutStory,
  .legalProse,
  .storeBand,
  .wizardPane,
  .contactForm,
  .contactThanks { padding: 36px 24px; }
  .productSlabs,
  .planCtas,
  .audienceGrid,
  .helpGrid,
  .contactLayout,
  .controlList,
  .wizardNav,
  .wizardSplit,
  .wizardPanels,
  .storeDl > div { grid-template-columns: 1fr; }
  .productSlabs article,
  .planCtas article,
  .audienceGrid a,
  .helpGrid article,
  .controlList article { border-right: 0; }
  .steps > li,
  .steps > li.is-right { grid-template-columns: 1fr; padding: 28px 24px; }
  .steps > li.is-right .stepNum { order: 0; text-align: left; }
  .contactAside { border-left: 0; border-top: 1px solid var(--line); padding: 28px 24px; }
  .principleList h2,
  .principleList article { padding-left: 24px; padding-right: 24px; }
  .faqBand h2,
  .faqBand details { padding-left: 24px; padding-right: 24px; }
  .productStage { padding: 24px; }
  .logoRow li { border-bottom: 1px solid var(--line); }
}
