/* Carrier Bridge sign-in (templates/auth/sign_in.html).

   The launch film's world: Nocturne to Ink navy, Chalk type, Luminous and
   Halo blues, Inter, the perspective dot floor (drawn by sign-in.js into
   .floor), and the real product in a light window. Motion runs only under
   html[data-cb-motion], which sign-in.js sets when the visitor has not asked
   for reduced motion; without it every element sits in its settled state. */

:root {
  --nocturne: #04070e;
  --ink: #0a1024;
  --lapis: #1e387f;
  --azure: #2563ff;
  --luminous: #437ffe;
  --halo: #79a6ff;
  --chalk: #f6f7ff;
  --text-2: #c5cbda;
  --text-3: #8a93a8;
  --dim: #66718f;
  --panel-ink: #0a1024;
  --panel-text: #3b4458;
  --panel-muted: #586176;
  --panel-line: #e3e7f0;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --gutter: clamp(20px, 4vw, 56px);
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--nocturne); }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss03";
  color: var(--chalk);
  background: linear-gradient(180deg, var(--nocturne) 0%, #060b19 44%, var(--ink) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--luminous); color: #fff; }

/* The film's lighting: a blue horizon from below and a Lapis lift top
   right. It lives on .ground with the floor, so on a scrolling phone page
   both stay in the first screen. */
.ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(130% 62% at 50% 112%, rgba(37, 99, 255, 0.34) 0%, rgba(30, 56, 127, 0.24) 34%, rgba(10, 16, 36, 0) 70%),
    radial-gradient(58% 46% at 90% 4%, rgba(30, 56, 127, 0.24), rgba(30, 56, 127, 0) 72%);
}

/* The floor band starts at the horizon; sign-in.js draws the rows into it
   with the vanishing point on its top edge. */
.floor {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 50%;
  display: block;
  transform-origin: 50% 0;
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* The headline's pull-back runs wider than a phone for a moment. */
  overflow-x: clip;
}

/* Masthead ---------------------------------------------------------------- */

/* Masthead, stage and footer share one column so their edges line up. */
.masthead,
.stage,
.foot {
  width: 100%;
  max-width: var(--frame, 1480px);
  margin: 0 auto;
}
.is-solo { --frame: 100%; }
/* Fixed rows, so a page without a masthead (a client's white-label sign-in)
   still gives the stretch row to the stage, not the footer. */
.masthead { grid-row: 1; }
.stage { grid-row: 2; }
.foot { grid-row: 3; }

.masthead { padding: clamp(20px, 3.6vh, 40px) var(--gutter) 0; }
.is-solo .masthead { text-align: center; }

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}
.lockup-icon {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.7);
}
.lockup-text { display: grid; gap: 1px; }
.lockup-name {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.018em;
  line-height: 1.2;
}
.lockup-sub {
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-3);
}

/* The Renaissance lockup: the real David mark, mirrored so he faces the
   viewer's right, beside the wordmark with only "AI" in the accent. */
.ren {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--chalk);
}
.ren-mark {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  transform: scaleX(-1);
}
.wordmark {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}
.wordmark::first-letter { font-size: 1.18em; }
/* Luminous, lifted a step so the small "AI" keeps 4.5:1 over the horizon
   glow behind the footer. */
.wordmark b { color: #5c8dff; font-weight: inherit; }

/* Stage ------------------------------------------------------------------- */

.stage { padding: clamp(28px, 5vh, 56px) var(--gutter); }

.has-story .stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
  grid-template-areas:
    "chain   panel"
    "lede    panel"
    "glimpse panel";
  grid-template-rows: auto auto auto;
  column-gap: clamp(48px, 7vw, 128px);
  align-content: center;
}

.is-solo .stage {
  display: grid;
  place-items: center;
}
.is-solo .signin { grid-area: auto; width: min(100%, 420px); }

/* The argument, in the film's two-tone kinetic type. Sized off its own
   column (the h2 is the size container), so "Any census, any shape." always
   holds one line: that line runs about 10.6em. */
