/*
 * Public layout (templates/base_public.html): page ground, skip link, header, footer, and the building blocks every
 * public page shares (sections, page heads, cards, prose columns). Colours only through --ds-* tokens; pages on the
 * design system follow the browser's colour scheme. Page-specific styles live in core/css/templates/.
 * Breakpoints match tokens.css: 1279px, 1023px (nav collapses) and 767px.
 */

body.public-body {
  margin: 0;
  background: var(--ds-ground);
  color: var(--ds-text);
  font-family: var(--ds-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

[x-cloak] {
  display: none !important;
}

#main:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   Skip link, header, toasts
   -------------------------------------------------------------------------- */

.public-skip {
  position: absolute;
  top: var(--ds-space-8);
  left: var(--ds-space-8);
  z-index: var(--ds-z-toast);
  padding: var(--ds-space-8) var(--ds-space-16);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-inverse);
  color: var(--ds-on-inverse);
  font-family: var(--ds-font-family);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.public-skip:focus {
  transform: none;
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

.public-top {
  background: var(--ds-ground);
}

/* The audience switch and page filters: the AA-passing muted grey for tabs not selected (the brand grey fails on
   sage) */
.public-top .ds-tab:not([aria-current="page"]),
.public-page .ds-tab:not([aria-current="page"], [aria-pressed="true"]) {
  color: var(--ds-text-muted);
}

.public-toasts {
  background: transparent;
}

/* --------------------------------------------------------------------------
   Footer: an ink band in both schemes
   -------------------------------------------------------------------------- */

.public-footer {
  padding-block: var(--ds-space-64) var(--ds-space-32);
  border-top: 1px solid var(--ds-border-subtle);
  background: var(--ds-ink);
  color: var(--ds-text);
}

.public-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-48) var(--ds-space-32);
}

.public-footer__logo {
  display: inline-flex;
  color: var(--ds-text);
  border-radius: var(--ds-radius-12);
}

.public-footer__logo:focus-visible,
.public-footer__link:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

.public-footer__tagline {
  max-width: 260px;
  margin: var(--ds-space-16) 0 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

.public-footer__heading {
  margin: 0 0 var(--ds-space-16);
  color: var(--ds-accent);
  font-size: var(--ds-type-eyebrow-size);
  line-height: var(--ds-type-eyebrow-leading);
  letter-spacing: var(--ds-type-eyebrow-tracking);
  font-weight: 600;
  text-transform: uppercase;
}

.public-footer__links,
.public-footer__socials {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-footer__link {
  color: var(--ds-text-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  text-decoration: none;
  border-radius: var(--ds-radius-12);
  transition: color var(--ds-motion-hover) ease;
}

.public-footer__link:hover {
  color: var(--ds-text);
}

.public-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-16);
  margin-top: var(--ds-space-48);
  padding-top: var(--ds-space-24);
  border-top: 1px solid var(--ds-border);
}

.public-footer__legal {
  margin: 0;
  color: var(--ds-text-muted);
  font-size: var(--ds-type-caption-size);
  line-height: var(--ds-type-caption-leading);
}

.public-footer__socials {
  flex-direction: row;
  gap: var(--ds-space-24);
}

@media (max-width: 1023px) {
  .public-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .public-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .public-footer {
    padding-block: var(--ds-space-48) var(--ds-space-24);
  }

  .public-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-32) var(--ds-space-16);
  }
}

/* --------------------------------------------------------------------------
   Shared page pieces: sections, page head, cards, prose column
   (the homepage keeps its own home-* versions of the section pieces)
   -------------------------------------------------------------------------- */

.public-page {
  color: var(--ds-text);
}

/* Rendered rich text (.ds-prose) keeps its own rhythm, so the reset leaves it alone */
.public-page
  :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote):where(
    :not(.ds-prose *)
  ) {
  margin: 0;
}

/* Secondary text: the AA-passing muted grey. Declared again on every themed subtree, because a custom property
   holding var() is resolved where it is declared and would otherwise carry the light value into an ink section. */
