<div class="hero-ctas">
  <a class="btn btn-solid" href="#">Book a walkthrough</a>
  <a class="btn btn-ghost" href="#">See how it works</a>
</div>

<span class="chips">
  <span class="chip">Pending</span>
  <span class="chip chip-ok">In trust</span>
  <span class="chip chip-warn">Awaiting balance</span>
</span>

<section class="page-hero">
  <div class="wrap page-hero-grid">
    <div class="page-hero-left">
      <div class="crumb"><a href="#">Solutions</a>&nbsp;/&nbsp;Financial visibility</div>
      <h1>See the cash position behind <em>every booking</em><span class="caret" aria-hidden="true">_</span></h1>
      <p class="sub">One line that says who this page is for and what they get.</p>
      <div class="hero-ctas">
        <a class="btn btn-solid" href="#">Book a walkthrough</a>
        <a class="btn btn-ghost" href="#">Secondary action</a>
      </div>
    </div>
    <div class="page-hero-right">
      <!-- a .ledger, a .flow diagram, or leave empty -->
    </div>
  </div>
</section>

<section class="block">
  <div class="wrap">
    <div class="sec-head">
      <h2>The money trail,<br>step by step.</h2>
      <div class="side">// 01 — How it works</div>
    </div>
    <p class="sec-intro">An optional lead paragraph. Keep it to two or three lines.</p>
    <!-- section content -->
  </div>
</section>

<section class="cta">
  <div class="wrap">
    <h2>See how this works around <span>your bookings.</span></h2>
    <p>Bring one payment, reporting or cash-position problem. We will show how felloh connects the booking-level money trail behind it.</p>
    <a class="btn btn-solid" href="#">Book a walkthrough</a>
  </div>
</section>

<div class="cards">
  <div class="card">
    <div class="tag">Collect</div>
    <h3>Payment Collection</h3>
    <p>Capture customer payments in whatever form they take, each one tied to its booking from the moment it arrives.</p>
    <a class="more" href="#">Explore payment collection</a>
  </div>
  <div class="card">
    <div class="tag">Operate</div>
    <h3>Financial Operations</h3>
    <p>Reconciliation, protected funds, settlements and supplier obligations in one booking-level ledger.</p>
    <a class="more" href="#">Explore financial operations</a>
  </div>
  <div class="card">
    <div class="tag">Optimise</div>
    <h3>Payment Optimisation</h3>
    <p>Tune cost and friction across the money trail.</p>
    <a class="more" href="#">Explore payment optimisation</a>
  </div>
</div>

<div class="nums">
  <div class="num-cell"><div class="n">01</div><h3>First problem</h3><p>One or two sentences on why it matters.</p></div>
  <div class="num-cell"><div class="n">02</div><h3>Second problem</h3><p>One or two sentences on why it matters.</p></div>
  <div class="num-cell"><div class="n">03</div><h3>Third problem</h3><p>One or two sentences on why it matters.</p></div>
</div>

<div class="states">
  <div class="state">
    <span class="s-num">01</span>
    <h3>ATOL Reporting</h3>
    <p>ATOL and APC returns draw their figures from the booking-level payment and departure record.</p>
    <div class="s-meta"><span>Reportable value — <b>Per booking</b></span><span>Drill-down — <b>Live</b></span></div>
  </div>
  <div class="state">
    <span class="s-num">02</span>
    <h3>Trustee Reporting</h3>
    <p>The protected portion of every customer payment stays visible at booking level.</p>
    <div class="s-meta"><span>Protected balance — <b>Live</b></span><span>Release events — <b>Logged</b></span></div>
  </div>
</div>

<div class="steps">
  <div class="step">
    <span class="s-num">01</span>
    <h3>Capture</h3>
    <p>The customer pays through a link or checkout that already carries the booking reference.</p>
    <div class="s-meta"><span>Reference — <b>Attached at capture</b></span></div>
  </div>
  <div class="step">
    <span class="s-num">02</span>
    <h3>Match</h3>
    <p>Because the reference travels with the payment, allocation is automatic.</p>
    <div class="s-meta"><span>Allocation — <b>Automatic</b></span></div>
  </div>
