@charset "UTF-8";
html {
  font-size: 16px;
  scroll-padding-block-start: var(--hc-header-height);
}

.powered-by-zendesk {
  display: none;
}

/* The page's content column, and the two numbers the chat drawer's push has to
   reason about (see the pinning rule below and .browse-products further down). */
:root {
  --container-max: 1400px;
  /* Where a centred content column's box starts: the distance from the
     viewport's leading edge to a --container-max block, or 0 once the window
     is narrower than one.

     Viewport-relative on purpose. It could be derived from the container's own
     containing block instead (100% + --chat-drawer-inset), which would be
     exact to the pixel — but that block's width is what the drawer's push
     animates, while --chat-drawer-inset switches in one step, so the two would
     disagree for the length of the transition and the content's leading edge
     would visibly slide and settle on every toggle. Holding it steady is the
     whole point, so it is measured against something the push doesn't move:
     this stays constant through the animation, and the column's width absorbs
     all of it.

     Consequence to know about: on platforms with classic (space-taking)
     scrollbars 100vw includes the scrollbar, so a pushed container's leading
     edge lands ~half a scrollbar width (7-8px) inside the closed-drawer
     position. Overlay-scrollbar platforms (macOS, iOS) are exact. The theme
     already accepts the same approximation in the .browse-products full-bleed
     math below. */
  --container-lead: max(0px, calc((100vw - var(--container-max)) / 2));
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Hold the content column's leading edge where a full-width page puts it — in
   line with the header, which sits outside the drawer's host and so never
   narrows.

   Centring inside the host is what breaks that alignment once the chat drawer
   opens: the host gives up the drawer's width (styles/_chat-drawer.scss), so
   `margin-inline: auto` re-centres every container in what's left and walks its
   leading edge HALF the drawer's width — 220px — away from the header's. Pinning
   the leading margin and zeroing the trailing one hands the whole squeeze to the
   trailing side instead, which is the side the drawer is on. max-width still caps
   the column; when the remaining room exceeds it the over-constrained margin
   rules drop the slack on the trailing side, in RTL as well as LTR, so the column
   stays put rather than re-centring.

   NOT gated on .chat-drawer-pushed, deliberately. With the drawer closed this
   resolves to exactly the centred position it replaces (lead = (100vw - max) / 2,
   width capped at max ⇒ the same box `margin-inline: auto` produces, at every
   width), so applying it unconditionally costs nothing — and it is what keeps the
   toggle smooth. Gating it meant the rule switched off the instant the class was
   removed, while the host's padding was still 240ms from finishing: the column
   re-centred in a page that was still narrow, jumping 220px inward, then slid
   back as the padding animated. Unconditional, the only thing that changes during
   the transition is the `100%` below — so the geometry is a continuous function of
   the animating page width, and nothing jumps in either direction.

   Scoped inside .chat-drawer-host because only containers inside the host are
   narrowed — the header's and the footer's own layouts are outside it and keep
   their full width (and their own centring) either way. */
.chat-drawer-host .container,
.chat-drawer-host .promoted-articles-inner {
  margin-inline: var(--container-lead) 0;
  /* The width has to be stated, not left to the margins. hc-components
     ships a Tailwind `.container` utility carrying `width: 100%` (theme
     rules outrank its @layer max-widths, but nothing here was overriding
     its width), so an auto width would never shrink to make room for the
     leading margin — the column would keep the host's full width and hang
     its trailing edge straight under the drawer. Subtracting the same lead
     the margin adds keeps the trailing edge flush with the page, so the
     column gives up only the width the drawer actually covers.
     max-width still caps it on a very wide window. */
  width: calc(100% - var(--container-lead));
}

.section.knowledge-base {
  padding: 64px 0;
}

.promoted-articles-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 80px 0;
}

.recent-activity-heading {
  font-family: var(--font-sqsp-heading);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 40px;
  color: #fff;
}
@media (min-width: 1025px) {
  .recent-activity-heading {
    font-size: 2.5rem;
    margin-bottom: 80px;
  }
}

.promoted-articles-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.promoted-articles-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promoted-articles-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 85%, #000 100%);
}

/* Same content column as .container, hand-rolled because this section's inner
   also carries the stacking context over its background image. It is pinned
   alongside .container by the pushed rule above. */
.promoted-articles-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}

.promoted-articles-heading {
  font-family: var(--font-sqsp-heading);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 40px;
  color: #000;
}
@media (min-width: 1025px) {
  .promoted-articles-heading {
    font-size: 2.5rem;
    margin-bottom: 80px;
  }
}

.promoted-articles-section .promoted-articles-heading {
  color: #000;
}

.section.home-section {
  padding: 80px 0;
}

.browse-products {
  background: #000;
  color: #fff;
  overflow-x: clip;
}

.browse-products-heading {
  font-family: var(--font-sqsp-heading);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 32px;
  color: #fff;
}
@media (min-width: 1025px) {
  .browse-products-heading {
    font-size: 2.5rem;
    margin-bottom: 48px;
  }
}

.browse-products-pills {
  margin-bottom: 40px;
}
.browse-products-pills .pill-list {
  justify-content: flex-start;
}
@media (max-width: 800px) {
  .browse-products-pills .pill-list {
    padding-inline: 0;
  }
}
.browse-products-pills .pill-list-track {
  justify-content: flex-start;
}

.browse-products-panel[hidden] {
  display: none;
}

/* Full-bleed: the viewport breaks out of .container with a negative inline
   margin and re-pads itself to the container's edge.

   The gutter is that break-out distance, so it is exactly the container's own
   leading gutter — --container-lead (the box) plus the container's 24px padding.
   Reading it from the same variable the container is positioned with is what
   keeps the two in step when the chat drawer pins the container's leading edge
   (see the pushed rule at the top of this file); computing it independently is
   how they drift. --container-lead is already clamped at 0, so it can't fall
   under the 24px minimum this used to spell out.

   The width still has to be net of --chat-drawer-inset
   (styles/_chat-drawer.scss): the chat drawer is a persistent drawer, so while
   it's open the page is narrower than the viewport and a true 100vw would
   overrun it by the drawer's width, bleeding under the drawer instead of
   stopping at the page's edge. The inset is 0 whenever the drawer is closed or
   overlaying. */
.browse-products .carousel-card-viewport {
  --browse-products-gutter: calc(var(--container-lead) + 24px);
  width: calc(100vw - var(--chat-drawer-inset, 0px));
  margin-inline: calc(-1 * var(--browse-products-gutter));
  padding-inline-start: var(--browse-products-gutter);
  padding-inline-end: 48px;
  scroll-padding-inline-start: var(--browse-products-gutter);
  scroll-padding-inline-end: 48px;
  border-radius: 0;
}
@media (max-width: 800px) {
  .browse-products .carousel-card-viewport {
    padding-inline-end: var(--browse-products-gutter);
    scroll-padding-inline-end: var(--browse-products-gutter);
  }
  .browse-products .carousel-card-viewport .carousel-card {
    width: calc(100vw - var(--chat-drawer-inset, 0px) - 2 * var(--browse-products-gutter));
  }
}

.section.faq--dark {
  background-color: black;
  color: #fff;
}

.faq-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 1025px) {
  .faq-layout {
    flex-direction: row;
    gap: 64px;
  }
}

.faq-heading {
  flex-shrink: 0;
}
@media (min-width: 1025px) {
  .faq-heading {
    flex: 1;
  }
}

.faq-title {
  font-family: var(--font-sqsp-heading);
  font-size: 1.5rem;
  font-weight: 400;
  color: #fff;
}
@media (min-width: 1025px) {
  .faq-title {
    font-size: 2.5rem;
    position: sticky;
    top: calc(var(--hc-header-height) + 36px);
  }
}

@media (min-width: 1025px) {
  .faq-content {
    flex: 1;
  }
}
.faq-content .accordion-header {
  padding: var(--spacing-sqsp-6) 0;
}
.faq-content .accordion-label {
  font-size: 1.125rem;
  font-weight: 500;
}
@media (min-width: 1025px) {
  .faq-content .accordion-label {
    font-size: 1.25rem;
  }
}
.faq-content .accordion-body-content {
  font-size: 0.875rem;
}
@media (min-width: 1025px) {
  .faq-content .accordion-body-content {
    font-size: 0.9rem;
  }
}

.section.activity--dark {
  background-color: black;
  color: #fff;
}

.section.resources-section--dark {
  position: relative;
  overflow: hidden;
  background-color: black;
  color: #fff;
}
.section.resources-section--dark::before, .section.resources-section--dark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.section.resources-section--dark::before {
  top: 0;
  height: 35%;
  background: linear-gradient(to bottom, black 0%, transparent 100%);
}
.section.resources-section--dark::after {
  bottom: 0;
  height: 25%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}
.section.resources-section--dark > .container {
  position: relative;
  z-index: 2;
}
.section.resources-section--dark .carousel-card-image {
  object-position: top;
}
.section.resources-section--dark .resources-heading {
  font-family: var(--font-sqsp-heading);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 40px;
  color: #fff;
  text-transform: lowercase;
}
.section.resources-section--dark .resources-heading::first-letter {
  text-transform: uppercase;
}
@media (min-width: 1025px) {
  .section.resources-section--dark .resources-heading {
    font-size: 2.5rem;
    margin-bottom: 80px;
  }
}

.resources-glow {
  background: var(--glow-color, #8c613d);
  opacity: 0.6;
  filter: blur(150px);
  will-change: transform;
  border-radius: 700px;
  width: 100%;
  height: 700px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0);
  pointer-events: none;
}
@media (min-width: 744px) {
  .resources-glow {
    height: 160%;
  }
}

.section.activity [data-rosetta] .recent-activity-item.card {
  cursor: pointer;
}

.section.activity [data-rosetta] .recent-activity-item-link.card-title {
  display: block;
}
.section.activity [data-rosetta] .recent-activity-item-link.card-title::after {
  content: "";
  position: absolute;
  inset: 0;
}

.section.activity [data-rosetta] .recent-activity-item-meta.card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-sqsp-gray-300);
  font-size: var(--text-sqsp-2);
  line-height: var(--leading-sqsp-1);
}

.section.activity [data-rosetta] .recent-activity-item-comment {
  display: none;
}

.section.activity [data-rosetta] .recent-activity-loader {
  padding: 48px 0;
  text-align: center;
}
.section.activity [data-rosetta] .recent-activity-loader .activity-indicator {
  margin: 0 auto;
}

.section.activity [data-rosetta] .recent-activity-controls {
  margin-top: 24px;
  text-align: center;
}

