// ARTICLE - /news/build-the-right-product
// "Build the right product - and build it right" - Steve Hirst, 8 Oct 2026
// Reuses the reading-column primitives exported by insights-article.jsx - load that file first.

const { EdCtx: BrpCtx, EdTag: BrpTag, EdChrome: BrpChrome, useIsMobile: brpUseIsMobile,
        ArtCol: BrpCol, ArtP: BrpP, ArtH2: BrpH2, ArtUL: BrpUL, ArtLI: BrpLI } = window;

const BRP_META = { kicker: 'Perspective', date: '8 October 2026', readTime: '4 min read' };
const BRP_AUTHOR = { name: 'Steve Hirst', role: 'CEO, Outrun', photo: 'images/team/steve-hirst.jpg', email: 'steve.hirst@outrun.insure' };

function BrpHeader() {
  const ED = React.useContext(BrpCtx);
  const edText = ED.text;
  const isMobile = brpUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '40px 24px 40px' : '64px 90px 56px', background: ED.bg }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <a href="/news" style={{ ...edText.med, fontSize: 13, color: ED.ink, textDecoration: 'none', borderBottom: `1px solid ${ED.rule}`, paddingBottom: 3 }}>&larr; Back to News &amp; Resources</a>
        <div style={{ marginTop: isMobile ? 36 : 56, display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <span style={{ ...edText.tag, fontSize: 12, color: ED.red }}>{BRP_META.kicker}</span>
          <span style={{ width: 4, height: 4, borderRadius: 999, background: ED.rule }}></span>
          <span style={{ ...edText.tag, fontSize: 12, color: ED.ink2 }}>{BRP_META.date}</span>
          <span style={{ width: 4, height: 4, borderRadius: 999, background: ED.rule }}></span>
          <span style={{ ...edText.tag, fontSize: 12, color: ED.ink2 }}>{BRP_META.readTime}</span>
        </div>
        <h1 style={{ ...edText.display, fontSize: isMobile ? 'clamp(38px, 11vw, 52px)' : 88, lineHeight: isMobile ? 1.05 : 1.02, color: ED.ink, margin: '20px 0 0', letterSpacing: '-0.035em', maxWidth: 1140 }}>
          Build the right product &ndash; and build it right.
        </h1>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: `1px solid ${ED.rule}`, display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ width: 56, height: 56, borderRadius: '50%', overflow: 'hidden', border: `1px solid ${ED.rule}`, flex: '0 0 auto' }}>
            <img src={edAsset(BRP_AUTHOR.photo)} alt={`${BRP_AUTHOR.name}, ${BRP_AUTHOR.role.replace(', Outrun', '')} at Outrun`} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
          </div>
          <div>
            <div style={{ ...edText.med, fontSize: 15, color: ED.ink }}>{BRP_AUTHOR.name}</div>
            <div style={{ ...edText.tag, fontSize: 11, color: ED.ink2, marginTop: 4 }}>{BRP_AUTHOR.role}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Wide (16:9) source image - held to the reading-column width rather than full bleed.
function BrpLeadImage() {
  const ED = React.useContext(BrpCtx);
  const isMobile = brpUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '0 24px 40px' : '0 90px 64px', background: ED.bg }}>
      <div style={{ maxWidth: 960, margin: '0 auto', border: `1px solid ${ED.rule}`, overflow: 'hidden' }}>
        <img src={edAsset('images/news/build-the-right-product.jpg')} alt="A glass skyscraper built on top of a small brick house, its walls cracked and held up by scaffolding, against a stormy city skyline." style={{ display: 'block', width: '100%', height: 'auto' }} />
      </div>
    </section>
  );
}

