/* Flit — marketing site.
   The palette, type and component shapes come from the appetised design system
   (see assistio/artifacts/unified-inbox/src/index.css), so every app's public
   site reads as the same family: navy carries the UI, gold appears sparingly.
   Lifted from the on-brand static page rather than re-derived, to avoid drift. */

/* Appetised brand tokens — mirrored from appetised-brand/dist/css/appetised-tokens.css.
   The site's own names below are aliases, so a brand change lands in one place. */
:root{
  --ap-ink:#0D1B3E;
  --ap-brace-open:#1B3FAA;
  --ap-brace-close:#C9A63C;
  --ap-blue-grey:#5A6B8C;
  --ap-accent:#E3C766;
  --ap-highlight:#F7E9B8;
  --ap-surface:#FFFFFF;
  --ap-track:#E2E7F2;
  --ap-mark-gap:.36em;
  --ap-mark-raise:-.09em;
}

:root{
  --background:hsl(222 38% 97%);
  --foreground:var(--ap-ink);
  --border:#D5DBE8;
  --card:var(--ap-surface);
  --primary:var(--ap-brace-open);
  --primary-fg:#FFFFFF;
  --secondary:#EEF1F8;
  --muted-fg:var(--ap-blue-grey);
  --accent:var(--ap-brace-close);
  --accent-soft:var(--ap-highlight);
  --blue-soft:#6F8FE0;
  --gold-soft:var(--ap-accent);
  --radius:6px;
  --radius-xl:8px;
  --shell:72rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',system-ui,sans-serif;
  color:var(--foreground);
  background:color-mix(in srgb, var(--background) 88%, transparent);
  -webkit-font-smoothing:antialiased;
  position:relative;
  min-height:100dvh;
}
/* Ambient blurred backdrop — fixed, sits behind every section so the wash
   shows through the gaps between cards, not just in the hero. */
.backdrop{position:fixed;inset:0;z-index:-10;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:9999px;filter:blur(100px)}
.blob-1{left:-5rem;top:-5rem;width:40rem;height:40rem;background:rgba(27,63,170,.30)}
.blob-2{right:-5rem;top:25%;width:36rem;height:36rem;background:rgba(201,166,60,.26)}
.blob-3{left:-2.5rem;bottom:25%;width:36rem;height:36rem;background:rgba(111,143,224,.24)}
.blob-4{right:-2.5rem;bottom:0;width:32rem;height:32rem;background:rgba(227,199,102,.24)}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
@media(min-width:640px){.shell{padding-left:2.5rem;padding-right:2.5rem}}
@media(min-width:1024px){.shell{padding-left:4rem;padding-right:4rem}}

/* ---------- header ---------- */
.sticky-top{position:sticky;top:0;z-index:20}
header{border-bottom:1px solid var(--border);background:rgba(246,247,251,.90);backdrop-filter:blur(8px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;padding-bottom:1rem}
.brand{display:flex;align-items:center;gap:var(--ap-mark-gap);text-decoration:none;color:inherit}
img.brand-lockup{
  /* The full {a} appetised lockup, as drawn in appetised-brand. A raster, because
     the repo's SVG sets the wordmark as <text> in Archivo and an SVG inside an <img>
     cannot reach the page's webfonts — it would resolve to whatever the visitor has.
     Rendered at 4x, so it is sharp well past a retina header. */
  display:block;height:1.1875rem;width:auto;
}
img.brand-mark{
  /* The mark is shipped as outlines from appetised-brand, not as <text>: an SVG
     in an <img> cannot use the page's webfonts, so a font-referencing lockup
     would resolve to whatever the visitor happens to have installed. */
  display:block;height:1.1875rem;width:auto;
}
.brand-name{font-weight:600;font-size:1.0625rem;letter-spacing:-.035em}
.brand-name span{color:var(--accent)}
nav.main{display:none;align-items:center;gap:.9rem}
/* Left-aligned, not centred: the nav belongs to the logo, and margin-right:auto
   pushes only the Contact button to the far edge. The margin keeps it clear of
   the lockup's clear space rather than crowding it. */
@media(min-width:768px){nav.main{display:flex;margin-left:3rem;margin-right:auto}}
nav.main .sep{color:var(--border);user-select:none;font-weight:400}
nav.main a{font-size:.875rem;font-weight:500;color:var(--muted-fg);text-decoration:none;text-underline-offset:8px;transition:color .15s}
nav.main a:hover,nav.main a.active{color:var(--foreground);text-decoration:underline}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  border-radius:var(--radius);font-size:.875rem;font-weight:600;
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s;
  border:1px solid transparent;
}
.btn-primary{background:var(--primary);color:var(--primary-fg);padding:.5rem 1rem;box-shadow:0 1px 2px rgba(13,27,62,.08)}
.btn-primary:hover{background:rgba(27,63,170,.9)}
.btn-lg{height:2.75rem;padding:0 1.25rem}
/* Log in and Register are inert until the portal exists. They are real buttons
   rather than links to nowhere, so nothing 404s and no dead href is indexed. */
