/* Agentic Labs — ledger paper.
   Structure comes from hairline rules, never from shadows.
   Green means approved or done; it is a status, not decoration. */

:root {
  --paper:      #ffffff;        /* white dominant, like the reference */
  --tint:       #f5f7f3;        /* the old paper, now only for alternating bands */
  --raised:     #ffffff;
  --rule:       #dfe4dd;
  --rule-soft:  #ebefe9;
  --ink:        #14201a;
  --ink-soft:   #55635a;
  --approved:   #057a44;
  --approved-w: #eaf3ee;

  /* one hue per department, used consistently wherever that department appears.
     Colour carries which part of the business you are looking at. */
  --d-money:    #057a44;  --d-money-w:   #e9f4ee;
  --d-win:      #1257b5;  --d-win-w:     #e9f1fc;
  --d-jobs:     #6d28d9;  --d-jobs-w:    #f1ecfd;
  --d-care:     #c2410c;  --d-care-w:    #fdefe7;
  --d-market:   #b21e62;  --d-market-w:  #fdecf3;
  --d-people:   #0e7490;  --d-people-w:  #e7f4f8;

  --lift:   0 1px 2px rgba(20,32,26,.05), 0 10px 26px -14px rgba(20,32,26,.18);
  --lift-s: 0 1px 2px rgba(20,32,26,.04), 0 4px 12px -8px rgba(20,32,26,.14);

  --display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --text: 'Newsreader', Georgia, 'Times New Roman', serif;

  --gutter: clamp(20px, 5vw, 44px);
  --measure: 1180px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(17px, 0.55vw + 15.5px, 19px);
  line-height: 1.62;
  font-synthesis-weight: none;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--approved);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- layout */

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* full-bleed rule between sections; the rule is the structure */
.band { border-top: 1px solid var(--rule); }
.band-pad { padding-block: clamp(56px, 8vw, 104px); }

.lede { max-width: 62ch; }
.lede-narrow { max-width: 54ch; }

/* ---------------------------------------------------------------- type */

h1, h2, h3, .ui {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}

h1 { font-size: clamp(2.5rem, 5.4vw, 4.1rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -0.028em; }
h3 { font-size: clamp(1.15rem, 1.4vw, 1.35rem); letter-spacing: -0.015em; line-height: 1.25; }

p { margin: 0 0 1.1em 0; }
p:last-child { margin-bottom: 0; }

.sub {
  font-size: clamp(1.05rem, 1.2vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.small { font-size: 0.87rem; line-height: 1.5; color: var(--ink-soft); }

strong { font-weight: 600; }

/* ---------------------------------------------------------------- nav */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--rule);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  min-height: 74px;
  padding-block: 12px;
}

.mark { flex: 0 0 auto; }
.mark img { height: 26px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
  margin-left: auto;
  font-family: var(--display);
  font-size: 0.93rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.nav a { text-decoration: none; color: var(--ink-soft); transition: color .15s; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }

/* phone: the masthead carries the mark and one action; the footer carries the links */
@media (max-width: 780px) {
  .nav { display: none; }
  .masthead .wrap { justify-content: space-between; min-height: 62px; }
  .masthead .btn { margin-left: auto; padding: 10px 16px; font-size: 0.9rem; }
  .mark img { height: 23px; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 7px;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}

.btn-solid { background: var(--approved); color: #fff; box-shadow: var(--lift-s); }
.btn-solid:hover { background: #046236; }

.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.tlink {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--approved);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--approved) 35%, transparent);
  padding-bottom: 1px;
}
.tlink:hover { border-bottom-color: var(--approved); }

/* ---------------------------------------------------------------- hero */

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(52px, 7vw, 96px);
}

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
}

.hero h1 { margin-bottom: 22px; }
.hero .sub { margin-bottom: 30px; max-width: 46ch; }

.standfirst {
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--approved);
  margin-bottom: 18px;
  letter-spacing: -0.005em;
}

.reassure {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.reassure span { display: inline-flex; align-items: center; gap: 8px; }
.reassure span::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--approved);
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------- the document */

