/* ============================================================================
   PRECISION - "INSTRUMENT"  ·  v2 design layer  ·  core
   ----------------------------------------------------------------------------
   THE CONCEPT

   The site is a precision measuring instrument: calibrated scales down the
   edges, tick rules on section boundaries, and product readouts that behave
   like the illuminated face of a gauge.

   THE FIELD IS LIGHT. This layout began as a navy-dominant design; it now runs
   on v1's colour scheme (../precision-static) - a Cloud White page punctuated
   by Precision Navy bands, teal used as accent rather than as atmosphere. The
   structure, components and typography are unchanged; only the field flipped.

   Two recurring textures carry it:
     1. THE TICK SCALE   a ruler edge, repeated on section boundaries and on the
                         fixed measure rail down the left of the viewport.
     2. THE CROSSHAIR    a registration mark at each corner of a framed panel -
                         impl.md section 6 asks for "target marks and exact alignment
                         cues"; this is that, drawn rather than illustrated.
   (The 64px construction grid that used to sit under every section has been
   removed - it read as a box grid behind the content rather than as texture.)

   ACCESSIBILITY - the single easiest thing to get wrong here:
   Signal Teal (#00C7B1) and Exception Amber (#F4A340) are ~2.1:1 on white and
   FAIL WCAG AA. On a light field they are fills, rules and decorative marks
   only. Anything that must be READ - or any icon carrying meaning - uses
   --i-pass-ink (#00786B, 5.4:1) or --i-review-ink (#A2620C, 4.9:1).
   On Precision Navy the pure hues clear 7.9:1, so inside .i-invert those two
   -ink tokens are redeclared back to the full-strength brand colours. Use the
   -ink token everywhere and it is correct in BOTH fields automatically; that
   is the whole reason the site can carry navy bands without duplicate rules.

   ----------------------------------------------------------------------------
   FILE ORDER
     1  Token layer          6  Buttons & links      11  Footer
     2  Reset & base         7  Cards & panels       12  Motion
     3  Typography           8  Section components   13  Responsive
     4  Layout & shell       9  Measure rail         14  Reduced motion / print
     5  Header & nav        10  Forms-free CTAs

   Load order: precision-tokens.css (raw brand palette, from the product app)
   then THIS file then precision-product.css.
   ========================================================================== */


/* ==========================================================================
   1  TOKEN LAYER
   --------------------------------------------------------------------------
   The raw brand values are restated here rather than only aliased, so the site
   still renders correctly if precision-tokens.css is missing from a deploy.
   Where the token file IS present its --pc-* names remain the source of truth
   for the product app; this block is the marketing site's own semantic layer,
   which the app's cannot serve because the app assumes a light field.
   ========================================================================== */

:root
{
	/* ---- raw brand (impl.md section 6 colour system) --------------------------- */
	--i-navy:        #091C36;
	--i-teal:        #00C7B1;
	--i-cloud:       #F5F8FB;
	--i-graphite:    #263342;
	--i-amber:       #F4A340;
	--i-red:         #D93045;

	/* ---- chassis: the light field, sunken -> raised panel ---------------- */
	/* These are v1's surface tokens under v2's names, so every rule in this
	   file keeps working: `well` is the alternating band, `field` the page,
	   `raise` a panel sitting on it. */
	--i-well:        #F5F8FB;   /* alternating band  (= --pc-surface)        */
	--i-field:       #FFFFFF;   /* the page          (= --pc-surface-raised) */
	--i-raise:       #FFFFFF;   /* cards and panels                          */
	--i-raise-2:     #F5F8FB;   /* selected / hovered panel                  */
	--i-raise-3:     #EFF2F6;

	/* ---- hairlines ------------------------------------------------------ */
	--i-line:        #E3E7EC;
	--i-line-strong: #CBD1D8;
	--i-line-teal:   #8FE3D8;

	/* ---- ink on the light field ----------------------------------------- */
	--i-ink:         #091C36;   /* 15.9:1 - headings                         */
	--i-ink-2:       #47566B;   /*  8.1:1 - body                             */
	/* A shade darker than v1's --pc-ink-subtle (#74808F). That value clears
	   4.5:1 on pure white but lands at 3.77:1 on the Cloud White band, and
	   nearly every caption and mono label on this site sits on that band. */
	--i-ink-3:       #66717F;   /*  4.7:1 on the band, 5.0:1 on white        */

	/* ---- paper: the product-readout surface ------------------------------ */
	/* Same values as the field now. Kept as distinct names because the
	   readouts in precision-product.css must stay light even when they sit
	   inside a navy .i-invert band - see the guard at the top of that file. */
	--i-paper:       #F5F8FB;
	--i-paper-2:     #FFFFFF;
	--i-paper-line:  #DDE4EC;
	--i-paper-line-2:#EAEFF4;
	--i-paper-ink:   #091C36;
	--i-paper-ink-2: #47566B;
	--i-paper-ink-3: #66717F;   /* see the --i-ink-3 note above */

	/* ---- status: PASS / REVIEW / BLOCK ----------------------------------- */
	/* The pure hues - fills, rules and decorative marks ONLY on a light field. */
	--i-pass:        #00C7B1;
	--i-review:      #F4A340;
	--i-block:       #B3261E;
	/* ...and the readable forms. Everything verbal, and every icon that
	   carries meaning, uses these. Redeclared inside .i-invert. */
	--i-pass-ink:    #00786B;   /* 5.4:1 on white */
	--i-review-ink:  #96590A;   /* 5.6:1 on white, 4.8:1 on its own amber tint */
	--i-block-ink:   #B3261E;   /* 7.0:1 on white */

	/* soft fills */
	--i-pass-soft:   #E0F7F4;
	--i-review-soft: #FDF3E5;
	--i-block-soft:  #FDECEA;

	/* ---- type ------------------------------------------------------------ */
	--i-sans:  'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--i-mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
	--i-serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;

	/* ---- metrics ---------------------------------------------------------- */
	--i-shell:      1280px;
	--i-shell-wide: 1440px;
	--i-gutter:     clamp(1.25rem, 4vw, 3rem);
	--i-rail:       56px;    /* fixed measure rail, >=1200px only            */
	--i-radius:     3px;     /* near-square. An instrument is not friendly.  */
	--i-radius-lg:  5px;

	/* ---- textures --------------------------------------------------------- */
	/* The 64px construction grid that used to sit under every section has been
	   removed: on a light field it read as a wall of boxes behind the content
	   rather than as texture. The tick scales and the measure rail carry the
	   instrument language on their own. */
	--i-crosshair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M6.5 0v13M0 6.5h13' stroke='%23091C36' stroke-width='1' opacity='0.28'/%3E%3C/svg%3E");
	--i-crosshair-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M6.5 0v13M0 6.5h13' stroke='%2300C7B1' stroke-width='1' opacity='0.55'/%3E%3C/svg%3E");

	color-scheme: light;
}


/* ==========================================================================
   1b  THE INVERSE BAND
   --------------------------------------------------------------------------
   Precision Navy punctuation, exactly as v1 uses it. Rather than duplicating
   component rules for a dark field, this redeclares the chassis tokens for the
   subtree - so every component inside is already correct, including the two
   -ink tokens, which go back to the full-strength brand hues because they
   clear 7.9:1 on navy.

   Applied to the closing CTA band, the stat band and the footer by default;
   add `.i-section--inverse` (or `.i-invert`) to any other section that should
   carry it. Use it sparingly - two per page is the v1 rhythm.
   ========================================================================== */

