/* ==========================================================================
   Discovery tool
   ==========================================================================

   Tokens come from /brand.css. Nothing in here redeclares a brand value.

   HOUSE RULES THIS FILE OBEYS, from the brand kit:
   - No atmospheric effects. No gradient meshes, no blurred orbs, no
     backdrop-filter, no translucent white card fills, no purple glow shadows,
     no gradient text. Surfaces are solid, structure comes from borders.
   - Roughly 90% dark, 10% purple. Purple is the INTERACTIVE colour: it means
     you touched this. It never means good or bad.
   - Inter, and only Inter. There is no display serif anywhere on this site.
     Headlines are Inter 700 with negative tracking that scales with size.
     `--font-serif` was removed from brand.css on 2026-07-28; do not reach
     for it, and do not add a second typeface here.

   THE TWO EXTRA COLOURS, and why they are allowed. The result map needs to
   distinguish three states, and purple cannot carry that because purple
   already means "selected". So --amber and --red exist. They are muted on
   purpose, they only ever appear as a 3px edge, a small dot and a label, and
   they never fill a surface. A saturated traffic light would turn this into a
   report card, and a report card is the one thing this tool must not be.
   ========================================================================== */

:root {
  --amber:     #D99A2B;
  --red:       #D9534F;
  --ok:        #6B7280;

  /* Solid selected surface. Not rgba over the page - a real colour, so it
     stays flat and nothing behind it shows through. */
  --sel-bg:     #191233;
  --sel-border: #7C3AED;

  --rail-w: 268px;
  --ease:   cubic-bezier(0.4, 0.0, 0.2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.01em; }

button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }

/* ==========================================================================
   Chrome: top bar and progress
   ========================================================================== */

/* Fixed height on purpose. The rail below is sticky at a hard offset, so a
   header that grows a second line when the step label is long would let the
   rail slide underneath it. */
