/* ==========================================================================
   publshr.ae

   A light, quiet, type-led site in the Mac-developer tradition: near-white
   surfaces, one near-black accent, hairline rules, generous vertical rhythm,
   and the product shown rather than described. There is no dark mode by
   design, so every value below is chosen for light and only light.
   ========================================================================== */

:root {
  /* Neutrals carry the faintest warmth so large white areas do not read clinical. */
  --ink: #0c0d0f;
  --ink-2: #33353a;
  --ink-3: #5b5e66;
  --muted: #8a8d94;

  --bg: #ffffff;
  --bg-alt: #f7f7f6;
  --bg-sunken: #fbfbfa;

  --line: rgba(12, 13, 15, 0.085);
  --line-2: rgba(12, 13, 15, 0.14);

  --ok: #0f7a4a;
  --bad: #bd3049;

  --shadow-sm: 0 1px 2px rgba(12, 13, 15, 0.05);
  --shadow-md: 0 2px 6px rgba(12, 13, 15, 0.05), 0 14px 34px rgba(12, 13, 15, 0.06);
  --shadow-lg: 0 4px 12px rgba(12, 13, 15, 0.05), 0 36px 80px rgba(12, 13, 15, 0.11);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --wrap: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 64px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter,
    system-ui, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- resets -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.16;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
dl, dd, dt { margin: 0; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- brand -- */
/* The mark is Levi, the cat. It is a CSS mask rather than an <img> so it always
   takes the surrounding text colour and can never fight its background. */

.brand-mark {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("/assets/levi.svg") center / contain no-repeat;
  mask: url("/assets/levi.svg") center / contain no-repeat;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.022em;
}
.brand-word { line-height: 1; }

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.9);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
  font-size: 0.9375rem;
}
.nav a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.16s var(--ease);
}
.nav a:hover { color: var(--ink); }

.menu-toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.menu-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-nav {
  display: grid;
  border-top: 1px solid var(--line);
  padding: 0.25rem var(--gutter) 0.75rem;
}
/* A class selector beats the UA sheet's `[hidden] { display: none }`, so the
   panel has to opt out explicitly or it shows on every page, at every width. */
.mobile-nav[hidden] { display: none; }

.mobile-nav a {
  padding: 0.8rem 0;
  text-decoration: none;
  color: var(--ink);
  font-size: 1rem;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-child { border-bottom: 0; }

/* -------------------------------------------------------------- buttons -- */

.btn {
  --btn-h: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: var(--btn-h);
  padding-inline: 1.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.16s var(--ease), background 0.16s var(--ease),
    border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), opacity 0.16s var(--ease);
}
.btn:active { transform: translateY(0.5px); }

.btn-sm { --btn-h: 34px; padding-inline: 0.85rem; font-size: 0.875rem; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: #24262c; box-shadow: var(--shadow-md); }

.btn-ghost {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--bg-sunken); }

.btn[disabled] { opacity: 0.55; cursor: default; transform: none; }

.arrow { width: 15px; height: 15px; flex: none; }

/* ----------------------------------------------------------------- type -- */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 560;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.display {
  font-size: clamp(2.5rem, 5.9vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.042em;
  max-width: 22ch;
}

.h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: -0.034em;
  max-width: 20ch;
}

.lede {
  margin-top: 1.75rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--ink-3);
  max-width: 56ch;
}