.i-invert,
.i-section--inverse,
.i-statband,
.i-cta,
.i-footer
{
	--i-well:        #050F1E;
	--i-field:       #091C36;
	--i-raise:       #0D2340;
	--i-raise-2:     #12294A;
	--i-raise-3:     #17325A;

	--i-line:        rgba(159, 190, 220, 0.14);
	--i-line-strong: rgba(159, 190, 220, 0.28);
	--i-line-teal:   rgba(0, 199, 177, 0.30);

	--i-ink:         #EEF3F8;
	--i-ink-2:       #B9C6D6;
	--i-ink-3:       #8698AF;

	--i-block:       #FF7A85;
	--i-pass-ink:    var(--i-teal);
	--i-review-ink:  var(--i-amber);
	--i-block-ink:   #FF7A85;

	--i-pass-soft:   rgba(0, 199, 177, 0.13);
	--i-review-soft: rgba(244, 163, 64, 0.14);
	--i-block-soft:  rgba(255, 122, 133, 0.14);

	--i-crosshair:   var(--i-crosshair-light);

	background: var(--i-field);
	color: var(--i-ink-2);
	color-scheme: dark;
}


/* ==========================================================================
   2  RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html
{
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* The header is sticky; anchored jumps must clear it. */
	scroll-padding-top: 6rem;
}

body
{
	margin: 0;
	background: var(--i-field);
	color: var(--i-ink-2);
	font-family: var(--i-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	font-feature-settings: 'kern' 1, 'liga' 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex: none; }

a { color: inherit; }

button { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr { border: 0; border-top: 1px solid var(--i-line); margin: 0; }

::selection { background: var(--i-teal); color: var(--i-navy); }

:focus-visible
{
	outline: 2px solid var(--i-pass-ink);
	outline-offset: 3px;
	border-radius: 2px;
}

.i-skip
{
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--i-teal);
	color: var(--i-navy);
	font: 600 0.85rem/1 var(--i-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.9rem 1.25rem;
	text-decoration: none;
}
.i-skip:focus { left: 0.5rem; top: 0.5rem; }

/* Screen-reader-only, but still focusable if it needs to be. */
.i-sr
{
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ==========================================================================
   3  TYPOGRAPHY
   --------------------------------------------------------------------------
   Instrument Sans carries display and UI. IBM Plex Mono carries every FIGURE,
   label and eyebrow - this site is mostly numbers, and a mono with tabular
   figures means a column of money aligns on the decimal without a table.
   Instrument Serif appears only as pull quotes and article leads: one
   editorial voice, used sparingly, so it reads as emphasis not decoration.
   ========================================================================== */

h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--i-ink); line-height: 1.1; }

.i-display
{
	font-size: clamp(2.75rem, 6.1vw, 5.25rem);
	line-height: 0.97;
	letter-spacing: -0.035em;
	font-weight: 600;
}

.i-h2
{
	font-size: clamp(1.95rem, 3.7vw, 3.05rem);
	line-height: 1.05;
	letter-spacing: -0.028em;
}

.i-h3
{
	font-size: clamp(1.25rem, 1.9vw, 1.6rem);
	line-height: 1.2;
	letter-spacing: -0.018em;
}

.i-h4
{
	font-size: 1.0625rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* Second-clause headline. impl.md's headlines are nearly all two sentences -
   "Compliance should happen during payroll. / Not be reconstructed afterwards."
   The second sentence drops to the muted ink so the first one lands. */
.i-h2 .i-h2__quiet,
.i-display .i-display__quiet { color: var(--i-ink-3); }

/* Teal-emphasised word inside a display headline. Display-sized text clears
   the 3:1 large-text floor at full strength, but --i-pass-ink is used anyway so
   the accent reads the same weight as every other teal word on the page. */
.i-accent { color: var(--i-pass-ink); }

.i-lead
{
	font-size: clamp(1.075rem, 1.35vw, 1.28rem);
	line-height: 1.55;
	color: var(--i-ink-2);
	max-width: 62ch;
	margin: 1.25rem 0 0;
}

p { margin: 1rem 0 0; max-width: 68ch; }
p:first-child { margin-top: 0; }

.i-body-muted { color: var(--i-ink-3); }

/* --- mono label ---------------------------------------------------------- */

.i-label
{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--i-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--i-pass-ink);
}
.i-label--quiet { color: var(--i-ink-3); }

/* Every figure on the site. Tabular so columns align. */
.i-fig
{
	font-family: var(--i-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	letter-spacing: -0.01em;
}

.i-quote-serif
{
	font-family: var(--i-serif);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.3vw, 2rem);
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: var(--i-ink);
}


/* ==========================================================================
   4  LAYOUT & SHELL
   ========================================================================== */

.i-shell
{
	width: 100%;
	max-width: var(--i-shell);
	margin-inline: auto;
	padding-inline: var(--i-gutter);
}
.i-shell--wide { max-width: var(--i-shell-wide); }

/* --- section ------------------------------------------------------------- */

.i-section
{
	position: relative;
	padding-block: clamp(4rem, 8vw, 7.5rem);
}
.i-section--tight  { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.i-section--flush  { padding-top: 0; }
.i-section--flushb { padding-bottom: 0; }

/* Surfaces. The white field is the default; `well` is the alternating Cloud
   White band that gives the page its rhythm, exactly as v1's --sunken does. */
.i-section--well  { background: var(--i-well); }
.i-section--raise { background: var(--i-raise); }

/* `paper` used to mean "invert this section to light for long-form reading".
   The whole site is light now, so it only has to assert the white field - which
   matters when it follows a `well` band. Every ink override it used to carry is
   the default; the rules were deleted rather than left to shadow themselves. */
.i-section--paper { background: var(--i-paper-2); }

/* .i-section--grid was the 64px construction grid. Removed - see the note in
   the token block. The modifier is no longer emitted by the +section mixin. */

.i-section > * { position: relative; z-index: 1; }

/* --- section head -------------------------------------------------------- */

.i-head { max-width: 46rem; }
.i-head--wide { max-width: 62rem; }
.i-head--centre { margin-inline: auto; text-align: center; }
.i-head--centre .i-lead { margin-inline: auto; }
.i-head__title { margin-top: 0.9rem; }
.i-head .i-lead { margin-top: 1.1rem; }

/* The section index marker: "04 ── ONE CONTINUOUS WORKFLOW".
   The rule after it is a tick scale, so the marker reads as a position on a
   measuring instrument rather than as an eyebrow. */
.i-index
{
	display: flex;
	align-items: center;
	gap: 0.5rem 0.85rem;
	margin-bottom: 1.4rem;
	/* The labels are nowrap so a phrase never breaks beside the scale. That
	   makes the ROW the thing that has to give at narrow widths - without
	   wrap, a long label pushes the tick scale off the side of the page. */
	flex-wrap: wrap;
}
.i-index__no
{
	font-family: var(--i-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--i-pass-ink);
	white-space: nowrap;
}
.i-index__label
{
	font-family: var(--i-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--i-ink-3);
	white-space: nowrap;
}
.i-index__scale
{
	flex: 1 1 2rem;
	height: 7px;
	min-width: 1.5rem;
	background-image: repeating-linear-gradient(to right, var(--i-line-strong) 0 1px, transparent 1px 7px);
	mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%);
}

/* --- tick rule ----------------------------------------------------------- */

/* A ruler edge. Long tick every fifth so it scans as a real scale. */
.i-tickrule
{
	height: 11px;
	background-image:
		repeating-linear-gradient(to right, var(--i-line-strong) 0 1px, transparent 1px 60px),
		repeating-linear-gradient(to right, var(--i-line) 0 1px, transparent 1px 12px);
	background-size: 100% 11px, 100% 6px;
	background-position: 0 0, 0 0;
	background-repeat: repeat-x;
	border-top: 1px solid var(--i-line);
}

/* --- grids --------------------------------------------------------------- */

.i-grid { display: grid; gap: 1.25rem; }
.i-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.i-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.i-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.i-grid--gap-lg { gap: 2rem; }

.i-split
{
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.i-split--top   { align-items: start; }
.i-split--even  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.i-split--text  { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Long-form: the prose takes the room and the aside is a fixed rail. The
   default split gives the FIRST column the smaller share, which is right for
   a lead-in beside a product panel and exactly wrong for an article. */
.i-split--article { grid-template-columns: minmax(0, 1fr) 19rem; }
/* Panel on the left, prose on the right, without reordering the DOM. */
.i-split--flip > :first-child { order: 2; }

.i-stack { display: flex; flex-direction: column; gap: 0.85rem; }
.i-stack--lg { gap: 1.25rem; }

/* --- crosshair frame ------------------------------------------------------ */

/* Registration marks at the four corners. Applied to anything that should read
   as a measured, placed object rather than a floating card. */
.i-frame
{
	position: relative;
	background-image: var(--i-crosshair), var(--i-crosshair), var(--i-crosshair), var(--i-crosshair);
	background-repeat: no-repeat;
	background-position:
		-6px -6px,
		calc(100% + 6px) -6px,
		-6px calc(100% + 6px),
		calc(100% + 6px) calc(100% + 6px);
}


/* ==========================================================================
   5  HEADER & NAV
   ========================================================================== */

.i-header
{
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--i-line);
}

.i-header__inner
{
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 74px;
}

.i-logo { display: flex; align-items: center; flex: none; }
.i-logo img { width: 168px; height: auto; }

.i-nav { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; }

.i-nav__list { display: flex; align-items: center; gap: 0.1rem; }

.i-nav__item { position: relative; }

.i-nav__link
{
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.55rem 0.7rem;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--i-ink-2);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--i-radius);
	transition: color 0.18s ease, background-color 0.18s ease;
}
.i-nav__link:hover { color: var(--i-ink); background: var(--i-raise-2); }
.i-nav__item.is-active > .i-nav__link { color: var(--i-pass-ink); }