.auth{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
/* .btn-ghost carries a fixed 2.75rem height for hero calls to action, which made
   Log in taller than Register. In the header both take the primary button's box. */
.auth .btn-ghost{height:auto;padding:.5rem 1rem}
@media(max-width:400px){.auth .btn-ghost{display:none}}
.btn-ghost{background:var(--card);color:var(--foreground);border-color:var(--border);padding:0 1.25rem;height:2.75rem}
.btn-ghost:hover{border-color:#B9C3D8}
.menu-btn{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--card);cursor:pointer}
@media(min-width:768px){.menu-btn{display:none}}
.mobile-nav{display:none;flex-direction:column;gap:.25rem;padding:.5rem 0 1rem;border-top:1px solid var(--border)}
.mobile-nav.open{display:flex}
@media(min-width:768px){.mobile-nav,.mobile-nav.open{display:none}}
.mobile-nav a{padding:.5rem 0;font-size:.9375rem;font-weight:500;color:var(--muted-fg);text-decoration:none}

.ribbon{border-bottom:1px solid rgba(201,166,60,.45);background:rgba(247,233,184,.55);backdrop-filter:blur(8px)}
.ribbon-inner{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 0;font-size:.875rem;text-align:center;color:#0D1B3E}
/* On a narrow screen the flex row makes the bold lead and the rest of the
   sentence into two columns, each wrapping separately. It reads as two
   headings side by side. Let it be one wrapping sentence instead. */
@media(max-width:560px){.ribbon-inner{display:block}.ribbon-inner strong{margin-right:.3rem}}
.ribbon-inner strong{font-weight:700}

/* ---------- hero ---------- */
.hero{display:grid;gap:3.5rem;align-items:center;padding:4rem 0}
@media(min-width:1024px){.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);padding:5rem 0}}
h1{font-size:3rem;font-weight:700;line-height:1.05;letter-spacing:-.025em;max-width:none;text-wrap:balance}
@media(min-width:640px){h1{font-size:3.75rem}}
h1 .hl{color:var(--primary)}
h1 .dot{color:var(--accent)}
.lede{margin-top:1.5rem;max-width:34rem;font-size:1.0625rem;line-height:1.65;color:var(--muted-fg)}
.lede strong{font-weight:600;color:var(--foreground)}
.lede + .lede{margin-top:1rem}
.hero-points{margin-top:1.5rem;display:flex;flex-direction:column;gap:.625rem;max-width:34rem}
.hero-points li{display:flex;gap:.625rem;align-items:flex-start;list-style:none;font-size:.9375rem;color:var(--foreground)}
.tick{flex-shrink:0;margin-top:.2rem;width:1rem;height:1rem;color:var(--primary)}
.cta-row{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.cta-note{margin-top:.875rem;font-size:.8125rem;color:var(--muted-fg)}

/* ---------- mac mockup ---------- */
.mock-wrap{position:relative}
/* The hero illustration is line art, not a photograph: no Apple trademark to
   licence, it recolours with the brand tokens, and it stays crisp at any width. */
.devices img{position:relative;display:block;width:100%;height:auto}
.mock-glow{position:absolute;inset:-2rem;border-radius:2rem;background:rgba(27,63,170,.05);filter:blur(48px)}
.mac{
  position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);background:var(--card);
  box-shadow:0 20px 40px -12px rgba(13,27,62,.18);
}
.mac-menubar{display:flex;align-items:center;gap:.5rem;height:22px;padding:0 .625rem;background:rgba(13,27,62,.92);color:rgba(255,255,255,.85);font-size:9px;font-weight:500}
.mac-menubar .spacer{flex:1}
.mac-screen{position:relative;height:300px;background:linear-gradient(150deg,#1B3FAA 0%,#33509b 40%,#6F8FE0 75%,#C9A63C 140%)}
.mac-win{position:absolute;border-radius:8px;overflow:hidden;box-shadow:0 12px 28px -8px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);background:#fff}
.mac-win .tb{display:flex;align-items:center;gap:4px;padding:6px 8px;background:#EEF1F8;border-bottom:1px solid var(--border)}
.dot3{width:7px;height:7px;border-radius:9999px;background:#C3CBDB}
.mac-win .bd{padding:10px}
.line{height:6px;border-radius:3px;background:#E4E9F3;margin-bottom:6px}

/* the bar itself */
.taskbar{
  position:absolute;left:0;right:0;bottom:0;height:56px;
  display:flex;align-items:stretch;
  background:rgba(13,27,62,.94);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.10);
}
.tb-start{display:flex;align-items:center;padding:0 10px;border-right:1px solid rgba(255,255,255,.08)}
.tb-start .brand-mark{width:22px;height:22px;font-size:11px;border-radius:4px}
.tb-spaces{display:flex;align-items:stretch;flex:1;min-width:0;overflow:hidden}
.space{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:0 10px 4px;min-width:0;cursor:default;position:relative;
  border-right:1px solid rgba(255,255,255,.06);
}
.space.active{background:rgba(255,255,255,.12)}
.space.active::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:2px;background:var(--gold-soft);border-radius:2px 2px 0 0}
.space-icons{display:flex;align-items:center;gap:3px}
.ico{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;font-family:'JetBrains Mono',monospace}
.ico.lg{width:26px;height:26px;border-radius:6px;font-size:12px}
.ico-plus{background:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.space-label{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap;font-weight:600}
.space.active .space-label{color:rgba(255,255,255,.9)}
.tb-tray{display:flex;align-items:center;gap:8px;padding:0 12px;border-left:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.75);font-size:10px;font-family:'JetBrains Mono',monospace}

/* ---------- sections ---------- */
section{border-top:1px solid var(--border);padding:3.5rem 0;scroll-margin-top:6rem}
.eyebrow{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--muted-fg)}
h2.section-title{margin-top:.5rem;font-size:1.75rem;font-weight:700;letter-spacing:-.02em;max-width:44ch;line-height:1.2;text-wrap:balance}
.section-sub{margin-top:.625rem;max-width:48rem;font-size:.9375rem;line-height:1.6;color:var(--muted-fg)}

.grid{display:grid;gap:1.25rem;margin-top:1.75rem}
.g2{grid-template-columns:1fr}
/* Three cards that belong in one row. auto-fit let them reflow to two-and-one,
   which reads as one card left over rather than as a set. */
.grid-3{grid-template-columns:1fr}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:640px){.g2{grid-template-columns:1fr 1fr}}
.g3{grid-template-columns:1fr}
@media(min-width:640px){.g3{grid-template-columns:repeat(3,1fr)}}

.card{
  border:1px solid var(--border);background:var(--card);border-radius:var(--radius-xl);
  box-shadow:0 10px 15px -3px rgba(27,63,170,.05),0 4px 6px -4px rgba(27,63,170,.05);
  overflow:hidden;display:flex;flex-direction:column;
}
.card-head{display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;border-bottom:1px solid var(--border)}
.card-head .t{font-size:.875rem;font-weight:600}
.card-body{padding:.875rem;flex:1}
.card-body p{font-size:.8125rem;line-height:1.65;color:var(--muted-fg)}
.card-body p + ul{margin-top:.75rem}
.card-body ul li{list-style:none;display:flex;gap:.5rem;font-size:.8125rem;line-height:1.55;color:var(--foreground);margin-bottom:.5rem}
.badge{
  margin-left:auto;border-radius:9999px;padding:.125rem .5rem;
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
}
.badge-soon{background:var(--secondary);color:var(--muted-fg)}
.badge-v1{background:rgba(27,63,170,.10);color:var(--primary)}
.badge-gold{background:rgba(201,166,60,.18);color:#8F7223}
.icon-sq{display:flex;align-items:center;justify-content:center;width:1.375rem;height:1.375rem;border-radius:var(--radius);background:rgba(27,63,170,.10);color:var(--primary)}

/* honesty callouts */
.note{display:flex;gap:.625rem;align-items:flex-start;border:1px solid var(--border);background:rgba(238,241,248,.4);border-radius:var(--radius);padding:.625rem .75rem;font-size:.8125rem;line-height:1.6;color:var(--muted-fg);max-width:48rem;margin-top:1rem}
.note svg{flex-shrink:0;margin-top:.15rem;color:var(--primary)}

.limit{border:1px solid var(--border);background:var(--card);border-radius:var(--radius-xl);padding:1rem 1.125rem;display:flex;flex-direction:column}
.limit h3{font-size:.9375rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.limit p{margin-top:.5rem;font-size:.8125rem;line-height:1.65;color:var(--muted-fg)}
.limit .fix{margin-top:.625rem;font-size:.8125rem;line-height:1.6;color:var(--foreground)}
.limit .fix b{font-weight:600}

/* steps */
.steps{counter-reset:s;display:grid;gap:1rem;margin-top:1.75rem;grid-template-columns:1fr}
@media(min-width:640px){.steps{grid-template-columns:repeat(3,1fr)}}
/* Five stages do not divide into three columns; two-up on tablets, five across on desktop. */
@media(min-width:640px){.steps-6{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.steps-6{grid-template-columns:repeat(3,1fr)}}
.step{border:1px solid var(--border);background:var(--card);border-radius:var(--radius-xl);padding:1rem 1.125rem}
.step .n{font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:700;color:var(--accent);letter-spacing:.08em}
.step h3{margin-top:.5rem;font-size:.9375rem;font-weight:700}
.step p{margin-top:.375rem;font-size:.8125rem;line-height:1.6;color:var(--muted-fg)}

/* specs table */
.specs{margin-top:1.75rem;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);overflow:hidden}
.spec-row{display:flex;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:.875rem}
.spec-row:last-child{border-bottom:0}
/* An 11rem label column leaves barely a third of a phone screen for the answer. */
@media(max-width:640px){.spec-row{flex-direction:column;gap:.25rem}.spec-row dt{width:auto}}
.spec-row dt{width:11rem;flex-shrink:0;font-weight:600;color:var(--muted-fg)}
.spec-row dd{color:var(--foreground)}

/* faq */
.faq{margin-top:1.75rem;display:grid;gap:.75rem}
.faq details{border:1px solid var(--border);background:var(--card);border-radius:var(--radius-xl);padding:.875rem 1rem}
.faq summary{font-size:.9375rem;font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.75rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'JetBrains Mono',monospace;color:var(--muted-fg);font-weight:400;font-size:1.125rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{margin-top:.625rem;font-size:.875rem;line-height:1.7;color:var(--muted-fg)}

/* closing cta */
.closer{border:1px solid var(--border);background:var(--card);border-radius:var(--radius-xl);padding:2rem 1.5rem;text-align:center;margin-top:1rem;box-shadow:0 10px 15px -3px rgba(27,63,170,.05)}
.closer h2{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
.closer h2 .dot{color:var(--accent)}
.closer p{margin:.75rem auto 0;max-width:34rem;font-size:.9375rem;line-height:1.65;color:var(--muted-fg)}
.closer .cta-row{justify-content:center}

footer{border-top:1px solid var(--border);margin-top:1rem;padding:2.5rem 0 1.5rem;font-size:.8125rem;color:var(--muted-fg)}
.foot-top{display:flex;flex-direction:column;gap:2rem}
@media(min-width:768px){.foot-top{flex-direction:row;justify-content:space-between;gap:3rem}}
.foot-brand{display:flex;flex-direction:column;gap:.75rem;max-width:20rem}
/* align-self, because a flex column stretches its children across the cross axis
   — which for an img means width, and a stretched width beats the intrinsic ratio. */
.foot-brand img{display:block;align-self:flex-start;height:1.1875rem;width:auto}
.foot-brand p{font-size:.8125rem;line-height:1.5}

.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 2rem}
@media(min-width:520px){.foot-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 3.5rem}}
.foot-nav > div{display:flex;flex-direction:column;gap:.5rem}
.foot-nav h2{
  font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--foreground);margin-bottom:.125rem;
}
.foot-nav a{color:var(--muted-fg);text-decoration:none;transition:color .15s}
.foot-nav a:hover{color:var(--foreground);text-decoration:underline;text-underline-offset:4px}

.foot-bottom{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--border);font-size:.75rem;
}
.foot-bottom a{color:inherit;text-decoration:none}
.foot-bottom a:hover{color:var(--foreground);text-decoration:underline}

/* ---------- fixes found by looking at it ---------- */

/* The hero screenshot is 2000px wide natively. Without min-width:0 a grid item
   is sized against its content's min-content width, so the image forced the
   column wide and squeezed the headline to one word per line. */
.hero > * { min-width: 0; }

.mac img { max-width: 100%; height: auto; display: block; }

/* The bar is a wide, short strip; letting it fill the width reads better than
   boxing it into a fake desktop. */
.mac { max-width: 100%; }


/* ---------- process flow ---------- */
/* A stepper rather than six more cards: the homepage needs the shape of the
   process at a glance, and the detail already has a page of its own. */
.flow{list-style:none;display:flex;flex-direction:column;gap:1.25rem;margin-top:2rem}
.flow li{position:relative;display:flex;flex-direction:column;gap:.375rem;padding-left:3.25rem}
.flow .n{
  position:absolute;left:0;top:0;width:2.25rem;height:2.25rem;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;z-index:1;
  background:var(--primary);color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:.6875rem;font-weight:700;
}
.flow li:last-child .n{background:var(--accent);color:var(--ap-ink)}
.flow .t{font-size:.9375rem;font-weight:700;line-height:2.25rem}
.flow .d{font-size:.8125rem;line-height:1.55;color:var(--muted-fg)}
/* The rail joins the dots; it is drawn from each item to the one before, so the
   first has none and nothing overhangs either end. */
.flow li::before{content:"";position:absolute;left:1.0625rem;bottom:100%;height:1.25rem;width:2px;background:var(--border)}
.flow li:first-child::before{display:none}

@media(min-width:768px){
  .flow{flex-direction:row;gap:0}
  .flow li{flex:1 1 0;min-width:0;padding:0 .5rem;align-items:center;text-align:center;gap:.5rem}
  .flow .n{position:static;box-shadow:0 0 0 6px var(--background)}
  .flow .t{line-height:1.2}
  .flow li::before{left:auto;bottom:auto;top:1.0625rem;right:50%;width:calc(100% - 2.25rem);height:2px;margin-right:1.125rem}
}

/* ---------- the deal, up front ---------- */
/* Three figures rather than a paragraph: the questions everyone actually has are
   how much, what does it cost me, and how long until I hear back. */
.stats{display:grid;gap:1rem;margin-top:1.75rem;grid-template-columns:1fr}
@media(min-width:640px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{
  border:1px solid var(--border);background:var(--card);border-radius:var(--radius-xl);
  padding:1.25rem 1.125rem;
  box-shadow:0 10px 15px -3px rgba(27,63,170,.05),0 4px 6px -4px rgba(27,63,170,.05);
}
.stat .fig{
  font-family:'JetBrains Mono',monospace;font-size:2rem;font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--primary);
}
.stat .fig .u{color:var(--accent)}
.stat .lab{margin-top:.625rem;font-size:.9375rem;font-weight:700}
.stat .d{margin-top:.375rem;font-size:.8125rem;line-height:1.6;color:var(--muted-fg)}

/* The route the page is arguing for, marked without shouting. */
.limit.pick{border-color:rgba(201,166,60,.55);background:rgba(247,233,184,.35)}
.limit .meta{
  /* margin-top:auto pins the stat line to the card's foot, so the four routes
     line up across the grid instead of floating at whatever height their copy
     ends. Needs .limit to be a flex column, set above. */
  margin-top:auto;padding-top:.625rem;border-top:1px solid var(--border);
  font-family:'JetBrains Mono',monospace;font-size:.6875rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted-fg);line-height:1.7;
}
.limit .meta b{color:var(--foreground);font-weight:700}

/* ── Utility classes, because inline styles do not run here ─────────────────
   The CSP is `style-src 'self' https://fonts.googleapis.com` with no
   'unsafe-inline', which blocks style ATTRIBUTES as well as <style> blocks.
   Every inline style on this site was being dropped in production and applied
   in local preview — the failure mode is a page that is correct on your machine
   and wrong for everybody else. */
.cta-note.cta-note--gap{margin-top:1.25rem}
.cta-row.cta-row--centre{justify-content:center}
.cta-row.cta-row--gap{margin-top:2rem}
.grid.grid--auto18{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.hero.hero--single{grid-template-columns:1fr}
.prose{max-width:48rem;padding-top:2.5rem}
.section-sub.section-sub--centre{margin-left:auto;margin-right:auto}
.section-title--wide{max-width:none}
.section-title.title--lg{font-size:2.5rem}
section.section--first{border-top:0;padding-top:2.5rem}