function BrpBody() {
  const ED = React.useContext(BrpCtx);
  const edText = ED.text;
  const isMobile = brpUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '8px 0 80px' : '16px 0 80px', background: ED.bg }}>
      <BrpCol>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <BrpP lead>It&rsquo;s no secret that building insurance products can take a long time and cost a lot of money &ndash; but why?</BrpP>
          <BrpP>Picture the scene&hellip;</BrpP>
          <BrpP>The underwriting team spends a week or two poring over the new 100-page underwriting guide. But before they can build anything, someone has to translate the guide into a set of precise rules that a system can run. It must have built-in logic that reliably and consistently quotes in line with what the insurer agreed to when they signed the binder.</BrpP>
          <BrpP>But, as anyone who&rsquo;s ever written a technical product specification from an underwriting guide knows, there are significant differences between the two things:</BrpP>

          <BrpH2>Loads and discounts</BrpH2>
          <BrpP>A guide might list three 10% discounts without specifying whether they&rsquo;re added together (30% off) or applied sequentially (27.1% off). An underwriter working it out by hand will do whatever they&rsquo;ve always done &ndash; but any system will need the logic defined.</BrpP>

          <BrpH2>Referral rules</BrpH2>
          <BrpP>A guide might say that listed buildings are acceptable with a load, but that any timber-framed building must be referred. Elsewhere, meanwhile, it says any building that hasn&rsquo;t been surveyed in the last five years must also be referred.</BrpP>
          <BrpP>That sounds simple, but the statement of fact never asks when the last survey was done. So although the rule exists, a system can&rsquo;t apply it until the questions change.</BrpP>
          <BrpP>Multiply that across a 100-page guide, and you start to see where the time and costs go.</BrpP>

          <BrpH2>The workaround</BrpH2>
          <BrpP>Turning an underwriting guide into a specification needs someone who understands both insurance and systems, and there aren&rsquo;t many people like that. So, in practice, the translation step is often skipped completely. In its place, many MGAs and scheme brokers build a rating calculator in Excel. So, the underwriter who&rsquo;s good at Excel (or, for that matter, the operations person with an insurance background) builds a workbook calculator straight from the guide that covers ~70% of rating and acceptance rules.</BrpP>
          <BrpP>That, however, leaves us with&hellip;</BrpP>

          <BrpH2>The messy 30%</BrpH2>
          <BrpP>Excel can handle any one of the following in isolation:</BrpP>
          <BrpUL>
            <BrpLI>A referral that is triggered when a particular trade and sum insured limit are combined.</BrpLI>
            <BrpLI>A survey requirement for buildings of certain types of construction and use.</BrpLI>
            <BrpLI>A risk factor at one premises that loads the policy-level BI section, but only pro rata to that premises.</BrpLI>
            <BrpLI>Transmitting the data to the bordereaux (we know macros exist but people forget to press them!)</BrpLI>
          </BrpUL>
          <BrpP>But such things seldom live in isolation. In reality, they layer up and interact over time, so when changes are made, no one is sure every combination still works as the guide intended.</BrpP>

          <BrpH2>A creaky skyscraper</BrpH2>
          <BrpP>It&rsquo;s a risk from day one: a creaky product run by an expert who keeps patching gaps in the guide or workbook when they don&rsquo;t cover a particular scenario.</BrpP>
          <BrpP>But since no amount of workbook patching will cover all eventualities, it&rsquo;s like building a skyscraper on the foundations of a two-storey house.</BrpP>
          <BrpP>Thus, even with an experienced underwriter checking every quote, you&rsquo;re still vulnerable. These are complex products, and nobody carries every detail of a 100-page guide in their head. Each gap is a judgement call and a chance to miss a referral, apply the wrong load, or quote outside binder authority.</BrpP>

          <BrpH2>So where to from here?</BrpH2>
          <BrpP>Firstly, this isn&rsquo;t to point fingers at underwriters who use workbooks. Relative to lengthy builds and high costs from software platforms, Excel is quick and easy. But it&rsquo;s not a long-term or commercially sustainable solution if you want fast growth.</BrpP>
          <BrpP>Nor is the answer a particular piece of software.</BrpP>
          <BrpP>It&rsquo;s doing the translation work properly, and doing it first.</BrpP>
          <BrpP>When you&rsquo;re clear on every referral, load, discount, endorsement rule, and pricing before anything is built, you find out which questions to ask, which rules conflict, and where you need to go back to the insurer.</BrpP>
          <BrpP>That&rsquo;s true whether you end up building on a platform or in Excel.</BrpP>
        </div>

        <div style={{ margin: isMobile ? '44px 0' : '64px 0', padding: isMobile ? '28px 0' : '32px 0', borderTop: `1px solid ${ED.rule}`, borderBottom: `1px solid ${ED.rule}` }}>
          <span style={{ ...edText.display, fontStyle: 'italic', fontSize: isMobile ? 25 : 36, lineHeight: 1.25, color: ED.ink, letterSpacing: '-0.025em' }}>
            Building the right product matters; building it <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'italic' }}>right</span> matters just as much.
          </span>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <BrpP>When we build products for clients at Outrun, we take this translation problem seriously &ndash; and we&rsquo;re focused on solving it faster. More on that soon.</BrpP>
        </div>
      </BrpCol>
    </section>
  );
}

