/* ==========================================================================
   HDL Commerce V3 — base
   Reset, root tokens, typography, containers, sections, buttons, reveal.

   Ported 1:1 from the design handoff. Every declaration below is the winner
   of the effective cascade `assets/styles.css` -> `assets/base-2026.css`,
   computed by replaying both sheets over all 48 handoff pages at six
   viewport widths and resolving importance -> specificity -> order.

   Source lines
     styles.css      69-86    reset
                     91-138   typography  (winners are the V8 layer, 1719-1733)
                     143-160  layout helpers (winners are the V8 tail, 1714-1716)
                     165-192  buttons     (winners are the V8 layer, 1736-1749)
                     427-429  [data-reveal] + reduced motion (transform: 1842)
                     1690     label justify-self/align-self
                     1696-1733 V8 :root / type
   base-2026.css     15-23    font + palette root, body, primary button
                     253-256  heading normalisation
                     258-277  shared section heads
                     349-354  link colour, scroll padding
                     425-427  fixed-header body offset
   ========================================================================== */

/* --------------------------------------------------------------------------
   Root — legacy variable names kept because live handoff rules reference
   them; every one is bound to a theme.json token where an exact match exists.
   -------------------------------------------------------------------------- */
:root {
	/* type */
	--font-display: var( --wp--preset--font-family--display );
	--font-sans: var( --wp--preset--font-family--sans );
	--font-mono: var( --wp--preset--font-family--mono );

	/* accent */
	/* Must track --wp--preset--color--accent. Eight rules build translucent
	   accents from this triplet; leaving it blue would have left them blue
	   while everything around them turned emerald. */
	--accent-rgb: 0, 208, 143;
	--teal-rgb: 0, 194, 203;
	--mint: var( --wp--preset--color--accent );
	--mint-bright: var( --wp--preset--color--accent-bright );
	--emerald: var( --wp--preset--color--accent );
	--emerald-deep: var( --wp--preset--color--accent-deep );
	--mint-soft: var( --wp--custom--wash--heavy );
	--mint-wash: var( --wp--custom--wash--strong );

	/* surfaces */
	--dark: var( --wp--preset--color--base );
	--dark-2: var( --wp--custom--surface-deep );
	--dark-3: var( --wp--custom--surface-lift );
	--paper: var( --wp--preset--color--surface-card );
	--paper-2: var( --wp--preset--color--base );
	--paper-3: var( --wp--custom--surface-panel );
	--bg-raised: var( --wp--custom--surface-raised );

	/* ink */
	--ink: var( --wp--custom--ink );
	--ink-2: var( --wp--preset--color--body-text );
	--slate: var( --wp--custom--slate );
	--slate-2: var( --wp--custom--slate-deep );
	--on-dark: var( --wp--custom--ink );
	--on-dark-mut: var( --wp--custom--slate );

	/* rules */
	--line: rgba( 255, 255, 255, 0.1 );
	--line-2: rgba( 255, 255, 255, 0.08 );
	--on-dark-line: rgba( 255, 255, 255, 0.1 );

	/* shadow */
	--shadow-sm: none;
	--shadow-md: 0 2px 18px rgba( 0, 0, 0, 0.35 );
	--shadow-lg: 0 20px 60px rgba( 0, 0, 0, 0.45 );
	--shadow-mint: var( --wp--custom--shadow--accent );

	/* layout */
	--mh-h: var( --wp--custom--header-height );
	--gutter: var( --wp--custom--gutter );
}

@media ( max-width: 1080px ) {
	:root {
		--mh-h: var( --wp--custom--header-height-compact );
	}
}

/* --------------------------------------------------------------------------
   Reset — styles.css 69-86, base-2026.css 19/349-354/425-427
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* 1rem = 14.4px. The whole scale resolves against this — do not change. */
	font-size: var( --wp--custom--root-font-size );
	scroll-padding-top: 132px;
}

@media ( max-width: 1080px ) {
	html {
		scroll-padding-top: 120px;
	}
}

body:has( .mh-sub ) {
	scroll-padding-top: 172px;
}

body {
	font-family: var( --font-sans );
	background: var( --wp--preset--color--base );
	color: var( --ink );
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'ss01' 1, 'cv01' 1;
	/* clearance for the fixed .mh header */
	padding-top: var( --wp--custom--header-height );
}

