@import url("/assets/tokens.css");
@import url("/assets/reset.css");
@import url("/assets/typography.css");
@import url("/assets/button.css");
@import url("/assets/badge.css");

/* Inter — variable, self-hosted. Identical build to the platform. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Inter-roman.var.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/Inter-italic.var.woff2") format("woff2-variations");
}

html {
  color-scheme: dark;
  scroll-padding-top: calc(var(--aui-height-navbar) + env(safe-area-inset-top));
}

html[data-theme="light"] {
  color-scheme: light;
}

:focus-visible {
  outline: var(--aui-border-width-thick) solid var(--aui-color-border-focus);
  outline-offset: var(--aui-space-sm);
}

.aui-container {
  width: min(100%, var(--aui-content-max-width));
  margin-inline: auto;
  padding-inline: var(--aui-page-gutter);
}

/* Reading column — one measure shared by every prose surface (blog post,
 * legal doc, FAQ, final CTA) so the title, meta, body, and questions share the
 * same left edge and sit centered in the viewport. Capped at 44rem so the
 * article text lands at ~70 characters per line — the sustained-reading
 * measure — while mobile stays full width. */
.aui-reading {
  width: min(100%, 44rem);
  margin-inline: auto;
  padding-inline: var(--aui-page-gutter);
}

.aui-skip-link {
  position: fixed;
  top: calc(
    var(--aui-height-navbar) + env(safe-area-inset-top) + var(--aui-space-md)
  );
  left: var(--aui-page-gutter);
  z-index: var(--aui-z-alert);
  transform: translateY(
    calc(
      -100% - var(--aui-height-navbar) - env(safe-area-inset-top) -
        var(--aui-space-xl)
    )
  );
  border: var(--aui-border-width) solid var(--aui-color-border-strong);
  background: var(--aui-color-bg-app);
  color: var(--aui-color-text-primary);
  padding: var(--aui-space-md) var(--aui-space-lg);
  transition: transform var(--aui-transition-fast);
}

.aui-skip-link:focus {
  transform: translateY(0);
}

/* Navbar — fixed to the viewport on every route. Replacing the translucent
 * rendered background plus backdrop filtering avoids their likely scroll-time
 * paint/compositor instability and keeps the bar paint-stable. */
.aui-navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--aui-z-sticky);
  background: var(--aui-color-bg-app);
}

/* Full-bleed brand-mark box: the logo hugs the true top-left corner and the
 * actions the top-right, inset only by a tight edge gutter (space-md above,
 * space-lg beside) that grows to clear a device notch (env safe-area). No tall
 * bar, no centered container. */
.aui-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aui-space-lg);
  padding-top: calc(var(--aui-space-md) + env(safe-area-inset-top));
  padding-bottom: var(--aui-space-md);
  padding-left: max(var(--aui-space-lg), env(safe-area-inset-left));
  padding-right: max(var(--aui-space-lg), env(safe-area-inset-right));
}

/* Reserve exactly the fixed bar's block size in the shared application shell.
 * Standalone error documents carry no data-shell attribute and stay unchanged. */
body[data-shell="app"] {
  padding-top: calc(var(--aui-height-navbar) + env(safe-area-inset-top));
}

.aui-navbar__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* Brand mark — same asset and treatment as the platform's floating logo. */
.aui-navbar__logo-img {
  height: var(--aui-space-xl);
  width: auto;
  object-fit: contain;
  display: block;
}

.aui-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--aui-space-lg);
}

/* Footer — flush with the page: same background as the app, no top hairline.
 * One full-bleed row: trust line at the far-left edge, copyright centered,
 * legal/blog links at the far-right edge. One tight row on every page —
 * content pages sit as close to the viewport bottom as the homepage. */
.aui-footer {
  color: var(--aui-color-text-secondary);
  padding-block: var(--aui-space-md);
}

.aui-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--aui-space-sm) var(--aui-space-xl);
  padding-left: max(var(--aui-space-lg), env(safe-area-inset-left));
  /* Reserve the bottom-right corner so the fixed chat-widget launcher never
   * overlaps the footer links; the row's content shifts left of it. */
  padding-right: calc(var(--aui-space-4xl) + var(--aui-space-xl));
}