.public-page,
.public-page [data-theme] {
  --public-muted: var(--ds-text-muted);
}

.public-section {
  padding-block: var(--ds-section-gap);
  background: var(--ds-ground);
  color: var(--ds-text);
}

.public-section--tight {
  padding-block: var(--ds-space-64);
}

.public-section--surface {
  background: var(--ds-surface);
}

.public-section--ink {
  background: var(--ds-ink);
}

.public-hero {
  padding-block: var(--ds-space-64) var(--ds-space-64);
}

.public-hero--center {
  text-align: center;
}

.public-hero--center .public-lead {
  margin-inline: auto;
}

.public-hero--center .public-actions {
  justify-content: center;
}

.public-eyebrow {
  margin: 0 0 var(--ds-space-16);
  color: var(--public-muted);
  font-size: var(--ds-type-eyebrow-size);
  line-height: var(--ds-type-eyebrow-leading);
  letter-spacing: var(--ds-type-eyebrow-tracking);
  font-weight: 600;
  text-transform: uppercase;
}

.public-h1 {
  max-width: 920px;
  color: var(--ds-text);
  font-size: var(--ds-type-display-size);
  line-height: var(--ds-type-display-leading);
  letter-spacing: var(--ds-type-display-tracking);
  font-weight: 600;
}

.public-hero--center .public-h1 {
  margin-inline: auto;
}

.public-h1--compact {
  font-size: var(--ds-type-h2-size);
  line-height: var(--ds-type-h2-leading);
  letter-spacing: var(--ds-type-h2-tracking);
}

.public-h2 {
  color: var(--ds-text);
  font-size: var(--ds-type-h2-size);
  line-height: var(--ds-type-h2-leading);
  letter-spacing: var(--ds-type-h2-tracking);
  font-weight: 600;
}

.public-h3 {
  color: var(--ds-text);
  font-size: var(--ds-type-h3-size);
  line-height: var(--ds-type-h3-leading);
  font-weight: 600;
}

.public-lead {
  max-width: 680px;
  margin-top: var(--ds-space-24);
  color: var(--public-muted);
  font-size: var(--ds-type-body-l-size);
  line-height: var(--ds-type-body-l-leading);
}

.public-muted {
  color: var(--public-muted);
}

.public-section__head {
  max-width: 760px;
  margin-bottom: var(--ds-space-48);
}

.public-section__head--center {
  margin-inline: auto;
  text-align: center;
}

.public-section__head .public-lead {
  margin-top: var(--ds-space-16);
}

.public-section__head--center .public-lead {
  margin-inline: auto;
}

.public-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-16) var(--ds-space-24);
  margin-top: var(--ds-space-32);
}

/* Card grids: 3, 2 or 4 columns that stack on phones */
.public-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-24);
}

.public-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-12);
  padding: var(--ds-space-32);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-24);
  background: var(--ds-surface);
  color: var(--ds-text);
}

.public-section--surface .public-card {
  background: var(--ds-ground);
}

.public-section--ink .public-card {
  border-color: var(--ds-border);
  background: var(--ds-inverse);
}

.public-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-space-48);
  height: var(--ds-space-48);
  border-radius: var(--ds-radius-12);
  background: var(--ds-accent);
  color: var(--ds-on-accent);
  font-weight: 700;
}

.public-card__icon .ds-icon {
  color: var(--ds-on-accent);
  width: 24px;
  height: 24px;
}

.public-card p {
  color: var(--public-muted);
}

/* Check list (icon + text rows) */
.public-checks {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-12);
  padding: 0;
  list-style: none;
}

.public-checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-12);
}

.public-checks .ds-icon {
  flex: none;
  margin-top: 3px;
  padding: 2px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-accent);
  color: var(--ds-on-accent);
}