.doc {
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: clamp(22px, 2.6vw, 30px);
  position: relative;
  transform: rotate(-0.7deg);
  max-width: 440px;
  margin-inline: auto;
}

.doc::after {           /* the torn stub of a carbon-copy book */
  content: "";
  position: absolute;
  inset: 8px -7px 8px auto;
  width: 6px;
  background: repeating-linear-gradient(
    to bottom, var(--rule) 0 5px, transparent 5px 11px);
}

.doc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.doc-title { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em; }
.doc-ref { font-family: var(--display); font-size: 0.82rem; font-weight: 500; color: var(--ink-soft); }

.doc-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.95rem;
}
.doc-row span:first-child { color: var(--ink-soft); }
.doc-row span:last-child { text-align: right; }

.doc-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding-top: 15px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.stamp {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1.5px solid var(--approved);
  border-radius: 3px;
  color: var(--approved);
  font-family: var(--display);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transform: rotate(-2.2deg);
  background: var(--approved-w);
}

.stamp svg { flex: 0 0 auto; }
.stamp path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: draw .5s .55s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.doc-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .stamp path { animation: none; stroke-dashoffset: 0; }
  * { transition: none !important; }
}

/* ---------------------------------------------------------------- ledger rows */

.ledger { border-top: 1px solid var(--rule); margin-top: clamp(30px, 4vw, 44px); }

.row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap: clamp(14px, 3vw, 48px);
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
@media (max-width: 720px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
.row p { color: var(--ink-soft); }

/* roster: name, role, one line — reads like a staff list, not a card grid */
.roster { border-top: 1px solid var(--rule); margin-top: clamp(28px, 4vw, 40px); }
.person {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 11rem) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 32px);
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.person b { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em; }
.person i { font-style: normal; color: var(--ink); font-size: 0.95rem; }
.person span { color: var(--ink-soft); font-size: 0.93rem; }
@media (max-width: 700px) {
  .person { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0; }
}

/* ---------------------------------------------------------------- columns */

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  margin-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--rule);
}
.col {
  padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 30px);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.col:first-child { padding-left: 0; }
.col p { color: var(--ink-soft); font-size: 0.97rem; }
.col h3 { margin-bottom: 8px; }
@media (min-width: 981px) { .col:last-child { border-right: 0; padding-right: 0; } }
@media (max-width: 980px) { .col { border-right: 0; padding-left: 0; padding-right: 0; } }

/* ---------------------------------------------------------------- pricing */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  margin-top: clamp(30px, 4vw, 48px);
}
@media (max-width: 880px) { .tiers { grid-template-columns: minmax(0, 1fr); } }

.tier {
  padding: clamp(26px, 2.6vw, 36px) clamp(22px, 2.2vw, 30px);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.tier:last-child { border-right: 0; }
@media (max-width: 880px) { .tier { border-right: 0; } }
.tier-pick { background: var(--raised); box-shadow: var(--lift); border-radius: 10px; position: relative; z-index: 1; }

.tier .amount {
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 16px 0 4px;
}
.tier .per { font-size: 0.9rem; color: var(--ink-soft); }
.tier .scope { font-family: var(--display); font-size: 0.87rem; font-weight: 500; color: var(--ink-soft); margin-top: 4px; }
.tier .why { margin: 14px 0 22px; color: var(--ink-soft); font-size: 0.97rem; }
.tier .btn { margin-top: auto; }

.has { list-style: none; margin: 22px 0 0; padding: 0; font-size: 0.95rem; }
.has li { padding: 8px 0 8px 24px; position: relative; border-top: 1px solid var(--rule-soft); }
.has li::before {
  content: "";
  position: absolute; left: 2px; top: 16px;
  width: 9px; height: 5px;
  border-left: 1.6px solid var(--approved);
  border-bottom: 1.6px solid var(--approved);
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- misc */

.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 860px) { .pair { grid-template-columns: minmax(0, 1fr); } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chips a, .chips span {
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--raised);
  text-decoration: none;
  color: var(--ink);
}
.chips a:hover { border-color: var(--ink); }

.quiet { background: var(--tint); }

.closer { text-align: left; }
.closer h2 { max-width: 18ch; }

/* ---------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--rule); padding-block: clamp(40px, 5vw, 60px); }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
@media (max-width: 800px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.foot h4 {
  font-family: var(--display); font-size: 0.83rem; font-weight: 700;
  margin: 0 0 12px; letter-spacing: -0.005em;
}
.foot ul { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
.foot li { margin-bottom: 7px; }
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot-end {
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  font-size: 0.87rem; color: var(--ink-soft);
}

/* inner pages carry longer headlines than the homepage, so they get their own step */
.hero-inner h1 { font-size: clamp(2.1rem, 3.7vw, 3.05rem); letter-spacing: -0.03em; }
.hero-inner .sub { max-width: 52ch; }

/* the hero already breathes; don't stack its bottom padding onto the next band */
.hero .wrap { padding-block: clamp(52px, 7vw, 96px) clamp(38px, 4.5vw, 60px); }

/* ================================================================ status colours
   green means done, amber means waiting on a person. Both carry information;
   neither is decoration. */
:root {
  --waiting:   #b45309;
  --waiting-w: #fdf3e6;
}

/* faint ruling, like the stock itself — texture without decoration */
.ruled {
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 35px, var(--rule-soft) 35px 36px);
  background-position: 0 6px;
}