@media ( max-width: 1080px ) {
	body {
		padding-top: var( --wp--custom--header-height-compact );
	}
}

/* pages with a flush full-bleed hero */
body.flush {
	padding-top: 0;
}

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

a {
	color: var( --wp--preset--color--accent-bright );
	text-decoration: none;
}

a:hover {
	color: var( --wp--preset--color--accent-bright );
}

button {
	font: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

ul {
	list-style: none;
	padding: 0;
}

::selection {
	background: var( --wp--preset--color--contrast );
	color: #0c0d0e;
}

/* --------------------------------------------------------------------------
   Typography
   Bare headings are Satoshi 300; the named display classes are 400.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
	font-family: var( --font-display );
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.h-display {
	font-size: clamp( 48px, 6.2vw, 108px );
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --wp--preset--color--contrast );
	text-transform: none;
	text-wrap: balance;
}

.h1 {
	font-size: clamp( 40px, 5vw, 76px );
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var( --wp--preset--color--contrast );
}

.h2 {
	font-size: clamp( 32px, 3.4vw, 52px );
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var( --wp--preset--color--contrast );
}

.h3 {
	font-size: 21px;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var( --wp--preset--color--contrast );
}

.lead {
	font-size: 16.5px;
	line-height: 1.65;
	font-weight: 400;
	color: var( --slate );
	text-wrap: pretty;
}

.muted {
	color: var( --slate );
}

.mono,
.lbl {
	font-family: var( --font-mono );
}

/* heading normalisation — base-2026.css 253-256. Higher specificity than the
   .h-display / .h2 / .h3 rules above, so these win inside <main>. */
.page-hero h1,
.page-hero h1.h-display,
main h1.h-display {
	font-family: var( --font-display );
	font-weight: 400;
	letter-spacing: -0.045em;
	line-height: 1.03;
	font-size: clamp( 2.4rem, 6.2vw, 5.4rem );
}

main h2.h2 {
	font-family: var( --font-display );
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 1.06;
	font-size: clamp( 1.9rem, 4.4vw, 3.4rem );
	color: var( --wp--preset--color--contrast );
}

main .h3 {
	font-weight: 400;
	letter-spacing: -0.02em;
}

/* base-2026.css 256 also set font-family and letter-spacing here; both lose to
   the !important label reset below, so only font-weight survives. */
main .section-head .eyebrow,
main .page-hero .eyebrow {
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Label system — .eyebrow / .pill / .tag collapse to one bare mono caps label.
   The !important flags are load-bearing: they are what neutralises the older
   pill/tag/chip styling everywhere else, including appui.css .pill variants.
   Removing them changes the render. styles.css 1725-1732 (+ 1690).
   -------------------------------------------------------------------------- */
.eyebrow,
.eyebrow.no-line,
.pill,
.tag {
	display: inline-flex !important;
	align-items: center;
	justify-self: start;
	align-self: start;
	width: fit-content;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	font-family: var( --wp--preset--font-family--mono ) !important;
	font-size: 11.5px !important;
	font-weight: 400;
	letter-spacing: 0.21em !important;
	text-transform: uppercase;
	color: var( --slate ) !important;
	border-radius: 0 !important;
}

.eyebrow::before {
	content: none !important;
	display: none !important;
}

.eyebrow,
.pill {
	gap: 8px;
}

.pill .dot {
	width: 7px;
	height: 7px;
	/* the one radius exception in the marketing layer: it is a dot */
	border-radius: 50%;
	background: var( --wp--preset--color--contrast ) !important;
	box-shadow: none !important;
}

/* styles.css 1465-1467. The selector list is malformed in the source — the
   eyebrow selectors were merged into the `.section-head .h2` rule — but it is
   live, so eyebrows on dark surfaces really do carry margin-top: 20px. */
.surface-forest .eyebrow,
.surface-dark .eyebrow,
.hero-forest .eyebrow,
.surface-grad-olive .eyebrow,
.cta-band .eyebrow,
.surface-lime .eyebrow,
.section-head .h2,
.act-head .h2 {
	margin-top: 20px;
}

/* --------------------------------------------------------------------------
   Containers — styles.css 1714-1716. 1440px / 40px inset (22px <= 700px).
   --gutter is the HEADER inset only; it is deliberately not used here.
   -------------------------------------------------------------------------- */
.wrap,
.wrap-wide {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var( --wp--custom--content-inset );
}

@media ( max-width: 700px ) {
	.wrap,
	.wrap-wide {
		padding-inline: var( --wp--custom--content-inset-narrow );
	}
}

.section {
	padding-block: clamp( 84px, 10vw, 150px );
}

/*
 * OWNER CHANGE 2026-08-14 — the small rhythm is now three quarters of the
 * main one, at every viewport.
 *
 * It used to be clamp(48px,6vw,84px), which drifts from 0.60x of .section at
 * 1024px to 0.56x at 1920px because the two clamps top out at different
 * points. Nearly half the air, on an unrelated curve — which is why pages
 * mixing the two (priser, integrationer, villkor, the comparison tables) read
 * as a different system rather than a denser one. Scaling every term by 0.75
 * keeps the distinction and makes it proportional: 96px against 128px at
 * 1280, 112 against 150 at 1920.
 */
.section-sm {
	padding-block: clamp( 63px, 7.5vw, 112px );
}

/* layout utilities — styles.css 147-155 */
.center {
	text-align: center;
}

.stack {
	display: flex;
	flex-direction: column;
}

.row {
	display: flex;
	align-items: center;
}

.grid {
	display: grid;
}

.gap-2 {
	gap: 8px;
}

.gap-3 {
	gap: 12px;
}

.gap-4 {
	gap: 16px;
}

.gap-5 {
	gap: 24px;
}

.gap-6 {
	gap: 32px;
}

.gap-8 {
	gap: 48px;
}

.mt-2 {
	margin-top: 8px;
}

.mt-3 {
	margin-top: 12px;
}

.mt-4 {
	margin-top: 16px;
}

.mt-5 {
	margin-top: 24px;
}

.mt-6 {
	margin-top: 32px;
}

.mt-8 {
	margin-top: 48px;
}

.maxch {
	max-width: 60ch;
}

.maxch-sm {
	max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Section heads — base-2026.css 258-277
   -------------------------------------------------------------------------- */
.sec-head {
	text-align: center;
	margin-bottom: var( --wp--custom--section-head-gap );
}

.sec-title {
	font-family: var( --font-display );
	font-weight: 400;
	font-size: clamp( 2.2rem, 6vw, 5.4rem );
	line-height: 1.04;
	letter-spacing: -0.045em;
	color: var( --wp--preset--color--contrast );
	margin: 0 auto;
	max-width: 22em;
	text-wrap: balance;
}

.sec-title-sm {
	font-size: clamp( 1.9rem, 4.4vw, 3.6rem );
}

.sec-title .sq {
	display: inline-grid;
	place-items: center;
	width: 0.92em;
	height: 0.92em;
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-accent );
	vertical-align: -0.1em;
	margin: 0 0.1em;
}

.sec-title .sq svg {
	width: 64%;
	height: 64%;
}

.sec-title .hl,
.sec-title .hlb {
	white-space: nowrap;
	padding: 0 0.14em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.sec-title .hl {
	background: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--base );
}

.sec-title .hlb {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-accent );
}

.sec-title .hl .sq,
.sec-title .hlb .sq {
	white-space: nowrap;
}

.sec-title .hl .sq {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-accent );
	margin-left: -0.04em;
}