</div>

<div class="sys-table">
  <div class="sys-row">
    <span class="old">Bulk settlements allocated across bookings by hand</span>
    <span class="new">Payments arrive already matched to the booking</span>
    <span class="st gone">Manual</span><span class="st ok">Automatic</span>
  </div>
  <div class="sys-row">
    <span class="old">The ATOL model that lives in one person's spreadsheet</span>
    <span class="new">The return is a report anyone on the team can run</span>
    <span class="st gone">Key-person risk</span><span class="st ok">Shared</span>
  </div>
</div>

<div class="faq">
  <div class="faq-item">
    <h3>How is available cash different from the balance in our bank account?</h3>
    <p>A bank balance mixes customer money with operating cash. felloh separates what has been received from what is protected or committed.</p>
  </div>
  <div class="faq-item">
    <h3>Can we trace a report figure back to individual bookings?</h3>
    <p>Yes. Every summary figure drills down to the booking-level movements that produced it.</p>
  </div>
</div>

<section class="metrics" aria-label="At a glance">
  <div class="wrap metrics-grid">
    <div class="metric"><div class="n">API<span>-first</span></div><div class="l">Booking-system friendly</div></div>
    <div class="metric"><div class="n">Receipt<span>&nbsp;✓</span></div><div class="l">Payment data written back</div></div>
    <div class="metric"><div class="n">Ledger<span>&nbsp;✓</span></div><div class="l">Settlement context retained</div></div>
  </div>
</section>

<div class="principles">
  <div class="prin"><div class="n">01</div><h3>API-first when needed</h3><p>Use APIs and webhooks to connect payments, bookings and finance systems.</p></div>
  <div class="prin"><div class="n">02</div><h3>Manual-friendly when useful</h3><p>Start with payment links before investing in deeper automation.</p></div>
  <div class="prin"><div class="n">03</div><h3>Designed for finance control</h3><p>Keep the payment evidence available for reporting.</p></div>
  <div class="prin"><div class="n">04</div><h3>Future-proof by design</h3><p>Keep the identifier your team trusts at the centre.</p></div>
</div>

<div class="ledger" role="img" aria-label="Sample booking ledger: describe the figures here">
  <div class="ledger-head">
    <span class="id">BK-24-1187 — Canadian Rockies · 12 nights</span>
    <span class="chips"><span class="chip chip-ok">In trust</span><span class="chip chip-warn">Awaiting balance</span></span>
  </div>
  <div class="ledger-sub">J. Mitchell + 1 · 14 Sep – 26 Sep · Total £8,420</div>
  <div class="ledger-cells">
    <div class="lc"><span class="l">Received</span><span class="v">£4,210</span><span class="d">Collected to date</span></div>
    <div class="lc"><span class="l">Protected</span><span class="v">£2,940</span><span class="d">In trust until departure</span></div>
    <div class="lc"><span class="l">Committed</span><span class="v">£950</span><span class="d">Paid to suppliers</span></div>
    <div class="lc"><span class="l">Available</span><span class="v accent">£320</span><span class="d">Margin recognised</span></div>
  </div>
  <div class="movs">
    <div class="movs-h">Movements feeding “Received · £4,210”</div>
    <div class="mov"><span class="d-date">14 Jun</span><span class="d-desc">Deposit received — card payment · placed in trust</span><span class="d-amt">+£4,210</span></div>
  </div>
  <div class="ledger-time">
    <div class="tstep done">14 Jun<b>Booking created</b></div>
    <div class="tstep done">14 Jun<b>Deposit received</b></div>
    <div class="tstep done">18 Jun<b>Supplier deposit</b></div>
    <div class="tstep done">18 Jun<b>Margin recognised</b></div>
    <div class="tstep now">17 Aug<b>Balance due</b></div>
    <div class="tstep">12 Sep<b>Final supplier</b></div>
    <div class="tstep">14 Sep<b>Departure</b></div>
    <div class="tstep">26 Sep<b>Funds release</b></div>
  </div>
  <div class="ledger-cap">Sample booking — figures are illustrative</div>
