/* =================================================================
   Horizline public site: layout and the public building blocks
   (header, footer, sections, pricing, FAQ, help, guides, legal).
   Tokens only; components come from components.css.
   ================================================================= */

/* ---- Container and grid ----------------------------------------- */
.hz-container {
  width: 100%;
  max-width: calc(var(--hz-container) + var(--hz-page-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--hz-page-pad);
}
.hz-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hz-gutter); }
.hz-grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1024px) {
  .hz-span-4 { grid-column: span 4; }
  .hz-span-5 { grid-column: span 5; }
  .hz-span-6 { grid-column: span 6; }
  .hz-span-7 { grid-column: span 7; }
  .hz-span-8 { grid-column: span 8; }
  .hz-grid > .hz-span-3 { grid-column: span 3; }
  .hz-grid > .hz-span-4 { grid-column: span 4; }
  .hz-grid > .hz-span-5 { grid-column: span 5; }
  .hz-grid > .hz-span-6 { grid-column: span 6; }
  .hz-grid > .hz-span-7 { grid-column: span 7; }
  .hz-grid > .hz-span-8 { grid-column: span 8; }
  .hz-grid > .hz-span-9 { grid-column: span 9; }
  .hz-grid > .hz-start-6 { grid-column: 6 / span 7; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hz-grid > .hz-md-6 { grid-column: span 6; }
}

/* ---- Header ------------------------------------------------------
   Opaque, one height, never hides; the sheet replaces the nav on
   phones. */
.hz-header {
  position: sticky; top: 0; z-index: var(--hz-z-header);
  height: var(--hz-header-h);
  border-bottom: 1px solid var(--hz-border);
  background: var(--hz-surface);
}
.hz-header__inner { display: flex; align-items: center; gap: var(--hz-space-6); height: 100%; }
.hz-header__brand { display: inline-flex; align-items: center; flex: none; }
.hz-header__brand img { width: auto; height: var(--hz-mark-h); }
.hz-header__nav { display: flex; align-items: center; gap: var(--hz-space-5); }
.hz-header__nav .hz-nav-link { font: 500 var(--hz-type-ui) var(--hz-font-body); }
.hz-header__actions { display: flex; align-items: center; gap: var(--hz-space-2); margin-left: auto; }
.hz-header__menu { display: none; margin-left: auto; }
@media (max-width: 767px) {
  .hz-header__nav, .hz-header__actions { display: none; }
  .hz-header__menu { display: inline-flex; }
}

.hz-sheet {
  position: fixed; inset: 0; z-index: var(--hz-z-sheet);
  display: flex; flex-direction: column; gap: var(--hz-space-5);
  padding: 0 var(--hz-page-pad) var(--hz-space-5);
  overflow-y: auto;
  background: var(--hz-surface);
  animation: hz-fade var(--hz-dur-base) var(--hz-ease);
}
.hz-sheet__head { display: flex; align-items: center; justify-content: space-between; height: var(--hz-header-h); border-bottom: 1px solid var(--hz-border); }
.hz-sheet__head .hz-header__brand img { height: var(--hz-mark-h); }
.hz-sheet__nav { display: grid; }
.hz-sheet__nav a {
  display: flex; align-items: center; min-height: var(--hz-control-lg);
  border-bottom: 1px solid var(--hz-border);
  color: var(--hz-text); font: 500 var(--hz-type-h4) var(--hz-font-body); text-decoration: none;
}
.hz-sheet__nav a:hover, .hz-sheet__nav a[aria-current] { color: var(--hz-accent); }
@media (min-width: 768px) { .hz-sheet { display: none !important; } }

/* ---- Page frame --------------------------------------------------
   A short page (not found, a short guide) keeps its footer at the
   bottom of the window rather than ending above it. */
body:has(> .hz-footer) { display: flex; flex-direction: column; min-height: 100dvh; }
body:has(> .hz-footer) > main { flex: 1 0 auto; }

/* ---- Footer ------------------------------------------------------ */
.hz-footer { padding: var(--hz-space-8) 0 var(--hz-space-6); background: var(--hz-night); color: var(--hz-on-night-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); }
.hz-footer__grid { display: grid; gap: var(--hz-space-6) var(--hz-gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hz-footer__brand { grid-column: 1 / -1; display: grid; justify-items: start; align-content: start; gap: var(--hz-space-3); }
.hz-footer__brand img { height: var(--hz-mark-h); width: auto; }
.hz-footer__title { margin-bottom: var(--hz-space-3); color: var(--hz-on-night); font: 600 var(--hz-type-ui) var(--hz-font-body); letter-spacing: 0; }
.hz-footer ul { display: grid; gap: var(--hz-space-2); padding: 0; list-style: none; }
.hz-footer a { color: var(--hz-on-night-muted); text-decoration: none; }
.hz-footer a:hover { color: var(--hz-on-night); text-decoration: underline; text-underline-offset: var(--hz-underline-offset); }
.hz-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--hz-space-2) var(--hz-space-5);
  margin-top: var(--hz-space-7); padding-top: var(--hz-space-5); border-top: 1px solid var(--hz-night-border);
}
@media (min-width: 1024px) {
  .hz-footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hz-footer__brand { grid-column: span 4; }
  .hz-footer__col { grid-column: span 2; }
}

/* ---- Sections ---------------------------------------------------- */
.hz-section { padding: var(--hz-section) 0; }
/* Straight after a page head, which already gives the space above. */
.hz-section--flush { padding-top: 0; }
.hz-section--surface { background: var(--hz-surface); border-top: 1px solid var(--hz-border); border-bottom: 1px solid var(--hz-border); }
.hz-section + .hz-section--surface, .hz-section--surface + .hz-section { border-top: 0; }
.hz-section__head { display: grid; gap: var(--hz-space-4); max-width: var(--hz-measure); margin-bottom: var(--hz-space-7); }
.hz-section__head .hz-lead { max-width: var(--hz-measure); }

/* ---- Home: hero -------------------------------------------------- */
.hz-hero { padding: var(--hz-space-8) 0 var(--hz-section); }
.hz-hero__copy { display: grid; gap: var(--hz-space-5); justify-items: start; max-width: var(--hz-measure); }
.hz-hero__shot { margin-top: var(--hz-space-7); }
@media (max-width: 767px) { .hz-hero { padding-top: var(--hz-space-7); } .hz-hero__shot { margin-top: var(--hz-space-6); } }
.hz-hero__copy h1 { font: 600 var(--hz-type-display) var(--hz-font-display); letter-spacing: var(--hz-tracking-display); }
.hz-hero__copy .hz-lead { color: var(--hz-text-muted); }
.hz-actions { display: flex; flex-wrap: wrap; gap: var(--hz-space-3); }
.hz-terms { max-width: var(--hz-measure); color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); }

