/* Hallmark · the company site's system (DESIGN.md §34, 2026-11-08) · theme: Ink under the PixelGlass brand (accent #2e6bf5, wordmark Space Grotesk) · axes: light/grotesk-sans/chromatic-blue · posture: restrained · every page of the company site loads this sheet, then its own (saas/home/page.css, saas/home/pricing.css) · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 · weakest: H, a page below the home page has a plain dark head, so its first section must carry the picture */
/* Hallmark · waive 22 · ink and greys at zero chroma under a blue accent · Ink prints in plain black and PixelGlass blue is the one signal */
@import url("/assets/saas/home/tokens-9238946c.css");
@import url("/assets/saas/home/base-e6dcda16.css");

/* — Controls —————————————————————————————————————— */
.hm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 10px;
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.hm-button:hover {
  border-color: var(--color-ink);
}

.hm-button:active {
  background: var(--color-paper-3);
}

.hm-button:disabled,
.hm-button[aria-disabled="true"] {
  border-color: var(--color-rule);
  background: var(--color-paper-2);
  color: var(--color-muted);
  cursor: not-allowed;
}

.hm-button-primary {
  min-height: 52px;
  padding-inline: var(--space-lg);
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-lg);
}

.hm-button-primary:hover {
  background: var(--color-ink-2);
}

.hm-button-primary:active {
  background: var(--color-ink);
}

.hm-button:focus-visible,
.hm-nav a:focus-visible,
.hm-footer a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* — The nav: edge-aligned, one line ——————————————————— */
.hm-nav {
  background: var(--color-ink);
  color: var(--color-paper);
}

.hm-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: var(--nav-height);
}

.hm-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-paper);
  font-family: var(--font-wordmark);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.hm-wordmark img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.hm-wordmark b {
  font-weight: inherit;
  color: var(--color-accent);
}

.hm-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.hm-nav-links a:not(.hm-button) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-on-ink-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}

.hm-nav-links a:not(.hm-button):hover {
  color: var(--color-paper);
  text-decoration-color: var(--color-paper);
}

.hm-nav .hm-button {
  border-color: var(--color-on-ink-muted);
  background: transparent;
  color: var(--color-paper);
}

.hm-nav .hm-button:hover {
  border-color: var(--color-paper);
}

.hm-actions {
  margin-top: var(--space-xl);
}

.hm-terms {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-on-ink-muted);
}

.hm-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-md);
  color: var(--color-ink);
  font-weight: 600;
  text-decoration-color: var(--color-rule);
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}

.hm-link:hover {
  text-decoration-color: var(--color-accent);
}

.hm-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* — A page of the company site ————————————————————————————
   Every page below the home page has this pattern (Ronald, 2026-11-08:
   "a nice pattern that can easily be migrated from the existing
   content"): a dark head like the home page's hero (the crumbs, one h1
   and its lead), then sections on the paper and the second paper, each
   with a head, then the close and the footer. An old page moves over
   section by section: lp-section becomes hm-section, lp-tint becomes
   hm-section-tint, lp-head becomes hm-section-head. */
.hm-head {
  padding-block: var(--space-3xl) var(--section-gap-s);
  background: var(--color-ink);
  color: var(--color-paper);
}

.hm-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-on-ink-muted);
}

.hm-crumbs li + li::before {
  content: "/";
  margin-right: var(--space-xs);
}

.hm-crumbs a {
  color: var(--color-on-ink-muted);
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}

.hm-crumbs a:hover {
  color: var(--color-paper);
  text-decoration-color: var(--color-paper);
}

.hm-crumbs a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.hm-head h1 {
  max-width: 18ch;
  margin-top: var(--space-lg);
  font-size: clamp(2.75rem, 4vw + 1.5rem, 5.5rem);
  line-height: 1;
  color: var(--color-paper);
}

.hm-head .lead {
  margin-top: var(--space-lg);
  color: var(--color-on-ink-muted);
}

.hm-head .lead b {
  font-weight: 700;
  color: var(--color-paper);
}

.hm-section {
  padding-block: var(--section-gap);
}

.hm-section-tint {
  background: var(--color-paper-2);
}

.hm-section-head {
  margin-bottom: var(--space-2xl);
}

.hm-section-head h2 {
  max-width: 16ch;
}

.hm-section-head .lead {
  margin-top: var(--space-md);
  color: var(--color-ink-2);
}

/* The words on one side and the drawing on the other. */
.hm-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap-columns);
  align-items: center;
}

.hm-split .lead {
  margin-top: var(--space-md);
  color: var(--color-ink-2);
}