.aui-footer__trust {
  margin: 0;
  color: var(--aui-color-text-tertiary);
  font-size: var(--aui-font-size-sm);
  font-weight: var(--aui-font-weight-normal);
}

.aui-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aui-space-sm) var(--aui-space-lg);
}

.aui-footer__link {
  color: var(--aui-color-text-tertiary);
  font-size: var(--aui-font-size-sm);
  transition: color var(--aui-transition-fast);
}

.aui-footer__link:hover {
  color: var(--aui-color-text-primary);
}

.aui-footer__copy {
  color: var(--aui-color-text-tertiary);
  font-size: var(--aui-font-size-sm);
  white-space: nowrap;
}

/* The footer's launcher clearance exists for the fixed chat-widget launcher.
 * When no widget host is mounted (widget not configured, or its script not
 * yet initialized), the footer returns to the full-bleed right edge like the
 * navbar above it — no dead reserve on any page. Wins over the clearance
 * rules at any width via specificity. */
body:not(:has([data-aybiza-widget])) .aui-footer__inner {
  padding-right: max(var(--aui-space-lg), env(safe-area-inset-right));
  padding-bottom: 0;
}

/* Content pages own their own vertical rhythm through the section/hero/blog
 * blocks below, so the page wrapper adds no block padding of its own (the
 * funnel and error pages set their own; see their rules). */
.aui-page {
  padding-block: 0;
}

.aui-error-page {
  max-width: var(--aui-width-modal-md);
  padding-block: var(--aui-space-4xl);
}

.aui-error-page h1 {
  margin: 0 0 var(--aui-space-xl);
  font-size: var(--aui-font-size-3xl);
  line-height: var(--aui-line-height-tight);
}

.aui-error-page p {
  margin: 0 0 var(--aui-space-xl);
  color: var(--aui-color-text-secondary);
}

/* ----------------------------------------------------------------------
 * One-page funnel — strict non-scroll 100svh shell, scoped to "/" only.
 * The root shell (html[data-funnel] > body[data-funnel]) becomes a fixed
 * 100svh shell: fixed navbar / main.aui-page (flex:1, centered) / footer.
 * Blog, legal, and error pages never receive these classes, so their
 * .aui-page keeps the normal scrolling flow. Vertical safe-area insets are
 * consumed on the shell; horizontal safe-area is owned by the edge-anchored
 * navbar/footer so a notch never double-insets. Type is fluid (clamp) with
 * capped maxima and condenses on short viewports so the lock holds with no
 * scroll escape hatch.
 * --------------------------------------------------------------------*/

html[data-funnel] {
  height: 100svh;
  overflow: clip;
  scrollbar-gutter: auto;
}

html[data-funnel] body[data-funnel] {
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 0;
  margin: 0;
  overflow: clip;
  overscroll-behavior: none;
  padding: calc(var(--aui-height-navbar) + env(safe-area-inset-top)) 0
    env(safe-area-inset-bottom);
}

body[data-funnel] > .aui-footer {
  flex: 0 0 auto;
}

/* Main funnel row — absorbs the free space. The LiveView content is wrapped
 * in a [data-phx-main] div; it must stretch to the full page width and become
 * the centering container, otherwise the funnel is centered inside a
 * content-sized wrapper that sits at the left edge. */
body[data-funnel] > .aui-page {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: clip;
  padding-block: var(--aui-space-xl);
}

body[data-funnel] > .aui-page > [data-phx-main] {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aui-funnel {
  display: grid;
  justify-items: center;
  gap: clamp(var(--aui-space-lg), 3vh, var(--aui-space-2xl));
  width: min(100%, var(--aui-content-max-width));
  min-width: 0;
  padding-inline: var(--aui-page-gutter);
  text-align: center;
}

.aui-funnel__title {
  margin: 0;
  max-width: var(--aui-fib-987);
  font-size: clamp(1.5rem, calc(1.125rem + 4svh), 3.4375rem);
  font-weight: var(--aui-font-weight-bold);
  line-height: var(--aui-line-height-tight);
  letter-spacing: var(--aui-letter-spacing-tight);
}

.aui-funnel__subtitle {
  margin: 0;
  max-width: var(--aui-fib-987);
  color: var(--aui-color-text-secondary);
  font-size: clamp(0.9375rem, calc(0.75rem + 1svh), 1.25rem);
  font-weight: var(--aui-font-weight-normal);
  line-height: var(--aui-line-height-snug);
  text-wrap: balance;
}

.aui-funnel__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aui-space-lg);
  justify-content: center;
}

