/*
Theme Name: Blocksy Child — CanChip
Theme URI: https://creativethemes.com/blocksy/
Template: blocksy
Author: CanChip
Description: Child theme for the CanChip website. Design tokens from Figma (Design / Website), self-hosted Lexend.
Version: 1.0.0
Text Domain: blocksy-child-canchip
*/

:root {
	/* Colors — Figma variables */
	--canchip-dark-blue: #05081B;
	--canchip-card-dark: #0F1224;
	--canchip-mint: #93F5C2;
	--canchip-periwinkle: #8494E6;
	--canchip-snow: #E9E9E9;
	--canchip-white: #FFFFFF;
	--canchip-muted: #8E96AB;
	/* Sampled off the mockup: the grey pill behind download buttons and carousel
	   arrows, and the muted periwinkle the arrow glyph itself is drawn in. */
	--canchip-pill-grey: #252839;
	--canchip-arrow: #91A2DA;

	/* Gradients — sampled from the mockups */
	--canchip-gradient-headline: linear-gradient(90deg, #FFFFFF 0%, #93F5C2 55%, #8494E6 100%);
	--canchip-gradient-cta: linear-gradient(100deg, #5A81E3 0%, #36B6CB 50%, #6EDAB6 100%);
	/* The accent ramp, exactly as Figma defines it. Every rule, underline, icon
	   and dot on the site is painted with this one declaration, so the ramp reads
	   the same wherever it appears. Figma re-states the angle per element (it
	   recomputes it against each box), but the stops are constant — those are
	   what has to match. */
	--canchip-gradient-accent: linear-gradient(60deg, #6B7BF5 13.4%, #3FBCEC 41.22%, #34D3C0 63.18%, #93F5C2 86.6%);
}

/* Headline gradient words: wrap the highlighted part in a span.
   Usage in editor: <span class="canchip-text-gradient">…</span> or mint/periwinkle spans. */
.canchip-text-gradient {
	background: var(--canchip-gradient-headline);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.canchip-text-mint {
	color: var(--canchip-mint);
}

.canchip-text-periwinkle {
	color: var(--canchip-periwinkle);
}

/* Section heading accent line (64x4), per Figma "Underline" — the shared
   component is a blue→mint ramp, not flat mint (sampled on Home and Solution). */
.canchip-heading-accent::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: 24px;
	background: var(--canchip-gradient-accent);
}

.canchip-heading-accent.is-centered::after {
	margin-inline: auto;
}

/* Blocksy sets `body { overflow-x: hidden }`, which turns the body into a
   scroll container and silently breaks `position: sticky` further down the
   tree. `clip` keeps the same sideways-overflow protection without creating
   one, so the stacking cards keep working. */
body {
	overflow-x: clip;
}

/* Full-bleed sections carry their own vertical rhythm through padding, so drop
   the theme's inter-block margin between them. */
.entry-content > [class*="canchip-"] {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
   Header — pill navbar (Figma: Header 314:213)
   The row itself stays transparent (Blocksy transparent header); the pill is
   drawn on the inner container so it floats over the hero.
   --------------------------------------------------------------------------- */

/* 39 + 70 (pill) + 11 = the mockup's 120px header frame, with the pill sitting
   39px down from the top edge as it does there. */
.ct-header [data-row="middle"] {
	padding-block: 39px 11px;
}

/* Pill height comes from the row's `headerRowHeight` option (70px desktop).
   The `- 40px` keeps a gutter between 1000px (where the mobile pill takes over)
   and 1200px; a plain `min(100%, 1200px)` let the pill touch both screen edges
   in that range, so its rounded ends were cut off. */
.ct-header [data-row="middle"] > .ct-container {
	position: relative;
	/* Own stacking context, so the refraction layer below can sit at z-index -1:
	   above this element's own background, still behind the logo and menu. */
	isolation: isolate;
	box-sizing: border-box;
	width: min(100% - 40px, 1200px);
	margin-inline: auto;
	padding-inline: 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	/* Glass is three things stacked: a blurred, slightly over-saturated backdrop;
	   a faint tint that is brighter where light would catch the top-left edge
	   (the mockup's flat 10% white is the average of this ramp); and inset
	   highlights standing in for the lit top rim and the bounce off the bottom
	   one. The drop shadow lifts the pill off the hero so it reads as a pane
	   floating over the page rather than a painted-on bar. */
	background-image: linear-gradient(
		148deg,
		rgba(255, 255, 255, 0.16) 0%,
		rgba(255, 255, 255, 0.05) 46%,
		rgba(255, 255, 255, 0.11) 100%
	);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.4),
		inset 0 -1px 1px rgba(255, 255, 255, 0.08),
		inset 0 0 30px rgba(255, 255, 255, 0.05),
		0 18px 40px rgba(5, 8, 27, 0.3);
	/* `brightness` rather than a dark fill: the pill has to stay readable when a
	   pale section scrolls under it (over the video band the menu measured
	   1.74:1 against white), but a tint that switches on at that moment reads as
	   a background appearing. Dimming the backdrop is a property of the glass
	   instead — identical at the top of the page and mid-scroll, barely visible
	   over the dark hero, and doing the real work only where the page underneath
	   is bright. */
	-webkit-backdrop-filter: blur(18px) saturate(165%) brightness(0.55);
	backdrop-filter: blur(18px) saturate(165%) brightness(0.55);
}

/* No SVG refraction layer here any more. It only ever worked in Chromium — so
   the header looked different from browser to browser — and its displacement
   left a ghost outline a few pixels outside the pill's right edge, which read as
   a second, doubled rim. The glass now comes entirely from the blur, the
   saturation, the dimming and the lit rims below, which every browser renders
   the same way. */

/* Visitors who ask for less transparency get a solid pill: same shape, no
   see-through, no blur. */
@media (prefers-reduced-transparency: reduce) {
	.ct-header [data-row="middle"] > .ct-container {
		background-image: none;
		background-color: var(--canchip-card-dark);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.ct-header [data-row="middle"] > .ct-container::before {
		display: none;
	}
}

/* Scrolled state. The pill keeps exactly the glass it has over the hero — no
   tint, no darker fill: it is a pane of glass the page slides under, and a
   background appearing the moment you scroll breaks that. Blocksy's sticky
   script writes "fixed:shrink" into its attribute as soon as the page loads and
   only switches it to "yes:shrink" once the row actually detaches, so "yes" is
   the state to key on. What stays here is the height fix. */
#header [data-sticky*="yes"] [data-row="middle"] > .ct-container {
	/* Once detached, the theme's own `#header [data-row] > div` rule hands the
	   pill the whole row box as a min-height (120px instead of 70px), so the
	   pill ballooned while scrolling. Overriding needs both the ID — that rule
	   outweighs a class-only selector — and `min-height`, which beats `height`.
	   Value comes from the same variable the `headerRowHeight` option feeds, so
	   the Customizer still controls it. */
	min-height: var(--header-height, 70px);
	height: var(--header-height, 70px);
}

/* The theme spaces the content area away from the header
   (`[data-vertical-spacing*="top"]`), but every page here opens with a
   full-bleed hero the transparent header is meant to float over — that spacing
   showed as a dark band above the hero. Keyed to the hero rather than switched
   off globally, so plain pages (Imprint, Privacy Policy) keep their breathing
   room under the header. */
.ct-container-full:has(.canchip-hero) {
	padding-top: 0;
}

/* The glass is deliberately light, so over a pale section the menu leans on its
   own shadow as much as on the dimmed backdrop. Invisible against the hero,
   decisive where the page underneath is bright. */
.ct-header [data-row="middle"] .ct-menu-link,
.ct-header [data-row="middle"] .site-title,
.ct-header [data-row="middle"] .custom-logo {
	text-shadow: 0 1px 3px rgba(5, 8, 27, 0.55);
}

.ct-header [data-row="middle"] .custom-logo {
	filter: drop-shadow(0 1px 3px rgba(5, 8, 27, 0.45));
}

/* Logo */
.ct-header .site-title {
	font-size: 20px;
	font-weight: 500;
}

.ct-header .site-title a {
	color: var(--canchip-white);
}

/* Menu. Font size/weight/transform and link colors are set as Blocksy options
   (header item `menu` → headerMenuFont / menuFontColor) so they stay editable
   in the Customizer; only what the options can't express lives here. */
.ct-header .header-menu-1 > .menu {
	gap: 32px;
}

.ct-header .header-menu-1 .ct-menu-link {
	position: relative;
}

/* Active item underline. Blocksy's own menu-indicator base rule targets
   `a::after` and defaults it to `opacity: 0`, so this must set opacity itself.
   The link stretches the full row height, hence positioning off the centre
   rather than the link's bottom edge. */
.ct-header .header-menu-1 .current-menu-item > .ct-menu-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% + 0.75em);
	height: 2px;
	border-radius: 2px;
	opacity: 1;
	background: var(--canchip-gradient-accent);
}

/* CTA button. Hover comes from the mockup's button variants — a white wash at
   80%, same as the hero's pill — and is set through the theme's own variables so
   it survives the Customizer rather than fighting it. */
.ct-header .ct-header-cta .ct-button {
	--theme-button-min-height: 44px;
	--theme-button-padding: 5px 26px;
	--theme-button-font-size: 15px;
	--theme-button-background-hover-color: rgba(255, 255, 255, 0.8);
	--theme-button-text-hover-color: var(--canchip-dark-blue);
	font-weight: 600;
	border-radius: 999px;
}

/* Mobile: tighter pill, offcanvas CTA full width */
@media (max-width: 999.98px) {
	.ct-header [data-row="middle"] {
		padding-block: 15px;
	}

	/* Inset with margins rather than a width: the row is full-bleed here and
	   margins keep the pill symmetric on every narrow width. */
	.ct-header [data-row="middle"] > .ct-container {
		width: auto;
		max-width: none;
		margin-inline: 16px;
		padding-inline: 20px;
	}
}

#offcanvas .ct-header-cta .ct-button {
	width: 100%;
	justify-content: center;
}

/* ---------------------------------------------------------------------------
   Hero (Figma: Hero 429:2285 — 1440x867)
   The transparent header floats over this section, hence the large top padding.
   The gradient below is the base layer: Home covers it with footage (see "Hero
   footage"), the other four pages still show it on its own.
   --------------------------------------------------------------------------- */

.canchip-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Each page's hero is a different height; variants only set the variable. */
	min-height: var(--hero-height, 867px);
	/* The header floats over the hero, so the copy is placed against the canvas,
	   not against the header: measured off the mockup, the headline's glyphs
	   start 300px down and the rest fills out the 867px frame. Each hero variant
	   re-states both values because its frame height and copy differ. */
	padding-block: 290px 123px;
	overflow: hidden;
	background: linear-gradient(100deg, #070F37 0%, #0C1B39 32%, #1A3A57 66%, #3C6B7C 100%);
}

/* Soft light bloom on the right, where the mockup's photo sits. */
.canchip-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(58% 74% at 78% 42%, rgba(104, 186, 205, 0.32) 0%, rgba(104, 186, 205, 0) 70%);
}

/* ---------------------------------------------------------------------------
   Hero footage
   The poster sits on the wrapper as a background, so it is what shows while the
   file loads, if it fails, and wherever the video itself is suppressed.
   --------------------------------------------------------------------------- */

