/* Marketing site — visual identity taken from the brand mark.
 *
 * Loaded AFTER main.css and only by base_marketing.html, which is deliberate:
 * main.css is four thousand lines with marketing rules scattered through it,
 * and a redesign written into the middle of that is a specificity fight with
 * itself. Everything here is additive and later in the cascade, so the whole
 * redesign reverts by removing one <link>.
 *
 * The palette is not invented. app/static/img/brand/mark.svg is navy #17233F
 * with a brass gradient (#F2DCA0 → #DAAE50 → #B07D24), and the site had been
 * ignoring it — main.css defines `--brass: #5b4fcf`, which is purple. Navy and
 * brass is the engraved plate outside a professional office, which is what an
 * audience worrying about IR35 and VAT quarters already recognises. Generic
 * SaaS purple says the opposite.
 */

:root {
  /* From the mark, sampled rather than chosen. */
  --m-navy:        #17233F;
  --m-navy-deep:   #0E1628;
  --m-navy-soft:   #243454;
  --m-brass:       #8F6319;  /* on paper — darkened from #B07D24 for 4.5:1 */
  --m-brass-mid:   #B07D24;  /* rules, marks, non-text */
  --m-brass-lit:   #DAAE50;  /* on navy */
  --m-brass-pale:  #F2DCA0;

  --m-paper:       #FFFFFF;
  --m-paper-cool:  #EEF1F5;  /* cool, not cream — cream reads as stock template */
  --m-ink:         #17233F;
  --m-ink-mid:     #4A5873;
  --m-ink-soft:    #7C89A0;
  --m-rule:        #D9E0E9;

  --m-display: "Fraunces", Georgia, serif;
  --m-body:    "Inter", system-ui, -apple-system, sans-serif;

  --m-gutter:  clamp(20px, 5vw, 72px);
  --m-measure: 64ch;         /* body copy never runs wider than this */
  --m-band:    clamp(64px, 9vw, 132px);
  --m-wide:    1180px;
}

:root[data-theme="dark"] {
  --m-paper:      #0E1628;
  --m-paper-cool: #141E33;
  --m-ink:        #E8EDF4;
  --m-ink-mid:    #A8B4C8;
  --m-ink-soft:   #74839B;
  --m-rule:       rgba(242, 220, 160, .14);
  --m-brass:      #DAAE50;
}

/* ── shell ──────────────────────────────────────────────────────────────── */

.marketing-body {
  background: var(--m-paper);
  color: var(--m-ink);
  font-family: var(--m-body);
  -webkit-font-smoothing: antialiased;
}

.marketing-body section { padding: var(--m-band) var(--m-gutter); }

/* Band rhythm. Sections alternate ground so the page has a pulse instead of
   scrolling as one undifferentiated column of text. */
.m-band-cool { background: var(--m-paper-cool); }
.m-band-navy { background: var(--m-navy); color: #DCE4F0; }

.m-inner { max-width: var(--m-wide); margin-inline: auto; }

/* ── type ───────────────────────────────────────────────────────────────── */

.marketing-headline,
.marketing-section-title,
.m-band-navy h2,
.marketing-lead-band h2,
.marketing-about-section h2 {
  font-family: var(--m-display);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 96;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.04;
  color: var(--m-ink);
  text-wrap: balance;
}

.marketing-headline {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  margin: 0 0 1.1rem;
}
/* The <em> in the headline is a second line, not an accented word — accenting
   one word in a headline is the commonest generated-page tell. Here it carries
   the whole subordinate clause and shifts optical size, so it reads as a
   different voice rather than a highlighter. */
.marketing-headline em {
  display: block;
  font-style: italic;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 144;
  color: var(--m-brass);
}

.marketing-section-title,
.m-band-navy h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  margin: 0 0 1rem;
}
.m-band-navy h2 { color: #FFFFFF; }

.marketing-sub,
.marketing-comparison-sub {
  font-size: clamp(1.05rem, 1.55vw, 1.2rem);
  line-height: 1.62;
  color: var(--m-ink-mid);
  max-width: var(--m-measure);
  margin: 0 0 2rem;
}
.m-band-navy .marketing-comparison-sub { color: #B6C4DC; }

/* ── hero ───────────────────────────────────────────────────────────────── */

.marketing-hero {
  max-width: var(--m-wide);
  margin-inline: auto;
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(32px, 4vw, 48px);
  text-align: left;
}

.marketing-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-bottom: 1.6rem;
}

.marketing-secondary-link {
  color: var(--m-ink-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--m-rule);
  padding-bottom: 2px;
}
.marketing-secondary-link:hover { color: var(--m-brass); border-color: var(--m-brass); }

/* The trust line is evidence, so it gets the weight of evidence: a brass rule
   down its left edge rather than small grey italics nobody reads. */
.marketing-trust {
  font-size: .94rem;
  line-height: 1.55;
  color: var(--m-ink-mid);
  max-width: 54ch;
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--m-brass-mid);
}