/* Secondary hero CTA that opens the chat widget — a step larger than a plain
 * secondary so "talk to it" reads as a real invitation next to the white
 * primary. Only the emphasized word ("our") is bold, not the whole label. */
.aui-funnel__talk {
  font-size: var(--aui-font-size-md);
  font-weight: var(--aui-font-weight-medium);
}

.aui-funnel__talk strong {
  font-weight: var(--aui-font-weight-bold);
}

.aui-funnel__pricing {
  margin: var(--aui-space-md) 0 0;
  max-width: var(--aui-fib-610);
  color: var(--aui-color-text-tertiary);
  font-size: clamp(0.8125rem, calc(0.6875rem + 0.5svh), 0.9375rem);
  line-height: var(--aui-line-height-snug);
}

/* Mobile: stack the funnel CTAs full-width. */
@media (max-width: 610px) {
  .aui-funnel__ctas {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, var(--aui-fib-377));
  }

  .aui-funnel__ctas .aui-button {
    width: 100%;
  }
}

/* Short viewports (e.g. landscape phones): condense type + spacing and
 * abbreviate the footer to hold the no-scroll lock — no escape hatch. */
@media (max-height: 700px) {
  body[data-funnel] > .aui-page {
    padding-block: var(--aui-space-md);
  }

  .aui-funnel {
    gap: var(--aui-space-md);
  }

  .aui-funnel__title {
    font-size: clamp(1.25rem, calc(1rem + 3svh), 1.75rem);
  }

  .aui-funnel__subtitle {
    font-size: clamp(0.8125rem, calc(0.6875rem + 0.75svh), 1.0625rem);
  }

  body[data-funnel] > .aui-footer {
    padding-block: var(--aui-space-sm);
  }

  body[data-funnel] > .aui-footer .aui-footer__trust {
    display: none;
  }
}

@media (max-height: 540px) {
  body[data-funnel] > .aui-footer .aui-footer__links {
    display: none;
  }

  .aui-funnel {
    gap: var(--aui-space-sm);
  }
}

@media (max-width: 610px) {
  .aui-navbar__inner {
    gap: var(--aui-space-md);
  }

  .aui-navbar__actions {
    gap: var(--aui-space-md);
  }

  /* Footer stacks to a centered column so every group fits the width. The
   * right reserve is dropped (content is centered) and clearance moves to the
   * bottom so the fixed launcher sits below the stacked links, not over them. */
  .aui-footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--aui-space-md);
    padding-right: max(var(--aui-space-lg), env(safe-area-inset-right));
    padding-bottom: var(--aui-space-3xl);
  }

  .aui-footer__links {
    justify-content: center;
  }
}

/* ----------------------------------------------------------------------
 * Shared content primitives — used by blog and legal pages.
 * Built only from existing tokens.
 * --------------------------------------------------------------------*/

.aui-section {
  padding-block: var(--aui-space-4xl);
}

.aui-section__header {
  display: grid;
  gap: var(--aui-space-lg);
  max-width: var(--aui-fib-987);
  margin-bottom: var(--aui-space-3xl);
}

.aui-section__heading {
  margin: 0;
  font-size: var(--aui-font-size-3xl);
  font-weight: var(--aui-font-weight-bold);
  line-height: var(--aui-line-height-tight);
}

/* --- Hero (shared with blog index) --- */

.aui-hero {
  padding-block: var(--aui-space-4xl) var(--aui-space-3xl);
}

.aui-hero__content {
  display: grid;
  gap: var(--aui-space-xl);
  max-width: var(--aui-fib-987);
  margin-inline: auto;
  text-align: center;
}

.aui-hero__title {
  margin: 0;
  font-size: var(--aui-font-size-4xl);
  font-weight: var(--aui-font-weight-bold);
  line-height: var(--aui-line-height-tight);
}

.aui-hero__body {
  display: grid;
  gap: var(--aui-space-md);
  margin: 0 auto;
  max-width: var(--aui-fib-610);
  color: var(--aui-color-text-secondary);
  font-size: var(--aui-font-size-lg);
  line-height: var(--aui-line-height);
}

.aui-hero__body p {
  margin: 0;
}

