@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* ============================================================
   ACCOUNT PAGES — sign in, request an account, invite, onboarding

   Kept separate from the dashboard's stylesheet. These four pages
   are seen once each, by someone who is not yet a user, and they
   have a different job: get a non-technical person through a
   Google permissions screen without losing them.

   Light, and with no data-theme hook. The dashboard toggles
   because a client sits with it; these are gates passed through
   in seconds, and a theme switch on a page you see before you
   have an account is a setting with nowhere to be saved.
   ============================================================ */

:root {
  --onyx:   #343839;
  --green:  #4BE891;
  --purple: #6F8EFF;

  /* The brand half is the tinted one and the working half is
     white. That way the form sits on the brightest thing on the
     screen, which is where the reader has to type. */
  --paper:   #EBEFF3;
  --panel:   #FFFFFF;
  --surface: #FFFFFF;

  --ink:       #16191C;
  --ink-soft:  #3D454B;
  --muted:     #6B7278;
  --faint:     #949BA1;

  --line:         #E2E6EA;
  --line-strong:  #C6CDD3;

  /* The saturated brand greens are for fills and strokes. Text
     and icons that must be read use the deeper pair — #4BE891 on
     white is about 1.4:1 and unreadable at any size. */
  --ok:      #1F7A4C;
  --ok-bg:   #E7F2EC;
  --bad:     #C4503C;
  --bad-bg:  #F9EAE7;

  --lift:      0 1px 2px rgba(20, 26, 34, 0.05),
               0 10px 30px rgba(20, 26, 34, 0.07);
  --lift-high: 0 18px 44px rgba(20, 26, 34, 0.14);

  --radius:  10px;
  --measure: 56ch;
}

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