/* The active tick - a small mark under the current section, like a needle
   resting on a scale. */
.i-nav__item.is-active > .i-nav__link::after
{
	content: '';
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	bottom: 0.15rem;
	height: 2px;
	background: var(--i-pass-ink);
}

.i-nav__caret { display: flex; opacity: 0.55; transition: transform 0.2s ease; }
.i-nav__item--drop:hover .i-nav__caret,
.i-nav__item--drop:focus-within .i-nav__caret { transform: translateY(1px); opacity: 1; }

/* --- dropdown panel ------------------------------------------------------ */

.i-nav__panel
{
	position: absolute;
	top: calc(100% + 0.55rem);
	left: 50%;
	translate: -50% 0;
	width: min(29rem, 82vw);
	background: var(--i-raise);
	border: 1px solid var(--i-line-strong);
	border-radius: var(--i-radius-lg);
	box-shadow: 0 22px 48px -20px rgba(9, 28, 54, 0.28);
	padding: 0.5rem;
	opacity: 0;
	visibility: hidden;
	translate: -50% 6px;
	transition: opacity 0.18s ease, translate 0.18s ease, visibility 0.18s;
}
.i-nav__item--drop:hover > .i-nav__panel,
.i-nav__item--drop:focus-within > .i-nav__panel
{
	opacity: 1;
	visibility: visible;
	translate: -50% 0;
}
/* Bridges the gap between trigger and panel so the pointer can cross it. */
.i-nav__item--drop::after
{
	content: '';
	position: absolute;
	top: 100%; left: 0; right: 0;
	height: 0.6rem;
}

.i-nav__summary
{
	display: block;
	padding: 0.7rem 0.85rem 0.85rem;
	margin-bottom: 0.25rem;
	border-bottom: 1px solid var(--i-line);
	font-family: var(--i-mono);
	font-size: 0.7rem;
	letter-spacing: 0.02em;
	color: var(--i-ink-3);
}

.i-nav__panel-link
{
	display: block;
	padding: 0.6rem 0.85rem;
	border-radius: var(--i-radius);
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.i-nav__panel-link:hover { background: var(--i-pass-soft); }
.i-nav__panel-title
{
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--i-ink);
	letter-spacing: -0.01em;
}
.i-nav__panel-desc
{
	display: block;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--i-ink-3);
	margin-top: 0.1rem;
}

.i-nav__actions { display: flex; align-items: center; gap: 0.6rem; margin-left: 0.7rem; }

.i-nav__login
{
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--i-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--i-ink-3);
	text-decoration: none;
	padding: 0.5rem 0.2rem;
	white-space: nowrap;
	transition: color 0.18s ease;
}
.i-nav__login:hover { color: var(--i-pass-ink); }

.i-burger
{
	display: none;
	margin-left: auto;
	background: none;
	border: 1px solid var(--i-line-strong);
	border-radius: var(--i-radius);
	color: var(--i-ink);
	padding: 0.55rem 0.6rem;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.i-burger:hover { border-color: var(--i-pass-ink); color: var(--i-pass-ink); }


/* ==========================================================================
   6  BUTTONS & LINKS
   ========================================================================== */

.i-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.85rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--i-radius);
	font-family: var(--i-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	max-width: 100%;
	transition: background-color 0.18s ease, border-color 0.18s ease,
	            color 0.18s ease, transform 0.18s ease;
}
.i-btn:active { transform: translateY(1px); }
.i-btn svg { transition: transform 0.22s cubic-bezier(0.3, 0.8, 0.3, 1); }
.i-btn:hover svg { transform: translateX(3px); }

/* Primary: teal fill with a NAVY label. White-on-teal is 2.3:1 and fails;
   navy-on-teal is 8.0:1. The brand board shows white - it is wrong for a
   button-sized label and is corrected here, as it is in the product app. */
.i-btn--primary
{
	background: var(--i-teal);
	color: var(--i-navy);
	border-color: var(--i-teal);
}
.i-btn--primary:hover
{
	background: #00B29E;
	border-color: #00B29E;
}

.i-btn--ghost
{
	background: transparent;
	border-color: var(--i-line-strong);
	color: var(--i-ink);
}
.i-btn--ghost:hover { border-color: var(--i-ink); color: var(--i-ink); background: var(--i-raise-2); }