.chain {
  grid-area: chain;
  container-type: inline-size;
  margin: 0;
  font-weight: 640;
  line-height: 1.03;
  letter-spacing: -0.038em;
}
.chain-line {
  display: block;
  font-size: clamp(26px, 4.4vw, 70px);
  font-size: clamp(26px, 9cqi, var(--chain-max, 70px));
  white-space: nowrap;
}
.chain-line:last-child { color: var(--halo); }

.story-lede {
  grid-area: lede;
  max-width: 31em;
  margin: clamp(18px, 2.8vh, 30px) 0 0;
  font-size: clamp(16px, 1.22vw, 18.5px);
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}
.nw { white-space: nowrap; }

/* Sign-in panel: the product's own light surface. ------------------------- */

.signin {
  grid-area: panel;
  align-self: center;
  color-scheme: light;
  padding: clamp(28px, 3vw, 40px);
  border-radius: 18px;
  background: #fff;
  color: var(--panel-ink);
  box-shadow:
    0 48px 90px -40px rgba(0, 0, 0, 0.85),
    0 14px 30px -14px rgba(2, 6, 23, 0.6);
}
.signin h1 {
  margin: 0;
  font-size: clamp(23px, 1.8vw, 27px);
  font-weight: 680;
  line-height: 1.2;
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.signin-lede {
  margin: 7px 0 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--panel-text);
}
/* The notice above the form (signed out, a flashed message): stronger than the instruction under it, and the pair sit close. */
.signin-notice { margin-bottom: 8px; font-weight: 620; }
.signin-notice + .signin-lede { margin-top: 0; }
.field-label {
  display: block;
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 560;
  color: var(--panel-text);
}
.signin input[type="email"] {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  color: var(--panel-ink);
  background: #fff;
  border: 1px solid #c3cada;
  border-radius: 10px;
  caret-color: var(--azure);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.signin input[type="email"]::placeholder { color: #6b7489; opacity: 1; }
.signin input[type="email"]:hover { border-color: #9ea8bd; }
.signin input[type="email"]:focus {
  outline: none;
  border-color: var(--azure);
  box-shadow: 0 0 0 4px rgba(37, 99, 255, 0.16);
}

.btn-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  margin-top: 12px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--azure);
  color: #fff;
  font: inherit;
  font-size: 15.5px;
  font-weight: 620;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 18px -10px rgba(10, 16, 36, 0.7);
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
}
.btn-continue:hover { background: #1d52e8; }
.btn-continue:active { transform: scale(0.98); }
.btn-continue:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 3px;
}
.btn-arrow { flex: none; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn-continue:hover .btn-arrow { transform: translateX(3px); }
}

.hint {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--panel-muted);
}

/* Product glimpse ---------------------------------------------------------- */

.glimpse {
  grid-area: glimpse;
  max-width: 600px;
  margin-top: clamp(26px, 4.6vh, 50px);
  container-type: inline-size;
}

/* Everything inside scales with the window's width (em off a cqi size). */
.glimpse-window {
  display: grid;
  /* One shrinkable track: an auto track grew to the widest state's
     min-content, and at 320px the window cropped words mid-way. */
  grid-template-columns: minmax(0, 1fr);
  color-scheme: light;
  font-size: clamp(11px, 2.16cqi, 13px);
  font-variant-numeric: tabular-nums;
  color: #232830;
  background: #f7f8fb;
  border-radius: 1.1em;
  box-shadow:
    0 40px 70px -36px rgba(0, 0, 0, 0.85),
    0 10px 24px -14px rgba(2, 6, 23, 0.6);
  overflow: hidden;
}
.g-state { grid-area: 1 / 1; visibility: hidden; }
.g-state[data-state="1"] { visibility: visible; }

