/* The landing page: a sky hero and cobalt actions. Loaded after styles.css by index.html. */

/* The header floats on the sky until the page scrolls, then turns white as usual. */
.sky-page .site-header { position: fixed; left: 0; right: 0; background: transparent; transition: background-color var(--t-ui) ease, box-shadow var(--t-ui) ease, color var(--t-ui) ease; color: #fff; }
.sky-page .site-header .button { background: #fff; color: var(--ink); }
.sky-page .site-header.is-scrolled { background: #fff; color: var(--ink); }
.sky-page .site-header.is-scrolled .button { background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .sky-page .site-header:not(.is-scrolled) .button:hover { background: #eef3fb; }
}

.hero--sky {
  max-width: none; display: block; position: relative; isolation: isolate; text-align: center;
  padding: calc(72px + clamp(56px, 8vw, 128px)) var(--margin) 0;
}
.hero--sky::before {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0;
  bottom: clamp(140px, 18vw, 300px);
  /* A neutral tint under the words keeps white text above 4.5:1; it fades out before the clouds. */
  background: linear-gradient(rgba(6, 28, 74, 0.24) 0%, rgba(6, 28, 74, 0.24) 52%, rgba(6, 28, 74, 0) 72%), #2d6fcf url(sky.jpg) center bottom / cover no-repeat;
}
.sky-copy { max-width: 980px; margin: 0 auto; }
.hero--sky h1 { color: #fff; font-size: clamp(3.25rem, 1.2rem + 5.2vw, 6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; margin-bottom: 26px; }
.hero--sky .lead { color: #fff; margin: 0 auto; max-width: 44ch; font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem); line-height: 1.5; }
.hero--sky .hero-form { margin: 36px auto 0; max-width: 540px; }
.hero--sky .field { border-color: #fff; }
.hero--sky .hero-alt { color: #fff; }
.hero--sky .hero-stage { max-width: 1120px; margin: clamp(56px, 7vw, 104px) auto 0; text-align: left; }
.hero--sky .stage-note { text-align: center; }

@media (max-width: 720px) {
  .hero--sky { padding-top: calc(72px + 40px); }
  .hero--sky h1 { font-size: clamp(2.9rem, 12.5vw, 3.75rem); }
  .hero--sky::before { bottom: 120px; }
  .sky-page .main-nav { display: none; }
}
/* On the sky: a white logo tile and white header button, so nothing blue sits on blue. */
.sky-page .site-header:not(.is-scrolled) .brand-mark rect { fill: #fff; }
.sky-page .site-header:not(.is-scrolled) .brand-mark path { stroke: var(--accent); }
.sky-page .site-header:not(.is-scrolled) .brand-mark circle { fill: var(--accent); }

:root:has(.sky-page) { scrollbar-color: #b9c3d6 transparent; }
.sky-page .band-dark input[type="range"] { --track: #2c3756; }
/* Cookie choices: a slim navy bar. Reject and accept keep equal weight. */
.sky-page .consent {
  width: min(880px, calc(100vw - 2 * var(--margin)));
  background: var(--dark-2); color: var(--dark-ink); padding: 10px 10px 10px 18px; border-radius: 16px; column-gap: 16px;
  box-shadow: 0 2px 6px rgba(12, 18, 34, 0.12), 0 24px 50px -18px rgba(12, 18, 34, 0.5);
}
.sky-page .consent p:not(.consent-title) { color: var(--dark-muted); font-size: 0.8125rem; }
.sky-page .consent-title { font-size: 0.875rem; }
.sky-page .consent .link { color: var(--dark-ink); }
.sky-page .consent .cbtn:not(.cbtn--quiet) { background: #fff; color: var(--ink); min-height: 36px; }
.sky-page .consent .cbtn--quiet { color: var(--dark-ink); }
@media (hover: hover) and (pointer: fine) {
  .sky-page .consent .cbtn:not(.cbtn--quiet):hover { background: #dfe6f3; }
  .sky-page .consent .cbtn--quiet:hover { color: #fff; }
}

/* Leftovers from the red palette, and muted text on every dark ground. */
.sky-page .site-footer { --muted: var(--dark-muted); }

/* Illustrations, light and clean: white app windows with soft shadows, set on pale blue-lavender panels. */
.sky-page {
  --frame: linear-gradient(165deg, #eef1f8 0%, #dfe5f2 55%, #d3dbee 100%);
  --win-line: #e6e9f0; --win-bar: #f6f7fa; --win-muted: #687186;
  --win-shadow: 0 1px 2px rgba(28, 44, 84, 0.06), 0 30px 70px -28px rgba(28, 44, 84, 0.32);
}
/* Window chrome: the three dots every app window has. */
.sky-page .console-title::before {
  content: ''; display: inline-block; width: 52px; height: 12px; margin-right: 14px; vertical-align: -1px;
  background: radial-gradient(circle at 6px 6px, #ff5f57 5px, transparent 5.5px), radial-gradient(circle at 26px 6px, #febc2e 5px, transparent 5.5px), radial-gradient(circle at 46px 6px, #28c840 5px, transparent 5.5px);
}

/* The inbox demo in the hero */
.sky-page .console { background: #fff; color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 18px; box-shadow: var(--win-shadow); --muted: var(--win-muted); }
.sky-page .console-bar { background: var(--win-bar); border-bottom: 1px solid var(--win-line); }
.sky-page .console-clock { color: var(--win-muted); }
.sky-page .tickets { background: #fafbfc; border-right: 1px solid var(--win-line); }
.sky-page .ticket.is-active { background: #fff; box-shadow: 0 1px 2px rgba(28, 44, 84, 0.08), 0 0 0 1px var(--win-line); }
.sky-page .t-when, .sky-page .t-meta, .sky-page .msg-who { color: var(--win-muted); }
.sky-page .msg--in p { background: #f2f4f8; color: var(--ink); }
.sky-page .msg--out p { background: #eaf1fe; color: var(--ink); }
.sky-page .steps { color: var(--ink-2); }
.sky-page .tick { border-color: #c5ccda; }
.sky-page .step.is-working .tick { border-color: #9aa3b5; border-top-color: transparent; }
.sky-page .step.is-done .tick { border-color: #22b35e; background: #22b35e; }
.sky-page .step.is-done .tick::after { border-color: #fff; }
.sky-page .status--ok { background: var(--ok-bg); color: var(--ok-ink); }
.sky-page .status--hold { background: var(--hold-bg); color: var(--hold-ink); }
.sky-page .ui-btn { border-color: #d9dee8; background: #fff; color: var(--ink); }
.sky-page .ui-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (hover: hover) and (pointer: fine) { .sky-page .ticket:hover { background: #f0f2f6; } .sky-page .ticket.is-active:hover { background: #fff; } }
@media (max-width: 720px) { .sky-page .tickets { border-right: 0; border-bottom: 1px solid var(--win-line); } }

/* The held reply: a white window in a pale frame */
.sky-page .held { border-color: var(--win-line); border-radius: 18px; box-shadow: 0 0 0 12px #e8ecf5, var(--win-shadow); }
.sky-page .held-head { background: var(--win-bar); }

/* Write policy, get guardrails: both halves light, the policy in a white editor */
.sky-page .st-a, .sky-page .sc-in { color: var(--ink); }
.sky-page .st-a { background: #eef1f8; }
.sky-page .sc-in { background: linear-gradient(180deg, #eef1f8 0%, #dbe2f1 100%); }
.sky-page .sc-label { color: var(--win-muted); }
.sky-page #policy { background: #fff; color: var(--ink); border: 1px solid var(--win-line); border-radius: 16px; box-shadow: var(--win-shadow); caret-color: var(--accent); }
.sky-page #policy:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2), var(--win-shadow); }
@media (hover: hover) and (pointer: fine) { .sky-page #policy:hover { border-color: #cfd6e4; } }
.sky-page .rules { border-color: var(--win-line); border-radius: 18px; box-shadow: var(--win-shadow); }

/* Sounds like your team: the reply on a pale panel */
.sky-page .feat-stage { background: var(--frame); }
.sky-page .email { border-radius: 18px; box-shadow: var(--win-shadow); }
@media (max-width: 720px) { .sky-page .split-title { background: #eef1f8; color: var(--ink); } }
.sky-page .handoff { padding-top: clamp(48px, 6vw, 96px); }

/* The demos are pictures of the product, so their text shouldn't highlight like a document. Fields you type in stay selectable. */
.sky-page :is(.console, .held, .rules, .email, .seg, .slider, .switch-row) { -webkit-user-select: none; user-select: none; }
.sky-page :is(.console, .held, .rules, .email) { cursor: default; }
.sky-page :is(input, textarea) { -webkit-user-select: text; user-select: text; }