.i-btn--solid   /* on paper sections */
{
	background: var(--i-navy);
	color: var(--i-cloud);
}
.i-btn--solid:hover { background: var(--i-raise-2); }

.i-btn--quiet
{
	background: transparent;
	border-color: transparent;
	color: var(--i-ink-3);
	padding-inline: 0.4rem;
}
.i-btn--quiet:hover { color: var(--i-pass-ink); }

.i-btnrow
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

/* --- arrow link ---------------------------------------------------------- */

.i-arrow
{
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--i-mono);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--i-pass-ink);
	text-decoration: none;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--i-line-teal);
	transition: border-color 0.18s ease, gap 0.18s ease;
}
.i-arrow:hover { border-bottom-color: var(--i-pass-ink); gap: 0.85rem; }

/* Inline prose link. */
.i-link
{
	color: var(--i-pass-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--i-line-teal);
	transition: border-color 0.15s ease;
}
.i-link:hover { border-bottom-color: var(--i-pass-ink); }


/* ==========================================================================
   7  CARDS & PANELS
   ========================================================================== */

.i-card
{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.6rem 1.5rem;
	background: var(--i-raise);
	border: 1px solid var(--i-line);
	border-radius: var(--i-radius-lg);
	transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.i-card__icon
{
	display: flex;
	color: var(--i-pass-ink);
	margin-bottom: 0.35rem;
}
.i-card__title { font-size: 1.075rem; font-weight: 600; color: var(--i-ink); letter-spacing: -0.012em; }
.i-card__body  { font-size: 0.94rem; line-height: 1.55; color: var(--i-ink-3); margin: 0; max-width: none; }

.i-card--link { text-decoration: none; color: inherit; }
.i-card--link:hover { border-color: var(--i-line-teal); transform: translateY(-2px); box-shadow: 0 10px 26px -18px rgba(9, 28, 54, 0.35); }


/* --- numbered card (the four layers) ------------------------------------ */

.i-numcard
{
	position: relative;
	padding: 1.75rem 1.5rem 1.6rem;
	background: var(--i-raise);
	border: 1px solid var(--i-line);
	border-radius: var(--i-radius-lg);
	overflow: hidden;
}
.i-numcard::before
{
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(to right, var(--i-teal), rgba(0, 199, 177, 0));
	transform: scaleX(var(--i-fill, 0.25));
	transform-origin: left;
	transition: transform 0.5s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.i-numcard__no
{
	font-family: var(--i-mono);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--i-pass-ink);
	letter-spacing: -0.02em;
	line-height: 1;
}
.i-numcard__title
{
	margin-top: 0.9rem;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--i-ink);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.i-numcard__body { font-size: 0.94rem; line-height: 1.55; color: var(--i-ink-3); margin-top: 0.5rem; max-width: none; }

/* --- the four layers as tab controls -------------------------------------- */

/* impl.md screen 3 asks that each card "open a short animated product
   demonstration, not simply another block of text". The cards ARE the tabs. */
.i-layertabs
{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}
.i-layertab
{
	display: block;
	width: 100%;
	text-align: left;
	font: inherit;
	cursor: pointer;
	background: var(--i-raise);
}
.i-numcard > * { display: block; }
.i-layertab:hover { border-color: var(--i-line-strong); }
.i-layertab[aria-selected="true"]
{
	background: var(--i-raise-2);
	border-color: var(--i-line-teal);
}
.i-layertab[aria-selected="true"] .i-numcard__body { color: var(--i-ink-2); }
/* The selected card points at its panel. */
.i-layertab[aria-selected="true"]::after
{
	content: '';
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: 10px;
	height: 10px;
	background: var(--i-raise-2);
	border-right: 1px solid var(--i-line-teal);
	border-bottom: 1px solid var(--i-line-teal);
	transform: translate(-50%, 50%) rotate(45deg);
}

/* --- check list ---------------------------------------------------------- */

.i-checks { display: flex; flex-direction: column; gap: 1rem; }
.i-check { display: flex; gap: 0.9rem; align-items: flex-start; }
.i-check__mark
{
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: 0.15rem;
	border-radius: 50%;
	border: 1px solid var(--i-line-teal);
	color: var(--i-pass-ink);
	background: var(--i-pass-soft);
}
.i-check__title { font-size: 1rem; font-weight: 600; color: var(--i-ink); letter-spacing: -0.008em; }
.i-check__body  { font-size: 0.92rem; line-height: 1.5; color: var(--i-ink-3); margin: 0.15rem 0 0; max-width: none; }

/* --- tile grid (small labelled tiles) ------------------------------------ */

.i-tiles { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.i-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.i-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.i-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.i-tile
{
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.95rem 1.1rem;
	background: var(--i-raise);
	border: 1px solid var(--i-line);
	border-radius: var(--i-radius);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--i-ink-2);
	transition: border-color 0.2s ease, color 0.2s ease;
}
.i-tile:hover { border-color: var(--i-line-teal); color: var(--i-ink); }
.i-tile svg { color: var(--i-pass-ink); }


/* ==========================================================================
   8  SECTION COMPONENTS
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */

.i-hero
{
	position: relative;
	padding-top: clamp(3rem, 6vw, 5.5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
	overflow: hidden;
	/* The v1 hero wash: one soft teal light source off the top-right corner,
	   behind the readout. It is the only gradient on the site. */
	background:
		radial-gradient(120% 90% at 92% 0%, var(--i-pass-soft) 0%, transparent 55%),
		var(--i-field);
	border-bottom: 1px solid var(--i-line);
}
.i-hero > * { position: relative; z-index: 1; }

.i-hero__grid
{
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	gap: clamp(2rem, 4.5vw, 4rem);
	align-items: center;
}
.i-hero__title { margin-top: 1.4rem; }
.i-hero .i-lead { max-width: 34rem; }

/* --- trust strip --------------------------------------------------------- */

.i-trust
{
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid var(--i-line);
	border-bottom: 1px solid var(--i-line);
	background: var(--i-well);
}
.i-trust__item
{
	flex: 1 1 12rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	padding: 1.1rem 1.25rem;
	font-family: var(--i-mono);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--i-ink-2);
	border-right: 1px solid var(--i-line);
	text-align: center;
}
.i-trust__item:last-child { border-right: 0; }
.i-trust__item svg { color: var(--i-pass-ink); }

/* --- shift table (impl.md screen 2: Yesterday -> Today) ------------------ */

.i-shift
{
	border: 1px solid var(--i-line);
	border-radius: var(--i-radius-lg);
	overflow: hidden;
	background: var(--i-raise);
}
.i-shift__head, .i-shift__row
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr);
	align-items: center;
}
.i-shift__head
{
	background: var(--i-well);
	border-bottom: 1px solid var(--i-line);
}
.i-shift__head > span
{
	padding: 0.85rem 1.35rem;
	font-family: var(--i-mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.i-shift__head > span:first-child { color: var(--i-ink-3); }
.i-shift__head > span:last-child  { color: var(--i-pass-ink); }

.i-shift__row { border-bottom: 1px solid var(--i-line); }
.i-shift__row:last-child { border-bottom: 0; }
.i-shift__was, .i-shift__now { padding: 1.05rem 1.35rem; font-size: 0.98rem; }
.i-shift__was
{
	color: var(--i-ink-3);
	text-decoration: line-through;
	text-decoration-color: var(--i-line-strong);
	text-decoration-thickness: 1px;
}
.i-shift__now { color: var(--i-ink); font-weight: 500; }
.i-shift__arrow
{
	display: grid;
	place-items: center;
	color: var(--i-pass-ink);
	opacity: 0.75;
}

/* --- step flow ----------------------------------------------------------- */

.i-steps
{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	position: relative;
}
/* The connecting scale behind the step markers. */
.i-steps::before
{
	content: '';
	position: absolute;
	top: 21px;
	left: 12%;
	right: 12%;
	height: 1px;
	background-image: repeating-linear-gradient(to right, var(--i-line-strong) 0 6px, transparent 6px 12px);
}
.i-step { position: relative; text-align: left; }
.i-step__no
{
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--i-line-teal);
	background: var(--i-field);
	color: var(--i-pass-ink);
	font-family: var(--i-mono);
	font-size: 0.85rem;
	font-weight: 600;
}
.i-step__title
{
	margin-top: 1.15rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--i-ink);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.i-step__body { margin-top: 0.45rem; font-size: 0.93rem; line-height: 1.55; color: var(--i-ink-3); max-width: none; }

/* --- assurance row ------------------------------------------------------- */

.i-assure
{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 2.75rem;
	border: 1px solid var(--i-line);
	border-radius: var(--i-radius);
	overflow: hidden;
}
.i-assure__item
{
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 1rem 1.15rem;
	font-size: 0.9rem;
	color: var(--i-ink-2);
	border-right: 1px solid var(--i-line);
	background: var(--i-raise);
}
.i-assure__item:last-child { border-right: 0; }
.i-assure__item svg { color: var(--i-pass-ink); flex: none; }

/* --- workflow rail (impl.md screen 4) ------------------------------------ */

/* Horizontal on desktop, vertical on mobile - the doc asks for exactly that.
   A wrapping grid rather than a scroller: nine stages in a horizontal scroller
   hides four of them behind a scrollbar, and a workflow you cannot see all of
   is not making the point the section exists to make. The left-border chain
   still reads as one continuous sequence across the wrap. */
.i-flow
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 0;
}
.i-flow__step
{
	position: relative;
	padding: 1.4rem 1.25rem 1.4rem 1.4rem;
	border-left: 1px solid var(--i-line);
	border-top: 1px solid var(--i-line);
	min-width: 0;
}
.i-flow__no
{
	font-family: var(--i-mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--i-pass-ink);
}
.i-flow__icon { margin-top: 0.85rem; color: var(--i-ink-3); }
.i-flow__title { margin-top: 0.7rem; font-size: 0.98rem; font-weight: 600; color: var(--i-ink); }
.i-flow__body { margin-top: 0.3rem; font-size: 0.86rem; line-height: 1.5; color: var(--i-ink-3); max-width: none; }