.hm-checks {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.hm-checks li {
  position: relative;
  padding-left: var(--space-xl);
  font-size: var(--text-md);
  line-height: 1.5;
}

.hm-checks li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: var(--space-2xs);
  width: 0.45em;
  height: 0.8em;
  border: solid var(--color-accent);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* A table of figures: the heads in the body face, the numbers aligned. */
.hm-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-card);
  background: var(--color-paper);
}

.hm-table {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.hm-table th,
.hm-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-align: left;
}

.hm-table thead th {
  font-size: var(--text-md);
  font-weight: 700;
}

.hm-table tbody th {
  font-weight: 400;
  color: var(--color-ink-2);
}

.hm-table tbody tr:last-child > * {
  border-bottom: 0;
}

.hm-yes {
  display: inline-block;
  width: 0.45em;
  height: 0.8em;
  margin-left: var(--space-2xs);
  border: solid var(--color-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* The partial's Start free trial, as this page's quiet button. */
.lp-plan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.lp-plan-button:hover {
  border-color: var(--color-ink);
}

.lp-plan-button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* The scale (DESIGN.md §20, "Pricing", 2026-10-25), the shared partial
   saas/shared/_plans, ported from landing.css onto this sheet's tokens and
   space scale (Ronald, 2026-11-08: "I prefer this design we previously
   had").
   The panel keeps one size whichever plan is picked: its tracks are
   fractions and the toggle's is fixed (a track sized by its content
   grows with the bars and the strip that span it), the figure keeps
   its unit on a line of its own and room for two lines under it.
   One panel: on the left the emails a month of the plan picked and a bar
   for each plan, its height its price; on the right that plan whole and
   what every plan has. Radios ahead of the panel pick the plan and the
   interval with no script; they stay in the tab order, out of sight, and
   the arrow keys move along the bars. Still: no motion of its own. */
.lp-interval-input,
.lp-pick-input {
  appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
}

.lp-scale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem minmax(0, 1fr);
  grid-template-areas:
    "figure toggle plan"
    "bars bars plan"
    "includes includes includes";
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-rule);
}

.lp-scale-figure,
.lp-scale-bars {
  padding-inline: var(--space-xl);
}

.lp-scale-plan {
  padding: var(--space-xl) var(--space-xl);
  border-left: 1px solid var(--color-rule);
  background: var(--color-paper-2);
}

/* The interval toggle: the plan step's pill, at the top of the scale. */
.lp-interval {
  grid-area: toggle;
  align-self: start;
  justify-self: end;
  display: flex;
  width: fit-content;
  gap: var(--space-2xs);
  margin: var(--space-xl) var(--space-xl) 0 0;
  padding: var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--color-paper-2);
  box-shadow: inset 0 0 0 1px var(--color-rule);
}

.lp-interval label {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.lp-interval label span {
  margin-left: var(--space-2xs);
  color: var(--color-accent-soft-ink);
}

#lp-interval-year:checked ~ .lp-scale label[for="lp-interval-year"],
#lp-interval-month:checked ~ .lp-scale label[for="lp-interval-month"] {
  background: var(--color-paper);
  box-shadow: 0 0 0 1px var(--color-rule);
  color: var(--color-ink);
}

#lp-interval-year:focus-visible ~ .lp-scale label[for="lp-interval-year"],
#lp-interval-month:focus-visible ~ .lp-scale label[for="lp-interval-month"] {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

#lp-interval-year:checked ~ .lp-scale [data-interval="month"],
#lp-interval-month:checked ~ .lp-scale [data-interval="year"] {
  display: none;
}

/* The plan picked: its block opens into the grid, the others stay shut. */
.lp-scale-choice {
  display: none;
}

#lp-plan-solo:checked ~ .lp-scale [data-plan="solo"],
#lp-plan-personal:checked ~ .lp-scale [data-plan="personal"],
#lp-plan-publisher:checked ~ .lp-scale [data-plan="publisher"],
#lp-plan-business:checked ~ .lp-scale [data-plan="business"],
#lp-plan-scale:checked ~ .lp-scale [data-plan="scale"],
#lp-plan-media:checked ~ .lp-scale [data-plan="media"],
#lp-plan-network:checked ~ .lp-scale [data-plan="network"] {
  display: contents;
}

.lp-scale-figure {
  grid-area: figure;
  padding-top: var(--space-xl);
}

.lp-scale-emails b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2rem + 4vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.lp-scale-emails span {
  display: block;
  margin-top: var(--space-xs);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-ink);
}

.lp-scale-subscribers {
  min-height: 3em;
  margin-top: var(--space-md);
  line-height: 1.5;
  color: var(--color-ink-2);
}