/* ---------------------------------------------------------------- panel */

.panel {
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--lift);
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 15px clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--rule);
  background: var(--tint);
}
.panel-head b { font-family: var(--display); font-weight: 700; font-size: 0.98rem; letter-spacing: -0.015em; }
.panel-head span { font-size: 0.84rem; color: var(--ink-soft); font-family: var(--display); font-weight: 500; }
.panel-foot {
  padding: 13px clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--rule);
  font-size: 0.86rem;
  color: var(--ink-soft);
  background: var(--tint);
}

/* ---------------------------------------------------------------- the queue */

.qitem {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 13px;
  padding: 15px clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--rule-soft);
}
.qitem:last-of-type { border-bottom: 0; }
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  margin-top: 7px;
  background: var(--waiting);
}
.dot-done { background: var(--approved); }
.qitem b { font-family: var(--display); font-weight: 600; font-size: 0.96rem; letter-spacing: -0.01em; display: block; }
.qitem p { margin: 3px 0 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }
.qtag {
  font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.02em; color: var(--waiting);
  background: var(--waiting-w); border: 1px solid color-mix(in srgb, var(--waiting) 26%, transparent);
  padding: 2px 7px; border-radius: 2px; display: inline-block; margin-bottom: 5px;
}
.qtag-done { color: var(--approved); background: var(--approved-w);
             border-color: color-mix(in srgb, var(--approved) 26%, transparent); }
