/* ============================================================
   Heartbeat OS — goheartbeat.com

   How this file works
   -------------------
   One stylesheet for the whole site. No frameworks, no build
   step, no webfonts. Open it, read it top to bottom, edit it.

   It is written phone-first: every rule outside an @media block
   describes the phone layout. Two @media layers widen it:

      768px+   TABLET: grids go two-wide, nav sits inline
      1024px+  DESKTOP: everything at full size, grids three-wide

   Order of the file:

      1. Tokens          colours, type scale, spacing
      2. Reset + base    the few resets we actually need
      3. Layout          page shell, sections, rules
      4. Type            headings, eyebrows, lead paragraphs
      5. Components      nav, buttons, cards, steps, rows, form, footer
      6. Media queries   the two width layers
      ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS

   Colours are sampled from the pitch deck so the site and the
   deck are the same brand:

      --blue   #479FF8  the wordmark blue. Bright, low contrast
                        on white — use it for fills, rules and
                        large display type, never small text.
      --link   #0B62C4  a darkened blue that clears 4.5:1 on
                        white. Every blue *word* uses this one.
      --grey   #929292  the "OS" grey from the wordmark.

   Dark mode overrides sit right below, so the two themes are
   readable side by side rather than pages apart.
   ------------------------------------------------------------ */

:root {
	--blue:      #479FF8;
	--link:      #0B62C4;
	--grey:      #929292;

	--ink:       #101114;   /* headings                          */
	--body:      #3F4247;   /* paragraphs                        */
	--muted:     #6E7278;   /* eyebrows, captions, meta          */
	--faint:     #A8ACB2;   /* the lightest text we allow        */

	--bg:        #FFFFFF;
	--bg-soft:   #F6F7F9;   /* one tone deeper: banded sections  */
	--rule:      #E4E6EA;   /* hairlines                         */
	--card:      #FFFFFF;
	--glass:     rgba(255, 255, 255, 0.82);   /* floating nav    */
	--on-blue:   #FFFFFF;   /* ink on a filled button            */
	--grid-line:  rgba(20, 22, 28, 0.05);     /* graph paper, fine  */
	--grid-major: rgba(20, 22, 28, 0.08);     /* every fifth line   */

	/* Spacing scale. Everything in the site uses one of these
	   six values, which is what keeps the vertical rhythm even. */
	--s1: 8px;
	--s2: 16px;
	--s3: 24px;
	--s4: 40px;
	--s5: 64px;
	--s6: 96px;

	/* Letter colours — one per layer of the model. Olive is the
	   field (F: the people who show up), burgundy is the craft
	   (AS: the custom build), navy is the bedrock (T: the platform
	   underneath). The -soft versions are the same colours mixed
	   with white, for tinted backgrounds. */
	--olive:         #5F6B36;
	--olive-soft:    #E9EFD2;   /* page-top bands             */
	--olive-tint:    #F5F8EC;   /* small surfaces: tiles      */
	--olive-line:    #E5EBD2;   /* the tile's own hairline    */
	--burgundy:      #76303E;
	--burgundy-soft: #FBDCE4;
	--burgundy-tint: #FDEFF3;
	--burgundy-line: #F6D9E1;
	--navy:          #24466E;
	--navy-soft:     #DCE8FB;
	/* Navy's tint/line complete the palette; they come into use the day
	   t.html gets a .panel--t, which is then a one-line rule. */
	--navy-tint:     #EFF5FD;
	--navy-line:     #D9E6F8;

	/* Corner radii and the two shadows. Everything rounded uses
	   one of these, which is what keeps the softness consistent. */
	--r-sm:   10px;
	--r-md:   14px;
	--r-lg:   20px;
	--r-pill: 999px;

	--lift:    0 1px 2px rgba(20, 22, 28, 0.04), 0 10px 30px rgba(20, 22, 28, 0.06);

	--measure: 34em;        /* comfortable reading width         */
	--shell:   1120px;      /* max page width                    */

	/* Helvetica first — it is what the deck is set in, it is on
	   every Mac and iPhone, and it costs nothing to load. */
	--sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--link:    #7FBBFA;   /* the bright blue reads fine on black */
		--ink:     #F2F3F5;
		--body:    #C3C7CD;
		--muted:   #8E949C;
		--faint:   #6B7178;

		--olive:         #A9B478;
		--olive-soft:    #17190F;
		--olive-tint:    #191C11;
		--olive-line:    #262B1A;
		--burgundy:      #C98B98;
		--burgundy-soft: #1F1114;
		--burgundy-tint: #201316;
		--burgundy-line: #2E1A20;
		--navy:          #8FB0D9;
		--navy-soft:     #0F1824;
		--navy-tint:     #121C29;
		--navy-line:     #1D2A3B;

		--bg:      #0C0D10;
		--bg-soft: #14161A;
		--rule:    #262A30;
		--card:    #14161A;
		--glass:   rgba(20, 22, 26, 0.78);
		/* The blue lightens in dark mode, so filled buttons need
		   dark ink, and the hero grid has to draw in white. */
		--on-blue:   #0A0D12;
		--grid-line:  rgba(255, 255, 255, 0.055);
		--grid-major: rgba(255, 255, 255, 0.09);

		/* Shadows barely read on black; the hairline does the work. */
		--lift:    0 1px 0 rgba(255, 255, 255, 0.04) inset;
	}
}