.g-bar {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 3.2em;
  padding: 0 1.25em;
  background: #fff;
  border-bottom: 1px solid #e6e9f0;
  white-space: nowrap;
}
.g-ico { flex: none; width: 1.1em; height: 1.1em; color: #5b6478; }
.g-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: #0a1024;
}
.g-meta {
  margin-left: auto;
  padding-left: 1em;
  font-size: max(11px, 0.92em);
  color: #5b6478;
}
.g-ready { color: #157a3f; font-weight: 550; }

.g-grid { padding: 0.9em 1.25em 1.1em; }
.g-row {
  display: grid;
  align-items: center;
  height: 2.5em;
  border-bottom: 1px solid #e9ecf3;
  white-space: nowrap;
}
.g-row > span {
  overflow: hidden;
  padding-right: 0.9em;
  text-overflow: ellipsis;
}
.g-body .g-row:last-child { border-bottom: 0; }
.g-head {
  height: 2.2em;
  font-size: max(11px, 0.9em);
  font-weight: 600;
  color: #5b6478;
  border-bottom-color: #dfe3ec;
}
.g-cols-4 .g-row { grid-template-columns: 1.35fr 1fr 1fr 0.95fr; }
.g-cols-ask .g-row { grid-template-columns: 1.5fr 1fr; }
.g-cols-ask .g-body .g-row > span:first-child { font-weight: 560; color: #0a1024; }
.g-cols-ask .g-body .g-row > span:nth-child(2) { color: #5b6478; }
/* The note and the stated-back job run the full row: a label, then the words. */
.g-cols-ask .g-body .g-row.g-note,
.g-cols-ask .g-body .g-row.g-said { grid-template-columns: 6.6em minmax(0, 1fr); }
.g-cols-ask .g-body .g-row > span.g-note-label,
.g-cols-ask .g-body .g-row > span.g-said-label { color: #5b6478; font-weight: 400; }
.g-cols-ask .g-body .g-row > span.g-note-text { color: #232830; font-weight: 400; }
.g-cols-ask .g-body .g-row > span.g-said-text {
  display: flex;
  align-items: center;
  gap: 0.45em;
  color: #0a1024;
  font-weight: 620;
}
.g-said-text svg { flex: none; color: #157a3f; }
.g-messy .g-body .g-row > span { color: #3b4458; }
.g-body { position: relative; }

/* The reader: a selected-row band that walks the source rows. */
.g-scan {
  position: absolute;
  left: -0.5em;
  right: -0.5em;
  top: 0;
  height: 2.5em;
  border-radius: 0.4em;
  background: rgba(67, 127, 254, 0.1);
  box-shadow: inset 0 0 0 1px rgba(67, 127, 254, 0.45);
  opacity: 0;
}

/* One footer per state, the same height in all three, so the window never
   changes size or leaves a dead band. */
.g-foot {
  display: flex;
  align-items: center;
  gap: 1em;
  height: 2.5em;
  margin: 0 1.25em 1.15em;
  white-space: nowrap;
}
.g-reply,
.g-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #5b6478;
}
.g-progress {
  flex: 0 1 9em;
  min-width: 3em;
  height: 0.4em;
  margin-left: auto;
  border-radius: 1em;
  background: #e2e7f2;
  overflow: hidden;
}
.g-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--luminous);
  transform: scaleX(0.4);
  transform-origin: 0 50%;
}

/* The film's "every plan and tier, counted", in the product's own words. */
.g-tally {
  gap: 1.5em;
  padding: 0 0.9em;
  border-radius: 0.6em;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e3e7f0;
  color: #3b4458;
}
.g-tally b { font-weight: 650; color: #0a1024; }
.g-tally-plan { font-weight: 600; color: #0a1024; }
.g-tally-total { margin-left: auto; }
.g-tally .g-ask-link { margin-left: auto; color: #1d4fd8; font-weight: 600; }

/* The tier column the carrier's template asked for, tinted the way the
   film's output tiles are. */
.g-out .g-row > span:nth-child(4) {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-left: 0.7em;
  background: #ebf1ff;
  color: #1d4fd8;
  font-weight: 600;
}
.g-out .g-head > span:nth-child(4) { background: #dfe8ff; }
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color 150ms ease;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: var(--chalk); }
.motion-toggle:focus-visible { outline: 2px solid var(--halo); outline-offset: 2px; }
.motion-toggle .i-play,
[data-cb-paused] .motion-toggle .i-pause { display: none; }
[data-cb-paused] .motion-toggle .i-play { display: block; }

/* Footer ------------------------------------------------------------------ */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding: 0 var(--gutter) clamp(18px, 3.2vh, 32px);
}
.is-solo .foot { justify-content: center; }
.foot .legal-links { justify-content: flex-end; }
.foot .legal-links a {
  color: #a3acc2;
  opacity: 1;
  text-underline-offset: 3px;
}
.foot .legal-links a:hover,
.foot .legal-links a:focus-visible { color: var(--chalk); }
.foot .legal-links a:focus-visible { outline: 2px solid var(--halo); outline-offset: 2px; border-radius: 2px; }

/* Motion ------------------------------------------------------------------- */

@keyframes cb-rise {
  from { opacity: 0; transform: translateY(var(--rise, 14px)); }
}
@keyframes cb-type {
  from { opacity: 0; transform: translateY(0.3em) scale(1.06); filter: blur(10px); }
}
/* The film's open: the first words start big and pull back until they read
   whole. */
@keyframes cb-pullback {
  0% { opacity: 0; transform: scale(1.2); filter: blur(14px); }
  35% { opacity: 1; }
}
@keyframes cb-fade {
  from { opacity: 0; }
}
@keyframes cb-ground-in {
  from { opacity: 0; transform: translateY(8%) scale(1.08); }
}
@keyframes cb-drift {
  to { transform: scale(1.05); }
}

/* Both moves sit on the canvas, inside .ground's clip: a transform on
   .ground itself grew the page and flashed a scrollbar during the entrance. */
[data-cb-motion] .ground { animation: cb-fade 900ms ease both; }
[data-cb-motion] .floor {
  animation:
    cb-ground-in 1700ms var(--ease-out) both,
    cb-drift 18s ease-in-out 1.7s infinite alternate;
}
[data-cb-motion] .masthead > * { animation: cb-rise 650ms var(--ease-out) 60ms both; --rise: 8px; }
[data-cb-motion] .signin { animation: cb-rise 700ms var(--ease-out) 140ms both; --rise: 18px; }
[data-cb-motion] .chain-line {
  transform-origin: 0 80%;
  animation: cb-type 950ms var(--ease-out) both;
}
[data-cb-motion] .chain-line:nth-child(1) {
  transform-origin: 0 50%;
  animation: cb-pullback 1200ms var(--ease-out) 120ms both;
}
[data-cb-motion] .chain-line:nth-child(2) { animation-delay: 520ms; }
[data-cb-motion] .chain-line:nth-child(3) { animation-delay: 640ms; }
[data-cb-motion] .story-lede { animation: cb-rise 650ms var(--ease-out) 560ms both; --rise: 10px; }
[data-cb-motion] .glimpse { animation: cb-rise 900ms var(--ease-out) 680ms both; --rise: 26px; }
[data-cb-motion] .foot { animation: cb-fade 900ms ease 800ms both; }

/* The loop: sign-in.js steps html[data-beat] 0, 1, 2. The lit line and the
   window's state move together; everything else rests dimmed. */
[data-cb-motion] .chain-line { color: var(--dim); transition: color 700ms ease; }
[data-cb-motion][data-beat="0"] .chain-line:nth-child(1),
[data-cb-motion][data-beat="1"] .chain-line:nth-child(2) { color: var(--chalk); }
[data-cb-motion][data-beat="2"] .chain-line:nth-child(3) { color: var(--halo); }

[data-cb-motion] .g-state {
  visibility: visible;
  opacity: 0;
  transform: translateY(1.1em) scale(0.985);
  filter: blur(5px);
  transition:
    opacity 550ms ease,
    transform 800ms var(--ease-out),
    filter 550ms ease;
}
[data-cb-motion] .g-state[data-phase="past"] { transform: translateY(-0.8em) scale(0.99); }
[data-cb-motion] .g-state[data-phase="now"] {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: 220ms;
}

@keyframes cb-scan {
  0% { opacity: 0; transform: translateY(0); }
  6% { opacity: 1; transform: translateY(0); }
  18% { transform: translateY(0); }
  27% { transform: translateY(100%); }
  41% { transform: translateY(100%); }
  50% { transform: translateY(200%); }
  64% { transform: translateY(200%); }
  73% { transform: translateY(300%); }
  90% { opacity: 1; transform: translateY(300%); }
  100% { opacity: 0; transform: translateY(300%); }
}
@keyframes cb-progress {
  from { transform: scaleX(0.06); }
  to { transform: scaleX(1); }
}
[data-cb-motion] .g-state[data-phase="now"] .g-scan {
  animation: cb-scan 4500ms var(--ease-in-out) 400ms both;
}
[data-cb-motion] .g-state[data-phase="now"] .g-progress > span {
  animation: cb-progress 4600ms cubic-bezier(0.3, 0.1, 0.3, 1) 300ms both;
}

/* Beat 1: the files land, then the note, then the job is stated back. */
[data-cb-motion] .g-ask[data-phase="now"] .g-body .g-row {
  animation: cb-rise 650ms var(--ease-out) both;
  --rise: 0.5em;
}
[data-cb-motion] .g-ask[data-phase="now"] .g-body .g-row:nth-child(1) { animation-delay: 380ms; }
[data-cb-motion] .g-ask[data-phase="now"] .g-body .g-row:nth-child(2) { animation-delay: 620ms; }
[data-cb-motion] .g-ask[data-phase="now"] .g-body .g-row:nth-child(3) { animation-delay: 1100ms; }
[data-cb-motion] .g-ask[data-phase="now"] .g-body .g-row:nth-child(4) { animation-delay: 2300ms; }
[data-cb-motion] .g-ask[data-phase="now"] .g-tally { animation: cb-rise 650ms var(--ease-out) 2900ms both; --rise: 0.5em; }

[data-cb-motion] .g-out[data-phase="now"] .g-body .g-row {
  animation: cb-rise 650ms var(--ease-out) both;
  --rise: 0.5em;
}
[data-cb-motion] .g-out[data-phase="now"] .g-body .g-row:nth-child(1) { animation-delay: 380ms; }
[data-cb-motion] .g-out[data-phase="now"] .g-body .g-row:nth-child(2) { animation-delay: 470ms; }
[data-cb-motion] .g-out[data-phase="now"] .g-body .g-row:nth-child(3) { animation-delay: 560ms; }
[data-cb-motion] .g-out[data-phase="now"] .g-body .g-row:nth-child(4) { animation-delay: 650ms; }
[data-cb-motion] .g-out[data-phase="now"] .g-tally { animation: cb-rise 650ms var(--ease-out) 820ms both; --rise: 0.5em; }

/* Pause control: everything holds where it is. */
[data-cb-paused] *,
[data-cb-paused] *::before,
[data-cb-paused] *::after { animation-play-state: paused !important; }

/* Belt and braces: never move for a visitor who asked for stillness, even if
   the preference changes after load. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Responsive --------------------------------------------------------------- */

/* Large desktop windows (1920x1080 and up): a wider frame and a bigger
   headline, so the composition fills the screen the way the end card does. */
@media (min-width: 1700px) and (min-height: 1000px) {
  .has-story { --frame: 1600px; }
  .chain { --chain-max: 84px; }
  .glimpse { max-width: 640px; }
  .lockup { gap: 15px; }
  .lockup-icon { width: 60px; height: 60px; border-radius: 14px; }
  .lockup-name { font-size: 23px; }
  .lockup-sub { font-size: 14px; }
}

/* Laptop-height windows (1440x900, 1536x864): keep everything above the
   fold. Wider windows of this height fit at full size. */
@media (min-width: 981px) and (max-width: 1680px) and (min-height: 821px) and (max-height: 940px) {
  .chain { --chain-max: 62px; }
  .stage { padding-top: 24px; padding-bottom: 24px; }
  .glimpse { max-width: 560px; }
}

/* Short desktop windows (1366x768, 1280x720). */
@media (min-width: 981px) and (max-height: 820px) {
  .chain { --chain-max: 56px; }
  .masthead { padding-top: 18px; }
  .stage { padding-top: 16px; padding-bottom: 16px; }
  .story-lede { margin-top: 18px; font-size: 16px; }
  .glimpse { max-width: 500px; margin-top: 20px; }
  .motion-toggle { margin-top: 8px; }
}

@media (max-width: 980px) {
  .has-story { --frame: 640px; }
  .has-story .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "chain"
      "panel"
      "lede"
      "glimpse";
    align-content: start;
  }
  .chain { --chain-max: 56px; }
  .signin { margin-top: clamp(22px, 3.6vh, 32px); }
  .story-lede { margin-top: 36px; }
  .glimpse { max-width: none; margin-top: 30px; }
  .ground { bottom: auto; height: 100vh; height: 100svh; }
  /* The ground is one screen tall here while the page scrolls on; fade its
     glow and dots out before the edge instead of ending in a hard seam. */
  .ground {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent);
  }
  .floor { top: 58%; height: 42%; }
}

@media (max-width: 520px) {
  .masthead { padding-top: 18px; }
  .lockup { gap: 11px; }
  .lockup-icon { width: 38px; height: 38px; border-radius: 9px; }
  .lockup-name { font-size: 17px; }
  .lockup-sub { font-size: 12.5px; }
  .stage { padding-top: 22px; }
  .chain { letter-spacing: -0.034em; }
  .signin { padding: 24px 20px 22px; border-radius: 16px; }
  .signin-lede { margin-bottom: 20px; }
  .signin-notice { margin-bottom: 8px; }
  /* Phones: the window keeps an 11px floor and drops one column per state
     instead of shrinking past legibility. */
  .glimpse-window { font-size: 11px; }
  .g-source .g-row > span:nth-child(4),
  .g-out .g-row > span:nth-child(3) { display: none; }
  .g-cols-4 .g-row { grid-template-columns: 1.3fr 1fr 0.9fr; }
  .g-tally { gap: 1em; }
  .foot { flex-direction: column; justify-content: center; text-align: center; }
  .foot .legal-links { justify-content: center; }
}


/* The wider brand (BRV1). Only when a client's wider-brand setting is on: the page gets
   body.is-brand and the --wb-* colours, all computed and AA-cleared in brand_contrast.wide_tokens.
   The client's logo and name lead the page, the ground takes the brand's depth in place of the
   product navy, and the one button is the brand's action colour. Nothing here applies without
   .is-brand, so every other sign-in page is unchanged. */
.is-brand { background: var(--wb-ground); }
html:has(.is-brand) { background: var(--wb-ground); }
.is-brand .ground {
  background:
    radial-gradient(120% 60% at 50% 115%, color-mix(in srgb, var(--wb-hue) 30%, transparent) 0%, transparent 70%);
}
.is-brand .floor { display: none; }
.is-brand ::selection { background: var(--wb-action); color: var(--wb-action-fg); }
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--wb-ground-fg);
}
.brand-lockup-logo {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
}
.brand-lockup-logo img,
.brand-lockup-logo svg { display: block; width: 100%; height: 100%; padding: 3px; object-fit: contain; box-sizing: border-box; }
.brand-lockup-text { display: grid; gap: 1px; text-align: left; }
.brand-lockup-name { font-size: 20px; font-weight: 650; letter-spacing: -0.018em; line-height: 1.2; }
.brand-lockup-sub { font-size: 13px; line-height: 1.3; color: color-mix(in srgb, var(--wb-ground-fg) 72%, var(--wb-ground)); }
.is-brand .signin input[type="email"] { caret-color: var(--wb-ink); }
.is-brand .signin input[type="email"]:focus {
  border-color: var(--wb-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wb-ink) 18%, transparent);
}
.is-brand .btn-continue { background: var(--wb-action); color: var(--wb-action-fg); }
.is-brand .btn-continue:hover { background: var(--wb-action-hover); }
.is-brand .btn-continue:focus-visible { outline-color: var(--wb-ink); }
.is-brand .foot .legal-links a { color: color-mix(in srgb, var(--wb-ground-fg) 78%, var(--wb-ground)); }
.is-brand .foot .legal-links a:hover,
.is-brand .foot .legal-links a:focus-visible { color: var(--wb-ground-fg); }
@media (max-width: 520px) {
  .brand-lockup { gap: 11px; }
  .brand-lockup-logo { width: 40px; height: 40px; border-radius: 9px; }
  .brand-lockup-name { font-size: 17px; }
}