/* Inter, self-hosted.
   It was named as the first font in every stylesheet but only ever
   fetched on the public landing page, so the whole signed-in app has
   been falling back to Segoe UI or San Francisco depending on the
   machine. One variable file covers every weight, and serving it from
   here rather than Google means no visitor IP leaves for a typeface. */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* vaOS public site */

:root {
  --ink:        #23241f;
  --ink-soft:   #3a3b34;
  --muted:      #6c6d63;
  --paper:      #fbf9f5;
  --surface:    #ffffff;
  --sand:       #f5f2ea;
  --edge:       #e5dfd2;
  --accent:     #1f6f5c;
  --accent-d:   #185848;
  --accent-t:   #e9f5f1;
  --blue:       #2b5f9e;
  --blue-t:     #e8f0f9;
  --amber:      #8a5a00;
  --amber-t:    #fdf2dc;
  --radius:     0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 400 16px/1.6 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .wordmark {
  font-family: "Instrument Sans", "Inter", system-ui, sans-serif;
  letter-spacing: -.025em;
  font-weight: 600;
  margin: 0;
}

a { color: var(--accent); }

.shell { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* --- Header ------------------------------------------------------ */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}

.wordmark { font-size: 21px; text-decoration: none; color: var(--ink); }
.wordmark .va { color: var(--accent); }

.site-head nav { display: flex; align-items: center; gap: 22px; }
/* :not(.btn) matters here. Without it this rule is more specific than
   .btn-primary and repaints the button text muted green on green. */
.site-head nav a:not(.btn) {
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
}
.site-head nav a:not(.btn):hover { color: var(--ink); }

.site-head nav .btn { text-decoration: none; }

/* --- Buttons ----------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 11px 20px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-d); }
.btn-quiet {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--edge);
}
.btn-quiet:hover { border-color: var(--muted); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* --- Hero -------------------------------------------------------- */

.hero {
  display: grid;
  gap: 44px;
  padding: 48px 0 72px;
}

.hero h1 {
  font-size: clamp(34px, 6vw, 50px);
  line-height: 1.08;
}

.hero .lede {
  font-size: 18px;
  color: var(--ink-soft);
  margin: 20px 0 0;
  max-width: 42ch;
}

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero .note {
  font-size: 14px;
  color: var(--muted);
  margin: 16px 0 0;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    padding: 72px 0 96px;
  }
}

/* --- Request card (hero visual) ---------------------------------- */

.demo { display: grid; gap: 12px; }

.req {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding: 16px 18px;
}
.req.is-open     { border-left-color: var(--blue); }
.req.is-pending  { border-left-color: var(--amber); }
.req.is-complete { border-left-color: var(--edge); }

