:root { --display: Georgia, "Times New Roman", serif; --body: "Trebuchet MS", Verdana, sans-serif; }
body { font-family: var(--body); }
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); }
.brand { font-family: var(--display); }
.site-header .topbar { min-height: 78px; }
.site-header nav { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.hero { padding: 22px 0 60px; }
.hero-grid { align-items: end; display: grid; gap: 42px; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); }
.hero h1 { font-size: clamp(2.7rem, 5vw, 4.5rem); max-width: 13ch; }
.lede { color: var(--muted); font-size: 1.08rem; max-width: 60ch; }
.hero-art { min-height: 300px; overflow: hidden; position: relative; }
.hero-art::before, .hero-art::after { content: ""; position: absolute; }
.section-head { align-items: end; display: flex; gap: 22px; justify-content: space-between; margin-bottom: 26px; }
.section-kicker { color: var(--muted); font-family: var(--body); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.topic-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.topic { border-top: 4px solid var(--accent); padding: 20px 0 0; }
.topic p, .callout p { color: var(--muted); font-size: .94rem; }
.number { color: var(--accent); display: block; font-size: .72rem; font-weight: 800; letter-spacing: .11em; margin-bottom: 11px; }
.band { margin-top: 72px; padding: 42px 0; }
.split { display: grid; gap: 36px; grid-template-columns: .8fr 1.2fr; }
.callout { border-left: 4px solid var(--accent); padding: 4px 0 4px 24px; }
.site-footer { border-top: 1px solid var(--line); }

.workforce { --ink: #172d35; --muted: #52666b; --canvas: #f5f5ef; --surface: #fcfcf7; --line: #d9ddd3; --accent: #1d6a68; }
.workforce .hero-art { background: #173a3d; border-radius: 4px; }
.workforce .hero-art::before { background: repeating-linear-gradient(90deg, transparent 0 42px, rgba(255,255,255,.12) 43px 44px), repeating-linear-gradient(0deg, transparent 0 42px, rgba(255,255,255,.12) 43px 44px); inset: 24px; }
.workforce .hero-art::after { background: linear-gradient(90deg, #b6d8c6 0 28%, #e8c275 28% 53%, #68a5a1 53% 76%, #f4f1dd 76%); bottom: 44px; height: 82px; left: 38px; right: 38px; clip-path: polygon(0 72%, 18% 45%, 34% 58%, 51% 18%, 68% 35%, 84% 5%, 100% 25%, 100% 100%, 0 100%); }
.workforce .topic { background: rgba(255,255,255,.65); padding: 22px; }
.workforce .band { background: #deeee8; }

.filetransfer { --ink: #252a38; --muted: #5b6474; --canvas: #f7f8fc; --surface: #fff; --line: #dce1ec; --accent: #3758a4; }
.filetransfer .site-header { border-top: 5px solid var(--accent); }
.filetransfer .hero { border-bottom: 1px solid var(--line); }
.filetransfer .hero-art { background: #e8edf9; border: 1px solid #cbd5ed; border-radius: 7px; }
.filetransfer .hero-art::before { background: repeating-linear-gradient(0deg, rgba(55,88,164,.16) 0 1px, transparent 1px 31px); inset: 26px 26px 26px 118px; }
.filetransfer .hero-art::after { background: #fff; border: 1px solid #cbd5ed; box-shadow: 13px 13px 0 #b9c8ee; height: 192px; left: 46px; top: 43px; width: 132px; }
.filetransfer .topic-grid { grid-template-columns: 1fr 1fr; }
.filetransfer .topic { border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 4px; padding: 24px; }
.filetransfer .topic:last-child { grid-column: 1 / -1; }
.filetransfer .band { background: #fff; border: 1px solid var(--line); padding: 38px; }

.videonet { --ink: #18212e; --muted: #5a6370; --canvas: #eef1f3; --surface: #fff; --line: #d4d9df; --accent: #bf4a3a; }
.videonet .brand { font-family: var(--body); font-weight: 900; }
.videonet .hero-grid { grid-template-columns: .95fr 1.05fr; }
.videonet .hero-art { background: #212a36; }
.videonet .hero-art::before { background: linear-gradient(140deg, transparent 0 46%, rgba(255,255,255,.16) 46.5% 47%, transparent 47.5%), repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 72px); inset: 0; }
.videonet .hero-art::after { border: 10px solid #f0aa48; border-radius: 50%; box-shadow: 0 0 0 13px #bf4a3a, 0 0 0 25px #f0aa48; height: 88px; left: calc(50% - 44px); top: calc(50% - 44px); width: 88px; }
.videonet .band { background: #202a36; color: #fff; }
.videonet .band p, .videonet .band .section-kicker { color: #cfd6dc; }

.instant { --ink: #2f2530; --muted: #675b69; --canvas: #fbf7f3; --surface: #fffdfb; --line: #e4dad3; --accent: #9a4756; }
.instant .site-header { background: #fffaf5; }
.instant .hero { background: linear-gradient(105deg, #fffaf5 0 67%, #f3ddd5 67%); margin: -68px 0 0; padding: 90px max(24px, calc((100vw - 1080px) / 2)) 70px; }
.instant .hero-art { min-height: 330px; }
.instant .hero-art::before { background: #9a4756; border-radius: 50% 50% 0 0; bottom: 0; height: 255px; left: 30%; width: 46%; }
.instant .hero-art::after { background: #efb77e; border-radius: 50%; box-shadow: -118px 76px 0 -28px #e6c9bb, 124px 74px 0 -31px #c37d73; height: 106px; left: calc(50% - 53px); top: 63px; width: 106px; }
.instant .topic { border-top: 0; border-bottom: 1px solid var(--line); padding: 0 0 22px; }
.instant .band { background: #f5e3dc; }

@media (max-width: 720px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .hero-art { min-height: 210px; }
  .topic-grid, .filetransfer .topic-grid { grid-template-columns: 1fr; }
  .filetransfer .topic:last-child { grid-column: auto; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .instant .hero { margin-top: -42px; padding: 64px 24px 48px; }
}