/* Sized explicitly rather than with `inset: 0`. WordPress gives the block a 24px
   bottom margin from somewhere deep in its generated styles, and for an
   absolutely positioned box that margin is subtracted from a top/bottom-derived
   height — the footage came up 24px short and let the gradient show along the
   bottom edge. An explicit height leaves the margin out of the equation. */
.canchip-hero__media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.canchip-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The footage is bright — pale glassware on a light blue field — and the
   headline is white. This is the hero's own gradient turned into a veil over
   the video: it keeps the brand colour and buys back the contrast the text
   needs. Left side is nearly opaque because that is where the copy sits; it
   thins out to the right, where the mockup wants the imagery to read. */
.canchip-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(7, 15, 55, 0.94) 0%,
		rgba(12, 27, 57, 0.88) 32%,
		rgba(26, 58, 87, 0.72) 66%,
		rgba(60, 107, 124, 0.55) 100%
	);
}

/* Reduced motion: hold the poster instead. The frame still carries the imagery,
   so nothing is lost but the movement. */
@media (prefers-reduced-motion: reduce) {
	.canchip-hero__video {
		display: none;
	}
}

/* Plain flow layout rather than WordPress' "constrained" one — that layout
   centres every child with `margin-inline: auto !important`, which cannot be
   overridden from a stylesheet. The container is handled here instead. */
.canchip-hero__inner {
	position: relative;
	z-index: 1;
	/* 1200px of content plus the 20px gutter, so the text lines up with the
	   header pill's 120px inset on a 1440px canvas. */
	width: min(100%, 1240px);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Specificity is doubled up throughout this section: WordPress' layout rules
   (`.wp-container-… > *`) sit at the same weight and would otherwise win on
   source order. */
.canchip-hero .canchip-hero__title {
	max-width: 720px;
	margin: 0;
	font-size: var(--wp--preset--font-size--title-1, clamp(38px, 4.2vw, 61px));
	font-weight: 700;
	line-height: 1.11;
	/* Two-tone headline: the gradient is clipped to the glyphs, so each line
	   needs its own block-level box for the ramp to restart. */
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

.canchip-hero .canchip-hero__title--a {
	background-image: linear-gradient(90deg, #FFFFFF 0%, #BDEFFF 46%, #7FEFB9 100%);
}

.canchip-hero .canchip-hero__title--b {
	background-image: linear-gradient(90deg, #9AABD3 0%, #7484EE 100%);
}

.canchip-hero .canchip-hero__text {
	max-width: 430px;
	margin: 32px 0 0;
	color: var(--canchip-snow);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.6;
}

.canchip-hero .canchip-hero__actions {
	margin-top: 36px;
}

.canchip-hero .wp-block-button__link {
	padding: 13px 26px;
	border-radius: 999px;
	background-color: var(--canchip-mint);
	color: var(--canchip-dark-blue);
	font-size: 15px;
	font-weight: 600;
	transition: background-color 0.2s ease;
}

/* Hover states come straight from the button component's variants in Figma —
   every one of them is a white wash at a set opacity, not a darker shade of the
   button's own colour. Mint pill: white at 80%. */
.canchip-hero .wp-block-button__link:hover,
.canchip-hero .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.8);
	color: var(--canchip-dark-blue);
}

@media (max-width: 999.98px) {
	.canchip-hero {
		min-height: 0;
		padding-block: 150px 80px;
	}

	.canchip-hero .canchip-hero__title {
		max-width: none;
	}

	/* Keep a readable measure even when the column goes full width. */
	.canchip-hero .canchip-hero__text {
		max-width: 52ch;
	}
}

/* ---------------------------------------------------------------------------
   Marquee (Figma: § Marquee 561:1418 — 1440x47)
   The editor holds one line of text; marquee.js clones it so the loop is
   seamless without anyone having to maintain two copies.
   --------------------------------------------------------------------------- */

.canchip-marquee {
	display: flex;
	overflow: hidden;
	padding-block: 15px;
	background: linear-gradient(90deg, #123B57 0%, #16474F 55%, #265252 100%);
	user-select: none;
}

.canchip-marquee .canchip-marquee__track {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0;
	/* No trailing padding: the rhythm is carried by the dots themselves, and the
	   track ends with one, so the seam between the two copies looks like every
	   other gap in the list. */
	color: #D0D9DE;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
	letter-spacing: 0.6em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	animation: canchip-marquee-scroll 21s linear infinite;
}

/* Measured off the mockup: an 8px disc filled with the accent gradient, whose
   blue→mint ramp the strip's separators are cut from. It is a real element, not
   a text bullet, because a glyph cannot carry a gradient. The last letter's
   letter-spacing already sits to its left, hence the asymmetric margins. */
.canchip-marquee .canchip-marquee__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-inline: 30px 38px;
	border-radius: 999px;
	background: var(--canchip-gradient-accent);
}

.canchip-marquee .canchip-marquee__phrase {
	flex: 0 0 auto;
}

.canchip-marquee .canchip-marquee__set {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* One list-width, in pixels — the script measures the list and sets the variable.
   A percentage would be wrong here: the number of copies in the track varies
   with the viewport, so a percentage of the track is not a whole list. */
@keyframes canchip-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); }
}

@media (prefers-reduced-motion: reduce) {
	.canchip-marquee .canchip-marquee__track {
		animation: none;
	}
}

/* ---------------------------------------------------------------------------
   CTA band (Figma: § CTA Band 501:1042 and six siblings)
   One pattern reused across all five pages; only the copy changes.
   --------------------------------------------------------------------------- */

.canchip-cta {
	padding: 60px 20px;
	background-color: var(--canchip-dark-blue);
}

.canchip-cta__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	width: min(100%, 1200px);
	margin-inline: auto;
	padding: 64px 40px;
	border-radius: 2.5rem;
	background: var(--canchip-gradient-cta);
	text-align: center;
}

/* ---------------------------------------------------------------------------
   CTA footage
   Dark blue molecular motion under the brand gradient. The gradient stays the
   surface — the heading and copy on this card are near-black and rely on it
   being light — so the veil keeps most of its opacity and the footage reads as
   texture and movement through it, not as a picture of its own.
   --------------------------------------------------------------------------- */

.canchip-cta__media {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	/* Same trap as the hero: WordPress' block margin is subtracted from a height
	   derived from top/bottom, so the size is stated outright. */
	margin: 0;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.canchip-cta__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.canchip-cta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--canchip-gradient-cta);
	/* The single number that decides how much footage comes through. Lower shows
	   more of it and costs contrast on the dark heading. */
	opacity: 0.88;
}

@media (prefers-reduced-motion: reduce) {
	.canchip-cta__video {
		display: none;
	}
}

.canchip-cta .canchip-cta__title {
	max-width: 20ch;
	margin: 0 auto;
	color: var(--canchip-dark-blue);
	font-size: var(--wp--preset--font-size--title-3, clamp(29px, 3vw, 39px));
	font-weight: 700;
	line-height: 1.2;
}

.canchip-cta .canchip-cta__text {
	max-width: 44ch;
	margin: 20px auto 0;
	color: var(--canchip-dark-blue);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	line-height: 1.5;
}

.canchip-cta .canchip-cta__actions {
	justify-content: center;
	margin-top: 28px;
}

.canchip-cta .wp-block-button__link {
	padding: 13px 26px;
	border-radius: 999px;
	background-color: var(--canchip-dark-blue);
	color: var(--canchip-white);
	font-size: 15px;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* White at 30%: the dark pill lightens into the gradient and its label turns
   dark to stay legible — the pair the mockup draws for this button. */
.canchip-cta .wp-block-button__link:hover,
.canchip-cta .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.3);
	color: var(--canchip-dark-blue);
}

@media (max-width: 999.98px) {
	.canchip-cta {
		padding-block: 40px;
	}


	.canchip-cta__card {
		padding: 48px 24px;
	}
}

/* ---------------------------------------------------------------------------
   Footer (Figma: § Footer 316:748 — 1440x454)
   Built with Blocksy's footer builder: four widget columns plus a copyright
   row, so the links stay editable in Appearance → Menus / Widgets.
   --------------------------------------------------------------------------- */

/* Blocksy's generated rule paints the footer with palette colour 6 and lands
   later in the cascade, so this one carries the ID to outrank it. */
#footer.ct-footer {
	background-color: var(--canchip-dark-blue);
}

.ct-footer [data-row="middle"] > .ct-container {
	/* Brand column is wider than the three link columns, per the mockup. */
	--grid-template-columns: 1.5fr 1fr 1fr 1fr;
	padding-block: 90px 60px;
}

/* The footer sets the brand differently from the header: the mockup pairs the
   logo mark with the name in the site's own typeface instead of reusing the
   header's lockup image. The mark is exported from the design file and drawn as
   a background image — not a mask — because it carries its own two colours. */
.ct-footer .ct-widget p.canchip-footer__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--canchip-white);
	font-size: var(--wp--preset--font-size--title-6, 20px);
	font-weight: 600;
}

.ct-footer .ct-widget p.canchip-footer__brand::before {
	content: "";
	flex: 0 0 auto;
	width: 47px;
	height: 44px;
	background: url("assets/icons/logo-mark.svg") no-repeat center / contain;
}

.ct-footer .ct-widget p.canchip-footer__tagline {
	max-width: 300px;
	margin: 22px 0 0;
	color: var(--canchip-muted);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.6;
}