.lp-scale-subscribers b {
  font-weight: 600;
  color: var(--color-ink);
}

/* The bars: a column each, its height its price, its tick under it. */
.lp-scale-bars {
  grid-area: bars;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: end;
  gap: var(--space-sm);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.lp-scale-bar {
  display: grid;
  gap: var(--space-sm);
  cursor: pointer;
}

.lp-scale-column {
  display: flex;
  justify-content: center;
  height: calc(2.75rem + var(--h) * 12rem);
  padding-top: var(--space-sm);
  border-radius: 0.9rem 0.9rem 0.35rem 0.35rem;
  box-shadow: inset 0 0 0 1px var(--color-rule);
  font-size: clamp(0.75rem, 0.65rem + 0.3vw, 0.9rem);
  font-weight: 600;
}

.lp-scale-tick {
  text-align: center;
  font-size: 0.9rem;
}

.lp-scale-bar:hover .lp-scale-column {
  box-shadow: inset 0 0 0 1px var(--color-ink);
}

#lp-plan-solo:checked ~ .lp-scale label[for="lp-plan-solo"],
#lp-plan-personal:checked ~ .lp-scale label[for="lp-plan-personal"],
#lp-plan-publisher:checked ~ .lp-scale label[for="lp-plan-publisher"],
#lp-plan-business:checked ~ .lp-scale label[for="lp-plan-business"],
#lp-plan-scale:checked ~ .lp-scale label[for="lp-plan-scale"],
#lp-plan-media:checked ~ .lp-scale label[for="lp-plan-media"],
#lp-plan-network:checked ~ .lp-scale label[for="lp-plan-network"] {
  --lp-bar: var(--color-ink);
  --lp-bar-text: var(--color-paper);
  --lp-tick: var(--color-ink);
}

.lp-scale-bar .lp-scale-column {
  background: var(--lp-bar, var(--color-paper-2));
  color: var(--lp-bar-text, var(--color-ink-2));
}

.lp-scale-bar .lp-scale-tick {
  color: var(--lp-tick, var(--color-muted));
  font-weight: 500;
}

#lp-plan-solo:focus-visible ~ .lp-scale label[for="lp-plan-solo"],
#lp-plan-personal:focus-visible ~ .lp-scale label[for="lp-plan-personal"],
#lp-plan-publisher:focus-visible ~ .lp-scale label[for="lp-plan-publisher"],
#lp-plan-business:focus-visible ~ .lp-scale label[for="lp-plan-business"],
#lp-plan-scale:focus-visible ~ .lp-scale label[for="lp-plan-scale"],
#lp-plan-media:focus-visible ~ .lp-scale label[for="lp-plan-media"],
#lp-plan-network:focus-visible ~ .lp-scale label[for="lp-plan-network"] {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 0.9rem;
}

/* The plan picked, whole. */
.lp-scale-plan {
  grid-area: plan;
  display: flex;
  flex-direction: column;
}

.lp-plan-button {
  margin-top: auto;
}

.lp-scale-plan h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.lp-plan-line {
  margin-top: var(--space-2xs);
  color: var(--color-ink-2);
}

.lp-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.lp-plan-price b {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 2vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--color-ink);
}

.lp-plan-price span {
  color: var(--color-muted);
}

.lp-plan-year {
  margin-top: var(--space-xs);
  font-size: 0.9rem;
  color: var(--color-ink-2);
}

.lp-plan-facts {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-lg) 0;
  padding: var(--space-md) 0 0;
  border-top: 1px solid var(--color-rule);
  list-style: none;
  color: var(--color-ink-2);
}

.lp-plan-facts b {
  font-weight: 600;
  color: var(--color-ink);
}

/* What every plan has: one strip along the foot of the panel. */
.lp-scale-includes {
  grid-area: includes;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm) var(--space-xl);
  padding: var(--space-md) var(--space-xl);
  border-top: 1px solid var(--color-rule);
}

.lp-scale-includes p {
  flex: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-ink);
}

.lp-scale-includes ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--color-ink-2);
}

.lp-scale-includes li {
  position: relative;
  padding-left: var(--space-md);
}

