/* ============================================================================
   Shadow Particle — company theme v2: "ink monolith"
   (bymonolog.com-inspired; loaded AFTER site.css on company pages only)

   The company site flips ink-FIRST: warm near-black paper, bone ink, a mono
   caption voice, and halftone smoke (WebGL, /js/company.js; the film grain
   lives inside that shader only — never as a page-wide overlay). It
   re-remaps the body.company tokens that site.css set to light paper — this
   file loads later, so equal-specificity rules here win. HeyU / app pages
   never load this file and keep the neutral ink editorial theme.

   Companion script: /js/company.js (smoke canvases, fitted wordmarks,
   service-row highlight). Everything here degrades without it: canvases
   keep a CSS gradient, wordmarks keep their clamp() size.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Geist — the reference site's own typeface (KH Teka, KH Type) is a
   commercial retail font we don't license, so the studio band below the hero
   runs on Geist: the closest open modern grotesque, with the same rigid
   curves and tight metrics, and one family covering display and body exactly
   like the reference does. Self-hosted alongside Inter (the site makes no
   third-party requests). Scoped to .c-studio further down, so no other page
   or section downloads these files.
   ------------------------------------------------------------------------- */
@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/fonts/geist-var.woff2') format('woff2');
}
@font-face {
	font-family: 'Geist Mono';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('/fonts/geist-mono-var.woff2') format('woff2');
}

body.company {
	/* Surfaces — warm ink (Monolog's #080807 family, a touch warmer than the
	   HeyU pages' neutral #0a0a0a so the two sections stay distinguishable) */
	--bg:            #0b0a09;
	--bg-1:          #161513;
	--bg-2:          #201f1c;
	--bg-3:          #2b2a26;
	--surface:       rgba(233, 232, 226, 0.05);
	--surface-2:     rgba(233, 232, 226, 0.09);
	--hairline:      rgba(233, 232, 226, 0.14);
	--hairline-2:    rgba(233, 232, 226, 0.28);

	/* Bone — the warm off-white the light bands and inverse cells use */
	--bone:          #e8e7e1;
	--bone-2:        #dcdbd3;

	/* Shadow Particle blue, tuned up for ink (site.css set the on-paper pair) */
	--accent:        #3567ff;
	--accent-2:      #6e97ff;

	/* Text — bone ink; mute/faint stay >= 4.5:1 on --bg */
	--text:          #edece6;
	--text-soft:     rgba(237, 236, 230, 0.8);
	--text-mute:     rgba(237, 236, 230, 0.64);
	--text-faint:    rgba(237, 236, 230, 0.56);

	--grad-brand:    linear-gradient(0deg, #3567ff, #3567ff);
	--grad-brand-2:  linear-gradient(0deg, #3567ff, #3567ff);
	--grad-text:     linear-gradient(0deg, #edece6, #edece6);

	--shadow:        0 24px 60px -20px rgba(0, 0, 0, 0.7);
	--shadow-glow:   0 0 0 1px var(--hairline), 0 30px 80px -40px rgba(53, 103, 255, 0.35);
	--ring:          0 0 0 3px rgba(110, 151, 255, 0.45);

	background: var(--bg);
	color: var(--text);
}

/* The mono caption voice — system mono, no new font files. Unscoped (not
   inside body.company): the release-notes page borrows this stylesheet's
   structural components while keeping the HeyU ink+indigo tokens. */
:root { --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; }

body.company ::selection { background: rgba(110, 151, 255, 0.35); color: #fff; }
body.company .accent-text,
body.company .gradient-text { color: var(--accent-2); }
body.company a.inline { color: var(--accent-2); border-bottom: 1px solid rgba(110, 151, 255, 0.4); }
body.company a.inline:hover { color: var(--text); border-bottom-color: rgba(110, 151, 255, 0.7); }

/* Pills back to ink-theme behavior (site.css's company block set paper values) */
body.company .btn-primary { background: var(--text); color: var(--bg); }
body.company .btn-primary:hover { background: #fff; }
body.company .btn-ghost { background: var(--surface-2); color: var(--text); }
body.company .btn-ghost:hover { background: rgba(233, 232, 226, 0.15); }
body.company .chip-dot { background: var(--accent-2); }
body.company .chip-accent { color: var(--accent-2); background: rgba(53, 103, 255, 0.16); border-color: rgba(110, 151, 255, 0.35); }

/* ---------------------------------------------------------------------------
   Chrome — nav back to ink glass (site.css's company block set paper glass)
   ------------------------------------------------------------------------- */
body.company .site-header.scrolled .navbar {
	background: rgba(11, 10, 9, 0.82);
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	box-shadow: inset 0 -1px 0 rgba(233, 232, 226, 0.12);
}
body.company .nav-drop-btn:hover { color: var(--accent-2); }
@media (min-width: 769px) {
	body.company .nav-drop { background: rgba(16, 15, 14, 0.9); }
	body.company .nav-drop::after { background: var(--accent); }
	body.company .nav-drop > a::before { color: var(--accent-2); }
	body.company .nav-item.open .nav-drop-btn { color: var(--accent-2); }
	body.company .nav-drop > a:hover strong,
	body.company .nav-drop > a[aria-current="page"] strong { color: var(--accent-2); }
	body.company .nav-drop > a[aria-current="page"] strong::after { background: var(--accent-2); }
	body.company .nav-drop-foot a:hover { color: var(--accent-2); }
	body.company .brand-trail .sep { color: var(--accent-2); }
	body.company .brand-trail a:hover { color: var(--accent-2); }
}

/* ---------------------------------------------------------------------------
   Mono captions — the Monolog label voice: uppercase mono, letterspaced,
   parenthesized in the markup itself ("(WHAT WE DO)"). A leading status dot
   variant marks section rails.
   ------------------------------------------------------------------------- */
.m-label {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-mute);
}
/* Section-label voice — the .dot variant is the bold, clean section header
   (Monolog's "● Success Stories"): solid text-colored dot + semibold
   sentence-case Inter, overriding the base mono treatment */
.m-label.dot {
	gap: 0.6rem;
	font-family: var(--font);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--text);
}
.m-label.dot::before {
	content: '';
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--text);
	flex: none;
}
/* mono meta line (dates, counters, coordinates) — sentence case allowed */
.m-meta {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	letter-spacing: 0.04em;
	color: var(--text-mute);
	font-variant-numeric: tabular-nums;
}

/* Every company eyebrow speaks the bold section-label voice — including
   the generated news section's, whose markup the content builder owns.
   (.c-bar is the opt-in for non-company pages that borrow this stylesheet:
   the HeyU product page tags its section-heads with it.) */
body.company .eyebrow,
.c-bar .eyebrow {
	font-family: var(--font);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--text);
}

/* .section-head becomes the section bar on company pages: a full-width
   hairline-topped row — the eyebrow wearing a bold status dot instead of
   the slash marker, the heading below. Covers the builder-owned sections
   (news strip, "More news.") and every subpage section without markup
   edits. */
body.company .section-head,
.section-head.c-bar {
	max-width: none;
	border-top: 1px solid var(--hairline-2);
	padding-top: 1.05rem;
}
body.company .section-head .h-section,
.section-head.c-bar .h-section { max-width: 20ch; }
body.company .section-head .eyebrow::before,
.section-head.c-bar .eyebrow::before {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--text);
}