/* Call to action panel at the foot of a page */
.public-cta {
  padding: var(--ds-space-64) var(--ds-space-48);
  border-radius: var(--ds-radius-24);
  background: var(--ds-ink);
  color: var(--ds-text);
  text-align: center;
}

.public-cta .public-lead {
  margin-inline: auto;
}

.public-cta .public-actions {
  justify-content: center;
}

/* A readable column for long text (legal pages, blog posts) */
.public-reading {
  max-width: 760px;
  margin-inline: auto;
}

/* Rendered rich text on public pages: one step larger than in the app */
.public-reading .ds-prose {
  font-size: var(--ds-type-body-l-size);
  line-height: var(--ds-type-body-l-leading);
}

@media (max-width: 1023px) {
  .public-grid,
  .public-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .public-hero {
    padding-block: var(--ds-space-48);
  }

  .public-grid,
  .public-grid--2,
  .public-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-card {
    padding: var(--ds-space-24);
  }

  .public-cta {
    padding: var(--ds-space-48) var(--ds-space-24);
  }
}

/* --------------------------------------------------------------------------
   Two-column split (copy beside an aside or a list), stats
   -------------------------------------------------------------------------- */

.public-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-48) var(--ds-space-64);
  align-items: start;
}

.public-split--center {
  align-items: center;
}

.public-stat {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-8);
  padding: var(--ds-space-24);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-24);
  background: var(--ds-surface);
}

.public-section--surface .public-stat {
  background: var(--ds-ground);
}

.public-section--ink .public-stat {
  border-color: var(--ds-border);
  background: var(--ds-inverse);
}

/* The figure reads first; in a <dl> the label (dt) comes first in the markup */
.public-stat__value {
  order: -1;
  color: var(--ds-text);
  font-size: var(--ds-type-h2-size);
  line-height: var(--ds-type-h2-leading);
  letter-spacing: var(--ds-type-h2-tracking);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.public-stat__label {
  color: var(--public-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

/* Cross list ("what goes wrong") */
.public-crosses {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-12);
  padding: 0;
  list-style: none;
}

.public-crosses li {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-12);
}

.public-crosses .ds-icon {
  flex: none;
  margin-top: 3px;
  padding: 2px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-status-action-bg);
  color: var(--ds-status-action-text);
}

/* --------------------------------------------------------------------------
   Documents: legal pages and guides (a contents list beside a prose column),
   callouts and plain-text flow diagrams
   -------------------------------------------------------------------------- */

.public-doc {
  display: grid;
  grid-template-columns: 240px minmax(0, 760px);
  gap: var(--ds-space-64);
  justify-content: center;
  align-items: start;
}

.public-doc--single {
  grid-template-columns: minmax(0, 760px);
}

.public-toc {
  position: sticky;
  top: var(--ds-space-24);
  padding: var(--ds-space-24);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-24);
  background: var(--ds-surface);
}

.public-toc__label {
  margin-bottom: var(--ds-space-12);
  color: var(--public-muted);
  font-size: var(--ds-type-eyebrow-size);
  line-height: var(--ds-type-eyebrow-leading);
  letter-spacing: var(--ds-type-eyebrow-tracking);
  font-weight: 600;
  text-transform: uppercase;
}

.public-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  padding: 0;
  list-style: none;
}

.public-toc__list a {
  display: block;
  padding: var(--ds-space-4) var(--ds-space-12);
  border-left: 2px solid transparent;
  color: var(--public-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  text-decoration: none;
}

.public-toc__list a:hover,
.public-toc__list a[aria-current="true"] {
  color: var(--ds-text);
}

.public-toc__list a[aria-current="true"] {
  border-left-color: var(--ds-accent-strong);
  font-weight: 600;
}

.public-toc__list a:focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

.public-doc__meta {
  display: inline-flex;
  margin-bottom: var(--ds-space-24);
  padding: var(--ds-space-4) var(--ds-space-12);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-status-neutral-bg);
  color: var(--ds-status-neutral-text);
  font-size: var(--ds-type-caption-size);
  line-height: var(--ds-type-caption-leading);
  font-weight: 600;
}