/* ---- Home: how a job moves ---------------------------------------
   A numbered list: rows on phones and tablets, five columns on a
   desktop, each under a 2px rule. */
.hz-steps { display: grid; padding: 0; list-style: none; }
.hz-step { display: grid; grid-template-columns: var(--hz-space-6) minmax(0, 1fr); column-gap: var(--hz-space-4); row-gap: var(--hz-space-2); align-content: start; padding: var(--hz-space-5) 0; border-top: 2px solid var(--hz-border); }
.hz-step__n { grid-row: span 2; color: var(--hz-accent); font: 600 var(--hz-type-h4) var(--hz-font-display); font-variant-numeric: tabular-nums; }
.hz-step__title { font: 600 var(--hz-type-h4) var(--hz-font-display); letter-spacing: 0; }
.hz-step p { grid-column: 2; color: var(--hz-text-muted); max-width: var(--hz-measure); }
@media (min-width: 1024px) {
  .hz-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--hz-gutter); }
  .hz-step { grid-template-columns: minmax(0, 1fr); padding-top: var(--hz-space-4); }
  .hz-step__n { grid-row: auto; }
  .hz-step p { grid-column: auto; }
}

/* ---- Feature groups ---------------------------------------------- */
.hz-features { display: grid; gap: var(--hz-space-6) var(--hz-gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--hz-col)), 1fr)); }
.hz-feature { display: grid; gap: var(--hz-space-2); align-content: start; padding-top: var(--hz-space-5); border-top: 1px solid var(--hz-border); }
.hz-feature p { color: var(--hz-text-muted); }
.hz-feature .hz-guide-link { justify-self: start; margin-top: var(--hz-space-2); font: 500 var(--hz-type-ui) var(--hz-font-body); }