/* Section head, Monolog anatomy: mono label above a huge tight display */
.c-head { margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.c-head .m-label { margin-bottom: 1.1rem; }
.c-head h2 {
	font-size: clamp(2.3rem, 5.4vw, 4.2rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 0.98;
	max-width: 20ch;
}

/* ---------------------------------------------------------------------------
   Section chrome — each section opens with a clean labeled bar (a bold dot
   + bold sentence-case text, no numbering — Marcus 2026-08-18), and
   sections on the ink ground carry a full-bleed top rule (.c-lined on the
   .section). The quiet mono voice (.m-label without .dot) stays for corner
   meta like the hero's "(Est. 2018 / Stockholm)".
   ------------------------------------------------------------------------- */
.c-sec {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
}
.section.c-lined { border-top: 1px solid var(--hairline); }

/* Grain overlay — a barely-there film over the whole page (the canvas is
   appended by company.js; keep this VERY dim, the reference's filter is
   almost subliminal) */
#c-grain {
	position: fixed;
	inset: 0;
	z-index: 2000;
	pointer-events: none;
	opacity: 0.015;
}

/* ---------------------------------------------------------------------------
   Smoke canvases — company.js renders drifting halftone smoke into any
   .c-smoke canvas (WebGL). Without JS/WebGL the canvas stays transparent and
   the parent's CSS gradient below is the whole picture.
   ------------------------------------------------------------------------- */
/* the canvas bleeds past its host so the blur can't reveal the canvas edge
   as a halo (the hosts clip it back with overflow: hidden) */
.c-smoke {
	position: absolute;
	inset: -32px;
	width: calc(100% + 64px);
	height: calc(100% + 64px);
	display: block;
	filter: blur(14px);
}
.c-smoke-host {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(90% 70% at 50% 88%, rgba(233, 232, 226, 0.14), transparent 62%),
		radial-gradient(70% 55% at 22% 30%, rgba(233, 232, 226, 0.05), transparent 70%),
		var(--bg);
}
.c-smoke-host > .container, .c-smoke-host > :not(.c-smoke) { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------
   Homepage hero — full-viewport ink: smoke behind, a narrow centered
   statement, corner mono meta, and the giant wordmark cropped by the bottom
   edge (company.js fits it to the container width; the clamp() is the no-JS
   fallback).
   ------------------------------------------------------------------------- */
.c-hero {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	padding-top: clamp(5rem, 9vh, 7rem);
	overflow: hidden;
}
/* the mark + statement block centers in all the space above the meta row
   and wordmark, which sit at the bottom */
.c-hero .c-hero-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.c-hero-mark { display: grid; justify-items: center; margin-bottom: clamp(1.6rem, 4vh, 2.8rem); }
.c-hero-mark svg { width: 44px; height: 44px; color: var(--text); }
/* app-icon variant (the HeyU page) — the big 3D icon render, corners and
   shadows baked into the artwork, sized to be the hero's centerpiece */
.c-hero-mark img { width: clamp(104px, 13vw, 156px); height: auto; }

.c-hero-copy {
	margin-inline: auto;
	max-width: 21rem;
	text-align: center;
	display: grid;
	gap: 1.6rem;
}
.c-hero-copy h1,
.c-hero-copy p {
	font-family: var(--font);
	font-size: clamp(1.02rem, 1.5vw, 1.18rem);
	font-weight: 550;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--text);
	text-wrap: balance;
}
.c-hero-copy p { color: var(--text-soft); }

/* corner meta row sits above the wordmark */
.c-hero-meta {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
@media (max-width: 640px) { .c-hero-meta span:last-child { display: none; } }

/* the giant wordmark — full-bleed at the hero's bottom, fully visible
   (not bottom-cropped), in the reference's warm-gray #888783 */
.c-hero-wordmark {
	align-self: stretch;
	margin-top: clamp(1rem, 2.5vh, 1.8rem);
	padding-inline: var(--gutter);
	padding-bottom: clamp(0.6rem, 1.6vh, 1.2rem);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(3rem, 11.5vw, 12.5rem);
	letter-spacing: -0.045em;
	line-height: 0.9;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
	color: #888783;
	user-select: none;
}

/* .bright — the HeyU page's wordmark reads in full ink, not the muted
   #888783 (Marcus 2026-08-18: the app name should be bright) */
.c-hero-wordmark.bright { color: var(--text); opacity: 0.95; }

/* hero load-in — mirrors site.css's .hero .reveal choreography/delays */
.c-hero .reveal {
	opacity: 1; transform: translateY(0.0px); transition: none;
	animation: c-hero-in 0.9s var(--ease) var(--hero-delay) both;
}
.c-hero .reveal[data-delay="1"] { animation-delay: calc(var(--hero-delay) + 0.15s); }
.c-hero .reveal[data-delay="2"] { animation-delay: calc(var(--hero-delay) + 0.3s); }
.c-hero .c-hero-wordmark.reveal { animation-name: c-hero-word-in; animation-delay: calc(var(--hero-delay) + 0.35s); }
@keyframes c-hero-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes c-hero-word-in { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: translateY(0); } }

/* ---------------------------------------------------------------------------
   Marquee — a full-bleed hairline strip of mono words on slow loop.
   Markup: .c-marquee > .c-marquee-track > 2x .c-marquee-row (second one
   aria-hidden). CSS-only motion; reduced motion parks it.
   ------------------------------------------------------------------------- */
.c-marquee {
	overflow: hidden;
	border-block: 1px solid var(--hairline);
	padding-block: 0.95rem;
}
.c-marquee-track { display: flex; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
	.c-marquee-track { animation: c-marquee 36s linear infinite; }
}
.c-marquee-row {
	display: flex;
	align-items: center;
	flex: none;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-mute);
	white-space: nowrap;
}
.c-marquee-row span { padding-inline: 1.4rem; }
.c-marquee-row span::after { content: '✦'; margin-left: 2.8rem; color: var(--accent-2); font-size: 0.6rem; }
@keyframes c-marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------------
   Studio band typography — the one section that speaks in the reference's
   own voice (Geist, declared at the top of this file). Remapping the three
   font tokens carries most of it: the descendants already read them
   (h2, .fact-num and .c-note p take --font-display; .fact-label, .m-label
   and .c-note-sig span take --font-mono; .m-label.dot takes --font). The
   explicit font-family is still required — custom properties inherit, but
   font-family was already RESOLVED on <body>, so plain text inside the
   section would otherwise stay Inter.
   ------------------------------------------------------------------------- */
