/* Potent's brand tokens, read straight off www.potentpositioning.com rather
   than approximated. The live site declares these as --cl-* custom properties;
   the names are localised here but the values are unchanged.

     --cl-primary / --cl-dark   #080a09
     --cl-bright-green          #42f479
     --cl-light-green           #beffd2
     --cl-bright-peach          #ffa5c3
     --cl-light-peach           #ffcfdf
     --cl-grey                  #9b9b9b
     --font-main                Stack Sans Text
     --font-second              TASA Orbiter

   Both typefaces are on Google Fonts, so this uses the real ones. An earlier
   Potent build substituted Space Grotesk and DM Sans for them, which is no
   longer necessary.

   Chart marks were validated rather than eyeballed. Bright green against
   bright peach, the up and down pair on the momentum bars, separates at
   deltaE 10.0 under deuteranopia against a threshold of 8, and 32.2 for normal
   vision. Both clear 3:1 on the ground. Direction from the centre axis and a
   signed label carry the meaning as well, so nothing rests on colour alone. */
:root {
  --ground: #080A09;
  --panel: #141713;
  --panel-2: #0E110D;
  --line: #23261F;

  --accent: #42F479;        /* marks, emphasis, links */
  --accent-soft: #BEFFD2;   /* filled buttons, as on the site */
  --down: #FFA5C3;          /* the falling half of a diverging bar */
  --cl-bright-pink: #FCA5FF;
  --cl-light-pink: #FEDCFF;
  --cl-bright-peach: #FFA5C3;

  --ink: #FFFFFF;
  --ink-1: rgba(255, 255, 255, 0.88);
  --ink-2: #9B9B9B;
  --ink-3: rgba(255, 255, 255, 0.48);
  --hair: rgba(255, 255, 255, 0.28);
  --mark-mute: #9B9B9B;

  --font-body: "Stack Sans Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "TASA Orbiter", "Stack Sans Text", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-1);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--ink); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3 { font-size: 1.05rem; }
p { margin: 0; }
a { color: var(--accent); }

.wrap { width: min(1180px, calc(100% - 2.5rem)); margin-inline: auto; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Header ------------------------------------------------------------------ */
.site-head { padding: 1.6rem 0; }
/* The wordmark is set lowercase in the display face, as on the site. */
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink); letter-spacing: -0.03em; }

/* Hero -------------------------------------------------------------------- */
.hero { padding: 3.5rem 0 2.5rem; }
.hero h1 { max-width: 20ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { font-size: 1.08rem; }
.hero .lede { margin-top: 1.4rem; max-width: 62ch; color: var(--ink-2); font-size: 1.08rem; }

/* Form -------------------------------------------------------------------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
form.controls { margin-top: 2.5rem; padding: 1.5rem; display: grid; gap: 1.1rem 1.2rem; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 700px)  { form.controls { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { form.controls { grid-template-columns: 1.15fr 1fr 1.15fr auto; } }
.field { display: grid; gap: .5rem; min-width: 0; }
.field > label { font-size: .8rem; color: var(--ink-2); font-weight: 500; }
.field input, .field select {
  width: 100%; height: 50px; padding: 0 1rem; font: inherit; font-size: .98rem;
  color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 12px;
}
.field input::placeholder { color: var(--hair); }
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
button.go {
  height: 50px; padding: 0 1.9rem; font-family: var(--font-display);
  font-weight: 500; font-size: 1rem;
  color: var(--ground); background: var(--accent-soft);
  border: 0; border-radius: 9999px; cursor: pointer; white-space: nowrap;
  transition: filter .2s var(--ease);
}
button.go:hover { filter: brightness(1.06); }
button.go:disabled { opacity: .45; cursor: not-allowed; }

.chips { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.chips span.lbl { font-size: .8rem; color: var(--ink-3); margin-right: .2rem; }
.chip {
  font: inherit; font-size: .82rem; padding: .32rem .7rem; cursor: pointer;
  color: var(--ink-2); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
}
.chip:hover { color: var(--ground); background: var(--accent-soft); border-color: var(--accent-soft); }

.note { font-size: .82rem; color: var(--ink-3); }
.err { color: var(--down); font-size: .9rem; }

/* Progress ---------------------------------------------------------------- */
.progress { margin-top: 2rem; padding: 1.4rem 1.5rem; display: none; }
.progress.on { display: block; }
.track { height: 5px; background: var(--panel-2); border-radius: 99px; overflow: hidden; margin-top: .8rem; }
.track > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .35s ease; }