function BrpFooter() {
  const ED = React.useContext(BrpCtx);
  const edText = ED.text;
  const isMobile = brpUseIsMobile();
  return (
    <section style={{ padding: '40px 0 96px', background: ED.bg }}>
      <BrpCol>
        <div style={{ padding: isMobile ? '28px 24px' : '36px 36px 32px', background: ED.bgWarm, border: `1px solid ${ED.rule}`, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '88px 1fr', gap: 24, alignItems: 'start' }}>
          <div style={{ width: 88, height: 88, borderRadius: '50%', overflow: 'hidden', background: ED.bg, border: `1px solid ${ED.rule}` }}>
            <img src={edAsset(BRP_AUTHOR.photo)} alt={`${BRP_AUTHOR.name}, ${BRP_AUTHOR.role.replace(', Outrun', '')} at Outrun`} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
          </div>
          <div>
            <div style={{ ...edText.tag, fontSize: 11, color: ED.ink2 }}>Written by</div>
            <div style={{ ...edText.display, fontSize: 28, color: ED.ink, margin: '6px 0 0', letterSpacing: '-0.02em' }}>{BRP_AUTHOR.name}</div>
            <div style={{ ...edText.sans, fontSize: 14, color: ED.ink2, marginTop: 2 }}>{BRP_AUTHOR.role}</div>
            <p style={{ ...edText.sans, fontSize: 15, lineHeight: 1.6, color: ED.ink, margin: '14px 0 0', maxWidth: 540 }}>
              17 years in technology and business leadership, including eight as CIO of a specialist insurance broking business. Appointed CEO of Outrun in 2021.
            </p>
            <a href={`mailto:${BRP_AUTHOR.email}`} style={{ ...edText.med, fontSize: 13, color: ED.ink, textDecoration: 'none', borderBottom: `1px solid ${ED.rule}`, paddingBottom: 3, display: 'inline-block', marginTop: 14 }}>{BRP_AUTHOR.email}</a>
          </div>
        </div>
      </BrpCol>
    </section>
  );
}

function BrpKeepReading() {
  const ED = React.useContext(BrpCtx);
  const edText = ED.text;
  const isMobile = brpUseIsMobile();
  const items = [
    { href: '/news/meat-proxies', title: 'Are we becoming just ‘meat proxies’?', by: 'Ian Symondson · 23 September 2026' },
    { href: '/news/competitive-advantage', title: 'The competitive advantage no MGA can afford to ignore.', by: 'James Hill · 22 July 2026' },
  ];
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 90px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }}>
      <div style={{ maxWidth: 1320 }}>
        <BrpTag color={ED.accent}>Keep reading</BrpTag>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, minmax(0, 560px))', gap: isMobile ? 40 : 56, marginTop: isMobile ? 28 : 40 }}>
          {items.map(it => (
            <a key={it.href} href={it.href} style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
              <div style={{ ...edText.tag, fontSize: 11, color: ED.accent }}>Perspective</div>
              <h3 style={{ ...edText.display, fontSize: 26, lineHeight: 1.15, color: ED.ink, margin: '14px 0 24px', letterSpacing: '-0.02em' }}>{it.title}</h3>
              <div style={{ ...edText.sans, fontSize: 13, color: ED.ink2, paddingTop: 16, borderTop: `1px solid ${ED.rule}` }}>{it.by}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function BuildRightProductSite({ accent, fontMode = 'serif' }) {
  return (
    <BrpChrome accent={accent} fontMode={fontMode} current="/news/build-the-right-product">
      <BrpHeader />
      <BrpLeadImage />
      <BrpBody />
      <BrpFooter />
      <BrpKeepReading />
    </BrpChrome>
  );
}

Object.assign(window, { BuildRightProductSite });