/*
 * The paths to ShareRing Solutions (SOLUTIONS-LINKS-1, 12 Oct 2026): the launch
 * bar, "Log in / Sign up" in the header and the drawer, the Solutions flyout's
 * own block, the "New" pill, and the shared lockup, industry row and login link
 * the home, industry and pricing pages use. Markup: inc/solutions-launch.php.
 *
 * Every rule is scoped to a class this file's markup introduces, or to the
 * header and drawer it lives in, so nothing here can reach page content that
 * was there before.
 */

.sr-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------- the Solutions logotype */

/*
 * The kit ShareRing lockup plus "Solutions", as sharering.solutions draws it:
 * --sr-sol-h is the lockup's height; "Solutions" is set so its cap height is
 * the wordmark's (0.504 of the lockup), on the wordmark's baseline (0.752 of
 * the lockup from the top), the kit's gap (0.282 of the lockup) to its left.
 * Inter Tight's cap height is 0.727 em, so a lockup beside text of size S is
 * S x 0.727 / 0.504 tall.
 */
.sr-sol-lockup {
  --sr-sol-h: calc(1rem * 0.727 / 0.504);
  display: inline-flex;
  align-items: flex-start;
  gap: calc(var(--sr-sol-h) * 0.282);
  height: var(--sr-sol-h);
  vertical-align: middle;
  white-space: nowrap;
}

.sr-sol-lockup img {
  display: block;
  flex: none;
  width: auto;
  max-width: none;
  height: var(--sr-sol-h);
}

.sr-sol-lockup .sr-sol-lockup__word {
  font-family: "Inter Tight", var(--font-ui);
  font-size: calc(var(--sr-sol-h) * 0.693);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: var(--sr-sol-h);
  text-transform: none;
  color: #0A1F44;
}

.sr-sol-lockup--dark .sr-sol-lockup__word {
  color: #FFFFFF;
}

/* The ShareRing Link lockup at the same cap height (its wordmark cap is 0.487
   of the file). */
.sr-link-lockup {
  display: block;
  width: auto;
  max-width: none;
  height: calc(1rem * 0.727 / 0.487);
}

/* --------------------------------------------------------- the launch bar */

/*
 * In the document from the server on every page, above the header. It shows
 * only under html.sr-launch-on, which the inline script in <head> sets inside
 * the launch window before the first paint (inc/solutions-launch.php,
 * sr_launch_head(), whose inline style does the hiding), so it is there at
 * first paint and moves nothing (CLS 0). It scrolls away with the page; the
 * sticky header then sticks at the top as before. A dismissed bar is hidden
 * by html.sr-launch-off, set by the same script.
 */
/*
 * The bar's own face of Inter Tight: the same preloaded file (inc/enqueue.php),
 * with font-display: optional. Under the site's swap face, a first visit can
 * paint the bar in the fallback face and re-wrap it when Inter Tight lands: at
 * 390 the text is four lines in the fallback and three in Inter Tight, and the
 * whole page under the bar moved up (CLS 0.02 to 0.036, measured 12 Oct).
 * optional uses Inter Tight only if it is ready for the first paint, otherwise
 * the fallback for that page view, so the bar never changes height. "Inter
 * Tight" is left out of the stack below on purpose: its swap face would take
 * the text over when it loads, which is the shift this prevents.
 */
@font-face {
  font-family: "SR Launch UI";
  src: url("../fonts/inter-tight-var-latin.woff2") format("woff2-variations"),
       url("../fonts/inter-tight-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}

.sr-launch {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  background: #0A1F44;
  color: #FFFFFF;
  font-family: "SR Launch UI", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--type-caption);
  line-height: 1.4;
}

.sr-launch-off .sr-launch {
  display: none;
}

/*
 * A snap point of its own. Touch screens up to 768px snap every scene page
 * (scene-kit.css, y mandatory) and the first stop starts below the bar, so a
 * phone snapped past the bar while the page loaded and the bar was never
 * seen. With the bar a stop, the top of the page is a place to rest.
 */
.sr-launch {
  scroll-snap-align: start;
}

.sr-launch .sr-launch__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  max-width: min(1440px, 100%);
  min-height: var(--sr-tap-min);
  margin-inline: auto;
  padding: 0 var(--gutter);
}