.qacts { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.qacts span {
  font-family: var(--display); font-size: 0.8rem; font-weight: 600;
  padding: 5px 11px; border-radius: 2px; border: 1px solid var(--rule); color: var(--ink-soft);
}
.qacts span:first-child { background: var(--approved); border-color: var(--approved); color: #fff; }

/* ---------------------------------------------------------------- org chart */

.chart { margin-top: clamp(30px, 4vw, 44px); }
.lead {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--lift-s);
  background: var(--raised);
  padding: 14px 18px;
  width: fit-content; max-width: 100%;
  margin-inline: auto;
}
.lead b { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em; }
.lead span { font-size: 0.88rem; color: var(--ink-soft); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--approved-w); border: 1px solid color-mix(in srgb, var(--approved) 34%, transparent);
  color: var(--approved); font-family: var(--display); font-weight: 700; font-size: 0.85rem;
  display: grid; place-items: center; flex: 0 0 auto;
}
.wires { display: block; width: 100%; height: 42px; }
.wires path { stroke: var(--rule); stroke-width: 1; fill: none; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.member {
  border: 1px solid var(--rule); border-radius: 10px; background: var(--raised);
  box-shadow: var(--lift-s);
  padding: 14px 12px; text-align: center;
}
.member .avatar { margin: 0 auto 9px; }
.member b { font-family: var(--display); font-weight: 700; font-size: 0.92rem; display: block; letter-spacing: -0.01em; }
.member span { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.35; display: block; margin-top: 2px; }
@media (max-width: 1020px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wires { display: none; }
  .lead { margin-bottom: 14px; }
}
@media (max-width: 560px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- flow strip */

.flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--lift-s);
  background: var(--raised);
  margin-top: clamp(28px, 4vw, 42px);
  overflow: hidden;
}
.stage {
  padding: clamp(14px, 1.6vw, 20px);
  border-right: 1px solid var(--rule);
  position: relative;
}
.stage:last-child { border-right: 0; }
.stage i {
  font-style: normal; font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  color: var(--ink-soft); letter-spacing: -0.005em; display: block; margin-bottom: 7px;
}
.stage b { font-family: var(--display); font-weight: 700; font-size: 0.93rem; display: block; letter-spacing: -0.01em; }
.stage p { margin: 4px 0 0; font-size: 0.83rem; color: var(--ink-soft); line-height: 1.4; }
.stage-you { background: var(--waiting-w); }
.stage-you i { color: var(--waiting); }
.stage-done i { color: var(--approved); }
@media (max-width: 1020px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage { border-bottom: 1px solid var(--rule); }
  .stage:nth-child(3n) { border-right: 0; } }
@media (max-width: 620px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { border-right: 1px solid var(--rule); }
  .stage:nth-child(2n) { border-right: 0; } }

/* ---------------------------------------------------------------- figures */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 1px solid var(--rule);
  margin-top: clamp(28px, 4vw, 40px);
}
.fig { padding: 22px clamp(16px, 2vw, 26px) 22px 0; border-bottom: 1px solid var(--rule); }
.fig b {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.7rem); letter-spacing: -0.04em; line-height: 1;
  display: block; color: var(--ink);
}
.fig span { display: block; margin-top: 7px; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.4; }

/* ---------------------------------------------------------------- week swap */

.weeks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
         border-top: 1px solid var(--rule); margin-top: clamp(28px, 4vw, 42px); }
@media (max-width: 760px) { .weeks { grid-template-columns: minmax(0, 1fr); } }
.week { padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.2vw, 28px) clamp(20px, 2.4vw, 28px) 0;
        border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.week:last-child { border-right: 0; padding-left: clamp(20px, 2.2vw, 28px); padding-right: 0; }