/* --- hub & spoke (integration ecosystem, impl.md screen 9) ---------------- */

.i-hub
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2.25rem);
	align-items: center;
}
.i-hub__col { display: flex; flex-direction: column; gap: 0.7rem; }
.i-hub__node
{
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8rem 1rem;
	background: var(--i-raise);
	border: 1px solid var(--i-line);
	border-radius: var(--i-radius);
	font-size: 0.9rem;
	color: var(--i-ink-2);
	position: relative;
	transition: border-color 0.2s ease;
}
.i-hub__node:hover { border-color: var(--i-line-teal); }
.i-hub__node svg { color: var(--i-pass-ink); flex: none; }
/* the dashed lead-out toward the core */
.i-hub__col--left .i-hub__node::after,
.i-hub__col--right .i-hub__node::after
{
	content: '';
	position: absolute;
	top: 50%;
	width: clamp(0.75rem, 2vw, 2rem);
	border-top: 1px dashed var(--i-line-teal);
}
.i-hub__col--left  .i-hub__node::after { left: 100%; }
.i-hub__col--right .i-hub__node::after { right: 100%; }

.i-hub__core
{
	display: grid;
	place-items: center;
	gap: 0.35rem;
	width: clamp(9rem, 15vw, 12rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, var(--i-raise-2), var(--i-well));
	border: 1px solid var(--i-line-teal);
	box-shadow: 0 0 0 10px var(--i-pass-soft), 0 18px 40px -24px rgba(9, 28, 54, 0.3);
	text-align: center;
	padding: 1rem;
}
.i-hub__core img { width: clamp(3rem, 5vw, 4rem); }
.i-hub__core-name
{
	font-family: var(--i-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	color: var(--i-ink);
}
.i-hub__core-sub { font-size: 0.66rem; color: var(--i-ink-3); letter-spacing: 0.02em; }

/* --- stat band ----------------------------------------------------------- */

.i-statband
{
	background: var(--i-field);
	border-top: 1px solid var(--i-line);
	border-bottom: 1px solid var(--i-line);
	padding-block: clamp(2.5rem, 5vw, 4rem);
	position: relative;
}
.i-statband__note
{
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--i-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--i-review-ink);
	margin-bottom: 1.75rem;
}
.i-stats
{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--i-line);
	border: 1px solid var(--i-line);
}
.i-stat
{
	background: var(--i-field);
	padding: 1.5rem 1.35rem;
	text-align: center;
}
.i-stat__value
{
	font-family: var(--i-mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(2.1rem, 4.2vw, 3.4rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--i-pass-ink);
}
.i-stat__label
{
	margin-top: 0.85rem;
	font-family: var(--i-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--i-ink-2);
}
.i-stat__mark { display: grid; place-items: center; height: clamp(2.1rem, 4.2vw, 3.4rem); color: var(--i-pass-ink); }

/* --- quote cards --------------------------------------------------------- */

/* Column count is a class, not an inline style - an inline grid-template
   would outrank the mobile media query and strand three columns at 360px. */
.i-quotes { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.i-quotes--1 { grid-template-columns: minmax(0, 1fr); }
.i-quotes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.i-quotes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.i-quote
{
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding: 1.75rem 1.6rem;
	background: var(--i-raise);
	border: 1px solid var(--i-line);
	border-radius: var(--i-radius-lg);
}
.i-quote__text
{
	font-family: var(--i-serif);
	font-size: 1.28rem;
	line-height: 1.35;
	color: var(--i-ink);
	margin: 0;
	max-width: none;
}
.i-quote__foot { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; padding-top: 0.4rem; }
.i-quote__badge
{
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: var(--i-pass-soft);
	border: 1px solid var(--i-line-teal);
	color: var(--i-pass-ink);
	font-family: var(--i-mono);
	font-size: 0.95rem;
	font-weight: 600;
}
.i-quote__badge--amber { background: var(--i-review-soft); border-color: var(--i-review); color: var(--i-review-ink); }
.i-quote__role
{
	font-family: var(--i-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--i-ink-3);
}

/* --- tab set (product tour, audience selector) ---------------------------- */

.i-tabs { display: flex; flex-direction: column; gap: 1.75rem; }

.i-tabs__list
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	border-bottom: 1px solid var(--i-line);
	padding-bottom: 0.85rem;
}
.i-tab
{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.95rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--i-radius);
	font-family: var(--i-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--i-ink-3);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.i-tab:hover { color: var(--i-ink); border-color: var(--i-line); }
.i-tab[aria-selected="true"]
{
	color: var(--i-navy);
	background: var(--i-teal);
	border-color: var(--i-teal);
}
.i-tab__no { opacity: 0.7; font-size: 0.66rem; }

.i-tabs__panels { position: relative; }
.i-tabpanel[hidden] { display: none; }
.i-tabpanel { animation: i-fade 0.32s cubic-bezier(0.3, 0.8, 0.3, 1); }
@keyframes i-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.i-tabpanel__lead
{
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.5rem;
	max-width: 52rem;
}
.i-tabpanel__lead-icon
{
	flex: none;
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border: 1px solid var(--i-line-teal);
	border-radius: var(--i-radius);
	color: var(--i-pass-ink);
	background: var(--i-pass-soft);
}

/* --- audience selector (impl.md screen 6) --------------------------------- */

.i-aud { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.i-aud__list { display: flex; flex-direction: column; gap: 0.4rem; }
.i-aud__btn
{
	display: flex;
	align-items: center;
	gap: 0.8rem;
	width: 100%;
	padding: 0.95rem 1.05rem;
	text-align: left;
	background: transparent;
	border: 1px solid var(--i-line);
	border-radius: var(--i-radius);
	color: var(--i-ink-2);
	font-size: 0.94rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.i-aud__btn svg { color: var(--i-ink-3); flex: none; transition: color 0.18s ease; }
.i-aud__btn:hover { border-color: var(--i-line-strong); color: var(--i-ink); }
.i-aud__btn[aria-selected="true"]
{
	background: var(--i-raise-2);
	border-color: var(--i-line-teal);
	color: var(--i-ink);
}
.i-aud__btn[aria-selected="true"] svg { color: var(--i-pass-ink); }
.i-aud__panel
{
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--i-raise);
	border: 1px solid var(--i-line);
	border-radius: var(--i-radius-lg);
}
.i-aud__panel[hidden] { display: none; }

/* --- article body (paper) ------------------------------------------------- */

.i-prose { max-width: 44rem; }
.i-prose p { font-size: 1.06rem; line-height: 1.72; color: var(--i-paper-ink-2); margin-top: 1.35rem; }
.i-prose h2
{
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--i-paper-ink);
	margin: 2.75rem 0 0;
}
.i-prose ul { margin: 1.35rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; }
.i-prose li
{
	position: relative;
	padding-left: 1.6rem;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--i-paper-ink-2);
}
.i-prose li::before
{
	content: '';
	position: absolute;
	left: 0.15rem;
	top: 0.62em;
	width: 9px;
	height: 1px;
	background: var(--i-pass-ink);
}
.i-prose blockquote
{
	margin: 2.25rem 0 0;
	padding: 0 0 0 1.5rem;
	border-left: 2px solid var(--i-pass-ink);
	font-family: var(--i-serif);
	font-size: 1.42rem;
	line-height: 1.32;
	color: var(--i-paper-ink);
}
.i-prose h3
{
	font-size: 1.08rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--i-paper-ink);
	margin: 2rem 0 0;
}
.i-prose h2 + p,
.i-prose h3 + p { margin-top: 0.9rem; }
.i-prose p + ul { margin-top: 1rem; }