.sr-launch .sr-launch__text {
  margin: 0;
  padding-block: var(--space-2);
  color: #FFFFFF;
  font-weight: var(--weight-medium);
}

.sr-launch a.sr-launch__go,
.sr-launch a.sr-launch__go:visited {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: var(--sr-tap-min);
  padding-inline: var(--space-2);
  color: #2CE5A7;
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.sr-launch a.sr-launch__go:hover,
.sr-launch a.sr-launch__go:focus-visible {
  color: #FFFFFF;
}

.sr-launch a.sr-launch__go svg {
  transition: translate var(--dur-fast) var(--ease);
}

.sr-launch a.sr-launch__go:hover svg,
.sr-launch a.sr-launch__go:focus-visible svg {
  translate: 3px 0;
}

.sr-launch a:focus-visible,
.sr-launch button:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* A bare <button>, so it answers the kit's blue fill and padding. Shown only
   when JS can act on it. */
.sr-launch button.sr-launch__close {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--sr-tap-min);
  height: var(--sr-tap-min);
  margin: 0 calc(var(--space-2) * -1) 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.sr-launch-js .sr-launch button.sr-launch__close {
  display: inline-flex;
}

.sr-launch button.sr-launch__close:hover,
.sr-launch button.sr-launch__close:focus {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

@media (max-width: 760px) {
  .sr-launch .sr-launch__inner {
    justify-content: flex-start;
    padding-inline-end: calc(var(--gutter) - var(--space-2));
  }

  .sr-launch .sr-launch__text {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sr-launch a.sr-launch__go svg {
    transition: none;
    translate: none;
  }
}

/*
 * Cinema pages hang the header absolutely at the top of the document. With the
 * bar above it, top: auto leaves the header at its own place in the flow,
 * which is straight under the bar, whatever height the bar wraps to.
 */
.sr-launch-on .sr-cinema .sr-header {
  top: auto;
}

/* ------------------------------------------------------- the "New" pill */

.sr-nav-new {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: #0A1F44;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  line-height: 1.45;
  text-transform: uppercase;
}

.sr-drawer .sr-nav-new {
  font-size: 0.625rem;
  letter-spacing: 0.06em;
}

/* ---------------------------------------------- "Log in / Sign up" (header) */

/* The CTA cluster stretches to the full bar height so the account flyout hangs
   off the bar's bottom edge, as the nav's flyouts do. Its buttons stay centred. */
.sr-header .sr-header__cta {
  align-self: stretch;
}

.sr-header .sr-acct {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}

/* A <button>, so the kit's bare-button fill is answered here too. */
.sr-header button.sr-acct__toggle,
.sr-header button.sr-acct__toggle:hover,
.sr-header button.sr-acct__toggle:focus {
  margin: 0;
}

.sr-header button.sr-acct__toggle {
  gap: 6px;
}

.sr-header .sr-acct__chev {
  flex: none;
  transition: rotate var(--dur-fast) var(--ease);
}

.sr-header .sr-acct:hover .sr-acct__chev,
.sr-header .sr-acct:focus-within .sr-acct__chev {
  rotate: 180deg;
}

.sr-header .sr-acct.sr-fly-shut .sr-acct__chev {
  rotate: 0deg;
}

/* The flyout: the nav's own panel (white, hairline, no top border, the same
   radius, shadow and motion), hung from the right. */
.sr-header .sr-acct__panel {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  z-index: var(--z-header);
  display: grid;
  gap: var(--space-2);
  min-width: 17.5rem;
  padding: var(--space-3);
  background: var(--sr-canvas);
  border: var(--border-hairline);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  translate: 0 calc(var(--space-1) * -1);
  transition:
    opacity var(--dur-base) var(--ease),
    translate var(--dur-base) var(--ease),
    visibility var(--dur-base) var(--ease);
}

.sr-header .sr-acct:hover > .sr-acct__panel,
.sr-header .sr-acct:focus-within > .sr-acct__panel {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* Escape (header.js): shut until the pointer or focus leaves. */
.sr-header .sr-acct.sr-fly-shut > .sr-acct__panel,
.sr-header .sr-nav__list > li.sr-fly-shut > .sub-menu {
  opacity: 0;
  visibility: hidden;
  translate: 0 calc(var(--space-1) * -1);
}

.sr-header .sr-nav__list > li.sr-fly-shut > a::before,
.sr-header .sr-nav__list > li.sr-fly-shut > .sr-group::before {
  scale: 0 1;
}

.sr-acct__group + .sr-acct__group {
  padding-top: var(--space-2);
  border-top: var(--border-hairline);
}

/* RC-3c: before 13 Oct 13:00 Melbourne the Solutions half is hidden
   (.sr-sol-only), so the Link half opens the panel with no rule above it. */
html:not(.sr-sol-on) .sr-acct__group--link {
  padding-top: 0;
  border-top: 0;
}

.sr-acct__head {
  display: flex;
  align-items: center;
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-1) calc(var(--space-3) + 10px);
}

.sr-acct__links {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The rows are the nav flyout's rows (header.css, .sub-menu a), restated for
   this panel: the same type, padding, hover rule and shift. */
.sr-header .sr-acct__links a,
.sr-drawer .sr-acct__links a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--sr-tap-min);
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 10px);
  border-radius: var(--radius-md);
  color: var(--sr-ink);
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  letter-spacing: 0.006em;
  line-height: var(--leading-snug);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    translate var(--dur-fast) var(--ease);
}

.sr-header .sr-acct__links a::before,
.sr-drawer .sr-acct__links a::before {
  content: "";
  position: absolute;
  left: var(--space-2);
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 1px;
  background: var(--sr-brand);
  translate: 0 -50%;
  transition: height var(--dur-fast) var(--ease);
}

.sr-header .sr-acct__links a:hover,
.sr-header .sr-acct__links a:focus-visible,
.sr-drawer .sr-acct__links a:hover,
.sr-drawer .sr-acct__links a:focus-visible {
  background: var(--sr-tint);
  color: var(--sr-brand);
  translate: 3px 0;
}

.sr-header .sr-acct__links a:hover::before,
.sr-header .sr-acct__links a:focus-visible::before,
.sr-drawer .sr-acct__links a:hover::before,
.sr-drawer .sr-acct__links a:focus-visible::before {
  height: 1.05em;
}

/* "Start free" is the one row that begins something new: the brand ink. */
.sr-header .sr-acct__links .sr-acct__start a,
.sr-drawer .sr-acct__links .sr-acct__start a {
  color: var(--sr-brand);
  font-weight: var(--weight-semibold);
}

@media (prefers-reduced-motion: reduce) {
  .sr-header .sr-acct__links a:hover,
  .sr-header .sr-acct__links a:focus-visible,
  .sr-drawer .sr-acct__links a:hover,
  .sr-drawer .sr-acct__links a:focus-visible {
    translate: none;
  }

  .sr-header .sr-acct__panel {
    translate: none;
  }
}

/* -------------------------------------------- "Log in / Sign up" (drawer) */

.sr-drawer .sr-drawer__acct {
  margin-top: var(--space-6);
}

/* The drawer's group caption (header.css, .sr-drawer__list > li > .sr-group). */
.sr-drawer .sr-drawer__acct-title {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline);
  color: var(--sr-ink-soft);
  font-family: var(--font-ui);
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

.sr-drawer .sr-acct__head {
  padding-inline-start: 0;
}

.sr-drawer .sr-acct__links a {
  padding-inline-start: 0;
}

.sr-drawer .sr-acct__links a::before {
  content: none;
}

/* ---------------------------------------------------- the Solutions flyout */

/* The feature row: the logotype over its one line. The row may wrap. */
.sr-header .sr-nav__list .sub-menu > li.sr-sol-feature > a,
.sr-drawer .sr-drawer__list .sub-menu > li.sr-sol-feature > a {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  white-space: normal;
}

.sr-header .sr-nav__list .sub-menu > li.sr-sol-feature > a {
  max-width: 21rem;
}

/* The drawer's rows are blocks; this one is a column. */
.sr-drawer .sr-drawer__list .sub-menu > li.sr-sol-feature > a {
  display: flex;
}

.sr-sol-feature__line {
  color: var(--sr-ink-soft);
  font-size: var(--type-caption);
  font-weight: var(--weight-regular);
  line-height: 1.4;
}

.sr-header .sr-nav__list .sub-menu > li.sr-sol-feature > a:hover .sr-sol-feature__line,
.sr-header .sr-nav__list .sub-menu > li.sr-sol-feature > a:focus-visible .sr-sol-feature__line {
  color: var(--sr-ink);
}

/* "Log in to your portal": a button in the flyout, the brand fill, with a rule
   under it between the Solutions block and the capability pages below. */
.sr-header .sr-nav__list .sub-menu > li.sr-sol-cta,
.sr-drawer .sr-drawer__list .sub-menu > li.sr-sol-cta {
  margin-bottom: var(--space-1);
  padding: var(--space-1) 0 var(--space-3);
  border-bottom: var(--border-hairline);
}

.sr-header .sr-nav__list .sub-menu > li.sr-sol-cta > a,
.sr-drawer .sr-drawer__list .sub-menu > li.sr-sol-cta > a {
  justify-content: center;
  min-height: var(--sr-tap-min);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--sr-cta-surface);
  color: var(--sr-cta-ink);
  font-weight: var(--weight-semibold);
  translate: none;
}