.ct-footer .canchip-footer__label {
	margin: 0 0 26px;
	color: var(--canchip-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ct-footer .ct-widget p {
	margin: 0 0 20px;
	color: var(--canchip-snow);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.5;
}

.ct-footer .ct-widget p:last-child {
	margin-bottom: 0;
}

.ct-footer .ct-widget a {
	color: var(--canchip-white);
	text-decoration: none;
}

.ct-footer .ct-widget a:hover {
	color: var(--canchip-mint);
}

/* Divider sits inside the container so it lines up with the columns, and it
   goes through Blocksy's border variable rather than a plain border, which the
   theme's own rule would reset. */
.ct-footer [data-row="bottom"] > .ct-container {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-block: 30px;
}

.ct-footer .ct-footer-copyright {
	color: var(--canchip-muted);
	font-size: 15px;
	font-weight: 300;
	text-align: center;
}

@media (max-width: 999.98px) {
	.ct-footer [data-row="middle"] > .ct-container {
		padding-block: 60px 40px;
	}
}

/* ---------------------------------------------------------------------------
   Shared section scaffolding
   --------------------------------------------------------------------------- */

.canchip-section__inner {
	box-sizing: border-box;
	width: min(100%, 1240px);
	margin-inline: auto;
	padding-inline: 20px;
}

/* `background-clip: text` paints the gradient only inside the element's own box,
   and these headings are set at line-height 1.1 — tighter than the font's own
   ascent-plus-descent. The tail of a g, y or p therefore hangs a few pixels
   below the box, gets no paint, and reads as a sliced letter. Measured in
   Lexend: ink runs ~0.23em below the baseline while a 1.1 line leaves ~0.16em,
   so the box needs the difference back. 0.1em clears the widest shortfall of
   the sizes in use — the validation card name is the tightest, at line-height
   1.05, and 0.08em left it half a pixel of slack.

   Height is what buys the paint, so it has to be real padding — the elements
   that must not grow hand it back with a matching negative margin. Only text
   that can carry a descender is listed; the stat figures are digits. */
.canchip-hero__title,
.canchip-section__title,
.canchip-form__title,
.canchip-validation-card__name,
.canchip-model-card__name,
.canchip-team-card__name,
.canchip-model__name,
.canchip-format__name {
	padding-bottom: 0.1em;
}

.canchip-section__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--title-2, clamp(33px, 3.4vw, 49px));
	font-weight: 700;
	line-height: 1.1;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

/* The two halves are one sentence broken across two lines, so they belong at
   plain line spacing. Blocksy gives every heading a `margin-block-end` of
   `.3em + 10px` — 24px at this size — from a later stylesheet at the same weight
   as a single class, so `.canchip-section__title { margin: 0 }` never took. The
   `:has()` both outranks it and says the real condition: close up only where a
   second half actually follows. The negative margin is the paint padding below
   handed back, so the spacing is exactly one line and not a pixel more. */
.canchip-section__title--a:has(+ .canchip-section__title--b) {
	margin-bottom: -0.1em;
}

.canchip-section__title--a {
	background-image: linear-gradient(90deg, #FFFFFF 0%, #BDEFFF 48%, #7FEFB9 100%);
}

.canchip-section__title--b {
	background-image: linear-gradient(90deg, #9AABD3 0%, #7484EE 100%);
}

.canchip-section__title.is-centered {
	text-align: center;
}

.canchip-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Dimmed-until-reached rows
   Figma draws these sections with every row dimmed at once, which is the
   "not reached yet" state: `[data-canchip-reveal]` lights up once it scrolls
   into view. The dimmed state is scoped to `.canchip-js` (set from wp_head) so
   the copy stays fully visible when JavaScript doesn't run — otherwise a script
   error would hide whole sections.
   --------------------------------------------------------------------------- */

[data-canchip-reveal] {
	/* Long and eased-out rather than linear: the row should settle into place,
	   not snap. The same curve the accent bars and pills use. */
	transition:
		opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.canchip-js [data-canchip-reveal] {
	opacity: var(--reveal-from, 0.1);
	transform: translateY(var(--reveal-shift, 20px));
}

.canchip-js [data-canchip-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

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

/* ---------------------------------------------------------------------------
   Card hover accent (Figma: hover variants in the "Komponenten" section)
   A gradient rule across the top edge of the card, wiping open from the left on
   hover. It is the card's top border, not a strip sitting on it: the card clips
   the bar, so the bar picks up the rounded corners instead of poking past them.
   Same accent gradient as the section underline.

   Applies to the study-format rows and the compact model cards in Home's grid —
   the two the mockup draws a hover variant for. Deliberately NOT on the wide
   `.canchip-model-card` of Solution's model library: those have no hover state.
   --------------------------------------------------------------------------- */

.canchip-format,
.canchip-model {
	position: relative;
	/* Clips the accent bar below to the card's own rounded shape. */
	overflow: hidden;
}

.canchip-format::before,
.canchip-model::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 6px;
	/* No radius of its own — the card's `overflow` supplies the corners. */
	background: var(--canchip-gradient-accent);
	/* Revealed by clipping, not by scaling: `scaleX` would squeeze the whole
	   blue→mint ramp into the sliver that is visible at the start, so the colours
	   would slide while the bar grows. Clipping leaves the ramp still and just
	   uncovers it, left to right — the direction the gradient itself runs. */
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.canchip-format:hover::before,
	.canchip-format:focus-within::before,
	.canchip-model:hover::before,
	.canchip-model:focus-within::before {
		clip-path: inset(0 0 0 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.canchip-format::before,
	.canchip-model::before {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Photo slots
   Every card draws its picture area as a placeholder with a fixed ratio. When
   the real photography lands it is dropped inside that same element, so the
   image has to fill the slot instead of dictating its height — otherwise a
   portrait shot stretches the card (the award photos ran 790px tall at 640px
   wide before this) and the slot's corner radius is lost.
   --------------------------------------------------------------------------- */

.canchip-award__media,
.canchip-story__media,
.canchip-team-card__photo,
.canchip-proof__media,
.canchip-paper__media,
.canchip-receive__media,
.canchip-process__media {
	overflow: hidden;
}

.canchip-award__media > img,
.canchip-story__media > img,
.canchip-team-card__photo > img,
.canchip-proof__media > img,
.canchip-paper__media > img,
.canchip-receive__media > img,
.canchip-process__media > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Outline pill used for "Solution" / "Validated" labels. */
.canchip-tag {
	display: inline-block;
	/* Inside a flex or grid column the default `stretch` would blow the pill out
	   to the container's full width, so it opts out once here rather than in
	   every card that happens to be a flex column. */
	align-self: start;
	margin: 0;
	padding: 4px 12px;
	border: 1px solid var(--canchip-mint);
	border-radius: 999px;
	color: var(--canchip-mint);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
}

/* ---------------------------------------------------------------------------
   Stats carousel (Figma: § Problem 270:726)
   --------------------------------------------------------------------------- */

.canchip-stats {
	padding-block: 110px 90px;
	background-color: var(--canchip-dark-blue);
}

.canchip-carousel {
	position: relative;
	margin-top: 60px;
}

.canchip-carousel__controls {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 22px;
}

/* Solid disc, no outline — that's how the mockup draws it (#252839, the same
   pill grey as the download buttons). */
.canchip-carousel__arrow {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--canchip-pill-grey);
	color: var(--canchip-arrow);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* The glyph is the arrow exported from the design file, painted through a mask
   so the button's `color` drives it — and so "previous" is the same file
   mirrored rather than a second, hand-drawn path. */
.canchip-carousel__arrow-icon {
	width: 16px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("assets/icons/arrow-right.svg") no-repeat center / contain;
	mask: url("assets/icons/arrow-right.svg") no-repeat center / contain;
}

[data-canchip-carousel-prev] .canchip-carousel__arrow-icon {
	transform: scaleX(-1);
}

.canchip-carousel__arrow:hover:not(:disabled) {
	background: #2F3346;
	color: var(--canchip-white);
}

.canchip-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* The track is the mockup's 1200px column, but the strip it scrolls in runs the
   full width of the window: that is what lets the next card show past the right
   edge instead of being clipped at the container. The inset repeats the column's
   own margin, so the active card still lines up with the heading above it. */
.canchip-carousel {
	/* Below ~1240px the track is the window minus the page gutter, and the slide
	   is pulled in a little further so the next card still peeks — on a phone
	   that sliver is the only cue that the row scrolls at all. */
	--carousel-track: min(1200px, calc(100vw - 40px));
	--carousel-gap: 56px;
	--carousel-inset: max(20px, calc((100vw - var(--carousel-track)) / 2));
	--carousel-slide: min(var(--carousel-track), calc(100vw - 80px));
}

.canchip-carousel__viewport {
	/* Break out of the 1200px column — width plus a negative margin either side,
	   the standard full-bleed pair. `overflow-x: clip` on body absorbs the extra
	   width that 100vw carries when a scrollbar is present. */
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	display: flex;
	gap: var(--carousel-gap);
	padding-inline: var(--carousel-inset);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Without this the snapped card would land against the window edge rather
	   than on the column. */
	scroll-padding-inline: var(--carousel-inset);
	scrollbar-width: none;
}

.canchip-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.canchip-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 34px;
}

.canchip-carousel__dot {
	width: 60px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.14);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.canchip-carousel__dot.is-active {
	background: var(--canchip-periwinkle);
}

.canchip-stat {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
	flex: 0 0 var(--carousel-slide);
	box-sizing: border-box;
	padding: 56px;
	scroll-snap-align: start;
	border: 1px solid transparent;
	border-radius: 2.5rem;
	/* Gradient hairline border: the card colour paints the padding box, the
	   gradient the border box. */
	background:
		linear-gradient(var(--canchip-card-dark), var(--canchip-card-dark)) padding-box,
		linear-gradient(120deg, #36B6CB 0%, #6EDAB6 100%) border-box;
}

.canchip-stat__figure {
	margin: 0;
	font-size: clamp(44px, 6vw, 72px);
	font-weight: 700;
	line-height: 1;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(90deg, #36B6CB 0%, #7FEFB9 100%);
}

.canchip-stat__claim {
	margin: 0;
	color: var(--canchip-white);
	font-size: var(--wp--preset--font-size--title-6, 20px);
	font-weight: 600;
	line-height: 1.4;
}

.canchip-stat .canchip-tag {
	margin: 24px 0 0;
}

.canchip-stat__answer {
	margin: 16px 0 0;
	color: var(--canchip-snow);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.6;
}

@media (max-width: 999.98px) {
	.canchip-stats {
		padding-block: 70px 60px;
	}

	.canchip-stat {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 36px 28px;
	}
}

/* ---------------------------------------------------------------------------
   Models grid (Figma: Frame 1597880455 331:451)
   --------------------------------------------------------------------------- */

.canchip-models {
	padding-block: 100px;
	background-color: var(--canchip-dark-blue);
}

.canchip-models__grid {
	display: grid;
	/* A 12-column track lets row two mirror row one: narrow/wide then
	   wide/narrow, as in the mockup. */
	grid-template-columns: repeat(12, 1fr);
	gap: 32px;
	margin-top: 60px;
}

.canchip-models__grid > :nth-child(1) { grid-column: span 5; }
.canchip-models__grid > :nth-child(2) { grid-column: span 7; }
.canchip-models__grid > :nth-child(3) { grid-column: span 7; }
.canchip-models__grid > :nth-child(4) { grid-column: span 5; }

.canchip-model {
	box-sizing: border-box;
	padding: 48px 56px;
	border-radius: 2.5rem;
	background-color: var(--canchip-card-dark);
}

.canchip-model__name {
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--title-5, 25px);
	font-weight: 700;
	line-height: 1.2;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(90deg, #8494E6 0%, #36B6CB 100%);
}

.canchip-model__result {
	margin: 20px 0 0;
	color: var(--canchip-white);
	font-size: var(--wp--preset--font-size--title-6, 20px);
	font-weight: 400;
	line-height: 1.45;
}

.canchip-model__metric {
	color: var(--canchip-mint);
	font-weight: 600;
}

.canchip-models__actions {
	margin-top: 44px;
}

/* The block carries WordPress' `is-style-outline`, whose own rules outweigh a
   two-class selector — hence naming the style here. In the mockup this is the
   same pill as the download buttons: a white wash, no border, periwinkle label. */
.canchip-models .wp-block-button.is-style-outline > .wp-block-button__link,
.canchip-models .wp-block-button__link {
	padding: 11px 22px;
	border: 0;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.13);
	color: var(--canchip-arrow);
	font-size: 15px;
	font-weight: 600;
	transition: background-color 0.2s ease;
}

/* Trailing arrow, per the mockup. */
.canchip-models .wp-block-button__link::after {
	content: "→";
	margin-inline-start: 10px;
	font-weight: 400;
}

/* This one goes the other way: the wash drops from 13% to 7%, so the button
   settles rather than lights up, and the label keeps its colour. */
.canchip-models .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.canchip-models .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.canchip-models .wp-block-button__link:hover,
.canchip-models .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.07);
	color: var(--canchip-arrow);
}

@media (max-width: 999.98px) {
	.canchip-models {
		padding-block: 70px;
	}

	.canchip-models__grid {
		grid-template-columns: 1fr;
	}

	/* Same weight as the per-card span rules above, so it actually wins. */
	.canchip-models__grid > :nth-child(n) {
		grid-column: 1 / -1;
	}

	.canchip-model {
		padding: 36px 28px;
	}
}

/* ---------------------------------------------------------------------------
   Media band (Figma: § Indications 68:450)
   Placeholder until the licensed still/footage lands — swap the background for
   an <img>/<video> then.
   --------------------------------------------------------------------------- */

.canchip-media-band {
	background-color: var(--canchip-dark-blue);
}

.canchip-media-band__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1440 / 640;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	/* The gradient stays underneath as the fallback for the moment before the
	   poster paints, and for anywhere the footage does not load. */
	background-image:
		radial-gradient(70% 90% at 30% 25%, rgba(132, 148, 230, 0.35) 0%, rgba(132, 148, 230, 0) 60%),
		linear-gradient(115deg, #0B1738 0%, #16405A 55%, #2F6E7A 100%);
}

/* The band is 1440x640 while the footage is 16:9, so it is cropped rather than
   letterboxed — the speaker sits centre-frame, which is what survives the crop. */
.canchip-media-band__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.canchip-media-band__video {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Stacking cards (Figma: "Overlapping" 103:600 and three siblings)
   Each card sticks a little lower than the one before it, so scrolling deals
   them into a pile. Pure CSS — sticky positioning, no scroll listeners.
   Reused for team (About), models (Solution) and validation (Science).
   --------------------------------------------------------------------------- */

.canchip-stack {
	--stack-top: 120px;
	--stack-step: 18px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-top: 60px;
}

.canchip-stack__item {
	position: sticky;
	top: calc(var(--stack-top) + var(--stack-index, 0) * var(--stack-step));
}

/* The pile only works when a card is shorter than the screen. On a phone these
   run 1000-1200px tall against a ~800px viewport, so each new card covered the
   one before it almost entirely — the reader saw a sliver of the previous card
   and a cropped current one. Below 1000px they are a plain list, which is what
   was agreed when the mobile layouts were dropped. */
@media (max-width: 999.98px), (prefers-reduced-motion: reduce) {
	.canchip-stack__item {
		position: static;
	}
}

/* Same rule, measured instead of guessed: `stacks.js` sets `.is-flat` when the
   deepest card would pin with its bottom past the fold — on a short laptop
   screen a pinned card's last lines are unreachable, since the card is fixed
   and the next one slides over it. The long gaps exist to pace the scroll
   between one card locking and the next; with nothing locking they are just
   holes, so they close up. Doubled class beats the per-section gap rules,
   which all carry two classes of their own. */
.canchip-stack.is-flat.is-flat {
	gap: 40px;
}

.canchip-stack.is-flat .canchip-stack__item {
	position: static;
}

/* ---------------------------------------------------------------------------
   Award card
   --------------------------------------------------------------------------- */

.canchip-awards {
	padding-block: 110px 140px;
	background-color: var(--canchip-dark-blue);
}

.canchip-award {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 40px;
	box-sizing: border-box;
	padding: 40px;
	border: 1px solid transparent;
	border-radius: 2.5rem;
	background:
		linear-gradient(var(--canchip-card-dark), var(--canchip-card-dark)) padding-box,
		linear-gradient(120deg, rgba(54, 182, 203, 0.55) 0%, rgba(110, 218, 182, 0.35) 100%) border-box;
}

.canchip-award__body {
	align-self: center;
	padding: 16px 0 16px 16px;
}

.canchip-award__title {
	margin: 18px 0 16px;
	color: var(--canchip-white);
	font-size: var(--wp--preset--font-size--title-6, 20px);
	font-weight: 600;
	line-height: 1.35;
}

.canchip-award__text {
	margin: 0 0 14px;
	color: var(--canchip-muted);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.65;
}

.canchip-award__text:last-child {
	margin-bottom: 0;
}

/* Placeholder for the award photography. Real photos drop into the same slot,
   so it carries a ratio rather than a min-height: without one, a portrait photo
   set the card height itself and ran 790px tall on a phone. */
.canchip-award__media {
	aspect-ratio: 4 / 4.5;
	border-radius: 2.5rem;
	background:
		radial-gradient(80% 80% at 30% 20%, rgba(147, 245, 194, 0.28) 0%, rgba(147, 245, 194, 0) 65%),
		linear-gradient(140deg, #1B2A4A 0%, #274E63 100%);
}

/* The Fraunhofer card has no photograph — it carries the DNA animation instead.
   The loop is drawn on white, so the slot turns white and the clip's own
   background disappears into it: no colour key, no alpha channel. `contain`
   keeps the strand whole, since it is tall and the slot is landscape. */
.canchip-award__media--dna {
	background: #FFFFFF;
}

.canchip-award__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.canchip-award__video {
		display: none;
	}
}


@media (max-width: 999.98px) {
	.canchip-awards {
		padding-block: 70px 90px;
	}

	.canchip-stack {
		--stack-top: 90px;
		--stack-step: 12px;
		gap: 28px;
	}

	.canchip-award {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 28px;
	}

	.canchip-award__body {
		padding: 0;
	}

	.canchip-award__media {
		min-height: 220px;
		order: -1;
	}
}

/* ---------------------------------------------------------------------------
   Process 01–05 (Figma: § Problem 331:2318 — five 1200x280 steps)
   Zigzag timeline: each step owns one half of the grid, the other half holds
   the micrograph, and a hairline runs down the middle. Steps start dimmed and
   light up on scroll (see the reveal block above).
   --------------------------------------------------------------------------- */

.canchip-process {
	padding-block: 63px 110px;
	background-color: var(--canchip-dark-blue);
}

.canchip-process__steps {
	position: relative;
	margin-top: 76px;
}

/* The steps come in on scroll. Each part of the row arrives on its own terms
   rather than the whole block fading at once:

     micrograph  drifts up, scales from 92% and loses a 10px blur — it reads as
                 pulling into focus, which suits a microscope image;
     number      rises and settles from a slightly larger size, like a stamp;
     heading     slides in from the outer edge of its own half;
     copy        follows the heading, a beat later and from a little further.

   The horizontal moves point outward-in, and which way that is depends on the
   zigzag — hence `--step-dir`, flipped on the mirrored rows. Everything uses the
   same long ease-out, so the parts feel like one movement at different depths
   rather than four separate animations. */
.canchip-process__step {
	--reveal-shift: 40px;
	--step-dir: 1;
	--step-ease: cubic-bezier(0.16, 1, 0.3, 1);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	min-height: 280px;
}

/* Even steps put the copy on the left, so the micrograph moves after it. */
.canchip-process__step--flip .canchip-process__media {
	order: 2;
}

.canchip-process__step--flip {
	--step-dir: -1;
}

.canchip-js .canchip-process__step .canchip-process__media {
	opacity: 0;
	transform: translateY(26px) scale(0.92);
	filter: blur(10px);
	transition:
		opacity 1.1s var(--step-ease),
		transform 1.1s var(--step-ease),
		filter 1.1s var(--step-ease);
}

.canchip-js .canchip-process__step .canchip-process__num {
	opacity: 0;
	transform: translateY(22px) scale(1.12);
	transition:
		opacity 1s var(--step-ease),
		transform 1s var(--step-ease);
}

.canchip-js .canchip-process__step .canchip-process__title,
.canchip-js .canchip-process__step .canchip-process__text {
	opacity: 0;
	transition:
		opacity 0.95s var(--step-ease),
		transform 0.95s var(--step-ease);
}

.canchip-js .canchip-process__step .canchip-process__title {
	transform: translateX(calc(var(--step-dir) * 28px));
}

.canchip-js .canchip-process__step .canchip-process__text {
	transform: translateX(calc(var(--step-dir) * 40px));
}

.canchip-js .canchip-process__step.is-revealed .canchip-process__media,
.canchip-js .canchip-process__step.is-revealed .canchip-process__num,
.canchip-js .canchip-process__step.is-revealed .canchip-process__title,
.canchip-js .canchip-process__step.is-revealed .canchip-process__text {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Wider spacing than before: with longer, softer moves the parts need room
   between them, otherwise they overlap into a single blur of motion. */
.canchip-js .canchip-process__step.is-revealed .canchip-process__media { transition-delay: 0.04s; }
.canchip-js .canchip-process__step.is-revealed .canchip-process__num   { transition-delay: 0.16s; }
.canchip-js .canchip-process__step.is-revealed .canchip-process__title { transition-delay: 0.28s; }
.canchip-js .canchip-process__step.is-revealed .canchip-process__text  { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	.canchip-js .canchip-process__step .canchip-process__media,
	.canchip-js .canchip-process__step .canchip-process__num,
	.canchip-js .canchip-process__step .canchip-process__title,
	.canchip-js .canchip-process__step .canchip-process__text {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}

.canchip-process__body {
	position: relative;
	/* 56px inside its own half, per the component. */
	padding-inline-start: 56px;
}

/* Oversized watermark number, sitting slightly above the copy block and 34px
   in from the end of its half. */
.canchip-process__num {
	position: absolute;
	top: 50%;
	right: 34px;
	margin: 0;
	margin-top: -35px;
	transform: translateY(-50%);
	/* 16% white: the mockup shows the step at 10% opacity with the number still
	   legible against the title, which pins the watermark at this alpha. */
	color: rgba(255, 255, 255, 0.16);
	font-size: clamp(52px, 6.1vw, 88px);
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

.canchip-process__title {
	margin: 0;
	color: var(--canchip-white);
	font-size: var(--wp--preset--font-size--title-5, 25px);
	font-weight: 600;
	line-height: 1.4;
}

.canchip-process__text {
	max-width: 291px;
	margin: 10px 0 0;
	color: var(--canchip-snow);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.6;
}

/* The fluorescence micrographs. They arrive as PNGs on transparent ground, so
   nothing sits behind them — the dark section is the background. */
.canchip-process__media {
	justify-self: center;
	width: 249px;
	height: 205px;
}

.canchip-process__media > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Kept only as the fallback pattern for a step whose image is missing. */
.canchip-process__media:empty {
	filter: blur(7px);
	background:
		radial-gradient(38% 44% at 42% 46%, rgba(192, 38, 211, 0.85) 0%, rgba(192, 38, 211, 0.25) 55%, rgba(192, 38, 211, 0) 78%),
		radial-gradient(30% 36% at 60% 36%, rgba(239, 68, 68, 0.7) 0%, rgba(239, 68, 68, 0.2) 55%, rgba(239, 68, 68, 0) 80%),
		radial-gradient(34% 40% at 55% 62%, rgba(124, 58, 237, 0.8) 0%, rgba(124, 58, 237, 0.22) 55%, rgba(124, 58, 237, 0) 80%),
		radial-gradient(22% 26% at 36% 62%, rgba(216, 70, 239, 0.6) 0%, rgba(216, 70, 239, 0) 80%),
		radial-gradient(18% 22% at 50% 50%, rgba(5, 8, 27, 0.75) 0%, rgba(5, 8, 27, 0) 85%);
}

/* These rotations existed only to stop five identical placeholders from looking
   copy-pasted. Each step now has its own micrograph, and flipping or rotating a
   real specimen image would misrepresent it, so they apply to the fallback only. */
.canchip-process__step:nth-child(2) .canchip-process__media:empty { transform: scale(-1, 1) rotate(12deg); }
.canchip-process__step:nth-child(3) .canchip-process__media:empty { transform: rotate(-24deg) scale(0.86); }
.canchip-process__step:nth-child(4) .canchip-process__media:empty { transform: scale(1, -1) rotate(8deg); }
.canchip-process__step:nth-child(5) .canchip-process__media:empty { transform: rotate(140deg) scale(0.8); }

@media (max-width: 999.98px) {
	.canchip-process {
		padding-block: 50px 70px;
	}

	.canchip-process__steps {
		margin-top: 48px;
	}

	.canchip-process__step {
		grid-template-columns: 1fr;
		gap: 24px;
		min-height: 0;
		padding-block: 30px;
	}

	/* Micrograph first on every step — the zigzag has nothing to alternate
	   against once the row collapses to one column. */
	.canchip-process__step .canchip-process__media {
		order: -1;
		transform: none;
	}

	.canchip-process__body {
		padding-inline-start: 0;
	}

	.canchip-process__text {
		max-width: 46ch;
	}

	.canchip-process__num {
		top: 0;
		right: 0;
		margin-top: 0;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Video band (Figma: § Indications/Default 395:364 — 1440x729)
   Placeholder still with the 149px play badge from the mockup. The badge is
   decorative until the licensed footage lands; wiring it to a <video> is a
   backlog item.
   --------------------------------------------------------------------------- */

.canchip-video {
	background-color: var(--canchip-dark-blue);
}

.canchip-video__frame {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	aspect-ratio: 1440 / 729;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	/* Under the still, for the moment before it paints. */
	background-color: #AFBCA6;
}

/* The film fills the band and sits under the badge; both are grid items in the
   same cell, which is what centres the badge over it. */
.canchip-video__player {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.canchip-video__frame > .canchip-video__play {
	grid-area: 1 / 1;
	z-index: 1;
}

/* Once it is running the badge gets out of the way. */
.canchip-video__frame.is-playing .canchip-video__play {
	display: none;
}

.canchip-video__play {
	display: grid;
	place-items: center;
	width: 149px;
	height: 149px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(5, 8, 27, 0.42);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.canchip-video__play:hover,
.canchip-video__play:focus-visible {
	background: rgba(5, 8, 27, 0.62);
	transform: scale(1.04);
}

/* Play triangle drawn with borders so the badge needs no asset. */
.canchip-video__play::after {
	content: "";
	width: 0;
	height: 0;
	margin-inline-start: 10px;
	border-block: 25px solid transparent;
	border-inline-start: 42px solid var(--canchip-white);
}

@media (max-width: 999.98px) {
	.canchip-video__frame {
		aspect-ratio: 4 / 3;
	}

	.canchip-video__play {
		width: 96px;
		height: 96px;
	}

	.canchip-video__play::after {
		margin-inline-start: 7px;
		border-block-width: 16px;
		border-inline-start-width: 27px;
	}
}

/* ---------------------------------------------------------------------------
   Model library (Figma: § Problem 380:388 — Overlapping 380:414)
   Four wide model cards plus the CTA, all stacking through the shared
   `.canchip-stack` sticky mechanism.
   --------------------------------------------------------------------------- */

.canchip-models-library {
	padding-block: 110px 146px;
	background-color: var(--canchip-dark-blue);
}

/* The stack is a real group block here (so the CTA inside it stays editable),
   which means WordPress' flow-layout margins have to be cleared. */
.canchip-models-library .canchip-stack > * {
	margin-block: 0;
}

.canchip-model-card {
	display: grid;
	/* 416px title column + 129px gutter + the rest, straight from the card. */
	grid-template-columns: 416px 1fr;
	gap: 129px;
	align-items: center;
	box-sizing: border-box;
	padding: 56px;
	border: 1px solid transparent;
	border-radius: 2.5rem;
	background:
		linear-gradient(var(--canchip-card-dark), var(--canchip-card-dark)) padding-box,
		linear-gradient(120deg, #4057A2 0%, #2E6E77 52%, #6EDAB6 100%) border-box;
}

.canchip-model-card__name {
	margin: 0;
	/* The clipped gradient ramps across the element box, so the box has to hug
	   the glyphs — on a full-width column the text would only ever show the
	   first half of the ramp. */
	width: fit-content;
	font-size: clamp(32px, 3.75vw, 54px);
	font-weight: 700;
	line-height: 1.08;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(90deg, #3FBCEC 0%, #7BEFB8 100%);
}

.canchip-model-card__result {
	margin: 10px 0 0;
	color: var(--canchip-white);
	font-size: clamp(19px, 1.7vw, 24px);
	font-weight: 400;
	line-height: 1.42;
}

.canchip-model-card__metric {
	color: var(--canchip-mint);
	font-weight: 600;
}

.canchip-model-card__text {
	margin: 10px 0 0;
	color: var(--canchip-snow);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
}

/* Follows the stack; it is deliberately NOT inside it. As a stack child it was
   sticky like the cards and pinned itself over the last one — and even once the
   stickiness was removed, sitting inside the container kept the cards pinned
   while it scrolled past. The cards deal onto each other, then the CTA arrives
   after them, the way the CTA band does on Home, Science and About. */
.canchip-model-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	padding: 64px 40px;
	border-radius: 2.5rem;
	background: var(--canchip-gradient-cta);
	text-align: center;
}

/* The pile reads as one object, so the CTA after it needs a section-sized break
   rather than the 40px that separates the cards from each other. Written as a
   sibling selector for specificity: Blocksy zeroes `margin-block-start` on every
   flow child, and does it from a later stylesheet at equal weight. */
.canchip-stack + .canchip-model-cta {
	margin-top: 120px;
}

/* Phones: the cards no longer pile, so the break can be smaller — but it still
   has to be bigger than the 28px between the cards themselves. */
@media (max-width: 999.98px) {
	.canchip-stack + .canchip-model-cta {
		margin-top: 72px;
	}
}

.canchip-model-cta .canchip-model-cta__title {
	max-width: 24ch;
	margin: 0 auto;
	color: var(--canchip-dark-blue);
	font-size: var(--wp--preset--font-size--title-3, clamp(29px, 3vw, 39px));
	font-weight: 700;
	line-height: 1.2;
}

.canchip-model-cta .canchip-model-cta__text {
	max-width: 44ch;
	margin: 20px auto 0;
	color: var(--canchip-dark-blue);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	line-height: 1.5;
}

.canchip-model-cta .canchip-model-cta__actions {
	justify-content: center;
	margin-top: 28px;
}

.canchip-model-cta .wp-block-button__link {
	padding: 13px 26px;
	border-radius: 999px;
	background-color: var(--canchip-dark-blue);
	color: var(--canchip-white);
	font-size: 15px;
	font-weight: 600;
}

@media (max-width: 1199.98px) {
	.canchip-model-card {
		grid-template-columns: 34% 1fr;
		gap: 56px;
	}
}

@media (max-width: 999.98px) {
	.canchip-models-library {
		padding-block: 70px 90px;
	}

	.canchip-model-card {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 36px 28px;
	}

	.canchip-model-cta {
		padding: 48px 24px;
	}
}

/* ---------------------------------------------------------------------------
   Study formats (Figma: Frame 1597880477 429:430)
   Three rows read as a four-column table; the mockup has no header row, so the
   column names live in visually hidden labels.
   --------------------------------------------------------------------------- */

.canchip-formats {
	padding-block: 110px;
	background-color: var(--canchip-dark-blue);
}

.canchip-formats__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 75px;
}

.canchip-format {
	/* The top padding is reserved space for the hover labels, spelled out as what
	   has to fit in it: the gap from the card's edge down to the tag, the tag's
	   own box, and the gap from the tag to the column's first line. Values from
	   the hover variant in Figma — edge → tag is 48px, the tag box is 23px. */
	--format-tag-inset: 48px;
	--format-tag-height: 24px;
	--format-tag-gap: 14px;
	display: grid;
	grid-template-columns: 316px 222px 222px 1fr;
	/* Columns line up with each other along their top edge — otherwise a
	   two-line name or a three-line description shifts its neighbours' first
	   line (and their hover labels) out of step. `start` rather than `center`
	   so the reserved space above stays exactly that and isn't redistributed. */
	align-items: start;
	align-content: start;
	box-sizing: border-box;
	min-height: 191px;
	padding:
		calc(var(--format-tag-inset) + var(--format-tag-height) + var(--format-tag-gap))
		56px
		56px;
	border-radius: 2.5rem;
	background-color: var(--canchip-card-dark);
}

.canchip-format__name {
	margin: 0;
	/* Same reason as the model card names: the ramp is clipped to the box. */
	width: fit-content;
	max-width: 100%;
	padding-inline-end: 24px;
	font-size: var(--wp--preset--font-size--title-3, clamp(29px, 3vw, 39px));
	font-weight: 700;
	line-height: 1.18;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	/* Bottom-left periwinkle to top-right mint, so single-line names read
	   left-to-right and two-line names top-to-bottom, as drawn. */
	background-image: linear-gradient(45deg, #6B7BF5 0%, #94F6C3 100%);
}

.canchip-format__value {
	position: relative;
	margin: 0;
	padding-inline-end: 24px;
	color: var(--canchip-white);
	font-size: var(--wp--preset--font-size--title-6, 20px);
	font-weight: 500;
	line-height: 1.4;
}

.canchip-format__desc {
	position: relative;
	margin: 0;
	color: var(--canchip-snow);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
}

/* Column labels. The mockup shows them only in the card's hover state, so they
   sit above the value out of flow — revealing them must not move the value.
   `opacity: 0` rather than a sr-only clip: the row has no visible header, so
   these are the only column names a screen reader gets, hover or not. */
.canchip-format__label {
	position: absolute;
	/* Sits in the space the card's top padding reserves for it. */
	bottom: calc(100% + var(--format-tag-gap));
	left: 0;
	opacity: 0;
	/* Rises into place from below, out of the value it labels. */
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.canchip-format:hover .canchip-format__label,
	.canchip-format:focus-within .canchip-format__label {
		opacity: 1;
		transform: none;
	}
}

/* Labels take their place permanently below 1000px as well as on touch. The
   width matters as much as the pointer: a narrow desktop window still reports a
   mouse, so keying on `hover: none` alone left the labels hidden behind a hover
   for anyone checking the mobile layout by resizing — and on a phone-sized
   layout the column headers are the only thing naming those values. */
@media (hover: none), (pointer: coarse), (max-width: 999.98px) {
	/* In the flow they carry their own space, so the card stops reserving it. */
	.canchip-format {
		--format-tag-inset: 40px;
		--format-tag-height: 0px;
		--format-tag-gap: 0px;
	}

	.canchip-format__label {
		position: static;
		display: block;
		width: fit-content;
		margin-bottom: 10px;
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.canchip-format__label {
		transform: none;
		transition: none;
	}
}

@media (max-width: 1199.98px) {
	.canchip-format {
		grid-template-columns: 27% 18% 18% 1fr;
		padding-inline: 36px;
	}
}

@media (max-width: 999.98px) {
	.canchip-formats {
		padding-block: 70px;
	}

	.canchip-formats__rows {
		margin-top: 48px;
	}

	/* Stacked, with the two metrics side by side so the row stays scannable. */
	.canchip-format {
		grid-template-columns: 1fr 1fr;
		gap: 16px 24px;
		min-height: 0;
		padding: 32px 28px;
	}

	.canchip-format .canchip-format__name,
	.canchip-format .canchip-format__desc {
		grid-column: 1 / -1;
	}

	.canchip-format__name {
		padding-inline-end: 0;
	}
}

/* ---------------------------------------------------------------------------
   What you receive (Figma: Frame 1597880455 403:364)
   Photo on the left, heading plus a seven-row checklist on the right; the rows
   light up on scroll while their rules stay put.
   --------------------------------------------------------------------------- */

.canchip-receive {
	padding-block: 110px 160px;
	background-color: var(--canchip-dark-blue);
}

.canchip-receive__grid {
	display: grid;
	grid-template-columns: 520px 600px;
	gap: 80px;
	align-items: start;
}

/* Placeholder for the lab photograph (520x715 in the mockup). */
.canchip-receive__media {
	aspect-ratio: 520 / 715;
	border-radius: 2.5rem;
	background:
		radial-gradient(70% 55% at 40% 30%, rgba(233, 233, 233, 0.22) 0%, rgba(233, 233, 233, 0) 70%),
		linear-gradient(150deg, #1B2A4A 0%, #274E63 55%, #14273C 100%);
}

.canchip-receive__list {
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

.canchip-receive__item {
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.canchip-receive__item + .canchip-receive__item {
	padding-top: 32px;
}

.canchip-receive__text {
	--reveal-from: 0.3;
	--reveal-shift: 10px;
	display: block;
	color: var(--canchip-white);
	font-size: clamp(18px, 1.7vw, 24px);
	font-weight: 500;
	line-height: 1.5;
}

@media (max-width: 1199.98px) {
	.canchip-receive__grid {
		grid-template-columns: 42% 1fr;
		gap: 48px;
	}
}

@media (max-width: 999.98px) {
	.canchip-receive {
		padding-block: 70px 90px;
	}

	.canchip-receive__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.canchip-receive__media {
		aspect-ratio: 16 / 11;
	}

	.canchip-receive__list {
		margin-top: 40px;
	}
}

/* ---------------------------------------------------------------------------
   Science — hero variant (Figma: Hero 469:1241 — 1440x773)
   Headline only: no intro paragraph, no button, and correspondingly shorter.
   --------------------------------------------------------------------------- */

.canchip-hero--compact {
	--hero-height: 773px;
	padding-block: 231px 109px;
}

/* About: full-height frame, but the mockup drops the headline 20px lower than
   Home's. Top and bottom move by the same amount so the 867px frame is kept. */
.canchip-hero--low {
	padding-block: 310px 103px;
}

/* Contact: shorter again, headline plus one line of copy, no button. */
.canchip-hero--short {
	--hero-height: 745px;
	padding-block: 203px 107px;
}

/* ---------------------------------------------------------------------------
   Intro statement (Figma: 622:1273 — 1157x188)
   Centred lead-in with individual phrases in periwinkle and mint.
   --------------------------------------------------------------------------- */

.canchip-intro {
	padding-block: 160px 120px;
	background-color: var(--canchip-dark-blue);
}

.canchip-intro .canchip-intro__text {
	max-width: 1157px;
	margin: 0 auto;
	color: var(--canchip-white);
	font-size: clamp(22px, 2.3vw, 33px);
	font-weight: 700;
	line-height: 1.42;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   Validation stack (Figma: § Problem 469:1347 — Overlapping 469:1348)
   Four 1200x594 cards on the shared sticky-stack mechanism. The mockup leaves a
   generous gap between them, which is what sets how far you scroll between one
   card locking and the next covering it.
   --------------------------------------------------------------------------- */

.canchip-validation {
	padding-block: 0 90px;
	background-color: var(--canchip-dark-blue);
}

.canchip-validation .canchip-validation__stack {
	gap: 190px;
	margin-top: 0;
}

.canchip-validation-card {
	display: grid;
	/* The notes column still starts 543px in, per the card — but the title no
	   longer owns all 543 of that. The two columns used to butt straight up
	   against each other, and the longest names very nearly fill the column, so
	   "Pancreas-on-Chip" ended up all but touching the text beside it. Splitting
	   the same 543px into a 503px column plus a 40px gutter keeps the right-hand
	   column exactly where it was drawn and gives the title a lane it cannot
	   leave. */
	grid-template-columns: minmax(0, 503px) 1fr;
	column-gap: 40px;
	align-items: center;
	box-sizing: border-box;
	min-height: 594px;
	padding: 48px 78px 48px 56px;
	border: 1px solid transparent;
	border-radius: 2.5rem;
	background:
		linear-gradient(var(--canchip-card-dark), var(--canchip-card-dark)) padding-box,
		linear-gradient(120deg, #4057A2 0%, #2E6E77 52%, #6EDAB6 100%) border-box;
}

.canchip-validation-card__name {
	/* fit-content so the clipped gradient runs across the glyphs, not the column;
	   max-width so a name longer than the four we have wraps inside its lane
	   instead of running into the notes. */
	width: fit-content;
	max-width: 100%;
	margin: 0;
	/* Capped below the shared title-1 token on purpose. That token keeps growing
	   with the window (4.2vw up to 61px) while this card stops at 1200px, so past
	   ~1450px the name grew and its column did not — which is how it reached the
	   notes in the first place. At 54px the longest name ("Pancreas-on-Chip",
	   just under 9px of width per pixel of type) sits on one line with 18px to
	   spare; at 56px it measures 503.0 against a 503px lane and wraps on nothing
	   more than sub-pixel rounding. */
	font-size: clamp(38px, 4.2vw, 54px);
	font-weight: 700;
	line-height: 1.05;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(90deg, #3FBCEC 0%, #7BEFB8 100%);
}

.canchip-validation-card__result {
	margin: 14px 0 0;
	color: var(--canchip-white);
	font-size: var(--wp--preset--font-size--title-5, 25px);
	font-weight: 600;
	line-height: 1.4;
}

.canchip-validation-card__metric {
	color: var(--canchip-mint);
}

.canchip-validation-card__intro,
.canchip-validation-card__text {
	margin: 12px 0 0;
	color: var(--canchip-snow);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.6;
}

.canchip-validation-card__notes {
	display: grid;
	gap: 32px;
	margin-top: 28px;
}

/* CRC carries both "Clinical relevance" and "Reproducibility" side by side. */
.canchip-validation-card__notes--split {
	grid-template-columns: 1fr 1fr;
}

.canchip-validation-card__note .canchip-validation-card__text {
	margin-top: 14px;
}

@media (max-width: 999.98px) {
	/* Each desktop variant carries its own padding, so every one has to be named
	   here — otherwise its 200–300px top padding survives on a phone. */
	.canchip-hero--compact,
	.canchip-hero--short,
	.canchip-hero--low {
		--hero-height: 0px;
		padding-block: 150px 70px;
	}

	.canchip-intro {
		padding-block: 70px 60px;
	}

	.canchip-validation {
		padding-block: 0 70px;
	}

	.canchip-validation .canchip-validation__stack {
		gap: 28px;
	}

	.canchip-validation-card {
		grid-template-columns: 1fr;
		gap: 20px;
		min-height: 0;
		padding: 32px 28px;
	}

	.canchip-validation-card__notes--split {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Principle cards (Figma: Frame 1597880479 501:1048)
   Two rows of two, widths mirrored between the rows. Icons are the exported
   Figma vectors used as masks, so the gradient comes from the shared token.
   --------------------------------------------------------------------------- */

.canchip-principles {
	padding-block: 110px;
	background-color: var(--canchip-dark-blue);
}

.canchip-principles__rows {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 56px;
}

.canchip-principles__row {
	display: flex;
	gap: 32px;
}

.canchip-principle {
	/* flex-grow carries the mockup's per-card width; basis 0 makes the growth
	   factors the whole story rather than content width. */
	flex: 0 1 0;
	box-sizing: border-box;
	padding: 56px;
	border-radius: 2.5rem;
	background-color: var(--canchip-card-dark);
}

.canchip-principle__icon {
	display: block;
	width: 61px;
	height: 61px;
	background: var(--canchip-gradient-accent);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.canchip-principle__icon--cube {
	-webkit-mask-image: url("assets/icons/cube.svg");
	mask-image: url("assets/icons/cube.svg");
}

.canchip-principle__icon--microscope {
	-webkit-mask-image: url("assets/icons/microscope.svg");
	mask-image: url("assets/icons/microscope.svg");
}

.canchip-principle__icon--package {
	-webkit-mask-image: url("assets/icons/package.svg");
	mask-image: url("assets/icons/package.svg");
}

.canchip-principle__icon--certificate {
	-webkit-mask-image: url("assets/icons/certificate.svg");
	mask-image: url("assets/icons/certificate.svg");
}

.canchip-principle__title {
	margin: 16px 0 0;
	font-size: var(--wp--preset--font-size--title-4, clamp(25px, 2.2vw, 31px));
	font-weight: 700;
	line-height: 1.5;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(45deg, #6B7BF5 0%, #94F6C3 100%);
}

.canchip-principle__text {
	margin: 32px 0 0;
	color: var(--canchip-snow);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.6;
}

@media (max-width: 999.98px) {
	.canchip-principles {
		padding-block: 70px;
	}

	.canchip-principles__rows {
		margin-top: 40px;
	}

	.canchip-principles__row {
		flex-direction: column;
	}

	.canchip-principle {
		padding: 36px 28px;
	}
}

/* ---------------------------------------------------------------------------
   Download button (Figma: Primary Button_outline 501:1473)
   Solid translucent pill with periwinkle label; used by the certification block
   and the white-paper cards.
   --------------------------------------------------------------------------- */

.canchip-download {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	/* 13% white over the page background is the #252839 this used to hard-code;
	   as a wash it also sits correctly on the cards, which are lighter. */
	background-color: rgba(255, 255, 255, 0.13);
	/* Same label colour as the other pill of this component, #91A2DA. */
	color: var(--canchip-arrow);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.canchip-download:hover,
.canchip-download:focus-visible {
	background-color: rgba(255, 255, 255, 0.07);
	color: var(--canchip-arrow);
}

/* Glyphs as masks so they inherit the label colour, including on hover. */
.canchip-download__icon {
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.canchip-download__icon--arrow {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.canchip-download__icon--file {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4.5-4.5M12 15l4.5-4.5M4 19h16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4.5-4.5M12 15l4.5-4.5M4 19h16'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   Certification proof (Figma: Card/Proof 501:1466 — 1200x300)
   --------------------------------------------------------------------------- */

.canchip-proof {
	padding-block: 110px;
	background-color: var(--canchip-dark-blue);
}

.canchip-proof__card {
	display: grid;
	grid-template-columns: 547px 1fr;
	gap: 80px;
	align-items: center;
	margin-top: 56px;
}

/* Placeholder for the certification photograph. */
.canchip-proof__media {
	height: 300px;
	border-radius: 2.5rem;
	background:
		radial-gradient(75% 85% at 45% 40%, rgba(233, 237, 244, 0.9) 0%, rgba(233, 237, 244, 0.35) 55%, rgba(233, 237, 244, 0.12) 100%),
		linear-gradient(140deg, #8E9CB4 0%, #C3CCDA 60%, #9BA9BE 100%);
}

.canchip-proof__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.canchip-proof__video {
		display: none;
	}
}

.canchip-proof__title {
	margin: 0;
	color: var(--canchip-white);
	font-size: var(--wp--preset--font-size--title-5, 25px);
	font-weight: 600;
	line-height: 1.4;
}

.canchip-proof__text {
	max-width: 528px;
	margin: 10px 0 32px;
	color: var(--canchip-snow);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.6;
}

@media (max-width: 999.98px) {
	.canchip-proof {
		padding-block: 70px;
	}

	.canchip-proof__card {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-top: 40px;
	}

	.canchip-proof__media {
		height: 220px;
	}
}

/* ---------------------------------------------------------------------------
   White papers carousel (Figma: 501:1511 — Carousel_2 593:1370)
   Two cards per view on the shared scroll-snap carousel.
   --------------------------------------------------------------------------- */

.canchip-papers {
	padding-block: 110px;
	background-color: var(--canchip-dark-blue);
}

/* Two cards fill the column here instead of one, so the slide is half the track
   minus the gutter between the pair; the mockup's gutter is 34px. */
.canchip-papers__carousel {
	--carousel-gap: 34px;
	--carousel-slide: calc((var(--carousel-track) - var(--carousel-gap)) / 2);
}

.canchip-paper {
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--carousel-slide);
	box-sizing: border-box;
	padding: 28px;
	scroll-snap-align: start;
	border: 1px solid transparent;
	border-radius: 2.5rem;
	background:
		linear-gradient(var(--canchip-card-dark), var(--canchip-card-dark)) padding-box,
		linear-gradient(120deg, #4057A2 0%, #2E6E77 52%, #6EDAB6 100%) border-box;
}

.canchip-papers .canchip-carousel__viewport {
	/* Room for the cards' gradient border and focus ring. Block only — the
	   inline padding is what insets the track onto the page column, and setting
	   it here would park the cards against the window edge. */
	padding-block: 2px;
}

/* The cover. Two of the three papers have one in the mockup; the third keeps
   the placeholder gradient until its artwork arrives (see backlog B4). */
.canchip-paper__media {
	aspect-ratio: 520 / 232;
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: 2.5rem;
	background:
		radial-gradient(70% 80% at 35% 30%, rgba(233, 237, 244, 0.85) 0%, rgba(233, 237, 244, 0.3) 60%, rgba(233, 237, 244, 0.1) 100%),
		linear-gradient(140deg, #7C8AA6 0%, #B9C4D4 55%, #8D9AAF 100%);
}

.canchip-paper__title {
	margin: 14px 0 0;
	color: var(--canchip-white);
	font-size: var(--wp--preset--font-size--title-5, 25px);
	font-weight: 600;
	line-height: 1.32;
}

/* The model name sits on its own line above the study title, so each is read
   as what it is rather than running together as one sentence. */
.canchip-paper__accent {
	display: block;
}

.canchip-paper__subtitle {
	display: block;
	margin-top: 4px;
}

.canchip-paper__accent {
	color: var(--canchip-mint);
}

/* The mockup clips the abstract to three lines, but it was drawn against filler
   text; the real abstracts lose their point mid-sentence that way, so they run
   in full. The cards stay level because the carousel viewport is a flex row —
   every card is already as tall as the tallest one in it. */
.canchip-paper__text {
	margin: 12px 0 24px;
	color: var(--canchip-snow);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.6;
}

/* Button sits on the card's baseline however long the title runs. */
.canchip-paper .canchip-download {
	margin-top: auto;
	align-self: flex-start;
}

@media (max-width: 999.98px) {
	.canchip-papers {
		padding-block: 70px;
	}

	/* One card per view on a narrow screen — half of 700px is unreadable. */
	.canchip-papers__carousel {
		--carousel-slide: var(--carousel-track);
	}
}

/* ---------------------------------------------------------------------------
   Regulation cards (Figma: "Variante B – Box animation" 656:1718)
   Static for now — the intended box animation was never specified.
   --------------------------------------------------------------------------- */

.canchip-regulation {
	padding-block: 110px;
	background-color: var(--canchip-dark-blue);
}

.canchip-regulation__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-top: 56px;
}

.canchip-regulation-card {
	box-sizing: border-box;
	min-height: 376px;
	padding: 56px;
	border-radius: 2.5rem;
	background-color: var(--canchip-card-dark);
}

.canchip-regulation-card__title {
	width: fit-content;
	max-width: 100%;
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--title-4, clamp(25px, 2.2vw, 31px));
	font-weight: 700;
	line-height: 1.25;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(45deg, #6B7BF5 0%, #94F6C3 100%);
}

.canchip-regulation-card__text {
	margin: 18px 0 0;
	color: var(--canchip-snow);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.6;
}

@media (max-width: 999.98px) {
	.canchip-regulation {
		padding-block: 70px;
	}

	.canchip-regulation__grid {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 40px;
	}

	.canchip-regulation-card {
		min-height: 0;
		padding: 36px 28px;
	}
}

/* ---------------------------------------------------------------------------
   Founders story (Figma: Frame 1597880456 501:2583)
   Same photo-left/text-right split as the deliverables checklist, with a long
   body paragraph in place of the list.
   --------------------------------------------------------------------------- */

.canchip-story {
	padding-block: 161px 130px;
	background-color: var(--canchip-dark-blue);
}

.canchip-story__grid {
	display: grid;
	grid-template-columns: 520px 600px;
	gap: 80px;
	align-items: start;
}

/* Placeholder for the founders' photograph (520x588 in the mockup). */
.canchip-story__media {
	aspect-ratio: 520 / 588;
	border-radius: 2.5rem;
	background:
		radial-gradient(70% 55% at 40% 30%, rgba(233, 233, 233, 0.22) 0%, rgba(233, 233, 233, 0) 70%),
		linear-gradient(150deg, #1B2A4A 0%, #274E63 55%, #14273C 100%);
}

.canchip-story__text {
	margin: 56px 0 0;
	color: var(--canchip-snow);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.6;
}

@media (max-width: 1199.98px) {
	.canchip-story__grid {
		grid-template-columns: 42% 1fr;
		gap: 48px;
	}
}

@media (max-width: 999.98px) {
	.canchip-story {
		padding-block: 70px 80px;
	}

	.canchip-story__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.canchip-story__media {
		aspect-ratio: 16 / 11;
	}

	.canchip-story__text {
		margin-top: 36px;
	}
}

/* ---------------------------------------------------------------------------
   Mission / Vision (Figma: Frame 1597880457 501:2653)
   Two 584x340 gradient cards carrying only a label — the body copy and the
   interaction behind them are still open questions (see backlog.md).
   --------------------------------------------------------------------------- */

.canchip-pillars {
	padding-block: 110px;
	background-color: var(--canchip-dark-blue);
}

.canchip-pillars__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

/* Two states, per the mockup: the label alone, and — on hover — a dimmed card
   carrying the statement, with the accent rule wiping across its top edge. Both
   the label and the text sit in the same grid cell so the swap needs no
   measuring and nothing shifts as it happens. */
/* Geometry and both fills are the component's own values (Mission 501:2714 /
   501:2713), not eyeballed: 584x340 at 40px radius, 56px padding.

   Both states are the *same* accent ramp over the dark page — 80% opaque at
   rest, 30% on hover — so hovering reads as the card turning to glass. Getting
   this wrong is easy: laying a 30% layer on top of the 80% one makes the card
   brighter, which is the opposite of the mockup. One layer, one opacity. */
.canchip-pillar {
	position: relative;
	display: grid;
	place-items: center;
	gap: 12px;
	overflow: hidden;
	box-sizing: border-box;
	min-height: 340px;
	padding: 56px;
	border-radius: 2.5rem;
	background-color: var(--canchip-dark-blue);
}

.canchip-pillar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		65.93deg,
		#6B7BF5 1.06%,
		#3FBCEC 51.41%,
		#34D3C0 92.84%,
		#93F5C2 137.03%
	);
	opacity: 0.8;
	transition: opacity 0.4s ease;
}

/* The accent rule, 10px here — this component draws a thicker one than the 6px
   bar on the format cards — wiping open from the left, same as those do. */
.canchip-pillar::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	height: 10px;
	background: var(--canchip-gradient-accent);
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.canchip-pillar__label,
.canchip-pillar__text {
	grid-area: 1 / 1;
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--canchip-white);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.canchip-pillar__label {
	font-size: var(--wp--preset--font-size--title-1, clamp(38px, 4.2vw, 61px));
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
}

/* The statement sits left and high in the card, as drawn — not centred like the
   label it replaces. */
.canchip-pillar__text {
	align-self: start;
	justify-self: start;
	/* 472px of copy inside a 584px card is exactly the content box at 56px
	   padding, so it is expressed as such rather than as a fixed width. */
	max-width: 100%;
	font-size: var(--wp--preset--font-size--title-5, 25px);
	font-weight: 600;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(8px);
}

@media (hover: hover) and (pointer: fine) {
	.canchip-pillar:hover::after,
	.canchip-pillar:focus-visible::after {
		opacity: 0.3;
	}

	.canchip-pillar:hover::before,
	.canchip-pillar:focus-visible::before {
		clip-path: inset(0 0 0 0);
	}

	.canchip-pillar:hover .canchip-pillar__label,
	.canchip-pillar:focus-visible .canchip-pillar__label {
		opacity: 0;
		transform: scale(0.96);
	}

	.canchip-pillar:hover .canchip-pillar__text,
	.canchip-pillar:focus-visible .canchip-pillar__text {
		opacity: 1;
		transform: none;
	}
}

/* Same rule as the format labels: below 1000px, or with no pointer to hover
   with, the statement is the point of the card — so it is shown outright and the
   label steps down to a heading above it. */
@media (hover: none), (pointer: coarse), (max-width: 999.98px) {
	.canchip-pillar {
		align-content: start;
		justify-items: start;
	}

	.canchip-pillar::after {
		opacity: 0.3;
	}

	.canchip-pillar::before {
		clip-path: inset(0 0 0 0);
	}

	.canchip-pillar__label,
	.canchip-pillar__text {
		grid-area: auto;
	}

	.canchip-pillar__label {
		font-size: var(--wp--preset--font-size--title-5, 25px);
		text-align: start;
	}

	.canchip-pillar__text {
		opacity: 1;
		transform: none;
		padding-block-start: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.canchip-pillar,
	.canchip-pillar::after,
	.canchip-pillar::before,
	.canchip-pillar__label,
	.canchip-pillar__text {
		transition: none;
	}
}

@media (max-width: 999.98px) {
	.canchip-pillars {
		padding-block: 70px;
	}

	.canchip-pillars__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.canchip-pillar {
		min-height: 220px;
	}
}

/* ---------------------------------------------------------------------------
   Team stack (Figma: Frame 164 532:1303 — Overlapping 532:1304)
   Three 1087x498 cards on the shared sticky stack, photo side alternating.
   --------------------------------------------------------------------------- */

.canchip-team {
	padding-block: 162px 194px;
	background-color: var(--canchip-dark-blue);
}

.canchip-team .canchip-team__stack {
	/* The mockup leaves a long run between cards, which is what sets how far you
	   scroll between one card locking and the next covering it. */
	gap: 297px;
	margin-top: 122px;
}

.canchip-team-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
	box-sizing: border-box;
	/* Cards are 1087 wide against the usual 1200 container, so they sit inset. */
	width: min(100%, 1087px);
	min-height: 498px;
	margin-inline: auto;
	padding: 41px;
	border: 1px solid transparent;
	border-radius: 2.5rem;
	background:
		linear-gradient(var(--canchip-card-dark), var(--canchip-card-dark)) padding-box,
		linear-gradient(120deg, #4057A2 0%, #2E6E77 52%, #6EDAB6 100%) border-box;
}

/* Middle card mirrors: photo left, copy right. */
.canchip-team-card--flip .canchip-team-card__photo {
	order: -1;
}

.canchip-team-card__name {
	width: fit-content;
	margin: 0 0 15px;
	font-size: var(--wp--preset--font-size--title-3, clamp(29px, 3vw, 39px));
	font-weight: 700;
	line-height: 1.2;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(90deg, #6B7BF5 0%, #93F5C2 100%);
}

.canchip-team-card__bio {
	margin: 37px 0 0;
	color: var(--canchip-snow);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.6;
}

/* 37px is the gap the mockup leaves between the role pill and the bio; between
   paragraphs of the same bio that reads as a break in the text, so they sit at
   a normal paragraph distance instead. */
.canchip-team-card__bio + .canchip-team-card__bio {
	margin-top: 18px;
}

.canchip-team-card__link {
	margin: 24px 0 0;
	color: var(--canchip-snow);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.6;
}

/* Mint + underline is what an inline link already looks like on this site (the
   consent line on Contact, the email rows in the contact block) — a gradient
   here would be a one-off. */
.canchip-team-card__link a {
	color: var(--canchip-mint);
	text-decoration: underline;
	text-decoration-color: rgba(147, 245, 194, 0.45);
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s ease;
}

.canchip-team-card__link a:hover,
.canchip-team-card__link a:focus-visible {
	text-decoration-color: var(--canchip-mint);
}

/* Placeholder for the portrait (477x416 in the mockup). */
.canchip-team-card__photo {
	aspect-ratio: 477 / 416;
	border-radius: 2.5rem;
	background:
		radial-gradient(65% 60% at 50% 32%, rgba(233, 233, 233, 0.24) 0%, rgba(233, 233, 233, 0) 72%),
		linear-gradient(150deg, #202F4E 0%, #2B5566 55%, #16293E 100%);
}

@media (max-width: 999.98px) {
	.canchip-team {
		padding-block: 70px 90px;
	}

	.canchip-team .canchip-team__stack {
		gap: 28px;
		margin-top: 48px;
	}

	.canchip-team-card {
		grid-template-columns: 1fr;
		gap: 28px;
		min-height: 0;
		padding: 28px;
	}

	/* Portrait first on every card once the row collapses to one column. */
	.canchip-team-card .canchip-team-card__photo {
		order: -1;
	}
}

/* Two-sentence CTA heading: a wider measure so it breaks between the sentences
   rather than mid-clause, as the mockup does. */
.canchip-cta .canchip-cta__title--wide {
	max-width: 30ch;
}

/* CTA button with a trailing arrow (About's "Investor inquiries"). */
.canchip-cta__actions--arrow .wp-block-button__link::after {
	content: "→";
	margin-inline-start: 10px;
	font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Direct contact details (Figma: § Why Now 532:1930)
   Heading on the left, five icon rows on the right.
   --------------------------------------------------------------------------- */

.canchip-contacts {
	padding-block: 110px;
	background-color: var(--canchip-dark-blue);
}

.canchip-contacts__grid {
	display: grid;
	/* 442 heading + 70 gutter + 688 rows = the mockup's 1200. */
	grid-template-columns: 442px 1fr;
	gap: 70px;
	align-items: start;
}

.canchip-contacts__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.canchip-contacts__row {
	display: flex;
	align-items: center;
	gap: 30px;
	box-sizing: border-box;
	min-height: 90px;
	padding: 20px 33px;
	border-radius: 2.5rem;
	background-color: var(--canchip-card-dark);
}

.canchip-contacts__icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	background: var(--canchip-gradient-accent);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.canchip-contacts__icon--mail {
	-webkit-mask-image: url("assets/icons/mail.svg");
	mask-image: url("assets/icons/mail.svg");
}

.canchip-contacts__icon--linkedin {
	-webkit-mask-image: url("assets/icons/linkedin.svg");
	mask-image: url("assets/icons/linkedin.svg");
}

.canchip-contacts__icon--pin {
	-webkit-mask-image: url("assets/icons/pin.svg");
	mask-image: url("assets/icons/pin.svg");
}

.canchip-contacts__icon--phone {
	-webkit-mask-image: url("assets/icons/phone.svg");
	mask-image: url("assets/icons/phone.svg");
}

.canchip-contacts__text {
	color: var(--canchip-white);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	line-height: 1.5;
}

.canchip-contacts__text a {
	color: inherit;
	text-decoration: none;
}

/* The mockup underlines the email addresses only — the LinkedIn and phone rows
   are a link in full, so the row already reads as one. */
.canchip-contacts__text a[href^="mailto:"] {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.canchip-contacts__text a:hover,
.canchip-contacts__text a:focus-visible {
	color: var(--canchip-mint);
}

@media (max-width: 999.98px) {
	.canchip-contacts {
		padding-block: 70px;
	}

	.canchip-contacts__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.canchip-contacts__row {
		gap: 20px;
		min-height: 0;
		padding: 20px 24px;
	}
}

/* ---------------------------------------------------------------------------
   Study request form (Figma: Frame 1597880457 561:1217)
   Bordered card with the heading on the left and the Contact Form 7 fields on
   the right. Styles hang off both our own wrapper classes (from the CF7 form
   template) and CF7's generated control classes.
   --------------------------------------------------------------------------- */

.canchip-form {
	padding-block: 163px 110px;
	background-color: var(--canchip-dark-blue);
}

.canchip-form__card {
	display: grid;
	/* 467 heading + 30 gutter + 591 fields, inside 56px padding = 1200. */
	grid-template-columns: 467px 591px;
	gap: 30px;
	align-items: center;
	box-sizing: border-box;
	min-height: 741px;
	padding: 56px;
	border: 1px solid transparent;
	border-radius: 2.5rem;
	background:
		linear-gradient(var(--canchip-card-dark), var(--canchip-card-dark)) padding-box,
		linear-gradient(120deg, #4057A2 0%, #2E6E77 52%, #6EDAB6 100%) border-box;
}

.canchip-form__title {
	width: fit-content;
	margin: 0;
	font-size: var(--wp--preset--font-size--title-1, clamp(38px, 4.2vw, 61px));
	font-weight: 700;
	line-height: 1.11;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(45deg, #6B7BF5 0%, #94F6C3 100%);
}

/* --- fields ---------------------------------------------------------------- */

.canchip-form__fields {
	display: flex;
	flex-direction: column;
}

.canchip-form__row + .canchip-form__row {
	margin-top: 14px;
}

.canchip-form__row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.canchip-form__field {
	margin-top: 24px;
}

.canchip-form__field + .canchip-form__field {
	margin-top: 17px;
}

.canchip-form__field + .canchip-form__row {
	margin-top: 16px;
}

.canchip-form__label {
	display: block;
	margin-bottom: 12px;
	color: var(--canchip-white);
	font-size: var(--wp--preset--font-size--title-6, 20px);
	font-weight: 500;
	line-height: 1.25;
}

.canchip-form__req {
	color: var(--canchip-mint);
}

/* CF7 wraps every control in a span; it must not break the grid cells. */
.canchip-form .wpcf7-form-control-wrap,
.canchip-form__cell {
	display: block;
}

/* Scoped to real form elements: CF7 also puts `wpcf7-form-control` on the
   wrapper span around a checkbox group, which must not get a field's box. */
.canchip-form input.wpcf7-form-control,
.canchip-form select.wpcf7-form-control,
.canchip-form textarea.wpcf7-form-control {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: 10px;
	background-color: #1B1E2F;
	color: var(--canchip-white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 300;
	line-height: 1.6;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.canchip-form input.wpcf7-form-control::placeholder,
.canchip-form textarea.wpcf7-form-control::placeholder {
	color: #A4A5AC;
	opacity: 1;
}

.canchip-form input.wpcf7-form-control:focus-visible,
.canchip-form select.wpcf7-form-control:focus-visible,
.canchip-form textarea.wpcf7-form-control:focus-visible {
	border-color: var(--canchip-mint);
	outline: none;
}

.canchip-form input.wpcf7-form-control {
	height: 50px;
}

.canchip-form select.wpcf7-form-control {
	height: 58px;
	/* Native arrow off, chevron drawn as a background so it matches the design. */
	appearance: none;
	padding-inline-end: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9E9E9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 20px 20px;
}

/* The "Choose an interest" row is a label, not a value. */
.canchip-form select.wpcf7-form-control option:first-child {
	color: #A4A5AC;
}

.canchip-form textarea.wpcf7-form-control {
	height: 196px;
	resize: vertical;
}

/* --- consent, submit, feedback -------------------------------------------- */

.canchip-form__consent {
	margin-top: 20px;
}

.canchip-form__consent .wpcf7-list-item {
	margin: 0;
}

/* The label is the flex row (box + text); the text span stays inline so the
   privacy link flows with the sentence instead of becoming a flex item. */
.canchip-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--canchip-snow);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
}

.canchip-form__consent .wpcf7-list-item-label {
	display: inline;
}

.canchip-form__consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--canchip-mint);
}

.canchip-form__consent a {
	color: var(--canchip-mint);
}

.canchip-form__actions {
	margin-top: 24px;
}

/* Same pill as the download buttons, plus the mockup's trailing arrow. The
   wrapper carries the arrow because <input type="submit"> takes no children,
   and the selector matches the field rule's weight so source order decides. */
.canchip-form__submit-wrap {
	position: relative;
	display: inline-block;
}

.canchip-form__submit-wrap::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	color: var(--canchip-periwinkle);
	pointer-events: none;
}

.canchip-form input.canchip-form__submit {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	min-height: 48px;
	padding: 0 52px 0 24px;
	border: 0;
	border-radius: 999px;
	background-color: #252839;
	color: var(--canchip-periwinkle);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.canchip-form input.canchip-form__submit:hover,
.canchip-form input.canchip-form__submit:focus-visible {
	background-color: #2E3247;
	color: var(--canchip-mint);
}

/* CF7 emits its spinner right after the submit input, inside our wrapper, which
   would widen it and push the arrow off the button. Float it out of flow so the
   wrapper stays exactly the button's width. */
.canchip-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	left: calc(100% + 14px);
	margin: 0;
	transform: translateY(-50%);
}

/* CF7's own messages, restyled for the dark card. */
.canchip-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #FF9A9A;
	font-size: 14px;
	font-weight: 400;
}

.canchip-form input.wpcf7-form-control.wpcf7-not-valid,
.canchip-form select.wpcf7-form-control.wpcf7-not-valid,
.canchip-form textarea.wpcf7-form-control.wpcf7-not-valid {
	border-color: #FF9A9A;
}

.canchip-form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	color: var(--canchip-snow);
	font-size: 15px;
	line-height: 1.5;
}

.canchip-form form.sent .wpcf7-response-output {
	border-color: var(--canchip-mint);
	color: var(--canchip-mint);
}

.canchip-form form.invalid .wpcf7-response-output,
.canchip-form form.failed .wpcf7-response-output,
.canchip-form form.spam .wpcf7-response-output {
	border-color: #FF9A9A;
	color: #FF9A9A;
}

@media (max-width: 1199.98px) {
	.canchip-form__card {
		grid-template-columns: 40% 1fr;
		gap: 40px;
		padding: 40px;
	}
}

@media (max-width: 999.98px) {
	.canchip-form {
		padding-block: 70px 80px;
	}

	.canchip-form__card {
		grid-template-columns: 1fr;
		gap: 32px;
		min-height: 0;
		padding: 32px 24px;
	}

	.canchip-form__row--split {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

.ct-header .header-menu-1 .current-menu-item > .ct-menu-link::after {
	left: calc(var(--menu-items-spacing, 25px) / 2);
	right: calc(var(--menu-items-spacing, 25px) / 2);
}