.c-studio {
	--font:          'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-display:  'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-mono:     'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
	font-family: var(--font);
}

/* ---------------------------------------------------------------------------
   Bone band — a light section inside the ink page (Monolog's case-study
   band). Token-scoped remap, same pattern as site.css's .band-heyu.
   ------------------------------------------------------------------------- */
body.company .c-bone {
	--bg:            #e8e7e1;
	--bg-1:          #dedcd5;
	--bg-2:          #d4d2ca;
	--bg-3:          #c9c7be;
	--surface:       rgba(12, 11, 9, 0.05);
	--surface-2:     rgba(12, 11, 9, 0.09);
	--hairline:      rgba(12, 11, 9, 0.16);
	--hairline-2:    rgba(12, 11, 9, 0.34);
	--accent:        #1a49e0;
	--accent-2:      #0f3ecc;
	--text:          #0c0b09;
	--text-soft:     rgba(12, 11, 9, 0.8);
	--text-mute:     rgba(12, 11, 9, 0.62);
	--text-faint:    rgba(12, 11, 9, 0.56);
	background: var(--bg);
	color: var(--text);
}
body.company .c-bone ::selection { background: rgba(26, 73, 224, 0.2); color: var(--text); }

/* ---------------------------------------------------------------------------
   Ash band — the mid-tone between the page ink and .c-bone, for sections that
   need to lift off the ground without flipping to light. Same scoped-remap
   pattern as the bone band: only the surfaces and hairlines move, the bone
   text tokens carry over from body.company (measured at 6.4:1 / 5.3:1 for
   --text-mute / --text-faint on the original #201f1c ground — darkened
   2026-08-21 per Marcus, which only raises those ratios).
   ------------------------------------------------------------------------- */