.hz-guide-link { display: inline-flex; align-items: center; gap: var(--hz-space-1); color: var(--hz-accent); text-decoration: none; }
.hz-guide-link:hover { text-decoration: underline; text-underline-offset: var(--hz-underline-offset); }
.hz-guide-link .hz-icon { width: var(--hz-icon-sm); height: var(--hz-icon-sm); }
/* Links that stand alone (not inside a sentence) take a finger's 44px. */
@media (pointer: coarse) {
  .hz-guide-link, .hz-header__brand, .hz-auth__brand { min-height: var(--hz-touch); }
  .hz-footer__brand > a { display: inline-flex; align-items: center; min-height: var(--hz-touch); }
}

/* ---- Split sections and the phone figures ------------------------ */
.hz-split { align-items: center; row-gap: var(--hz-space-6); }
.hz-split__text { display: grid; gap: var(--hz-space-4); align-content: start; max-width: var(--hz-measure); }
.hz-split__text p:not(.hz-lead) { color: var(--hz-text-muted); }
.hz-phones { display: grid; grid-template-columns: repeat(2, minmax(0, var(--hz-phone-figure))); gap: var(--hz-gutter); justify-content: start; }
.hz-phone { width: 100%; }
.hz-section__more { margin-top: var(--hz-space-6); }

/* ---- Works with -------------------------------------------------- */
.hz-integrations { display: grid; gap: var(--hz-space-4); padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--hz-col-sm)), 1fr)); }
.hz-integration { display: grid; align-content: start; gap: var(--hz-space-1); padding: var(--hz-space-5); border: 1px solid var(--hz-border); border-radius: var(--hz-radius); background: var(--hz-surface); }
.hz-integration strong { font: 600 var(--hz-type-body) var(--hz-font-body); }
.hz-integration span { color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); }

/* ---- Pricing ----------------------------------------------------- */
.hz-plans { display: grid; gap: var(--hz-gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .hz-plans { grid-template-columns: minmax(0, 1fr); } }
/* Each card is five rows (name, who it is for, price, list, actions;
   four on the home page's summary, which has no list) taken from the
   plans grid, so side by side the two cards' prices and buttons line
   up whatever their text wraps to. */
.hz-plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: var(--hz-space-4); padding: var(--hz-space-6); border: 1px solid var(--hz-border); border-radius: var(--hz-radius); background: var(--hz-surface); }
@media (max-width: 767px) { .hz-plan { padding: var(--hz-space-5); } }
.hz-plan--premium { border-color: var(--hz-night); }
.hz-plan__name { font: 600 var(--hz-type-h3) var(--hz-font-display); }
.hz-plan__for { color: var(--hz-text-muted); }
.hz-plan--summary { grid-row: span 4; }
.hz-plan__cost { display: grid; align-content: start; gap: var(--hz-space-1); }
.hz-plan__price { display: flex; align-items: baseline; gap: var(--hz-space-2); font-variant-numeric: tabular-nums; }
.hz-plan__amount { font: 600 var(--hz-type-h1) var(--hz-font-display); letter-spacing: var(--hz-tracking-display); }
.hz-plan__per { color: var(--hz-text-muted); font: 400 var(--hz-type-body) var(--hz-font-body); }
.hz-plan__alt { color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); font-variant-numeric: tabular-nums; }
.hz-plan__actions { display: grid; align-self: end; gap: var(--hz-space-3); }
.hz-plan .hz-checklist { padding-top: var(--hz-space-4); border-top: 1px solid var(--hz-border); }
.hz-billing { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hz-space-3); margin-bottom: var(--hz-space-6); }
.hz-billing__note { color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); }
.hz-promo { margin-bottom: var(--hz-space-6); }
.promo-over .promo-only { display: none !important; }
.hz-compare td, .hz-compare tbody th { height: var(--hz-row); }
.hz-compare td { text-align: left; font-variant-numeric: tabular-nums; }
.hz-compare .hz-icon { width: var(--hz-icon-sm); height: var(--hz-icon-sm); color: var(--hz-accent); }
.hz-compare .hz-compare__no { color: var(--hz-text-muted); }