@media (max-width: 760px) { .week { border-right: 0; padding-left: 0 !important; padding-right: 0; } }
.week h3 { margin-bottom: 14px; }
.week ul { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
.week li { padding: 9px 0 9px 26px; position: relative; border-top: 1px solid var(--rule-soft); color: var(--ink-soft); }
.week-now li::before {
  content: ""; position: absolute; left: 3px; top: 19px; width: 11px; height: 1.5px;
  background: var(--waiting);
}
.week-after li::before {
  content: ""; position: absolute; left: 3px; top: 16px; width: 9px; height: 5px;
  border-left: 1.6px solid var(--approved); border-bottom: 1.6px solid var(--approved);
  transform: rotate(-45deg);
}
.week-after li { color: var(--ink); }

/* ---------------------------------------------------------------- log */

.log { font-size: 0.9rem; }
.logrow {
  display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto;
  gap: 14px; align-items: baseline;
  padding: 11px clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--rule-soft);
}
.logrow:last-child { border-bottom: 0; }
.logrow time { font-family: var(--display); font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.logrow p { margin: 0; }
.logrow em { font-style: normal; display: block; font-size: 0.83rem; color: var(--ink-soft); margin-top: 2px; }
.logrow u {
  text-decoration: none; font-family: var(--display); font-size: 0.74rem; font-weight: 700;
  color: var(--approved); background: var(--approved-w); padding: 3px 8px; border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--approved) 22%, transparent); white-space: nowrap;
}
@media (max-width: 640px) {
  .logrow { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .logrow u { justify-self: start; margin-top: 5px; }
}

/* ---------------------------------------------------------------- phone */

.phone {
  width: 248px; max-width: 100%;
  box-shadow: var(--lift);
  border: 1px solid var(--rule); border-radius: 22px;
  background: var(--raised); padding: 12px;
  margin-inline: auto;
}
.phone-screen { border: 1px solid var(--rule-soft); border-radius: 14px; overflow: hidden; background: var(--paper); }
.phone-bar {
  padding: 9px 13px; border-bottom: 1px solid var(--rule-soft);
  font-family: var(--display); font-size: 0.74rem; font-weight: 700; color: var(--ink-soft);
  display: flex; justify-content: space-between;
}
.phone-body { padding: 13px; }
.phone-body b { font-family: var(--display); font-size: 0.92rem; font-weight: 700; display: block; letter-spacing: -0.01em; }
.phone-body p { margin: 5px 0 0; font-size: 0.82rem; color: var(--ink-soft); line-height: 1.45; }

/* ================================================================ departments
   Six parts of a business, six hues, repeated wherever that department appears. */
.depts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 14px;
  margin-top: clamp(30px, 4vw, 44px);
}
.dept {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--raised);
  padding: clamp(20px, 2.2vw, 26px);
  box-shadow: var(--lift-s);
  transition: box-shadow .18s, transform .18s;
  text-decoration: none;
  display: block;
  border-top: 3px solid var(--hue);
}
.dept:hover { box-shadow: var(--lift); transform: translateY(-2px); }
.dept .glyph {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--hue-w);
  display: grid; place-items: center;
  margin-bottom: 15px;
}
.dept .glyph svg { display: block; }
.dept h3 { margin-bottom: 7px; }
.dept p { margin: 0; font-size: 0.94rem; color: var(--ink-soft); line-height: 1.5; }
.dept .go {
  display: inline-block; margin-top: 14px;
  font-family: var(--display); font-size: 0.87rem; font-weight: 600; color: var(--hue);
}

.d-money  { --hue: var(--d-money);  --hue-w: var(--d-money-w); }
.d-win    { --hue: var(--d-win);    --hue-w: var(--d-win-w); }
.d-jobs   { --hue: var(--d-jobs);   --hue-w: var(--d-jobs-w); }
.d-care   { --hue: var(--d-care);   --hue-w: var(--d-care-w); }
.d-market { --hue: var(--d-market); --hue-w: var(--d-market-w); }
.d-people { --hue: var(--d-people); --hue-w: var(--d-people-w); }

/* ---------------------------------------------------------------- credibility */
.cred {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--tint);
  padding-block: clamp(22px, 2.6vw, 32px);
}
.cred-in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(16px, 3vw, 40px);
}
.cred p {
  margin: 0; font-size: 0.92rem; color: var(--ink-soft);
  max-width: 44ch; flex: 1 1 320px;
}
.cred ul { flex: 1 1 380px; }
.cred b { color: var(--ink); font-weight: 600; }
.cred ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.cred li {
  font-family: var(--display); font-size: 0.88rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px;
}
.cred li span { color: var(--approved); font-weight: 700; }