.sec-title .hlb .sq {
	background: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--accent );
}

.sec-sub {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 1rem;
	font-weight: 400;
	color: #eef2ef;
	margin: clamp( 20px, 2.6vw, 34px ) 0 0;
}

.sec-sub i {
	width: 11px;
	height: 11px;
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-accent );
	flex: none;
}

.sec-head .btn {
	margin-top: clamp( 20px, 2.6vw, 32px );
}

.sec-head.left {
	text-align: left;
}

.sec-head.left .sec-title {
	margin-inline: 0;
	max-width: 24em;
}

.sec-head.left .sec-sub {
	justify-content: flex-start;
	margin-inline: 0;
	text-align: left;
	max-width: 56ch;
}

.sec-chip {
	display: inline-block;
	font-family: var( --font-mono );
	font-size: var( --wp--preset--font-size--mono-eyebrow );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #0a0b0a;
	background: #8d949c;
	padding: 6px 12px;
}

.sec-rule {
	border: 0;
	border-top: 1px dotted var( --wp--custom--rule-dotted );
	margin: 16px 0 clamp( 20px, 2.6vw, 32px );
}

/* --------------------------------------------------------------------------
   Buttons — outlined, square, trailing arrow. styles.css 1736-1749.
   base-2026.css 21-23 recolours .btn-primary only.
   Note: .btn-primary keeps the #f3f1ed border from styles.css:1743 — that is
   what renders; see css-port-notes.md.
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	white-space: nowrap;
	cursor: pointer;
	font-family: var( --font-sans );
	font-size: 14.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	padding: 15px 26px;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 0 !important;
	background: transparent;
	color: var( --wp--preset--color--contrast ) !important;
	transition: background 0.2s, border-color 0.2s;
}

.btn::after {
	content: "\2197";
	opacity: 0.8;
	font-size: 0.95em;
}

.btn:hover {
	background: #f3f1ed;
	border-color: #f3f1ed;
	color: #0b0d12 !important;
	transform: none;
	box-shadow: none;
}

.btn svg {
	width: 17px;
	height: 17px;
}

.btn-lg {
	padding: 17px 30px;
	font-size: 15.5px;
}

.btn-sm {
	padding: 11px 18px;
	font-size: 13px;
}

.btn-primary,
.btn-dark {
	border-color: #f3f1ed;
	background: #f3f1ed;
	color: #0b0d12 !important;
}

/* base-2026.css 21-23 — the blue primary */
.btn-primary {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--on-accent );
	/* styles.css:1477 sets `box-shadow: none !important`, which beats the
	   base-2026 accent ring. --wp--custom--shadow--button is therefore unused. */
	box-shadow: none !important;
}