body.company .c-ash {
	--bg:            #121110;
	--bg-1:          #1c1b1a;
	--bg-2:          #262524;
	--bg-3:          #302f2e;
	--surface:       rgba(233, 232, 226, 0.06);
	--surface-2:     rgba(233, 232, 226, 0.10);
	--hairline:      rgba(233, 232, 226, 0.16);
	--hairline-2:    rgba(233, 232, 226, 0.30);
	background: var(--bg);
	color: var(--text);
}

/* ---------------------------------------------------------------------------
   Facts — giant numeral over a mono label, hairline top rule (restyles the
   shared .fact component into the Monolog stat voice)
   ------------------------------------------------------------------------- */
body.company .fact { border-top-color: var(--hairline-2); padding-top: 1.3rem; }
body.company .fact-num {
	font-size: clamp(3rem, 6.5vw, 5.5rem);
	font-weight: 650;
	letter-spacing: -0.045em;
}
body.company .fact-label {
	margin-top: 0.7rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-mute);
}

/* ---------------------------------------------------------------------------
   Founder statement — the studio band's whole voice, and a direct replica of
   the reference's below-hero block: ONE uniform run of type carrying the
   entire message (no headline/body split, no stats beside it), signed small
   and quiet underneath. Used by the studio band only.

   The measurements are taken from the reference: 41.1px at a 1232px viewport
   (~3.3vw), line-height 1.1, letter-spacing -0.03em, and a ~14.5em measure
   that keeps lines short enough to read as a statement rather than a
   paragraph. The em-based max-width holds that line length at every step of
   the clamp; a px or ch cap would not.
   ------------------------------------------------------------------------- */
.c-note h2 {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 3.3vw, 3rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.3;
	max-width: 14.5em;
}
/* The statement sits further right than the other rail sections: with the
   stats gone the left column is only a label, and the reference carries the
   same deep indent. Scoped to .c-studio so the news / services / FAQ rails
   keep the standard 0.28fr split.

   The min-width query is required, not stylistic: .c-rail stacks to one
   column at <=860px via a bare `.c-rail` rule, which this two-class selector
   would outrank on specificity and re-split the grid on phones. */
@media (min-width: 861px) {
	.c-studio .c-rail { grid-template-columns: minmax(180px, 0.6fr) 1fr; }
}
/* Signature — the reference keeps it in the body face, sentence case and
   muted (no mono, no uppercase): with the stats gone it is the only small
   text here, and the mono chrome voice would sit alone and unrelated. */
.c-note-sig { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); display: grid; gap: 0.15rem; justify-items: start; }
.c-note-sig strong { font-size: 0.95rem; font-weight: 600; color: var(--text-soft); }
.c-note-sig span { font-size: 0.95rem; font-weight: 500; color: var(--text-mute); }

/* ---------------------------------------------------------------------------
   Rail sections — Monolog's editorial two-column: a sticky mono label on the
   left, content on the right. Stacks on tablets.
   ------------------------------------------------------------------------- */
.c-rail {
	display: grid;
	grid-template-columns: minmax(180px, 0.28fr) 1fr;
	gap: clamp(1.6rem, 4vw, 4rem);
	align-items: start;
}
.c-rail-label {
	position: sticky;
	top: 6.5rem;
	display: grid;
	gap: 0.6rem;
	justify-items: start;
}
@media (max-width: 860px) {
	.c-rail { grid-template-columns: 1fr; }
	.c-rail-label { position: static; }
}

/* ---------------------------------------------------------------------------
   Service rows — giant display lines that sit dimmed and light up as they
   pass the viewport's middle (company.js toggles .lit; no-JS = all lit).
   ------------------------------------------------------------------------- */
