/* vaOS landing identity pass. Loads after site.css. */

@font-face {
  font-family: "Bricolage";
  src: url("/assets/fonts/bricolage-var.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

h1, h2, h3, .wordmark {
  font-family: "Bricolage", "Instrument Sans", sans-serif;
  font-weight: 560;
  font-stretch: 94%;
  letter-spacing: -.01em;
}

.hero h1 {
  font-size: clamp(38px, 6.4vw, 58px);
  font-weight: 540;
  line-height: 1.04;
  letter-spacing: -.02em;
}

.wordmark { font-weight: 620; }

/* Four-status mark beside the wordmark. */
.site-head .wordmark::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 7px;
  margin-left: 9px;
  vertical-align: 2px;
  background:
    radial-gradient(circle 3px at 3px  50%, #2b5f9e 98%, transparent),
    radial-gradient(circle 3px at 10px 50%, #b07908 98%, transparent),
    radial-gradient(circle 3px at 17px 50%, #6b4fc7 98%, transparent),
    radial-gradient(circle 3px at 24px 50%, #1f6f5c 98%, transparent);
}

/* --- Hero demo: clean cards, dot-chip statuses -------------------- */

.req {
  border-left: 1px solid var(--edge);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(23, 33, 43, .04);
}
.req.is-open, .req.is-pending, .req.is-scheduled, .req.is-complete {
  border-left-color: var(--edge);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 550;
}
.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint, #9b9a8f);
}
.pill-open, .pill-pending, .pill-scheduled, .pill-complete {
  background: var(--surface);
  color: var(--ink-soft);
}
.pill-complete { color: var(--muted); }
.pill-open::before      { background: #2b5f9e; }
.pill-pending::before   { background: #b07908; }
.pill-scheduled::before { background: #6b4fc7; }
.pill-complete::before  { background: #1f6f5c; }

/* One deliberate moment: the pending dot breathes, the hours bar
   fills on load. Nothing else moves. */
.req.is-pending .pill::before { animation: va-breathe 2.6s ease-in-out infinite; }

@keyframes va-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 121, 8, .35); }
  50%      { box-shadow: 0 0 0 4px rgba(176, 121, 8, 0); }
}

.hours { border-radius: 8px; border: 1px solid var(--edge); }
.hours-bar { border-radius: 999px; }
.hours-bar span {
  border-radius: 999px;
  animation: va-fill 1.1s cubic-bezier(.25, .1, .25, 1) both;
  transform-origin: left;
}
@keyframes va-fill { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .req.is-pending .pill::before, .hours-bar span { animation: none; }
}

/* --- Steps: a rail in the brand's dot language, not 01/02/03 ------ */

.step::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  margin-bottom: 14px;
}
.step:nth-child(1)::before { background: #2b5f9e; }
.step:nth-child(2)::before { background: #b07908; }
.step:nth-child(3)::before { background: #1f6f5c; }

@media (min-width: 700px) {
  .steps { position: relative; }
  .steps::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 4px;
    right: 30%;
    height: 1px;
    background: var(--edge);
  }
  .step { position: relative; }
}

/* --- Status track: give the whole system the space it earns ------- */

.track { gap: 14px; padding: 10px 0 4px; }
.track .pill { font-size: 14px; padding: 7px 16px 7px 13px; }
.track .pill::before { width: 9px; height: 9px; }
.track .arrow { color: var(--faint, #9b9a8f); font-size: 18px; }

/* --- Pricing: quieter highlight ----------------------------------- */

.plan { border-radius: 8px; }
.plan-pick {
  border-width: 1px;
  border-color: var(--edge);
  box-shadow: 0 0 0 2px var(--accent);
}
.plan .price {
  font-family: "Bricolage", "Instrument Sans", sans-serif;
  font-variant-numeric: tabular-nums;
}

/* --- Mobile landing -------------------------------------------------- */

/* .hero and .shell share one element, and .hero's shorthand padding
   zeroed the shell's side padding, which only showed once a phone
   put the edges close enough to touch. */
.hero { padding-left: 24px; padding-right: 24px; }

@media (max-width: 560px) {
  .site-head { gap: 10px; }
  .site-head .wordmark { white-space: nowrap; }
  .site-head nav { gap: 14px; }

  /* The in-page anchors step out on phones: the whole page is one
     thumb-scroll anyway. Sign in and the button stay. */
  .site-head nav a[href^="#"] { display: none; }

  .hero { padding-top: 34px; padding-bottom: 48px; gap: 30px; }
}
/* Uploaded platform logo in place of the text wordmark. 512-square
   source scaled to the header; the four-status dots step aside because
   a real mark plus decoration reads as two logos. */
.site-head .wordmark img { display: block; height: 30px; width: auto; max-width: 220px; object-fit: contain; }
.site-head .wordmark.has-logo { display: inline-flex; align-items: center; }
.site-head .wordmark.has-logo::after { content: none; }

/* Phones: the header is one row of logo, Sign in and a button, and at
   375px every one of them has to give a little for all three to fit.
   The logo steps down, the button loses some padding, and the hero
   copy pulls in tighter under a smaller heading. */
@media (max-width: 560px) {
  .site-head .wordmark img { height: 22px; max-width: 118px; }
  .site-head nav { gap: 10px; }
  .site-head nav .btn { padding: 8px 12px; font-size: 14px; }
  .site-head nav a:not(.btn) { font-size: 14px; }

  .hero h1 { font-size: clamp(30px, 8.5vw, 38px); }
  .hero .lede { font-size: 16.5px; }
  .hero .actions .btn { width: 100%; text-align: center; }

  .price { font-size: 34px; }
}

/* .site-head and .site-foot share .shell's element the same way .hero
   does, and their shorthand padding zeroes the shell's side padding in
   exactly the same way. Restored here for both, which is what stops
   the Start free button kissing the right edge of a phone. */
.site-head { padding-left: 24px; padding-right: 24px; }
.site-foot { padding-left: 24px; padding-right: 24px; }

@media (max-width: 560px) {
  .site-foot { flex-direction: column; gap: 10px; padding-bottom: 34px; }
  .site-foot a { padding: 4px 0; display: inline-block; }
}