/* ------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------ */

* { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
}

body {
	position: relative;
	margin: 0;
	background: var(--bg);
	color: var(--body);
	font: 400 17px/1.6 var(--sans);
	letter-spacing: -0.003em;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--link);
	text-decoration: none;
}

a:hover { text-decoration: underline; }

/* Keyboard focus must stay visible — several people will reach
   this site by tab, and the default ring is what tells them
   where they are. */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 3px;
	border-radius: 2px;
}

img, svg { max-width: 100%; }

p  { margin: 0 0 var(--s2); }
ul { margin: 0 0 var(--s2); padding-left: 1.15em; }
li { margin-bottom: var(--s1); }

strong { color: var(--ink); font-weight: 600; }

/* The faint grid behind the top of every page. It sits on the body,
   not the hero, so it runs from the very top — under the floating
   masthead — and z-index -1 keeps it behind every section's own
   background, which is what crops it below the hero. */
body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 700px;
	z-index: -1;
	background-image:
		linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
		linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
	mask-image: linear-gradient(to bottom, #000, transparent 78%);
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
	pointer-events: none;
}

/* The letter pages tint the whole top of the page. Because sections
   below carry their own opaque background, the colour stops where the
   hero ends. */
.tint-f  { background: var(--olive-soft); }
.tint-as { background: var(--burgundy-soft); }
.tint-t  { background: var(--navy-soft); }

/* ------------------------------------------------------------
   3. LAYOUT

   .shell centres and pads. .section owns the vertical rhythm.
   Nothing else sets top or bottom page margins, so sections
   always sit an even distance apart no matter how they are
   ordered or which ones get deleted.
   ------------------------------------------------------------ */

.shell {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 var(--s3);
}

.section {
	padding: var(--s3) 0;
	background: var(--bg);
}

/* Bands are told apart by tone, not by rules — a hairline only
   appears where two same-toned sections would otherwise merge. */
.section:not(.section--soft) + .section:not(.section--soft) {
	border-top: 1px solid var(--rule);
}

.section--soft   { background: var(--bg-soft); }

/* Anchor jumps must clear the sticky masthead. */
section[id] { scroll-margin-top: 110px; }
.section--tight  { padding: var(--s2) 0; }

/* ------------------------------------------------------------
   4. TYPE

   Display sizes are set in vw-clamped rem so headlines scale
   with the viewport instead of stepping at breakpoints. Tight
   negative tracking on the big sizes is what makes Helvetica
   look set rather than typed.
   ------------------------------------------------------------ */

h1, h2, h3 {
	color: var(--ink);
	font-weight: 600;
	letter-spacing: -0.032em;
	line-height: 1.08;
	margin: 0 0 var(--s3);
	text-wrap: balance;
}

h1 { font-size: clamp(36px, 6.4vw, 66px); letter-spacing: -0.04em; }
h2 { font-size: clamp(27px, 4.0vw, 40px); letter-spacing: -0.034em; }

h3 {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.3;
	margin-bottom: var(--s1);
}

/* The eyebrow — a small grey label above a heading. The deck
   puts a pale label at the top of every slide; this is that. */