.lp-scale-includes li::before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0.1rem;
  width: 0.35rem;
  height: 0.65rem;
  border: solid var(--color-accent-soft-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.lp-plans-fine {
  margin-top: var(--space-md);
  font-size: 0.9rem;
  color: var(--color-muted);
  text-align: center;
}

@media (max-width: 63.9375rem) {
  .lp-scale {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "toggle" "figure" "bars" "plan" "includes";
    grid-template-rows: none;
  }

  .lp-interval {
    margin-inline: var(--space-xl);
  }

  .lp-scale-plan {
    border-left: 0;
  }

  .lp-scale-includes {
    flex-direction: column;
  }

  .lp-scale-plan {
    border-top: 1px solid var(--color-rule);
  }
}

@media (max-width: 29.9375rem) {
  .lp-scale-tick {
    font-size: 0.75rem;
  }
}

/* — Before you start ——————————————————————————————————————
   The head on four columns beside rows on eight: each question a
   summary under a hairline, its answer under it. They open with no
   script and no motion; the sign at the right turns from plus to minus. */
.hm-questions {
  padding-block: var(--section-gap);
}

.hm-questions-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--gap-columns);
  align-items: start;
}

.hm-questions-grid h2 {
  max-width: 10ch;
}

.hm-qa {
  border-top: var(--rule-hair) solid var(--color-ink);
}

.hm-qa details {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.hm-qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 44px;
  padding-block: var(--space-lg);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  list-style: none;
  cursor: pointer;
}

.hm-qa summary::-webkit-details-marker {
  display: none;
}

.hm-qa summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  color: var(--color-muted);
}

.hm-qa details[open] summary::after {
  content: "−";
}

.hm-qa summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.hm-qa p {
  max-width: 60ch;
  padding-bottom: var(--space-lg);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-ink-2);
}

/* — The close: the offer once more, at night ——————————————
   The photograph fills the section behind the head. A veil of ink keeps
   the white type legible over the bright sky, and the foot fades to ink,
   so the dark forest runs into the footer with no seam. */
.hm-close {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: clamp(36rem, 52vw, 52rem);
  padding-block: var(--section-gap) var(--space-4xl);
  background: var(--color-ink);
  color: var(--color-paper);
}

.hm-close-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.hm-close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, transparent 65%, var(--color-ink)),
    color-mix(in oklch, var(--color-ink) 55%, transparent);
}

.hm-close-head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.hm-close-head h2 {
  max-width: 14ch;
  font-size: var(--text-display);
  line-height: 1;
  color: var(--color-paper);
}

.hm-close-head .lead {
  max-width: 40ch;
  margin-top: var(--space-lg);
  color: var(--color-paper);
}

.hm-close .hm-terms {
  color: var(--color-paper);
}

/* The primary, white on the dark close, as in the hero. */
.hm-close .hm-button-primary {
  border-color: var(--color-paper);
  background: var(--color-paper);
  color: var(--color-ink);
}

.hm-close .hm-button-primary:hover {
  background: var(--color-paper-3);
}

/* — The footer: a letter close ————————————————————————— */
.hm-footer {
  padding-block: var(--space-3xl) var(--space-2xl);
  background: var(--color-ink);
  color: var(--color-paper);
}

.hm-footer-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-xl) var(--gap-columns);
}

.hm-letter {
  grid-column: 1 / span 5;
}

.hm-made {
  font-size: var(--text-section);
  max-width: 14ch;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.hm-made a,
.hm-footer-links a {
  color: var(--color-paper);
  font-weight: 600;
  text-decoration-color: var(--color-on-ink-muted);
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}

.hm-made a:hover,
.hm-footer-links a:hover {
  text-decoration-color: var(--color-paper);
}

.hm-small {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-on-ink-muted);
}

.hm-footer-links {
  grid-column: span 3;
}

.hm-footer-links:first-of-type {
  grid-column: 7 / span 3;
}

.hm-footer-links .hm-small {
  margin: 0 0 var(--space-sm);
}

.hm-footer-links ul {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-footer-links li a {
  font-weight: 400;
}

/* — Bars from the layout ———————————————————————————— */
.hm-flash,
.hm-impersonating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--gutter);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
}

.hm-impersonating form {
  margin: 0;
}

/* The head's one action is white on the dark, as in the hero. */
.hm-head .hm-button-primary {
  border-color: var(--color-paper);
  background: var(--color-paper);
  color: var(--color-ink);
}

.hm-head .hm-button-primary:hover {
  background: var(--color-paper-3);
}

/* A head with the product drawn beside the words. */
.hm-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap-columns);
  align-items: center;
}

.hm-head-split h1 {
  font-size: clamp(2.5rem, 3vw + 1.5rem, 4.5rem);
}

/* A drawing of the product: a sample, light on any ground. */
.hm-scene {
  min-width: 0;
  color: var(--color-ink);
}

.hm-split-flip > :first-child {
  order: 2;
}

.hm-section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}

.hm-section-head-row .hm-link {
  margin-top: 0;
}