/* ---- Who builds it ----------------------------------------------- */
.hz-founder { align-items: start; row-gap: var(--hz-space-6); }
.hz-founder__text { display: grid; gap: var(--hz-space-4); align-content: start; max-width: var(--hz-measure); }
.hz-founder__text > p:not(.hz-lead) { color: var(--hz-text-muted); }
.hz-founder__photo { display: grid; gap: var(--hz-space-2); justify-items: start; }
.hz-founder__photo img { width: 100%; max-width: var(--hz-photo); border: 1px solid var(--hz-border); border-radius: var(--hz-radius); }
@media (min-width: 1024px) { .hz-founder__photo { justify-items: end; } }
.hz-facts { display: grid; gap: var(--hz-space-3); margin-top: var(--hz-space-5); }
.hz-facts div { display: grid; grid-template-columns: minmax(0, var(--hz-col-xs)) minmax(0, 1fr); gap: var(--hz-space-4); padding-bottom: var(--hz-space-3); border-bottom: 1px solid var(--hz-border); }
.hz-facts dt { color: var(--hz-text-muted); font: 500 var(--hz-type-ui) var(--hz-font-body); }
.hz-facts dd { margin: 0; }

/* ---- FAQ --------------------------------------------------------- */
.hz-faq { max-width: var(--hz-form-max); }

/* ---- Final CTA band: the one centered block ---------------------- */
.hz-cta { padding: var(--hz-space-9) 0; background: var(--hz-night); color: var(--hz-on-night); text-align: center; }
.hz-cta__inner { display: grid; justify-items: center; gap: var(--hz-space-5); }
.hz-cta h2 { color: var(--hz-on-night); max-width: var(--hz-measure); }
.hz-cta p { max-width: var(--hz-measure); color: var(--hz-on-night-muted); }
@media (max-width: 767px) { .hz-cta { padding: var(--hz-space-8) 0; } }

/* ---- Page heads (product, pricing, help, legal) ------------------ */
.hz-pagehead { padding: var(--hz-space-8) 0 var(--hz-space-7); }
.hz-pagehead__inner { display: grid; gap: var(--hz-space-4); max-width: var(--hz-measure); }
.hz-pagehead .hz-lead { color: var(--hz-text-muted); }
@media (max-width: 767px) { .hz-pagehead { padding: var(--hz-space-7) 0 var(--hz-space-6); } }

/* ---- Product: anchored sections and their nav --------------------
   The section nav sticks below the header with a fixed offset, so
   reaching it moves nothing. */
.hz-tour { align-items: start; padding-bottom: var(--hz-section); }
.hz-toc { display: none; }
@media (min-width: 1024px) {
  .hz-toc { display: block; position: sticky; top: calc(var(--hz-header-h) + var(--hz-space-5)); }
}
.hz-toc__title { margin-bottom: var(--hz-space-3); color: var(--hz-text-muted); font: 500 var(--hz-type-caption) var(--hz-font-body); }
.hz-toc__title--next { margin-top: var(--hz-space-5); }
.hz-toc ol, .hz-toc ul { display: grid; padding: 0; list-style: none; }
.hz-toc a, .hz-doc__contents a {
  display: block; padding: var(--hz-space-1) var(--hz-space-4);
  border-left: 2px solid var(--hz-border);
  color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); text-decoration: none;
}
.hz-toc a:hover, .hz-doc__contents a:hover { color: var(--hz-text); text-decoration: underline; text-underline-offset: var(--hz-underline-offset); }
.hz-toc a[aria-current="true"] { color: var(--hz-accent); border-left-color: var(--hz-accent); }
.hz-tour__section { display: grid; gap: var(--hz-space-5); padding: var(--hz-space-7) 0; border-top: 1px solid var(--hz-border); scroll-margin-top: calc(var(--hz-header-h) + var(--hz-space-4)); }
.hz-tour__section:first-child { padding-top: 0; border-top: 0; }
.hz-tour__section > header { display: grid; gap: var(--hz-space-4); max-width: var(--hz-measure); }
.hz-tour__section .hz-lead { color: var(--hz-text-muted); }
.hz-tour__section .hz-checklist { max-width: var(--hz-measure); }
.hz-tag { justify-self: start; }
.hz-tour__links { display: flex; flex-wrap: wrap; gap: var(--hz-space-2) var(--hz-space-5); font: 500 var(--hz-type-body) var(--hz-font-body); }

/* ---- Help: search, sections, contact ----------------------------- */
.hz-search { position: relative; max-width: var(--hz-form-max); }
.hz-search__status { margin-top: var(--hz-space-2); color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); min-height: var(--hz-space-5); }
.hz-search__results {
  display: grid; margin-top: var(--hz-space-2); padding: var(--hz-space-1); list-style: none;
  border: 1px solid var(--hz-border); border-radius: var(--hz-radius); background: var(--hz-surface); box-shadow: var(--hz-shadow-overlay);
}
.hz-search__hit { display: grid; gap: var(--hz-space-1); padding: var(--hz-space-3); border-radius: var(--hz-radius); color: var(--hz-text); text-decoration: none; }
.hz-search__hit:hover, .hz-search__hit[aria-selected="true"] { background: var(--hz-sunken); color: var(--hz-text); }
.hz-search__title { font: 600 var(--hz-type-ui) var(--hz-font-body); }
.hz-search__summary { color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); }
.hz-search__none { padding: var(--hz-space-3); color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); }