.c-svc {
	display: grid;
	grid-template-columns: 3.6rem 1fr;
	gap: 0.4rem clamp(1rem, 2.5vw, 2rem);
	align-items: baseline;
	padding: clamp(1.6rem, 3.4vw, 2.4rem) 0;
	border-bottom: 1px solid var(--hairline);
}
.c-svc-num {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	color: var(--accent-2);
	transition: color 0.4s var(--ease);
}
.c-svc h3 {
	font-size: clamp(2.1rem, 5.2vw, 4.3rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 0.98;
	color: var(--text);
	transition: color 0.4s var(--ease);
}
.c-svc p {
	grid-column: 2;
	max-width: 46ch;
	color: var(--text-mute);
	font-size: 0.98rem;
	transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
/* the dimmed resting state only exists once company.js is live (html[data-cjs])
   — a no-JS visit reads every row at full ink */
html[data-cjs] .c-svc:not(.lit) .c-svc-num { color: var(--text-faint); }
html[data-cjs] .c-svc:not(.lit) h3 { color: var(--text-faint); }
html[data-cjs] .c-svc:not(.lit) p { opacity: 0; transform: translateY(6px); }
@media (max-width: 640px) {
	.c-svc { grid-template-columns: 1fr; }
	.c-svc p { grid-column: 1; }
}

/* ---------------------------------------------------------------------------
   HeyU band — the flagship section keeps HeyU's indigo inside the ink page
   (accent-scoped remap, same rule as site.css's .band-heyu).
   ------------------------------------------------------------------------- */
body.company .c-heyu {
	--accent:        #6b5ef6;
	--accent-2:      #8b7bff;
	border-block: 1px solid var(--hairline);
	background: var(--bg);
}
.c-heyu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* bold two-column lockup: giant title + lede + CTAs left, the 3D app-icon
   render as the section's centerpiece right (drifting gently on scroll —
   parallax-driven, so it reveals with .reveal-fade, never .reveal) */
.c-heyu-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	margin-top: clamp(2rem, 4.5vw, 3.6rem);
}
.c-heyu-title {
	font-size: clamp(3.6rem, 11vw, 11rem);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 0.9;
	text-transform: uppercase;
}
.c-heyu-title .tm { color: var(--accent-2); }
.c-heyu-lockup .lede { max-width: 44ch; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.c-heyu-lockup .btn-row { margin-top: 1.8rem; }
/* the render carries its own baked tilt + shadow — size it, nothing else */
.c-heyu-render {
	width: clamp(240px, 30vw, 460px);
	height: auto;
	justify-self: center;
}
@media (max-width: 900px) {
	.c-heyu-hero { grid-template-columns: 1fr; }
	.c-heyu-render { width: min(62vw, 320px); margin-top: 0.5rem; }
}

/* ---------------------------------------------------------------------------
   Principle rows — "STEP /01" mono kicker, big title, description
   ------------------------------------------------------------------------- */
.c-step {
	display: grid;
	grid-template-columns: minmax(120px, 0.24fr) 1fr;
	gap: clamp(1rem, 3vw, 3rem);
	padding: clamp(1.8rem, 4vw, 2.8rem) 0;
	border-bottom: 1px solid var(--hairline);
}
.c-step-kicker { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.c-step-kicker b { display: block; margin-top: 0.3rem; color: var(--accent-2); font-weight: 500; }
.c-step h3 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
.c-step p { margin-top: 0.7rem; color: var(--text-mute); max-width: 56ch; }
@media (max-width: 640px) { .c-step { grid-template-columns: 1fr; gap: 0.6rem; } }

/* ---------------------------------------------------------------------------
   Homepage FAQ — the shared .faq accordion inside a rail section (the
   reference parks its FAQ right before the closing CTA). The shared
   component centers itself at 760px; inside the rail it hugs the left.
   ------------------------------------------------------------------------- */
body.company .c-rail .faq { margin-inline: 0; }
.c-faq-more { margin-top: 2rem; color: var(--text-mute); font-size: 0.98rem; }

/* ---------------------------------------------------------------------------
   Closing CTA — giant condensed staggered lines over a smoke band
   ------------------------------------------------------------------------- */
.c-cta {
	padding-block: clamp(5rem, 12vw, 10rem);
	overflow: hidden;
}
.c-cta .c-sec { margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.c-cta-lines { display: grid; gap: 0.1em; }
.c-cta-line {
	font-family: var(--font-display);
	font-size: clamp(2.7rem, 9.4vw, 9rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.88;
	text-transform: uppercase;
	color: var(--text);
}
.c-cta-line .arrow { color: var(--accent-2); font-weight: 600; margin-right: 0.12em; }
.c-cta-line:nth-child(2) { margin-left: clamp(2rem, 10vw, 10rem); }
.c-cta-line:nth-child(3) { margin-left: clamp(4rem, 20vw, 20rem); }
.c-cta .btn-row { margin-top: clamp(2.2rem, 5vw, 3.4rem); }
/* Every button on the company pages is a square slab rather than the site's
   pill — the reference's g_btn_main shape. Scoped to body.company on purpose:
   the HeyU / app pages never carry that class, so they keep their pills.
   (.btn-news is a .btn variant, so it squares off here too. The dropdown
   triggers and the hamburger keep their radius — they have no visible button
   shape, only a hover fill.) */
body.company .btn { border-radius: 2px; }

/* The lead CTA slab — the reference's g_btn_main anatomy in full: label on the
   left, a small darker chip carrying the arrow on the right. The chip is its
   own class, so any button can take one. */
.btn-slab {
	border-radius: 2px;
	font-weight: 700;
	font-size: clamp(1.05rem, 1.6vw, 1.4rem);
	gap: 0;
	padding: 0.8rem 0.8rem 0.8rem 1.9rem;
}
.btn-chip {
	display: grid;
	place-items: center;
	width: 1.95em;
	height: 1.95em;
	margin-left: 1.15rem;
	border-radius: 2px;
	/* the chip inverts its button: dark ground, bone glyph */
	background: var(--bg-3);
	color: var(--text);
	font-size: 0.9em;
	font-weight: 500;
	line-height: 1;
	transition: transform 0.25s var(--ease);
}
.btn:hover .btn-chip { transform: translate(2px, -2px); }

/* the lead CTA is centred under the staggered lines */
.c-cta .btn-row { justify-content: center; }

/* Staggered line reveal. Deliberately NOT qualified by the reveal class: the
   lines fade in with .reveal-fade (opacity only) so the scroll parallax in
   site.js can own their transform, and keying these on .reveal would have
   silently dropped the stagger when that swap happened. */
.c-cta .c-cta-line { transition-delay: 0s; }
.c-cta .c-cta-line:nth-child(2) { transition-delay: 0.1s; }
.c-cta .c-cta-line:nth-child(3) { transition-delay: 0.2s; }

/* ---------------------------------------------------------------------------
   News story rows — the Monolog "Success Stories" anatomy: hairline-
   separated whole-row links (media panel left, mono kicker + display title
   + summary right), rendered by newsRowHtml in build-content.mjs for the
   homepage strip (bone band), the news index, and the article "More news"
   block. Token-driven, so rows read on bone and ink alike.
   ------------------------------------------------------------------------- */
.c-story {
	display: grid;
	grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr);
	gap: clamp(1.2rem, 3vw, 2.5rem);
	align-items: start;
	padding-block: clamp(1.6rem, 3.5vw, 2.6rem);
}
.c-story + .c-story { border-top: 1px solid var(--hairline); }
.c-story.no-media { grid-template-columns: 1fr; }
.c-story-media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--bg-2);
	overflow: hidden;
}
.c-story-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}
.c-story:hover .c-story-media img { transform: scale(1.03); }
.c-story-icon { display: grid; place-items: center; color: var(--accent); }
.c-story-icon svg { width: clamp(34px, 4vw, 52px); height: clamp(34px, 4vw, 52px); }
.c-story-body { display: block; min-width: 0; }
.c-story-kicker {
	display: block;
	margin-bottom: 0.9rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-mute);
	font-variant-numeric: tabular-nums;
}
.c-story-kicker b { color: var(--accent); font-weight: 600; }
.c-story-title {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2.3rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
	transition: color 0.25s var(--ease);
}
.c-story:hover .c-story-title, .c-story:focus-visible .c-story-title { color: var(--accent); }
.c-story-sum {
	display: block;
	margin-top: 0.7rem;
	color: var(--text-mute);
	font-size: 0.98rem;
	max-width: 60ch;
}
@media (max-width: 720px) {
	.c-story { grid-template-columns: 1fr; }
	.c-story-media { aspect-ratio: 16 / 9; }
}