.i-prose__meta
{
	margin: 0 0 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--i-paper-line);
	font-family: var(--i-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--i-paper-ink-3);
}

.i-prose__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.6rem; }
.i-prose table
{
	width: 100%;
	min-width: 36rem;
	border-collapse: collapse;
	font-size: 0.94rem;
	line-height: 1.5;
}
.i-prose th
{
	text-align: left;
	padding: 0.6rem 0.9rem 0.6rem 0;
	font-family: var(--i-mono);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--i-paper-ink-3);
	border-bottom: 1px solid var(--i-paper-line);
	vertical-align: bottom;
}
.i-prose td
{
	padding: 0.85rem 0.9rem 0.85rem 0;
	border-bottom: 1px solid var(--i-paper-line-2);
	color: var(--i-paper-ink-2);
	vertical-align: top;
}
.i-prose th:last-child,
.i-prose td:last-child { padding-right: 0; }
.i-prose tr:last-child td { border-bottom: 0; }
.i-prose td:first-child { color: var(--i-paper-ink); font-weight: 500; }

/* --- CTA band ------------------------------------------------------------ */

/* An inverse band - see section 1b. `background` comes from there; only the
   spacing and the top rule belong here. */
.i-cta
{
	position: relative;
	border-top: 1px solid var(--i-line);
	padding-block: clamp(3.5rem, 7vw, 6rem);
	overflow: hidden;
}
.i-cta__inner
{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.i-cta__alt
{
	margin-top: 1.5rem;
	font-family: var(--i-mono);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: var(--i-ink-3);
}

/* --- next steps ---------------------------------------------------------- */

.i-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.i-next__card
{
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.35rem 1.4rem;
	background: var(--i-raise);
	border: 1px solid var(--i-line);
	border-radius: var(--i-radius-lg);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.i-next__card:hover { border-color: var(--i-line-teal); transform: translateY(-2px); }
.i-next__eyebrow
{
	font-family: var(--i-mono);
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--i-pass-ink);
}
.i-next__title { font-size: 1.02rem; font-weight: 600; color: var(--i-ink); }
.i-next__body { font-size: 0.88rem; line-height: 1.5; color: var(--i-ink-3); margin: 0; max-width: none; }


/* ==========================================================================
   9  MEASURE RAIL
   --------------------------------------------------------------------------
   The signature element. A fixed calibrated scale down the left edge with a
   needle tracking scroll position and a mono readout of the percentage. It is
   the site telling you where you are on it, in the language of an instrument.

   Only >=1200px, where there is room outside the content shell. Purely
   decorative - aria-hidden, and the page reads identically without it.
   ========================================================================== */

.i-rail
{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: var(--i-rail);
	height: 100vh;
	z-index: 80;
	pointer-events: none;
	border-right: 1px solid var(--i-line);
	background: linear-gradient(to right, var(--i-well), transparent);
}
.i-rail__scale
{
	position: absolute;
	top: 0; bottom: 0;
	right: 0;
	width: 13px;
	background-image:
		repeating-linear-gradient(to bottom, var(--i-line-strong) 0 1px, transparent 1px 48px),
		repeating-linear-gradient(to bottom, var(--i-line) 0 1px, transparent 1px 12px);
	background-size: 13px 100%, 7px 100%;
	background-position: right 0, right 0;
	background-repeat: repeat-y;
}
.i-rail__needle
{
	position: absolute;
	right: 0;
	width: 26px;
	height: 2px;
	background: var(--i-pass-ink);
	box-shadow: 0 0 10px 1px rgba(0, 120, 107, 0.35);
	top: 0;
	transition: top 0.12s linear;
}
.i-rail__read
{
	position: absolute;
	right: 20px;
	transform: translateY(-50%);
	font-family: var(--i-mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--i-pass-ink);
	top: 0;
	transition: top 0.12s linear;
	white-space: nowrap;
}
.i-rail__mark
{
	position: absolute;
	left: 10px;
	bottom: 2.5rem;
	writing-mode: vertical-rl;
	font-family: var(--i-mono);
	font-size: 0.6rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--i-ink-3);
	opacity: 0.6;
}


