/* The connector's pages on the web (ADR 0100), "the ice bridge": a light winter sky, the picture
 * across the upper middle (Cold Call's cube on the left, the AI app's tile on the right, the ice
 * between them) and, centred under it, one compact control per step. The session service serves
 * this sheet, then connect-controls.css (the field, the code, the buttons, the landing page's
 * address and taps), connect-art.css (the picture), connect-motion.css and connect-sizes.css
 * (phones to big screens), and connect.js, from /brand/. The pages load nothing else, so the
 * values below mirror tokens.css and spring-tokens.css. */
@font-face {
  font-family: 'Figtree';
  src: url('./figtree-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  src: url('./figtree-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
:root {
  --cn-blue: #1255df;
  --cn-blue-down: #0f4bcc;
  --cn-glow: #3f7bff;
  --cn-navy: #0c173b;
  --cn-navy-hi: #1c2c63;
  --cn-sky: #d2e8ff;
  --cn-ice: #e6f4ff;
  --cn-snow: #f3f9ff;
  --cn-white: #ffffff;
  --cn-frost: #dcefff;
  --cn-frost-edge: #a9d3ff;
  --cn-line: #cfe3fb;
  --cn-line-hi: #b7d6fb;
  --cn-lane: #94bfff;
  --cn-ink-2: #50668d;
  --cn-ink-3: #6a80a3;
  --cn-hint: #8ea2c2;
  --cn-wrong: #b4284a;
  --cn-ring: rgb(18 85 223 / 0.12);
  --cn-hover: rgb(18 85 223 / 0.07);
  --cn-lift: 0 22px 44px -26px rgb(18 85 223 / 0.45);
  /* The page's measures: the title and the picture grow a little on big screens. */
  --cn-title: clamp(27px, calc(1.2vw + 19px), 46px);
  --cn-panel: min(100%, 620px);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html {
  min-height: 100%;
  background:
    radial-gradient(52% 46% at 50% 34%, var(--cn-white) 0%, rgb(255 255 255 / 0) 72%),
    linear-gradient(
      180deg,
      var(--cn-sky) 0%,
      var(--cn-ice) 34%,
      var(--cn-snow) 66%,
      var(--cn-white) 100%
    );
  background-color: var(--cn-white);
}
.cc-connect {
  margin: 0;
  color: var(--cn-navy);
  font-family:
    'Figtree',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI Variable',
    'Segoe UI',
    system-ui,
    sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.cc-connect *,
.cc-connect *::before,
.cc-connect *::after {
  box-sizing: border-box;
}

/* The picture stays put from step to step; only what is under it changes. */
.cc-connect-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(40px, calc(50vh - 300px), env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right)) max(72px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
}
.cc-connect-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--cn-panel);
  margin-top: 44px;
  text-align: center;
}
.cc-connect-title {
  margin: 0;
  font-size: var(--cn-title);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.cc-connect-app {
  color: var(--cn-blue);
}
.cc-connect-sub {
  margin: 10px 0 0;
  max-width: 30em;
  color: var(--cn-ink-2);
  font-size: 16px;
  line-height: 1.4;
  text-wrap: pretty;
}
.cc-connect-sub strong,
.cc-connect-small strong {
  color: var(--cn-navy);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.cc-connect-small {
  margin: 20px 0 0;
  color: var(--cn-ink-3);
  font-size: 13.5px;
  line-height: 1.6;
}
.cc-connect-small + .cc-connect-small {
  margin-top: 2px;
}
.cc-connect-small strong {
  color: var(--cn-ink-2);
}
.cc-connect-dot {
  margin: 0 0.45em;
  opacity: 0.7;
}
/* What went wrong, or a code sent again: one line, above the control it is about. */
.cc-connect-status {
  margin: 14px 0 -8px;
  color: var(--cn-wrong);
  font-size: 14.5px;
  font-weight: 600;
}
.cc-connect-status[role='status'] {
  color: var(--cn-blue);
}
.cc-connect-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cn-blue);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.cc-connect-link:hover {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 3px;
}
.cc-connect-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.cc-connect :focus-visible {
  outline: 2px solid var(--cn-blue);
  outline-offset: 3px;
}

/* The email's button: "One moment." while the script posts it on; else type the code. */
.cc-connect-going,
.cc-link-go .cc-connect-fallback {
  display: none;
}
.cc-link-go .cc-connect-going {
  display: block;
}