/* Fullon Pulse — site mockup. One stylesheet for every page.
   Palette and type are the product's own, so the site and the board look
   like the same thing rather than two. */
/* fonts.css is linked from the document head, ahead of this sheet, rather
   than imported here: an @import cannot even be discovered until this file has
   been fetched and parsed, so the faces were always one round trip late. */

:root{
  --ink:#101418; --ink-2:#48525c; --ink-3:#78838d;
  --line:#e9eef2; --border:#dde3e8;
  --page:#ffffff; --soft:#f5f8fa; --wash:#eef3f8;
  --accent:#15558f; --accent-2:#1b6bb4; --deep:#12283f;
  --warn:#84580a; --crit:#b3231d; --ok:#1c7a4b;
  --shadow-1:0 1px 2px rgba(16,20,24,.05);
  --shadow-2:0 2px 6px rgba(16,20,24,.06), 0 14px 34px rgba(16,20,24,.10);
  --shadow-3:0 3px 8px rgba(16,20,24,.07), 0 26px 60px rgba(16,20,24,.14);
  --cta-cyan:#0ec2e0;
  --r:12px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:500; color:var(--ink); background:var(--page);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,.mono-num{ font-family:Chivo,Barlow,sans-serif; font-weight:600;
  letter-spacing:-.012em; line-height:1.18; }
/* height:auto is not decoration. Every <img> now carries width and height
   attributes so the browser can reserve the right box before the bytes land,
   and those attributes are presentational hints: with only max-width set, an
   image scaled down to its container kept the literal attribute height and
   stretched. height:auto hands the aspect ratio back, which is what makes the
   reserved box correct rather than merely present. */
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ width:min(1160px, 100% - 48px); margin-inline:auto; }
.narrow{ width:min(780px, 100% - 48px); margin-inline:auto; }

/* ------------------------------------------------------------------ nav */
header.site{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(8px);
  border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; gap:28px; height:68px; }
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.brand svg{ height:26px; width:auto; }
.brand:hover{ text-decoration:none; }
.nav ul{ display:flex; gap:26px; list-style:none; margin-left:8px; }
.nav a.link{ color:var(--ink-2); font-size:15px; text-decoration:none;
  padding:6px 0; border-bottom:2px solid transparent; }
.nav a.link:hover{ color:var(--ink); text-decoration:none; }
.nav a.link.on{ color:var(--ink); border-bottom-color:var(--accent); }
.nav .sp{ flex:1; }

.btn{ display:inline-flex; align-items:center; gap:9px; border-radius:9px;
  padding:11px 20px; font-family:Chivo,sans-serif; font-weight:600;
  font-size:14.5px; text-decoration:none; border:1px solid transparent;
  cursor:pointer; transition:background .15s, border-color .15s; }