/* Cards: the whole card is the link, its picture first when it has one. */
.hm-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-columns);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-card {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  height: 100%;
  padding: var(--space-sm) var(--space-sm) var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  color: var(--color-ink);
  text-decoration: none;
  transition: transform var(--dur-short) var(--ease-out);
}

.hm-section:not(.hm-section-tint) .hm-card {
  background: var(--color-paper-2);
}

.hm-card:hover {
  transform: translateY(-2px);
}

.hm-card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.hm-card-photo {
  width: 100%;
  height: auto;
  margin-bottom: var(--space-sm);
  border-radius: var(--space-xs);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hm-card-kicker,
.hm-card-title,
.hm-card-line {
  padding-inline: var(--space-sm);
}

.hm-card-kicker {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.hm-card-title {
  font-size: var(--text-title);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.hm-card-line {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-ink-2);
}

.hm-cards-text .hm-card {
  padding-top: var(--space-lg);
}

/* Facts in three columns: a head and a line each. */
.hm-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-columns);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-facts li {
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-ink);
}

.hm-facts p {
  margin-top: var(--space-sm);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-ink-2);
}

/* Short items in a row that wraps. */
.hm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-tags li {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  font-size: var(--text-md);
}

/* — Forms: a label over each field, the button the field's width ————— */
.hm-form {
  display: grid;
  gap: var(--space-xs);
}

.hm-form label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.hm-form input:not([type="hidden"]) {
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 10px;
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.hm-form input:not([type="hidden"]):hover {
  border-color: var(--color-muted);
}

.hm-form input:not([type="hidden"]):focus-visible {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.hm-form .hm-button {
  width: 100%;
  margin-top: var(--space-sm);
}

.hm-error {
  padding: var(--space-sm) var(--space-md);
  border-radius: 10px;
  background: color-mix(in oklch, var(--color-error) 10%, var(--color-paper));
  color: var(--color-error);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* A link in the line under the head's action, white on the dark. */
.hm-head .hm-terms a {
  color: var(--color-paper);
}

/* A head that is the whole page, such as the 404. */
.hm-head-tall {
  min-height: 60svh;
}

/* — Prose: a page of text, such as support and the legal pages ———————
   The page's own markup stays: sections with an h2, paragraphs, lists,
   a notice, the contents and a table. Set at a reading measure. */
.hm-prose {
  max-width: calc(46rem + 2 * var(--gutter));
  padding-block: var(--space-2xl) var(--section-gap-s);
  font-size: var(--text-lg);
  line-height: 1.65;
}

.hm-prose > * + *,
.hm-prose section > * + * {
  margin-top: var(--space-md);
}

.hm-prose section {
  margin-top: var(--space-2xl);
  scroll-margin-top: var(--space-lg);
}

.hm-prose h2 {
  max-width: none;
  font-size: var(--text-2xl);
  letter-spacing: -0.03em;
}

.hm-prose h3 {
  font-size: var(--text-lg);
}

.hm-prose ul,
.hm-prose ol {
  display: grid;
  gap: var(--space-xs);
  padding-left: var(--space-lg);
}

.hm-prose a {
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.15em;
}

.hm-prose a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.hm-legal-notice {
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-card);
  background: var(--color-accent-soft);
  color: var(--color-ink);
}

.hm-legal-notice h2 {
  font-size: var(--text-xl);
}

.hm-legal-notice p {
  margin-top: var(--space-sm);
  font-size: var(--text-md);
}

.hm-legal-contents {
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
}

.hm-legal-contents ol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs) var(--gap-columns);
  margin: 0;
  font-size: var(--text-md);
}

.hm-legal-caps {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.6;
}

.hm-legal-table {
  overflow-x: auto;
}

.hm-legal-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.hm-legal-table th,
.hm-legal-table td {
  padding: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}

.hm-legal-operator {
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-md);
  color: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
  .hm-card {
    transition: none;
  }

  .hm-card:hover {
    transform: none;
  }
}

/* — Smaller screens ——————————————————————————————— */
@media (max-width: 60rem) {
  .hm-questions-grid,
  .hm-split,
  .hm-head-grid,
  .hm-cards,
  .hm-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-split-flip > :first-child {
    order: 0;
  }

  .hm-letter,
  .hm-footer-links,
  .hm-footer-links:first-of-type {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40rem) {
  .hm-nav-links {
    gap: var(--space-xs);
  }

  .hm-nav-links a[href$="/pricing"] {
    display: none;
  }

  .hm-actions,
  .hm-actions .hm-button {
    width: 100%;
  }
}