/* ── screenshots ────────────────────────────────────────────────────────── */

/* Not the uniform rounded card with a soft grey shadow. The brass rule along
   the top edge ties every screen to the mark, and the shadow is navy-tinted so
   it belongs to the palette rather than sitting grey on top of it. */
.m-shot {
  display: block;
  width: 100%;
  height: auto;
  border-top: 3px solid var(--m-brass-mid);
  border-radius: 2px;
  box-shadow: 0 1px 0 var(--m-rule),
              0 18px 44px -18px rgba(23, 35, 63, .42);
  background: var(--m-paper);
}
.m-band-navy .m-shot {
  border-top-color: var(--m-brass-lit);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, .66);
}

.m-shot-wide { max-width: 1060px; margin: 0 auto; }

.m-shot-caption {
  font-size: .86rem;
  color: var(--m-ink-soft);
  margin: .7rem 0 0;
}

/* Alternating proof bands: the claim and the screen that proves it, side by
   side. This is the whole point of the redesign — 2,557 words and one picture
   was the problem. */
.m-proof {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: var(--m-wide);
  margin-inline: auto;
}
.m-proof + .m-proof { margin-top: var(--m-band); }
.m-proof-flip > .m-proof-text { order: 2; }
.m-proof-text > :last-child { margin-bottom: 0; }

/* ── the loop ───────────────────────────────────────────────────────────── */

/* The product's central claim is that the business runs as one closed loop.
   Four cards in a row said the opposite — a row has two ends. Drawn as a
   circuit it carries the argument itself, which is the one place on this page
   worth spending boldness. The numbering stays because this genuinely is a
   sequence; elsewhere on the page it would be decoration. */
.m-loop {
  max-width: 940px;
  margin: 0 auto;
  position: relative;
}

.m-loop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 56px);
  position: relative;
  z-index: 1;
}

.m-loop-node {
  background: var(--m-paper);
  border: 1px solid var(--m-rule);
  border-left: 3px solid var(--m-brass-mid);
  border-radius: 3px;
  padding: clamp(20px, 2.4vw, 30px);
}
.m-band-cool .m-loop-node { box-shadow: 0 10px 30px -18px rgba(23, 35, 63, .4); }

.m-loop-step {
  font-family: var(--m-display);
  font-variation-settings: "opsz" 144;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--m-brass);
  margin-bottom: .4rem;
}

.m-loop-title {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: .45rem;
  color: var(--m-ink);
}

.m-loop-desc {
  font-size: .98rem;
  line-height: 1.58;
  color: var(--m-ink-mid);
}
.m-loop-desc strong { color: var(--m-ink); font-weight: 600; }

/* The returning arc, drawn behind the nodes: what makes it a loop rather than
   a list. Hidden on small screens, where the nodes stack and the arc would be
   a scribble. */
/* Source order is 1-4 so screen readers and the tab key follow the argument.
   These two rules put 3 bottom-right and 4 bottom-left, so the eye traces
   clockwise while the DOM stays honest. */
.m-loop-node:nth-child(3) { grid-column: 2; grid-row: 2; }
.m-loop-node:nth-child(4) { grid-column: 1; grid-row: 2; }

/* The return leg, sitting in the cross-shaped gap where the four nodes meet:
   a closed ring with one arrowhead. Without it this is still just a 2x2 of
   boxes; with it, the page states its own thesis. */