@media (max-width: 610px) {
  .aui-hero__title {
    font-size: var(--aui-font-size-3xl);
  }
}

/* --- FAQ accordion (shared with blog post) --- */

.aui-faq {
  padding-block: var(--aui-space-4xl);
}

.aui-faq__heading {
  margin: 0 0 var(--aui-space-2xl);
  font-size: var(--aui-font-size-3xl);
  font-weight: var(--aui-font-weight-bold);
  line-height: var(--aui-line-height-tight);
}

.aui-faq__list {
  display: grid;
  gap: 0;
  border-bottom: var(--aui-border-width) solid var(--aui-color-border-default);
}

.aui-faq__item {
  border-top: var(--aui-border-width) solid var(--aui-color-border-default);
}

.aui-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aui-space-lg);
  width: 100%;
  min-height: var(--aui-fib-55);
  padding: var(--aui-space-lg) var(--aui-space-xl);
  border: 0;
  background: transparent;
  color: var(--aui-color-text-primary);
  cursor: pointer;
  font-size: var(--aui-font-size-lg);
  font-weight: var(--aui-font-weight-semibold);
  text-align: left;
}

.aui-faq__question-text {
  flex: 1;
  min-width: 0;
}

.aui-faq__indicator {
  display: inline-block;
  font-size: var(--aui-font-size-xl);
  line-height: 1;
  transition: transform var(--aui-transition-fast);
}

.aui-faq__answer {
  padding: 0 var(--aui-space-xl) var(--aui-space-xl);
  color: var(--aui-color-text-secondary);
  font-size: var(--aui-font-size-prose);
  line-height: var(--aui-line-height-prose);
}

.aui-faq__answer p {
  margin: 0;
}

/* --- Final CTA (shared with blog post) --- */

.aui-final-cta {
  border-top: var(--aui-border-width) solid var(--aui-color-border-default);
  text-align: center;
}

.aui-final-cta .aui-section__header {
  margin-inline: auto;
  text-align: center;
}

.aui-final-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aui-space-lg);
  justify-content: center;
}

@media (max-width: 610px) {
  .aui-final-cta__buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .aui-final-cta__buttons .aui-button {
    width: 100%;
  }
}

/* ----------------------------------------------------------------------
 * Blog index + post page. Card grid + reading column. Locked tokens only.
 * Cards match the platform card primitive: transparent, borderless —
 * spacing and typography only, never nested boxes.
 * --------------------------------------------------------------------*/

.aui-blog {
  padding-block: var(--aui-space-3xl) var(--aui-space-4xl);
}

.aui-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--aui-space-2xl);
}

.aui-blog-card {
  background: transparent;
  transition: background var(--aui-transition-fast);
}

.aui-blog-card:hover {
  background: var(--aui-color-bg-subtle);
}

.aui-blog-card__link {
  display: grid;
  gap: var(--aui-space-md);
  height: 100%;
  padding: var(--aui-space-2xl);
  color: inherit;
}

.aui-blog-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aui-space-md);
}

.aui-blog-card__date {
  color: var(--aui-color-text-tertiary);
  font-size: var(--aui-font-size-sm);
}

.aui-blog-card__title {
  margin: 0;
  color: var(--aui-color-text-primary);
  font-size: var(--aui-font-size-xl);
  font-weight: var(--aui-font-weight-semibold);
  line-height: var(--aui-line-height-tight);
}

.aui-blog-card__excerpt {
  margin: 0;
  color: var(--aui-color-text-secondary);
  font-size: var(--aui-font-size-md);
  line-height: var(--aui-line-height);
}

.aui-blog-post {
  padding-block: var(--aui-space-2xl) var(--aui-space-3xl);
}

.aui-blog-post__header {
  margin-bottom: var(--aui-space-3xl);
}

.aui-blog-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aui-space-lg);
  margin-bottom: var(--aui-space-lg);
  color: var(--aui-color-text-secondary);
  font-size: var(--aui-font-size-sm);
}

.aui-blog-post__date {
  color: var(--aui-color-text-tertiary);
}

.aui-blog-post__byline {
  color: var(--aui-color-text-secondary);
}

.aui-blog-post__title {
  margin: 0 0 var(--aui-space-lg);
  font-size: var(--aui-font-size-4xl);
  font-weight: var(--aui-font-weight-bold);
  line-height: var(--aui-line-height-tight);
}