</div>

// scripts/lib/flows.mjs
'platform/overview.html': {
  aria: 'Animated diagram: … describe the whole flow for screen readers',
  left: { label: 'SOURCES', cards: [BANK, ACQ, BOOK] },
  hub: { ref: 'BK-20417', chip: '✓ MATCHED' },
  back: { text: '⇄ STATUS BACK TO THE BOOKING' },   // or null
  right: { label: 'PUT TO WORK', cards: [
    { lab: 'LIVE RECONCILIATION', val: '£1,240 matched', chip: '● LIVE', tone: 'acc' },
    { lab: 'EVIDENCE TRAIL', val: 'Drill to the source', chip: '✓ CONNECTED' },
    { lab: 'PLAYBOOKS', val: 'Next step triggered', chip: '✓ AUTOMATED' },
  ] },
  cap: 'FIG. 01 — From payment received to money put to work.',
},
// then: node scripts/generate.mjs  (generated pages)
//       node scripts/apply-flows.mjs (hand-built pages)

<div class="trail" role="img" aria-label="Steps: describe them here">
  <div class="trail-step"><span class="dot">01</span><div class="trail-node"><div class="t">Choose one booking</div><div class="d">A payment, refund or reporting problem</div></div></div>
  <div class="trail-step"><span class="dot">02</span><div class="trail-node"><div class="t">Trace the money trail</div><div class="d">Booking · bank · acquirer</div></div></div>
  <div class="trail-step"><span class="dot">03</span><div class="trail-node"><div class="t">Decide the next step</div><div class="d">No obligation</div></div></div>
</div>
<div class="trail-cap">Caption for the trail</div>

<form class="form-grid" action="#" onsubmit="return false">
  <div class="field"><label for="x-name">Your name</label><input id="x-name" name="name" autocomplete="name"></div>
  <div class="field"><label for="x-email">Work email</label><input id="x-email" name="email" type="email" autocomplete="email"></div>
  <div class="field"><label for="x-role">Your role</label><select id="x-role" name="role" required><option value="">Select…</option><option>Finance</option><option>Operations</option></select></div>
  <div class="field"><label for="x-sys">Booking system</label><select id="x-sys" name="system"><option>Travelgenix</option><option>Moonstride</option></select></div>
  <div class="field full"><label for="x-note">The one booking or workflow</label><textarea id="x-note" name="note" placeholder="Describe the problem you want us to trace."></textarea></div>
</form>
<p class="form-note">A note under the form, for example how the data is used.</p>

<div class="library">
  <div class="group-h"><span>A</span><span class="count">2</span></div>
  <div class="lib-grid" style="border-top:none">
    <a class="lib-cell" href="#"><span class="ty">Glossary term</span><h3>Acquirer</h3><span class="de">The provider that enables a merchant to accept card payments.</span><span class="go">Read term</span></a>
    <a class="lib-cell" href="#"><span class="ty">Glossary term</span><h3>APC</h3><span class="de">The ATOL Protection Contribution paid per protected passenger.</span><span class="go">Read term</span></a>
    <a class="lib-cell" href="#"><span class="ty">Guide</span><h3>Soft declines</h3><span class="de">Why a card is declined and when to retry.</span><span class="go">Read</span></a>
    <a class="lib-cell" href="#"><span class="ty">Guide</span><h3>Refund management</h3><span class="de">Keeping refunds tied to the booking.</span><span class="go">Read</span></a>
  </div>
</div>

<div class="jump"><a href="#">Why it matters</a><a href="#">How it works</a><a href="#">In felloh</a></div>
<div class="prose">
  <h2>A section heading</h2>
  <p>Body copy at a comfortable measure, with <a href="#">inline links</a> and <code>inline code</code>.</p>
  <ul><li>A list item</li><li>Another list item</li></ul>
  <blockquote>A pulled quote or callout.</blockquote>
</div>
<figure class="fig"><img src="assets/blog/travel-by-b-corp-research.jpg" alt="Travel by B Corp research"><figcaption class="fig-cap">Insights — 2026-04-08 — Will Bicknell</figcaption></figure>