.hz-guides { display: grid; gap: var(--hz-space-7) var(--hz-gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--hz-col-lg)), 1fr)); }
.hz-guides__group { display: grid; gap: var(--hz-space-3); align-content: start; padding-top: var(--hz-space-5); border-top: 1px solid var(--hz-border); scroll-margin-top: calc(var(--hz-header-h) + var(--hz-space-4)); }
.hz-guides__group > p { color: var(--hz-text-muted); }
.hz-guides__group ul { display: grid; gap: var(--hz-space-2); padding: 0; list-style: none; }
.hz-guides__group li a { text-decoration: none; }
.hz-guides__group li a:hover { text-decoration: underline; text-underline-offset: var(--hz-underline-offset); }
.hz-contact { display: grid; gap: var(--hz-space-5); }

/* ---- Guide and legal documents ----------------------------------- */
.hz-doc { padding: var(--hz-space-7) 0 var(--hz-section); }
.hz-doc__crumbs { margin-bottom: var(--hz-space-5); }
.hz-doc__head { display: grid; gap: var(--hz-space-4); max-width: var(--hz-measure); margin-bottom: var(--hz-space-6); }
.hz-doc__meta { color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); }
/* The text on the left at eight columns; on a desktop the contents
   list sits beside it in the last three, and above it on smaller
   screens (it comes first in the page). */
.hz-doc__layout { align-items: start; row-gap: var(--hz-space-6); }
@media (min-width: 1024px) {
  .hz-doc__layout > .hz-doc__body { grid-column: 1 / span 8; grid-row: 1; }
  .hz-doc__layout > .hz-doc__contents { grid-column: 10 / span 3; grid-row: 1; position: sticky; top: calc(var(--hz-header-h) + var(--hz-space-5)); }
}
.hz-doc__contents-title { margin-bottom: var(--hz-space-3); color: var(--hz-text-muted); font: 500 var(--hz-type-caption) var(--hz-font-body); }
.hz-doc__contents ol { display: grid; padding: 0; list-style: none; }
.hz-tagline { display: flex; flex-wrap: wrap; gap: var(--hz-space-2); }
.hz-prose { max-width: var(--hz-measure); }
.hz-prose > * + * { margin-top: var(--hz-space-4); }
.hz-prose > h2 { margin-top: var(--hz-space-7); font: 600 var(--hz-type-h3) var(--hz-font-display); scroll-margin-top: calc(var(--hz-header-h) + var(--hz-space-4)); }
.hz-prose > h3 { margin-top: var(--hz-space-6); font: 600 var(--hz-type-h4) var(--hz-font-display); letter-spacing: 0; }
.hz-prose > h2 + *, .hz-prose > h3 + * { margin-top: var(--hz-space-2); }
.hz-prose > h2 + * { margin-top: var(--hz-space-4); }
.hz-prose ul, .hz-prose ol { display: grid; gap: var(--hz-space-2); padding-left: var(--hz-space-5); }
.hz-prose li > ul, .hz-prose li > ol { margin-top: var(--hz-space-2); }
.hz-prose img { max-width: 100%; border: 1px solid var(--hz-border); border-radius: var(--hz-radius); }
.hz-prose kbd { padding: 0 var(--hz-space-1); border: 1px solid var(--hz-border-strong); border-radius: var(--hz-radius); background: var(--hz-surface); font-size: var(--hz-size-caption); }
.hz-prose blockquote, .hz-note { padding: var(--hz-space-3) var(--hz-space-4); border: 1px solid var(--hz-border); border-left: 2px solid var(--hz-accent); border-radius: var(--hz-radius); background: var(--hz-surface); }
.hz-doc__footer { display: grid; gap: var(--hz-space-6); max-width: var(--hz-measure); margin-top: var(--hz-space-8); }
.hz-related ul { display: grid; gap: var(--hz-space-2); margin-top: var(--hz-space-3); padding: 0; list-style: none; }
.hz-pager { display: grid; gap: var(--hz-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--hz-space-5); border-top: 1px solid var(--hz-border); }
.hz-pager a { display: grid; align-content: start; gap: var(--hz-space-1); padding: var(--hz-space-4); border: 1px solid var(--hz-border); border-radius: var(--hz-radius); background: var(--hz-surface); color: var(--hz-text); text-decoration: none; }
.hz-pager a:hover { border-color: var(--hz-border-strong); color: var(--hz-text); }
.hz-pager a span { color: var(--hz-text-muted); font: 500 var(--hz-type-caption) var(--hz-font-body); }
.hz-pager a strong { color: var(--hz-accent); font: 600 var(--hz-type-ui) var(--hz-font-body); }
.hz-pager__next { grid-column: 2; text-align: right; }
@media (max-width: 479px) { .hz-pager { grid-template-columns: minmax(0, 1fr); } .hz-pager__next { grid-column: auto; } }
.hz-contact-line { padding: var(--hz-space-5); border: 1px solid var(--hz-border); border-radius: var(--hz-radius); background: var(--hz-surface); }