/* Emerald primary buttons take dark text — white is 1.7:1 on #00d08f.
   This rule keeps its !important because it exists to beat the marketing
   layer's own button colours; only the value changes. */
.btn.btn-primary,
.hx-cta .btn-primary,
.mh-cta {
	color: var( --wp--preset--color--on-accent ) !important;
}

.btn-primary:hover,
.btn-dark:hover {
	background: var( --wp--preset--color--accent-hover );
	border-color: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--contrast );
	box-shadow: none !important;
}

/* Emerald border AND emerald text on the secondary button. The blue build
   only tinted the border and left the label white; .btn-light stays white
   because it is the light-on-dark variant, not an accent button. */
.btn-ghost,
.btn-lime-outline {
	background: transparent;
	border-color: rgba( var( --accent-rgb ), 0.55 );
	color: var( --wp--preset--color--accent ) !important;
}

.btn-light {
	background: transparent;
	border-color: rgba( 255, 255, 255, 0.35 );
	color: var( --wp--preset--color--contrast ) !important;
}

.btn-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var( --wp--preset--color--contrast ) !important;
}

.btn-link::after {
	content: "\2197";
	opacity: 0.8;
}

.btn-link:hover {
	background: transparent;
	color: var( --wp--preset--color--contrast ) !important;
}

.btn-link svg {
	display: none;
}

/* --------------------------------------------------------------------------
   Scroll reveal — styles.css 427-429, transform from 1842
   -------------------------------------------------------------------------- */
[data-reveal] {
	opacity: 0;
	transform: translateY( 10px );
	transition: transform 0.7s cubic-bezier( 0.2, 0.7, 0.3, 1 );
}

[data-reveal].in {
	opacity: 1;
	transform: none;
}

/* Without scripting the .in class never lands, so every revealed section would
   stay invisible. Same no-js hook the mega panels use. */
html.no-js [data-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

@media ( prefers-reduced-motion: reduce ) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.marquee-track {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Section flow — kill WordPress's block gap between top-level sections.

   `is-layout-flow` applies `margin-block-start: var(--wp--style--block-gap)`
   to every sibling block. Our theme.json sets that to spacing-30 (1.5rem →
   21.6px), so nine 22px strips of the black body background appeared between
   the sections — plainly visible as black bars between the light .band, .st
   and .claims sections. The design's sections are flush.

   Scoped to section+section so editorial prose inside post-content keeps its
   normal rhythm; only the full-bleed page sections are pinned flush.
   -------------------------------------------------------------------------- */
.wp-block-post-content > section + section {
	margin-block-start: 0;
}