.public-doc .ds-prose {
  font-size: var(--ds-type-body-size);
  line-height: var(--ds-type-body-leading);
}

.public-doc .ds-prose > * + h2 {
  margin-top: var(--ds-space-48);
  scroll-margin-top: var(--ds-space-24);
}

.public-doc .ds-prose h2 {
  scroll-margin-top: var(--ds-space-24);
}

.public-doc .ds-prose table:not(.ds-table) {
  display: block;
  overflow-x: auto;
}

.public-callout {
  --public-tone-bg: var(--ds-status-info-bg);
  --public-tone-text: var(--ds-status-info-text);
  padding: var(--ds-space-16) var(--ds-space-24);
  border: 1px solid color-mix(in srgb, var(--public-tone-text) 20%, transparent);
  border-left: 4px solid var(--public-tone-text);
  border-radius: var(--ds-radius-12);
  background: var(--public-tone-bg);
}

.public-callout--warning {
  --public-tone-bg: var(--ds-status-warning-bg);
  --public-tone-text: var(--ds-status-warning-text);
}

.public-callout--danger {
  --public-tone-bg: var(--ds-status-action-bg);
  --public-tone-text: var(--ds-status-action-text);
}

.public-callout__label {
  display: block;
  margin-bottom: var(--ds-space-4);
  color: var(--public-tone-text);
  font-size: var(--ds-type-eyebrow-size);
  line-height: var(--ds-type-eyebrow-leading);
  letter-spacing: var(--ds-type-eyebrow-tracking);
  font-weight: 600;
  text-transform: uppercase;
}

.public-callout > * + * {
  margin-top: var(--ds-space-8);
}

.public-flow {
  max-width: 100%;
  padding: var(--ds-space-24);
  overflow-x: auto;
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface-subtle);
  color: var(--ds-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
  white-space: pre;
}

@media (max-width: 1023px) {
  .public-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-doc {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ds-space-32);
  }

  .public-toc {
    position: static;
  }
}

/* Highlights in tight display headings: the mark's box is taller than the line, so its fill would cover the
   descenders of the line above; fill the middle band only */
.public-page :is(.public-h1, .public-h2) .ds-highlight {
  background: linear-gradient(
    to bottom,
    transparent 14%,
    var(--ds-highlight) 14%,
    var(--ds-highlight) 92%,
    transparent 92%
  );
}

/* --------------------------------------------------------------------------
   Comparison pages (vs Deel, vs Upwork, vs SAFE & FAST): quotes and the lime call to action
   -------------------------------------------------------------------------- */

.public-quote {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-12);
  margin: 0;
  padding: var(--ds-space-24);
  border-left: 4px solid var(--ds-accent);
  border-radius: var(--ds-radius-12);
  background: var(--ds-surface);
}

.public-quote p {
  color: var(--ds-text);
  font-size: var(--ds-type-body-l-size);
  line-height: var(--ds-type-body-l-leading);
}

.public-quote footer {
  color: var(--public-muted);
  font-size: var(--ds-type-small-size);
  font-weight: 600;
}

.public-quotes {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-16);
  margin-top: var(--ds-space-32);
}

.public-cta--accent {
  background: var(--ds-accent);
  color: var(--ds-on-accent);
}

.public-cta--accent :is(.public-h2, .public-lead) {
  color: var(--ds-on-accent);
}

.public-small {
  color: var(--public-muted);
  font-size: var(--ds-type-small-size);
  line-height: var(--ds-type-small-leading);
}

/* A card on ink in both schemes, lime marks for its list */
.public-card--ink,
.public-section--surface .public-card--ink {
  border-color: var(--ds-ink);
  background: var(--ds-ink);
}

.public-card--ink .public-checks .ds-icon {
  background: var(--ds-accent);
}

.public-card :is(.public-checks, .public-crosses) {
  margin-block: var(--ds-space-8);
}