.m-loop-arc {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(104px, 13vw, 150px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
.m-loop-arc circle,
.m-loop-arc path {
  fill: none;
  stroke: var(--m-brass-mid);
  stroke-width: 2;
  opacity: .62;
}
.m-loop-arc circle { stroke-dasharray: 4 7; stroke-linecap: round; }
.m-loop-arc .m-loop-head { stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

/* Stacked single column below this width — the ring would land on top of a
   node rather than between four of them. */
@media (max-width: 860px) {
  .m-loop-arc { display: none; }
  .m-loop-node:nth-child(3),
  .m-loop-node:nth-child(4) { grid-column: 1; grid-row: auto; }
}

/* ── feature grids (existing markup, restyled) ──────────────────────────── */

/* The old treatment was the SaaS-card kit: identical rounded boxes, one radius
   for everything, the same grey shadow under each. These become ruled entries
   in a column — the structure a reference document uses, which is closer to
   what the content actually is. */
.marketing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(22px, 3vw, 44px);
  max-width: var(--m-wide);
  margin-inline: auto;
  text-align: left;
}

.marketing-feature {
  background: none;
  border: 0;
  border-top: 1px solid var(--m-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 22px 0 0;
}
.m-band-navy .marketing-feature { border-top-color: rgba(242, 220, 160, .22); }

.marketing-feature-icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: .7rem;
  filter: saturate(.85);
}

.marketing-feature-title {
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--m-ink);
  margin-bottom: .5rem;
}
.m-band-navy .marketing-feature-title { color: #FFFFFF; }

.marketing-feature-desc {
  font-size: .97rem;
  line-height: 1.6;
  color: var(--m-ink-mid);
  max-width: 46ch;
}
.m-band-navy .marketing-feature-desc { color: #AFBDD6; }
.marketing-feature-desc strong { color: var(--m-ink); font-weight: 600; }
.m-band-navy .marketing-feature-desc strong { color: var(--m-brass-pale); }

/* ── video slot ─────────────────────────────────────────────────────────── */

/* Built in now rather than retrofitted. Drop a <video> or an <iframe> straight
   in and the frame already fits the page. */
.m-video {
  max-width: 980px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-top: 3px solid var(--m-brass-mid);
  border-radius: 2px;
  background: var(--m-navy);
  display: grid;
  place-items: center;
  color: #8FA0BE;
  box-shadow: 0 24px 60px -24px rgba(23, 35, 63, .5);
}
.m-video > video, .m-video > iframe {
  width: 100%; height: 100%; border: 0; border-radius: 2px; display: block;
}
.m-video-note { font-size: .92rem; letter-spacing: .01em; }

/* ── buttons ────────────────────────────────────────────────────────────── */

.marketing-body .btn-primary {
  background: var(--m-navy);
  border: 1px solid var(--m-navy);
  color: #FFFFFF;
  border-radius: 3px;
  font-weight: 500;
  letter-spacing: .005em;
}
.marketing-body .btn-primary:hover {
  background: var(--m-brass);
  border-color: var(--m-brass);
}
.m-band-navy .btn-primary {
  background: var(--m-brass-lit);
  border-color: var(--m-brass-lit);
  color: var(--m-navy-deep);
}
.m-band-navy .btn-primary:hover { background: var(--m-brass-pale); border-color: var(--m-brass-pale); }

/* ── nav + footer ───────────────────────────────────────────────────────── */

.marketing-nav {
  border-bottom: 1px solid var(--m-rule);
  background: color-mix(in srgb, var(--m-paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(9px);
}
.marketing-nav-links a { color: var(--m-ink-mid); }
.marketing-nav-links a:hover { color: var(--m-brass); }

.marketing-footer {
  border-top: 1px solid var(--m-rule);
  color: var(--m-ink-soft);
  padding: 44px var(--m-gutter);
}
.marketing-footer a { color: var(--m-ink-mid); }
.marketing-footer a:hover { color: var(--m-brass); }

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .m-proof { grid-template-columns: minmax(0, 1fr); }
  .m-proof-flip > .m-proof-text { order: 0; }
  .m-loop-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-body * { animation: none !important; transition: none !important; }
}

/* Keyboard focus must stay visible against both grounds. */
.marketing-body a:focus-visible,
.marketing-body button:focus-visible {
  outline: 2px solid var(--m-brass-mid);
  outline-offset: 3px;
}
.m-band-navy a:focus-visible { outline-color: var(--m-brass-pale); }

/* ── corrections from looking at it rendered ────────────────────────────── */

/* main.css gives marketing buttons display:block, so inside the flex CTA row
   the primary button stretched the full column width and pushed the secondary
   link onto its own centred line. */
.marketing-cta-group .btn { width: auto; flex: 0 0 auto; display: inline-flex; }

/* main.css centres every marketing section. Against a left-aligned hero that
   read as two different pages, and centred body copy over four lines leaves a
   ragged left edge that is harder to read. The whole page is left-aligned now,
   which also lets the section rules and the brass borders line up down a
   single axis. */
.marketing-features-section,
.marketing-comparison-section,
.marketing-pricing-section,
.marketing-roadmap-section,
.marketing-screenshot-section,
.marketing-video-section { text-align: left; }

.marketing-section-title,
.marketing-comparison-sub,
.marketing-video-section .marketing-comparison-sub { margin-inline: 0; }

.m-shot-wide { margin-inline: 0; }
.m-shot-caption { text-align: left; }

/* The hero's own bottom padding stacked with the screenshot section's top
   padding, leaving a band of nothing between the trust line and the product. */
.marketing-screenshot-section { padding-top: 0; }

/* Arrowhead sat inside the ring rather than on it. Drawn at the top of the
   circle (r=34 about cx/cy 60) pointing clockwise. */
.m-loop-arc .m-loop-head { transform-origin: 60px 60px; transform: rotate(8deg); }

/* Screenshots sit in the same 1180px column as the headline, so their left
   edge lines up with the type rather than starting at the viewport gutter and
   overflowing the right edge — which is what margin-inline:0 did. */
.m-shot-wide {
  max-width: var(--m-wide);
  margin-inline: auto;
}

/* main.css:1487 sets the hero to max-width 720px, centred, with 50px bottom
   padding; the section rule above it adds another band. Between them the hero
   was a narrow centred column with a dead strip under it. The hero is its own
   full-width band now, matching every other section's measure. */
.marketing-hero {
  max-width: var(--m-wide);
  padding: clamp(56px, 7vw, 96px) var(--m-gutter) clamp(24px, 3vw, 36px);
}

/* ── specificity corrections ────────────────────────────────────────────── */

/* `.marketing-body section` is a class plus an element (0,1,1) and so beats a
   bare `.marketing-hero` (0,1,0) however late it appears in the file. Every
   per-section override below therefore carries the body class too. Measured,
   not guessed: the hero was still reporting 132px bottom padding and a 720px
   max-width from main.css:1487 while this file thought it had replaced both. */

.marketing-body .marketing-hero {
  max-width: var(--m-wide);
  margin-inline: auto;
  padding: clamp(56px, 7vw, 96px) var(--m-gutter) clamp(20px, 2.5vw, 32px);
  text-align: left;
}

/* The product shot follows straight on from the trust line — it is the
   evidence for the sentence above it, not a separate exhibit. */
.marketing-body .marketing-screenshot-section {
  padding-top: 0;
  padding-bottom: var(--m-band);
}

/* Align the shot's left edge with the headline: both sit inside a centred
   1180px column inset by one gutter. */
.marketing-body .m-shot-wide {
  max-width: calc(var(--m-wide) - 2 * var(--m-gutter));
  margin-inline: auto;
}

.marketing-body .marketing-features-section,
.marketing-body .marketing-comparison-section,
.marketing-body .marketing-pricing-section,
.marketing-body .marketing-roadmap-section,
.marketing-body .marketing-video-section { text-align: left; }

.marketing-body .marketing-features { max-width: calc(var(--m-wide) - 2 * var(--m-gutter)); padding-inline: 0; }
.marketing-body .m-inner { max-width: calc(var(--m-wide) - 2 * var(--m-gutter)); }
.marketing-body .m-video { max-width: calc(var(--m-wide) - 2 * var(--m-gutter)); margin-inline: auto; }
.marketing-body .m-loop { max-width: calc(var(--m-wide) - 2 * var(--m-gutter)); }