/* Homepage news strip — the rows run the full container (no rail indent) and
   the media column takes a much bigger share, so the artwork reads large and
   left-anchored. Everything in the band shares ONE left edge at the page
   gutter: the section label, the media panels, the dividers and the closer.

   Behind min-width: 721px on purpose, not for taste: .c-story collapses to a
   single column at <=720px via a bare `.c-story` rule that this
   higher-specificity selector would otherwise outrank and re-split on phones.

   The news index (.c-news-index, on the section wrapping its rail) shares the
   enlargement since 2026-08-21 per Marcus — same ratio, so the two surfaces
   speak with one voice. */
@media (min-width: 721px) {
	.c-news-strip .c-story:not(.no-media),
	.c-news-index .c-story:not(.no-media) {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
		align-items: center;
	}
	/* the icon panels scale with the panel — a small glyph in a large box reads
	   as a broken image */
	.c-news-strip .c-story-icon svg,
	.c-news-index .c-story-icon svg { width: clamp(46px, 6vw, 88px); height: clamp(46px, 6vw, 88px); }
}
/* The first row opens the band directly under its label. Its own top padding
   sits on top of the label's margin, which together floated the artwork away
   from the title it belongs to — so the padding goes and the label's margin
   tightens, leaving one deliberate gap instead of two stacked ones. */
.c-news-strip .c-sec { margin-bottom: clamp(1.2rem, 2.5vw, 2rem); }
.c-news-strip .c-stories > .c-story:first-child { padding-top: 0; }

/* the giant closing link — Monolog's "07 View All Stories (→)" */
.c-stories-more {
	display: block;
	margin-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--hairline);
	padding-top: clamp(1.4rem, 3vw, 2rem);
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 4.6vw, 3.6rem);
	font-weight: 650;
	letter-spacing: -0.035em;
	line-height: 1;
	transition: color 0.25s var(--ease);
}
.c-stories-more:hover, .c-stories-more:focus-visible { color: var(--accent); }
.c-stories-count {
	display: block;
	margin-bottom: 0.8rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--text-mute);
}
.c-stories-arrow { color: var(--accent); }

/* ---------------------------------------------------------------------------
   Statement — bone ghosts (site.css's company block set ink ghosts for paper)
   ------------------------------------------------------------------------- */
body.company [data-words] .w { color: rgba(237, 236, 230, 0.16); }
body.company [data-words] .w.on { color: var(--text); }
body.company [data-words] .w.acc.on { color: var(--accent-2); }
body.company .statement p span:not(.w) { color: var(--accent-2); }
body.company .statement-label {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--text);
}
body.company .statement-label::before {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--text);
	flex: none;
}
body.company .statement p { max-width: 26ch; }
body.company .rows-num, body.company .p-num { color: var(--accent-2); }