.req-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.req-who {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.req-title {
  font-size: 16px;
  font-weight: 500;
  margin: 4px 0 6px;
}

.req-meta { font-size: 13px; color: var(--muted); }

.pill {
  flex: none;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill-scheduled { background: #ede8fa; color: #5a3fa8; }
.pill-open    { background: var(--blue-t);   color: var(--blue); }
.pill-pending { background: var(--amber-t);  color: var(--amber); }
.pill-complete { background: #eceff1; color: var(--muted); }

.hours {
  background: var(--sand);
  border-radius: 0;
  padding: 16px 18px;
}
.hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.hours-bar {
  height: 6px;
  background: #dfe3e2;
  overflow: hidden;
}
.hours-bar span {
  display: block;
  height: 100%;
  width: 62%;
  background: var(--accent);
}

/* --- Generic section --------------------------------------------- */

.band { padding: 64px 0; border-top: 1px solid var(--edge); }
.band-sand { background: var(--sand); border-top: 0; }

.band h2 {
  font-size: clamp(24px, 3.4vw, 32px);
  max-width: 20ch;
}
.band .sub {
  color: var(--muted);
  margin: 12px 0 0;
  max-width: 52ch;
}

/* --- What it does ------------------------------------------------
   A section per job, alternating sides. Text and a screenshot, side by
   side where there is room and stacked where there is not.

   Screenshots do more work than sentences for a tool like this: a VA
   recognises their own working day in one before they have finished
   reading the heading above it. */

/* Wider than the shell it sits in. The rest of the page is a reading
   column and this is a gallery, so it is allowed past the edges of the
   text either side of it. */
.parts {
  display: grid;
  gap: 72px;
  margin-top: 48px;
}

@media (min-width: 1180px) {
  .parts { width: calc(100% + 120px); margin-left: -60px; }
}

.part { display: grid; gap: 24px; align-items: center; }

@media (min-width: 860px) {
  /* The picture leads. Two or three sentences do not need a third of
     the page, and the screenshot is the thing doing the explaining. */
  .part { grid-template-columns: 4fr 8fr; gap: 44px; }

  /* Every other one turned round, so the eye zigzags down the page
     rather than running down one edge of it. Ordered rather than
     reversed, because reversing the direction would reverse the tab
     order with it.

     The columns have to turn round as well. Order moves the content
     between columns and leaves the widths where they were, so a
     flipped row was putting the screenshot in the narrow one and
     giving three sentences two thirds of the page. */
  .part.is-flipped { grid-template-columns: 8fr 4fr; }
  .part.is-flipped .part-said { order: 2; }

  /* A section with no screenshot yet takes the whole row rather than
     sitting in one column beside a hole. */
  .part.is-text { grid-template-columns: minmax(0, 1fr); }
  .part.is-text .part-said p { max-width: 62ch; }
}

.part-said h3 {
  font-size: clamp(19px, 2.4vw, 23px);
  letter-spacing: -.02em;
  margin: 0 0 10px;
  max-width: 22ch;
}

.part-said p { color: var(--muted); margin: 0; max-width: 46ch; line-height: 1.65; }

/* One large, the rest under it. A section with a single screenshot
   looks deliberate this way rather than looking like two are
   missing. */
.part-shots { display: grid; gap: 12px; }

.part-shots.has-more { grid-template-columns: repeat(2, 1fr); }
.part-shots.has-more .is-lead { grid-column: 1 / -1; }

/* A window rather than a bare image. A screenshot with a hard edge
   against the page reads as a mistake; a frame says it is a picture of
   something. */
.part-shot {
  border: 1px solid var(--edge);
  border-radius: 12px;
  overflow: hidden;
  background: var(--sand);
  box-shadow: 0 18px 40px -24px rgba(23, 33, 43, .45);
}

/* The supporting ones sit flatter, so the lead still leads. */
.part-shots.has-more .part-shot:not(.is-lead) {
  border-radius: 8px;
  box-shadow: 0 8px 20px -16px rgba(23, 33, 43, .4);
}

.part-shot img {
  display: block;
  width: 100%;
  height: auto;
}


/* --- Numbered steps ---------------------------------------------- */

.steps {
  display: grid;
  gap: 28px;
  margin-top: 40px;
  counter-reset: step;
}
.step { counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: "Instrument Sans", monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.step h3 { font-size: 17px; margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 36px; }
}

/* --- Status track ------------------------------------------------ */

.track {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
  align-items: center;
}
.track .arrow { color: var(--edge); font-size: 14px; }

/* --- Pricing ----------------------------------------------------- */

.plans {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

.plan {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.plan-pick { border-color: var(--accent); border-width: 2px; }

.plan h3 { font-size: 15px; font-weight: 600; }

.price {
  font-family: "Instrument Sans", sans-serif;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 14px 0 2px;
}
.price small {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}

.plan .cap { font-size: 15px; margin: 10px 0 22px; }
.plan .cap b { font-weight: 600; }
.plan .btn { margin-top: auto; text-align: center; }

@media (min-width: 820px) {
  .plans { grid-template-columns: repeat(3, 1fr); }
}

.same {
  margin-top: 24px;
  font-size: 15px;
  color: var(--muted);
}

/* --- Questions --------------------------------------------------- */

.qa { margin-top: 36px; display: grid; gap: 26px; }
.qa h3 { font-size: 16px; margin-bottom: 4px; }
.qa p { margin: 0; color: var(--muted); font-size: 15px; max-width: 62ch; }

@media (min-width: 760px) {
  .qa { grid-template-columns: 1fr 1fr; gap: 32px 48px; }
}

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

.site-foot {
  border-top: 1px solid var(--edge);
  padding: 28px 0 40px;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}


/* --- Policy pages ------------------------------------------------
   A reading column, not the marketing layout. Nobody skims a privacy
   policy; the ones who open it are reading it, so it is set for that:
   one narrow column, generous line height, and headings that make it
   possible to find the paragraph you came for. */

.legal {
  max-width: 720px;
  padding-top: 48px;
  padding-bottom: 80px;
}

.legal h1 { margin: 0 0 6px; }

.legal-when { color: var(--faint); font-size: 14px; margin: 0 0 32px; }

.legal-lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 36px;
}

.legal h2 {
  font-size: 19px;
  letter-spacing: -.01em;
  margin: 36px 0 10px;
}

.legal p,
.legal li { color: var(--muted); line-height: 1.7; }

.legal p { margin: 0 0 14px; }

.legal ul { margin: 0 0 18px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }

.legal strong { color: var(--ink); }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin: 0 0 20px;
}

.legal-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--edge);
}

.legal-table td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--edge);
  color: var(--muted);
  vertical-align: top;
}

.legal-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--ink);
}

.legal-see {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--edge);
  font-size: 14.5px;
}


/* --- Not found ---------------------------------------------------
   Centred and short. Nobody wants to be here, so the page's whole job
   is to say what happened and offer the two ways out. */

.lost {
  max-width: 560px;
  padding-top: 96px;
  padding-bottom: 120px;
  text-align: center;
}

.lost-code {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--faint);
  margin: 0 0 14px;
}

.lost h1 { margin: 0 0 12px; }

.lost-said { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 0 24px; }

/* The address that was asked for. Often a typo, and seeing it is more
   use than being told the page does not exist. */
.lost-url { margin: 0 0 28px; }

.lost-url code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--muted);
  background: var(--sand);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 5px 10px;
  word-break: break-all;
}

/* .actions is only styled inside the hero, so this needs its own
   rather than borrowing one that does not apply here. */
.lost .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.lost-more { margin: 32px 0 0; font-size: 14.5px; color: var(--muted); }

/* --- Planned maintenance notice ----------------------------------------- */
.noticebar {
  background: #f7edd8;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.noticebar-in {
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 14px;
}