.top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  height: 52px; padding: 0 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.top a.mark { display: flex; align-items: center; text-decoration: none; }
.top a.mark img { height: 22px; display: block; }
.top .spacer { flex: 1; }
.top .step-count {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.top .restart {
  background: none; border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px;
  font-size: 13px; color: var(--text-muted); white-space: nowrap;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.top .restart:hover { border-color: var(--border-hover); color: var(--text); }

.progress { height: 2px; background: var(--border); position: sticky; top: 51px; z-index: 60; }
.progress > i {
  display: block; height: 100%; width: 0;
  background: var(--purple);
  transition: width 0.5s var(--ease);
}

/* ==========================================================================
   Screens
   ========================================================================== */

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.screen { display: none; padding: 48px 0 96px; animation: rise 0.45s var(--ease) backwards; }
.screen.on { display: block; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

.eyebrow {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--purple-light); margin-bottom: 14px;
}
.screen h1 { font-weight: 700; font-size: clamp(29px, 4.2vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
.screen h2 { font-weight: 700; font-size: clamp(25px, 3.3vw, 36px); line-height: 1.1; letter-spacing: -0.025em; }
.lede { color: var(--text-muted); font-size: 17px; max-width: 56ch; margin: 14px 0 0; }

.head-block { margin-bottom: 36px; }

/* Grids flow in rather than appearing all at once. The delay is set per item
   in app.js and capped, so a long list never turns into a wait. */
.tile, .tool, .rank-item, .opp { animation: rise 0.34s var(--ease) backwards; }

/* ==========================================================================
   Tiles: industry cards and tool cards
   ========================================================================== */

.tiles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.tile {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 18px; min-height: 84px;
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 12px;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}
.tile:hover { border-color: var(--border-hover); background: var(--bg-card-hover); transform: translateY(-2px); }
.tile .t-name { font-weight: 500; font-size: 15px; }
.tile .t-eg { color: var(--text-dim); font-size: 12.5px; line-height: 1.4; margin-top: 3px; }
.tile svg { flex: none; width: 26px; height: 26px; color: var(--text-muted); }

/* Tool grid: smaller, denser, logo-forward. */
.tools {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
}
.tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px 10px; min-height: 106px;
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 12px;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease),
              transform 0.16s var(--ease), color 0.16s var(--ease);
}
.tool:hover { border-color: var(--border-hover); background: var(--bg-card-hover); transform: translateY(-2px); }
.tool svg { width: 26px; height: 26px; color: var(--text); transition: color 0.16s var(--ease); }
.tool .t-label {
  font-size: 12.5px; color: var(--text-muted); text-align: center; line-height: 1.3;
  transition: color 0.16s var(--ease);
}
/* Wordmark tile: no mark exists for this brand, so the name IS the mark and
   the tile gets no caption underneath. Simple Icons carries no ServiceM8,
   Tradify, simPRO, Cliniko or Deputy, and drawing a stand-in for someone
   else's brand is worse than setting their name honestly in Inter. */
.tool .t-word {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.25; color: var(--text); hyphens: none;
}
.tool[aria-pressed="true"] {
  background: var(--sel-bg); border-color: var(--sel-border);
}
.tool[aria-pressed="true"] svg,
.tool[aria-pressed="true"] .t-word { color: var(--purple-light); }
.tool[aria-pressed="true"] .t-label { color: var(--text); }

.group-head { margin: 0 0 6px; font-size: 19px; font-weight: 500; }
.group-sub { color: var(--text-muted); font-size: 15px; margin: 0 0 22px; }

/* ==========================================================================
   The map rail - the diagram that assembles as they answer
   ========================================================================== */

.mapper { display: grid; grid-template-columns: var(--rail-w) 1fr; gap: 44px; align-items: start; }

.rail { position: sticky; top: 96px; }
.rail-title {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 16px;
}

.node {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 9px 12px 9px 10px; margin-bottom: 10px;
  background: none; border: 1px solid transparent; border-radius: 9px;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.node:hover { background: var(--bg-card); }
.node[aria-current="true"] { background: var(--bg-card); border-color: var(--sel-border); }
.node[data-off="1"] { opacity: 0.35; }

/* The connector, in two layers: a grey track that is always there, and a
   purple fill that GROWS out of a node the moment it is answered. That growth
   is the build-up - the chain visibly reaching down the page as they work,
   rather than a colour that flicks on. */
.node::before, .node::after {
  content: ""; position: absolute; left: 21px; top: -11px; width: 2px; height: 12px;
}
.node::before { background: var(--border); }
.node::after {
  background: var(--purple);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.4s var(--ease);
}
.node:first-of-type::before, .node:first-of-type::after { display: none; }
/* Fills the link BELOW a completed node, so the line runs in flow direction. */
.node[data-done="1"] + .node::after, .node.attention + .node::after { transform: scaleY(1); }

.node .dot {
  flex: none; display: grid; place-items: center;
  width: 23px; height: 23px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--bg);
  font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
/* Only the node just completed pops. Everything else stays still. */
.node[data-just="1"] .dot { animation: dotPop 0.45s var(--ease); }
@keyframes dotPop {
  0%   { transform: scale(0.6); }
  55%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.node[aria-current="true"] .dot { border-color: var(--purple); color: var(--text); }
.node[data-done="1"] .dot { border-color: var(--purple); background: var(--purple); color: #fff; }
.node[data-done="1"] .dot svg { width: 12px; height: 12px; }

.node .n-label { font-size: 13.5px; line-height: 1.3; color: var(--text-muted); }
.node[aria-current="true"] .n-label,
.node[data-done="1"] .n-label { color: var(--text); }
.node .n-sys { flex: none; width: 16px; height: 16px; color: var(--text-dim); }

/* The greyed head of the chain. Never asked about - the answer is always word
   of mouth plus Facebook and there is no automation finding in it. */
.node.attention { opacity: 0.4; pointer-events: none; }
.node.attention .dot { border-style: dashed; }

/* ==========================================================================
   The stage card - the node IS the input
   ========================================================================== */

.card { max-width: 660px; overflow: hidden; }

/* Only added when the flow actually advanced, so the card arrives with the
   move instead of snapping into place. */
.card-inner.slide { animation: cardIn 0.34s var(--ease) backwards; }
@keyframes cardIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
.card .stage-of {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 10px;
}
.card h2 { margin-bottom: 8px; }
.card .stage-hint { color: var(--text-muted); font-size: 15px; margin: 0 0 30px; }

.q { margin-bottom: 28px; }
.q-label { font-size: 15px; font-weight: 500; margin-bottom: 12px; }

.opts { display: grid; gap: 8px; }
.opt {
  position: relative;
  display: flex; align-items: baseline; gap: 12px; text-align: left; width: 100%;
  padding: 14px 46px 14px 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), transform 0.12s var(--ease);
}
.opt:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.opt:active { transform: scale(0.993); }

/* The tick draws itself in on select. Cheap, but it is the thing that makes a
   tap feel like it landed. */
.opt::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 6px; height: 11px; margin-top: -8px;
  border-right: 2px solid var(--purple-light); border-bottom: 2px solid var(--purple-light);
  transform: rotate(45deg) scale(0); opacity: 0;
  transition: transform 0.24s var(--ease), opacity 0.18s var(--ease);
}
.opt[aria-pressed="true"]::after { transform: rotate(45deg) scale(1); opacity: 1; }
.opt .o-l { font-size: 15px; font-weight: 500; flex: none; }
.opt .o-s { font-size: 13.5px; color: var(--text-dim); }
.opt[aria-pressed="true"] { background: var(--sel-bg); border-color: var(--sel-border); }
.opt[aria-pressed="true"] .o-s { color: var(--text-muted); }

/* System picker. Arrives pre-filled from the tools they ticked, so this is a
   confirm rather than a question. Editing beats authoring for completion. */
.sys-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sys-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--sel-bg); border: 1px solid var(--sel-border);
  font-size: 14px;
}
.sys-chip svg { width: 17px; height: 17px; color: var(--purple-light); }
.sys-chip .w { font-weight: 600; font-size: 13px; color: var(--purple-light); }
.sys-change {
  background: none; border: none; padding: 0;
  font-size: 13.5px; color: var(--text-muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.sys-change:hover { color: var(--purple-light); }

.sys-pick { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.sys-opt {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 11px 13px; font-size: 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px;
}
.sys-opt:hover { border-color: var(--border-hover); }
.sys-opt svg { width: 18px; height: 18px; flex: none; color: var(--text-muted); }
.sys-opt .w { font-weight: 600; font-size: 13px; flex: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.actions { display: flex; align-items: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px;
  border: 1px solid transparent; font-size: 15px; font-weight: 500;
  text-decoration: none;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
              transform 0.14s var(--ease), color 0.18s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: var(--purple-dark); }
/* The arrow leans forward on hover. It is the smallest possible signal that
   this button moves you along rather than submitting something. */
.btn-primary::after {
  content: "\2192"; font-size: 15px; line-height: 1;
  transition: transform 0.22s var(--ease);
}
.btn-primary:hover::after { transform: translateX(4px); }
.btn-primary[disabled] { opacity: 0.35; pointer-events: none; }
.btn-ghost { background: none; border-color: var(--border); color: var(--text-muted); }
.btn-ghost:hover { border-color: var(--border-hover); color: var(--text); }
.btn-text { background: none; border: none; color: var(--text-muted); padding: 13px 4px; }
.btn-text:hover { color: var(--text); }

/* ==========================================================================
   Ranking
   ========================================================================== */

.rank-list { display: grid; gap: 10px; max-width: 720px; }
.rank-item {
  display: flex; align-items: center; gap: 16px; text-align: left; width: 100%;
  padding: 16px 18px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 11px;
  font-size: 15.5px;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.rank-item:hover { border-color: var(--border-hover); }
.rank-item[aria-pressed="true"] { background: var(--sel-bg); border-color: var(--sel-border); }
.rank-num {
  flex: none; display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 50%;
  border: 1.5px solid var(--border); font-size: 13px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.rank-item[aria-pressed="true"] .rank-num {
  background: var(--purple); border-color: var(--purple); color: #fff;
}

.verbatim {
  width: 100%; max-width: 720px; margin-top: 26px;
  padding: 15px 17px; min-height: 96px; resize: vertical;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 11px;
  font-family: inherit; font-size: 15px; line-height: 1.5;
}
.verbatim:focus { outline: none; border-color: var(--sel-border); }
.verbatim::placeholder { color: var(--text-dim); }

/* ==========================================================================
   Result
   ========================================================================== */

/* The finished map. Serpentine on desktop so all nine fit on one screen with
   no scrolling - the point is to see the whole business at once. */
.result-map {
  display: grid; column-gap: 32px; row-gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  margin: 34px 0 12px;
}
.rnode {
  position: relative; padding: 16px 16px 16px 19px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 11px;
  border-left: 3px solid var(--ok);
  animation: pop 0.42s var(--ease) backwards;
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Chevrons in the column gaps. Without them this is a grid of nine cards;
   with them it reads as one chain, which is the entire point of the page. */
.rnode::after {
  content: ""; position: absolute; right: -21px; top: 50%;
  width: 7px; height: 7px; margin-top: -4px;
  border-top: 1.5px solid var(--border); border-right: 1.5px solid var(--border);
  transform: rotate(45deg);
}
.rnode:nth-child(3n)::after, .rnode:last-child::after { display: none; }
.rnode[data-state="slow"] { border-left-color: var(--amber); }
.rnode[data-state="gap"]  { border-left-color: var(--red); }
.rnode .r-name { font-size: 15px; font-weight: 500; margin-bottom: 5px; }
.rnode .r-state { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); }
.rnode .r-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.rnode[data-state="slow"] .r-state i { background: var(--amber); }
.rnode[data-state="gap"]  .r-state i { background: var(--red); }
.rnode .r-sys {
  display: flex; align-items: center; gap: 7px;
  margin-top: 11px; font-size: 12px; color: var(--text-dim);
}
.rnode .r-sys svg { width: 14px; height: 14px; }
.rnode .r-sys .w { font-weight: 600; }

.legend { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--text-muted); margin-bottom: 44px; }
.legend span { display: flex; align-items: center; gap: 8px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.tally {
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--border); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; margin-bottom: 52px;
}
.tally > div { background: var(--bg-card); padding: 22px 24px; }
.tally .t-num { font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: -0.03em; }
.tally .t-cap { color: var(--text-muted); font-size: 14px; margin-top: 8px; }

.opps { display: grid; gap: 14px; margin-bottom: 56px; }
.opp {
  display: flex; gap: 20px; padding: 26px 28px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px;
}
.opp .o-n {
  flex: none; font-weight: 700; font-size: 25px; line-height: 1; letter-spacing: -0.03em;
  color: var(--purple-light); width: 28px;
}
.opp h3 { font-size: 19px; font-weight: 500; margin-bottom: 7px; letter-spacing: -0.015em; }
.opp p { margin: 0; color: var(--text-muted); font-size: 15px; }

.cta-block {
  padding: 40px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-card);
}
.cta-block h2 { margin-bottom: 12px; }
.cta-block p { color: var(--text-muted); margin: 0 0 26px; max-width: 54ch; }

.email-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.email-row input {
  flex: 1 1 260px; padding: 13px 16px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  font-family: inherit; font-size: 15px;
}
.email-row input:focus { outline: none; border-color: var(--sel-border); }
.email-row input::placeholder { color: var(--text-dim); }
.note { font-size: 13px; color: var(--text-dim); margin: 0; }
.note a { color: var(--text-muted); }

.share {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border);
  font-size: 14px; color: var(--text-muted);
}

/* ==========================================================================
   Resume banner
   ========================================================================== */

.resume {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; margin-bottom: 30px;
  background: var(--bg-card); border: 1px solid var(--sel-border); border-radius: 11px;
  font-size: 14.5px;
}
.resume .r-txt { flex: 1 1 260px; }

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 900px) {
  .mapper { grid-template-columns: 1fr; gap: 22px; }

  /* The rail becomes a horizontal strip pinned under the header, so the
     diagram stays visible while they answer. It auto-scrolls the active node
     into view. A vertical map below the questions would be off-screen exactly
     when the build-up is meant to be the experience. */
  .rail {
    position: sticky; top: 53px; z-index: 50;
    margin: 0 -24px; padding: 12px 24px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail-title { display: none; }
  .rail-track { display: flex; gap: 0; }

  .node {
    flex-direction: column; gap: 7px; width: auto; flex: none;
    padding: 6px 10px; margin: 0; min-width: 76px;
  }
  /* Same two-layer connector, turned on its side: the purple fill grows
     rightwards out of each answered node. */
  .node::before, .node::after {
    left: auto; right: 50%; top: 17px; width: 100%; height: 2px;
  }
  .node::after { transform: scaleX(0); transform-origin: right; }
  .node[data-done="1"] + .node::after, .node.attention + .node::after { transform: scaleX(1); }

  .node .n-label { font-size: 10.5px; text-align: center; line-height: 1.25; max-width: 82px; }
  .node .n-sys { display: none; }

  .result-map { grid-template-columns: 1fr; row-gap: 26px; }
  /* One column, so the chain runs downward and every chevron points down. */
  .rnode::after {
    right: auto; left: 26px; top: auto; bottom: -17px; margin-top: 0;
    transform: rotate(135deg);
  }
  .rnode:nth-child(3n)::after { display: block; }
  .rnode:last-child::after { display: none; }
  .opp { flex-direction: column; gap: 10px; padding: 22px; }
  .opp .o-n { width: auto; }
  .cta-block { padding: 26px 22px; }
  .screen { padding: 32px 0 80px; }
}

@media (max-width: 560px) {
  /* The rail already shows where they are, so the header counter is noise at
     this width and it is what pushed the bar onto two lines. */
  .top .step-count { display: none; }
  .top { padding: 0 18px; }
  .wrap { padding: 0 18px; }
  .rail { margin: 0 -18px; padding: 12px 18px; }

  .tiles { grid-template-columns: 1fr; }
  .tools { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .tool { min-height: 96px; padding: 14px 8px; }
  .opt { flex-direction: column; gap: 3px; }
}