/* Shared components that read wrong on ink without a nudge */
body.company .icon-tile { background: transparent; border-color: transparent; color: var(--accent-2); }
body.company .card.cap .icon-tile { color: var(--accent-2); }
body.company .section-head .eyebrow::before { color: var(--accent-2); }
body.company .site-header .nav-cta { background: var(--text); color: var(--bg); }
body.company .site-header .nav-cta:hover { background: #fff; }

/* ---------------------------------------------------------------------------
   Footer — the ink monolith band, text-styled after the reference's footer
   (2026-08-20): hairline top, mono paren labels — "(Company)" — over
   display-size links (↗ marks the external ones, ↳ the mailto), the bone
   wordmark, and the small sans meta row. Same markup as every page
   (site.js owns reveal/fit/clock).
   ------------------------------------------------------------------------- */
body.company .site-footer {
	background: var(--bg);
	color: var(--text);
	border-top: 1px solid var(--hairline);
}
body.company .footer-col h4 {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-mute);
}
/* the reference writes its column labels in parens — "(socials)" */
body.company .footer-col h4::before { content: '('; }
body.company .footer-col h4::after { content: ')'; }
body.company .footer-col a { opacity: 1; color: var(--text-soft); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.3vw, 1.3rem); }
body.company .footer-col a:hover { color: var(--text); }
body.company .footer-col a::before { color: var(--accent-2); }
/* external links carry the reference's ↗; the mailto a ↳ prefix (the
   reference uses ⮡, whose glyph most font stacks lack — ↳ is the covered
   equivalent). The prefix replaces the slash-hover ::before, so that link
   keeps a resting indent instead of the hover shift. */
body.company .footer-col a[href^="http"]::after { content: ' \2197'; }
body.company .footer-col a[href^="mailto:"]::before {
	content: '\21B3  ';
	position: static;
	opacity: 1; transform: none;
	color: var(--accent-2);
}
body.company .footer-col a[href^="mailto:"]:hover { padding-left: 0; }
body.company .footer-legal { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; }
body.company .footer-legal a { opacity: 0.72; }
body.company .footer-legal a:hover { opacity: 1; }
body.company .footer-legal a::before { color: var(--accent-2); }
body.company .footer-wordmark { color: var(--text); }
body.company .footer-wordmark:hover { color: var(--accent-2); }
/* bottom meta row: the reference speaks small sans here, not mono; dimmed
   lines use the AA-safe token instead of opacity on bone */
body.company .footer-bottom { letter-spacing: -0.01em; }
body.company .footer-bottom [data-date], body.company .footer-bottom .fb-copy { color: var(--text-mute); opacity: 1; }

/* ---------------------------------------------------------------------------
   Subpage heros — mono kicker above the display headline
   ------------------------------------------------------------------------- */
.hero .m-label { margin-bottom: 1.3rem; }
body.company .hero .display { max-width: 18ch; }
body.company .hero-rule { background: var(--hairline-2); }
/* a subpage hero can host the smoke too (About does): .c-smoke-host + canvas */
body.company .hero.c-smoke-host { overflow: hidden; }

/* Contact centerpiece — the giant display mailto (the reference's
   "⮡ hello@" idiom scaled up to be the page's focal point) */
.c-mail {
	display: inline-block;
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 4.6vw, 4.2rem);
	font-weight: 650;
	letter-spacing: -0.035em;
	line-height: 1.05;
	overflow-wrap: normal;
	transition: color 0.25s var(--ease);
}
.c-mail:hover, .c-mail:focus-visible { color: var(--accent-2); }
.c-mail-note { margin-top: 1.2rem; color: var(--text-mute); font-size: 0.98rem; }

/* FAQ rail aside — "still curious" under the sticky label */
.c-ask { display: grid; gap: 0.9rem; justify-items: start; margin-top: 1.6rem; }
.c-ask p { color: var(--text-mute); font-size: 0.95rem; }

/* Long-form (.doc) + FAQ read fine off the tokens; just soften rules */
body.company .doc h2 { letter-spacing: -0.035em; }

/* Doc chrome (legal pages + news articles — every .doc page that loads
   this stylesheet): the header opens with a hairline bar under the dot
   kicker, the meta line and Contents index speak mono */