.btn:hover{ text-decoration:none; }
.btn-p{ background:var(--accent); color:#fff; }
.btn-p:hover{ background:var(--accent-2); }
.btn-g{ background:#fff; color:var(--ink); border-color:var(--border); }
.btn-g:hover{ border-color:#c3ccd4; }
.btn-w{ background:#fff; color:var(--deep); }
.btn-o{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn-o:hover{ border-color:rgba(255,255,255,.7); }
.btn-lg{ padding:14px 26px; font-size:15.5px; }

/* --------------------------------------------------------------- pieces */
.eyebrow{ font-family:Chivo,sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--accent); }
.lead{ font-size:19px; line-height:1.62; color:var(--ink-2); }
.sec{ padding:84px 0; }
.sec.tight{ padding:60px 0; }
.sec.soft{ background:var(--soft); }
.sec-head{ max-width:720px; margin-bottom:44px; }
.sec-head h2{ font-size:clamp(28px, 3.2vw, 38px); margin-top:12px; }
.sec-head p{ margin-top:16px; font-size:17.5px; color:var(--ink-2); }

.grid{ display:grid; gap:26px; }
.g2{ grid-template-columns:repeat(2, 1fr); }
.g3{ grid-template-columns:repeat(3, 1fr); }
.g4{ grid-template-columns:repeat(4, 1fr); }

.card{ background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:28px 26px 30px; box-shadow:var(--shadow-1); }
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ font-size:15.5px; color:var(--ink-2); }
.card .ic{ width:38px; height:38px; border-radius:10px; background:var(--wash);
  display:grid; place-items:center; margin-bottom:16px; }
.card .ic svg{ width:19px; height:19px; stroke:var(--accent); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* device frames */
.win{ border-radius:11px; overflow:hidden; background:#f7f8fa;
  border:1px solid #e2e7ee; box-shadow:var(--shadow-3); }
.win .bar{ height:32px; display:flex; align-items:center; gap:6px;
  padding:0 13px; border-bottom:1px solid #e2e7ee; }
.win .dot{ width:9px; height:9px; border-radius:50%; }
.win .url{ flex:1; margin:0 10px; height:19px; border-radius:10px;
  background:#fff; border:1px solid #e6ebf1; display:flex;
  align-items:center; justify-content:center; color:#96a0aa; font-size:11px; }
.tvbox{ background:#20242b; border-radius:10px; padding:9px 9px 7px;
  box-shadow:var(--shadow-3); }
.tvbox img{ border-radius:4px; }
.tvstand{ width:22%; height:8px; background:#2a3038; margin:0 auto;
  border-radius:0 0 4px 4px; }
.phone{ border-radius:26px; padding:7px; background:#20242b;
  box-shadow:var(--shadow-2); width:224px; max-width:100%; flex:0 0 auto; }
.phone .scr{ border-radius:20px; overflow:hidden; background:#fff;
  line-height:0; }

/* hero */
.hero{ overflow:hidden; padding:74px 0 118px; background:
  radial-gradient(120% 130% at 78% -10%, #eaf1f8 0%, #f7f9fb 46%, #ffffff 78%); }
.hero .in{ display:grid; grid-template-columns:1.08fr 1fr; gap:52px;
  align-items:center; }
.hero h1{ font-size:clamp(34px, 4.3vw, 52px); margin-top:16px; }
.hero .lead{ margin-top:20px; max-width:33em; }
.hero .acts{ display:flex; gap:13px; margin-top:30px; flex-wrap:wrap; }
.stack{ position:relative; }
.stack .phone{ position:absolute; right:-38px; bottom:-124px;
  width:134px; padding:5px; border-radius:19px; }
.stack .phone .scr{ border-radius:15px; }
/* Beside text rather than at the top of the page, the phone hangs less far. */
.twocol .stack .phone{ right:-24px; bottom:-48px; }

.pills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:30px; }
.pill{ font-size:12.5px; color:var(--accent); background:var(--wash);
  border-radius:22px; padding:6px 13px; white-space:nowrap; }

.pagehead{ padding:64px 0 8px; background:var(--soft);
  border-bottom:1px solid var(--line); }
.pagehead .in{ padding-bottom:56px; max-width:760px; }
.pagehead h1{ font-size:clamp(32px, 3.9vw, 46px); margin-top:12px; }
.pagehead p{ margin-top:18px; font-size:18.5px; color:var(--ink-2); }

/* alternating feature rows */
.row{ display:grid; grid-template-columns:1fr 1fr; gap:60px;
  align-items:center; padding:64px 0; border-top:1px solid var(--line); }
.row:first-of-type{ border-top:0; }
.row.flip .txt{ order:2; }
.row h3{ font-size:26px; margin:12px 0 16px; }
.row p{ font-size:16.5px; color:var(--ink-2); }
.row ul{ list-style:none; margin-top:20px; display:grid; gap:11px; }
.row li{ font-size:15.5px; color:var(--ink-2); padding-left:26px;
  position:relative; }
.row li::before{ content:""; position:absolute; left:0; top:9px;
  width:12px; height:7px; border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent); transform:rotate(-45deg); }

/* numbered steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.step{ background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:30px 28px 32px; box-shadow:var(--shadow-1); }
.step .n{ font-family:Chivo,sans-serif; font-weight:600; font-size:15px;
  color:#fff; background:var(--accent); width:34px; height:34px;
  border-radius:50%; display:grid; place-items:center; margin-bottom:18px; }
.step h3{ font-size:20px; margin-bottom:10px; }
.step p{ font-size:15.5px; color:var(--ink-2); }

/* stat / reference strip */
.strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
  background:var(--wash); border-radius:var(--r); padding:32px 34px; }
.strip h4{ font-size:24px; color:var(--accent); }
.strip p{ font-size:14.5px; color:var(--ink-2); margin-top:7px; }

/* CTA band */
.cta{ background:var(--deep); color:#fff; border-radius:16px;
  padding:52px 54px; display:grid; grid-template-columns:1.25fr auto;
  gap:40px; align-items:center; }
.cta h2{ font-size:clamp(25px,2.8vw,33px); color:#fff; }
.cta p{ margin-top:14px; font-size:16.5px; color:#b9c7d6; max-width:44em; }
.cta .acts{ display:flex; gap:12px; flex-wrap:wrap; }

/* footer */
footer.site{ border-top:1px solid var(--line); padding:52px 0 40px;
  background:var(--soft); margin-top:0; }
footer.site .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:34px; }
footer.site .ftitle{ font-family:Chivo,sans-serif; font-weight:600; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:14px; }
footer.site ul{ list-style:none; display:grid; gap:9px; }
footer.site a{ color:var(--ink-2); font-size:15px; }
footer.site .fine{ margin-top:40px; padding-top:22px;
  border-top:1px solid var(--border); font-size:13.5px; color:var(--ink-3);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
footer.site .about{ font-size:15px; color:var(--ink-2); margin-top:14px;
  max-width:30em; }
/* the store badges close the first column, above the rule */
footer.site .stores{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:22px; }
footer.site .store img{ height:40px; width:auto; display:block; }
footer.site a.store:hover{ opacity:.85; }

/* contact form */
.formwrap{ display:grid; grid-template-columns:1.35fr 1fr; gap:54px;
  align-items:start; }
.form{ background:#fff; border:1px solid var(--border); border-radius:var(--r);
  padding:34px 34px 36px; box-shadow:var(--shadow-2); }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:14px; font-weight:600;
  margin-bottom:7px; }
.field input, .field select, .field textarea{ width:100%; font:inherit;
  font-size:15.5px; padding:12px 14px; border:1px solid var(--border);
  border-radius:9px; background:#fdfefe; color:var(--ink); }
.field textarea{ min-height:118px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid #cfe0f0; outline-offset:1px; border-color:var(--accent); }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.check{ display:flex; gap:11px; align-items:flex-start; margin:6px 0 22px;
  font-size:14px; color:var(--ink-2); }
.check input{ width:17px; height:17px; margin-top:2px; accent-color:var(--accent); }
.aside h3{ font-size:20px; margin-bottom:14px; }
.aside ol{ margin:0 0 26px 18px; display:grid; gap:10px; }
.aside li{ font-size:15.5px; color:var(--ink-2); }
.aside .box{ background:var(--wash); border-radius:var(--r); padding:24px 26px; }
.aside .box p{ font-size:15px; color:var(--ink-2); margin-top:8px; }
.sent{ display:none; background:#eef7f1; border:1px solid #bfe0cd;
  border-radius:var(--r); padding:26px 28px; }
.sent h3{ font-size:20px; color:var(--ok); margin-bottom:8px; }
.sent p{ font-size:15.5px; color:var(--ink-2); }

.mocknote{ background:#fff8e6; border-top:1px solid #f0e0b8;
  color:#6b5416; font-size:13.5px; padding:11px 0; text-align:center; }




/* three devices on one baseline, so the captions line up */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px;
  align-items:start; }
.trio .media{ height:300px; display:flex; align-items:flex-end;
  justify-content:center; }
.trio .media > .tvwrap, .trio .media > .win{ width:100%; }
.trio .media .phone{ width:139px; padding:5px; border-radius:19px; }
.trio .media .phone .scr{ border-radius:15px; }
.trio h3{ font-size:20px; margin:26px 0 9px; }
.trio p{ color:var(--ink-2); font-size:15.5px; }

/* a framed still with a caption under it */
.figure{ border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; background:#fff; box-shadow:var(--shadow-1); }
.figure img{ width:100%; }
.figure figcaption{ font-size:14.5px; color:var(--ink-2);
  padding:16px 20px 18px; border-top:1px solid var(--line); }

/* a small timeline for the worked example */
.timeline{ display:grid; gap:0; border-left:2px solid var(--wash);
  margin-left:6px; }
.tl{ display:grid; grid-template-columns:110px 1fr; gap:26px;
  padding:22px 0 22px 28px; position:relative; }
.tl::before{ content:""; position:absolute; left:-7px; top:30px; width:12px;
  height:12px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px #fff; }
.tl .t{ font-family:Chivo,sans-serif; font-weight:600; font-size:15px;
  color:var(--accent); padding-top:1px; }
.tl h4{ font-size:18px; margin-bottom:7px; }
.tl p{ font-size:15.5px; color:var(--ink-2); max-width:60em; }


/* plain tick lists inside cards and steps */
ul.plain{ list-style:none; display:grid; gap:10px; }
ul.plain li{ font-size:15.2px; color:var(--ink-2); padding-left:25px;
  position:relative; line-height:1.55; }
ul.plain li::before{ content:""; position:absolute; left:0; top:8px;
  width:11px; height:6px; border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent); transform:rotate(-45deg); }
ul.plain.no li::before{ transform:none; top:11px; width:11px; height:0;
  border-left:0; border-bottom:2px solid #b9c2cb; }
.card ul.plain{ margin-top:16px; }

/* FAQ */
.faq{ display:grid; gap:0; border-top:1px solid var(--line); }
.q{ border-bottom:1px solid var(--line); }
.q summary{ list-style:none; cursor:pointer; padding:20px 40px 20px 0;
  font-family:Chivo,sans-serif; font-weight:600; font-size:17.5px;
  position:relative; }
.q summary::-webkit-details-marker{ display:none; }
.q summary::after{ content:""; position:absolute; right:8px; top:28px;
  width:9px; height:9px; border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3); transform:rotate(45deg);
  transition:transform .18s; }
.q[open] summary::after{ transform:rotate(-135deg); top:32px; }
.q p{ padding:0 40px 22px 0; font-size:16px; color:var(--ink-2);
  max-width:62em; }

/* two phones side by side, and one under the other when there is no room */
.phones2{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }

/* ------------------------------------------------------ narrow screens */

/* ==================================================== colour ==========
   The board itself is blue on purpose: a wallboard is looked at for eight
   hours and must stay calm. A website has thirty seconds, so it may speak
   louder — but one loud colour, used for one thing. Cyan here always means
   "this is live": the pulse, the live rules, the figures that move. Where
   red and amber appear they are the product's own severity colours doing
   their own job, not decoration. */
:root{
  --cyan:#0bb3cf;          /* on dark grounds, rules, glows */
  --cyan-ink:#06788c;      /* same hue, dark enough to read on white */
  --cyan-soft:#e6f8fc;
  --cyan-line:#b8e9f3;
  --grad:linear-gradient(103deg,#12406b 0%,#15558f 38%,#1878c0 72%,#0bb3cf 100%);
  --grad-soft:linear-gradient(103deg,var(--cyan-soft),#eef4fb 70%);
}

/* the live pulse — one dot, and the only animated thing on the page. It
   beats every 2.4 s and, over three beats, walks through the board's own
   three states: blue (normal), green (healthy), red (critical). */
.pulse{ display:inline-block; width:8px; height:8px; border-radius:50%;
  --dot:#3fd8ef; background:var(--dot); margin-right:8px; vertical-align:1px;
  box-shadow:0 0 0 0 var(--dot);
  animation:pulse 2.4s infinite, pulse-hue 7.2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--dot) 55%, transparent); }
  70%{ box-shadow:0 0 0 9px color-mix(in srgb, var(--dot) 0%, transparent); }
  100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--dot) 0%, transparent); } }
@keyframes pulse-hue{
  0%,28%{ --dot:#3fd8ef; }      /* blue */
  33%,61%{ --dot:#3fbf6b; }     /* green */
  66%,94%{ --dot:#ff5a4f; }     /* red */
  100%{ --dot:#3fd8ef; } }
@property --dot{ syntax:'<color>'; inherits:false; initial-value:#3fd8ef; }
@media (prefers-reduced-motion:reduce){ .pulse{ animation:none; } }

.eyebrow{ color:var(--cyan-ink); }
.hero .eyebrow{ color:#7fe6f8; }

/* a hairline of the accent under every section heading */
.sec-head h2{ position:relative; }
.sec-head h2::after{ content:""; display:block; width:44px; height:3px;
  border-radius:2px; margin:14px 0 0; background:var(--grad); }

/* icon chips carry the accent rather than sitting grey */
.card .ic{ background:var(--cyan-soft); border:1px solid var(--cyan-line); }
.card .ic svg{ stroke:var(--cyan-ink); }
.card:hover .ic{ background:var(--cyan-ink); border-color:var(--cyan-ink); }
.card:hover .ic svg{ stroke:#fff; }
.card{ transition:border-color .15s, box-shadow .15s, transform .15s; }
.card:hover{ border-color:var(--cyan-line); box-shadow:var(--shadow-2);
  transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){ .card:hover{ transform:none; } }

/* the hero gets the gradient and a cyan bloom behind the screenshot */
.hero{ background:var(--grad); position:relative; overflow:hidden; }
.hero::after{ content:""; position:absolute; right:-12%; top:-30%;
  width:60%; height:150%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(11,179,207,.38),rgba(11,179,207,0)); }
.hero .in{ position:relative; z-index:1; }

/* primary button: blue, with the accent arriving on hover */
.btn-p{ background:var(--accent); }
.btn-p:hover{ background:linear-gradient(100deg,var(--accent-2),var(--cyan-ink)); }

/* numbers pulled out of the copy */
.figs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:34px; }
.fig{ background:#fff; border:1px solid var(--border); border-left:3px solid var(--cyan);
  border-radius:var(--r); padding:20px 22px; }
.fig b{ font-family:Chivo,sans-serif; font-size:30px; font-weight:600;
  line-height:1.1; display:block; color:var(--accent); font-variant-numeric:tabular-nums; }
.fig span{ display:block; color:var(--ink-2); font-size:14.5px; margin-top:7px; }
.fig cite{ display:block; color:var(--ink-3); font-size:12.5px; font-style:normal;
  margin-top:9px; }

/* the feature table on the features page */
.fgroup{ margin-top:44px; }
.fgroup > h3{ font-size:13px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--cyan-ink); font-family:Chivo,sans-serif; }
.fgroup > h3::after{ content:""; display:inline-block; width:100%; height:1px;
  background:var(--cyan-line); vertical-align:middle; margin-left:14px;
  max-width:calc(100% - 190px); }
.flist{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px 34px;
  margin-top:14px; }
.frow{ display:flex; gap:13px; padding:14px 0;
  border-bottom:1px solid var(--line); align-items:flex-start; }
.frow svg{ width:19px; height:19px; flex:none; margin-top:2px; fill:none;
  stroke:var(--cyan-ink); stroke-width:1.5; stroke-linecap:round;
  stroke-linejoin:round; }
.frow b{ font-family:Chivo,sans-serif; font-weight:600; font-size:15px;
  display:block; }
.frow p{ color:var(--ink-2); font-size:14.5px; margin-top:3px; }

/* the animated board, framed as a phone */
.gifwrap{ display:flex; gap:34px; align-items:center; flex-wrap:wrap; }
.gifwrap .shot{ border:1px solid var(--border); border-radius:22px; padding:9px;
  background:#fff; box-shadow:var(--shadow-3); flex:none; }
.gifwrap .shot img{ border-radius:14px; display:block; }
.gifwrap .said{ flex:1; min-width:260px; }
.gifwrap .said h2{ font-size:clamp(24px,3vw,32px); }
.gifwrap .said p{ color:var(--ink-2); margin-top:14px; font-size:17px; }
.caption{ color:var(--ink-3); font-size:13px; margin-top:12px; }


@media (max-width: 900px){
  .hero .in, .row, .formwrap{ grid-template-columns:1fr; gap:38px; }
  .row.flip .txt{ order:0; }
  .g3,.g4,.steps,.strip,.trio{ grid-template-columns:1fr 1fr; }
  .trio .media{ height:auto; }
  .cta{ grid-template-columns:1fr; padding:38px 30px; }
  footer.site .cols{ grid-template-columns:1fr 1fr; }
  .nav ul{ display:none; }
  .stack .phone{ display:none; }
}

@media (max-width: 620px){
  .g2,.g3,.g4,.steps,.strip,.trio{ grid-template-columns:1fr; }
  .wrap, .narrow{ width:calc(100% - 32px); }
  .sec{ padding:56px 0; }
  .phones2{ gap:14px; }
}

@media (max-width:620px){ .tl{ grid-template-columns:1fr; gap:6px; } }

/* ---- the new blocks, narrow ----------------------------------------
   The GIF is a fixed 380px and the content column is 342px at 390px wide,
   which is exactly how a page starts scrolling sideways. */
@media (max-width: 900px){
  .flist{ grid-template-columns:1fr; }
}
@media (max-width: 620px){
  .figs{ grid-template-columns:1fr; gap:14px; }
  .gifwrap{ gap:24px; }
  .gifwrap .shot{ max-width:100%; padding:7px; border-radius:18px; }
  .gifwrap .shot img{ width:100%; height:auto; }
  .fgroup > h3::after{ display:none; }
}

/* ---- the hero is dark now, so everything in it has to be ------------
   It was a near-white radial gradient with dark type. Putting the brand
   gradient behind it without touching the type left a navy headline on a
   navy ground - legible in a thumbnail, unreadable on a screen. */
.hero h1{ color:#fff; }
.hero .lead{ color:rgba(255,255,255,.88); }
.hero .pill{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28);
  color:rgba(255,255,255,.92); }
.hero .btn-g{ background:#fff; color:var(--deep); border-color:transparent; }
.hero .btn-g:hover{ background:#eaf3fb; }

/* ==================================================== colour, second pass
   Review: below the hero the page ran white, grey, white, grey and read as
   dull — the cyan was there but only ever as 12px eyebrow text and a 44px
   rule. Colour that small is decoration. This pass gives it three whole
   grounds instead, so the page has a rhythm you can see from across a desk:

       hero (deep)  →  white  →  tint  →  white  →  deep  →  tint  →  deep

   The rule is unchanged: cyan means "this is live". It is now allowed to be
   the ground under the numbers rather than a line beside them. */
:root{
  --deep-1:#07182a;        /* the dark ground */
  --deep-2:#0d3050;
  --cyan-hi:#3fd8ef;       /* cyan bright enough to read on the dark ground */
  --tint:#f0fafd;          /* a pale cyan wash, in place of the grey one */
  --tint-line:#d7eef5;
}

/* the pale sections stop being grey */
.sec.soft, .sec.tint{ background:var(--tint);
  border-top:1px solid var(--tint-line); border-bottom:1px solid var(--tint-line); }

/* --- the dark ground -------------------------------------------------- */
.sec.deep{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(160deg,var(--deep-1) 0%,var(--deep-2) 62%,#12456e 100%); }
/* The bloom is what makes the dark ground feel lit rather than flat, but it
   also lightens the corner the right-hand figure card sits in — which is the
   ground every contrast check on this section has to be run against, not the
   navy anyone would eyeball. At .30 the citation lines came out at 2.0:1.
   Measured, then set to .22 with the type lifted to match. */
.sec.deep::after{ content:""; position:absolute; inset:-40% -10% auto auto;
  width:72%; height:180%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(11,179,207,.22),rgba(11,179,207,0)); }
.sec.deep > *{ position:relative; z-index:1; }
.sec.deep h2, .sec.deep h3{ color:#fff; }
.sec.deep .eyebrow{ color:#7fe6f8; }
.sec.deep .sec-head p, .sec.deep p{ color:#d5e4ef; }
.sec.deep .sec-head h2::after{ background:linear-gradient(90deg,var(--cyan-hi),rgba(63,216,239,0)); width:64px; }
/* Links only. Written as `.sec.deep a` it also beat .btn-c on specificity and
   painted the primary button's label cyan on cyan — invisible, and only caught
   by looking at the render. */
.sec.deep a:not(.btn){ color:var(--cyan-hi); }

/* the three figures, on the dark ground where they can carry a section */
.sec.deep .figs{ gap:22px; }
.sec.deep .fig{ background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.13);
  border-left:3px solid var(--cyan); backdrop-filter:blur(2px); padding:24px 24px 22px; }
.sec.deep .fig b{ color:#7fe6f8; font-size:38px; }
.sec.deep .fig span{ color:#e2edf5; font-size:15px; }
.sec.deep .fig cite{ color:#cde0ea; }

/* --- a section head that does not leave half the row empty ------------- */
@media (min-width: 1000px){
  .sec-head.split{ max-width:none; display:grid; gap:46px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
  /* Tops aligned, not bottoms. Bottom alignment left the paragraph floating at
     mid-height beside a two-line heading, which read as a mistake. */
  .sec-head.split p{ margin-top:0; }
  .sec-head.split > div:last-child > p:first-child{ margin-top:0; }
}
.sec-head.split h2{ margin-bottom:0; }

/* --- the screenshots sit in the palette rather than on top of it ------- */
.glow{ position:relative; }
/* The bloom bleeds vertically only. Bleeding sideways as well looked better
   and made the page scroll horizontally at 390px — a pseudo-element is not
   something an element-by-element overflow check can see, so it cost a while
   to find. Vertical bleed is free. */
.glow::before{ content:""; position:absolute; inset:-10% 0; border-radius:26px;
  pointer-events:none; z-index:0;
  background:radial-gradient(72% 66% at 50% 45%,rgba(11,179,207,.26),rgba(11,179,207,0) 72%); }
.glow > *{ position:relative; z-index:1; }

/* --- who it is for: named roles, not adjectives ------------------------ */
.roles{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.roles span{ font-family:Chivo,sans-serif; font-size:14px; font-weight:600;
  color:var(--deep-2); background:#fff; border:1px solid var(--tint-line);
  border-radius:999px; padding:8px 15px; }
.sec.deep .roles span{ color:#eaf7fb; background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16); }

/* --- the closing call to action, on the dark ground -------------------- */
.sec.deep .cta{ background:transparent; border:0; padding:0; }
.sec.deep .cta h2{ font-size:clamp(26px,3vw,36px); }
.btn-c{ background:var(--cta-cyan); color:#032029; border-color:var(--cta-cyan);
  font-weight:700; }
.btn-c:hover{ background:var(--cyan-hi); border-color:var(--cyan-hi); }

/* the footer joins the cyan family rather than staying the old grey */
footer.site{ background:var(--tint); border-top:1px solid var(--tint-line); }

/* the active nav item takes the live colour too */
.nav a.link.on{ border-bottom-color:var(--cyan); }

/* --- the four inner pages get the same deep opening as the home page ----
   Without this the site had one coloured page and four that began on white,
   which read as four different sites. Same gradient, shallower, and the type
   lifted to the values measured against the bloom. */
.pagehead{ position:relative; overflow:hidden; border-bottom:0;
  background:linear-gradient(160deg,var(--deep-1) 0%,var(--deep-2) 58%,#134a76 100%); }
.pagehead::after{ content:""; position:absolute; inset:-60% -8% auto auto;
  width:62%; height:220%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(11,179,207,.22),rgba(11,179,207,0)); }
.pagehead .in{ position:relative; z-index:1; }
.pagehead .eyebrow{ color:#7fe6f8; }
.pagehead h1{ color:#fff; }
.pagehead p{ color:#d5e4ef; }