/* ==========================================================================
   10  MISC BLOCKS
   ========================================================================== */

/* --- definition rows (governance, security) ------------------------------ */

.i-defs { display: flex; flex-direction: column; }
.i-def
{
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	gap: 2rem;
	padding: 1.35rem 0;
	border-top: 1px solid var(--i-line);
}
.i-def:last-child { border-bottom: 1px solid var(--i-line); }
.i-def__term
{
	font-family: var(--i-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--i-pass-ink);
	padding-top: 0.2rem;
}
.i-def__desc { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--i-ink-2); max-width: 52ch; }

/* --- comparison columns (detection vs protection) ------------------------ */

.i-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
.i-versus__col
{
	padding: 1.6rem 1.5rem;
	border: 1px solid var(--i-line);
	border-radius: var(--i-radius-lg);
	background: var(--i-raise);
}
.i-versus__col--good { border-color: var(--i-line-teal); background: linear-gradient(180deg, rgba(0,199,177,0.06), transparent 60%), var(--i-raise); }
.i-versus__title
{
	font-family: var(--i-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--i-ink-3);
	margin-bottom: 1.1rem;
}
.i-versus__col--good .i-versus__title { color: var(--i-pass-ink); }
.i-versus__list { display: flex; flex-direction: column; gap: 0.75rem; }
.i-versus__item { display: flex; gap: 0.65rem; font-size: 0.94rem; line-height: 1.5; color: var(--i-ink-2); }
.i-versus__item svg { flex: none; margin-top: 0.2rem; color: var(--i-ink-3); }
.i-versus__col--good .i-versus__item svg { color: var(--i-pass-ink); }
.i-versus__mid
{
	display: grid;
	place-items: center;
	font-family: var(--i-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--i-ink-3);
}

/* --- pill row (presentational filters are NOT used; these are links) ------ */

.i-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.i-pill
{
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--i-line);
	border-radius: 100px;
	font-family: var(--i-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--i-ink-3);
	text-decoration: none;
	transition: border-color 0.18s ease, color 0.18s ease;
}
.i-pill:hover { border-color: var(--i-line-teal); color: var(--i-pass-ink); }

/* [hidden] loses to any element rule that sets display, and the cards these
   pills filter are display:flex. Make the attribute win. */
[hidden] { display: none !important; }

/* The governance shield that sits between the two columns on the sheet. */
.i-govmark
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	margin-bottom: 1.75rem;
}

/* The PASS / REVIEW / BLOCK key above the control cards. */
.i-legendrow { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* The oversized outlined monogram beside the Professional Passport band. */
.i-passmark { display: flex; align-items: center; justify-content: center; }
.i-passmark img { width: clamp(140px, 22vw, 240px); height: auto; opacity: 0.5; }

/* The selected/standing state of a pill - a marker rather than a link. */
.i-pill--mark { border-color: var(--i-line-teal); color: var(--i-pass-ink); font-weight: 600; }
.i-pill__dot
{
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--i-teal);
	flex: none;
}

/* --- contact detail rows -------------------------------------------------- */

.i-contact { display: grid; gap: 1rem; }
.i-contact__row
{
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	background: var(--i-raise);
	border: 1px solid var(--i-line);
	border-radius: var(--i-radius-lg);
	text-decoration: none;
	transition: border-color 0.2s ease;
}
.i-contact__row:hover { border-color: var(--i-line-teal); }
.i-contact__row svg { color: var(--i-pass-ink); flex: none; }
/* An email address is one unbreakable token. Without these it sets the row's
   minimum width and pushes the card past the viewport at 360px. */
.i-contact__row > span { min-width: 0; }
.i-contact__value { overflow-wrap: anywhere; }
.i-contact__label
{
	font-family: var(--i-mono);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--i-ink-3);
	display: block;
}
.i-contact__value { font-size: 1rem; color: var(--i-ink); font-weight: 500; }

/* --- notice --------------------------------------------------------------- */

.i-notice
{
	display: flex;
	gap: 0.9rem;
	padding: 1.15rem 1.35rem;
	border: 1px solid var(--i-line);
	border-left: 2px solid var(--i-review-ink);
	border-radius: var(--i-radius);
	background: var(--i-raise);
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--i-ink-2);
}
.i-notice svg { color: var(--i-review-ink); flex: none; margin-top: 0.15rem; }
.i-notice p { margin: 0; max-width: 64ch; }


/* ==========================================================================
   11  FOOTER
   ========================================================================== */

.i-footer
{
	background: var(--i-field);
	border-top: 1px solid var(--i-line);
	padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
}
/* Single row, per "Website Sheet 3": lockup, rule, then the links inline. */
.i-footer__top
{
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3.25rem);
	padding-bottom: 2.75rem;
	border-bottom: 1px solid var(--i-line);
}
.i-footer__brand img { width: 190px; margin-bottom: 1.1rem; }
.i-footer__endorse
{
	font-family: var(--i-mono);
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--i-ink-3);
	margin: 0;
	max-width: 22rem;
}
.i-footer__endorse b { color: var(--i-ink-2); font-weight: 500; }
.i-footer__endorse i { font-style: normal; color: var(--i-pass-ink); }

.i-footer__nav { border-left: 1px solid var(--i-line); padding-left: clamp(1.75rem, 4vw, 3.25rem); }
.i-footer__row
{
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem clamp(1.5rem, 3.5vw, 3rem);
}
.i-footer__row a
{
	font-size: 0.9rem;
	color: var(--i-ink-2);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.16s ease;
}
.i-footer__row a:hover { color: var(--i-pass-ink); }
/* The endorsement link reads as the accent in the sheet. */
.i-footer__row li:last-child a { color: var(--i-pass-ink); }

.i-footer__bottom
{
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.75rem;
	font-family: var(--i-mono);
	font-size: 0.72rem;
	color: var(--i-ink-3);
}
.i-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.i-footer__legal a { color: var(--i-ink-3); text-decoration: none; }
.i-footer__legal a:hover { color: var(--i-pass-ink); }


/* ==========================================================================
   12  MOTION
   --------------------------------------------------------------------------
   Scroll reveal is scoped to `.js`, which an inline script in <head> sets
   before first paint. Without JavaScript the rule never matches and everything
   is simply visible. The rule in all motion here: failure degrades to
   EVERYTHING VISIBLE, never to nothing visible. (v1 learned this the hard way;
   the same three failure modes are guarded in precision-instrument.js.)
   ========================================================================== */