.skip-navigation {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 12px 24px;
  background: var(--color-accent, #000);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: top 0.15s ease, opacity 0.15s ease;
}
.skip-navigation:focus, .skip-navigation:focus-visible {
  top: 12px;
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

html[data-hc-leaving] body {
  visibility: hidden !important;
}

html[data-hc-hero-pending] .home-hero-inner,
html[data-hc-hero-pending] .search-hero .container {
  visibility: hidden;
}

/* ── Sticky header ───────────────────────────────────────────────────────────
   The bar stays pinned to the top of the viewport for the whole page. It has to:
   the navbar chat toggle is the ONLY control that opens and closes the chat
   drawer (the drawer carries no chrome of its own — styles/_chat-drawer.scss),
   so a header that scrolls away is a drawer that can't be closed.

   The sticky lives on templates/header.hbs's [data-rosetta] WRAPPER, not on
   .navbar itself, and that isn't cosmetic: a sticky box is clamped to its
   parent's content box, and .navbar's parent is that wrapper — exactly bar
   height, so it would have zero travel and never appear to stick at all. The
   wrapper's parent is <body>, which spans the document. Keep the class there.
   (Nothing sets overflow/transform/contain on html, body or the [data-rosetta]
   base rules, so nothing clips it or re-anchors it to an inner scrollport.)

   --hc-header-height is the strip the bar occupies, published here from
   $header-height (styles/_content-width.scss) for the three places that need to
   reason about it: the chat drawer's offset + height, the page's
   scroll-padding, and the .faq-title sticky (both styles/_page.scss). The
   min-block-size below is what makes it a contract rather than a guess — the
   bar is AT LEAST this tall, so the constant can't be an underestimate.
   box-sizing: border-box is already set on [data-rosetta] *, so it includes
   .navbar-inner's block padding. */
:root {
  --hc-header-height: 78px;
}

[data-rosetta] .navbar-inner {
  min-block-size: var(--hc-header-height);
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  /* Above the chat drawer (z-index: 20, styles/_chat-drawer.scss) so the bar —
     and with it the only way to close the drawer — is never covered.
     `position: sticky` opens a stacking context, so the navbar's own dropdown
     and mega flyouts (--popover-z: 50, hc-components popover.css) resolve
     INSIDE it: the whole header subtree composites at 40, which still puts
     those flyouts over the drawer and over page content exactly as before. */
  z-index: 40;
}

/* Below the navbar's own breakpoint the collapsed menu expands in flow inside
   the sticky wrapper, so a menu taller than the viewport would have an
   unreachable bottom — a sticky box travels WITH the viewport, so there is no
   scroll position that brings its overflow into view. Reachable on a short
   phone with the Resources accordion open. Cap it at the space below the bar and
   let it scroll instead; overscroll-behavior keeps that scroll from chaining to
   the page underneath.

   Scoped to the mobile arm (mirroring hc-components navbar.css's own boundary):
   on desktop .navbar-menu is `display: contents`, where a max-block-size would
   mean nothing. */
@media not all and (any-pointer: fine) and (min-width: 801px) {
  [data-rosetta] [data-navbar] .navbar-menu {
    max-block-size: calc(100dvh - var(--hc-header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/* ── Header casing ───────────────────────────────────────────────────────────
   Force Title Case on the Resources dropdown — its trigger label AND its item
   labels — plus the header CTA, regardless of the source copy's case. Some
   dynamic-content strings arrive all-uppercase (e.g. "DEVELOPER DOCUMENTATION"),
   and the bar trigger is additionally uppercased by --theme-navbar-nav-transform
   for some brands; all of it should read as Title Case ("Developer
   Documentation", "Resources").

   `text-transform: capitalize` only title-cases the FIRST letter of each word
   and leaves the rest untouched, so on already-all-caps text it's a no-op. To
   make it land, src/header.js lowercases the label text when it builds these
   nodes; this rule then capitalizes each word (and, for the trigger, overrides
   the bar's uppercase transform). The pairing lives together on purpose —
   change/remove both if you want a different casing.

   Scoped to the header (`[data-navbar]`) so it doesn't touch .navbar-mega-title,
   .btn, or nav triggers used elsewhere. Unlayered here, so it wins over the
   hc-components @layer rules (including --theme-navbar-nav-transform on the bar
   item). Each surface is authored twice — desktop popover + mobile accordion —
   so both the trigger (.popover-trigger / .accordion-title) and the item labels
   (.navbar-mega-title) are covered. */
[data-rosetta] [data-navbar] .navbar-dd-pop .popover-trigger,
[data-rosetta] [data-navbar] .navbar-dd-acc .accordion-title,
[data-rosetta] [data-navbar] .navbar-mega-title,
[data-rosetta] [data-navbar] .navbar-actions .btn {
  text-transform: capitalize;
}

/* The chat toggle opts out of the capitalize rule above. That rule exists to
   normalize all-caps dynamic content into Title Case, and src/header.js
   lowercases labels to feed it; this button's label is a literal that should
   render exactly as written ("Open chat", not "Open Chat"), so header.js passes
   it through un-lowercased and the transform is switched off here. The pairing
   lives together on purpose — change both or neither. */
[data-rosetta] [data-navbar] .navbar-actions .btn.navbar-chat-toggle {
  text-transform: none;
}

/* Selected chat toggle — the drawer is open. src/chatToggle.js flips
   aria-pressed on every [data-chat-toggle] from the drawer's state event, so the
   attribute carries the state directly rather than needing a parallel class (the
   same attribute-driven idiom the support card uses).

   Pressed inverts the toggle to a solid bar-foreground pill, which no other
   control in .navbar-actions wears (the brand CTA is `alt`; the toggle rests as
   `animated`, hc-components' drifting-gradient extension of it — see
   src/header.js). `background` is the shorthand rather than `background-color`
   on purpose: animated's resting fill is a `background-image` gradient
   (src/primitives/button.css), and the shorthand resets that longhand to `none`
   along with position/size/origin/repeat, so pressed shows a flat fill with the
   drift animation running over nothing rather than a gradient bleeding through
   underneath. Hover is pinned to the same pair so the fill doesn't drop out from
   under the pointer. Unlayered here, so it wins over hc-components' @layer
   components .btn rules regardless of specificity. */
[data-rosetta] [data-navbar] .navbar-actions .btn[aria-pressed=true],
[data-rosetta] [data-navbar] .navbar-actions .btn[aria-pressed=true]:hover {
  background: var(--theme-navbar-fg, #0e0e0e);
  border-color: var(--theme-navbar-fg, #0e0e0e);
  color: var(--theme-navbar-bg, #fff);
}

/* ── Logo dropdown ("other help centers") ─────────────────────────────────────
   src/header.js wraps the header logo in a PopOver: the logo stays a real home
   link (<a class="navbar-brand">) and gains a sibling chevron disclosure button
   (.navbar-brand-toggle) opening a mega flyout of sibling-brand links
   (navigation.sites). Hovering opens the flyout; clicking the logo follows its
   href home. Three things need theme-level CSS (unlayered here, so it beats the
   hc-components @layer rules regardless of specificity):

   1. Lay the wrapper out as a row so the chevron toggle rides beside the logo
      (the <a> itself keeps the logo-over-eyebrow column from navbar.css).
   2. Reset the button chrome on the chevron toggle, and give it the
      bar-foreground focus ring the other nav controls use.
   3. Re-anchor the flyout under the logo. The shared .navbar-mega is authored
      to center on .navbar-inner (right for the bar-centered Resources item);
      for the logo — which sits at the start of the bar — undo that so the panel
      drops straight down from the logo's leading edge instead. */
[data-rosetta] [data-navbar] .navbar-brand-pop {
  justify-self: start;
  /* Row: logo link | chevron toggle. The panel is position:absolute
     (navbar.css mega), so it's out of flow and doesn't join the row. */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sqsp-1);
}

[data-rosetta] [data-navbar] .navbar-brand-toggle {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

[data-rosetta] [data-navbar] .navbar-brand-toggle:focus-visible {
  outline: var(--border-width-sqsp-2) solid var(--theme-navbar-fg);
  outline-offset: var(--size-sqsp-50);
  border-radius: var(--radius-sqsp-1);
}

[data-rosetta] [data-navbar] .navbar-brand-toggle:focus:not(:focus-visible) {
  outline: none;
}

/* Leave the wrapper `position: static` (navbar.css's mega default) so the panel
   anchors to .navbar-inner — the same offset parent + top:100% the Resources
   mega uses — landing both flyouts at the same y. Just undo the mega's
   bar-centering so this one stays pinned under the logo (left edge). */
[data-rosetta] [data-navbar] .navbar-brand-pop:has(> .navbar-mega) .popover-panel.navbar-mega {
  left: 10px;
  right: auto;
  transform: none;
  /* Fixed 275px flyout for the logo menu only (the shared mega sizes to its
     column); the single column fills that width so nothing overflows. */
  width: 275px;
}

[data-rosetta] [data-navbar] .navbar-brand-pop .navbar-mega-col {
  width: 100%;
}

/* ── Announcement banner ─────────────────────────────────────────────────────
   Vertical breathing room for the site-wide notice above the navbar
   (templates/header.hbs, built by src/announcementBanner.js). The section also
   carries .container, which supplies the standard page gutters and max-width,
   so the banner lines up with page content instead of running to the viewport
   edge — .banner has a border on all four sides and no max-width of its own.

   Deliberately nothing else: no rule here reaches inside .banner, so the
   component keeps sole ownership of its own layout, variants, and responsive
   stacking and cannot drift out from under the theme. The section is empty and
   [hidden] until the module fills it, and this padding applies to neither. */
.announcement-banner {
  padding-block: 16px;
}

/* Footer — TrustArc "Your privacy choices" control.
   src/footer.js appends the #teconsent placeholder to the footer's legal
   column, and the TrustArc consent notice (templates/document_head.hbs,
   c=teconsent) mounts an <a class="truste_cursor_pointer"> containing its
   privacy-choices icon + label into it. The icon is TrustArc's and is left
   alone; these rules only bring the injected link's text into line with the
   sibling .footer-link items. That link contract lives in the components layer
   (frontend/components/src/front-site/footer.css), so its base type plus the
   responsive step-down are mirrored here rather than shared. */
[data-rosetta] .footer-consent a {
  color: var(--theme-footer-fg);
  font-family: var(--font-sqsp-ui);
  font-size: var(--text-sqsp-3);
  font-weight: var(--font-weight-sqsp-book);
  line-height: var(--leading-sqsp-2);
  text-decoration: none;
  transition: color var(--duration-sqsp-150) var(--ease-sqsp-ease-out);
}

/* The components layer resets `[data-rosetta] img` to display:block, which would
   drop TrustArc's icon onto its own line. Restore inline flow so the icon sits
   beside the label as one control (its size stays TrustArc's). */
[data-rosetta] .footer-consent a img {
  display: inline-block;
  vertical-align: middle;
}

[data-rosetta] .footer-consent a:hover {
  color: oklch(from var(--theme-footer-fg) l c h/60%);
}

[data-rosetta] .footer-consent a:focus-visible {
  outline: var(--border-width-sqsp-2) solid var(--theme-footer-fg);
  outline-offset: var(--border-width-sqsp-2);
  border-radius: var(--radius-sqsp-1);
}

/* Mirror .footer-link's desktop step-down to 12px/16px. Same media conditions
   the components library emits for its footer-link @variant overrides. */
@media only screen and (any-pointer: fine) and (max-width: 800px), only screen and (any-pointer: fine) and (min-width: 1025px), only screen and (pointer: coarse) and (orientation: portrait) and (min-device-height: 1366px), only screen and (pointer: coarse) and (orientation: landscape) and (min-device-width: 1366px) {
  [data-rosetta] .footer-consent a {
    font-size: var(--text-sqsp-2);
    line-height: var(--leading-sqsp-1);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-rosetta] .footer-consent a {
    transition-duration: 0s;
  }
}
/* ── Home page (HEX-4504, Figma node 546-32183) ──────────────────────────────
   Page-level layout glue around the hc-components compositions built by
   src/homePage.js. Brand-varying surfaces ride dedicated --theme-home-*
   hooks: defaults map to the shared strong pair; scheduling pins the Acuity
   teal + off-white, matching its footer surface treatment
   (frontend/components/src/brands/scheduling.css --theme-footer-*). */
[data-rosetta] {
  --theme-home-hero-bg: var(--colors-bg-strong);
  --theme-home-hero-fg: var(--colors-fg-on-strong);
  --theme-home-heading-fg: currentColor;
  --theme-home-blade-icon-bg: var(--colors-bg-strong);
  --theme-home-blade-icon-fg: var(--colors-fg-on-strong);
}

[data-rosetta][data-brand=scheduling] {
  --theme-home-hero-bg: #3d6168;
  --theme-home-hero-fg: #fcf1f9;
  --theme-home-heading-fg: #3d6168;
  --theme-home-blade-icon-bg: #3d6168;
  --theme-home-blade-icon-fg: #fcf1f9;
}

.home-page {
  background-color: var(--colors-bg-inset);
}

.home-hero {
  background: var(--theme-home-hero-bg);
  color: var(--theme-home-hero-fg);
  /* .text children color themselves from --theme-fg (primitives/text.css);
     repoint it so the hero copy renders on the band, same pattern as the
     carousel items' own fg reassign. */
  --theme-fg: var(--theme-home-hero-fg);
  /* No inline padding: the hero's .container supplies the 24px gutter, the same
     way the guides and support sections get theirs. Keeping a gutter here too
     would double it to 48px. */
  padding: 96px 0 79px;
}

/* Centred within the hero's .container — i.e. within the page's content column,
   not within the page. The distinction only shows once the chat drawer is open:
   the column keeps the header's leading edge and gives up width on the drawer's
   side (styles/_page.scss), so centring in it keeps this block on the same centre
   as the guides and support sections below, which are columns of the same kind.
   Centring in the page instead — which is what plain auto margins did while this
   block sat directly in the full-width band — put the hero on the middle of
   whatever the drawer left over, ~150px off the sections it sits above. */
.home-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 690px;
  margin-inline: auto;
  text-align: center;
}

.home-hero-heading,
.home-hero-subheading {
  margin: 0;
}

.home-hero-subheading {
  max-width: 572px;
  margin-bottom: 6px;
}

/* src/searchComposition.js reshapes the {{search}} helper's markup into the
   Search element's contract (frontend/components/src/elements/search.css), so
   the row layout, the 11px gap, the 14px field text, the leading glyph slot and
   the paired input/submit sizing all come from the components library. Only the
   band treatment is here: a frosted translucent field + light submit button on
   the brand band, per the Figma hero — Input's default field is a light filled
   surface that would vanish on the band. Same overrides the search/category/
   section heroes apply (.search-hero-form, _search-results.scss), against this
   page's own --theme-home-hero-fg. */
.home-hero .search {
  position: relative;
  width: 100%;
  max-width: 581px;
  margin-top: 6px;
}
.home-hero .search .input-icon {
  color: var(--theme-home-hero-fg);
}
.home-hero .search .input {
  /* Input's sizes are 28/36/44px (sm/md/lg); the Figma row is 38px. */
  min-height: 38px;
  border-color: color-mix(in srgb, var(--theme-home-hero-fg) 35%, transparent);
  background-color: color-mix(in srgb, var(--theme-home-hero-fg) 18%, transparent);
  color: var(--theme-home-hero-fg);
}
.home-hero .search .input::placeholder {
  color: color-mix(in srgb, var(--theme-home-hero-fg) 80%, transparent);
}
.home-hero .search .input:focus-visible {
  outline: 2px solid var(--theme-home-hero-fg);
  outline-offset: 1px;
}
.home-hero .search .input {
  /* WebKit renders its own cancel affordance inside search inputs, which is
     off-palette on the band and doubles up with the .clear-button below. */
}
.home-hero .search .input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}
.home-hero .search {
  /* Button's default variant is the brand's strong pair; the Figma draws a
     light grey submit. */
}
.home-hero .search .btn {
  flex-shrink: 0;
  min-height: 38px;
  border-color: transparent;
  background: var(--color-sqsp-gray-800, #f2f2f2);
  color: var(--color-sqsp-gray-100, #0e0e0e);
}
.home-hero .search {
  /* src/search.js appends the clear control at the end of the form; flex-order
     it between the input and the submit, then pull it back over the input's
     trailing padding by its own width plus the row gap. Offsetting against its
     own box (rather than measuring in from the form's trailing edge) keeps it
     pinned to the field's right edge whatever the submit's localized width.
     Shown only once the form carries search-has-value, same contract as
     Copenhagen's. */
}
.home-hero .search .clear-button {
  order: 2;
  display: none;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 24px;
  margin-left: -35px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--theme-home-hero-fg);
  cursor: pointer;
  z-index: 1;
}
.home-hero .search .btn {
  order: 3;
}
.home-hero .search.search-has-value .clear-button {
  display: flex;
}

.section.home-guides {
  padding: 38px 0 22px;
}

.section.home-support {
  padding: 0 0 38px;
}

/* Full-bleed clip: the carousel's .swiper is overflow:visible (below) so slides
   spill past the .container gutter; clip that bleed at the viewport edge here so
   no horizontal page scrollbar appears. overflow-x:clip (not hidden) keeps the
   pill-list's own horizontal scroller and vertical overflow working. */
.section.home-guides {
  overflow-x: clip;
}

.home-section-heading {
  margin: 0;
  color: var(--theme-home-heading-fg);
}

.home-section-subheading {
  margin: 6px 0 0;
  color: var(--theme-home-heading-fg);
  font-weight: 500;
}

.home-guides-pills {
  display: flex;
  align-items: center;
  margin-block: 22px;
  /* Let the pill-list shrink below its content width so it scrolls (arrows +
     edge fades) instead of widening the row; "View All" keeps its footprint. */
}
.home-guides-pills [data-pill-list] {
  min-width: 0;
}

/* "View All" is a link, not a topic tab — it shares the pill footprint but
   sits at the row's trailing edge, a sibling of the pill-list outside the
   tablist semantics. */
.home-guides-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-inline-start: auto;
  padding-inline: var(--spacing-sqsp-3);
  color: inherit;
  font-size: var(--text-sqsp-4);
  text-decoration: none;
}
.home-guides-view-all:hover {
  text-decoration: underline;
}

/* One carousel per topic, stacked in a single grid cell; the pill selection
   toggles which one is visible. visibility (not display) so hidden carousels
   keep real layout metrics — the React card-carousel module (Swiper) measures
   its .swiper width on mount and would read zero inside display:none (see
   CardCarousel's deferred swiper.update() on the panel becoming active). */
.home-guides-panels {
  display: grid;
}

.home-guides-panel {
  grid-area: 1/1;
  /* grid items default to min-width:auto, which would let the carousel track's
     max-content width widen the page instead of staying within the grid cell */
  min-width: 0;
  visibility: hidden;
}

.home-guides-panel.is-active {
  visibility: visible;
}

.section-title-card {
  font-family: var(--font-sqsp-ui);
}

.hero-card-title {
  font-family: var(--font-sqsp-ui);
}

/* ── Swiper track (React card-carousel module) ───────────────────────────────
   The theme's module rollup config has no CSS-import plugin, so `swiper/css`
   can't be imported inside the module. The few base rules Swiper's layout needs
   are hand-authored here, scoped to the guides section, alongside the
   container-aligned full-bleed override. The reused card-carousel.css chrome
   (.card-carousel-item surface/hover, dots, arrows, tag) still applies; only the
   *track* changes — Swiper's .swiper-wrapper/.swiper-slide replace the CSS
   scroll-snap .card-carousel-track when the cards overflow. A category whose
   cards already fit renders no Swiper at all: the module falls back to
   card-carousel.css's own track in fill mode (.card-carousel-track[data-fill]),
   where the cards flex to consume the row and these .swiper-* rules — including
   `.swiper-slide { flex-shrink: 0 }`, which would fight that — simply never
   match. The same track is still the no-JS fallback. */
.home-guides {
  /* Container-aligned, clipped to the content column: <Swiper> sits inside
     .container (.home-guides-inner), so its leading edge already lines up
     with the pill list and heading, and clipping the paged track at its own
     (container-width) edge keeps a trailing card peeking past the last full
     one — the "there's more, page it" affordance — without letting whole
     slides escape into the page margin.

     This replaces an earlier `overflow: visible` full-bleed that was only
     "clipped to the viewport". That reads as a peek when the viewport is
     about as wide as the content column, but on wide monitors (container ≪
     viewport) the trailing slide of a paged category — e.g. the 4th card of
     a 4-section category, which pages rather than fills since 4 > the widest
     slidesPerView of 3.2 — floated out whole in the empty margin, detached
     from the column and misaligned with everything else on the page.

     `overflow-x: clip` (not `hidden`/`auto`) so `overflow-y` can stay
     `visible`: the cards' hover lift/shadow (see the .card-carousel-item
     hover rule below) extends vertically and must not be clipped — an
     `auto`/`hidden` pair would compute the other axis to `auto` and clip it.
     Only the paged Swiper overflows; the 1–3 card fill track already flexes
     to fit the column exactly (card-carousel.css `[data-fill]`). */
}
.home-guides .swiper {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}
.home-guides .swiper-wrapper {
  display: flex;
  box-sizing: content-box;
  transition-property: transform;
}
.home-guides .swiper-slide {
  flex-shrink: 0;
}

/* Guide cards behave like the feature card (frontend/components card.css
   a.card.filled): the whole card is clickable via its .card-action anchor
   stretched over it (.card-carousel-item is position:relative), and on hover
   the card lifts and the trailing arrow chip fills in. This mirrors card.css's
   own interactive recipe (same --card-lift / --card-shadow-hover tokens and the
   currentColor arrow-fill) rather than adding `.card`/`a.card` to the slide —
   those would reassign --theme-fg to the light-surface pair and break the dark
   palette-gradient text the carousel card relies on. Scoped under [data-rosetta]
   so the transition override beats card-carousel.css's box-shadow-only one. */
[data-rosetta] .home-guides .card-carousel-item {
  transition: transform var(--duration-sqsp-150) var(--ease-sqsp-ease-out), box-shadow var(--duration-sqsp-150) var(--ease-sqsp-ease-out);
}
[data-rosetta] .home-guides .card-carousel-item a.card-action::before {
  content: "";
  position: absolute;
  inset: 0;
}
[data-rosetta] .home-guides .card-carousel-item:hover {
  transform: translate3d(0, var(--card-lift), 0);
}
[data-rosetta] .home-guides .card-carousel-item:hover .card-action {
  /* The trailing arrow inverts to a solid chip on card hover (card.css
     a.card:hover .card-action). */
  border-color: currentColor;
  background-color: color-mix(in oklch, currentColor 12%, transparent);
}

/* The support-links card and the hero card sit side by side until there isn't
   room, then stack. The threshold is a content width, not a window width
   (content-below(), styles/_content-width.scss): an open chat drawer takes 440px
   out of the page, which is the whole width of the leading card — so the row
   stacks at a window that used to be wide enough to hold both. */
.home-support-grid {
  display: flex;
  align-items: stretch;
  gap: 40px;
  margin-top: 22px;
}
@media (max-width: 1024px) {
  .home-support-grid {
    flex-direction: column;
  }
}
@media (max-width: 1464px) {
  html.chat-drawer-pushed .home-support-grid {
    flex-direction: column;
  }
}

.home-support-card {
  flex: 0 1 440px;
  min-width: 0;
}
@media (max-width: 1024px) {
  .home-support-card {
    flex-basis: auto;
  }
}
@media (max-width: 1464px) {
  html.chat-drawer-pushed .home-support-card {
    flex-basis: auto;
  }
}

.home-support-blades {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}

/* Blade markup is the shared Card contract (.card.horizontal.compact,
   frontend/components card.css) — home-support-blade-icon is only a
   color/spacing modifier layered on the component's own .card-icon, and the
   title/description colors below restore the brand heading/muted-fg pair the
   old bespoke .home-support-blade-title/-desc classes carried before the
   markup moved onto the shared Card contract, which has no brand color
   opinion of its own for .text.bold/.text.body-sm. */
.home-support-blade-icon {
  margin-inline-start: var(--spacing-sqsp-4);
  margin-block: var(--spacing-sqsp-3);
  border-radius: 4px;
  background: var(--theme-home-blade-icon-bg);
  color: var(--theme-home-blade-icon-fg);
  /* At the icon-leading grid breakpoint (card.css's mobile-0 grid rule),
     .card itself carries the inset padding — this margin would double up
     with it and push the icon out of alignment with the description's
     grid column. Media query mirrors @sqs/rosetta-themes
     breakpoints.generated.css mobile-0 exactly, since this unlayered theme
     file always wins the cascade over card.css's @layer components
     regardless of specificity. */
}
@media only screen and (pointer: coarse) and (orientation: portrait) and (max-device-height: 956px), only screen and (pointer: coarse) and (orientation: landscape) and (max-device-width: 956px) {
  .home-support-blade-icon {
    margin: 0;
  }
}

/* Desktop blade copy (Figma node 546-32262): title and description hug with
   a 4px gap, vertically centered against the icon tile — not spread by the
   card-body's default 16px gap. Inert on mobile-0, where card.css turns
   .card-body into display:contents for the icon+title grid. */
.home-support-blades .card-body {
  justify-content: center;
  gap: 4px;
}

.home-support-blades .text.bold {
  color: var(--theme-home-heading-fg);
}

.home-support-blades .text.body-sm {
  color: var(--colors-fg-muted, #5a5a5a);
}

/* The hero card (frontend/components card.hero variant — full-bleed Acuity
   webinar photo, own scrim/type/controls) fills the trailing column beside the
   support-links card. It owns its internal layout and min-height; here it just
   flexes to take the remaining width. */
.home-support-grid .card.hero {
  flex: 1 1 auto;
  min-width: 0;
}

.support-card-heading,
.article-sidebar-heading {
  font-family: var(--font-sqsp-ui);
  font-size: 1rem;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--colors-fg-default, #0e0e0e);
  margin: 0 0 11px;
}

.search-hero {
  background: var(--theme-footer-bg, #000);
  color: var(--theme-footer-fg, #fff);
  padding: 84px 0 24px;
}

.search-hero-title {
  font-family: var(--theme-font-heading, var(--font-sqsp-ui));
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}
@media (min-width: 1025px) {
  .search-hero-title {
    font-size: 2.5rem;
  }
}

.search-hero-form {
  max-width: 581px;
  margin-bottom: 16px;
}
.search-hero-form .search {
  position: relative;
}
.search-hero-form .input-group {
  flex: 1;
  min-width: 0;
  width: auto;
  order: 1;
}
.search-hero-form .input-icon {
  color: var(--theme-footer-fg, #fff);
}
.search-hero-form .input {
  min-height: 38px;
  border-color: color-mix(in srgb, var(--theme-footer-fg, #fff) 35%, transparent);
  background-color: color-mix(in srgb, var(--theme-footer-fg, #fff) 18%, transparent);
  color: var(--theme-footer-fg, #fff);
}
.search-hero-form .input::placeholder {
  color: color-mix(in srgb, var(--theme-footer-fg, #fff) 80%, transparent);
}
.search-hero-form .input:focus-visible {
  outline: 2px solid var(--theme-footer-fg, #fff);
  outline-offset: 1px;
}
.search-hero-form .input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}
.search-hero-form .btn {
  order: 3;
  min-height: 38px;
  border-color: transparent;
  background: var(--color-sqsp-gray-800, #f2f2f2);
  color: var(--color-sqsp-gray-100, #0e0e0e);
}
.search-hero-form .clear-button {
  order: 2;
  display: none;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 33px;
  margin-left: -44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--theme-footer-fg, #fff);
  cursor: pointer;
  z-index: 1;
}
.search-hero-form .search-has-value .clear-button {
  display: flex;
}

.category-hero .search-hero-title,
.section-hero .search-hero-title {
  font-size: 2rem;
  line-height: 44px;
  margin-bottom: 18px;
}

.category-hero .search-hero-title.has-description,
.section-hero .search-hero-title.has-description {
  margin-bottom: 6px;
}

.category-hero .search-hero-description,
.section-hero .search-hero-description {
  max-width: 690px;
  margin: 0 0 18px;
  font-family: var(--font-sqsp-ui);
  font-size: 1rem;
  font-weight: 500;
  line-height: 22px;
}

.category-hero .search-hero-form,
.section-hero .search-hero-form {
  margin-bottom: 0;
}

.search-hero-count {
  font-size: 0.875rem;
  line-height: 1.4;
  opacity: 0.9;
}

.search-results-body {
  background: var(--colors-bg-inset, #f9f9f9);
  padding: 22px 0 64px;
}

.search-results-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
@media (min-width: 1025px) {
  .search-results-layout {
    grid-template-columns: 453px minmax(0, 1fr);
  }
}

.search-results-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  order: 2;
}
@media (min-width: 1025px) {
  .search-results-sidebar {
    order: 0;
  }
}

.search-sidebar-heading {
  font-family: var(--font-sqsp-ui);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--colors-fg-default, #0e0e0e);
  margin-bottom: 16px;
}

.search-featured-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.search-featured-list li:nth-child(n+4) {
  display: none;
}

.search-featured-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 224px;
  padding: 20px 22px;
  border-radius: 22px;
  background-color: #3a3a3a;
  background-size: cover;
  background-position: center;
  color: #fafafa;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.search-featured-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.search-featured-eyebrow {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.search-featured-title {
  font-size: 0.875rem;
  font-weight: 600;
}

.search-contact {
  background: var(--colors-bg-base, #fff);
  border: 1px solid var(--colors-border-default, #e7e7e7);
  border-radius: 11px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.search-contact-blade {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--color-sqsp-gray-900, #f2f2f2);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}

.search-contact-blade-brand {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  background: var(--colors-bg-strong, #0e0e0e);
}

.search-contact-blade-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-contact-blade-title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--theme-footer-bg, var(--colors-fg-default, #0e0e0e));
}

a.search-contact-blade:hover .search-contact-blade-title,
button.search-contact-blade:hover .search-contact-blade-title {
  text-decoration: underline;
}

button.search-contact-blade {
  appearance: none;
  width: 100%;
  font: inherit;
  text-align: start;
  background: none;
  cursor: pointer;
}

.search-contact-blade[aria-pressed=true] {
  border-color: var(--theme-footer-bg, var(--colors-border-strong, #0e0e0e));
  background: var(--colors-bg-inset, #f7f7f7);
}

.search-contact-blade-description {
  font-size: 0.75rem;
  line-height: 16px;
  color: var(--colors-fg-muted, #5a5a5a);
}

.search-results-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.search-results-column > div:empty {
  display: none;
}

.search-ai-overview {
  background: var(--colors-bg-base, #fff);
  border-radius: 6px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-ai-overview-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.search-ai-overview-header .icon-ai {
  --icon-size: 16px;
}

.search-ai-overview-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 22px;
  margin: 0;
  color: var(--colors-fg-default, #0e0e0e);
}

.search-ai-overview-text {
  margin: 0;
  font-size: 1rem;
  line-height: 22px;
  color: var(--colors-fg-default, #0e0e0e);
}

.search-ai-overview-sources {
  margin-top: 10px;
  font-size: 0.75rem;
  line-height: 16px;
}

.search-ai-overview-sources-label {
  display: block;
  color: var(--colors-fg-muted, #5a5a5a);
  margin-bottom: 8px;
}

.search-ai-overview-sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.search-ai-overview-sources-list a,
.search-ai-overview-sources-list .search-ai-overview-sources-more {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--colors-border-default, #ddd);
  border-radius: 60px;
  background: var(--colors-bg-base, #fff);
  font-size: 0.75rem;
  line-height: 16px;
}
.search-ai-overview-sources-list a {
  color: var(--colors-fg-default, #0e0e0e);
  text-decoration: none;
}
.search-ai-overview-sources-list a:hover {
  border-color: var(--colors-fg-muted, #5a5a5a);
}

.search-ai-overview-sources-more {
  color: var(--colors-fg-muted, #5a5a5a);
}

.search-ai-overview-cards {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.search-ai-overview-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 220px;
  height: 224px;
  padding: 20px;
  border-radius: 22px;
  color: #fff;
}
.search-ai-overview-card:nth-child(1) {
  background: linear-gradient(135deg, #55707a, #939aa5);
}
.search-ai-overview-card:nth-child(2) {
  background: linear-gradient(135deg, #8d88d6, #b9a9e4);
}
.search-ai-overview-card:nth-child(3) {
  background: linear-gradient(135deg, #df8a5b, #f0b3a3);
}

.search-ai-overview-card-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 22px;
}

.search-ai-overview-card-subtitle {
  font-size: 0.75rem;
  line-height: 16px;
}

.search-results-main {
  background: var(--colors-bg-base, #fff);
  border-radius: 6px;
  padding: 22px 27px 11px;
}

.search-results-heading {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--colors-fg-default, #0e0e0e);
  margin-bottom: 22px;
}

.search-results-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.search-results-filters-label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--colors-fg-default, #0e0e0e);
}

.search-results-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.search-results-filter-list a.chip {
  text-decoration: none;
  background: var(--colors-bg-base, #fff);
  border: 1px solid #ddd;
  border-radius: 60px;
  padding: 12px 20px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--colors-fg-default, #0e0e0e);
}
.search-results-filter-list a.chip:hover {
  border-color: var(--colors-fg-default, #0e0e0e);
}
.search-results-filter-list a.chip.selected {
  background: var(--colors-bg-strong, #0e0e0e);
  border-color: var(--colors-bg-strong, #0e0e0e);
  color: var(--colors-fg-on-strong, #fff);
}

.search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-result-row {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.search-result-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-result-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 22px;
  margin: 0;
}
.search-result-title a {
  color: var(--colors-fg-default, #0e0e0e);
  text-decoration: none;
}
.search-result-title a:hover {
  text-decoration: underline;
}

.search-result-description {
  font-size: 0.875rem;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--colors-fg-default, #0e0e0e);
  margin: 0;
}
.search-result-description em {
  font-style: normal;
  font-weight: inherit;
}

.search-result-end {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-result-tag {
  padding: 4px 12px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 0.75rem;
  line-height: 16px;
  color: var(--colors-fg-default, #0e0e0e);
  white-space: nowrap;
}
.search-result-tag:empty {
  display: none;
}

.search-result-arrow {
  color: var(--colors-fg-default, #0e0e0e);
  --icon-size: 16px;
}

.search-results-column .no-results {
  padding: 48px 0;
  text-align: center;
}
.search-results-column .no-results .headline {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 12px;
}
.search-results-column .no-results .action-prompt {
  font-size: 0.9375rem;
  color: var(--colors-fg-muted, #5a5a5a);
  margin-bottom: 8px;
}

.algolia-autocomplete {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.algolia-autocomplete input {
  width: 100%;
}

.aa-dropdown-menu {
  box-sizing: border-box;
  min-width: 100%;
  margin-top: var(--spacing-sqsp-1, 6px);
  padding: var(--spacing-sqsp-1, 6px) 0;
  border: 1px solid var(--colors-border-default, #e7e7e7);
  border-radius: var(--theme-radius, 4px);
  background: var(--colors-bg-base, #fff);
  box-shadow: var(--shadow-sqsp-300, 0 6px 24px rgba(0, 0, 0, 0.12));
  font-family: var(--font-sqsp-ui);
  color: var(--colors-fg-default, #0e0e0e);
  text-align: left;
  overflow: hidden;
  z-index: 60;
}

.aa-suggestion {
  padding: 0;
  cursor: pointer;
}

.aa-suggestion + .aa-suggestion {
  border-top: 1px solid var(--colors-border-default, #e7e7e7);
}

.aa-article-hit--category {
  padding: var(--spacing-sqsp-1, 6px) var(--spacing-sqsp-2, 11px) 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colors-fg-muted, #5a5a5a);
}

.aa-article-hit--category--content {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.aa-article-hit--line {
  display: block;
  float: none;
  margin: 0;
}

.aa-article-hit--section {
  display: none;
}

.aa-article-hit--content {
  display: block;
  float: none;
  width: 100%;
  padding: 8px var(--spacing-sqsp-2, 11px);
  border: 0;
}

.aa-suggestion:hover,
.aa-suggestion.aa-cursor {
  background: var(--colors-bg-inset, #f9f9f9);
}

.algolia-autocomplete .aa-article-hit--title {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--theme-footer-bg, var(--colors-fg-default, #0e0e0e));
}

.algolia-autocomplete .aa-article-hit--highlight,
.algolia-autocomplete .aa-article-hit--title .aa-article-hit--highlight {
  color: inherit;
  font-weight: 700;
}

.aa-article-hit--highlight::before {
  display: none;
}

.aa-article-hit--body {
  display: none;
}

.algolia-autocomplete input[type=search]::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

#algolia-facets,
#algolia-facets-open,
#algolia-facets-close,
#algolia-labels,
#algolia-stats-line,
#algolia-powered-by-container {
  display: none !important;
}

#algolia-hits {
  float: none;
  width: 100%;
}
#algolia-hits .ais-hits--list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#algolia-hits .ais-hits--item,
#algolia-hits .search-result {
  list-style: none;
}
#algolia-hits .search-result {
  position: relative;
  padding: 24px 44px 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#algolia-hits .search-result::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  inline-size: 16px;
  block-size: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%203H3V19H19V11H17V17H5V5H11V3Z'%20fill='%230E0E0E'/%3E%3Cpath%20d='M19%203H13V5H15.5858L10.2929%2010.2929L11.7071%2011.7071L17%206.41423V9H19V3Z'%20fill='%230E0E0E'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M11%203H3V19H19V11H17V17H5V5H11V3Z'%20fill='%230E0E0E'/%3E%3Cpath%20d='M19%203H13V5H15.5858L10.2929%2010.2929L11.7071%2011.7071L17%206.41423V9H19V3Z'%20fill='%230E0E0E'/%3E%3C/svg%3E") center/contain no-repeat;
}
#algolia-hits .search-result-path {
  margin-bottom: 4px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--colors-fg-muted, #5a5a5a);
}
#algolia-hits .search-result-link-wrapper {
  margin: 0;
}
#algolia-hits .search-result-link {
  display: inline-block;
  font-family: var(--font-sqsp-ui);
  font-size: 1rem;
  font-weight: 500;
  line-height: 22px;
  color: var(--colors-fg-default, #0e0e0e);
  text-decoration: none;
}
#algolia-hits .search-result-link:hover {
  text-decoration: underline;
}
#algolia-hits .search-result-link .ais-highlight,
#algolia-hits .search-result-link em,
#algolia-hits .search-result-link mark {
  background: transparent;
  color: inherit;
  font-style: normal;
  font-weight: inherit;
}
#algolia-hits .search-result-link .ais-highlight::before,
#algolia-hits .search-result-link em::before,
#algolia-hits .search-result-link mark::before {
  background-color: transparent;
}
#algolia-hits .search-result-body {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--colors-fg-default, #0e0e0e);
}
#algolia-hits .search-result-body .ais-highlight,
#algolia-hits .search-result-body em,
#algolia-hits .search-result-body mark {
  background: transparent;
  color: inherit;
  font-style: normal;
  font-weight: inherit;
}
#algolia-hits .search-result-body .ais-highlight::before,
#algolia-hits .search-result-body em::before,
#algolia-hits .search-result-body mark::before {
  background-color: transparent;
}
#algolia-hits .search-result-meta {
  display: none;
}
#algolia-hits .search-result-votes {
  display: none;
}

.ais-hits--empty {
  padding: 48px 0;
  margin: 0;
  font-family: var(--font-sqsp-ui);
  font-size: 1.25rem;
  font-weight: 500;
  font-style: normal;
  line-height: 1.5;
  text-align: center;
  color: var(--colors-fg-default, #0e0e0e);
}

#algolia-pagination {
  margin-top: 24px;
  text-align: center;
}
#algolia-pagination .ais-pagination {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
#algolia-pagination .ais-pagination--item {
  display: inline-block;
}
#algolia-pagination .ais-pagination--link {
  display: block;
  min-width: 36px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--colors-fg-default, #0e0e0e);
  text-decoration: none;
}
#algolia-pagination .ais-pagination--link:hover {
  background: var(--colors-bg-inset, #f9f9f9);
}
#algolia-pagination .ais-pagination--item__active .ais-pagination--link {
  background: var(--theme-footer-bg, var(--colors-bg-strong, #0e0e0e));
  color: var(--theme-footer-fg, var(--colors-fg-on-strong, #fff));
}
#algolia-pagination .ais-pagination--item__disabled {
  visibility: hidden;
}

.article-hero {
  background: var(--theme-footer-bg, #000);
  color: var(--theme-footer-fg, #fff);
  padding: 84px 0 55px;
}

.article-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}

.article-hero .breadcrumbs,
.article-hero-title {
  width: 100%;
  max-width: 690px;
}

.article-hero-title {
  font-family: var(--theme-font-heading, var(--font-sqsp-ui));
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: -0.03em;
  color: var(--theme-footer-fg, #fff);
  margin: 0;
}
.article-hero-title .icon-lock {
  vertical-align: middle;
  margin-left: 6px;
}

.article-hero-subtitle {
  max-width: 690px;
  margin: 0 0 10px;
  font-family: var(--font-sqsp-ui);
  font-size: 1rem;
  font-weight: 500;
  line-height: 22px;
}
.article-hero-subtitle[hidden] {
  display: none;
}

.article-hero-search {
  width: 100%;
  margin-top: 16px;
  margin-bottom: 0;
}

.article-hero-subtitle:not([hidden]) + .article-hero-search {
  margin-top: 0;
}

.article-body-wrap {
  background: var(--colors-bg-inset, #f9f9f9);
  padding: 22px 0 64px;
}

.article-layout {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1464px) {
  html.chat-drawer-pushed .article-layout {
    grid-template-columns: 1fr;
  }
}

.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: calc(var(--hc-header-height) + 22px);
}
@media (max-width: 1024px) {
  .article-sidebar {
    order: 2;
    position: static;
  }
}
@media (max-width: 1464px) {
  html.chat-drawer-pushed .article-sidebar {
    order: 2;
    position: static;
  }
}

.article-toc .article-sidebar-heading {
  padding-bottom: 11px;
  border-bottom: 1px solid var(--colors-border-default, #e7e7e7);
}

.article-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 1025px) {
  .article-toc-list {
    max-height: 420px;
    overflow-y: auto;
  }
}

.article-toc-item-h3 {
  padding-left: 14px;
}

.article-toc-link {
  position: relative;
  display: block;
  padding-left: 10px;
  font-size: 1rem;
  line-height: 28px;
  color: var(--color-sqsp-gray-200, #454545);
  text-decoration: none;
}
.article-toc-link:hover {
  color: var(--colors-fg-default, #0e0e0e);
}
.article-toc-link.is-active {
  font-weight: 500;
  color: var(--colors-fg-default, #0e0e0e);
}
.article-toc-link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 4px;
  background: var(--theme-footer-bg, #0e0e0e);
}

.article-related {
  gap: 11px;
}
.article-related section,
.article-related ul,
.article-related li {
  display: contents;
}
.article-related .article-sidebar-heading {
  margin: 0;
}
.article-related h1:not(.article-sidebar-heading),
.article-related h2:not(.article-sidebar-heading),
.article-related h3:not(.article-sidebar-heading),
.article-related h4:not(.article-sidebar-heading),
.article-related h5:not(.article-sidebar-heading),
.article-related h6:not(.article-sidebar-heading) {
  display: none;
}

.article-votes {
  text-align: center;
}

.article-votes-question {
  font-family: var(--font-sqsp-ui);
  font-size: 1rem;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--colors-fg-default, #0e0e0e);
  margin: 0 0 16px;
}

.article-votes-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.article-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 74px;
  padding: 11px 18px;
  border: 1px solid var(--colors-border-default, #e7e7e7);
  border-radius: 6px;
  background: var(--colors-bg-base, #fff);
  color: var(--colors-fg-default, #0e0e0e);
  font-family: var(--font-sqsp-ui);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.article-vote:hover {
  border-color: var(--colors-fg-default, #0e0e0e);
}
.article-vote::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
}

.article-vote-up::before {
  background-color: #1a8245;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
}

.article-vote-down::before {
  background-color: #d62828;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
}

.article-vote.is-selected {
  border-color: var(--theme-footer-bg, #0e0e0e);
  background: var(--colors-bg-inset, #f9f9f9);
}

.article-votes-count {
  display: block;
  margin-top: 11px;
  font-size: 0.75rem;
  color: var(--colors-fg-muted, #5a5a5a);
}

.article-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.article-summary {
  background: var(--colors-bg-base, #fff);
  border-radius: 6px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.article-summary[hidden] {
  display: none;
}

.article-summary-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.article-summary-icon {
  --icon-size: 22px;
  color: var(--theme-footer-bg, #0e0e0e);
}

.article-summary-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 28px;
  margin: 0;
  color: var(--theme-footer-bg, var(--colors-fg-default, #0e0e0e));
}

.article-summary-body {
  color: var(--theme-prose-fg, var(--theme-fg));
  font-family: var(--font-sqsp-ui);
  font-size: 1rem;
  font-weight: 400;
  line-height: 28px;
}
.article-summary-body * {
  font-size: inherit;
  font-weight: 400 !important;
}
.article-summary-body > *:first-child {
  margin-top: 0;
}
.article-summary-body > *:last-child {
  margin-bottom: 0;
}
.article-summary-body p {
  margin: 0 0 1em;
}
.article-summary-body a {
  color: inherit;
  text-decoration: underline;
}
.article-summary-body a:hover {
  text-decoration: none;
}

.article-content-card {
  background: var(--colors-bg-base, #fff);
  border-radius: 6px;
  padding: 22px 27px 11px;
}

[data-rosetta] .article-body {
  font-size: 1rem;
  line-height: 1.75;
}
[data-rosetta] .article-body h2 {
  font-size: 2rem;
}
[data-rosetta] .article-body h3 {
  font-size: 1.375rem;
}
[data-rosetta] .article-body h4 {
  font-size: 1.125rem;
}
[data-rosetta] .article-body .article-heading-anchor {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
  margin-block: -8px;
  opacity: 0;
  transition: opacity 120ms ease-in-out;
  --icon-size: 20px;
  line-height: 1;
}
[data-rosetta] .article-body :is(h2, h3, h4):hover > .article-heading-anchor,
[data-rosetta] .article-body .article-heading-anchor:focus-visible,
[data-rosetta] .article-body .article-heading-anchor.is-copied {
  opacity: 1;
}
[data-rosetta] .article-body .article-heading-anchor.is-copied {
  --btn-fg: var(--color-sqsp-green-300);
  --btn-fg-hover: var(--color-sqsp-green-300);
}
@media (hover: none) {
  [data-rosetta] .article-body .article-heading-anchor {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-rosetta] .article-body .article-heading-anchor {
    transition: none;
  }
}
[data-rosetta] .article-body blockquote {
  display: block;
  margin: var(--spacing-sqsp-5) 0;
  padding: 22px 33px;
  border: 1px solid var(--colors-border-default, #e7e7e7) !important;
  border-radius: 6px;
  background-color: var(--colors-bg-inset, #f9f9f9) !important;
  color: var(--theme-footer-bg, var(--theme-fg));
}
[data-rosetta] .article-body blockquote > :first-child {
  margin-top: 0;
}
[data-rosetta] .article-body blockquote > :last-child {
  margin-bottom: 0;
}
[data-rosetta] .article-body blockquote a {
  color: inherit;
}
[data-rosetta] .article-body .article-tabs {
  margin: var(--spacing-sqsp-5) 0;
}
[data-rosetta] .article-body .youtube-wrapper iframe,
[data-rosetta] .article-body iframe[src*="youtube.com/embed"],
[data-rosetta] .article-body iframe[src*="youtube-nocookie.com/embed"] {
  display: block;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
[data-rosetta] .article-body .banner-title.article-callout-title {
  margin: 0 0 0.5em;
  color: inherit;
}

.content-tags {
  margin-top: 22px;
}
.content-tags p {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--colors-fg-muted, #5a5a5a);
}
.content-tags .content-tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.content-tags .content-tag-item a {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--colors-border-default, #e7e7e7);
  border-radius: 999px;
  background: var(--colors-bg-inset, #f9f9f9);
  color: var(--color-sqsp-gray-200, #454545);
  font-size: 0.8125rem;
  line-height: 20px;
  text-decoration: none;
}
.content-tags .content-tag-item a:hover {
  border-color: var(--theme-footer-bg, #0e0e0e);
  color: var(--theme-footer-bg, #0e0e0e);
}

.article-attachments {
  margin-top: 22px;
}
.article-attachments .attachments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-attachments .attachment-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--colors-border-default, #e7e7e7);
  border-radius: 6px;
}
.article-attachments .attachment-icon {
  flex-shrink: 0;
  color: var(--colors-fg-muted, #5a5a5a);
}
.article-attachments .attachment-item > a {
  color: var(--theme-footer-bg, var(--colors-fg-default, #0e0e0e));
  font-weight: 500;
  text-decoration: none;
}
.article-attachments .attachment-item > a:hover {
  text-decoration: underline;
}
.article-attachments .attachment-meta {
  display: flex;
  gap: 8px;
  margin-left: auto;
  color: var(--colors-fg-muted, #5a5a5a);
  font-size: 0.8125rem;
}
.article-attachments .attachment-meta a {
  color: inherit;
}

.article-content-card footer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--colors-border-default, #e7e7e7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.article-more-questions {
  color: var(--colors-fg-muted, #5a5a5a);
  font-size: 0.875rem;
}
.article-more-questions a {
  color: var(--theme-footer-bg, var(--colors-fg-default, #0e0e0e));
  font-weight: 500;
  text-decoration: none;
}
.article-more-questions a:hover {
  text-decoration: underline;
}

.article-return-to-top a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--colors-fg-muted, #5a5a5a);
  text-decoration: none;
}
.article-return-to-top a:hover {
  text-decoration: underline;
}
.article-return-to-top a .article-return-to-top-icon {
  transform: rotate(180deg);
}

.request-hero {
  background: var(--theme-footer-bg, #000);
  color: var(--theme-footer-fg, #fff);
  padding: 84px 0 55px;
}

.request-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}

.request-hero-title {
  font-family: var(--theme-font-heading, var(--font-sqsp-ui));
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: -0.03em;
  color: var(--theme-footer-fg, #fff);
  margin: 0;
}

.request-hero-subtitle {
  max-width: 690px;
  font-family: var(--font-sqsp-ui);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--theme-footer-fg, #fff);
  opacity: 0.85;
  margin: 0;
}

.request-body-wrap {
  background: var(--colors-bg-inset, #f9f9f9);
  padding: 22px 0 64px;
}

.request-layout {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 1024px) {
  .request-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1464px) {
  html.chat-drawer-pushed .request-layout {
    grid-template-columns: 1fr;
  }
}

.request-sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
@media (max-width: 1024px) {
  .request-sidebar {
    order: 2;
  }
}
@media (max-width: 1464px) {
  html.chat-drawer-pushed .request-sidebar {
    order: 2;
  }
}

.request-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  background: var(--colors-bg-base, #fff);
  border-radius: 6px;
  padding: 22px 27px;
}

.request-main-header {
  display: flex;
  justify-content: flex-end;
}

.request-back-link {
  font-size: 0.875rem;
}

.request-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.request-form__footer {
  margin-top: 8px;
}

.request-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Chat drawer ─────────────────────────────────────────────────────────────
   The site-wide chatbot surface, replacing the retired /hc/p/chat page. Mounted
   on every page by src/modules/chat-drawer, which appends its own [data-rosetta]
   container INSIDE the page-content landmark — the <main role="main"> Zendesk
   Guide injects around the page template (no .hbs in this theme authors it).
   Opened and closed from any [data-chat-toggle] control, which in practice means
   the navbar button (src/header.js) — the one control on the page. (The search
   page's contact blades still build one too, src/searchResults.js, but that
   markup only renders for a brand with no home.support.card, which is no shipped
   brand. The support card's "Contact us" blade used to be one and is now an
   ordinary link to the ticket form.)

   That mount point is load-bearing. Because the host is a sibling of the header
   and the footer rather than an ancestor, "between the header and the footer" is
   simply "inside the host" — expressible as an absolutely positioned rail
   spanning the host, with the drawer sticky inside it. No geometry measuring, no
   scroll listener, and none of the inertial-scroll judder that comes from a
   fixed box chasing the chrome one frame late.

   The drawer stays in the DOM across close/open — it hides by transform, not by
   unmounting — so Assembled's iframe and the conversation inside it survive.
   That is also why the closed state must be un-hittable: `visibility: hidden`
   (transitioned so it only applies once the slide-out finishes) plus the `inert`
   attribute ChatDrawer.tsx sets.

   PERSISTENT, not overlay: while open the drawer takes its width out of the
   page rather than covering it — see the push block below. */
/* The width the drawer takes out of the page while open. `--chat-drawer-inset`
   is the live value: 0 when closed, and 0 at the full-screen breakpoint (where
   there is no room left to push into, so the drawer covers the page instead).
   ChatDrawer.tsx toggles .chat-drawer-pushed on <html>; keeping the switch on
   the root element is what lets every descendant inherit the inset.

   Anything doing full-bleed math off 100vw has to subtract it or it will
   overflow the narrowed page — styles/_page.scss's .browse-products viewport is
   the one such rule in the theme today. Grep --chat-drawer-inset before adding
   another. */
:root {
  /* $chat-drawer-width (styles/_content-width.scss) rather than a literal:
     the page layouts' breakpoints are derived from this width, so the two
     can't be allowed to drift. */
  --chat-drawer-width: 440px;
  --chat-drawer-inset: 0px;
}

html.chat-drawer-pushed {
  --chat-drawer-inset: min(var(--chat-drawer-width), 100vw);
}

/* The host — the element renderChatDrawer mounted into, marked by that module
   so this stylesheet needs no knowledge of which element it turned out to be
   (the <main> landmark in practice, <body> only as a degenerate fallback).
   Three jobs:

   1. positioning context for the rail below;
   2. `overflow-x: clip` so the closed drawer — parked a full width past the
      inline-end edge — can't extend the page or raise a scrollbar. `clip` and
      NOT `hidden`: hidden would make this a scroll container, which would
      re-anchor the sticky drawer to the host instead of the viewport and break
      the whole approach;
   3. the push (below).

   The theme's one full-bleed rule (.browse-products, styles/_page.scss) sizes
   itself to 100vw minus the inset, so it lands exactly on the host's content box
   and is never the thing being clipped. */
.chat-drawer-host {
  position: relative;
  overflow-x: clip;
  transition: padding-inline-end 240ms ease;
}

/* The push. Padding rather than margin so the page background still paints
   behind the drawer during the slide; matched to the drawer's own 240ms so the
   two move together. Declared only under the pushed class, never as a `0px`
   base, so it can't clobber a padding somebody adds later — the transition sits
   on the base so closing animates too.

   Note what is NOT here any more: the header and footer needed an equal negative
   margin to escape the old <body> padding. They are outside the host now, so
   they keep their full width for free. */
html.chat-drawer-pushed .chat-drawer-host {
  padding-inline-end: var(--chat-drawer-inset);
}

/* The rail: spans the host's full block size at its inline-end edge, and is the
   containing block the drawer sticks within. Out of flow, so page content is
   untouched — the host's padding is what actually makes room.

   pointer-events are off because the rail covers a strip of every page even
   while the drawer is closed; the drawer itself turns them back on. */
.chat-drawer-root {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(var(--chat-drawer-width), 100vw);
  pointer-events: none;
}

.chat-drawer {
  /* Sticky, not fixed. Two clamps come free, and they are exactly the two the
     old measuring code hand-computed:
       - it sticks at --hc-header-height, the strip the sticky header
         permanently occupies (styles/_header.scss), so it can never cover the
         header — and therefore never covers the toggle that closes it.
       - it can't ride past the host's bottom, which is where the footer
         begins. It can never cover the footer.
     Being compositor-driven, it also can't lag behind inertial scrolling. */
  position: sticky;
  inset-block-start: var(--hc-header-height);
  /* Exactly the viewport below the header, at every scroll position — which is
     what keeps BOTH flex children (Assembled's iframe and the AI disclaimer
     under it) on screen from the first paint.
       - scrolled: top is the sticky offset, so the bottom edge lands on the
         fold for any value of the variable;
       - at scroll-top: the drawer is still at its unstuck position — the
         rail's top, i.e. immediately under the in-flow header — so the bottom
         edge lands on the fold precisely because the variable equals the real
         bar height. styles/_header.scss pins the bar to it with a
         min-block-size so that stays true.
     This is what the header being sticky bought: before it, the drawer had to
     assume nothing about the header's visible height, so a 100dvh box hung
     below the fold at the top of every page and the disclaimer was cut off
     until the reader scrolled. */
  block-size: calc(100dvh - var(--hc-header-height));
  /* Never taller than the rail, so a page shorter than the viewport gets a
     drawer that stops at the footer instead of overflowing past it. */
  max-block-size: 100%;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  background: var(--colors-bg-base, #fff);
  border-inline-start: 1px solid var(--colors-border-default, #e7e7e7);
  box-shadow: -8px 0 24px oklch(0% 0 0deg / 0.08);
  /* Above ordinary page content — which matters during the slide (the drawer
     travels over the page before the padding catches up) and at the
     full-screen breakpoint, where it genuinely overlays — but deliberately
     BELOW the header's dropdown / mega flyouts (--popover-z: 50), which drop
     down out of the header and across this strip.
     (The old fixed drawer sat at 100 and covered them; it had to, because it
     spanned the whole viewport.)

     `position: sticky` already opens a stacking context, so Assembled's own
     high z-index is trapped inside the drawer and can't escape past the
     header — the same guarantee the retired chat page bought with
     `isolation: isolate`. */
  z-index: 20;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 240ms ease, visibility 0s linear 240ms;
  /* RTL: the drawer sits at the inline-end edge, so it slides out the other
     way. transform is physical, so the logical property can't do this. */
}
[dir=rtl] .chat-drawer {
  transform: translateX(-100%);
}

.chat-drawer--open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 240ms ease, visibility 0s linear 0s;
}
[dir=rtl] .chat-drawer--open {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .chat-drawer,
  .chat-drawer-host {
    transition: none;
  }
}
/* The drawer carries no chrome of its own — no title bar, no close button. The
   navbar toggle is the single open/close control, and the drawer sticks at
   --hc-header-height precisely so the pinned header holding that control is
   never covered. Assembled is embedded with data-disable-close-button, so it
   contributes none either.

   The drawer takes focus on open (tabIndex={-1} in ChatDrawer.tsx) since there
   is no control inside it to land on. That's a programmatic container focus, so
   suppress the ring — it would outline the whole panel for a move the user
   didn't make with the keyboard. */
.chat-drawer:focus {
  outline: none;
}

/* Holds the widget and the loading state that covers it while it arrives. It is
   the flex child that claims the drawer's free space (the widget itself just
   fills it), and the containing block the spinner centers in — so the spinner
   stays clear of the disclaimer, which is outside this box. */
.chat-drawer-body {
  position: relative;
  display: flex;
  flex: 1;
  min-block-size: 0;
}

/* Assembled injects its iframe here (data-embedded-container). Empty until the
   first open — the script is only fetched then — so it must hold its own space
   rather than collapse. */
.chat-drawer-widget {
  flex: 1;
  min-block-size: 0;
}
.chat-drawer-widget iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* While the widget has nothing worth showing — still loading, or in outage with
   the recovery poll running behind the message (ChatDrawer.tsx).

   `visibility`, deliberately not `display: none`: the host has to keep its
   layout box so Assembled measures the size it will actually be rendered at.
   A retry that laid out its iframe inside a zero-height container would come
   back sized wrong, and there is no second load event to fix it. */
.chat-drawer-widget--hidden {
  visibility: hidden;
}

/* Shown from the first open until Assembled's iframe has loaded
   (src/modules/chat-drawer/widgetSettled.ts), in place of the blank panel that
   span used to be.

   Deliberately NOT hc-components' Activity Indicator: that is a port of
   Rosetta's flipping square, which reads as Squarespace brand expression. What
   stands in for a third-party chat window should be anonymous, so this is a
   plain ring in the drawer's own border/muted colors.

   The fade is delayed rather than immediate — the Activity Indicator's
   documented rule, that a sub-second wait must never flash a spinner, holds for
   any loader. Doing it in CSS keeps it out of the component: `both` holds the
   from-state through the delay, so nothing paints for the first 100ms. */
.chat-drawer-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: chat-drawer-loading-in 120ms ease 100ms both;
}

/* The loading state's accessible name (ChatDrawer.tsx). Announced by the
   role="status" live region above, never drawn — the spinner is the visible
   half. Scoped to the drawer rather than added as a shared utility because the
   theme has no visually-hidden class to reuse; promote it if a second caller
   turns up.

   Out of flow, so it can't disturb the spinner's centering. The 1px box plus
   clip-path is the standard recipe: a zero-size or display:none element is
   dropped from the accessibility tree by some screen readers, so it has to
   occupy space and be clipped instead. */
.chat-drawer-loading-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.chat-drawer-spinner {
  inline-size: 24px;
  block-size: 24px;
  border: 2px solid var(--colors-border-default, #e7e7e7);
  /* One side in the darker color is what makes the rotation legible. */
  border-block-start-color: var(--colors-fg-muted, #5a5a5a);
  border-radius: 50%;
  animation: chat-drawer-spin 800ms linear infinite;
}

@keyframes chat-drawer-loading-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes chat-drawer-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Reduced motion: hold the ring still rather than removing the only thing in
   the panel — it still reads as "something is coming". Matches the drawer's own
   transitions being dropped above. */
@media (prefers-reduced-motion: reduce) {
  .chat-drawer-spinner {
    animation: none;
  }
}
/* Shown when the widget failed to load, in place of the blank panel that used to
   be the whole failure experience. Positioned over the widget host exactly like
   the spinner — the host stays in the DOM so the recovery poll has a container to
   render into — which is why it needs an opaque background of its own rather than
   inheriting the drawer's.

   Not a shared component: nothing else in the theme has a panel-scoped outage
   state to share with, and the page-level announcement banner
   (src/announcementBanner.js) is styled and positioned for a site-wide notice.

   Centred and narrow-measured because it stands alone in a 440px column — a
   full-width paragraph in a box this narrow reads as a wall. */
.chat-drawer-outage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--colors-bg-base, #fff);
}

/* Type comes from the Text component (.text.heading-sm); this only drops the
   margin a <p> carries, since the flex gap above owns the spacing. */
.chat-drawer-outage-title,
.chat-drawer-outage-body {
  margin: 0;
  /* Narrow enough that the sentence doesn't read as a wall in a 440px column,
     wide enough that the default body copy doesn't leave a one-word last line.
     Brand copy will wrap differently — this is a comfortable measure, not a
     fit to one string. */
  max-inline-size: 36ch;
}

.chat-drawer-outage-body {
  color: var(--colors-fg-muted, #5a5a5a);
}

/* The manual retry, under the CTA. Chrome and hover/focus states come from
   hc-components' IconButton (.btn.icon-btn.subtle.sm), which is transparent at
   rest — so at the `sm` default of 1em the glyph reads as a stray mark rather
   than a control. Two adjustments make it legible as one without making it
   compete with the CTA:

   - the glyph goes up to 18px in the 28px button, which is as large as it can be
     before it stops reading as secondary. The button box is left alone: at 28px
     it already clears the 24px minimum target size (WCAG 2.5.8);
   - it takes the body copy's muted color, so it reads as part of the message
     rather than as something floating under it. The IconButton's hover and focus
     states still bring it to full contrast on interaction. */
.chat-drawer-outage-retry {
  --icon-size: 18px;
  color: var(--colors-fg-muted, #5a5a5a);
}

/* AI disclaimer under the widget (window.brandConfig.chat.disclaimer). Type
   comes from the Text component (.text.body-sm, 12px); this only adds the
   centering + muted color the component doesn't carry. */
.chat-drawer-disclaimer {
  margin: 0;
  text-align: center;
  color: var(--colors-fg-muted, #5a5a5a);
  /* A link inside the disclaimer (the "Terms of Service" wording, carried in
     the copy itself) keeps the muted color of the sentence around it, so the
     underline is the only thing marking it as a link — it can't be dropped. */
}
.chat-drawer-disclaimer a {
  color: inherit;
  text-decoration: underline;
}

/* ── Full-width (small viewports) ────────────────────────────────────────────
   Two families of query, and both are needed. The width one covers a narrowed
   desktop window. The coarse-pointer pair is Rosetta's mobile-0 variant, which
   keys off DEVICE dimensions — a resized desktop window never matches it, and a
   phone in landscape never matches the width query. Repeated literally rather
   than via @variant because this stylesheet is unlayered (see the same copy in
   styles/_homepage.scss).

   900px is deliberately ahead of the 801px fine-pointer boundary the navbar
   itself flips at (hc-components navbar.css), which this query used to mirror:
   the push leaves only (viewport - 440px) for the page, so anywhere in the
   801–900px band the reader is left with ~360–460px of content — narrower than
   the mobile layout the same content gets on a phone. Better to cover the page
   than to squeeze it that far. Consequence to keep in mind: between those two
   numbers the drawer is full-screen while the navbar is still in its desktop
   form. That is fine for the one thing it has to preserve — the drawer is inset
   below the header at every size, so the navbar toggle (the only way to close
   it) stays reachable either way.

   The number lives in styles/_content-width.scss as
   $chat-drawer-fullscreen-max, because that is where the page layouts document
   what it means for them: below it the drawer stops narrowing the page, so
   their content-width breakpoints and the viewport agree again. */
@media (max-width: 900px), only screen and (pointer: coarse) and (orientation: portrait) and (max-device-height: 956px), only screen and (pointer: coarse) and (orientation: landscape) and (max-device-width: 956px) {
  /* Here the drawer goes back to covering the content instead of pushing it:
     at full width there is no page left to push into, and a push would drive
     the content to zero. Zeroing the inset (rather than the
     .chat-drawer-pushed class, which ChatDrawer.tsx sets regardless of
     viewport) also means crossing the breakpoint with the drawer already open
     just works — no resize listener. */
  html.chat-drawer-pushed {
    --chat-drawer-inset: 0px;
  }
  /* The rail widens to the whole host; the drawer fills it. The rail is still
     scoped to the host, so the drawer stays below the header and above the
     footer at this size too — which is what keeps the navbar toggle (the only
     way to close the drawer) reachable. */
  .chat-drawer-root {
    inline-size: 100%;
  }
  .chat-drawer {
    border-inline-start: 0;
    box-shadow: none;
  }
}
.request-form,
.ck-body-wrapper {
  --ck-border-radius: var(--radius-sqsp-1, 3px);
  --ck-color-base-background: var(--colors-bg-base, #fff);
  --ck-color-base-border: var(--colors-border-default, #e0e0e0);
  --ck-color-base-text: var(--colors-fg-default, #0e0e0e);
  --ck-color-text: var(--colors-fg-default, #0e0e0e);
  --ck-color-focus-border: var(--colors-border-accent, #1170ff);
  --ck-color-toolbar-background: var(--colors-bg-base, #fff);
  --ck-color-toolbar-border: var(--colors-border-default, #e0e0e0);
  --ck-color-button-default-background: transparent;
  --ck-color-button-default-color: var(--colors-fg-default, #0e0e0e);
  --ck-color-button-default-hover-background: var(--colors-bg-inset, #f6f6f6);
  --ck-color-button-default-active-background: var(--colors-bg-inset, #f6f6f6);
  --ck-color-button-on-background: var(--colors-bg-inset, #f6f6f6);
  --ck-color-button-on-hover-background: var(--colors-bg-inset, #f6f6f6);
  --ck-color-button-on-color: var(--colors-fg-accent, #1170ff);
  --ck-color-dropdown-panel-background: var(--colors-bg-base, #fff);
  --ck-color-dropdown-panel-border: var(--colors-border-default, #e0e0e0);
  --ck-color-list-background: var(--colors-bg-base, #fff);
}

.request-form .ck.ck-editor {
  width: 100%;
}
.request-form .ck.ck-toolbar,
.request-form .ck-content,
.request-form .ck.ck-editor__editable {
  font-family: var(--font-sqsp-ui);
}
.request-form .ck.ck-editor__editable_inline {
  min-height: 132px;
}

.request-form [data-garden-id="forms.file_upload"] {
  border-radius: var(--radius-sqsp-1, 3px);
  border-color: var(--colors-border-default, #e0e0e0);
  background: var(--colors-bg-base, #fff);
  color: var(--colors-fg-muted, #5a5a5a);
  font-family: var(--font-sqsp-ui);
}
.request-form [data-garden-id="forms.file_upload"]:hover {
  border-color: var(--colors-border-strong, #999);
  background: var(--colors-bg-inset, #f6f6f6);
}
.request-form [data-garden-id="forms.file"] {
  border-radius: var(--radius-sqsp-1, 3px);
  border-color: var(--colors-border-default, #e0e0e0);
  font-family: var(--font-sqsp-ui);
}

.search-hero .breadcrumbs,
.article-hero .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-family: var(--font-sqsp-ui);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 16px;
}
.search-hero .breadcrumbs li,
.article-hero .breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b7b7b7;
}
.search-hero .breadcrumbs li + li::before,
.article-hero .breadcrumbs li + li::before {
  content: "/";
  color: rgba(255, 255, 255, 0.5);
}
.search-hero .breadcrumbs a,
.article-hero .breadcrumbs a {
  color: #fff;
  text-decoration: underline;
  text-underline-position: from-font;
}
.search-hero .breadcrumbs a:hover, .search-hero .breadcrumbs a:focus-visible,
.article-hero .breadcrumbs a:hover,
.article-hero .breadcrumbs a:focus-visible {
  text-decoration: none;
}
.search-hero .breadcrumbs a[aria-current=page],
.article-hero .breadcrumbs a[aria-current=page] {
  color: #b7b7b7;
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}

.category-container,
.section-container {
  background: var(--colors-bg-inset, #f9f9f9);
  padding: 22px 0 64px;
}

.browse-layout {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 1024px) {
  .browse-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1464px) {
  html.chat-drawer-pushed .browse-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .browse-sidebar {
    order: 2;
  }
}
@media (max-width: 1464px) {
  html.chat-drawer-pushed .browse-sidebar {
    order: 2;
  }
}

.category-content,
.section-content {
  min-width: 0;
  background: var(--colors-bg-base, #fff);
  border-radius: 6px;
  padding: 22px 27px;
}

.article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.article-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.article-list-link {
  font-size: 1rem;
  line-height: 1.375;
  color: inherit;
  text-decoration: none;
}
.article-list-link:hover, .article-list-link:focus-visible {
  text-decoration: underline;
}

.category-hero {
  padding: 77px 0 59px;
}

.category-sections .accordion-title {
  font-family: var(--font-sqsp-heading);
  font-size: 1rem;
  font-weight: 500;
}

.category-sections .see-all-articles {
  margin-top: 24px;
  --btn-bg: var(--colors-bg-default, #f2f2f2);
  --btn-border-color: var(--btn-bg);
  --btn-fg: var(--colors-fg-default, #0e0e0e);
  --btn-bg-hover: var(--colors-border-default, #e7e7e7);
  --btn-border-hover: var(--btn-bg-hover);
  --btn-fg-hover: var(--btn-fg);
}

.section-hero {
  padding: 77px 0 59px;
}

.section-content .search-results-heading {
  padding-bottom: 22px;
  margin-bottom: 32px;
  border-bottom: var(--border-width-sqsp-1, 1px) solid oklch(from var(--theme-fg) l c h/20%);
}
@media (max-width: 743px) {
  .section-content .search-results-heading {
    margin-bottom: 24px;
  }
}
@media (max-width: 1183px) {
  html.chat-drawer-pushed .section-content .search-results-heading {
    margin-bottom: 24px;
  }
}

.section-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

.section-list-item {
  border-bottom: 1px solid #e8e8e8;
}
.section-list-item:last-child {
  border-bottom: 0;
}

.section-list-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  color: inherit;
  font-size: 1rem;
  text-decoration: none;
}
.section-list-item a svg {
  flex: none;
  color: #6b6b6b;
}
.section-list-item a:hover, .section-list-item a:focus-visible {
  text-decoration: underline;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 32px 0 0;
}

.pagination-first,
.pagination-last {
  display: none;
}

.pagination-prev-link,
.pagination-next-link {
  color: inherit;
  font-size: 0.875rem;
  text-decoration: none;
}
.pagination-prev-link:hover, .pagination-prev-link:focus-visible,
.pagination-next-link:hover,
.pagination-next-link:focus-visible {
  text-decoration: underline;
}

.error-page {
  display: flex;
  justify-content: center;
  padding: 96px 24px 160px;
}
@media (max-width: 800px) {
  .error-page {
    padding: 64px 24px 96px;
  }
}

.error-page-content {
  max-width: 640px;
  text-align: center;
}
.error-page-content > * {
  margin: 0;
}

.error-page-title {
  margin-bottom: 48px;
}
.error-page-title::first-letter {
  text-transform: uppercase;
}

.error-page-content > h2 {
  margin-bottom: 24px;
}

.error-page-message {
  margin-bottom: 32px;
}