/* Switchboard — financial services segment pages. Used by /financial-services (the hub) and the six segment pages under it. These pages are deliberately templated: identical section order and identical markup, with only the copy, the accent colour, and the hero illustration changing per segment. That consistency is the point. A reader who lands on two of them should recognise the second immediately, and an answer engine that reads all seven should see one coherent shape. Everything here builds on the existing tokens in site.css (--bg, --cream, --ink, --muted, --line, --blue, --pad, --container, --ease) and reuses the .segs / .caps / .controls components from finserve.css rather than redefining them. Only the sections that don't exist anywhere else live here. Per-segment accent: each page sets --seg-accent and --seg-accent-soft on the element. Every tinted surface below reads those two variables, so recolouring a whole page is a two-line change. */ body[data-segment] { --seg-accent: var(--blue-light); --seg-accent-soft: #eef4ff; } body[data-segment] { /* --seg-accent-deep is the only one of the three that survives on small marks: the pastels vanish under 12px type. Every value below clears 4.5:1 against the --bg cream, checked rather than eyeballed, because the "Built for" label that uses it is 10.5px uppercase. */ --seg-accent-deep: #2866ce; } /* These MUST agree with the segment's icon colour in the home page .segs grid, in the nav dropdown chips (styles/nav.css) and in the "Also in financial services" cards (.segnext__card--* below). A segment has one colour; a visitor who clicks a green icon must land on a green page. They disagreed until now — insurance, real estate, investment and payments each wore one hue in the icon systems and a different one on their own page, which was invisible while the icon was a 9px dot and glaring once the hero art was redrawn around the accent. Change all four places together. */ body[data-segment="lending"] { --seg-accent: #c6dbff; --seg-accent-soft: #eff5ff; --seg-accent-deep: #2866ce; } body[data-segment="insurance"] { --seg-accent: #fcccbf; --seg-accent-soft: #fff4ef; --seg-accent-deep: #b4501f; } body[data-segment="real-estate"]{ --seg-accent: #caf0be; --seg-accent-soft: #f0faec; --seg-accent-deep: #3a7a2c; } /* Yellow's only dark relatives are gold, olive and brown. The first attempt at this pulled the chroma down to get away from metallic gold, and landed on #6d5324: hue 39 at 50% saturation, which is precisely where a warm hue turns muddy brown. Same hue at full chroma instead. It reads as dark gold rather than mud, and it measures 5.38:1 on --cream, the tightest of the four grounds it sits on. Olive (#6f6412) and mustard (#7e6100) both clear contrast too but read green-ish at headline size; burnt amber (#95560a) collides with insurance's #b4501f, which this has to stay clear of so the two warm segments remain distinct. */ body[data-segment="investment"] { --seg-accent: #ffeba1; --seg-accent-soft: #fffae4; --seg-accent-deep: #8a5a00; } body[data-segment="payments"] { --seg-accent: #ddd4ff; --seg-accent-soft: #f4f1ff; --seg-accent-deep: #6b52c9; } body[data-segment="payroll"] { --seg-accent: #ffdff4; --seg-accent-soft: #fff5fb; --seg-accent-deep: #ac3c85; } body[data-segment="hub"] { --seg-accent: #c6dbff; --seg-accent-soft: #eff5ff; --seg-accent-deep: #2866ce; } /* Solutions-era landers. Each industry and function lander wears the same pastel its row wears in the nav dropdown and the homepage band (see styles/nav.css and styles/solutions.css — keep all three in step). Deep partners follow the segment convention above; legal's teal gets #1f7a6d, measured comfortably past AA on the cream background. */ body[data-segment="logistics"] { --seg-accent: #ffeba1; --seg-accent-soft: #fffae4; --seg-accent-deep: #8a5a00; } body[data-segment="real-estate-construction"]{ --seg-accent: #caf0be; --seg-accent-soft: #f0faec; --seg-accent-deep: #3a7a2c; } body[data-segment="professional-services"] { --seg-accent: #ddd4ff; --seg-accent-soft: #f4f1ff; --seg-accent-deep: #6b52c9; } body[data-segment="legal"] { --seg-accent: #bfe8e0; --seg-accent-soft: #effaf7; --seg-accent-deep: #1f7a6d; } body[data-segment="business-operations"] { --seg-accent: #c6dbff; --seg-accent-soft: #eff5ff; --seg-accent-deep: #2866ce; } body[data-segment="customer-support"] { --seg-accent: #fcccbf; --seg-accent-soft: #fff4ef; --seg-accent-deep: #b4501f; } body[data-segment="hr"] { --seg-accent: #ffdff4; --seg-accent-soft: #fff5fb; --seg-accent-deep: #ac3c85; } body[data-segment="finance"] { --seg-accent: #caf0be; --seg-accent-soft: #f0faec; --seg-accent-deep: #3a7a2c; } body[data-segment="sales-marketing"] { --seg-accent: #ffeba1; --seg-accent-soft: #fffae4; --seg-accent-deep: #8a5a00; } body[data-segment="compliance-audit"] { --seg-accent: #ddd4ff; --seg-accent-soft: #f4f1ff; --seg-accent-deep: #6b52c9; } /* Text accents follow the segment too. A yellow page whose eyebrows, headline accents and links were all brand blue read as two unrelated designs stacked on one page. --seg-accent-deep is the saturated member of each triple and is the only one legible at 10.5px, so it carries every accent the pastel cannot. Measured, not eyeballed: all six clear 4.5:1 on --bg, on --cream and on their own --seg-accent-soft (worst case insurance, 4.64:1 on cream). Two deliberate exemptions below: the shared contact CTA, which has its own blue design and appears identically on every page of the site, and the primary button, which stays brand blue so the same action looks the same everywhere. */ body[data-segment] .eyebrow, body[data-segment] .h-accent, body[data-segment] .seghero__title em, body[data-segment] .seglink, body[data-segment] .segnext__note a, body[data-segment] .segfaq__answer a { color: var(--seg-accent-deep); } body[data-segment] .contact .eyebrow, body[data-segment] .contact .h-accent { color: var(--blue); } /* ============================================================ HERO Two columns on desktop: copy left, illustration right. The firm-type chips sit directly under the lead rather than further down the page, because "is this for a firm like mine" is the first question a visitor asks and the answer should not require a scroll. ============================================================ */ .seghero { background: var(--bg); /* Top padding is deliberately small: styles/nav.css already reserves 132px (96px under 720px) on `body:not(:has(#stage))` to clear the floating nav pill, and these pages have no #stage wrapper. Adding a full hero's worth on top of that leaves a dead band under the nav. */ padding: 52px var(--pad) 90px; border-bottom: 1px solid var(--line); } .seghero__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; align-items: center; } .seghero__crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 20px; } .seghero__crumb a { color: var(--muted); text-decoration: none; } .seghero__crumb a:hover { color: var(--ink); text-decoration: underline; } .seghero__title { font-size: clamp(38px, 4.2vw, 58px); line-height: 1.03; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 22px; /* Same treatment the case-study hero uses. Without it these headlines strand their last word on a line of its own, which reads as a mistake rather than emphasis. */ text-wrap: balance; } .seghero__title em { font-style: normal; color: var(--blue); } .seghero__lead { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 30em; margin: 0 0 28px; } /* Firm types. The full list, always visible, never behind a hover, because this is the page's answer to "I'm in a corner of this segment nobody ever names." Set as running text rather than a wall of pills: twelve pills read as twelve objects competing for attention, while the same twelve items flowing across three lines read as one calm block you scan in a second. The accent hairline and label anchor it so it doesn't look like a run-on sentence, and the page keeps its colour identity without twelve tinted boxes fighting the hero. Separated by whitespace, not punctuation: any separator character is glued to one side of an item, so it strands at the end (or the start) of every wrapped line. At this size the gap alone is unambiguous. */ .seghero__types { margin: 0 0 30px; padding: 18px 0 0; border-top: 1px solid rgba(0, 0, 0, 0.12); max-width: 36em; } .seghero__types-label { display: block; margin-bottom: 9px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--seg-accent-deep); } .seghero__types ul { margin: 0; padding: 0; list-style: none; } .seghero__types li { display: inline-block; white-space: nowrap; font-size: 15.5px; line-height: 1.95; font-weight: 450; color: rgba(0, 0, 0, 0.84); } /* An accent bead between entries. The plain list read as a data dump because nothing paced it; the bead gives the row a rhythm and ties it to the per-segment colour without boxing every term in a pill. Margins are symmetric so the bead sits centred between two entries rather than glued to one; a wrapped line therefore ends on a bead, which reads as "continues". */ .seghero__types li::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--seg-accent-deep); opacity: 0.45; vertical-align: middle; margin: -1px 15px 0 15px; } .seghero__types li:last-child::after { display: none; } .seghero__art { border: 1.5px solid var(--ink); border-radius: 20px; background: var(--seg-accent-soft); padding: 30px; box-shadow: 10px 10px 0 -1px var(--ink); } .seghero__art svg { width: 100%; height: auto; display: block; } /* ------------------------------------------------------------ Hero art motion kit. Every segment hero draws from this same small set of loops, so seven different compositions still move like one family, and one media query turns all of it off. CSS animation rather than SMIL precisely so that prefers-reduced-motion can kill it — SMIL does not honour the setting. All loops are slow, low-amplitude and infinite: the art should feel alive when you glance back at it, never animated at you while you read. Stagger a series by setting --sa-delay on each element. .sa-flow dashes marching along a connector (needs no dasharray of its own) .sa-pulse gentle scale breath, for a node the eye should return to .sa-fade opacity swell, for packets/rows arriving in sequence .sa-drift small vertical float, for stacked or hanging objects .sa-sweep small horizontal travel, for something moving down a lane ------------------------------------------------------------ */ .sa-flow, .sa-pulse, .sa-fade, .sa-drift, .sa-sweep { animation-delay: var(--sa-delay, 0s); animation-iteration-count: infinite; } /* fill-box keeps transforms centred on the shape itself rather than the SVG origin, which is what makes a 1.05 scale read as a breath. */ .sa-pulse, .sa-drift, .sa-sweep { transform-box: fill-box; transform-origin: center; will-change: transform; } .sa-flow { stroke-dasharray: 5 5; animation-name: sa-flow; animation-duration: 2.4s; animation-timing-function: linear; } .sa-pulse { animation-name: sa-pulse; animation-duration: 3.6s; animation-timing-function: var(--ease); } .sa-fade { animation-name: sa-fade; animation-duration: 4.2s; animation-timing-function: var(--ease); } .sa-drift { animation-name: sa-drift; animation-duration: 5.4s; animation-timing-function: var(--ease); } .sa-sweep { animation-name: sa-sweep; animation-duration: 4.8s; animation-timing-function: var(--ease); } /* .sa-travel — an element that actually traverses a path, not just breathes in place: the truck driving its route, the deal moving stage to stage, a packet running a switchboard cord. The path is supplied inline per element via style="offset-path: path('…')" (coordinates in the same viewBox space); the class only owns the timing. Fades in and out at the ends so the loop reads as traffic, not a rubber band. --sa-duration tunes speed per lane. */ .sa-travel { animation-name: sa-travel; animation-duration: var(--sa-duration, 6s); animation-timing-function: linear; animation-delay: var(--sa-delay, 0s); animation-iteration-count: infinite; offset-rotate: 0deg; } @keyframes sa-travel { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } @keyframes sa-flow { to { stroke-dashoffset: -20; } } @keyframes sa-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } @keyframes sa-fade { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } @keyframes sa-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5px); } } @keyframes sa-sweep { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } } @media (prefers-reduced-motion: reduce) { .sa-flow, .sa-pulse, .sa-fade, .sa-drift, .sa-sweep, .sa-travel { animation: none; } /* A traveller parked at 0% would sit at its path start; leave it visible there so the composition still reads complete. */ .sa-travel { offset-distance: 12%; opacity: 1; } /* Without motion the dashes would read as a broken line, and the faded packets as a rendering fault. Settle both into the calm end state. */ .sa-flow { stroke-dasharray: none; } .sa-fade { opacity: 1; } } /* The scroll cue that replaced the hero's two buttons. Deliberately not a link: it says "keep going", and the page's actual calls to action live in the CTA band at the bottom. Grey rather than the segment accent so it never competes with the eyebrow above it. */ .seghero__more { display: flex; align-items: center; gap: 9px; color: #8a8a8c; } .seghero__more span { font-size: 14px; line-height: 17px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .seghero__more svg { display: block; } /* ------------------------------------------------------------ Hero visual motion kit — one at a time, versus all at once. Every lander's hero art makes the same argument in its own material: on the left one person working the record serially, on the right one agent connected to several parts of it at once, over a shared substrate along the bottom. The composition is per page. The motion is not — these loops are the entire vocabulary, so twelve different pictures still move like one family and a single media query stops all of them. .hv-walk the human group stepping along the substrate. Distances are multiples of the 50px item pitch, so it always lands on an item centre; --3 and --5 vary how far it gets. .hv-drift marching ants on the human's dashed connector .hv-breathe the ring behind the agent, a slow swell .hv-dot a pulse riding a link. The path is supplied per element as style="offset-path:path('…')" and must match the drawn path exactly; --hv-dur tunes each lane so the fan never syncs. .hv-cyc1/2/3 three stacked layers dissolving through a triple. The fades overlap, so exactly one word is ever legible and the change reads as a dissolve rather than a switch. .hv-nudge the down arrow under the lead ------------------------------------------------------------ */ .hv-nudge { animation: hv-nudge 2.8s var(--ease) infinite; } .hv-drift { animation: hv-drift 5s linear infinite; } .hv-breathe { transform-box: fill-box; transform-origin: center; animation: hv-breathe 7s var(--ease) infinite; } /* The step is a vector rather than a distance, so the same three keyframe blocks carry a row walked left to right, a queue walked top to bottom, and a rule line dropping pair by pair down a balance. Set --hv-x / --hv-y to that composition's item pitch and every dwell lands on an item centre by construction. */ .hv-walk { --hv-x: 50px; --hv-y: 0px; animation: hv-walk4 26s var(--ease) infinite; } .hv-walk--3 { animation-name: hv-walk3; animation-duration: 21s; } .hv-walk--5 { animation-name: hv-walk5; animation-duration: 31s; } .hv-dot { offset-rotate: 0deg; animation: hv-ride var(--hv-dur, 5s) linear infinite; } .hv-cyc1, .hv-cyc2, .hv-cyc3 { animation-duration: 9s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } /* A mark that draws itself in, holds, and resets: a tick landing, a route completing, a signature going down. Give the element --hv-len equal to its path length (getTotalLength, rounded up) and it needs nothing else. Base state is fully drawn, so killing the animation leaves the finished mark rather than a gap. */ .hv-draw { stroke-dasharray: var(--hv-len, 100); stroke-dashoffset: 0; animation: hv-draw var(--hv-dur, 7s) var(--ease) infinite; } /* A meter filling. Starts at 6% rather than 0 so the bar is never absent, and rests full when motion is off. */ .hv-fill { transform-box: fill-box; transform-origin: left center; animation: hv-fill var(--hv-dur, 6.5s) var(--ease) infinite; } .hv-cyc1 { animation-name: hv-cyc1; } /* The second and third words rest hidden so that killing the animation leaves one legible word rather than three stacked on each other. */ .hv-cyc2 { animation-name: hv-cyc2; opacity: 0; } .hv-cyc3 { animation-name: hv-cyc3; opacity: 0; } @keyframes hv-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } @keyframes hv-drift { to { stroke-dashoffset: -24; } } @keyframes hv-breathe { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.08); opacity: 0.12; } } @keyframes hv-ride { 0% { offset-distance: 0%; opacity: 0; } 5% { opacity: 1; } 93% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } @keyframes hv-walk3 { 0%, 14% { transform: translate(0, 0); } 20%, 34% { transform: translate(var(--hv-x), var(--hv-y)); } 40%, 54% { transform: translate(calc(var(--hv-x) * 2), calc(var(--hv-y) * 2)); } 60%, 74% { transform: translate(var(--hv-x), var(--hv-y)); } 80%, 100% { transform: translate(0, 0); } } @keyframes hv-walk4 { 0%, 10% { transform: translate(0, 0); } 16%, 26% { transform: translate(var(--hv-x), var(--hv-y)); } 32%, 42% { transform: translate(calc(var(--hv-x) * 2), calc(var(--hv-y) * 2)); } 48%, 58% { transform: translate(calc(var(--hv-x) * 3), calc(var(--hv-y) * 3)); } 64%, 74% { transform: translate(calc(var(--hv-x) * 2), calc(var(--hv-y) * 2)); } 80%, 90% { transform: translate(var(--hv-x), var(--hv-y)); } 96%, 100% { transform: translate(0, 0); } } @keyframes hv-walk5 { 0%, 8% { transform: translate(0, 0); } 11%, 19% { transform: translate(var(--hv-x), var(--hv-y)); } 22%, 30% { transform: translate(calc(var(--hv-x) * 2), calc(var(--hv-y) * 2)); } 33%, 41% { transform: translate(calc(var(--hv-x) * 3), calc(var(--hv-y) * 3)); } 44%, 52% { transform: translate(calc(var(--hv-x) * 4), calc(var(--hv-y) * 4)); } 55%, 63% { transform: translate(calc(var(--hv-x) * 3), calc(var(--hv-y) * 3)); } 66%, 74% { transform: translate(calc(var(--hv-x) * 2), calc(var(--hv-y) * 2)); } 77%, 85% { transform: translate(var(--hv-x), var(--hv-y)); } 88%, 100% { transform: translate(0, 0); } } @keyframes hv-draw { 0% { stroke-dashoffset: var(--hv-len, 100); } 38%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: var(--hv-len, 100); } } @keyframes hv-fill { 0% { transform: scaleX(0.06); } 46%, 86% { transform: scaleX(1); } 100% { transform: scaleX(0.06); } } @keyframes hv-cyc1 { 0%, 25% { opacity: 1; } 40%, 85% { opacity: 0; } 100% { opacity: 1; } } @keyframes hv-cyc2 { 0%, 25% { opacity: 0; } 40%, 58% { opacity: 1; } 73%, 100% { opacity: 0; } } @keyframes hv-cyc3 { 0%, 58% { opacity: 0; } 73%, 85% { opacity: 1; } 100% { opacity: 0; } } /* Scoped to the hero rather than declared universally: this is a shared site stylesheet, and a bare `*` here would stop every animation on every page that loads it. Pseudo-elements need naming separately — `.seghero *` matches elements only. */ @media (prefers-reduced-motion: reduce) { .seghero, .seghero *, .seghero::before, .seghero::after, .seghero *::before, .seghero *::after { animation: none !important; } /* Riders parked at 0% would pile up on the agent. Set them down the link instead, so the still image still reads as work in flight. */ .seghero .hv-dot { offset-distance: 62%; opacity: 1; } } /* ============================================================ THE CHALLENGE — the bento that shows the three workarounds Replaces the old three-motif "operating patterns" grid. One idea, repeated in every artifact on the page: a before/after in a single image. Zone one is today — the segment's soft accent under a dot grid, with the real artifact (a sheet, a thread, a document set) sitting on it in a white card with a hard ink shadow. Zone two is the segment accent, and it says what an agent does with the same material. The artifacts deliberately run past the right edge of their panel. A screenshot cropped by its frame reads as a real screen; one that fits neatly inside reads as a drawing of one. The panels clip, the artifacts overflow, and that is the intended result — don't "fix" it. Layout is the same on all twelve landers and lives here. Only the copy and the artifact contents change per page, so per-page markup stays content and this file carries the geometry. ============================================================ */ .segpat { background: var(--cream); padding: 100px var(--pad); } /* The head runs slightly wider than the site default: the lead has to preview all three cards in the industry's own nouns, and 540px broke it into five short lines. */ .segpat .section-head { max-width: 700px; } .segpat .section-head .lead { max-width: 660px; } .chal { max-width: var(--container); margin: 44px auto 0; display: grid; /* The first problem carries the artifact everyone recognises, so it gets the wider column and the full height of the row. */ grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 18px; } .chal__main, .chal__card { background: #fff; border: 1.5px solid var(--ink); border-radius: 18px; overflow: hidden; /* No hover state anywhere in this section. These cards aren't links, and the site's -4px card pop makes anything wearing it read as a button. */ } .chal__main { display: flex; flex-direction: column; } .chal__side { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; min-width: 0; } .chal__card { display: grid; grid-template-columns: minmax(0, 1fr) 238px; min-height: 0; } /* ------- card copy ------- */ .chal__copy { padding: 26px 32px 28px; } .chal__copy--sm { padding: 26px 26px 24px; display: flex; flex-direction: column; min-width: 0; } .chal__pill { display: inline-flex; align-items: center; align-self: flex-start; border: 1.5px solid var(--ink); border-radius: 999px; padding: 6px 13px; font: 500 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .chal__pill b { font-weight: 600; color: var(--seg-accent-deep); padding-right: 9px; margin-right: 9px; border-right: 1px solid rgba(0, 0, 0, 0.15); } .chal__copy h3 { font: 500 29px/1.12 "Neue Montreal", system-ui, sans-serif; letter-spacing: -0.018em; margin: 11px 0 10px; max-width: 22em; } .chal__copy p { font: 400 17px/1.5 "Neue Montreal", system-ui, sans-serif; color: var(--muted); margin: 0; max-width: 38em; } .chal__copy--sm h3 { font-size: 22px; line-height: 1.18; letter-spacing: -0.016em; margin: 11px 0 9px; max-width: none; } .chal__copy--sm p { font-size: 15.5px; max-width: none; } /* ------- zone one: today ------- */ .chal-zone { position: relative; padding: 32px 0 28px 34px; background-color: var(--seg-accent-soft); background-image: radial-gradient(rgba(0, 0, 0, 0.13) 1px, transparent 1px); background-size: 14px 14px; background-position: -1px -1px; overflow: hidden; } /* The main card owns the taller of the two columns, so its dot grid takes the slack rather than stretching the band or the copy. */ .chal__main .chal-zone { flex: 1; } .chal__panel { border-left: 1.5px solid var(--ink); display: flex; flex-direction: column; min-width: 0; } .chal-zone--sm { flex: 1; padding: 20px 0 18px 18px; } .chal-zone__q { display: block; font: 400 11px/1.35 "Neue Montreal", system-ui, sans-serif; color: #0f0f10; margin-bottom: 9px; width: calc(100% - 22px); } /* ------- the artifact window ------- */ .chal-win { position: relative; background: #fff; border: 1.5px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 7px 7px 0 -1px var(--ink); width: calc(100% - 46px); } .chal-win__bar { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1.5px solid var(--ink); background: var(--cream); } .chal-win__file { font: 400 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #0f0f10; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chal-win__who { margin-left: auto; display: flex; align-items: center; gap: 6px; } .chal-win__who i { width: 17px; height: 17px; border-radius: 50%; border: 1.3px solid var(--ink); background: var(--chal-tag, #fff); display: grid; place-items: center; font: 500 7.5px/1 "Neue Montreal", system-ui, sans-serif; font-style: normal; } .chal-win__who em { font: 400 10.5px/1 "Neue Montreal", system-ui, sans-serif; font-style: normal; color: #8a8a8c; white-space: nowrap; } /* ------- the table artifact (sheet / queue / reconciliation) ------- */ .chal-tab { width: 100%; table-layout: fixed; border-collapse: collapse; } .chal-tab th, .chal-tab td { text-align: left; padding: 11px 13px; font: 400 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #0f0f10; border-bottom: 1px solid rgba(0, 0, 0, 0.1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chal-tab th { padding: 9px 13px; font: 500 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45); border-bottom: 1px solid rgba(0, 0, 0, 0.14); } .chal-tab th + th, .chal-tab td + td { border-left: 1px solid rgba(0, 0, 0, 0.14); } .chal-tab tbody tr:last-child td { border-bottom: 0; } /* Sentence-shaped cells drop the mono face; figures keep it and align. */ .chal-tab .is-txt { font-family: "Neue Montreal", system-ui, sans-serif; } .chal-tab .is-num { font-variant-numeric: tabular-nums; } .chal-tab .is-mute { color: #8a8a8c; } .chal-tab .is-tag { padding: 9px 13px; overflow: visible; } /* One row is the one nobody can answer. Highlight yellow, never the accent: the accent already means "with AI" everywhere else in this section. */ .chal-tab .is-hot td { background: #ffeba1; } /* Sub-segment tags. Every reader should find their own row in the queue, and the tag is what makes that land in under a second. The pastels are the fixed set from the palette, matched to each sub-segment's own colour elsewhere on the site, and always carry the hairline ink outline. */ .chal-tag { display: inline-flex; align-items: center; border: 1.3px solid var(--ink); border-radius: 999px; background: var(--chal-tag, #fff); padding: 3px 8px; font: 500 8.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .chal-tag--blue { --chal-tag: #c6dbff; } .chal-tag--peach { --chal-tag: #fcccbf; } .chal-tag--yellow { --chal-tag: #ffeba1; } .chal-tag--green { --chal-tag: #caf0be; } .chal-tag--lilac { --chal-tag: #ddd4ff; } .chal-tag--teal { --chal-tag: #bfe8e0; } .chal-tag--pink { --chal-tag: #ffdff4; } .chal-tag--salmon { --chal-tag: #ffbcbc; } /* Day counter that ticks over while you watch. Two stacked lines in a one-line window, so nothing ever animates to empty. */ .chal-flip { display: block; height: 14px; overflow: hidden; } .chal-flip b { display: block; height: 14px; font: 400 11.5px/14px ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; animation: sb-flip 9s var(--ease) infinite; } .chal-flip b + b { animation: none; } /* The read-through band. Travel is expressed in per cent of the region it scans, so adding or removing a row can't strand it mid-table. */ .chal-scan { position: absolute; left: 0; right: 0; /* Below the title bar and the header row, both of which are fixed here. */ top: 70px; bottom: 0; overflow: hidden; pointer-events: none; } .chal-scan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 33px; background: color-mix(in srgb, var(--seg-accent-deep) 12%, transparent); border-top: 1.5px solid var(--seg-accent-deep); border-bottom: 1.5px solid var(--seg-accent-deep); animation: sb-read 9s var(--ease) infinite; } /* ------- the thread artifact ------- */ .chal-msg { display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .chal-msg:last-child { border-bottom: 0; } .chal-msg > i { flex: none; width: 19px; height: 19px; border-radius: 50%; border: 1.3px solid var(--ink); background: var(--chal-tag, #fff); display: grid; place-items: center; font: 500 8px/1 "Neue Montreal", system-ui, sans-serif; font-style: normal; } .chal-msg__body { min-width: 0; } .chal-msg__who { display: block; font: 500 8.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45); white-space: nowrap; } .chal-msg__line { display: block; margin-top: 5px; font: 400 11.5px/1.35 "Neue Montreal", system-ui, sans-serif; color: #0f0f10; } .chal-msg--hot { background: #ffeba1; } /* ------- the document-set artifact ------- */ .chal-docs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .chal-docs__doc { padding: 16px 14px 18px; border-left: 1px solid rgba(0, 0, 0, 0.14); min-width: 0; } .chal-docs__doc:first-child { border-left: 0; } .chal-docs__src { display: block; font: 500 8.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45); white-space: nowrap; margin-bottom: 9px; } .chal-docs__f { display: flex; align-items: baseline; gap: 7px; padding: 8px 0; font: 400 11px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; color: #0f0f10; white-space: nowrap; } .chal-docs__f span { font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0, 0, 0, 0.42); } .chal-docs__f strong { font-weight: 500; margin-left: auto; } .chal-docs__f--off { border-radius: 5px; padding: 5px 6px; margin: 0 -6px; animation: sb-flash 9s var(--ease) infinite; } /* ------- the calendar artifact ------- */ .chal-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; padding: 13px; } /* Wider than tall, the way a real month grid is: seven square cells across a 620px window would run four rows deep and swamp the card. */ .chal-cal i { aspect-ratio: 1.7; border: 1.3px solid rgba(0, 0, 0, 0.22); border-radius: 5px; background: #fff; } .chal-cal i.is-done { border-color: var(--ink); background: var(--seg-accent); } .chal-cal i.is-open { border-color: var(--ink); background: #ffeba1; } /* The late one pulses rather than flashing: sb-flash animates the background itself, which would leave the cell reading as empty for half the loop, and an empty cell in a calendar means "nothing due". */ .chal-cal i.is-late { border-color: var(--ink); background: #ffbcbc; animation: sa-pulse 3.2s var(--ease) infinite; } /* ------- lists: chains, checklists, figures, answers ------- */ .chal-list { display: flex; flex-direction: column; gap: 6px; width: calc(100% - 22px); } .chal-list--wide { width: calc(100% - 46px); } .chal-list__row { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--ink); border-radius: 9px; padding: 8px 10px; } .chal-list__k { font: 500 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45); white-space: nowrap; } .chal-list__v { margin-left: auto; font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; } .chal-list__row .chal-tag { margin-left: auto; } .chal-list__row .chal-tag + .chal-tag { margin-left: 0; } .chal-list--fig .chal-list__row { align-items: baseline; padding: 7px 10px; } .chal-list--fig .chal-list__k { letter-spacing: 0.16em; color: rgba(0, 0, 0, 0.5); } .chal-list__row--off { animation: sb-flash 9s var(--ease) infinite; } /* A step that is still waiting on a person. Pulses, never fades out. */ .chal-tag--wait { animation: sa-pulse 3.2s var(--ease) infinite; } .chal-tag--delta { animation: sa-pulse 3.4s var(--ease) infinite; letter-spacing: 0; padding: 2px 6px; } /* Checklist boxes: filled means evidence exists, empty means it doesn't. */ .chal-box { flex: none; width: 13px; height: 13px; border: 1.5px solid var(--ink); border-radius: 4px; background: #fff; } /* A pastel fill alone is not enough to separate done from not-done at 13px, and on the green pages the accent fill all but vanished. The tick carries it; the fill just agrees with the page. */ .chal-box--done { background: var(--seg-accent); -webkit-mask: none; mask: none; position: relative; } .chal-box--done::after { content: ""; position: absolute; inset: 1px; background-color: var(--ink); -webkit-mask: var(--chal-ico) center / 9px 9px no-repeat; mask: var(--chal-ico) center / 9px 9px no-repeat; --chal-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); } /* Same reason as the late calendar cell: solid, pulsing, never empty. */ .chal-box--gap { background: #ffbcbc; animation: sa-pulse 3.2s var(--ease) infinite; } .chal-list__t { font: 400 11px/1.3 "Neue Montreal", system-ui, sans-serif; color: #0f0f10; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------- glyphs ------- Masked so a single sprite can wear the segment accent, the ink, or the salmon inside a dark square without a second copy of the path. */ .chal-ico, .chal-tick { flex: none; display: inline-block; background-color: currentColor; -webkit-mask: var(--chal-ico) center / contain no-repeat; mask: var(--chal-ico) center / contain no-repeat; } .chal-ico { width: 14px; height: 14px; color: var(--ink); } .chal-ico--sheet { --chal-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='2.5'/%3E%3Cpath d='M3.5 9.5h17M9.5 9.5v11'/%3E%3C/svg%3E"); } .chal-ico--mail { --chal-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='M3 7l9 6.5L21 7'/%3E%3C/svg%3E"); } .chal-ico--doc { --chal-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E"); } .chal-ico--cal { --chal-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); } .chal-ico--check { --chal-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16M4 12h16M4 17.5h9'/%3E%3C/svg%3E"); } .chal-tick { width: 9px; height: 9px; color: var(--seg-accent-deep); --chal-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); animation: sb-tick 4.4s var(--ease) infinite; } .chal-tick--lg { width: 13px; height: 13px; animation-delay: .5s; } /* ------- zone two: the agent band on the main card ------- Fixed height with two absolutely positioned layers sharing the slot, so the crossfade can never leave a hole in the card. */ .chal-band { position: relative; height: 117px; background: var(--seg-accent); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); } .chal-band__phase { position: absolute; left: 34px; right: 34px; top: 24px; } .chal-band__phase--a { animation: sb-phase-a 11s var(--ease) infinite; } .chal-band__phase--b { animation: sb-phase-b 11s var(--ease) infinite; } .chal-band__head { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 27px/1 "Neue Montreal", system-ui, sans-serif; letter-spacing: -0.018em; white-space: nowrap; } .chal-band__head::before { content: ""; flex: none; width: 17px; height: 17px; background-color: var(--ink); -webkit-mask: var(--chal-ico) center / contain no-repeat; mask: var(--chal-ico) center / contain no-repeat; } .chal-band__phase--a .chal-band__head { --chal-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/%3E%3C/svg%3E"); } .chal-band__phase--b .chal-band__head { --chal-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 4.5 13.5h6l-1.5 8L18.5 10.5h-6l1.5-8Z'/%3E%3C/svg%3E"); } /* Fourteen units of the same work, twice. The squares carry no text, so they are empty elements here and the stagger comes from :nth-child rather than fourteen inline delays on every one of twelve pages. */ .chal-band__row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; } .chal-band__row i { width: 26px; height: 26px; border: 1.5px solid var(--ink); border-radius: 6px; background: #111; display: grid; place-items: center; animation: sb-throb 2.8s var(--ease) infinite; } .chal-band__row i::before { content: ""; width: 13px; height: 13px; background-color: #ffbcbc; -webkit-mask: var(--chal-person) center / contain no-repeat; mask: var(--chal-person) center / contain no-repeat; } .chal-band__row { --chal-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/%3E%3C/svg%3E"); --chal-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 4.5 13.5h6l-1.5 8L18.5 10.5h-6l1.5-8Z'/%3E%3C/svg%3E"); } .chal-band__row i:nth-child(1) { animation-delay: 0s; } .chal-band__row i:nth-child(2) { animation-delay: .14s; } .chal-band__row i:nth-child(3) { animation-delay: .28s; } .chal-band__row i:nth-child(4) { animation-delay: .42s; } .chal-band__row i:nth-child(5) { animation-delay: .56s; } .chal-band__row i:nth-child(6) { animation-delay: .70s; } .chal-band__row i:nth-child(7) { animation-delay: .84s; } .chal-band__row i:nth-child(8) { animation-delay: .98s; } .chal-band__row i:nth-child(9) { animation-delay: 1.12s; } .chal-band__row i:nth-child(10) { animation-delay: 1.26s; } .chal-band__row i:nth-child(11) { animation-delay: 1.40s; } .chal-band__row i:nth-child(12) { animation-delay: 1.54s; } .chal-band__row i:nth-child(13) { animation-delay: 1.68s; } .chal-band__row i:nth-child(14) { animation-delay: 1.82s; } /* With an agent: the same fourteen units, mostly handled, with four still sitting with a person — scattered through the run, not swept to the end, because that is what the honest version of this picture looks like. */ .chal-band__row--ai i { background: var(--chal-agent, #caf0be); animation-name: sb-sweep; animation-duration: 4.4s; } .chal-band__row--ai i::before { background-color: var(--ink); -webkit-mask-image: var(--chal-bolt); mask-image: var(--chal-bolt); } .chal-band__row--ai i:nth-child(3), .chal-band__row--ai i:nth-child(7), .chal-band__row--ai i:nth-child(10), .chal-band__row--ai i:nth-child(14) { background: var(--ink); animation-name: sa-pulse; animation-duration: 3.2s; } .chal-band__row--ai i:nth-child(3)::before, .chal-band__row--ai i:nth-child(7)::before, .chal-band__row--ai i:nth-child(10)::before, .chal-band__row--ai i:nth-child(14)::before { background-color: #fff; -webkit-mask-image: var(--chal-person); mask-image: var(--chal-person); } .chal-band__row--ai i:nth-child(3) { animation-delay: 0s; } .chal-band__row--ai i:nth-child(7) { animation-delay: 1.1s; } .chal-band__row--ai i:nth-child(10) { animation-delay: 2.1s; } .chal-band__row--ai i:nth-child(14) { animation-delay: .55s; } /* ------- zone two on the supporting cards ------- */ .chal-ai { border-top: 1.5px solid var(--ink); background: var(--seg-accent); padding: 14px 16px 15px; } .chal-ai__label { display: flex; align-items: center; gap: 7px; margin: 0; font: 500 8.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; } .chal-ai__label::before { content: ""; flex: none; width: 11px; height: 11px; background-color: var(--ink); -webkit-mask: var(--chal-ico) center / contain no-repeat; mask: var(--chal-ico) center / contain no-repeat; --chal-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2.5 4.5 13.5h6l-1.5 8L18.5 10.5h-6l1.5-8Z'/%3E%3C/svg%3E"); } .chal-ai__line { font: 400 12px/1.4 "Neue Montreal", system-ui, sans-serif; color: #0f0f10; margin: 9px 0 0; } .chal-ai__chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 1.4px solid var(--ink); background: #fff; border-radius: 999px; padding: 4px 9px; font: 500 8.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; white-space: nowrap; } .chal-ai__row { display: flex; align-items: center; gap: 9px; margin-top: 10px; background: #fff; border: 1.5px solid var(--ink); border-radius: 9px; padding: 8px 10px; } .chal-ai__row .chal-list__k { letter-spacing: 0.16em; color: rgba(0, 0, 0, 0.5); } .chal-ai__row .chal-list__v { font-size: 14px; } /* ------- motion inventory ------- Eight loops, all slow, all low amplitude, and none of them ends on an empty frame. Anything not in this list doesn't move. */ @keyframes sb-read { 0% { top: 0; transform: none; opacity: 0; } 5% { opacity: 1; } 44% { top: 100%; transform: translateY(-100%); opacity: 1; } 56% { top: 100%; transform: translateY(-100%); opacity: 0; } 100% { top: 0; transform: none; opacity: 0; } } @keyframes sb-flip { 0%, 52% { transform: translateY(0); } 62%, 100% { transform: translateY(-14px); } } @keyframes sb-flash { 0%, 46% { background: transparent; } 56%, 84% { background: #ffbcbc; } 100% { background: transparent; } } @keyframes sb-sweep { 0%, 60%, 100% { transform: scale(1); } 12% { transform: scale(1.22); } 30% { transform: scale(1); } } @keyframes sb-throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } } @keyframes sb-tick { 0%, 46% { opacity: 0; transform: scale(0.6); } 58%,100% { opacity: 1; transform: none; } } @keyframes sb-phase-a { 0%, 40% { opacity: 1; transform: none; } 47%, 91% { opacity: 0; transform: translateY(-7px); } 98%, 100% { opacity: 1; transform: none; } } @keyframes sb-phase-b { 0%, 40% { opacity: 0; transform: translateY(7px); } 47%, 91% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(7px); } } /* Reduced motion stops everything in this section. Scoped to .segpat rather than the universal selector the design component used, so it can't reach across the rest of the site from a shared stylesheet. Both band phases would then stack, so phase B is the one that stays: it is the half the section is arguing for. */ @media (prefers-reduced-motion: reduce) { /* `.segpat *` matches elements, not pseudo-elements, and the read-through band is a ::before — it kept travelling under reduced motion until the two pseudo selectors were added. */ .segpat, .segpat *, .segpat::before, .segpat::after, .segpat *::before, .segpat *::after { animation: none !important; } .segpat .chal-band__phase--a { opacity: 0; } .segpat .chal-band__phase--b { opacity: 1; } .segpat .chal-tick { opacity: 1; } .segpat .chal-flip b + b { display: none; } } /* Small aside under the grid: three cards is an edit, not the full list, and saying so costs one quiet line. */ .segpat__foot { max-width: var(--container); margin: 26px auto 0; text-align: center; font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, 0.5); } /* ------- responsive ------- Two beats: the bento becomes one column, then each supporting card drops its artifact panel under its copy. The artifacts are the first thing to go on a phone — they were drawn for a screen wide enough to read a table on, and the headline carries the argument without them. */ /* The squeeze band. Above 1180 the bento is still two columns, but below the 1280 container cap the main card has no slack, so the fixed-percentage table cannot hold its nowrap labels: at 1181 the artifact is 485px wide and nine cells were clipping. Give the artifact back the inset it does not need at these widths and tighten the cell padding a little. Measured, not guessed. */ @media (min-width: 1181px) and (max-width: 1400px) { .chal-zone { padding-left: 20px; } .chal-win { width: calc(100% - 24px); } .chal-tab th, .chal-tab td { padding-left: 10px; padding-right: 10px; } /* Only the data cells shrink. The header has its own 9px uppercase rule and overriding its size here made the header bigger, not smaller. */ .chal-tab td { font-size: 11px; } .chal-win__bar { padding-left: 12px; padding-right: 12px; } } @media (max-width: 1180px) { .chal { grid-template-columns: 1fr; } .chal__side { grid-template-rows: auto auto; } .chal__card { grid-template-columns: minmax(0, 1fr) 260px; } /* One column makes the supporting cards wide, and a short headline pinned to the top of a 250px card leaves a hole under it. Centre it instead. */ .chal__copy--sm { justify-content: center; } .chal-band__head { font-size: 24px; } } @media (max-width: 860px) { .chal__card { grid-template-columns: 1fr; } .chal__panel { border-left: 0; border-top: 1.5px solid var(--ink); } .chal-zone--sm { padding: 20px 0 18px 22px; } .chal-band { height: auto; padding: 22px 0 24px; } .chal-band__phase { position: static; animation: none; } .chal-band__phase--a { display: none; } .chal-band__phase--b { margin: 0 22px; } .chal-zone { padding: 24px 0 22px 22px; } .chal__copy { padding: 22px 24px 26px; } .chal__copy h3 { font-size: 24px; } .chal__copy p { font-size: 16px; } .chal-band__head { font-size: 22px; } } @media (max-width: 620px) { /* The artifacts were drawn for a screen wide enough to read a table on. With them gone the main card would open on the payoff, so the column flips: problem first, then what an agent does with it. */ .chal-zone { display: none; } .chal__main { flex-direction: column-reverse; } .chal-band__row i { width: 22px; height: 22px; } .chal-band__row i::before { width: 11px; height: 11px; } .chal__copy--sm { padding: 22px 22px 20px; } .chal__copy h3 { font-size: 22px; } } /* ============================================================ PROOF — the case study callout, or the "first build" stand-in on the two segments that don't have a published study yet. Both use this block so the page rhythm never breaks. ============================================================ */ .segproof { background: var(--bg); padding: 100px var(--pad); } .segproof__card { max-width: var(--container); margin: 44px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 0; border: 1.5px solid var(--ink); border-radius: 20px; overflow: hidden; background: #fff; } .segproof__copy { padding: 44px 46px; /* The copy is short by design, so centre it against the stat grid rather than letting it hang from the top with dead space beneath. */ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .segproof__copy h3 { font-size: 25px; line-height: 1.15; font-weight: 500; margin: 0 0 14px; letter-spacing: -0.01em; } .segproof__copy p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 22px; } .segproof__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; background: var(--seg-accent-soft); border-left: 1.5px solid var(--ink); } .segproof__stat { padding: 30px 26px; border-bottom: 1.5px solid var(--ink); } .segproof__stat:nth-child(odd) { border-right: 1.5px solid var(--ink); } .segproof__stat:nth-last-child(-n+2) { border-bottom: 0; } .segproof__stat .num { display: block; font-size: 30px; line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 6px; } .segproof__stat .cap { display: block; font-size: 14.5px; line-height: 1.4; color: rgba(0, 0, 0, 0.66); } /* ============================================================ WHERE TO START — the two-service handoff, condensed. ============================================================ */ .segstart { background: var(--cream); padding: 100px var(--pad); } .segstart__grid { max-width: var(--container); margin: 46px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .segstart__card { padding: 34px 36px; background: #fff; border: 1.5px solid var(--ink); border-radius: 20px; transition: transform .18s var(--ease), box-shadow .18s var(--ease); } /* Each card wears its own service's colour rather than the segment's, so the handoff reads as two products and not one cream section. Values are the same blue and green those pages and the shared .compare component use. */ .segstart__card--jumpstart { --start-accent: #397ae7; background: #eef4ff; } .segstart__card--studio { --start-accent: #3d7827; background: #f1fbec; } .segstart__card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 -1px var(--ink); } .segstart__card .eyebrow { margin-bottom: 10px; display: block; } /* body[data-segment] prefix only to out-specify the page-wide accent rule at the top of this file — these two cards answer to their service, not the segment, which is the whole point of colouring them. */ body[data-segment] .segstart__card--jumpstart .eyebrow, body[data-segment] .segstart__card--studio .eyebrow, body[data-segment] .segstart__card--jumpstart a.seglink, body[data-segment] .segstart__card--studio a.seglink { color: var(--start-accent); } .segstart__card h3 { font-size: 24px; line-height: 1.15; font-weight: 500; margin: 0 0 12px; } .segstart__card p { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0 0 20px; } .segstart__card a.seglink { font-size: 15px; } /* ============================================================ RELATED SEGMENTS Every segment page links to the other five. This is the structural fix for "I'm in {X}, I guess I'm not a fit": whatever page a visitor lands on, the neighbouring corners of financial services are one click away. It also gives answer engines a complete internal graph of the six. ============================================================ */ .segnext { background: var(--bg); padding: 90px var(--pad); border-top: 1px solid var(--line); } .segnext__grid { max-width: var(--container); margin: 38px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .segnext__card { --sn-accent: var(--fs-blue); --sn-tint: #eef4ff; display: block; padding: 22px 24px; border: 1.5px solid var(--ink); border-radius: 16px; background: #fff; text-decoration: none; color: inherit; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .22s var(--ease); } /* Same icon and same colour the segment wears in the home page's .segs grid, so a family is recognisable wherever a visitor meets it. Six white boxes gave the reader nothing to tell one segment from the next. */ .segnext__card--lending { --sn-accent: var(--fs-blue); --sn-tint: #eef4ff; } .segnext__card--insurance { --sn-accent: var(--fs-peach); --sn-tint: #fff4ef; } .segnext__card--real { --sn-accent: var(--fs-green); --sn-tint: #f1fbec; } .segnext__card--invest { --sn-accent: var(--fs-yellow); --sn-tint: #fffaea; } .segnext__card--payments { --sn-accent: var(--fs-indigo); --sn-tint: #f3f0ff; } .segnext__card--payroll { --sn-accent: var(--fs-pink); --sn-tint: #fff4fb; } /* The "all six" card is deliberately neutral: it is the index, not a family. */ .segnext__card--all { --sn-accent: #e8e5d8; --sn-tint: #f6f4ec; } /* Solutions-era related cards: literals matching the body[data-segment] accents above and the nav/homepage palettes. */ .segnext__card--financial-services { --sn-accent: #c6dbff; --sn-tint: #eef4ff; } .segnext__card--logistics { --sn-accent: #ffeba1; --sn-tint: #fffaea; } .segnext__card--real-estate-construction { --sn-accent: #caf0be; --sn-tint: #f1fbec; } .segnext__card--professional-services { --sn-accent: #ddd4ff; --sn-tint: #f3f0ff; } .segnext__card--legal { --sn-accent: #bfe8e0; --sn-tint: #effaf7; } .segnext__card--business-operations { --sn-accent: #c6dbff; --sn-tint: #eef4ff; } .segnext__card--customer-support { --sn-accent: #fcccbf; --sn-tint: #fff4ef; } .segnext__card--hr { --sn-accent: #ffdff4; --sn-tint: #fff4fb; } .segnext__card--finance { --sn-accent: #caf0be; --sn-tint: #f1fbec; } .segnext__card--sales-marketing { --sn-accent: #ffeba1; --sn-tint: #fffaea; } .segnext__card--compliance-audit { --sn-accent: #ddd4ff; --sn-tint: #f3f0ff; } .segnext__card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 -1px var(--ink); background: var(--sn-tint); } .segnext__chip { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 13px; border: 1.4px solid var(--ink); border-radius: 9px; background: var(--sn-accent); } .segnext__chip svg { width: 17px; height: 17px; display: block; } .segnext__card strong { display: block; font-size: 17px; font-weight: 500; margin-bottom: 6px; } .segnext__desc { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); } .segnext__note { max-width: var(--container); margin: 26px auto 0; text-align: center; font-size: 15px; color: var(--muted); } .segnext__note a { color: var(--blue); text-decoration: none; } .segnext__note a:hover { text-decoration: underline; } /* ============================================================ FAQ Visible on the page and mirrored in FAQPage JSON-LD. Native

so it works with no JavaScript and stays keyboard-operable. ============================================================ */ .segfaq { background: var(--cream); padding: 100px var(--pad); } .segfaq__list { max-width: 860px; margin: 42px auto 0; } .segfaq__item { border: 1.5px solid var(--ink); border-radius: 14px; background: #fff; margin-bottom: 12px; overflow: hidden; } .segfaq__item > summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 26px; font-size: 17px; font-weight: 500; position: relative; } .segfaq__item > summary::-webkit-details-marker { display: none; } .segfaq__item > summary::after { content: ""; position: absolute; right: 26px; top: 50%; width: 10px; height: 10px; border-right: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease); } .segfaq__item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); } .segfaq__item > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } .segfaq__answer { padding: 0 26px 22px; font-size: 15.5px; line-height: 1.62; color: var(--muted); max-width: 62em; } .segfaq__answer a { color: var(--blue); } /* Shared inline link affordance used in a few of the blocks above. */ .seglink { color: var(--blue); text-decoration: none; font-weight: 500; } .seglink:hover { text-decoration: underline; } /* ============================================================ RESPONSIVE The segment pages are plain document flow, not the scaled 1440 stage the homepage uses, so they collapse with ordinary media queries. ============================================================ */ @media (max-width: 1100px) { .seghero__inner { gap: 44px; } .segnext__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 980px) { .seghero { padding: 44px 40px 70px; } .seghero__inner { grid-template-columns: 1fr; gap: 40px; } .seghero__art { order: -1; padding: 22px; } .segpat, .segproof, .segstart, .segnext, .segfaq { padding-left: 40px; padding-right: 40px; } .segstart__grid { grid-template-columns: 1fr; } .segproof__card { grid-template-columns: 1fr; } .segproof__stats { border-left: 0; border-top: 1.5px solid var(--ink); } .segproof__copy { padding: 34px 30px; } } @media (max-width: 640px) { .seghero { padding: 32px 22px 56px; } .segpat, .segproof, .segstart, .segnext, .segfaq { padding: 70px 22px; } .seghero__lead { font-size: 17px; } .seghero__types { padding-top: 15px; } .seghero__types li { font-size: 14.5px; line-height: 1.9; } .seghero__types li::after { margin: -1px 11px 0 11px; } .segnext__grid { grid-template-columns: 1fr; } .segproof__stats { grid-template-columns: 1fr; } .segproof__stat:nth-child(odd) { border-right: 0; } .segproof__stat:nth-last-child(-n+2) { border-bottom: 1.5px solid var(--ink); } .segproof__stat:last-child { border-bottom: 0; } .segfaq__item > summary { font-size: 16px; padding: 18px 48px 18px 20px; } .segfaq__answer { padding: 0 20px 20px; } } /* ============================================================ Secondary proof — two compact case-study links under the featured card. Same ink frame as the featured card so the three read as one set; one stat each instead of four so they stay clearly secondary. ============================================================ */ .segproof__row { max-width: var(--container); margin: 14px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .segproof__mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 26px 30px; border: 1.5px solid var(--ink); border-radius: 20px; background: #fff; text-decoration: none; color: inherit; transition: background 0.18s ease; } .segproof__mini:hover { background: var(--seg-accent-soft); } .segproof__mini-copy { display: flex; flex-direction: column; } .segproof__mini-kicker { font: 500 11.5px/1 "Neue Montreal", system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0, 0, 0, 0.48); margin-bottom: 10px; } .segproof__mini-copy strong { font: 500 18px/1.25 "Neue Montreal", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 6px; } .segproof__mini-line { font: 400 14.5px/1.5 "Neue Montreal", system-ui, sans-serif; color: var(--muted); } .segproof__mini-stat { text-align: right; } .segproof__mini-stat .num { display: block; font-size: 26px; line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; } .segproof__mini-stat .cap { display: block; margin-top: 5px; font-size: 13px; line-height: 1.35; color: var(--muted); max-width: 130px; } @media (max-width: 899px) { .segproof__row { grid-template-columns: 1fr; } .segproof__mini { grid-template-columns: 1fr; gap: 14px; } .segproof__mini-stat { text-align: left; } .segproof__mini-stat .cap { max-width: none; } }