.section-sub {
  margin-top: 1rem;
  color: var(--ink-3);
  max-width: 56ch;
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  padding-top: clamp(4.5rem, 10vw, 8rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

/* One soft wash, so the top of the page is not a flat white slab. */
.hero-glow {
  position: absolute;
  inset: -40% 0 auto 0;
  height: 820px;
  background:
    radial-gradient(58% 52% at 50% 44%, rgba(12, 13, 15, 0.06), transparent 72%),
    radial-gradient(36% 38% at 80% 16%, rgba(12, 13, 15, 0.035), transparent 70%);
  pointer-events: none;
}

.hero-inner { position: relative; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* The spec strip: a few plain facts, set like a datasheet. */
.spec-strip {
  position: relative;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec-strip > div {
  padding: 1.15rem 1.25rem 1.15rem 0;
  border-left: 1px solid var(--line);
  padding-left: 1.25rem;
}
.spec-strip > div:first-child { border-left: 0; padding-left: 0; }
.spec-strip dt {
  font-size: 0.6875rem;
  font-weight: 560;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.spec-strip dd {
  font-size: 0.9375rem;
  color: var(--ink);
  letter-spacing: -0.014em;
}

.hero-shot-wrap { margin-top: clamp(3rem, 7vw, 5rem); position: relative; }

.shot-caption {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
}

/* ------------------------------------------------------------ shot frame -- */

.shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.shot-lg { box-shadow: var(--shadow-lg); border-radius: var(--r-xl); }

.shot-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 14px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.shot-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(12, 13, 15, 0.13);
}

.shot img { width: 100%; }

.shot-row {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* ------------------------------------------------------------- sections -- */

.section { padding-block: clamp(4.5rem, 10vw, 8rem); }

.section-alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
}

.section-head { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }

/* -------------------------------------------------------------- product -- */

.product {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
}
.product + .product { margin-top: 1.25rem; }

.product-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.product-ident {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.product-logo { height: 34px; width: auto; flex: none; margin-top: 1px; }

.product-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.product-title h3 {
  font-size: 1.4375rem;
  letter-spacing: -0.03em;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 560;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  line-height: 1.45;
}
.tag-live {
  color: var(--ok);
  border-color: rgba(15, 122, 74, 0.26);
  background: rgba(15, 122, 74, 0.055);
}
.tag-live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.product-line { margin-top: 0.45rem; color: var(--ink-3); }

.product-body { margin-top: 1.75rem; max-width: 68ch; }
.product-next .product-body { margin-top: 1rem; }

/* Numbered rows rather than a card grid: closer to a spec sheet, and it reads
   as one list at every width instead of reflowing into an awkward 2+1. */
.features {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.features li {
  display: flex;
  gap: 1.25rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}
.feature-n {
  font-size: 0.75rem;
  font-weight: 560;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-top: 0.2rem;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.features h4 {
  font-size: 0.9375rem;
  letter-spacing: -0.018em;
  margin-bottom: 0.3rem;
}
.features p {
  font-size: 0.9375rem;
  color: var(--ink-3);
  max-width: 62ch;
}

/* ------------------------------------------------------------------ api -- */

.api-wrap {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.notice {
  margin-top: 2rem;
  display: flex;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: 0.9375rem;
  color: var(--ink-3);
  max-width: 56ch;
}
.notice strong { color: var(--ink); font-weight: 560; }
.notice-icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--ink);
}

.api-facts { margin-top: 2rem; max-width: 34rem; }
.api-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.api-facts dt { color: var(--muted); }
.api-facts dd { color: var(--ink); text-align: right; }

.api-form-card {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.form-title {
  font-size: 1.125rem;
  letter-spacing: -0.024em;
  margin-bottom: 1.5rem;
}

.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 0.4rem;
}
.field .opt { color: var(--muted); font-weight: 400; }

.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--bg-sunken);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 0.62rem 0.75rem;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease),
    box-shadow 0.16s var(--ease);
}
.field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }

.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(12, 13, 15, 0.07);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--bad); }

/* Off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
}
.form-status {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  text-align: center;
  min-height: 1.25rem;
}
.form-status.is-error { color: var(--bad); }
.form-status.is-ok { color: var(--ok); }

.form-done { text-align: center; padding: 1rem 0 0.5rem; }
.form-done .done-mark {
  width: 44px;
  height: 44px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(15, 122, 74, 0.09);
  color: var(--ok);
  display: grid;
  place-items: center;
}
.form-done h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.form-done p { font-size: 0.9375rem; color: var(--ink-3); }

/* -------------------------------------------------------------- company -- */

.company-wrap {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.company-body { display: grid; gap: 1.25rem; max-width: 62ch; }
.company-contact { margin-top: 0.5rem; }
.company-contact a {
  color: var(--ink);
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
.company-contact a:hover { text-decoration-color: var(--ink); }

/* --------------------------------------------------------------- footer -- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem;
  background: var(--bg-sunken);
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.022em;
}

.footer-nav {
  display: flex;
  gap: 1.35rem;
  margin-left: auto;
  font-size: 0.875rem;
  flex-wrap: wrap;
}
.footer-nav a { color: var(--ink-3); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }

.footer-legal {
  width: 100%;
  font-size: 0.8125rem;
  color: var(--muted);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

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

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 980px) {
  .api-wrap,
  .company-wrap { grid-template-columns: 1fr; }
  .api-form-card { position: static; }
}

@media (max-width: 760px) {
  .nav,
  .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .spec-strip { grid-template-columns: 1fr 1fr; }
  .spec-strip > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .spec-strip > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .shot-row { grid-template-columns: 1fr; }
  .display { max-width: 100%; }
  .product-top .btn { width: 100%; }
  .footer-nav { margin-left: 0; width: 100%; }
}

@media (min-width: 761px) {
  /* The panel is a small-screen affordance only: never let it appear on desktop,
     whatever state the toggle was left in. */
  .mobile-nav { display: none; }
}

@media (max-width: 420px) {
  body { font-size: 16px; }
  .shot-bar { height: 28px; }
  .features li { gap: 0.9rem; }
}