.eyebrow {
	display: block;
	margin-bottom: var(--s2);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lead {
	max-width: var(--measure);
	color: var(--body);
	font-size: clamp(18px, 2.1vw, 21px);
	line-height: 1.55;
}

/* A block of running text, held to the reading measure. */
.prose { max-width: var(--measure); }

/* Anything that needs one rhythm-step of air above it. */
.gap-above { margin-top: var(--s3); }

/* A single sentence given its own line and weight. Used for the
   lines that carry the argument, e.g. "This isn't a tooling
   problem. It's an operating system problem." */
.claim {
	max-width: 30em;
	margin: var(--s3) 0 0;
	color: var(--ink);
	font-size: clamp(21px, 2.7vw, 27px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.32;
}

.claim--first { margin-top: 0; }     /* a claim that opens its section  */
.claim + .lead { margin-top: var(--s3); }

.blue { color: var(--link); }

.note {
	color: var(--muted);
	font-size: 15px;
}

/* A pill that carries one piece of proof, with a live dot. */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 15px;
	border: 1px solid var(--rule);
	border-radius: var(--r-pill);
	background: var(--card);
	box-shadow: var(--lift);
	color: var(--body);
	font-size: 14px;
}

.badge::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--olive);
}

.badge a { color: inherit; }

/* ------------------------------------------------------------
   5. COMPONENTS
   ------------------------------------------------------------ */

/* --- Masthead ------------------------------------------------
   Three links and a button. On a phone they wrap onto a second
   line, which is why there is no menu toggle and no JavaScript
   anywhere on this site. */

/* The bar floats: an inset rounded panel rather than a full-width
   strip with a border under it. On a phone it is two rows — brand
   and CTA, then the links — and it does not stick; from 768px up
   it sticks to the top. */
.masthead {
	z-index: 10;
	padding: var(--s2) var(--s3) 0;
}

.masthead__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	padding: 10px 12px 10px 18px;
	max-width: var(--shell);
	margin: 0 auto;
	background: var(--glass);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	box-shadow: var(--lift);
}

/* On a phone the bar carries the brand and the links only — two
   rows, no third. The CTA is hidden there because the bar does not
   stick on phones and the hero's own CTA sits right below it; it
   comes back at 768px, where it fits on one line. */
.masthead .wordmark { order: 1; }
.masthead .nav      { order: 2; flex-basis: 100%; margin-left: 0; }
.masthead .btn      { display: none; }

.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ink);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

/* The footer repeats the wordmark at a smaller size. */
.wordmark--small { font-size: 16px; }
.wordmark--small .pulse { width: 18px; height: 18px; }

.wordmark:hover { text-decoration: none; }
.wordmark b    { color: var(--link); font-weight: 700; }
.wordmark span { color: var(--grey); font-weight: 600; }

/* The pulse mark. Inline SVG, currentColor, so it follows the
   theme and needs no image file. */
.pulse {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--blue);
}

.nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 2px;
	margin-left: auto;
	font-size: 14px;
	overflow-x: auto;              /* safety valve on narrow phones */
	scrollbar-width: none;
}

.nav::-webkit-scrollbar { display: none; }

.nav a {
	padding: 7px 11px;
	border-radius: var(--r-sm);
	color: var(--body);
}

.nav a:hover { background: var(--grid-line); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--grid-line); }

/* --- Buttons ------------------------------------------------- */