/* ================================================================ allowance meter */
.meter-wrap { margin-top: clamp(26px, 3vw, 36px); }
.meter {
  display: flex;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--tint);
}
.meter span { display: block; height: 100%; }
.meter .rest { background: repeating-linear-gradient(135deg, var(--tint) 0 6px, #eef1ec 6px 12px); }
.meter-key {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  margin-top: 16px; font-size: 0.88rem;
}
.meter-key i { font-style: normal; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.meter-key i::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.meter-key b { color: var(--ink); font-family: var(--display); font-weight: 700; }
.meter-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.meter-top b { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.03em; }
.meter-top span { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------------------------------------------------------------- top-up packs */
.packs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; margin-top: clamp(26px, 3vw, 36px);
}
.pack {
  border: 1px solid var(--rule); border-radius: 12px; background: var(--raised);
  padding: clamp(20px, 2.2vw, 26px); box-shadow: var(--lift-s);
}
.pack b { display: block; font-family: var(--display); font-weight: 700;
          font-size: clamp(1.5rem, 2.2vw, 1.9rem); letter-spacing: -0.03em; }
.pack .credits { font-family: var(--display); font-weight: 600; font-size: 0.93rem; color: var(--ink-soft); }
.pack .rate { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule-soft);
              font-size: 0.86rem; color: var(--ink-soft); }

/* ================================================================ dark panels
   The page stays light. The system graphics sit in dark insets, because that is
   where "this is live infrastructure" is the thing being said. */
:root {
  --dk:        #0f1720;
  --dk-2:      #16212c;
  --dk-rule:   #26333f;
  --dk-ink:    #e9eff3;
  --dk-soft:   #92a3b2;
  --dk-green:  #3ddc84;
  --mono: ui-monospace, 'SF Mono', 'IBM Plex Mono', 'Roboto Mono', Menlo, monospace;
}

.dark {
  background: var(--dk);
  color: var(--dk-ink);
  border-radius: 14px;
  padding: clamp(24px, 3.2vw, 44px);
  margin-top: clamp(30px, 4vw, 44px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--lift);
}
/* faint contour texture so the dark never reads flat */
.dark::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 300px at 15% -10%, rgba(61,220,132,.10), transparent 70%),
    radial-gradient(700px 260px at 95% 110%, rgba(61,220,132,.06), transparent 70%);
  pointer-events: none;
}
.dark > * { position: relative; }
.dark h3 { color: var(--dk-ink); }
.dark .sub, .dark p { color: var(--dk-soft); }

.dk-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--dk-rule);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--dk-soft);
  text-transform: uppercase;
}
.dk-head .live { color: var(--dk-green); display: inline-flex; align-items: center; gap: 7px; }
.dk-head .live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dk-green);
  box-shadow: 0 0 0 3px rgba(61,220,132,.18);
  animation: blip 2.4s ease-in-out infinite;
}
@keyframes blip { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.dk-head .spacer { margin-left: auto; }

/* ---------------------------------------------------------------- node map */
.nodes { width: 100%; height: auto; display: block; }
.nodes .edge { stroke: var(--dk-rule); stroke-width: 1.3; fill: none; }
.nodes .chip { fill: var(--dk-2); stroke: var(--dk-rule); }
.nodes .chip-lead { fill: #10251b; stroke: rgba(61,220,132,.45); }
.nodes .nm { fill: var(--dk-ink); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; }
.nodes .rl { fill: var(--dk-soft); font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .07em; }
.nodes .pulse { fill: var(--dk-green); }
@media (prefers-reduced-motion: reduce) { .nodes .pulse { display: none; } .dk-head .live::before { animation: none; } }

/* ---------------------------------------------------------------- console */
.term {
  margin-top: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--dk-rule);
  border-radius: 9px;
  background: #0b1219;
  font-family: var(--mono);
  font-size: 0.79rem;
  line-height: 1.85;
  overflow: hidden;
}
.term-bar {
  display: flex; gap: 12px; align-items: center;
  padding: 9px 14px; border-bottom: 1px solid var(--dk-rule);
  color: var(--dk-soft); font-size: 0.7rem; letter-spacing: .08em;
}
.term-bar em { font-style: normal; margin-left: auto; }
.term-body { padding: 13px 14px; }
.term-body div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dk-soft); }
.term-body .ok { color: var(--dk-green); }
.term-body .you { color: #f2b45f; }
.term-body b { color: var(--dk-ink); font-weight: 500; }

/* ---------------------------------------------------------------- dark stats */
.dk-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(20px, 2.6vw, 30px);
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--dk-rule);
}
.dk-stats div b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.035em; color: var(--dk-green);
}
.dk-stats div span {
  display: block; margin-top: 5px; font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--dk-soft);
}

/* the "not a client" marker, used wherever example figures appear */
.example-note {
  display: inline-block; margin-top: 16px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: .07em;
  color: var(--dk-soft); border: 1px solid var(--dk-rule);
  padding: 4px 9px; border-radius: 3px;
}
.example-note.on-light {
  color: var(--ink-soft); border-color: var(--rule); background: var(--tint);
}