.sr-header .sr-nav__list .sub-menu > li.sr-sol-cta > a {
  margin-inline: var(--space-3);
}

.sr-header .sr-nav__list .sub-menu > li.sr-sol-cta > a:hover,
.sr-header .sr-nav__list .sub-menu > li.sr-sol-cta > a:focus-visible,
.sr-drawer .sr-drawer__list .sub-menu > li.sr-sol-cta > a:hover,
.sr-drawer .sr-drawer__list .sub-menu > li.sr-sol-cta > a:focus-visible {
  background: var(--sr-cta-surface-hover);
  color: var(--sr-cta-ink);
  font-weight: var(--weight-semibold);
  translate: none;
}

.sr-header .sr-nav__list .sub-menu > li.sr-sol-cta > a::before {
  content: none;
}

.sr-drawer .sr-drawer__list .sub-menu > li.sr-sol-cta > a {
  display: flex;
  width: 100%;
  margin-top: var(--space-2);
}

/* ----------------------------------- shared: industry row and login link */

/*
 * Used on pages (home, the industry pages, /pricing/), on the scene kit's
 * dark ground. Plain links, no box (S2): each is a 44px target.
 */
.sr-sol-industries {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-sol-choose {
  margin: var(--space-5) 0 var(--space-4);
}

.sr-sol-choose__label {
  margin: 0;
  color: rgba(234, 240, 255, 0.78);
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.sr-sol-industries a,
.sr-sol-industries a:visited,
a.sr-sol-login,
a.sr-sol-login:visited {
  display: inline-flex;
  align-items: center;
  min-height: var(--sr-tap-min);
  color: #FFFFFF;
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.sr-sol-industries a:hover,
.sr-sol-industries a:focus-visible,
a.sr-sol-login:hover,
a.sr-sol-login:focus-visible {
  color: #FFFFFF;
  text-decoration-color: currentColor;
}

a.sr-sol-login,
a.sr-sol-login:visited {
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  color: rgba(234, 240, 255, 0.92);
}

/*
 * "Explore ShareRing Solutions" wraps to two lines on a phone, and a wrapped
 * title keeps the full width it had before wrapping, which strands the go disc
 * at the far side of the column. Sized to its longer line ("Explore
 * ShareRing"), the title's box ends where its words end and the disc sits
 * beside them.
 */
@media (max-width: 600px) {
  .su-sol-cta .srk-cta-big-title,
  .srpr-sol-cta .srk-cta-big-title,
  .srhm-sol-cta .srk-cta-big-title {
    width: 9.2em;
    max-width: 100%;
  }
}