.aui-blog-post__excerpt {
  margin: 0;
  color: var(--aui-color-text-secondary);
  font-size: var(--aui-font-size-lg);
  line-height: var(--aui-line-height);
}

.aui-blog-body {
  color: var(--aui-color-text-primary);
  font-size: var(--aui-font-size-prose);
  line-height: var(--aui-line-height-prose);
}

.aui-blog-body h2 {
  margin: var(--aui-space-3xl) 0 var(--aui-space-lg);
  font-size: var(--aui-font-size-3xl);
  font-weight: var(--aui-font-weight-bold);
  line-height: var(--aui-line-height-tight);
}

.aui-blog-body h3 {
  margin: var(--aui-space-2xl) 0 var(--aui-space-md);
  font-size: var(--aui-font-size-xl);
  font-weight: var(--aui-font-weight-semibold);
  line-height: var(--aui-line-height-tight);
}

.aui-blog-body p {
  margin: 0 0 var(--aui-space-lg);
  color: var(--aui-color-text-secondary);
}

.aui-blog-body ul,
.aui-blog-body ol {
  margin: 0 0 var(--aui-space-lg);
  padding-left: var(--aui-space-2xl);
  color: var(--aui-color-text-secondary);
}

.aui-blog-body ul {
  list-style: disc;
}

.aui-blog-body ol {
  list-style: decimal;
}

.aui-blog-body li {
  margin-bottom: var(--aui-space-sm);
}

.aui-blog-body strong {
  color: var(--aui-color-text-primary);
  font-weight: var(--aui-font-weight-semibold);
}

.aui-blog-body a {
  color: var(--aui-color-text-primary);
  border-bottom: var(--aui-border-width) solid var(--aui-color-brand-primary);
}

.aui-blog-body a:hover {
  border-bottom-color: var(--aui-color-brand-primary-hover);
}

/* --- Prose tables (rate card at /pricing, sub-processor list at /dpa,
 * fee schedule at /terms) ---
 * The renderer emits a bare <table> with no wrapper element, so these rules
 * target the element directly and follow the same rhythm as the surrounding
 * paragraph and list styles: hairline row separators, primary text for the
 * header row, secondary for the body. */
.aui-blog-body table {
  width: 100%;
  margin: 0 0 var(--aui-space-lg);
  border-collapse: collapse;
  text-align: left;
}

.aui-blog-body th {
  padding: var(--aui-space-md) var(--aui-space-lg) var(--aui-space-md) 0;
  border-bottom: var(--aui-border-width) solid var(--aui-color-border-strong);
  color: var(--aui-color-text-primary);
  font-weight: var(--aui-font-weight-semibold);
  vertical-align: bottom;
}

.aui-blog-body td {
  padding: var(--aui-space-md) var(--aui-space-lg) var(--aui-space-md) 0;
  border-bottom: var(--aui-border-width) solid var(--aui-color-border-default);
  color: var(--aui-color-text-secondary);
  vertical-align: top;
}

/* Last column carries no trailing gutter, so the right edge lines up with the
 * reading column rather than floating short of it. */
.aui-blog-body th:last-child,
.aui-blog-body td:last-child {
  padding-right: 0;
}

@media (max-width: 987px) {
  .aui-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 610px) {
  .aui-blog-grid {
    grid-template-columns: 1fr;
  }

  /* Narrow viewports: let a wide rate-card row scroll sideways instead of
   * forcing the whole page wider. Text still wraps inside each cell. */
  .aui-blog-body table {
    display: block;
    overflow-x: auto;
  }

  .aui-blog-post__title {
    font-size: var(--aui-font-size-3xl);
  }
}

/* --- FAQ accordion: native <details>/<summary> disclosure ---
 * The accordion is a native <details> element toggled by the browser with no
 * JavaScript. These rules strip the default disclosure triangle from the
 * <summary> and rotate the "+" indicator into an "×" when the item is open,
 * matching the prior aria-expanded styling. */
summary.aui-faq__question {
  list-style: none;
}

summary.aui-faq__question::-webkit-details-marker {
  display: none;
}

summary.aui-faq__question::marker {
  content: "";
}

.aui-faq__item[open] > summary .aui-faq__indicator {
  transform: rotate(45deg);
}