/* Results ----------------------------------------------------------------- */
#results { display: none; padding-bottom: 5rem; }
#results.on { display: block; }
section.block { margin-top: 3.5rem; }
section.block > h2 + p.sub { margin-top: .7rem; color: var(--ink-2); max-width: 68ch; }

.headline { margin-top: 2.8rem; padding: 2rem; border-left: 3px solid var(--accent); }
.headline .big { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 2rem); color: var(--ink); line-height: 1.22; font-weight: 500; letter-spacing: -0.02em; }
.headline .big b { color: var(--accent); font-weight: 500; }
.headline .why { margin-top: 1rem; color: var(--ink-2); max-width: 70ch; }

.tiles { margin-top: 1.4rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tile { padding: 1.3rem; }
.tile .k { font-size: .78rem; color: var(--ink-3); }
.tile .v { margin-top: .45rem; font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tile .s { margin-top: .3rem; font-size: .82rem; color: var(--ink-3); }

/* Bars -------------------------------------------------------------------- */
.bars { margin-top: 1.6rem; display: grid; gap: .55rem; }
.bar-row { display: grid; grid-template-columns: 150px 1fr auto; gap: .9rem; align-items: center; }
.bar-row .city { font-size: .88rem; color: var(--ink-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row.home .city { color: var(--accent); font-weight: 600; }
.bar-track { position: relative; height: 22px; }
.bar-fill { display: block; height: 100%; background: var(--mark-mute); border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-row.home .bar-fill { background: var(--accent); }
.bar-row .val { font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-row.home .val { color: var(--ink); font-weight: 600; }
@media (max-width: 620px) { .bar-row { grid-template-columns: 96px 1fr auto; gap: .5rem; } }

/* Table ------------------------------------------------------------------- */
.table-wrap { margin-top: 1.6rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 620px; }
th, td { padding: .72rem .95rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
thead th { background: var(--panel-2); color: var(--ink-2); font-weight: 500; font-size: .78rem; cursor: pointer; user-select: none; position: sticky; top: 0; }
thead th:hover { color: var(--ink); }
thead th[aria-sort] { color: var(--accent); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.home { background: rgba(66, 244, 121, .07); }
tbody tr.home td:first-child { color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
td.num { font-variant-numeric: tabular-nums; }
td.muted { color: var(--ink-3); }

/* Small multiples --------------------------------------------------------- */
.spark-grid { margin-top: 1.6rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.spark { padding: 1.1rem; }
.spark .name { font-size: .88rem; color: var(--ink-1); font-weight: 500; }
.spark .chg { margin-top: .2rem; font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.spark-plot { position: relative; margin-top: .6rem; height: 46px; }
.spark-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spark-dot {
  position: absolute; right: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); transform: translate(50%, -50%);
}
.spark .foot { margin-top: .5rem; font-size: .74rem; color: var(--ink-3); }

/* Method ------------------------------------------------------------------ */
.method { margin-top: 3.5rem; padding: 1.8rem; }
.method h3 { color: var(--ink-1); }
.method dl { margin: 1.1rem 0 0; display: grid; gap: 1rem; }
.method dt { font-size: .85rem; color: var(--accent); font-weight: 500; }
.method dd { margin: .25rem 0 0; font-size: .89rem; color: var(--ink-3); max-width: 84ch; line-height: 1.65; }

.tip {
  position: fixed; z-index: 30; pointer-events: none; opacity: 0;
  transform: translate(-50%, -100%); transition: opacity .12s;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: .55rem .7rem; font-size: .82rem; color: var(--ink-1);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.9); white-space: nowrap;
}
.tip.on { opacity: 1; }
.tip .t-city { color: var(--ink); font-weight: 600; }
.tip .t-row { color: var(--ink-3); }

footer.site-foot { padding: 2.5rem 0 3rem; color: var(--ink-3); font-size: .84rem; }

/* Momentum ---------------------------------------------------------------- */
.mom-empty { margin-top: 1.4rem; padding: 1.6rem; }
.mom-empty .big { color: var(--ink-1); font-weight: 500; }
.mom-empty .small { margin-top: .6rem; font-size: .88rem; color: var(--ink-3); max-width: 72ch; }
.mom-list { margin-top: 1.4rem; display: grid; gap: .5rem; }
.mom-row { display: grid; grid-template-columns: 150px 1fr auto; gap: .9rem; align-items: center; padding: .5rem 0; }
.mom-row .city { font-size: .88rem; color: var(--ink-2); text-align: right; }
.mom-row.home .city { color: var(--accent); font-weight: 600; }
.mom-bar { position: relative; height: 20px; display: grid; grid-template-columns: 1fr 1fr; }
.mom-bar .neg, .mom-bar .pos { height: 100%; }
.mom-bar .neg { justify-self: end; background: var(--down); border-radius: 4px 0 0 4px; }
.mom-bar .pos { justify-self: start; background: var(--accent); border-radius: 0 4px 4px 0; }
.mom-bar .axis { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line); }
.mom-row .val { font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--ink-1); min-width: 62px; text-align: right; }

/* Glowing orbs ------------------------------------------------------------
   Same construction as the ones on potentpositioning.com: absolutely placed
   circles, blurred hard, sitting behind everything and taking no pointer
   events. The site's own rule is
     border-radius:50%; filter:blur(var(--orb-blur,100px)); position:absolute
   with three orbs at 500/450/400px and opacity .85/.8/.7, dropping to a 40px
   blur on small screens and killing the animation under reduced motion.

   Two things differ here on purpose. They are fixed rather than absolute, so
   they sit behind a long scrolling report instead of only the hero. And they
   are kept away from the left column where the headline sits, because every
   text contrast in this build was measured against a #080A09 ground and a
   bright orb underneath would quietly undo that. Panels are opaque, so
   everything inside a card is unaffected either way. */
.orbs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--orb-blur, 100px));
  will-change: transform, opacity;
}
.orb-1 { width: 500px; height: 500px; top: -10%; right: -14%; opacity: .30; background: var(--cl-bright-pink, #FCA5FF); animation: drift-1 26s var(--ease) infinite alternate; }
.orb-2 { width: 450px; height: 450px; top: 30%;  right: -2%;  opacity: .18; background: var(--cl-bright-peach, #FFA5C3); animation: drift-2 32s var(--ease) infinite alternate; }
.orb-3 { width: 400px; height: 400px; top: 76%;  left: -16%; opacity: .16; background: var(--accent); animation: drift-3 38s var(--ease) infinite alternate; }
.orb-4 { width: 380px; height: 380px; top: 115%; right: -10%; opacity: .16; background: var(--cl-light-pink, #FEDCFF); animation: drift-1 30s var(--ease) infinite alternate; }

@keyframes drift-1 { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(-6%, 8%, 0) scale(1.12); } }
@keyframes drift-2 { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(8%, -6%, 0) scale(1); } }
@keyframes drift-3 { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(10%, -9%, 0) scale(1.1); } }

/* The site drops to a 40px blur on narrow screens, where a 100px blur on a
   500px circle costs more to composite than it shows. */
@media (max-width: 760px) {
  .orb { --orb-blur: 40px; }
  .orb-1 { width: 320px; height: 320px; }
  .orb-2, .orb-3, .orb-4 { width: 280px; height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
}

/* The site's own green glow, used on the one primary action. */
button.go { box-shadow: 0 0 80px #42f47914, 0 0 160px #42f4790a; }

/* The email gate ---------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gate { padding: 2.2rem; border-left: 3px solid var(--accent); }
.gate h2 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
.gate .sub { margin-top: .8rem; }
#gate-form { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; }
#gate-form input {
  flex: 1 1 260px; height: 50px; padding: 0 1rem; font: inherit; font-size: 1rem;
  color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 12px;
}
#gate-form input::placeholder { color: var(--ink-3); }
#gate-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
#gate-note { margin-top: 1rem; max-width: 60ch; }
#gate-note a { color: var(--ink-2); text-decoration: underline; }
.gate.sent { border-left-color: var(--accent-soft); }
.gate .done { color: var(--ink); font-size: 1.05rem; }
.gate .done b { color: var(--accent); font-weight: 500; }
.gate .link {
  display: inline-block; margin-top: 1rem; padding: .7rem 1.1rem;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--accent); text-decoration: none; font-size: .9rem; word-break: break-all;
}