.doc .doc-header {
	border-top: 1px solid var(--hairline-2);
	padding-top: 1.05rem;
}
.doc .doc-header .m-label { margin-bottom: 1.1rem; }
.doc .doc-updated {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-mute);
	font-variant-numeric: tabular-nums;
}
.doc .doc-updated .news-topic { text-transform: none; }
.doc-toc .doc-toc-label {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.doc-toc a {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------------
   HeyU-page feature kickers — the /NN + label rows above each feature
   bento (markup + layout live in site.css) speak mono here. Classes exist
   only on the HeyU product page, which loads this stylesheet.
   ------------------------------------------------------------------------- */
.feature-num {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	color: var(--accent-2);
}
.feature-label {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-mute);
}

/* ---------------------------------------------------------------------------
   HeyU-page pricing, monolith pass — the plan comparison table and the
   consumable packs both run on hairline rows: display-size prices, mono meta
   voice, no boxes.
   All classes exist only on the HeyU product page.
   ------------------------------------------------------------------------- */
.plan-tagline { font-size: 0.86rem; }
.plan-feat small,
.plan-val small {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.plan-val {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.plan-money .plan-val {
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 1.9vw, 1.7rem);
	font-weight: 650;
	letter-spacing: -0.03em;
	text-transform: none;
}
.plan-money > small,
.plan-grouplabel,
.plan-save,
.plan-best {
	font-family: var(--font-mono);
	letter-spacing: 0.08em;
	font-weight: 500;
}
.plan-money > small { font-size: 0.7rem; text-transform: uppercase; }
@media (max-width: 700px) {
	/* value cells hold one line each; the feature column is the one that wraps */
	.plan-money .plan-val { font-size: 1.05rem; }
	.plan-money > small, .plan-save, .plan-val { white-space: nowrap; }
	.plan-money > small { font-size: 0.62rem; }
	.plan-save { font-size: 0.62rem; }
	.plan-val { font-size: 0.66rem; }
	.plan-feat small, .plan-val small { font-size: 0.6rem; }
}
.pricing-fine {
	text-align: left;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	margin-top: 2rem;
}

.packs { column-gap: clamp(1.8rem, 4vw, 3rem); }
.pack { background: transparent; border: 0; border-radius: 0; padding: 0; }
.pack-tiers { grid-template-columns: 1fr; gap: 0; margin-top: 1.3rem; }
/* row anatomy: qty | (space) | savings | per-unit | price — the savings and
   per-unit price read as one group ahead of the pack price, the way the plan
   table stacks "SAVE 16%" under "$4.17/mo". Savings comes FIRST so that the
   first row of each pack, which has no savings, leaves its empty track
   against the spacer rather than as a hole between its per-unit price and
   its price. Two things keep that working: the markup writes .save BEFORE
   .unit (sparse auto-placement drops an item onto a new row when its
   explicit column sits behind the cursor, which split every row in two),
   and every span is placed explicitly by grid-column (the first row has no
   .save, so its per-unit price would otherwise auto-place into the savings
   track). The savings track carries a fixed min so the per-unit column
   stays aligned down the pack instead of collapsing on that first row. */
.pack-tier {
	background: transparent;
	border: 0;
	border-radius: 0;
	border-top: 1px solid var(--hairline);
	padding: 0.8rem 0;
	display: grid;
	grid-template-columns: minmax(6.2rem, auto) 1fr minmax(4.2rem, auto) auto minmax(4.2rem, auto);
	align-items: baseline;
	gap: 0.8rem;
}
.pack-tier:last-child { border-bottom: 1px solid var(--hairline); }
.pack-tier .qty { font-family: var(--font-display); font-size: 1.1rem; font-weight: 650; letter-spacing: -0.02em; }
.pack-tier .qty small { font-family: var(--font); font-size: 0.78rem; }
.pack-tier .unit {
	grid-column: 4;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--text-faint);
	font-variant-numeric: tabular-nums;
}
.pack-tier .save {
	grid-column: 3;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pack-tint);
	white-space: nowrap;
}
.pack-tier .cost {
	grid-column: 5;
	justify-self: end;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
/* the per-unit price stays on every width — it is the number that makes the
   savings legible, so hiding it on phones gutted the row's whole point */
@media (max-width: 480px) {
	.pack-tier { grid-template-columns: minmax(4.6rem, auto) 1fr minmax(3.6rem, auto) auto minmax(3rem, auto); gap: 0.5rem; }
	.pack-tier .qty { font-size: 1rem; }
	.pack-tier .unit { font-size: 0.68rem; }
	.pack-tier .save { font-size: 0.66rem; }
	.pack-tier .cost { font-size: 0.78rem; }
}

/* ---------------------------------------------------------------------------
   Release-notes rows — version entries in the Monolog step-row anatomy:
   a sticky marker column (mono VERSION kicker, giant version numeral,
   date, Latest mark) beside the entry's title + tagged notes. Used on the
   HeyU-section release-notes page, so everything here is token-driven
   (renders indigo there, blue on company pages).
   ------------------------------------------------------------------------- */
.rn-entry {
	display: grid;
	grid-template-columns: minmax(150px, 0.26fr) 1fr;
	gap: clamp(1.2rem, 3vw, 3rem);
	padding-block: clamp(2rem, 4.5vw, 3.2rem);
}
.rn-entry + .rn-entry { border-top: 1px solid var(--hairline); }
.rn-side {
	position: sticky;
	top: 6.5rem;
	align-self: start;
	display: grid;
	gap: 0.55rem;
	justify-items: start;
}
.rn-ver {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	font-weight: 650;
	letter-spacing: -0.04em;
	line-height: 1;
}
.rn-latest {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-2);
}
.rn-latest::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent-2);
	flex: none;
}
.rn-body h2 {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	margin-bottom: 0.9rem;
}
.rn-body > p { color: var(--text-mute); max-width: 62ch; }
.rn-body > p + p, .rn-body > ul + p, .rn-body > p + ul { margin-top: 0.9rem; }
@media (max-width: 720px) {
	.rn-entry { grid-template-columns: 1fr; gap: 1.2rem; }
	.rn-side { position: static; }
}

/* ---------------------------------------------------------------------------
   Reduced motion / print
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.c-hero .reveal, .c-cta .c-cta-line { animation: none; transition: none; }
}
@media print {
	.c-smoke, .c-marquee { display: none !important; }
	body.company { background: #fff; color: #000; }
}