/* ==========================================================================
InOutBoard marketing site — shared stylesheet
One file, linked by every page. Brand palette taken from the existing
logo (#00AEEF) and theme (#1b232f navy, Untitled-UI style gray ramp).
========================================================================== */
/* --- Design tokens ------------------------------------------------------- */
:root {
/* Brand */
--brand: #00aeef;
--brand-dark: #0090c7;
--brand-darker: #00719c;
--brand-tint: #e6f7fe;
/* Neutrals */
--navy: #1b232f;
--navy-deep: #151a26;
--navy-light: #2d384a;
--gray-900: #101828;
--gray-700: #344054;
--gray-600: #475467;
--gray-500: #667085;
--gray-400: #98a2b3;
--gray-300: #d0d5dd;
--gray-200: #eaecf0;
--gray-100: #f2f4f7;
--gray-50: #f9fafb;
--white: #ffffff;
/* Text on light backgrounds. Dark sections (CTA band, footer) keep their
own light colors so they stay legible. */
--text: #000000;
/* Accents */
--gold: #fec84b;
--green: #12b76a;
/* Keyboard focus indicator. Deliberately not --brand -- the cyan is too
light to ring anything on a pale background. See :focus-visible. */
--focus-ring: var(--navy);
--focus-ring-inner: var(--white);
/* Typography */
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Handwritten display face for headings; self-hosted, see Typefaces below */
--font-display: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
/* Spacing / layout */
--container: 1200px;
--container-narrow: 900px;
/* Width of the framed video column. Anything that has to line up under a
video reads it from here rather than repeating the number -- see
.video-wrap and .transcript. Narrower per-context overrides (the help
topic pages put a video at 640px) set max-width directly instead. */
--video-max: 880px;
/* Gap between a video's runtime label and the player underneath it. One
token so every placement keeps the same spacing -- see
.video-split__duration. */
--video-label-gap: 12px;
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
--shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06);
--shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
--shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, .08), 0 8px 8px -4px rgba(16, 24, 40, .03);
/* The screenshot frame, one look for every product screenshot on the site:
a white 10px border (18px corners outside, 8px inside) and this neutral
blue-grey two-layer shadow. It is the look of the dashboard feature page's
.video-wrap, which is the one to match. */
--shadow-shot: 0 0 24px rgba(16, 24, 40, .14), 0 16px 32px -8px rgba(16, 24, 40, .18);
--frame-radius: calc(var(--radius-sm) + 10px);
}
/* --- Typefaces ------------------------------------------------------------
Inter and Caveat, self-hosted from /fonts/ since Oct 2026. They came from
Google Fonts until then, which meant two extra origins on every page view,
each visitor's IP address sent to Google to draw text, and the site's look
tied to whatever Google served behind that URL that day.
These are byte-for-byte the files App/fonts/ has used since Sep 2026 (see
the comment in App/css/brand.css): the @fontsource-variable 5.2.5 builds of
the upstream Google Fonts files, variable Latin subsets, 48KB and 74KB,
SIL Open Font License 1.1 with the licences beside them. Keep the two
copies identical, so the marketing site and the sign-up page render the
same type.
Latin only, like the App. The only characters any page uses outside it are
the arrows (U+2190, U+2192), which no subset Google served for Inter
covered either, so they were already drawn by the fallback stack. Measured
Oct 2026 by rendering every page with both sources: text boxes identical.
Never edit a file in place: /fonts/ is served with a one-year immutable
cache (web.config), so a new build needs a new file name. .woff2 needs its
MIME map in web.config too -- App Service 404s the extension without one,
which App/Web.config records as measured, not assumed. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-display: swap;
font-weight: 400 700;
src: url('../fonts/caveat-latin-wght-normal.woff2') format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Offset for the sticky header when jumping to #anchors */
scroll-padding-top: 90px;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: 1.25rem;
line-height: 1.6;
color: var(--text);
background: var(--white);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
margin: 0 0 .5em;
color: var(--text);
line-height: 1.2;
letter-spacing: -.02em;
font-weight: 700;
}
h1 {
font-size: clamp(2.25rem, 5vw, 3.5rem);
}
h2 {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
h3 {
font-size: 1.5rem;
}
p {
margin: 0 0 1rem;
}
p:last-child {
margin-bottom: 0;
}
a {
color: var(--brand-darker);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img, svg, iframe {
max-width: 100%;
}
img {
height: auto;
border: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* Visible keyboard focus everywhere — do not remove.
Two-tone ring: a dark band with a white band inside it. One of the two
always clears 3:1 against whatever sits behind, which a single band cannot
do across this palette (WCAG 2.2 SC 1.4.11). The dark band carries the
white and --gray-50 sections and the filled cyan buttons; the white band
carries the navy footer and navy sections, where the dark band disappears
into its background. The box-shadow spread matches outline-offset exactly,
so the gap is filled and the two bands read as one ring.
This used to be a single --brand ring, which failed on the light
backgrounds it sat on most: #00aeef is 2.53:1 on white and 2.42:1 on the
--gray-50 tint. Only the indicator moved off brand -- links, buttons and
decoration still use --brand. */
:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--focus-ring-inner);
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* --- Utilities ----------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.section {
padding: clamp(56px, 8vw, 96px) 0;
}
/* Interior pages open with a hero built from a plain .section; pull it up
toward the nav with the same top padding as the home page .hero, instead
of leaving a full between-sections gap under the header. */
main > .section:first-child {
padding-top: clamp(32px, 4vw, 56px);
}
.section--tint {
background: var(--gray-50);
}
.section--navy {
background: var(--navy);
color: var(--gray-300);
}
.section--navy h2, .section--navy h3 {
color: var(--white);
}
.section-head {
max-width: 1040px;
margin: 0 auto clamp(40px, 5vw, 64px);
text-align: center;
}
/* Section titles share the hero's handwritten display treatment. Script
faces read smaller than sans at the same size, so these run larger than
the base h2 scale. Card/panel h3s stay in the sans for readability. */
.section-head h1,
.section-head h2 {
font-family: var(--font-display);
font-size: clamp(1.75rem, 6.1vw, 4rem);
line-height: 1.15;
letter-spacing: 0;
text-wrap: balance;
}
/* Page titles (feature/industry heroes and the like) keep the same scale
on desktop but bottom out at the home hero's 2.75rem floor instead of
1.75rem, so phones aren't left with an undersized headline. */
.section-head h1 {
font-size: clamp(2.75rem, 6.1vw, 4rem);
}
/* Opt-out for pages (e.g. legal) where the script face is out of place. */
.section-head--plain h1,
.section-head--plain h2 {
font-family: var(--font-sans);
font-size: clamp(2.25rem, 5vw, 3.5rem);
line-height: 1.2;
letter-spacing: -.02em;
}
.section-head p {
font-size: calc(1.275rem + 0.3vw);
color: var(--text);
}
/* One-off for the home page intro above the feature tiles. Balanced so
the last line is not left holding a single word, and capped near 60ch
so the measure stays comfortable on a wide screen -- min() keeps it
inside the container on a phone rather than overflowing. font-size
inherits, preserving the size this text had before it was wrapped in
a
; margin is pinned so the wrapper adds no vertical space. */
.section-head .section-head__intro {
max-width: min(60ch, 100%);
margin: 0 auto;
font-size: inherit;
text-wrap: balance;
}
/* Quiet second row under a section-head title, e.g. a legal page's
effective date. */
.section-head .section-head__sub {
margin-top: 8px;
font-size: 1rem;
color: var(--gray-500);
}
/* Eyebrow above a page title — the plain, descriptive name for what the
page is about, sitting over a headline that is deliberately not plain.
The feature pages are what this exists for. Their h1s are slogans
("Smarter insights, better decisions"), which is the house voice and is
staying; the term a visitor actually searched for had nowhere to go on
the page as a result. The industry pages never had the problem because
their titles name the industry outright ("The status board for
Healthcare & Social Services").
Sans, not the display face: it is a label, and setting it in Caveat
alongside a Caveat headline would read as two headlines.
On the feature pages, /emergency-roll-call/ and /hybrid-work/ it sits
INSIDE the
(since Oct 2026), so the searched-for term is part of
the heading and not a stray span above it: the h1 is the strongest
on-page statement of what a page is about, for search engines and for
the AI answer engines that quote it. Every property that would
otherwise inherit from the h1 -- face, size, weight, line-height,
letter-spacing, colour -- is set explicitly below, so it looks the same
in either position. The .sr-only ": " after the label keeps the
heading's text from running the two parts together, for screen readers
and for anything that reads the heading as plain text. */
.section-head .section-head__eyebrow {
display: block;
margin-bottom: 10px;
font-family: var(--font-sans);
font-size: .8125rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--brand-darker);
text-wrap: balance;
}
/* Pricing link under the /features/ hub intro, on its own centred line
right below the paragraph -- normal
spacing between the two is
already modest, so no extra margin is added here. Matches the
".cta__price a" / ".usecase__more" action-link treatment: brand-darker
blue and the no-underline default already come from the global `a`
rule, the hover underline from a:hover, and keyboard focus from
:focus-visible, so only the weight is declared. nowrap keeps the
trailing arrow from stranding onto its own line. */
.section-head .section-head__pricing-link a {
font-weight: 600;
white-space: nowrap;
}
.section--navy .section-head p {
color: var(--gray-400);
}
.section-footer {
max-width: 1040px;
margin: clamp(40px, 5vw, 64px) auto 0;
text-align: center;
}
/* Feature benefits split: checkmark list on the left, product shot on the
right. Stacks on narrow screens with the image last. */
.feature-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 60px);
align-items: center;
text-align: left;
}
/* Half the width, so the list runs as a single column here. */
.feature-split .check-list {
grid-template-columns: 1fr;
margin-top: 0;
}
/* Was a transparent PNG mockup with its own baked-in shadow; now a flat
screenshot (status-board-cards), so the shadow comes from CSS. Only
/what-is-inoutboard/ uses this class -- do not put a transparent PNG back
in it or the shadow will outline the rectangle. */
.feature-split__media {
width: 100%;
max-width: 520px;
justify-self: end;
}
.feature-split__media img {
display: block;
width: 100%;
box-sizing: border-box;
border: 10px solid var(--white);
border-radius: var(--frame-radius);
background: var(--white);
box-shadow: var(--shadow-shot);
}
@media (max-width: 860px) {
.feature-split {
grid-template-columns: 1fr;
}
.feature-split__media {
justify-self: center;
}
}
/* --- /features/ hub closing section --------------------------------------
"How the features work together": two columns on desktop (explanatory
text left, a real screenshot right), stacking with the text first on
narrow screens because that is already the source order -- no reordering
needed. Scoped to this one section rather than reused from .feature-split
(built for a checklist beside a transparent PNG mockup with no card
treatment) or .showcase (puts its image first on mobile, which we don't
want here). The screenshot instead gets the same bordered, rounded,
shadowed card treatment as .showcase__media, since this is a plain
rectangular product screenshot rather than a pre-shadowed cutout. */
.features-summary__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 60px);
align-items: center;
text-align: left;
}
.features-summary__shot {
border: 10px solid var(--white);
border-radius: var(--frame-radius);
box-shadow: var(--shadow-shot);
overflow: hidden;
background: var(--white);
}
.features-summary__shot img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 860px) {
.features-summary__grid {
grid-template-columns: 1fr;
}
}
/* Checkmark list — two columns on desktop, one on narrow screens. Items are
left-aligned while the block itself stays centred in the section. */
.check-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
gap: 14px 40px;
margin-top: 28px;
text-align: left;
}
.check-list li {
position: relative;
padding-left: 32px;
font-size: 1.125rem;
line-height: 1.5;
}
.check-list svg {
position: absolute;
left: 0;
top: 4px;
color: var(--green);
}
.check-list em {
font-style: normal;
color: var(--brand-darker);
}
/* A screenshot directly after a check-list sits flush against it
otherwise: .check-list carries no bottom margin and .video-wrap no top
one, so the two blocks touch. Used by /features/reports/,
/features/set-up/, /features/dashboard/ and /features/calendar/. Same
step .section-footer uses to separate itself from the block above,
rather than a new value. */
.check-list + .video-wrap,
.check-list + .shot-stack {
margin-top: clamp(40px, 5vw, 64px);
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
padding: 12px 20px;
background: var(--navy);
color: var(--white);
border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
left: 0;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* --- Buttons ------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 24px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 1rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover {
text-decoration: none;
}
.btn:active {
transform: translateY(1px);
}
.btn--primary {
background: var(--brand);
border-color: var(--brand);
color: var(--white);
box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
background: var(--brand-dark);
border-color: var(--brand-dark);
}
.btn--secondary {
background: var(--white);
border-color: var(--gray-300);
color: var(--text);
box-shadow: var(--shadow-sm);
}
.btn--secondary:hover {
background: var(--gray-50);
border-color: var(--gray-400);
}
/* The focus ring paints its white band as a box-shadow, which would
otherwise replace the resting shadow these two carry. Re-state that
shadow behind the band so a focused button keeps its lift. */
.btn--primary:focus-visible,
.btn--secondary:focus-visible {
box-shadow: 0 0 0 2px var(--focus-ring-inner), var(--shadow-sm);
}
.btn--ghost-light {
background: rgba(255, 255, 255, .10);
border-color: rgba(255, 255, 255, .30);
color: var(--white);
}
.btn--ghost-light:hover {
background: rgba(255, 255, 255, .18);
}
.btn--lg {
padding: 16px 32px;
font-size: 1.0625rem;
}
.btn--block {
width: 100%;
}
/* Compact button for a table row (the trial links in the /pricing/ license
table). Still clears the 24px minimum target size. */
.btn--sm {
padding: 7px 14px;
font-size: .875rem;
white-space: nowrap;
}
/* --- Header / nav -------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(10px);
}
.site-header__inner {
display: flex;
align-items: center;
gap: 32px;
min-height: 72px;
}
.site-logo {
flex: none;
display: flex;
align-items: center;
}
.site-logo img {
display: block;
width: 190px;
height: auto;
}
.nav {
flex: 1;
}
.nav__list {
display: flex;
align-items: center;
/* Centres the links in the flexible space between the logo and the
log-in/try buttons. Overridden in the collapsed mobile menu, where
the list stacks vertically. */
justify-content: center;
gap: 4px;
}
.nav__link {
display: block;
padding: 8px 14px;
border-radius: var(--radius-sm);
font-size: .9375rem;
font-weight: 500;
color: var(--text);
}
.nav__link:hover {
background: var(--gray-100);
color: var(--text);
text-decoration: none;
}
.nav__link[aria-current="page"] {
color: var(--brand-darker);
font-weight: 600;
}
/* --- Nav dropdowns -------------------------------------------------------
Click to open (handled in site.js). The panel is absolutely positioned on
desktop and flows inline inside the collapsed mobile menu. */
.nav__item--menu {
position: relative;
}
/* The Industries entry exists twice: the dropdown (--desktop) and a plain
link to /industry/ (--mobile). Swapped at the 1000px nav breakpoint below.
display:none rather than visibility/clip so the hidden one contributes no
focusable links to the collapsed menu. */
.nav__item--mobile {
display: none;
}
.nav__button {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: 0;
font-family: inherit;
cursor: pointer;
}
.nav__button .nav__caret {
transition: transform .15s ease;
}
.nav__button[aria-expanded="true"] {
background: var(--gray-100);
color: var(--gray-900);
}
.nav__button[aria-expanded="true"] .nav__caret {
transform: rotate(180deg);
}
.nav__menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 120;
min-width: 240px;
padding: 10px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.nav__menu[hidden] {
display: none;
}
/* Thirteen industries need two columns so the panel is not absurdly tall.
Sized to the longest short label ("Engineering & Construction", 166px) plus
padding, with a little slack — if the labels grow, re-measure this. */
.nav__menu--wide {
min-width: 440px;
}
.nav__menu--wide .nav__menu-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 8px;
}
/* Small, loose and in the dark slate rather than --text (pure black): a long
list of black links at a tight line-height is high-contrast and cramped
enough to be tiring to scan. Matching the compact treatment Odoo uses in
its nav panels — the readability comes from the colour and the row spacing,
not from the type size. */
.nav__menu-list a,
.nav__menu-all {
display: block;
padding: 8px 14px;
border-radius: var(--radius-sm);
font-size: .8rem;
font-weight: 400;
line-height: 1.5;
/* Deliberate one-off. Dark enough to read crisply at this size, but kept
off pure black (--text) — a long column of #000 links is what made this
menu tiring in the first place. */
color: #1f2937;
}
.nav__menu-list a:hover,
.nav__menu-all:hover {
background: var(--gray-100);
text-decoration: none;
}
.nav__menu-all {
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid var(--gray-200);
font-weight: 400;
color: var(--brand-darker);
border-radius: 0;
}
@media (max-width: 1000px) {
/* Industries collapses to a single link to the /industry/ directory. The
dropdown is display:none, so its 18 links leave the focus order too. */
.nav__item--desktop {
display: none;
}
.nav__item--mobile {
display: block;
}
/* Inside the collapsed menu the panel sits in the flow, indented. */
.nav__menu {
position: static;
min-width: 0;
margin: 4px 0 8px 14px;
box-shadow: none;
}
.nav__menu--wide {
min-width: 0;
}
.nav__menu--wide .nav__menu-list {
grid-template-columns: 1fr;
}
.nav__button {
width: 100%;
justify-content: space-between;
}
/* Desktop rows are tuned for scanning with a mouse; on touch they have to
clear the 44px minimum tap target, so pad them back out here. */
.nav__menu-list a,
.nav__menu-all {
padding: 13px 14px;
}
}
.header-actions {
flex: none;
display: flex;
align-items: center;
gap: 12px;
}
.header-actions .btn {
padding: 10px 20px;
font-size: .9375rem;
}
.nav-toggle {
display: none;
flex: none;
width: 44px;
height: 44px;
margin-left: auto;
padding: 0;
background: none;
border: 1px solid var(--gray-300);
border-radius: var(--radius-sm);
color: var(--text);
cursor: pointer;
}
.nav-toggle svg {
display: block;
margin: auto;
}
.nav-toggle .icon-close {
display: none;
}
.nav-toggle[aria-expanded="true"] .icon-open {
display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
display: block;
}
@media (max-width: 1000px) {
.nav-toggle {
display: block;
}
.nav, .header-actions {
display: none;
width: 100%;
}
.site-header__inner {
flex-wrap: wrap;
gap: 0;
padding-bottom: 0;
}
.site-header__inner.is-open {
padding-bottom: 20px;
}
.site-header__inner.is-open .nav,
.site-header__inner.is-open .header-actions {
display: block;
}
.nav__list {
flex-direction: column;
align-items: stretch;
gap: 2px;
padding: 12px 0;
}
.nav__link {
padding: 12px 14px;
font-size: 1rem;
}
.header-actions {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.header-actions .btn {
width: 100%;
padding: 13px 20px;
}
}
/* --- Breadcrumb ----------------------------------------------------------
Rendered by Common/Site.master at the top of , on pages two levels
down only (/features/*, /industry/*, /help/*). The same trail is emitted as
BreadcrumbList JSON-LD in ; this is the visible half of that pair,
and Google's structured data guidelines require it to exist.
It sits above the first section's own top padding rather than inside it,
so every page underneath keeps the spacing it already had.
-------------------------------------------------------------------------- */
.breadcrumb {
padding-top: 20px;
}
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
color: var(--gray-500);
}
/* The separator is decorative, so it is generated rather than marked up:
a screen reader reads the list as a list and does not need to hear a
slash between every item. */
.breadcrumb li + li::before {
content: "/";
margin-right: 8px;
color: var(--gray-300);
}
.breadcrumb a {
color: var(--gray-600);
text-decoration: none;
}
.breadcrumb a:hover {
color: var(--brand-darker);
text-decoration: underline;
}
.breadcrumb [aria-current="page"] {
color: var(--gray-500);
}
@media (max-width: 600px) {
.breadcrumb {
padding-top: 16px;
}
.breadcrumb ol {
font-size: 13px;
}
}
/* --- Hero ---------------------------------------------------------------- */
.hero {
position: relative;
padding: clamp(20px, 2.5vw, 36px) 0 clamp(40px, 5vw, 72px);
background: var(--white);
overflow: hidden;
}
/* Home hero: stacked and centred on narrow screens (headline, sub-line, buttons,
then the laptop); from 861px it becomes copy-left, laptop-right on roughly
equal columns, vertically centred against each other. */
.hero__split {
text-align: center;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(24px, 5vw, 36px);
}
@media (min-width: 861px) {
.hero__split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: center;
text-align: left;
}
.hero__sub {
margin-inline: 0;
}
.hero__actions {
justify-content: flex-start;
align-items: flex-start;
}
.hero__cta {
align-items: flex-start;
}
}
/* A laptop drawn in CSS around a screenshot: dark lid with a camera dot, the
screen at 16:10, and a base with a thumb notch. Padding is a percentage of the
width, so the whole thing scales as one piece. The drop-shadow follows the
outline (box-shadow would not). */
.laptop {
position: relative;
width: 100%;
max-width: 640px;
margin-inline: auto;
filter: drop-shadow(0 0 12px rgba(16, 24, 40, .14)) drop-shadow(0 14px 18px rgba(16, 24, 40, .16));
}
.laptop__lid {
position: relative;
padding: 2.4% 2.4% 3%;
border-radius: 16px 16px 6px 6px;
background: linear-gradient(#2b3340, #1b212b);
}
.laptop__lid::before {
content: "";
position: absolute;
top: 1.1%;
left: 50%;
width: 5px;
height: 5px;
margin-left: -2.5px;
border-radius: 50%;
background: #3b4452;
}
.laptop__screen {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
border-radius: 4px;
background: var(--white);
}
.laptop__base {
position: relative;
height: clamp(8px, 1.8vw, 14px);
margin-inline: -5%;
border-radius: 0 0 14px 14px / 0 0 10px 10px;
background: linear-gradient(#e5e7eb, #b9bec7);
}
.laptop__base::after {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 16%;
height: 45%;
transform: translateX(-50%);
border-radius: 0 0 8px 8px;
background: #c9cdd4;
}
.hero h1 {
/* Sized for the half-width column it now sits in and left to wrap on its
own -- no breakout width or one-line tuning. text-wrap: balance evens
the lines out, and the highlight span carries box-decoration-break:
clone, so the marker band repeats correctly across a wrap. */
margin-bottom: .1em;
/* Handwritten display treatment. Script faces read smaller than sans
at the same size, so scale up and drop the negative tracking used by
the sans headings. */
font-family: var(--font-display);
font-size: clamp(2.5rem, 5.6vw, 4.75rem);
line-height: 1.15;
letter-spacing: 0;
text-wrap: balance;
}
/* --- Hand-drawn marker accents ------------------------------------------
Inline-SVG backgrounds so the strokes have rough, organic edges. The
padding + negative margin let the ink spill past the word without
changing the text layout. Reusable on any inline span. */
.marker-highlight {
padding: .02em .22em .06em;
margin-inline: -.22em;
/* Three stacked marker passes: the top swipe starts indented and runs
long to the right, the middle spans full width, and the bottom swipe
is shorter with its tail out to the lower left. Each pass is
semi-transparent so the overlaps darken like real marker ink. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cg opacity='.75' fill='%23fbb945' transform='rotate(-3 150 50)'%3E%3Cpath d='M52 20 C130 17 230 16 280 19 C294 20 294 43 280 44 C210 47 130 48 52 46 C38 45 38 21 52 20 Z'/%3E%3Cpath d='M20 34 C110 31 240 30 284 33 C298 34 298 57 284 58 C230 61 110 62 20 60 C6 59 6 35 20 34 Z'/%3E%3Cpath d='M30 54 C100 51 210 50 268 53 C282 54 282 77 268 78 C200 81 100 82 30 80 C16 79 16 55 30 54 Z'/%3E%3C/g%3E%3C/svg%3E");
/* Band height lives here so every highlight, in any colour, matches. */
background-size: 100% 74%;
background-position: 0 46%;
background-repeat: no-repeat;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* Gold variant of the marker highlight. Gold is also the base ink, so on its
own this changes nothing today -- it exists because one heading names the
colour explicitly and .marker-underline--gold already does the same, and a
class the markup references should not be missing from the stylesheet.
Declaring the pass here rather than leaning on the base also means that
recolouring .marker-highlight later leaves the explicitly-gold callers
gold, which is the whole point of a named modifier. */
.marker-highlight--gold {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cg opacity='.75' fill='%23fbb945' transform='rotate(-3 150 50)'%3E%3Cpath d='M52 20 C130 17 230 16 280 19 C294 20 294 43 280 44 C210 47 130 48 52 46 C38 45 38 21 52 20 Z'/%3E%3Cpath d='M20 34 C110 31 240 30 284 33 C298 34 298 57 284 58 C230 61 110 62 20 60 C6 59 6 35 20 34 Z'/%3E%3Cpath d='M30 54 C100 51 210 50 268 53 C282 54 282 77 268 78 C200 81 100 82 30 80 C16 79 16 55 30 54 Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* Coral variant of the marker highlight — same three passes, warmer ink. */
.marker-highlight--coral {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cg opacity='.75' fill='%23ff6b6b' transform='rotate(-3 150 50)'%3E%3Cpath d='M52 20 C130 17 230 16 280 19 C294 20 294 43 280 44 C210 47 130 48 52 46 C38 45 38 21 52 20 Z'/%3E%3Cpath d='M20 34 C110 31 240 30 284 33 C298 34 298 57 284 58 C230 61 110 62 20 60 C6 59 6 35 20 34 Z'/%3E%3Cpath d='M30 54 C100 51 210 50 268 53 C282 54 282 77 268 78 C200 81 100 82 30 80 C16 79 16 55 30 54 Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* Brush underline, e.g. affordable!.
The stroke rides just under the baseline and spills past both ends. */
.marker-underline {
padding: 0 .06em .16em;
margin-inline: -.06em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' preserveAspectRatio='none'%3E%3Cpath d='M22 16 C80 8 180 4 276 9 C282 10 283 20 279 23 C190 16 95 21 26 30 C19 31 17 19 22 16 Z' fill='%2300aeef'/%3E%3C/svg%3E");
background-size: 100% .42em;
background-position: 50% 100%;
background-repeat: no-repeat;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* Gold variant of the brush underline, matching the marker highlight. */
.marker-underline--gold {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' preserveAspectRatio='none'%3E%3Cpath d='M22 16 C80 8 180 4 276 9 C282 10 283 20 279 23 C190 16 95 21 26 30 C19 31 17 19 22 16 Z' fill='%23fbb945'/%3E%3C/svg%3E");
}
/* Second hero row. This carries the product description rather than a short
slogan, so it reads as a lede in the sans face: the handwritten display
face ran to three lines of 64px script on desktop at this length, and a
script face is the wrong tool for a sentence doing informational work.
The h1 above keeps the handwritten treatment and its marker highlight, so
the hero keeps its character. Width cap holds lines near 60 characters. */
.hero__sub {
max-width: 34em;
margin-inline: auto;
margin-bottom: clamp(24px, 3.4vw, 36px);
font-size: clamp(1.0625rem, 1.55vw, 1.375rem);
line-height: 1.45;
color: var(--text);
text-wrap: balance;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
/* Top-aligned so "Talk to an expert" lines up with the primary button
rather than centring against the taller button-plus-note column. */
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
}
/* Primary call to action stacked with its reassurance line. */
.hero__cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.hero__cta-note {
font-size: .875rem;
color: var(--gray-600);
}
/* Below this width the two buttons cannot sit side by side, and the longer
primary label would wrap inside a shrink-to-fit button. Stack them
full-width in a capped column instead, and trim the large-button side
padding so the label still fits on one line at 320px. */
@media (max-width: 600px) {
.hero__actions {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 340px;
margin-inline: auto;
}
.hero__cta {
width: 100%;
/* Stretch, so the button fills the column rather than shrinking to
its label and sitting narrower than the secondary button. */
align-items: stretch;
}
.hero__actions > .btn {
width: 100%;
}
}
@media (max-width: 380px) {
.hero__actions .btn--lg {
padding-inline: 14px;
font-size: 1rem;
}
}
.hero__reassure {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 20px;
font-size: .875rem;
color: var(--text);
}
.hero__reassure li {
display: flex;
align-items: center;
gap: 6px;
}
.hero__reassure svg {
flex: none;
color: var(--green);
}
.hero__media {
position: relative;
width: 100%;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
background: var(--white);
overflow: hidden;
}
.hero__media img {
display: block;
width: 100%;
}
/* --- Social proof strip -------------------------------------------------- */
.proof {
padding: 28px 0;
border-block: 1px solid var(--gray-200);
background: var(--white);
}
.proof__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px 48px;
text-align: center;
}
.proof__stat {
display: flex;
align-items: baseline;
gap: 8px;
/* These are
s: without this, the global paragraph bottom margin hits
every stat except the last (p:last-child zeroes it), and the mismatch
shifts the last stat visibly lower in the centered flex row. */
margin: 0;
font-size: 1.25rem;
color: var(--text);
}
.proof__stat b {
font-size: 1.375rem;
font-weight: 700;
color: var(--text);
letter-spacing: -.02em;
}
.stars {
display: inline-flex;
gap: 2px;
color: var(--gold);
vertical-align: middle;
}
/* --- Card grids ---------------------------------------------------------- */
.grid {
display: grid;
gap: 24px;
}
/* Two fixed columns, not auto-fit: every .grid--2 on the site holds exactly
four cards, and a full-width container fits three auto-fit tracks, which
left the fourth card orphaned on a row of its own. Stacks under 720px,
where two columns would be narrower than a card wants to be. */
.grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
.grid--2 {
grid-template-columns: 1fr;
}
}
/* min() keeps the track from ever exceeding the available width, so these
never force horizontal scroll on narrow phones (e.g. 320px iPhone SE). */
.grid--3 {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.grid--4 {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.card {
padding: 28px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card h3 {
margin-bottom: 8px;
}
.card p:last-child {
margin-bottom: 0;
}
.card p {
font-size: 1.25rem;
}
.card--link:hover {
transform: translateY(-2px);
border-color: var(--gray-300);
box-shadow: var(--shadow-lg);
}
.card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 18px;
border-radius: var(--radius);
background: var(--brand-tint);
color: var(--brand-darker);
}
.card__icon svg {
display: block;
}
/* --- Legal pages (terms, privacy) ---------------------------------------
Long-form copy: narrow measure, generous spacing, no display font. */
.legal {
max-width: 820px;
margin: 0 auto;
}
/* Body copy used as an intro rather than as the whole section — e.g. under
a section-head on /what-is-inoutboard/. The last paragraph's margin is
zeroed, so without this the prose runs straight into whatever follows.
Legal pages, where .legal is the last thing in its container, are
untouched. */
.legal:not(:last-child) {
margin-bottom: clamp(40px, 5vw, 64px);
}
.legal h2 {
margin-top: 2em;
font-size: 1.5rem;
}
.legal h3 {
margin-top: 1.6em;
font-size: 1.25rem;
}
.legal h4 {
margin-top: 1.4em;
font-size: 1.125rem;
}
.legal p {
margin-bottom: 1.1em;
font-size: 1.0625rem;
line-height: 1.7;
}
.legal ul,
.legal ol {
margin: 0 0 1.4em 1.4em;
padding-left: .6em;
list-style: disc;
}
.legal ol {
list-style: decimal;
}
.legal li {
margin-bottom: .55em;
font-size: 1.0625rem;
line-height: 1.7;
}
.legal a {
text-decoration: underline;
}
/* --- Mosaic frame --------------------------------------------------------
A grid of small tiles — brand colours, grey placeholders and a few real
photos — with a white panel floated over the middle so only a decorative
border of tiles shows. Purely decorative: the grid is aria-hidden. */
.mosaic {
position: relative;
margin-bottom: clamp(40px, 5vw, 64px);
}
.mosaic__grid {
display: grid;
grid-template-columns: repeat(11, 1fr);
gap: 10px;
}
.mosaic__tile {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--gray-200);
border-radius: var(--radius);
}
.mosaic__tile img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Shapes */
.mosaic__tile--circ {
border-radius: 50%;
}
.mosaic__tile--leaf {
border-radius: 50% 12px 50% 12px;
}
/* Colours, drawn from the brand palette */
.mosaic__tile--brand {
background: var(--brand);
}
.mosaic__tile--brand-dark {
background: var(--brand-darker);
}
.mosaic__tile--navy {
background: var(--navy);
}
.mosaic__tile--gold {
background: #fbb945;
}
.mosaic__tile--green {
background: var(--green);
}
/* The white panel that masks the middle of the grid. */
.mosaic__panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(78%, 860px);
padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 56px);
background: var(--white);
border-radius: 48px;
text-align: center;
}
.mosaic__panel h2 {
margin-bottom: .15em;
font-family: var(--font-display);
font-size: clamp(1.75rem, 6.1vw, 4rem);
line-height: 1.15;
letter-spacing: 0;
text-wrap: balance;
}
.mosaic__panel p {
font-size: calc(1.275rem + 0.3vw);
color: var(--text);
}
/* Below tablet the tiles would be postage stamps — drop the frame and keep
the heading on its own. */
@media (max-width: 860px) {
.mosaic__grid {
display: none;
}
.mosaic__panel {
position: static;
transform: none;
width: 100%;
padding: 0;
}
}
/* --- Industry page hero (copy left, photo right) -------------------------
Two even columns on desktop, stacking to one under 880px. The copy stays
first when stacked so the h1 is still the first thing on the page. */
.industry-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
.industry-hero__copy {
max-width: none;
margin: 0;
text-align: left;
}
/* Sign-up call to action under the pitch. Left-aligned with the copy on
desktop; centred with it once the hero stacks. */
.industry-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: clamp(24px, 3vw, 32px);
}
.industry-hero__media {
border-radius: var(--radius-lg);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-lg);
overflow: hidden;
background: var(--white);
}
/* The industry photos are native 3:2, matching this column, so they need
no cropping — they fill the frame at their own aspect ratio. */
.industry-hero__media img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 880px) {
.industry-hero {
grid-template-columns: 1fr;
}
/* Re-centre when stacked, matching every other section head on the site. */
.industry-hero__copy {
text-align: center;
}
.industry-hero__actions {
justify-content: center;
}
}
/* --- Industry page headline ----------------------------------------------
Two stacked rows: a smaller lead-in ("The status board for") over the
industry name at full display size. Both stay inside the one
so the
heading remains a single sentence for search engines and screen readers.
The two rows are separated by size alone — no marker highlight here, unlike
the headlines elsewhere on the site. */
.industry-title__lead {
display: block;
/* Relative to the name row below, so the two rows scale together. Tune
the .55em to change the contrast between the rows. The floor stops the
lead-in shrinking past legibility on phones — Caveat reads noticeably
smaller than sans at the same size. */
font-size: max(1.25rem, .55em);
line-height: 1.1;
}
.industry-title__name {
display: block;
}
/* --- Industry cards (the /all-industries/ hub) ---------------------------- */
.industry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
gap: 20px;
}
.industry-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 100%;
padding: 24px 26px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
color: var(--text);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.industry-card:hover {
transform: translateY(-3px);
border-color: var(--brand);
box-shadow: var(--shadow-lg);
text-decoration: none;
}
.industry-card svg {
flex: none;
color: var(--brand-darker);
}
.industry-card__name {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.35;
}
/* Help hub topic cards: the same .industry-card row, with a short
description added under the name. Scoped to --desc so the other
.industry-card placements (the industry hub itself, and the "Where to
go next" links on industry/feature pages) are untouched -- this
variant is used only by /help/'s topic grid. min-width: 0 on the text
column lets the description wrap inside the row instead of forcing the
card wider or overflowing it. */
.industry-card--desc .industry-card__text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.industry-card__desc {
font-size: .875rem;
font-weight: 400;
line-height: 1.4;
color: var(--gray-500);
}
/* --- Feature tiles ------------------------------------------------------- */
/* Column counts live with the variants below: the six square tiles need
explicit counts, and the list variant sizes its tracks to content. */
.feature-grid {
display: grid;
gap: 20px;
}
/* Six across on a wide desktop. auto-fit used to size tracks to whatever
space was going, which landed on a 5+1 row at ~1024px and 4+2 lower
down. Six items divide evenly by 6, 3 and 2, so those are the counts:
six here, three-by-two below, two-by-three on phones (480px block).
:not(--list) keeps all of it off the compact variant other pages use. */
.feature-grid:not(.feature-grid--list) {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
/* Three-by-two. The threshold sits above 1024px deliberately, so that
width gets three comfortable columns rather than six cramped ones. */
@media (max-width: 1100px) {
.feature-grid:not(.feature-grid--list) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Three wide columns and a 1:1 ratio made 300px+ squares holding one
icon and one word, so the ratio goes and a floor takes over. min-height
rather than height: a wrapped label, a larger default font or page zoom
grows the tile instead of spilling out of it. Icon and label stay
centred by the flex centring on .feature-tile. */
.feature-grid:not(.feature-grid--list) .feature-tile {
aspect-ratio: auto;
min-height: 150px;
padding: 20px 16px;
}
}
/* Square blocks, one per module. Whole tile is the link target. */
.feature-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
aspect-ratio: 1 / 1;
padding: 16px;
text-align: center;
color: var(--text);
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-tile:hover {
transform: translateY(-3px);
border-color: var(--brand);
box-shadow: var(--shadow-lg);
text-decoration: none;
}
/* Placeholder art slot — holds an icon now, an later. */
.feature-tile__art {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: var(--radius);
}
/* Overlapping shapes darken where they cross, like a printed
two-colour illustration. */
.feature-tile__art svg .blend {
mix-blend-mode: multiply;
}
.feature-tile__art svg {
display: block;
}
.feature-tile__art img {
width: 100%;
height: 100%;
object-fit: contain;
}
.feature-tile__name {
font-size: 1.125rem;
font-weight: 700;
line-height: 1.25;
}
/* Wraps the name and (opt-in, list variant only) description line so they
can stack as a column without touching the icon/arrow layout. `contents`
keeps the wrapper invisible everywhere else -- the name renders exactly
as if it were still a direct flex child of .feature-tile. */
.feature-tile__text {
display: contents;
}
/* Secondary line under the name -- only rendered when a placement opts in
(FeatureGrid's ShowDescriptions). Quieter than the name: smaller, regular
weight, muted gray, same "quiet second row" color as .section-head__sub. */
.feature-tile__desc {
font-size: .875rem;
font-weight: 400;
line-height: 1.4;
color: var(--gray-500);
}
/* Trailing arrow — only shown in the compact list variant below. */
.feature-tile__arrow {
display: none;
flex: none;
color: var(--brand-darker);
}
/* Compact list variant — slim three-across cards (icon, name, arrow),
matching the help-center topic cards. */
.feature-grid--list {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
.feature-grid--list .feature-tile {
flex-direction: row;
justify-content: flex-start;
gap: 16px;
aspect-ratio: auto;
padding: 18px 26px;
text-align: left;
}
.feature-grid--list .feature-tile__art {
width: 44px;
height: 44px;
}
.feature-grid--list .feature-tile__art svg {
width: 100%;
height: 100%;
}
/* flex: 1 (with the column stack, when a description is present) moves
to the wrapper so the name/description pair takes the same middle
column the bare name used to occupy. min-width: 0 lets the text wrap
inside that column instead of stretching the card to fit it. */
.feature-grid--list .feature-tile__text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
flex: 1;
min-width: 0;
}
.feature-grid--list .feature-tile__arrow {
display: block;
}
/* Phone layout for the square tiles: two columns, three rows. Below this
width the auto-fit track above collapses to one column, which made each
tile a full-width square -- six of those was a long scroll past the
fold. The aspect-ratio goes and a modest min-height takes over, with the
art and label scaled to suit. Icon stays above the label, the whole tile
is still the link, and labels wrap rather than shrink: two lines fit the
min-height. Colours, border, shadow, hover and focus are untouched.
:not(--list) keeps this off the compact variant every other page uses. */
@media (max-width: 480px) {
.feature-grid:not(.feature-grid--list) {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.feature-grid:not(.feature-grid--list) .feature-tile {
gap: 8px;
aspect-ratio: auto;
min-height: 116px;
padding: 14px 10px;
}
.feature-grid:not(.feature-grid--list) .feature-tile__art {
width: 40px;
height: 40px;
}
.feature-grid:not(.feature-grid--list) .feature-tile__art svg {
width: 100%;
height: 100%;
}
.feature-grid:not(.feature-grid--list) .feature-tile__name {
font-size: .875rem;
line-height: 1.3;
}
}
/* --- Feature showcase (tabs) -------------------------------------------- */
.tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 40px;
}
.tab {
padding: 12px 20px; /* >=44px tall: comfortable touch target */
background: var(--white);
border: 1px solid var(--gray-300);
border-radius: 999px;
font-family: inherit;
font-size: .9375rem;
font-weight: 600;
color: var(--text);
cursor: pointer;
transition: all .15s ease;
}
.tab:hover {
border-color: var(--brand);
color: var(--brand-darker);
}
.tab[aria-selected="true"] {
background: var(--navy);
border-color: var(--navy);
color: var(--white);
}
.tabpanel[hidden] {
display: none;
}
.showcase {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
.showcase h3 {
font-size: 1.5rem;
}
.showcase__list {
margin-top: 20px;
}
.showcase__list li {
position: relative;
padding-left: 30px;
margin-bottom: 12px;
font-size: 1.25rem;
}
.showcase__list svg {
position: absolute;
left: 0;
top: 3px;
color: var(--brand);
}
.showcase__media {
border-radius: var(--radius-lg);
border: 1px solid var(--gray-200);
box-shadow: var(--shadow-lg);
overflow: hidden;
background: var(--white);
}
.showcase__media img {
display: block;
width: 100%;
}
@media (max-width: 880px) {
.showcase {
grid-template-columns: 1fr;
}
.showcase__media {
order: -1;
}
}
/* --- Video facade (click to load — keeps visitors on site) --------------- */
.video-wrap {
max-width: var(--video-max);
margin: 0 auto;
/* White frame around the video, with an ambient shadow on all sides. */
padding: 10px;
background: var(--white);
border-radius: var(--frame-radius);
box-shadow: var(--shadow-shot);
}
/* A plain screenshot can sit in the same white frame as a video, keeping
its natural aspect ratio. Used on feature pages that have no demo
video yet. */
.video-wrap > img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-sm);
}
/* Two flat screenshots overlapped, after odoo.com: a back image top-left and a
front image bottom-right, each with the flat-screenshot shadow. Everything
is a percentage of the box, so the pair keeps its proportions at any width
(the box is a fixed 1.7:1). Put the BACK image first in the markup and size
its sizes= to 76% of the box, the front to 58%. The front one carries a
little padding so a print-out that runs to the image edge does not touch
the shadowed border. */
.shot-stack {
position: relative;
max-width: var(--video-max);
margin: 0 auto;
aspect-ratio: 1.7 / 1;
}
.shot-stack--wide {
aspect-ratio: 2.1 / 1;
}
/* For a tall back image (the Time History form is 1.6:1): narrower back so the
front print-out tucks over its corner without hiding the Print button. */
.shot-stack--tall {
aspect-ratio: 1.45 / 1;
}
.shot-stack--tall .shot-stack__img--back {
width: 70%;
}
.shot-stack__img {
position: absolute;
display: block;
height: auto;
box-sizing: border-box;
/* The same white frame as every other screenshot, at 6px instead of 10px
because these are scaled down inside a pair. */
border: 6px solid var(--white);
background: var(--white);
border-radius: calc(var(--radius-sm) + 6px);
box-shadow: var(--shadow-shot);
}
.shot-stack__img--back {
left: 0;
top: 0;
width: 76%;
}
.shot-stack__img--front {
right: 0;
bottom: 0;
width: 58%;
box-sizing: border-box;
padding: 1.5%;
}
/* 2:1, not 16:9 — every source video on Vimeo is 1920x960. Matching the box
to the footage means the poster is never cropped and the player never
letterboxes, so nothing shifts when the iframe swaps in. */
.video {
position: relative;
aspect-ratio: 2 / 1;
border-radius: 0;
overflow: hidden;
background: var(--navy);
}
/* For a video exported at 16:9 (the October 2026 status board,
calendar, dashboard, resources, messages, reports, alerts, mobile, setup and status update recordings and the home page introduction, Vimeo 1234217657, 1234446450, 1234469971, 1234479849, 1234491166, 1234502094, 1234515052, 1234520532, 1234528466, 1234535708 and 1234852323). In the 2:1 frame the player would pillarbox it with
black down both sides; this frame matches the file, so the poster and
the playing video line up with no jump on Play. */
.video--16x9 {
aspect-ratio: 16 / 9;
}
.video img,
.video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
}
.video__btn {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0;
background: rgba(21, 26, 38, .28);
border: 0;
cursor: pointer;
transition: background-color .2s ease;
}
.video__btn:hover {
background: rgba(21, 26, 38, .12);
}
/* This button is inset:0 inside .video, which clips its overflow, so the
global ring -- drawn 2px outside the button -- lands entirely in the
clipped region and nothing shows at all. Same two tones, turned inward:
a white band hugging the edge with the dark ring just inside it, both
within the clip. Two tones matter more here than anywhere else, since
what sits behind is a poster photo rather than a known flat colour. */
.video__btn:focus-visible {
outline-offset: -5px;
box-shadow: inset 0 0 0 2px var(--focus-ring-inner);
}
/* Styles EVERY span in the button, the .sr-only label included -- this
selector is (0,1,1) and .sr-only is (0,1,0), so the label loses its 1px
box and gets the 72px circle too. It stays hidden on position, overflow
and clip alone. Leave that alone: giving .sr-only its size back here
would put a second white circle beside the play control. */
.video__btn span {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--white);
color: var(--brand-darker);
box-shadow: var(--shadow-xl);
transition: transform .2s ease;
}
.video__btn:hover span {
transform: scale(1.06);
}
/* Outlined play glyph: a blue triangle with a dark keyline, rather than
the solid single-colour shape this used to be.
Set here rather than on each