/* ---- Not found --------------------------------------------------- */
.hz-notfound { padding: var(--hz-space-9) 0; }
.hz-notfound__inner { display: grid; gap: var(--hz-space-4); justify-items: start; max-width: var(--hz-measure); }
.hz-notfound p { color: var(--hz-text-muted); }
.hz-notfound__links { display: grid; gap: var(--hz-space-3); padding: 0; list-style: none; font: 500 var(--hz-type-body) var(--hz-font-body); }

/* ---- Sign-in and account pages ------------------------------------
   One column on the canvas: the lockup, the H1, the form in a card, a
   full-width primary button and the secondary links under it. */
.hz-auth { display: grid; grid-template-rows: 1fr auto; gap: var(--hz-space-7); min-height: 100dvh; padding: var(--hz-space-7) var(--hz-page-pad) var(--hz-space-5); }
.hz-auth__main { display: grid; gap: var(--hz-space-5); align-content: start; width: 100%; max-width: var(--hz-auth-w); margin: 0 auto; }
.hz-auth--wide .hz-auth__main { max-width: var(--hz-auth-w-wide); }
.hz-auth__brand { justify-self: start; display: inline-flex; }
.hz-auth__brand img { width: auto; height: var(--hz-mark-h); }
.hz-auth__head { display: grid; gap: var(--hz-space-2); }
.hz-auth__head p { color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); }
.hz-auth__h1 { font: 600 var(--hz-type-h3) var(--hz-font-display); letter-spacing: var(--hz-tracking-display); }
/* The form sits in a card; fields are spaced by the flow rule, so the
   field component keeps its own spacing everywhere. */
.hz-auth__card { display: grid; gap: var(--hz-space-5); }
.hz-auth__form > * + * { margin-top: var(--hz-space-4); }
.hz-auth__form > [type="submit"] { margin-top: var(--hz-space-5); }
.hz-auth__alt { display: grid; gap: var(--hz-space-4); }
.hz-auth__text { color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); }
.hz-auth__summary { font: 400 var(--hz-type-ui) var(--hz-font-body); }
.hz-auth__summary:empty, .hz-auth__text:empty { display: none; }
.hz-auth__summary strong { display: block; }
.hz-auth__choices { display: grid; gap: var(--hz-space-3); }
/* Monthly or yearly: the prices for the other cycle are not shown. */
.hz-cycle:not(.is-annual) [data-cycle="annual"], .hz-cycle.is-annual [data-cycle="monthly"] { display: none; }
.hz-auth__or { display: flex; align-items: center; gap: var(--hz-space-3); color: var(--hz-text-muted); font: 400 var(--hz-type-ui) var(--hz-font-body); }
.hz-auth__or::before, .hz-auth__or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--hz-border); }
.hz-auth__links { display: flex; flex-wrap: wrap; gap: var(--hz-space-2) var(--hz-space-5); font: 400 var(--hz-type-ui) var(--hz-font-body); }
.hz-auth__foot { display: grid; gap: var(--hz-space-1); width: 100%; max-width: var(--hz-auth-w); margin: 0 auto; color: var(--hz-text-muted); font: 400 var(--hz-type-caption) var(--hz-font-body); }
.hz-auth--wide .hz-auth__foot { max-width: var(--hz-auth-w-wide); }
@media (max-width: 479px) { .hz-auth { padding-top: var(--hz-space-6); gap: var(--hz-space-6); } }