/* Halenoir is the site's only typeface. The four supplied weights are declared
   below; nothing else is loaded. There is no Regular weight, so ordinary body
   text (weight 400) uses Light. Every font-weight in this file is one of
   300 / 600 / 700 / 900 so the browser never has to pick a nearest weight. */
@font-face {
  font-family:"Halenoir";
  src:url("/fonts/halenoir-light.woff2") format("woff2");
  font-weight:300 500;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Halenoir";
  src:url("/fonts/halenoir-demibold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Halenoir";
  src:url("/fonts/halenoir-bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Halenoir";
  src:url("/fonts/halenoir-black.woff2") format("woff2");
  font-weight:800 900;
  font-style:normal;
  font-display:swap;
}
:root {
  --font:"Halenoir",system-ui,sans-serif;
  --navy:#073565;
  --blue:#0759a9;
  --cyan:#25d3e7;
  --aqua:#78eaf2;
  --ink:#092642;
  --muted:#5f7284;
  --line:#dbe5eb;
  --pale:#f3f8fa;
  --white:#fff;
  --hero-wash:#f8fafb;
  --success:#25b994;
  --warning:#b17815;
  --error:#dc2626;
  --shadow:color-mix(in srgb, var(--navy) 40%, black);
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  margin:0;
  font-family:var(--font);
}
a {
  color:inherit;
  text-decoration:none;
}
.container {
  width:min(1180px,100% - 48px);
  margin:0 auto;
}
.section {
  padding:112px 0;
}
.site-header {
  z-index:20;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  width:min(1280px,100% - 40px);
  height:78px;
  margin:0 auto;
  display:grid;
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%);
}
.brand {
  width:176px;
  display:block;
}
.brand img {
  width:100%;
  height:auto;
  display:block;
}
nav {
  color:color-mix(in srgb, var(--ink) 81%, var(--white));
  align-items:center;
  gap:36px;
  font-size:14px;
  font-weight:600;
  display:flex;
}
nav a,.footer-links a {
  transition:color .2s;
}
nav a:hover,.footer-links a:hover {
  color:var(--blue);
}
.site-header>.button {
  justify-self:end;
}
.button {
  background:var(--blue);
  min-height:52px;
  color:var(--white);
  border-radius:7px;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:0 24px;
  font-size:15px;
  font-weight:700;
  transition:transform .2s,background .2s,box-shadow .2s;
  display:inline-flex;
  box-shadow:0 9px 24px color-mix(in srgb, var(--blue) 18%, transparent);
}
.button:hover {
  background:var(--navy);
  transform:translateY(-2px);
  box-shadow:0 13px 30px color-mix(in srgb, var(--navy) 22%, transparent);
}
.button-small {
  min-height:43px;
  padding:0 18px;
  font-size:14px;
}
.hero {
  border-bottom:1px solid var(--line);
  background:var(--hero-wash);
  min-height:770px;
  position:relative;
  overflow:hidden;
}
.hero-art {
  object-fit:cover;
  object-position:center right;
}
.hero-wash {
  background:linear-gradient(90deg,var(--hero-wash) 0% 40%,color-mix(in srgb, var(--hero-wash) 88%, transparent) 50%,color-mix(in srgb, var(--hero-wash) 10%, transparent) 75%,color-mix(in srgb, var(--hero-wash) 0%, transparent) 100%);
  position:absolute;
  inset:0;
}
.hero-inner {
  z-index:2;
  align-items:center;
  min-height:770px;
  padding-top:74px;
  display:flex;
  position:relative;
}
.hero-copy {
  width:min(690px,62%);
  padding-top:18px;
}
.eyebrow,.kicker {
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin:0 0 20px;
  font-size:16px;
  font-weight:900;
}
.eyebrow {
  align-items:center;
  gap:10px;
  display:flex;
}
.eyebrow span {
  background:var(--cyan);
  width:28px;
  height:2px;
  display:block;
}
h1,h2,h3,p {
  margin-top:0;
}
h1 {
  letter-spacing:-.055em;
  max-width:700px;
  color:var(--navy);
  margin-bottom:24px;
  font-size:clamp(54px,6.2vw,82px);
  font-weight:700;
  line-height:.98;
}
h1 em {
  color:var(--blue);
  font-style:normal;
}
.hero-lede {
  color:color-mix(in srgb, var(--ink) 73%, var(--white));
  max-width:640px;
  margin-bottom:30px;
  font-size:19px;
  line-height:1.65;
}
.hero-actions {
  align-items:center;
  gap:30px;
  display:flex;
}
.text-link {
  color:var(--navy);
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:700;
  display:inline-flex;
}
.text-link svg {
  transition:transform .2s;
}
.text-link:hover svg {
  transform:translate(4px);
}
.section-heading {
  margin-bottom:55px;
}
.split-heading {
  grid-template-columns:1.15fr .85fr;
  align-items:end;
  gap:110px;
  display:grid;
}
.section-heading h2,.platform-copy h2,.audience-card h2,.contact h2 {
  color:var(--navy);
  letter-spacing:-.04em;
  margin-bottom:0;
  font-size:clamp(38px,4vw,58px);
  font-weight:700;
  line-height:1.05;
}
.split-heading>p {
  color:var(--muted);
  margin:0 0 4px;
  font-size:18px;
  line-height:1.7;
}
.pillar-grid {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  grid-template-columns:repeat(3,1fr);
  display:grid;
}
.pillar {
  padding:34px 34px 40px 0;
}
.pillar+.pillar {
  border-left:1px solid var(--line);
  padding-left:34px;
}
.pillar-top {
  color:var(--blue);
  justify-content:space-between;
  align-items:center;
  margin-bottom:45px;
  display:flex;
}
.pillar-top>span {
  color:color-mix(in srgb, var(--ink) 40%, var(--white));
  letter-spacing:.1em;
  font:700 12px/1 var(--font);
}
.pillar-label {
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:10px;
  font-weight:900;
  color:var(--blue)!important;
  font-size:15px!important;
}
.pillar h3 {
  color:var(--navy);
  letter-spacing:-.025em;
  margin-bottom:14px;
  font-size:25px;
}
.pillar p {
  color:var(--muted);
  margin-bottom:0;
  font-size:16px;
  line-height:1.65;
}
.platform {
  background:var(--navy);
  color:var(--white);
  overflow:hidden;
}
.platform-grid {
  grid-template-columns:.78fr 1.22fr;
  align-items:center;
  gap:80px;
  display:grid;
}
.platform-copy h2 {
  color:var(--white);
  margin-bottom:24px;
}
.platform-copy>p:not(.kicker) {
  color:color-mix(in srgb, var(--white) 75%, var(--navy));
  font-size:17px;
  line-height:1.75;
}
.platform .kicker {
  color:var(--aqua);
}
.platform-points {
  border-top:1px solid color-mix(in srgb, var(--white) 15%, transparent);
  gap:26px;
  margin-top:34px;
  padding-top:30px;
  display:grid;
}
.platform-points:empty {
  display:none;
}
.platform-point h3 {
  color:var(--white);
  letter-spacing:-.015em;
  margin:0 0 8px;
  font-size:21px;
  line-height:1.25;
}
.platform-point p {
  color:color-mix(in srgb, var(--white) 75%, var(--navy));
  margin:0;
  font-size:16px;
  line-height:1.7;
}
.platform-image {
  border-radius:16px;
  width:100%;
  height:auto;
  display:block;
  box-shadow:0 40px 80px color-mix(in srgb, var(--shadow) 35%, transparent);
}
.product-stage {
  align-items:center;
  min-height:520px;
  display:flex;
  position:relative;
}
.product-stage:before {
  content:"";
  background:radial-gradient(circle,color-mix(in srgb, var(--cyan) 20%, transparent),#0000 60%);
  position:absolute;
  inset:-120px -200px -120px 30%;
}
.dashboard-card {
  width:100%;
  color:var(--ink);
  background:color-mix(in srgb, var(--white) 98%, transparent);
  border:1px solid color-mix(in srgb, var(--white) 45%, transparent);
  border-radius:16px;
  padding:26px;
  position:relative;
  box-shadow:0 40px 80px color-mix(in srgb, var(--shadow) 35%, transparent);
}
.dashboard-head {
  border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, var(--white));
  justify-content:space-between;
  align-items:flex-start;
  padding-bottom:22px;
  display:flex;
}
.dashboard-head>div {
  flex-direction:column;
  gap:7px;
  display:flex;
}
.dashboard-head strong {
  color:var(--navy);
  font-size:20px;
}
.overline {
  color:color-mix(in srgb, var(--ink) 57%, var(--white));
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:9px;
  font-weight:900;
}
.status {
  color:color-mix(in srgb, var(--success) 62%, black);
  background:color-mix(in srgb, var(--success) 9%, var(--white));
  border-radius:99px;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  font-size:10px;
  font-weight:900;
  display:flex;
}
.status i {
  background:var(--success);
  border-radius:50%;
  width:6px;
  height:6px;
}
.metrics {
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  padding:20px 0;
  display:grid;
}
.metrics>div {
  background:color-mix(in srgb, var(--ink) 1%, var(--white));
  border:1px solid color-mix(in srgb, var(--ink) 9%, var(--white));
  border-radius:9px;
  flex-direction:column;
  padding:14px;
  display:flex;
}
.metrics span {
  color:color-mix(in srgb, var(--ink) 56%, var(--white));
  margin-bottom:10px;
  font-size:9px;
}
.metrics strong {
  color:var(--navy);
  letter-spacing:-.04em;
  font-size:24px;
}
.metrics small {
  color:color-mix(in srgb, var(--ink) 52%, var(--white));
  margin-top:3px;
  font-size:9px;
}
.progress-panel {
  background:var(--pale);
  border-radius:10px;
  padding:18px;
}
.progress-title {
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  display:flex;
}
.progress-title span {
  color:var(--navy);
  font-size:12px;
  font-weight:900;
}
.progress-title strong {
  color:var(--blue);
  font-size:9px;
}
.relationship-row {
  color:color-mix(in srgb, var(--ink) 64%, var(--white));
  border-top:1px solid var(--line);
  grid-template-columns:30px 105px 1fr 45px;
  align-items:center;
  gap:9px;
  min-height:45px;
  font-size:9px;
  display:grid;
}
.relationship-row b {
  color:color-mix(in srgb, var(--success) 62%, black);
  font-size:9px;
}
.relationship-row b.watch {
  color:var(--warning);
}
.avatar {
  color:var(--white);
  border-radius:50%;
  place-items:center;
  width:25px;
  height:25px;
  font-size:7px;
  font-weight:900;
  display:grid;
}
.avatar-one {
  background:color-mix(in srgb, var(--blue) 87%, var(--cyan));
}
.avatar-two {
  background:color-mix(in srgb, var(--cyan) 88%, black);
}
.avatar-three {
  background:color-mix(in srgb, var(--ink) 59%, var(--white));
}
.bar {
  background:var(--line);
  border-radius:99px;
  height:5px;
  overflow:hidden;
}
.bar i {
  background:linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius:99px;
  height:100%;
  display:block;
}
.growth-card {
  background:var(--white);
  width:225px;
  color:var(--ink);
  border-radius:13px;
  padding:20px;
  position:absolute;
  bottom:-20px;
  right:-34px;
  transform:rotate(2deg);
  box-shadow:0 24px 50px color-mix(in srgb, var(--shadow) 28%, transparent);
}
.phone-card {
  border:5px solid var(--ink);
  border-radius:26px;
  width:190px;
  min-height:290px;
  bottom:-46px;
  left:-28px;
  right:auto;
  transform:rotate(-3deg);
}
.phone-speaker {
  background:color-mix(in srgb, var(--ink) 29%, var(--white));
  border-radius:99px;
  width:45px;
  height:4px;
  margin:-9px auto 24px;
}
.phone-title {
  color:var(--navy);
  margin:9px 0 22px;
  font-size:20px;
  line-height:1.1;
  display:block;
}
.phone-task {
  color:color-mix(in srgb, var(--ink) 69%, var(--white));
  background:var(--pale);
  border-radius:8px;
  align-items:center;
  gap:7px;
  margin-top:10px;
  padding:10px;
  font-size:9px;
  display:flex;
}
.phone-task svg {
  color:var(--blue);
  flex:none;
}
.phone-progress {
  background:var(--line);
  border-radius:99px;
  height:6px;
  margin-top:25px;
  overflow:hidden;
}
.phone-progress i {
  border-radius:inherit;
  background:linear-gradient(90deg, var(--blue), var(--cyan));
  width:75%;
  height:100%;
  display:block;
}
.phone-card small {
  color:color-mix(in srgb, var(--ink) 57%, var(--white));
  margin-top:8px;
  font-size:8px;
  display:block;
}
.report-card {
  bottom:-20px;
  right:-34px;
}
.growth-score {
  align-items:end;
  gap:12px;
  margin-top:16px;
  display:flex;
}
.growth-score strong {
  color:var(--blue);
  letter-spacing:-.05em;
  font-size:36px;
  line-height:.9;
}
.growth-score span {
  color:color-mix(in srgb, var(--ink) 57%, var(--white));
  font-size:9px;
  line-height:1.35;
}
.sparkline {
  align-items:end;
  gap:7px;
  height:28px;
  margin-top:15px;
  display:flex;
}
.sparkline i {
  background:color-mix(in srgb, var(--cyan) 32%, var(--white));
  border-radius:3px 3px 0 0;
  flex:1;
  display:block;
}
.sparkline i:first-child {
  height:25%;
}
.sparkline i:nth-child(2) {
  height:38%;
}
.sparkline i:nth-child(3) {
  height:48%;
}
.sparkline i:nth-child(4) {
  height:72%;
}
.sparkline i:nth-child(5) {
  background:var(--cyan);
  height:100%;
}
.two-audiences {
  background:var(--pale);
}
.audience-grid {
  grid-template-columns:1fr 1fr;
  gap:24px;
  display:grid;
}
.audience-card {
  border-radius:15px;
  min-height:500px;
  padding:52px;
}
.light-card {
  background:var(--white);
  border:1px solid var(--line);
}
.dark-card {
  background:var(--blue);
  color:var(--white);
}
.audience-card h2 {
  max-width:480px;
  margin-bottom:48px;
  font-size:42px;
}
.dark-card h2,.dark-card .kicker {
  color:var(--white);
}
.dark-card .kicker {
  opacity:.7;
}
.feature-list {
  gap:18px;
  display:grid;
}
.feature-list>div {
  color:color-mix(in srgb, var(--ink) 71%, var(--white));
  align-items:center;
  gap:13px;
  font-size:15px;
  display:flex;
}
.feature-list>div>span {
  width:34px;
  height:34px;
  color:var(--blue);
  background:color-mix(in srgb, var(--cyan) 9%, var(--white));
  border-radius:50%;
  flex:none;
  place-items:center;
  display:grid;
}
.dark-card .feature-list>div {
  color:color-mix(in srgb, var(--white) 92%, var(--navy));
}
.dark-card .feature-list>div>span {
  color:var(--cyan);
  background:color-mix(in srgb, var(--white) 12%, transparent);
}
.centred {
  text-align:center;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.steps {
  border-top:1px solid var(--line);
  grid-template-columns:repeat(4,1fr);
  display:grid;
}
.steps article {
  padding:35px 26px 0 0;
  position:relative;
}
.steps article+article {
  padding-left:26px;
}
.steps article:not(:last-child):after {
  content:"";
  background:var(--cyan);
  border-radius:50%;
  width:8px;
  height:8px;
  position:absolute;
  top:-4px;
  right:0;
}
.steps span {
  color:var(--blue);
  letter-spacing:.1em;
  font:900 11px/1 var(--font);
}
.steps h3 {
  color:var(--navy);
  letter-spacing:-.02em;
  margin:45px 0 12px;
  font-size:21px;
  line-height:1.2;
}
.steps p {
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
}
.statement-section {
  background:color-mix(in srgb, var(--cyan) 9%, var(--white));
  padding:105px 0;
}
.statement-grid {
  grid-template-columns:120px 1fr;
  align-items:start;
  gap:30px;
  display:grid;
}
.statement-mark {
  color:var(--cyan);
  font:900 170px/.65 var(--font);
}
.statement-grid h2 {
  max-width:920px;
  color:var(--navy);
  letter-spacing:-.045em;
  margin-bottom:25px;
  font-size:clamp(40px,5vw,66px);
  line-height:1.04;
}
.statement-grid div>p {
  color:color-mix(in srgb, var(--ink) 72%, var(--white));
  max-width:760px;
  margin-bottom:0;
  font-size:19px;
  line-height:1.65;
}
.use-case-grid {
  border-top:1px solid var(--line);
  grid-template-columns:repeat(4,1fr);
  display:grid;
}
.use-case-grid article {
  min-height:270px;
  padding:30px 24px 20px 0;
}
.use-case-grid article+article {
  border-left:1px solid var(--line);
  padding-left:24px;
}
.use-case-grid span {
  color:color-mix(in srgb, var(--ink) 40%, var(--white));
  font:700 11px/1 var(--font);
}
.use-case-grid h3 {
  color:var(--navy);
  margin:72px 0 13px;
  font-size:22px;
}
.use-case-grid p {
  color:var(--muted);
  margin:0;
  font-size:14px;
  line-height:1.65;
}
.pricing-section {
  border-top:1px solid var(--line);
  background:var(--pale);
}
.pricing-grid {
  grid-template-columns:1fr 420px;
  align-items:center;
  gap:100px;
  display:grid;
}
.pricing-grid h2 {
  color:var(--navy);
  letter-spacing:-.04em;
  margin:0;
  font-size:clamp(38px,4vw,58px);
  line-height:1.05;
}
.price-card {
  border:1px solid var(--line);
  background:var(--white);
  border-radius:16px;
  padding:40px;
  box-shadow:0 24px 60px color-mix(in srgb, var(--navy) 9%, transparent);
}
.price-card>span {
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}
.price-card>strong {
  color:var(--blue);
  letter-spacing:-.06em;
  margin:12px 0 3px;
  font-size:74px;
  line-height:1;
  display:block;
}
.price-card sup {
  vertical-align:top;
  margin-right:3px;
  font-size:34px;
}
.price-card>p {
  color:var(--muted);
  margin-bottom:26px;
  font-size:16px;
}
.contact {
  background:var(--navy);
  color:var(--white);
  text-align:center;
  padding:118px 0;
  position:relative;
  overflow:hidden;
}
.contact:before {
  content:"";
  border:1px solid color-mix(in srgb, var(--cyan) 20%, transparent);
  border-radius:50%;
  width:620px;
  height:620px;
  position:absolute;
  top:-390px;
  left:50%;
  transform:translate(-50%);
  box-shadow:0 0 0 80px color-mix(in srgb, var(--cyan) 3%, transparent),0 0 0 160px color-mix(in srgb, var(--cyan) 2%, transparent);
}
.contact-inner {
  z-index:1;
  position:relative;
}
.contact .kicker {
  color:var(--aqua);
}
.contact h2 {
  color:var(--white);
  max-width:790px;
  margin:0 auto 20px;
}
.contact p:not(.kicker) {
  color:color-mix(in srgb, var(--white) 79%, var(--navy));
  max-width:630px;
  margin:0 auto 34px;
  font-size:18px;
  line-height:1.6;
}
.button-white {
  color:var(--navy);
  background:var(--white);
}
.button-white:hover {
  background:var(--cyan);
  color:var(--navy);
}
footer {
  background:var(--white);
  padding:45px 0 28px;
}
.footer-inner {
  grid-template-columns:1fr auto;
  align-items:start;
  gap:30px;
  display:grid;
}
.footer-inner img {
  width:165px;
  height:auto;
}
.footer-inner>div:first-child p {
  color:color-mix(in srgb, var(--ink) 57%, var(--white));
  margin:14px 0 0;
  font-size:13px;
}
.footer-links {
  color:color-mix(in srgb, var(--ink) 73%, var(--white));
  gap:28px;
  font-size:13px;
  font-weight:600;
  display:flex;
}
.copyright {
  border-top:1px solid var(--line);
  color:color-mix(in srgb, var(--ink) 49%, var(--white));
  grid-column:1/-1;
  margin:24px 0 0;
  padding-top:20px;
  font-size:11px;
}
/* Six menu links need more room than the header's equal-width side columns
   leave once the viewport gets narrow: let the logo and button column size to
   their content and centre the menu in whatever is left, with tighter spacing. */
@media (961px<=width<=1200px) {
  .site-header {
    grid-template-columns:auto 1fr auto;
  }
  nav {
    justify-self:center;
    gap:18px;
  }
}
@media (width<=960px) {
  nav {
    display:none;
  }
  .site-header {
    grid-template-columns:1fr auto;
  }
  .hero,.hero-inner {
    min-height:720px;
  }
  .hero-art {
    object-position:65% center;
    opacity:.42;
  }
  .hero-wash {
    background:linear-gradient(90deg,var(--hero-wash) 0%,color-mix(in srgb, var(--hero-wash) 95%, transparent) 60%,color-mix(in srgb, var(--hero-wash) 50%, transparent) 100%);
  }
  .hero-copy {
    width:82%;
  }
  .split-heading,.platform-grid,.pricing-grid {
    grid-template-columns:1fr;
    gap:40px;
  }
  .pillar-grid {
    grid-template-columns:1fr;
  }
  .pillar {
    padding:30px 0;
  }
  .pillar+.pillar {
    border-left:0;
    border-top:1px solid var(--line);
    padding-left:0;
  }
  .pillar-top {
    margin-bottom:24px;
  }
  .platform-copy {
    max-width:680px;
  }
  .product-stage {
    width:90%;
    margin:0 auto;
  }
  .audience-grid {
    grid-template-columns:1fr;
  }
  .steps {
    grid-template-columns:1fr 1fr;
  }
  .steps article:nth-child(2):after {
    display:none;
  }
  .use-case-grid {
    grid-template-columns:1fr 1fr;
  }
  .use-case-grid article:nth-child(3) {
    border-left:0;
    border-top:1px solid var(--line);
    padding-left:0;
  }
  .use-case-grid article:nth-child(4) {
    border-top:1px solid var(--line);
  }
}
@media (width<=640px) {
  .container {
    width:min(100% - 32px,1180px);
  }
  .section {
    padding:80px 0;
  }
  .site-header {
    width:calc(100% - 30px);
    height:70px;
  }
  .brand {
    width:142px;
  }
  .button-small {
    min-height:39px;
    padding:0 13px;
    font-size:12px;
  }
  .hero,.hero-inner {
    min-height:710px;
  }
  .hero-art {
    object-position:72% center;
    opacity:.28;
  }
  .hero-copy {
    width:100%;
    padding-top:28px;
  }
  h1 {
    font-size:49px;
  }
  .hero-lede {
    font-size:17px;
  }
  .hero-actions {
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }
  .section-heading h2,.platform-copy h2,.audience-card h2,.contact h2 {
    font-size:38px;
  }
  .split-heading {
    gap:25px;
  }
  .split-heading>p {
    font-size:16px;
  }
  .product-stage {
    width:100%;
    min-height:420px;
  }
  .dashboard-card {
    padding:16px;
    transform:scale(.96);
  }
  .report-card {
    transform-origin:100% 100%;
    bottom:-30px;
    right:-6px;
    transform:scale(.82)rotate(2deg);
  }
  .phone-card {
    transform-origin:0 100%;
    bottom:-48px;
    left:-12px;
    right:auto;
    transform:scale(.72)rotate(-3deg);
  }
  .metrics>div {
    padding:10px;
  }
  .relationship-row {
    grid-template-columns:28px 82px 1fr;
  }
  .relationship-row b {
    display:none;
  }
  .audience-card {
    min-height:auto;
    padding:34px 26px;
  }
  .audience-card h2 {
    margin-bottom:36px;
  }
  .steps {
    border-top:0;
    grid-template-columns:1fr;
  }
  .steps article,.steps article+article {
    border-top:1px solid var(--line);
    padding:25px 0;
  }
  .steps article:after {
    display:none;
  }
  .steps h3 {
    margin-top:26px;
  }
  .statement-grid {
    grid-template-columns:44px 1fr;
    gap:5px;
  }
  .statement-mark {
    font-size:90px;
  }
  .statement-grid h2 {
    font-size:38px;
  }
  .statement-grid div>p {
    font-size:16px;
  }
  .use-case-grid {
    grid-template-columns:1fr;
  }
  .use-case-grid article,.use-case-grid article+article,.use-case-grid article:nth-child(3) {
    border-left:0;
    border-top:1px solid var(--line);
    min-height:0;
    padding:26px 0;
  }
  .use-case-grid h3 {
    margin-top:32px;
  }
  .price-card {
    padding:30px;
  }
  .contact {
    padding:90px 0;
  }
  .footer-inner {
    grid-template-columns:1fr;
  }
  .footer-links {
    flex-wrap:wrap;
    gap:16px 24px;
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,:before,:after {
    transition:none!important;
  }
  .modal-overlay,.modal-content {
    animation:none!important;
  }
}

/* CMS binding hook: the eyebrow text needs its own element (for
   data-bind) without matching the decorative ".eyebrow span" dash rule. */
.eyebrow .eyebrow-text {
  width:auto;
  height:auto;
  display:inline;
  background:none;
}

/* Enquiry form (inside the dark contact section) and its success popup.
   Behaviour is in /form.js. The card has to restate its text colours because
   ".contact" sets light-on-dark text for everything inside it. */
.contact-form {
  max-width:640px;
  margin:40px auto 0;
  padding:40px;
  gap:22px;
  color:var(--ink);
  text-align:left;
  background:var(--white);
  border-radius:16px;
  display:grid;
  box-shadow:0 30px 70px color-mix(in srgb, var(--shadow) 40%, transparent);
}
.form-field {
  gap:8px;
  display:grid;
}
.form-label {
  color:var(--ink);
  font-size:14px;
  font-weight:600;
}
.contact-form input[type=text],.contact-form input[type=email],.contact-form select,.contact-form textarea {
  width:100%;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 16px;
  font:inherit;
  font-size:16px;
  transition:border-color .2s,box-shadow .2s;
}
.contact-form ::placeholder {
  color:var(--muted);
  opacity:.8;
}
.contact-form textarea {
  resize:none;
  min-height:112px;
}
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible {
  border-color:var(--blue);
  outline:2px solid var(--blue);
  outline-offset:1px;
}
.contact-form input.is-invalid,.contact-form select.is-invalid {
  border-color:var(--error);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--error) 35%, transparent);
}
.form-hint {
  color:var(--muted);
  font-size:13px;
}
.form-trap {
  position:absolute;
  left:-5000px;
}
.form-check {
  color:var(--ink);
  align-items:flex-start;
  gap:12px;
  font-size:14px;
  line-height:1.5;
  display:flex;
}
.form-check input {
  accent-color:var(--blue);
  flex:none;
  width:20px;
  height:20px;
  margin:1px 0 0;
}
.contact-form a {
  color:var(--blue);
  text-underline-offset:2px;
  text-decoration:underline;
}
.form-submit {
  cursor:pointer;
  width:100%;
  margin-top:4px;
  font-family:inherit;
  border:0;
}
.form-legal {
  color:var(--muted);
  text-align:center;
  font-size:12px;
  line-height:1.5;
  display:block;
}
.modal-overlay {
  z-index:9999;
  background:color-mix(in srgb, black 50%, transparent);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  justify-content:center;
  align-items:center;
  display:none;
  position:fixed;
  inset:0;
}
.modal-overlay.active {
  animation:modal-fade .3s ease-out;
  display:flex;
}
.modal-content {
  width:90%;
  max-width:500px;
  color:var(--ink);
  background:var(--white);
  border-radius:24px;
  padding:32px;
  animation:modal-rise .3s ease-out;
  position:relative;
  box-shadow:0 20px 60px color-mix(in srgb, var(--shadow) 60%, transparent);
}
@keyframes modal-fade {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}
@keyframes modal-rise {
  from {
    opacity:0;
    transform:translateY(20px);
  }
  to {
    opacity:1;
    transform:none;
  }
}
.modal-close {
  width:32px;
  height:32px;
  color:var(--muted);
  cursor:pointer;
  background:none;
  border:0;
  border-radius:8px;
  justify-content:center;
  align-items:center;
  font-size:24px;
  line-height:1;
  display:flex;
  position:absolute;
  top:16px;
  right:16px;
}
.modal-close:hover {
  background:var(--pale);
  color:var(--ink);
}
.modal-body {
  text-align:center;
}
.modal-icon {
  width:64px;
  height:64px;
  color:var(--success);
  background:color-mix(in srgb, var(--success) 15%, var(--white));
  border-radius:50%;
  place-items:center;
  margin:0 auto 16px;
  display:grid;
}
.modal-content h3 {
  color:var(--ink);
  margin:0 0 8px;
  font-size:24px;
  font-weight:700;
}
.modal-lead,.modal-note {
  color:var(--muted);
  display:block;
}
.modal-lead {
  margin-bottom:12px;
}
.modal-note {
  margin-bottom:24px;
  font-size:14px;
}
.modal-done {
  cursor:pointer;
  width:100%;
  font-family:inherit;
  border:0;
}
@media (width<=640px) {
  .contact-form {
    gap:18px;
    padding:26px 20px;
  }
  .modal-content {
    padding:28px 22px;
  }
}

/* Text pages (the privacy policy). The shared header floats over the top of
   every page, so the content starts below it. The body is Markdown turned into
   plain elements by aws/markdown.js, so it is styled by element, not by class. */
.doc-page {
  padding:150px 0 96px;
}
.doc-inner {
  width:min(780px,100% - 48px);
}
.doc-page h1 {
  color:var(--navy);
  letter-spacing:-.045em;
  margin:0 0 14px;
  font-size:clamp(38px,5vw,56px);
  font-weight:700;
  line-height:1.04;
}
.doc-meta {
  color:var(--muted);
  margin:0 0 44px;
  font-size:15px;
}
.doc-body {
  color:color-mix(in srgb, var(--ink) 85%, var(--white));
  font-size:17px;
  line-height:1.75;
}
.doc-body>:first-child {
  margin-top:0;
}
.doc-body p,.doc-body ul,.doc-body ol,.doc-body blockquote {
  margin:0 0 20px;
}
.doc-body h2 {
  color:var(--navy);
  letter-spacing:-.025em;
  margin:52px 0 14px;
  font-size:28px;
  line-height:1.2;
}
.doc-body h3 {
  color:var(--navy);
  letter-spacing:-.015em;
  margin:32px 0 10px;
  font-size:21px;
  line-height:1.3;
}
.doc-body h4 {
  color:var(--navy);
  margin:24px 0 8px;
  font-size:17px;
}
.doc-body ul,.doc-body ol {
  padding-left:24px;
}
.doc-body li {
  margin-bottom:8px;
}
.doc-body strong {
  color:var(--ink);
}
.doc-body a {
  color:var(--blue);
  text-underline-offset:2px;
  text-decoration:underline;
}
.doc-body a:hover {
  color:var(--navy);
}
.doc-body blockquote {
  color:var(--muted);
  border-left:3px solid var(--cyan);
  padding:2px 0 2px 20px;
}
.doc-body hr {
  border:0;
  border-top:1px solid var(--line);
  margin:40px 0;
}
.doc-body code {
  background:var(--pale);
  border-radius:5px;
  padding:2px 6px;
  font-size:.9em;
}
.doc-body table {
  border-collapse:collapse;
  max-width:100%;
  margin:0 0 24px;
  font-size:15px;
  line-height:1.55;
  display:block;
  overflow-x:auto;
}
.doc-body th,.doc-body td {
  border:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  padding:12px 14px;
}
.doc-body th {
  color:var(--navy);
  background:var(--pale);
  font-weight:700;
}
@media (width<=640px) {
  .doc-page {
    padding:118px 0 72px;
  }
  .doc-inner {
    width:min(100% - 32px,780px);
  }
  .doc-body {
    font-size:16px;
  }
  .doc-body h2 {
    margin-top:40px;
    font-size:24px;
  }
}

/* Cookie banner (behaviour: /cookie-consent.js). Slides up from the bottom once
   the script adds .show. Unlike a plain off-screen transform, visibility is also
   switched, so while it's hidden its buttons can't be reached with the keyboard.
   The visibility change waits for the slide-out to finish when hiding. */
.cookie-banner {
  z-index:9999;
  color:var(--white);
  background:color-mix(in srgb, var(--ink) 98%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  visibility:hidden;
  padding:20px;
  transition:transform .4s cubic-bezier(.4,0,.2,1),visibility 0s linear .4s;
  position:fixed;
  inset:auto 0 0;
  transform:translateY(100%);
  box-shadow:0 -4px 20px color-mix(in srgb, var(--shadow) 40%, transparent);
}
.cookie-banner.show {
  visibility:visible;
  transition-delay:0s;
  transform:none;
}
.cookie-banner-inner {
  justify-content:space-between;
  align-items:center;
  gap:16px;
  width:min(1280px,100%);
  margin:0 auto;
  display:flex;
}
.cookie-banner-text {
  flex:1;
  align-items:flex-start;
  gap:12px;
  font-size:14px;
  line-height:1.6;
  display:flex;
}
.cookie-banner-text svg {
  color:var(--cyan);
  flex:none;
  margin-top:2px;
}
.cookie-banner a {
  color:var(--aqua);
  text-underline-offset:2px;
  margin-left:4px;
  text-decoration:underline;
}
.cookie-banner-actions {
  flex:none;
  gap:12px;
  display:flex;
}
.cookie-btn {
  cursor:pointer;
  border:1px solid #0000;
  border-radius:8px;
  padding:10px 24px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  transition:background .2s,color .2s,transform .2s;
}
.cookie-btn-primary {
  background:var(--cyan);
  color:var(--navy);
}
.cookie-btn-primary:hover {
  background:var(--aqua);
  transform:translateY(-1px);
}
.cookie-btn-secondary {
  color:color-mix(in srgb, var(--white) 80%, var(--ink));
  border-color:color-mix(in srgb, var(--white) 35%, var(--ink));
  background:none;
}
.cookie-btn-secondary:hover {
  background:color-mix(in srgb, var(--white) 12%, var(--ink));
  color:var(--white);
}
@media (width<=640px) {
  .cookie-banner-inner {
    flex-direction:column;
    align-items:stretch;
  }
  .cookie-banner-actions {
    justify-content:flex-end;
  }
}

/* Story and trust pages (Founders, Trust & Security): the same plain-page
   frame as the legal pages (.doc-page), with a centred intro and white cards. */
.wide-inner {
  width:min(1040px,100% - 48px);
}
.page-intro {
  text-align:center;
  margin:0 auto 48px;
}
.page-intro h1 {
  color:var(--navy);
  letter-spacing:-.045em;
  max-width:none;
  margin:0 0 16px;
  font-size:clamp(38px,5vw,56px);
  font-weight:700;
  line-height:1.04;
}
.page-intro p {
  color:var(--muted);
  max-width:680px;
  margin:0 auto;
  font-size:19px;
  line-height:1.65;
}
.card-block {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  margin-bottom:32px;
  padding:40px;
  box-shadow:0 24px 60px color-mix(in srgb, var(--navy) 9%, transparent);
}
.card-block h2 {
  color:var(--navy);
  letter-spacing:-.025em;
  margin:0 0 14px;
  font-size:26px;
}
.founder-grid {
  gap:28px;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.founder-card {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:34px;
  box-shadow:0 24px 60px color-mix(in srgb, var(--navy) 9%, transparent);
}
.founder-head {
  align-items:center;
  gap:18px;
  margin-bottom:22px;
  display:flex;
}
.founder-head img {
  object-fit:cover;
  border:4px solid var(--white);
  border-radius:50%;
  flex:none;
  width:112px;
  height:112px;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--blue) 18%, var(--white)),0 6px 16px color-mix(in srgb, var(--navy) 20%, transparent);
}
.founder-head h2 {
  color:var(--navy);
  letter-spacing:-.025em;
  margin:0;
  font-size:26px;
  line-height:1.15;
}
.founder-head p {
  color:var(--blue);
  margin:6px 0 0;
  font-size:15px;
  font-weight:700;
}
.founder-card .doc-body {
  font-size:16px;
}
.trust-grid {
  gap:24px;
  margin-bottom:32px;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.trust-card {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  align-items:flex-start;
  gap:18px;
  padding:30px;
  display:flex;
  box-shadow:0 18px 44px color-mix(in srgb, var(--navy) 8%, transparent);
}
.trust-icon {
  width:48px;
  height:48px;
  color:var(--blue);
  background:color-mix(in srgb, var(--blue) 11%, var(--white));
  border-radius:12px;
  flex:none;
  place-items:center;
  display:grid;
}
.trust-card h2 {
  color:var(--navy);
  margin:0 0 8px;
  font-size:21px;
  line-height:1.25;
}
.trust-card p {
  color:var(--muted);
  margin:0;
  line-height:1.65;
}
.trust-cta {
  text-align:center;
  margin-top:48px;
}
@media (width<=960px) {
  .founder-grid,.trust-grid {
    grid-template-columns:1fr;
  }
}
@media (width<=640px) {
  .wide-inner {
    width:min(100% - 32px,1040px);
  }
  .page-intro p {
    font-size:17px;
  }
  .card-block,.founder-card,.trust-card {
    padding:26px 22px;
  }
  .founder-head {
    gap:14px;
  }
  .founder-head img {
    width:88px;
    height:88px;
  }
}