html { background: var(--paper); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
button { font: inherit; }

::selection { background: var(--green); color: var(--onyx); }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

/* ---------------------------------------------------------------
   THE SPLIT

   Left panel carries the brand and the illustration. Right panel
   carries the whole job. Only the right one scrolls, so a long
   form never drags the brand off the top of the screen.
--------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
}

.split__brand {
  position: sticky; top: 0;
  align-self: start; height: 100vh;
  display: flex; flex-direction: column;
  padding: 34px 38px;
  overflow: hidden;
}

/* Two soft brand washes, the same pair the dashboard uses behind
   its page. Tucked past the corners so only the soft edge reaches
   the middle, where the chart sits. */
.split__brand::before,
.split__brand::after {
  content: '';
  position: absolute;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  border-radius: 50%;
  /* Quiet enough to read as a tint on the panel rather than as
     two coloured shapes. Raise this to bring them back — but note
     the blur has to rise with it, or a stronger wash just shows
     its own edge. */
  filter: blur(110px);
  opacity: 0.12;
  pointer-events: none;
}
.split__brand::before { top: -34%;    left: -30%;  background: var(--green); }
.split__brand::after  { bottom: -20%; right: -12%; background: var(--purple); }

.split__brand > * { position: relative; z-index: 1; }

.wordmark { display: inline-block; line-height: 0; }
.wordmark img { height: 30px; width: auto; display: block; }

.brand-foot { color: var(--faint); font-size: 12px; margin: 0; }
.brand-legal { margin: 6px 0 0; display: flex; gap: 12px; }
.brand-legal a { color: var(--faint); font-size: 11px; text-decoration: underline; text-underline-offset: 2px; }
.brand-legal a:hover { color: var(--ink); }

/* ---------------------------------------------------------------
   THE STAGE
   Chart plus the cards that float over it. Sized in its own
   units and centred, so the parallax has somewhere to move
   without ever reaching the panel's edges.
--------------------------------------------------------------- */
.brand-stage {
  margin: auto;
  width: 100%; max-width: 560px;
  display: flex; align-items: center; justify-content: center;
}

.stage {
  position: relative;
  width: 100%;
  /* Room at the top for the upper card to overhang the chart
     without being clipped by the panel. */
  padding: 50px 0 0;
}

/* ---- key ----
   Below the chart, in ordinary markup, where the floating card
   cannot land on it. */
.stage__key {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-top: 18px; padding-left: 52px;
  font-size: 11.5px; color: var(--faint);
}
.stage__key-item { display: inline-flex; align-items: center; gap: 8px; }
.stage__key-line { width: 18px; height: 2.5px; border-radius: 2px; }
/* A dashed rule as a repeating gradient, so the swatch matches the
   line it stands for rather than approximating it with a solid. */
.stage__key-line[data-dash="true"] {
  background-color: transparent !important;
  background-image: repeating-linear-gradient(to right,
    var(--line-strong) 0 4px, transparent 4px 8px) !important;
}

.stage__chart { width: 100%; height: auto; display: block; overflow: visible; }

.stage__line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.stage__grid { stroke: var(--line-strong); stroke-width: 1; opacity: 0.55; }
.stage__tick { fill: var(--faint); font-size: 11px; }

/* The head of the leading line. It keeps a slow pulse after the
   draw finishes, which is the only thing still moving once the
   page has settled. */
.stage__head { transform-box: fill-box; transform-origin: center; }
.stage__halo {
  animation: head-pulse 2.6s ease-in-out infinite;
  /* Without fill-box this scales from the SVG viewport's origin
     rather than the circle's own centre, and the halo lands
     somewhere off the chart entirely. */
  transform-box: fill-box; transform-origin: center;
}
@keyframes head-pulse {
  0%, 100% { opacity: 0.35; scale: 1; }
  50%      { opacity: 0.08; scale: 1.9; }
}

/* ---- the floating cards ----
   Two nested elements on purpose. The outer one carries the
   arrival, the inner one drifts on its own clock afterwards. A
   single element cannot do both: translate is one property, and
   the later writer would simply win. */
.pop { position: absolute; z-index: 2; }
/* The lower card is lifted clear of the month labels. It still
   crosses the dashed line behind it — that overlap is the effect,
   and the dashed line is the least important of the three. */
.pop--a { top: 0;          right: -5%; }
.pop--b { bottom: 88px;    left: -6%; }

.pop__in {
  min-width: 172px;
  will-change: translate;
  padding: 15px 18px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: var(--lift-high);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: drift 13s ease-in-out infinite;
}
.pop--b .pop__in { animation-duration: 17s; animation-delay: -6s; }

/* Three keyframes rather than two, and a little sideways travel.
   A straight up-and-down on a shared period reads as a bounce;
   the pair only looks like it is floating once neither card is
   repeating the other's path. */
@keyframes drift {
  0%, 100% { translate: 0 0; }
  33%      { translate: 2px -6px; }
  66%      { translate: -2px -3px; }
}

.pop__label {
  display: block; font-size: 11px; font-weight: 500;
  color: var(--muted); margin-bottom: 6px;
}
.pop__figure { display: flex; align-items: baseline; gap: 9px; }
.pop__value {
  font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pop__of { color: var(--faint); font-size: 17px; font-weight: 400; }
.pop__delta { font-size: 12.5px; font-weight: 600; color: var(--ok); }
.pop__note { display: block; font-size: 10.5px; color: var(--faint); margin-top: 5px; }

/* Everything on the stage arrives rather than appearing. The
   stagger is what makes it read as one illustration assembling
   instead of three things loading. */
.stage [data-rise] {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 620ms ease, translate 620ms cubic-bezier(.22,.7,.3,1);
}
.stage.is-in [data-rise] { opacity: 1; translate: 0 0; }
.stage.is-in .pop--a { transition-delay: 520ms; }
.stage.is-in .pop--b { transition-delay: 700ms; }

/* ---------------------------------------------------------------
   THE WORKING HALF
--------------------------------------------------------------- */
.split__panel {
  display: flex; flex-direction: column;
  background: var(--panel);
  border-radius: 26px 0 0 26px;
  box-shadow: -14px 0 40px rgba(20, 26, 34, 0.05);
  padding: 34px clamp(28px, 5vw, 70px) 40px;
}

.masthead { display: flex; align-items: center; gap: 16px; margin-bottom: auto; }
.plain {
  margin-left: auto;
  color: var(--muted); font-size: 13px; text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color 140ms ease, border-color 140ms ease;
}
.plain:hover { color: var(--ink); border-bottom-color: var(--line-strong); }

/* auto top and bottom, so a short form sits on the optical centre
   of the panel and a long one simply starts below the masthead. */
main {
  width: 100%; max-width: 520px;
  margin: auto 0;
  padding: 48px 0;
}

/* ---------------------------------------------------------------
   TYPE
--------------------------------------------------------------- */
h1 {
  font-size: clamp(36px, 4.6vw, 50px);
  font-weight: 300; letter-spacing: -0.035em; line-height: 1.05;
  margin: 0 0 14px;
}
h2 { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }

.lede { color: var(--muted); font-size: 14.5px; margin: 0 0 36px; max-width: 52ch; }
.small { font-size: 13px; color: var(--muted); }
.hint  { font-size: 12.5px; color: var(--faint); margin: 7px 0 0; max-width: var(--measure); }
p { max-width: var(--measure); }

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

/* ---------------------------------------------------------------
   FIELDS

   Underline only. A boxed input is the right call on a form with
   a busy background, but this panel is empty white — a border
   round each field would be the only chrome on the page, and four
   of them stacked would be the first thing seen rather than the
   heading.
--------------------------------------------------------------- */
.field { margin-bottom: 26px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
/* A qualifier inside a label is part of the label. Left to .small
   it came out larger and darker than the thing it qualifies. */
label .small { font-size: inherit; color: var(--faint); }

input, textarea, select {
  width: 100%;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: transparent;
  border: none; border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 8px 0;
  transition: border-color 160ms ease;
}
input:hover, textarea:hover, select:hover { border-bottom-color: var(--muted); }
input:focus, textarea:focus, select:focus { outline: none; border-bottom-color: var(--ok); }
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { min-height: 88px; resize: vertical; }

/* A select cannot be drawn transparent and still show its own
   list, so it gets a fill — but it keeps a border on all four
   sides, because a half-drawn box looks like a rendering fault
   rather than a choice. */
select {
  background: var(--surface);
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------
   ACTIONS

   One round button per page, and only on the pages with a single
   thing to do. It is the page's full stop: bottom right, where a
   reader's eye lands after the last field.
--------------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 40px; }
.btn-row--end { justify-content: flex-end; }

.btn-circle {
  width: 104px; height: 104px; flex: none;
  padding: 0 16px;
  border: none; border-radius: 50%;
  background: var(--onyx); color: #fff;
  font-size: 13px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25;
  cursor: pointer;
  box-shadow: var(--lift);
  transition: background 160ms ease, color 160ms ease, scale 160ms ease;
}
.btn-circle:hover:not(:disabled) { background: var(--green); color: var(--onyx); }
.btn-circle:active:not(:disabled) { scale: 0.97; }
.btn-circle:disabled { background: var(--line-strong); color: #fff; cursor: default; box-shadow: none; }

/* The pill is for pages with more than one thing to do, where a
   floating circle would be decoration rather than a full stop. */
.btn-primary {
  font-size: 14.5px; font-weight: 500;
  padding: 11px 24px; border: none; border-radius: 999px;
  background: var(--onyx); color: #fff; cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.btn-primary:hover:not(:disabled) { background: var(--green); color: var(--onyx); }
.btn-primary:disabled { background: var(--line-strong); cursor: default; }

.btn-quiet {
  font-size: 13.5px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color 140ms ease;
}
.btn-quiet:hover:not(:disabled) { border-color: var(--muted); }
.btn-quiet:disabled { opacity: 0.45; cursor: default; }

/* ---------------------------------------------------------------
   NOTICES
--------------------------------------------------------------- */
.notice {
  font-size: 14px; padding: 11px 14px; margin-bottom: 26px;
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: 2px solid var(--line-strong);
}
.notice--error { color: var(--bad); background: var(--bad-bg); border-left-color: var(--bad); }
.notice--ok    { color: var(--ok);  background: var(--ok-bg);  border-left-color: var(--ok); }

/* ---------------------------------------------------------------
   ONBOARDING

   Single column, not a split. This one is work rather than a
   gate: five steps, external links, things to paste. A brand
   panel taking half the screen would be half a screen not
   carrying any of it.
--------------------------------------------------------------- */
.shell { width: 100%; max-width: 780px; margin: 0 auto; padding: 30px 28px 80px; }
.shell--narrow { max-width: 560px; }
.shell .masthead {
  margin-bottom: 48px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.shell main { max-width: none; margin: 0; padding: 0; }

.steps { list-style: none; margin: 34px 0 0; padding: 0; }

/* Numbered because this genuinely is a sequence: access has to be
   granted before keywords are worth collecting, and the report
   cannot exist before either. */
.step {
  display: grid; grid-template-columns: 32px 1fr; gap: 0 18px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }

.step__marker {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-strong); color: var(--muted);
  background: var(--surface);
}
/* A done step swaps its number for a tick. The number is your
   position in a queue you are still standing in; once you are
   through, the position stops being the useful fact. */
.step[data-done="true"] .step__marker {
  background: var(--ok); border-color: var(--ok);
  color: #fff; font-size: 0;
}
.step[data-done="true"] .step__marker::after { content: '\2713'; font-size: 15px; line-height: 1; }

.step__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.step__status { font-size: 12.5px; color: var(--faint); }
.step[data-done="true"] .step__status { color: var(--ok); }

.step__body { margin-top: 12px; color: var(--ink-soft); font-size: 14px; }
.step__body p { margin: 0 0 12px; }
.step__body strong { color: var(--ink); font-weight: 600; }
/* Finished work folds away. Five open steps is a wall; the one
   you are on should be the one you can see. */
.step[data-done="true"] .collapsible { display: none; }

.walk { margin: 14px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 14px; max-width: var(--measure); }
.walk li { margin-bottom: 7px; }

/* The one thing on the page that has to be transferred somewhere
   else exactly, so it gets the emphasis. */
.copyfield {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 0;
  padding: 9px 9px 9px 14px;
  background: var(--ok-bg);
  border: 1px solid var(--ok);
  border-radius: var(--radius);
}
.copyfield code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; color: var(--ink);
  overflow-wrap: anywhere; flex: 1 1 16rem; min-width: 0;
}

/* ---------------------------------------------------------------
   NARROW

   The brand panel becomes a strip. The stage goes with it: a
   chart at 90px tall is a smudge, and the cards would have
   nothing to float over.
--------------------------------------------------------------- */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split__brand {
    position: static; height: auto;
    flex-direction: row; align-items: center;
    padding: 20px 22px;
  }
  .split__brand::before, .split__brand::after { display: none; }
  .brand-stage { display: none; }
  .brand-foot { margin-left: auto; font-size: 11px; }

  .split__panel {
    border-radius: 26px 26px 0 0;
    min-height: calc(100vh - 82px);
    padding: 26px 22px 40px;
    box-shadow: 0 -14px 40px rgba(20, 26, 34, 0.05);
  }
  main { padding: 36px 0; }
  h1 { font-size: 34px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .field-row .field { margin-bottom: 26px; }
  .btn-circle { width: 92px; height: 92px; }
  .shell { padding: 24px 20px 64px; }
  .step { grid-template-columns: 26px 1fr; gap: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  /* The illustration still has to arrive, it just arrives
     already in place. */
  .stage [data-rise] { opacity: 1; translate: 0 0; }
}