.btn {
	display: inline-block;
	padding: 13px 24px;
	border: 1px solid var(--link);
	border-radius: var(--r-pill);
	box-shadow: var(--lift);
	background: var(--link);
	color: var(--on-blue);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.btn:hover { background: #0A57AC; border-color: #0A57AC; text-decoration: none; }

.btn--ghost {
	background: var(--card);
	border-color: var(--rule);
	color: var(--ink);
}

.btn--ghost:hover { border-color: var(--faint); background: var(--card); }

.btn--small { padding: 9px 16px; font-size: 15px; }

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	margin-top: var(--s3);
}

/* --- Hero --------------------------------------------------- */

/* The hero paints nothing: the tint and the grid both come from the
   body, so they start above it, behind the floating masthead. */
.hero { padding: var(--s4) 0; }

/* --- Grids --------------------------------------------------
   One grid class, phone-first single column. The media queries
   at the end decide when it goes two- or three-wide. */

.grid {
	display: grid;
	gap: var(--s3);
	margin-top: var(--s3);
}

button.btn { border: 0; cursor: pointer; font: inherit; }

/* --- Form ----------------------------------------------------
   One form on the site (walkthrough.html). Stacked labels,
   plain fields. The only JavaScript on the site lives next to
   it, in that file. */

.form { max-width: var(--measure); margin-top: var(--s3); }

.form label {
	display: block;
	margin-bottom: var(--s2);
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
}

.form input,
.form select {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	font: inherit;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
}

.form input:focus,
.form select:focus {
	outline: 2px solid var(--link);
	outline-offset: 1px;
	border-color: var(--link);
}

.form .btn { margin-top: var(--s2); }

/* --- Cards -------------------------------------------------- */

.card {
	padding: var(--s3);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	background: var(--card);
	box-shadow: var(--lift);
}

.card p:last-child { margin-bottom: 0; }

/* A list inside a card: the six things an offering covers. */
.card ul { margin: var(--s2) 0 0; padding-left: 1.1em; color: var(--muted); font-size: 15px; }
.card li { margin-bottom: 4px; }

.card__meta {
	display: block;
	margin-bottom: var(--s2);
	color: var(--blue);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* A card whose whole point is one short line — the three
   fragments in the problem section. */
.card--fragment p { color: var(--muted); font-size: 15px; }

/* --- Split panel --------------------------------------------
   One outer card: the explanation on the left, a grid of tinted
   tiles on the right. Phone-first, so it starts stacked and the
   tablet layer splits it into two columns. A --f/--as/--t
   modifier tints the tiles with that letter's pastel. */

.panel {
	display: grid;
	gap: var(--s3);
	margin-top: var(--s3);
	padding: var(--s3);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	background: var(--card);
	box-shadow: var(--lift);
}

.panel__intro { align-self: start; }
.panel__intro p:last-child { margin-bottom: 0; }
.panel__grid { display: grid; gap: var(--s2); }

.tile {
	padding: var(--s2);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	background: var(--bg-soft);
}

.tile .card__meta { margin-bottom: 6px; }
.tile h3 { margin-bottom: 4px; }
.tile p  { margin: 0; color: var(--muted); font-size: 15px; }

/* A --t modifier is a one-line addition when t.html wants a panel. */
.panel--f  .tile { background: var(--olive-tint);    border-color: var(--olive-line); }
.panel--as .tile { background: var(--burgundy-tint); border-color: var(--burgundy-line); }

/* --- Numbered steps (the engagement phases) ---------------- */

.steps { margin-top: var(--s3); counter-reset: step; }

.step {
	padding: var(--s3) 0;
	border-top: 1px solid var(--rule);
	counter-increment: step;
}

.step:last-child { border-bottom: 1px solid var(--rule); }

.step__no {
	display: block;
	margin-bottom: var(--s1);
	color: var(--blue);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.step__body { max-width: var(--measure); }
.step__body p:last-child { margin-bottom: 0; }

/* --- Plain definition rows (people, "you don't rebuild") --- */

.rows { margin-top: var(--s3); }

.row {
	padding: var(--s3) 0;
	border-top: 1px solid var(--rule);
}

.row:last-child { border-bottom: 1px solid var(--rule); }
.row h3 { margin-bottom: 4px; }
.row p  { margin: 0; color: var(--muted); font-size: 15px; }

/* --- Keyword chips -----------------------------------------
   Identity. Permissions. Hierarchy. Set as a run of pills, so a
   long boring list reads as inventory rather than prose. */

.keywords {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1) 10px;
	margin: var(--s3) 0 0;
	padding: 0;
	list-style: none;
}

.keywords li {
	margin: 0;
	padding: 7px 15px;
	border: 1px solid var(--rule);
	border-radius: var(--r-pill);
	background: var(--card);
	color: var(--ink);
	font-size: clamp(15px, 1.5vw, 17px);
	font-weight: 600;
	letter-spacing: -0.012em;
}

/* --- Call to action band -----------------------------------
   The last band before the footer. Deep navy — one shade above
   the footer's #0E1726 — so every page ends by descending into
   the brand. Same in both themes. */

/* The CTA is a full-bleed navy band, one shade above the footer,
   so every page ends by stepping down into the brand. Same in
   both themes. */
.cta {
	padding: var(--s4) 0;
	background: #1B2C47;
	color: #B6C1D2;
	text-align: center;
}

.cta h2 { margin-bottom: var(--s2); color: #FFFFFF; }

.cta .lead {
	margin: 0 auto;
	max-width: 30em;
	color: #B6C1D2;
}

.cta .actions { justify-content: center; }

.cta a { color: #C7CEDA; }

.cta .btn {
	background: var(--blue);          /* the bright brand blue pops on navy */
	border-color: var(--blue);
	box-shadow: none;                 /* a lift makes no sense on navy */
	color: #08121F;
}

.cta .btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.25);
	color: #E4EAF2;
}

/* --- Footer ------------------------------------------------
   The thick footer: a dark navy band — brand block plus three
   columns of grouped links, legal line under a hairline. The
   navy echoes the old goheartbeat.com footer; it reads the
   same in light and dark mode, so no overrides needed. */

.footer {
	background: #0E1726;
	color: #9AA3B2;
	font-size: 15px;
}

.footer a { color: #C7CEDA; }
.footer a:hover { color: #FFFFFF; }

.footer .wordmark   { color: #7FBBFA; }   /* the pulse strokes light blue */
.footer .wordmark b { color: #F2F5F9; }

.footer__grid {
	display: grid;
	gap: var(--s3);
	padding: var(--s4) 0 var(--s3);
}

.footer__brand p {
	margin: var(--s2) 0 0;
	max-width: 24em;
}

.footer__col h4 {
	margin: 0 0 var(--s2);
	color: #6E7887;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.footer__col ul { margin: 0; padding: 0; list-style: none; }

.footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: var(--s2) 0;
	color: #6E7887;
	font-size: 14px;
}

/* --- Figures ------------------------------------------------
   Inline SVG diagrams. Colours come from the letter palette, so
   a figure themes itself: the rack is navy (T, the bedrock) and
   what sits on it is olive and burgundy (F and AS output). */

.figure {
	margin: var(--s3) 0 0;
	max-width: 680px;
}

.figure svg { display: block; width: 100%; height: auto; }

.figure text {
	font: 600 12px var(--sans);
	fill: var(--muted);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Venn labels: the three circle names sit in their own lobes, the
   near-miss labels in the lenses, and the core in the middle. */
.figure .v-f    { fill: var(--olive); }
.figure .v-as   { fill: var(--burgundy); }
.figure .v-t    { fill: var(--navy); }
.figure .v-sub  { font-size: 10px; letter-spacing: 0.08em; }
.figure .lbl   { font-size: 11px; letter-spacing: 0.04em; text-transform: none; }
.figure .v-core { font-size: 15px; fill: var(--ink); letter-spacing: 0.02em; }

/* The Venn carries a lot of small type. Below 768px it would be
   unreadable, and the rows beneath it say the same thing in words. */
.figure--venn { display: none; }

.figure figcaption {
	margin-top: var(--s2);
	color: var(--muted);
	font-size: 15px;
}

/* --- Letter inks -------------------------------------------
   Olive = F (the field), burgundy = AS (the craft), navy = T
   (the bedrock). Last in this section on purpose: several
   components set their own colour, and these must win. */

.f-ink  { color: var(--olive); }
.as-ink { color: var(--burgundy); }
.t-ink  { color: var(--navy); }

/* ------------------------------------------------------------
   6. MEDIA QUERIES

   Only two layers, and only these two do structural work.
   ------------------------------------------------------------ */

/* --- TABLET ----------------------------------------------- */
@media (min-width: 768px) {

	.section { padding: var(--s4) 0; }
	.section--tight { padding: var(--s3) 0; }
	.hero { padding: var(--s4) 0 var(--s5); }

	.figure--venn { display: block; }

	.masthead { position: sticky; top: 0; }

	.masthead .nav { order: 2; flex-basis: auto; margin-left: auto; font-size: 15px; }
	.masthead .btn { display: inline-block; order: 3; }

	.grid--2, .grid--3 { grid-template-columns: 1fr 1fr; }

	.panel {
		grid-template-columns: 1fr 1.15fr;
		gap: var(--s4);
		padding: var(--s4);
	}

	.panel__grid { grid-template-columns: 1fr 1fr; }

	.footer__grid {
		grid-template-columns: 1.7fr 1fr 1fr 1fr;
		gap: var(--s4);
	}

	/* Phase number in a column beside the text. */
	.step {
		display: grid;
		grid-template-columns: 8rem 1fr;
		gap: var(--s3);
		padding: var(--s3) 0;
	}

	.step__no { margin: 0; padding-top: 5px; }

	.row {
		display: grid;
		grid-template-columns: 16rem 1fr;
		gap: var(--s3);
	}

	.row h3 { margin: 0; }
}

/* --- DESKTOP ---------------------------------------------- */
@media (min-width: 1024px) {

	body { font-size: 18px; }

	.grid--3 { grid-template-columns: repeat(3, 1fr); }

	.row { grid-template-columns: 20rem 1fr; }
}

/* ------------------------------------------------------------
   PRINT
   People forward these pages to their boards. Drop the furniture
   and let the text run.
   ------------------------------------------------------------ */

@media print {
	.masthead, .cta, .actions { display: none; }
	body { color: #000; background: #fff; font-size: 11pt; }
	.section { padding: 12pt 0; border-top: 0.5pt solid #999; }
	a { color: #000; }
}