.js .i-reveal
{
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s cubic-bezier(0.22, 0.7, 0.3, 1),
	            transform 0.6s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.js .i-reveal.is-in { opacity: 1; transform: none; }

/* Staggered children, for grids. */
.js .i-reveal--stagger > * { opacity: 0; transform: translateY(14px); }
.js .i-reveal--stagger.is-in > *
{
	opacity: 1;
	transform: none;
	transition: opacity 0.55s cubic-bezier(0.22, 0.7, 0.3, 1) var(--i-delay, 0s),
	            transform 0.55s cubic-bezier(0.22, 0.7, 0.3, 1) var(--i-delay, 0s);
}
.js .i-reveal--stagger.is-in > *:nth-child(1) { --i-delay: 0s; }
.js .i-reveal--stagger.is-in > *:nth-child(2) { --i-delay: 0.07s; }
.js .i-reveal--stagger.is-in > *:nth-child(3) { --i-delay: 0.14s; }
.js .i-reveal--stagger.is-in > *:nth-child(4) { --i-delay: 0.21s; }
.js .i-reveal--stagger.is-in > *:nth-child(5) { --i-delay: 0.28s; }
.js .i-reveal--stagger.is-in > *:nth-child(6) { --i-delay: 0.35s; }
.js .i-reveal--stagger.is-in > *:nth-child(7) { --i-delay: 0.42s; }
.js .i-reveal--stagger.is-in > *:nth-child(8) { --i-delay: 0.49s; }


/* ==========================================================================
   13  RESPONSIVE
   ========================================================================== */

@media (min-width: 1200px)
{
	.i-rail { display: block; }
	/* Shift the whole page clear of the rail without changing the shell width. */
	body { padding-left: var(--i-rail); }
	.i-header { padding-left: 0; }
}

@media (max-width: 1080px)
{
	.i-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.i-split, .i-split--even, .i-split--text, .i-split--article { grid-template-columns: minmax(0, 1fr); }
	.i-split--flip > :first-child { order: 0; }
	.i-cta__inner { grid-template-columns: minmax(0, 1fr); }
	.i-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.i-layertabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.i-layertab[aria-selected="true"]::after { display: none; }
	.i-aud { grid-template-columns: minmax(0, 1fr); }
	.i-aud__list { flex-direction: row; flex-wrap: wrap; }
	.i-aud__btn { width: auto; flex: 1 1 12rem; }
	.i-hub { grid-template-columns: minmax(0, 1fr); }
	.i-hub__core { margin-inline: auto; order: -1; }
	.i-hub__col--left .i-hub__node::after,
	.i-hub__col--right .i-hub__node::after { display: none; }
	.i-def { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}

/* Three cards in a 768px shell leave ~174px of content each, which is narrower
   than an uppercase mono CTA. Drop to two before that happens rather than
   letting a button hang off the side. */
@media (max-width: 900px)
{
	.i-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Holds the full "Compliance by Design" / "Book a demonstration" labels on one
   row between the burger breakpoint and a full-width shell. */
@media (min-width: 981px) and (max-width: 1420px)
{
	.i-nav__link  { padding-inline: 0.45rem; font-size: 0.86rem; }
	.i-nav__cta   { padding-inline: 0.85rem; font-size: 0.82rem; }
	.i-nav__login { font-size: 0.82rem; }
	.i-nav__actions { margin-left: 0.4rem; gap: 0.45rem; }
	.i-logo img { width: 148px; }
}

@media (max-width: 980px)
{
	/* --- nav collapses to a panel ---------------------------------------- */
	.i-burger { display: inline-flex; }
	.i-nav
	{
		position: fixed;
		inset: 74px 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		max-height: calc(100dvh - 74px);
		overflow-y: auto;
		background: var(--i-field);
		border-bottom: 1px solid var(--i-line);
		padding: 1rem var(--i-gutter) 2rem;
		display: none;
	}
	.i-nav.is-open { display: flex; }
	.i-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.i-nav__item { border-bottom: 1px solid var(--i-line); }
	.i-nav__link { justify-content: space-between; padding: 0.95rem 0; font-size: 1rem; }
	.i-nav__item.is-active > .i-nav__link::after { display: none; }
	.i-nav__panel
	{
		position: static;
		translate: none;
		width: auto;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border: 0;
		background: transparent;
		padding: 0 0 0.85rem 0.6rem;
		display: none;
	}
	.i-nav__item.is-expanded > .i-nav__panel { display: block; }
	.i-nav__item--drop::after { display: none; }
	.i-nav__summary { display: none; }
	.i-nav__actions { margin: 1.25rem 0 0; flex-direction: column-reverse; align-items: stretch; gap: 0.85rem; }
	.i-nav__cta { width: 100%; }
	.i-nav__login { justify-content: center; }

	.i-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
	.i-steps::before { display: none; }
	.i-assure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.i-assure__item:nth-child(2n) { border-right: 0; }
	.i-assure__item:nth-child(-n+2) { border-bottom: 1px solid var(--i-line); }
	.i-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.i-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.i-quotes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.i-next { grid-template-columns: minmax(0, 1fr); }
	.i-versus { grid-template-columns: minmax(0, 1fr); }
	.i-versus__mid { padding: 0.5rem 0; }
}

@media (max-width: 720px)
{
	body { font-size: 1rem; }
	.i-grid--3, .i-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.i-layertabs { grid-template-columns: minmax(0, 1fr); }
	.i-tiles, .i-tiles--2, .i-tiles--3, .i-tiles--4 { grid-template-columns: minmax(0, 1fr); }
	.i-quotes, .i-quotes--2, .i-quotes--3 { grid-template-columns: minmax(0, 1fr); }
	.i-trust__item { flex-basis: 50%; border-bottom: 1px solid var(--i-line); }
	.i-trust__item:nth-child(2n) { border-right: 0; }
	.i-shift__head, .i-shift__row { grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); }
	.i-shift__was, .i-shift__now { padding: 0.85rem 0.9rem; font-size: 0.9rem; }
	.i-shift__head > span { padding: 0.7rem 0.9rem; font-size: 0.6rem; letter-spacing: 0.12em; }
	.i-steps { grid-template-columns: minmax(0, 1fr); }
	.i-assure { grid-template-columns: minmax(0, 1fr); }
	.i-assure__item { border-right: 0; border-bottom: 1px solid var(--i-line); }
	.i-assure__item:last-child { border-bottom: 0; }
	.i-footer__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.i-footer__nav { border-left: 0; border-top: 1px solid var(--i-line); padding-left: 0; padding-top: 1.75rem; }

	/* Vertical journey on mobile - the flow reads as a column below this width. */
	.i-flow { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px)
{
	/* A long eyebrow cannot stay on one line inside a 320px content box. The
	   nowrap is worth keeping above this width, where it stops a phrase
	   breaking awkwardly beside the tick scale. */
	.i-index__label { white-space: normal; }
}

@media (max-width: 520px)
{
	.i-stats { grid-template-columns: minmax(0, 1fr); }
	.i-footer__row { gap: 0.7rem 1.5rem; }
	.i-btnrow .i-btn { width: 100%; }
}


/* ==========================================================================
   14  REDUCED MOTION / PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce)
{
	html { scroll-behavior: auto; }
	*, *::before, *::after
	{
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.js .i-reveal, .js .i-reveal--stagger > * { opacity: 1 !important; transform: none !important; }
	.i-rail__needle, .i-rail__read { transition: none; }
}

@media print
{
	.i-rail, .i-header, .i-cta, .i-footer { display: none !important; }
	body { background: #fff; color: #000; padding-left: 0; }
	.i-section { padding-block: 1rem; background: #fff !important; }
	h1, h2, h3, h4 { color: #000; }
}