*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: DM Sans, Manrope, IBM Plex Sans Arabic, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: DM Mono, IBM Plex Mono, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

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

:root {
  --bg:          #FAFAF8;
  --bg-subtle:   #F3F1ED;
  --bg-card:     #FFFFFF;
  --ink:         #111016;
  --ink-soft:    #4A4855;
  --ink-muted:   #6B6878;
  /* WCAG AA on cream bg (≈4.8:1) */
  --rule:        #E2DFD9;
  --rule-strong: #C8C4BC;
  --amber:       #B85C0A;
  --amber-mid:   #D4700F;
  --amber-light: #FEF3E2;
  --amber-pale:  #FDF8F0;
  --navy:        #0B1730;
  --navy-mid:    #152444;
  --navy-light:  #1E3261;
  --white:       #FFFFFF;
  --shadow-sm:   0 1px 3px rgba(17,16,22,0.06), 0 1px 2px rgba(17,16,22,0.04);
  --shadow-md:   0 4px 16px rgba(17,16,22,0.08), 0 2px 4px rgba(17,16,22,0.04);
  --shadow-lg:   0 12px 40px rgba(17,16,22,0.12), 0 4px 8px rgba(17,16,22,0.04);
  --radius:      4px;
  --radius-md:   6px;
  /* code/diagram blocks; was referenced but undefined */
  --radius-lg:   8px;
  --bg-section:  #F3F1ED;
  /* = --bg-subtle; was referenced but undefined */
  --amber-hover: #D4700F;
  /* = --amber-mid; was referenced but undefined */
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.visible {
  visibility: visible;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-0\.5 {
  height: 0.125rem;
}

.min-h-screen {
  min-height: 100vh;
}

.w-10 {
  width: 2.5rem;
}

.max-w-lg {
  max-width: 32rem;
}

.flex-shrink {
  flex-shrink: 1;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize {
  resize: both;
}

.items-center {
  align-items: center;
}

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

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-amber {
  --tw-border-opacity: 1;
  border-color: rgb(184 92 10 / var(--tw-border-opacity, 1));
}

.bg-amber {
  --tw-bg-opacity: 1;
  background-color: rgb(184 92 10 / var(--tw-bg-opacity, 1));
}

.bg-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 248 / var(--tw-bg-opacity, 1));
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.text-center {
  text-align: center;
}

.font-display {
  font-family: Cormorant, Amiri, serif;
}

.font-mono {
  font-family: DM Mono, IBM Plex Mono, monospace;
}

.font-sans {
  font-family: DM Sans, Manrope, IBM Plex Sans Arabic, sans-serif;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-\[8rem\] {
  font-size: 8rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-none {
  line-height: 1;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-amber {
  --tw-text-opacity: 1;
  color: rgb(184 92 10 / var(--tw-text-opacity, 1));
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(17 16 22 / var(--tw-text-opacity, 1));
}

.text-ink-muted {
  --tw-text-opacity: 1;
  color: rgb(148 144 160 / var(--tw-text-opacity, 1));
}

.text-ink-soft {
  --tw-text-opacity: 1;
  color: rgb(74 72 85 / var(--tw-text-opacity, 1));
}

.text-rule {
  --tw-text-opacity: 1;
  color: rgb(226 223 217 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.\[-\:\=\] {
  -: =;
}

/* ─── A11y baseline (WCAG 2.4.1, 2.4.7, BFSG/EAA) ─── */

.skip-link {
  position: absolute;
  top: -40px;
  inset-inline-start: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: #B85C0A;
  color: #fff;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 13px;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: -3px;
}

*:focus-visible {
  outline: 2px solid #B85C0A;
  outline-offset: 2px;
  border-radius: 2px;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #B85C0A;
  outline-offset: 3px;
}

main:focus-visible {
  outline: none;
}

/* ─────────────────────────────────────────────
   CUSTOM BASE STYLES
   Extracted from design-concept.html \3c style>
   These are CSS custom properties and styles
   that are not covered by standard Tailwind
   utilities. Tailwind utilities are applied
   via the output.css build artifact.
───────────────────────────────────────────── */

/* ─── TYPOGRAPHY ─── */

.display {
  font-family: 'Cormorant', 'Amiri', serif;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.label {
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ─── UTILITY ─── */

.rule {
  width: 100%;
  height: 1px;
  background: var(--rule);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ─── NAVIGATION ─── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(250,250,248,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.3s ease;
}

.nav.scrolled {
  box-shadow: var(--shadow-md);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  z-index: 110;
}

.nav-logo-img {
  width: 32px;
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.nav-logo-text {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.nav-logo-text span {
  color: var(--amber);
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
}

.nav-links a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-links a.active {
  color: var(--amber);
  font-weight: 500;
}

.nav-badge {
  display: inline-block;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--amber-light);
  color: var(--amber);
  padding: 2px 5px;
  border-radius: 2px;
  margin-inline-start: 4px;
  vertical-align: middle;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobile nav */

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  z-index: 110;
  background: none;
  border: none;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.nav-hamburger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.nav-mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 105;
  flex-direction: column;
  padding: 96px 32px 48px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-mobile-drawer.open {
  transform: translateX(0);
}

.nav-mobile-links {
  list-style: none;
  margin-bottom: 40px;
}

.nav-mobile-links li {
  border-bottom: 1px solid var(--rule);
}

.nav-mobile-links a {
  display: block;
  padding: 18px 0;
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 36px;
  font-weight: 300;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}

.nav-mobile-links a:hover {
  color: var(--amber);
}

.nav-mobile-sub a {
  font-size: 22px;
  padding: 12px 0;
  padding-inline-start: 20px;
  color: var(--ink-muted);
}

/* ─── NAV DROPDOWNS ─── */

.nav-dropdown {
  position: relative;
}

/* Invisible hover bridge over the 6px gap between toggle bottom and menu top.
   Without this, the cursor crossing the gap loses :hover on the <li> and the
   menu closes before the user can click an item. */

.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
  /* No background — just a transparent hit area extending the hover region. */
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400;
  font-family: 'DM Sans', 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.2s;
}

.nav-dropdown-toggle:hover {
  color: var(--ink);
}

.nav-dropdown-toggle .chevron {
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-toggle .chevron,
.nav-dropdown:focus-within .nav-dropdown-toggle .chevron,
.nav-dropdown[data-open="true"] .nav-dropdown-toggle .chevron {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 200;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown[data-open="true"] .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.nav-dropdown-menu a:hover {
  color: var(--ink);
  background: var(--bg-subtle);
}

/* ─── RAIGATE HERO ─── */

.raigate-hero {
  background: linear-gradient(135deg, var(--bg-subtle) 0%, var(--amber-pale) 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.raigate-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 96px 0;
}

.raigate-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.raigate-hero-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse 2s ease-in-out infinite;
}

.raigate-hero-title {
  font-size: clamp(56px, 7vw, 96px);
  color: var(--ink);
  margin-bottom: 20px;
  line-height: 1;
}

.raigate-hero-sub {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 32px;
  line-height: 1.7;
}

.raigate-hero-features {
  list-style: none;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.raigate-hero-features li {
  font-size: 14px;
  color: var(--ink-soft);
  padding-inline-start: 22px;
  position: relative;
}

.raigate-hero-features li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  color: var(--amber);
  font-weight: 600;
}

.raigate-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.raigate-hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.raigate-hero-icon-wrap {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--amber-light);
  border-radius: 50%;
  border: 1px solid rgba(184,92,10,0.15);
}

.raigate-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.raigate-stat {
  text-align: center;
  padding: 18px 12px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.raigate-stat-num {
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--amber);
  line-height: 1;
}

.raigate-stat-label {
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 6px;
}

@media (max-width: 1024px) {
  .raigate-hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 64px 0 0;
  }

  .raigate-hero-visual {
    padding: 40px 0 64px;
  }
}

/* ─── BUTTONS ─── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'DM Sans', 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  letter-spacing: -0.01em;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn-primary {
  background: var(--amber);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--amber-mid);
  box-shadow: 0 4px 12px rgba(184,92,10,0.25);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
}

.btn-ghost:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
  background: var(--bg-subtle);
}

.btn-large {
  padding: 14px 28px;
  font-size: 14px;
}

.btn-white {
  background: var(--white);
  color: var(--navy);
  font-weight: 600;
}

.btn-white:hover {
  background: var(--bg-subtle);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.btn-outline-white {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.2);
}

.btn-outline-white:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
}

/* ─── HERO ─── */

.hero {
  padding-top: 140px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
        linear-gradient(var(--rule) 1px, transparent 1px),
        linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.45;
  pointer-events: none;
}

.hero-fade {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 35% 50%, var(--bg) 30%, transparent 75%);
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 64px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.hero-headline {
  font-size: clamp(48px, 5.5vw, 84px);
  margin-bottom: 20px;
}

.hero-headline em {
  color: var(--amber);
}

.hero-sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 40px;
  font-weight: 300;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-proof {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-logos {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.hero-logo-placeholder {
  height: 18px;
  background: var(--rule-strong);
  border-radius: 2px;
  opacity: 0.45;
}

.hero-logo-client {
  opacity: 0.75;
  filter: grayscale(30%);
  transition: opacity 0.2s, filter 0.2s;
}

.hero-logo-client:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* Dark chip for white-on-transparent client logos so they read on the light hero */

.hero-logo-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--ink);
  border-radius: 8px;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.hero-logo-chip:hover {
  opacity: 1;
}

.hero-logo-chip .hero-logo-client {
  opacity: 1;
  filter: none;
}

/* ─── NETWORK VISUAL ─── */

.hero-visual {
  position: relative;
  height: 420px;
}

.hero-canvas {
  width: 100%;
  height: 100%;
}

/* ─── EU TRUST STRIP ─── */

.eu-strip {
  background: var(--navy);
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.eu-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.eu-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 40px 20px 0;
  border-inline-end: 1px solid rgba(255,255,255,0.08);
  /* Share the row and shrink to fit. flex-shrink:0 with min-width:auto kept
       each badge at its content width, which pushed the last one past the
       container once the labels grew. The subtitle wraps instead. */
  flex: 1 1 0;
  min-width: 0;
}

.eu-badge:first-child {
  padding-inline-start: 0;
}

.eu-badge:last-child {
  border-inline-end: none;
  padding-inline-start: 40px;
}

.eu-badge-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.eu-badge-icon svg {
  width: 14px;
  height: 14px;
}

.eu-badge-text {
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
}

.eu-badge-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: -0.01em;
}

.eu-badge-sub {
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

.eu-flag {
  font-size: 16px;
  line-height: 1;
}

/* ─── STATS BAR ─── */

.stats-bar {
  background: var(--bg-subtle);
  padding: 56px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.stat-item {
  min-width: 0;
  padding: 0 48px 0 0;
  border-inline-end: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stat-item:last-child {
  border-inline-end: none;
}

.stat-item:not(:first-child) {
  padding-inline-start: 48px;
}

.stat-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-number {
  font-family: 'Cormorant', 'Amiri', serif;
  font-weight: 300;
  font-size: 56px;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
  white-space: nowrap;
}

.stat-number span {
  color: var(--amber);
}

.stat-label-text {
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ─── SECTION DEFAULTS ─── */

.section {
  padding: 96px 0;
}

.section-alt {
  padding: 96px 0;
  background: var(--bg-subtle);
}

.section-rule {
  width: 40px;
  height: 2px;
  background: var(--amber);
  margin-bottom: 20px;
}

.section-title {
  font-size: clamp(32px, 3.5vw, 48px);
  margin-bottom: 16px;
  max-width: 560px;
}

.section-sub {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 480px;
  line-height: 1.7;
}

/* ─── PRODUCTS ─── */

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.product-card {
  background: var(--bg-card);
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
  background: var(--amber-pale);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(17, 16, 22, 0.06);
}

.product-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--rule-strong);
  transition: background 0.2s ease;
}

.product-card:hover .product-card-accent {
  background: var(--amber);
}

.product-card.flagship .product-card-accent {
  background: var(--amber);
}

.product-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  transition: border-color 0.2s, background 0.2s;
  background: var(--bg);
}

.product-card:hover .product-icon {
  border-color: var(--amber);
  background: var(--amber-light);
}

.product-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--ink-muted);
  fill: none;
  transition: stroke 0.2s;
}

.product-card:hover .product-icon svg,
.product-card.flagship .product-icon svg {
  stroke: var(--amber);
}

.product-flagship-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-light);
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 12px;
}

.product-coming-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg-section);
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 12px;
  border: 1px solid var(--rule);
}

.product-name {
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.product-tagline {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 28px;
  line-height: 1.6;
}

.product-features {
  list-style: none;
  margin-bottom: 32px;
}

.product-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 6px 0;
  border-top: 1px solid var(--rule);
}

.product-features li:first-child {
  border-top: none;
}

.product-feature-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
  transition: gap 0.2s;
}

.product-link:hover {
  gap: 10px;
}

.product-link svg {
  width: 14px;
  height: 14px;
}

/* ─── COMPARISON TABLE ─── */

.comparison-wrap {
  overflow-x: auto;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.comparison-table thead tr {
  border-bottom: 2px solid var(--rule-strong);
}

.comparison-table th {
  padding: 16px 20px;
  text-align: center;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.comparison-table th:first-child {
  text-align: start;
  width: 260px;
}

.comparison-table th.col-krasper {
  color: var(--amber);
  background: var(--amber-pale);
  border-inline-start: 2px solid var(--amber);
  border-inline-end: 2px solid var(--amber);
  border-top: 2px solid var(--amber);
  border-radius: 4px 4px 0 0;
}

.comparison-table .col-header-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.comparison-table .col-header-name {
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--amber);
  letter-spacing: -0.02em;
}

.comparison-table .col-header-sub {
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.7;
}

.comparison-table tbody tr {
  border-bottom: 1px solid var(--rule);
  transition: background 0.15s;
}

.comparison-table tbody tr:hover {
  background: var(--bg-subtle);
}

.comparison-table tbody tr:last-child {
  border-bottom: none;
}

.comparison-table td {
  padding: 14px 20px;
  text-align: center;
  color: var(--ink-soft);
  vertical-align: middle;
}

.comparison-table td:first-child {
  text-align: start;
  font-weight: 400;
  color: var(--ink);
  font-size: 13px;
}

.comparison-table td.col-krasper {
  background: var(--amber-pale);
  border-inline-start: 2px solid var(--amber);
  border-inline-end: 2px solid var(--amber);
}

.comparison-table tfoot td.col-krasper {
  border-bottom: 2px solid var(--amber);
  border-radius: 0 0 4px 4px;
}

.check-yes {
  color: #15803D;
  font-size: 16px;
}

.check-no {
  color: var(--rule-strong);
  font-size: 16px;
}

.check-partial {
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

.comp-category {
  padding: 20px 20px 8px;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: start;
  border-bottom: none;
  background: var(--bg-subtle);
}

.comp-category.col-krasper {
  background: var(--amber-pale);
}

/* ─── WHY RAIGATE GRID ─── */

.why-raigate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.why-raigate-cta {
  margin-top: 48px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .why-raigate-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── PROCESS TIMELINE ─── */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  gap: 0;
}

.process-connector {
  position: absolute;
  top: 28px;
  inset-inline-start: calc(12.5% + 28px);
  inset-inline-end: calc(12.5% + 28px);
  height: 1px;
  background: var(--rule-strong);
  z-index: 0;
}

.process-connector-fill {
  position: absolute;
  top: 28px;
  inset-inline-start: calc(12.5% + 28px);
  width: 0;
  height: 1px;
  background: var(--amber);
  z-index: 1;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-connector-fill.animated {
  width: calc(75% - 56px);
}

.process-step {
  padding: 0 32px 0 0;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.process-step:last-child {
  padding-inline-end: 0;
}

.process-step.visible {
  opacity: 1;
  transform: translateY(0);
}

.process-step-num-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.process-step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink-muted);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.process-step:hover .process-step-num {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-light);
}

.process-step-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.process-step-text {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.65;
}

.process-step-label {
  display: inline-block;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
}

/* ─── DIFFERENTIATORS ─── */

.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.diff-item {
  padding: 48px;
  border-top: 1px solid var(--rule);
  border-inline-end: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.diff-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.diff-item.visible:hover {
  transform: translateY(-3px);
  background: var(--bg-card);
  box-shadow: 0 8px 18px rgba(17, 16, 22, 0.05);
}

.diff-item.visible .diff-number {
  transition: color 0.25s ease;
}

.diff-item.visible:hover .diff-number {
  color: var(--amber);
}

.diff-item:nth-child(even) {
  border-inline-end: none;
}

.diff-number {
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 72px;
  font-weight: 300;
  color: var(--rule-strong);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.04em;
}

.diff-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.diff-text {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ─── CTA BANNER ─── */

.cta-section {
  background: var(--navy);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

.cta-bg-line {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  width: 40%;
  background: repeating-linear-gradient(-45deg,transparent,transparent 40px,rgba(255,255,255,0.015) 40px,rgba(255,255,255,0.015) 80px);
}

.cta-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 64px;
}

.cta-headline {
  font-size: clamp(36px, 4vw, 56px);
  color: var(--white);
}

.cta-headline em {
  color: var(--amber-mid);
}

.cta-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  margin-top: 12px;
  font-weight: 300;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  flex-shrink: 0;
}

/* ─── FOOTER ─── */

footer {
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 28px 0 16px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px;
}

.footer-top {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 40px;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-subscribe {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-subscribe-copy {
  max-width: 420px;
}

.footer-subscribe-copy .footer-col-title {
  display: block;
}

.footer-brand-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}

.footer-brand-name span {
  color: var(--amber-mid);
}

.footer-tagline {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  font-weight: 300;
  line-height: 1.5;
  max-width: 220px;
}

.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.footer-col-title {
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 10px;
}

.footer-col-links {
  list-style: none;
}

.footer-col-links li {
  margin-bottom: 5px;
}

.footer-col-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-col-links a:hover {
  color: var(--white);
}

.footer-badge {
  display: inline-block;
  margin-inline-start: 6px;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 1px 6px;
  border-radius: 2px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-legal a:hover {
  color: rgba(255,255,255,0.6);
}

@media (max-width: 640px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .footer-legal {
    flex-wrap: wrap;
    gap: 12px 24px;
  }
}

/* ─── ANIMATIONS ─── */

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-delay-1 {
  transition-delay: 0.1s;
}

.fade-in-delay-2 {
  transition-delay: 0.2s;
}

.fade-in-delay-3 {
  transition-delay: 0.3s;
}

.fade-in-delay-4 {
  transition-delay: 0.4s;
}

.count-up {
  transition: all 0.8s ease;
}

/* ─── RESPONSIVE ─── */

@media (max-width: 1024px) {
  .nav-links, .nav-cta {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-mobile-drawer {
    display: flex;
  }

  .nav-inner {
    padding: 0 24px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    padding: 0 24px;
  }

  .hero-visual {
    display: none;
  }

  .container {
    padding: 0 24px;
  }

  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    padding: 0 24px;
  }

  .stat-item {
    padding: 0 0 32px;
    border-inline-end: none;
    border-bottom: 1px solid var(--rule);
  }

  .stat-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .stat-item:not(:first-child) {
    padding-inline-start: 0;
  }

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

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

  .diff-item {
    border-inline-end: none;
  }

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

  .process-connector, .process-connector-fill {
    display: none;
  }

  .cta-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .newsletter-form {
    max-width: 480px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-links-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .footer-subscribe {
    flex-direction: column;
    gap: 16px;
  }

  .eu-strip-inner {
    flex-wrap: wrap;
    padding: 0 24px;
  }

  .eu-badge {
    flex: 1 1 40%;
    padding: 16px 20px 16px 0;
  }

  .eu-badge:last-child {
    padding-inline-start: 0;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 100px;
  }

  .hero-headline {
    font-size: 44px;
  }

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

  .comparison-table th, .comparison-table td {
    padding: 10px 12px;
  }

  .footer-links-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* ─── CONTACT FORM (replaces inline onfocus/onblur) ─── */

.cf-input,
.cf-select,
.cf-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: 'DM Sans', 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 16px;
  /* >=16px prevents iOS Safari focus auto-zoom */
  color: var(--ink);
  background: var(--bg);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.cf-textarea {
  resize: vertical;
}

.cf-select   {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(184,92,10,0.08);
}

/* Email link hover (replaces inline onmouseover) */

.email-link {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s;
}

.email-link:hover {
  color: var(--amber);
}

/* Blog title link hover (replaces inline onmouseover) */

.blog-title-link {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s;
}

.blog-title-link:hover {
  color: var(--amber);
}

/* ─────────────────────────────────────────────
   PROSE — RichText body styles (Wagtail RichTextField output)
   Replaces @tailwindcss/typography. Matches design system tokens.
───────────────────────────────────────────── */

.prose {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
  max-width: 100%;
}

.prose > * + * {
  margin-top: 1em;
}

.prose h2,
.prose h3,
.prose h4 {
  color: var(--ink);
  font-family: 'Cormorant', 'Amiri', serif;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.prose h2 {
  font-size: clamp(28px, 3vw, 36px);
}

.prose h3 {
  font-size: clamp(22px, 2.2vw, 26px);
}

.prose h4 {
  font-size: clamp(18px, 1.8vw, 20px);
}

.prose > h2:first-child,
.prose > h3:first-child,
.prose > h4:first-child {
  margin-top: 0;
}

.prose p {
  margin-top: 0.9em;
  margin-bottom: 0.9em;
}

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

.prose em {
  font-style: italic;
}

.prose a {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.prose a:hover {
  color: var(--amber-mid);
}

.prose ul,
.prose ol {
  margin-top: 0.9em;
  margin-bottom: 0.9em;
  padding-inline-start: 1.6em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

.prose li {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
  padding-inline-start: 0.2em;
}

.prose li::marker {
  color: var(--amber);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.4em 0;
}

.prose blockquote {
  border-inline-start: 3px solid var(--amber);
  padding-inline-start: 1.2em;
  margin: 1.4em 0;
  font-style: italic;
  color: var(--ink);
}

.prose code {
  background: var(--bg-subtle);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px 6px;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 0.92em;
}

.prose pre {
  background: var(--ink);
  color: var(--bg);
  padding: 1em 1.2em;
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
  margin: 1.4em 0;
}

.prose pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 14px;
}

.prose th,
.prose td {
  border: 1px solid var(--rule);
  padding: 10px 14px;
  text-align: start;
}

.prose th {
  background: var(--bg-subtle);
  color: var(--ink);
  font-weight: 600;
}

/* Variant for hero contexts — tighter, no top heading margin */

.hero-sub.prose {
  font-size: 18px;
  line-height: 1.7;
}

.hero-sub.prose p {
  margin: 0.6em 0;
}

.hero-sub.prose > p:first-child {
  margin-top: 0;
}

.hero-sub.prose > p:last-child  {
  margin-bottom: 0;
}

/* ─────────────────────────────────────────────
   FOOTER NEWSLETTER FORM
───────────────────────────────────────────── */

.newsletter-form {
  margin-top: 0;
  max-width: 400px;
}

.newsletter-col-title {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.newsletter-pitch {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.45;
  margin-bottom: 10px;
}

/* interaction-only widget renders nothing until a challenge fires — no reserved gap */

.footer-newsletter .cf-turnstile:not(:empty) {
  margin-top: 8px;
}

.newsletter-row {
  display: flex;
  gap: 8px;
}

.newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--ink);
  font-size: 16px;
  /* >=16px prevents iOS Safari focus auto-zoom */
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(184,92,10,0.12);
}

.newsletter-btn {
  padding: 10px 16px;
  font-size: 13px;
}

.newsletter-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
  cursor: pointer;
}

.newsletter-consent-checkbox {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--amber);
}

.newsletter-consent-text a {
  color: var(--amber);
  text-decoration: underline;
}

.newsletter-consent-text a:hover {
  color: var(--amber-hover);
}

.newsletter-msg {
  font-size: 12px;
  margin-top: 6px;
  min-height: 0;
}

.newsletter-msg:empty {
  display: none;
}

.newsletter-msg[data-status="ok"]   {
  color: #2D7A3F;
}

.newsletter-msg[data-status="err"]  {
  color: #B43A1F;
}

.newsletter-msg[data-status="info"] {
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  .newsletter-row {
    flex-direction: column;
  }

  .newsletter-btn {
    width: 100%;
  }
}

/* ─── PRICING TIERS ─── */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.pricing-card.featured {
  border-color: var(--amber);
  box-shadow: var(--shadow-md);
}

.pricing-badge {
  display: inline-block;
  background: var(--amber);
  color: var(--white);
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 16px;
  align-self: flex-start;
}

.pricing-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.pricing-price {
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 40px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}

.pricing-annual {
  font-size: 12px;
  color: var(--ink-muted);
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  margin-bottom: 24px;
}

.pricing-features {
  flex: 1;
  margin-bottom: 24px;
  font-size: 14px;
}

.pricing-features ul {
  list-style: none;
  padding-inline-start: 0;
}

.pricing-features li {
  position: relative;
  padding-inline-start: 20px;
  margin-bottom: 8px;
}

.pricing-features li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  color: var(--amber);
  font-weight: 600;
}

.pricing-cta {
  display: block;
  text-align: center;
  margin-top: auto;
}

/* ─── CALLOUT ─── */

.callout {
  padding: 24px 28px;
  border-radius: var(--radius-lg);
}

.callout-amber {
  background: var(--amber-pale);
  border-inline-start: 3px solid var(--amber);
}

.callout-navy {
  background: var(--navy);
  color: var(--white);
}

.callout-navy .prose {
  color: var(--white);
}

.callout-navy .prose strong {
  color: var(--white);
}

.callout-navy .prose a {
  color: var(--amber-light);
}

.callout-navy .prose li::marker {
  color: var(--amber-mid);
}

/* ─── TIMELINE ─── */

.timeline {
  position: relative;
  padding-inline-start: 120px;
}

.timeline::before {
  content: '';
  position: absolute;
  inset-inline-start: 80px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--rule);
}

.timeline-item {
  position: relative;
  padding-bottom: 40px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  inset-inline-start: -44px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--amber);
}

.timeline-date {
  position: absolute;
  inset-inline-start: -120px;
  top: 2px;
  width: 68px;
  text-align: end;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.4;
}

.timeline-title {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.timeline-text {
  font-size: 14px;
  color: var(--ink-soft);
}

/* ─── TWO COLUMN ─── */

.two-col {
  display: grid;
  align-items: start;
}

.two-col-1-1 {
  grid-template-columns: 1fr 1fr;
}

.two-col-2-3 {
  grid-template-columns: 2fr 3fr;
}

.two-col-3-2 {
  grid-template-columns: 3fr 2fr;
}

.two-col-gap-normal {
  gap: 80px;
}

.two-col-gap-tight  {
  gap: 40px;
}

.two-col-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ─── ACCORDION ─── */

.accordion-item {
  border-bottom: 1px solid var(--rule);
}

.accordion-item:first-child {
  border-top: 1px solid var(--rule);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-align: start;
  gap: 16px;
}

.accordion-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
  color: var(--amber);
}

.accordion-trigger.open .accordion-icon {
  transform: rotate(45deg);
}

.accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.accordion-body.open {
  max-height: 2000px;
  padding-bottom: 20px;
}

/* ─── FAQ ─── */

.faq-heading {
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 24px;
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-item:first-of-type {
  border-top: 1px solid var(--rule);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: 'DM Sans', 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--amber);
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding-bottom: 20px;
}

/* ─── HOW-TO STEPS ─── */

.howto-heading {
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
}

.howto-intro {
  color: var(--ink-soft);
  margin-bottom: 28px;
  max-width: 760px;
}

.howto-steps {
  list-style: none;
  counter-reset: howto;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}

.howto-step {
  counter-increment: howto;
  position: relative;
  padding: 24px 0 24px 64px;
  border-bottom: 1px solid var(--rule);
}

.howto-step::before {
  content: counter(howto, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--amber);
}

.howto-step-title {
  font-family: 'DM Sans', 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.howto-step-text {
  font-size: 14px;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .howto-step {
    padding-inline-start: 44px;
  }
}

/* ─── CONTROL TABLE ─── */

.control-table-heading {
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 20px;
}

.control-table-scroll {
  overflow-x: auto;
}

.control-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.control-table caption {
  caption-side: bottom;
  padding-top: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
  text-align: start;
}

.control-table th {
  text-align: start;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule-strong);
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 500;
}

.control-table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  vertical-align: top;
}

.control-table .control-id {
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  color: var(--amber);
  white-space: nowrap;
}

.control-table .control-group {
  color: var(--ink-muted);
  font-size: 13px;
}

/* ─── COMPLIANCE PAGE ─── */

.compliance-summary {
  max-width: 68ch;
}

.compliance-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 28px 0;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.compliance-meta dt {
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.compliance-meta dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

/* ─── TESTIMONIALS ─── */

.testimonials-heading {
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 24px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

.testimonial {
  margin: 0;
  padding: 28px;
  border: 1px solid var(--rule);
  background: var(--amber-pale);
}

.testimonial-quote {
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 20px;
}

.testimonial-quote::before {
  content: '\201C';
}

.testimonial-quote::after  {
  content: '\201D';
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.testimonial-name {
  color: var(--ink);
  font-weight: 500;
}

.testimonial-role {
  color: var(--ink-muted);
}

/* ─── BADGE ROW ─── */

.badge-row-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.badge-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--amber);
  border-radius: 2px;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

a.badge-item:hover {
  background: var(--amber-light);
}

.badge-item-active {
  background: var(--amber);
  color: var(--white);
}

a.badge-item-active:hover {
  background: var(--amber-mid);
  color: var(--white);
}

/* ─── SCREENSHOT ─── */

.screenshot {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.screenshot--narrow {
  max-width: 720px;
}

.screenshot--normal {
  max-width: 960px;
}

.screenshot--wide   {
  max-width: 1200px;
}

.screenshot--full   {
  max-width: 100%;
}

.screenshot-header {
  margin: 0;
  text-align: center;
}

.screenshot-header .label {
  display: block;
  margin-bottom: 8px;
  color: var(--amber);
}

.screenshot-title {
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.screenshot-frame {
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 24px 48px -16px rgba(11, 23, 48, 0.18), 0 4px 12px -4px rgba(11, 23, 48, 0.08);
}

.screenshot-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.screenshot-caption {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 640px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

@media (max-width: 768px) {
  .screenshot-title {
    font-size: 22px;
  }

  .screenshot-frame {
    border-radius: 4px;
  }
}

/* ─── RESPONSIVE: new components ─── */

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

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

  .timeline {
    padding-inline-start: 48px;
  }

  .timeline::before {
    inset-inline-start: 16px;
  }

  .timeline-dot {
    inset-inline-start: -36px;
  }

  .timeline-date {
    display: none;
  }
}

/* ─── ROI CALCULATOR ─── */

/* ─── ROI CALCULATOR ─── */

.roi-calc {
  max-width: 840px;
  margin: 0 auto;
}

.roi-calc__header {
  text-align: center;
  margin-bottom: 48px;
}

.roi-calc__header .section-title {
  max-width: 100%;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.roi-calc__header .section-sub {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.roi-calc__form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 8px;
}

.roi-calc__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roi-calc__field .label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.roi-calc__select,
.roi-calc__input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--rule-strong);
  background: var(--white);
  border-radius: var(--radius);
  font: inherit;
  font-size: 16px;
  /* >=16px prevents iOS Safari focus auto-zoom */
  color: var(--ink);
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}

.roi-calc__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239490A0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-inline-end: 40px;
}

.roi-calc__select:focus,
.roi-calc__input:focus {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

.roi-calc__cta {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 16px;
}

/* Gate — navy dark card */

.roi-calc__gate {
  position: relative;
  margin-top: 48px;
  padding: 48px 56px;
  background: var(--navy);
  border-radius: 12px;
  overflow: hidden;
}

.roi-calc__gate::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 0%, rgba(184,92,10,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.roi-calc__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.roi-calc__gate-step {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 12px;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
}

.roi-calc__gate-title {
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 32px;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 10px;
}

.roi-calc__gate-desc {
  color: rgba(255,255,255,0.6);
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 1.6;
}

.roi-calc__gate-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.roi-calc__gate .roi-calc__input {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: var(--white);
  border-radius: var(--radius);
}

.roi-calc__gate .roi-calc__input::-moz-placeholder {
  color: rgba(255,255,255,0.35);
}

.roi-calc__gate .roi-calc__input::placeholder {
  color: rgba(255,255,255,0.35);
}

.roi-calc__gate .roi-calc__input:focus {
  outline-color: var(--amber);
  border-color: transparent;
}

.roi-calc__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

.roi-calc__consent input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--amber);
}

.roi-calc__optional {
  margin-top: 18px;
}

.roi-calc__optional summary {
  cursor: pointer;
  font-size: 12px;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  padding: 6px 0;
  list-style: none;
}

.roi-calc__optional summary::-webkit-details-marker {
  display: none;
}

.roi-calc__optional summary::before {
  content: '+ ';
  color: var(--amber);
  font-weight: 600;
}

.roi-calc__optional[open] summary::before {
  content: '− ';
}

.roi-calc__optional summary:hover {
  color: rgba(255,255,255,0.85);
}

.roi-calc__optional-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.roi-calc__optional-grid .roi-calc__input {
  width: 100%;
}

@media (min-width: 640px) {
  .roi-calc__optional-grid {
    grid-template-columns: 1fr 1fr;
  }

  .roi-calc__optional-grid .roi-calc__input:last-child {
    grid-column: span 2;
  }
}

.roi-calc__privacy {
  margin-top: 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  line-height: 1.5;
}

.roi-calc__privacy a {
  color: var(--amber);
  text-decoration: underline;
}

.roi-calc__privacy a:hover {
  color: #D4700F;
}

.roi-calc__error {
  color: #F87171;
  margin-top: 14px;
  font-size: 13px;
}

/* Results */

.roi-calc__result {
  margin-top: 48px;
  text-align: center;
}

.roi-calc__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

.roi-calc__tile {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 32px 24px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.roi-calc__tile .label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.roi-calc__tile--highlight {
  background: var(--amber-light);
  border-color: rgba(184,92,10,0.3);
  box-shadow: 0 4px 20px rgba(184,92,10,0.1);
}

.roi-calc__tile-value {
  margin-top: 12px;
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
  font-weight: 600;
}

.roi-calc__tile--highlight .roi-calc__tile-value {
  color: var(--amber);
}

.roi-calc__tile-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.roi-calc__tiles--single {
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
}

.roi-calc__tiles--single .roi-calc__tile {
  padding: 36px 32px;
}

.roi-calc__tiles--single .roi-calc__tile-value {
  font-size: 56px;
}

.roi-calc__mail-callout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 32px;
  text-align: start;
  max-width: 520px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.roi-calc__mail-icon {
  flex-shrink: 0;
  color: var(--amber);
  margin-top: 2px;
}

.roi-calc__mail-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  margin: 0 0 6px;
}

.roi-calc__mail-body {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

.roi-calc__mail-addr {
  display: inline-block;
  margin-inline-start: 4px;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  color: var(--amber);
  font-size: 12px;
  word-break: break-all;
}

.roi-calc__final-cta {
  display: inline-block;
}

@media (max-width: 860px) {
  .roi-calc__gate {
    padding: 36px 32px;
  }
}

@media (max-width: 768px) {
  .roi-calc__form {
    grid-template-columns: 1fr;
  }

  .roi-calc__tiles {
    grid-template-columns: 1fr;
  }

  .roi-calc__gate-row {
    grid-template-columns: 1fr;
  }

  .roi-calc__gate {
    padding: 28px 24px;
  }

  .roi-calc__gate-title {
    font-size: 26px;
  }
}

/* ── Code block (blog post StreamField) — light, on-brand palette ──────── */

.code-block {
  margin: 32px 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #FBF9F4;
  color: var(--ink);
}

.code-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #F3F1ED;
  border-bottom: 1px solid var(--rule);
}

.code-block-lang {
  color: var(--ink-muted);
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.code-block-copy {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s;
}

.code-block-copy:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.code-block-pre {
  margin: 0;
  padding: 20px 24px;
  overflow-x: auto;
  background: transparent;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
}

.code-block-pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-family: inherit;
}

.code-block-caption {
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 12px;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
}

/* Prism token palette — uses amber + ink + olive for warmth on cream */

.code-block-pre .token.comment,
.code-block-pre .token.prolog,
.code-block-pre .token.doctype,
.code-block-pre .token.cdata {
  color: var(--ink-muted);
  font-style: italic;
}

.code-block-pre .token.punctuation {
  color: var(--ink-soft);
}

.code-block-pre .token.property,
.code-block-pre .token.tag,
.code-block-pre .token.constant,
.code-block-pre .token.symbol,
.code-block-pre .token.deleted {
  color: #B85C0A;
}

.code-block-pre .token.boolean,
.code-block-pre .token.number {
  color: #8A4408;
}

.code-block-pre .token.selector,
.code-block-pre .token.attr-name,
.code-block-pre .token.string,
.code-block-pre .token.char,
.code-block-pre .token.builtin,
.code-block-pre .token.inserted {
  color: #5F6E3F;
}

.code-block-pre .token.operator,
.code-block-pre .token.entity,
.code-block-pre .token.url,
.code-block-pre .token.variable {
  color: var(--ink-soft);
}

.code-block-pre .token.atrule,
.code-block-pre .token.attr-value,
.code-block-pre .token.function,
.code-block-pre .token.class-name {
  color: #B85C0A;
}

.code-block-pre .token.keyword {
  color: var(--ink);
  font-weight: 600;
}

.code-block-pre .token.regex,
.code-block-pre .token.important {
  color: #8A4408;
}

.code-block-pre .token.namespace {
  opacity: 0.7;
}

/* ── ASCII diagram block ───────────────────────────────────────────────── */

.diagram-block {
  margin: 32px 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg-section, #F3F1ED);
  overflow: hidden;
}

.diagram-block-pre {
  margin: 0;
  padding: 24px 28px;
  overflow-x: auto;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  white-space: pre;
}

.diagram-block-caption {
  padding: 10px 20px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 12px;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
}

@media (max-width: 768px) {
  .code-block-pre, .diagram-block-pre {
    font-size: 11.5px;
  }
}

/* ── Krasper Charts (kc-*) — design-fit replacements for ASCII diagrams ── */

.kc-chart {
  margin: 40px 0;
  padding: 32px 28px 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: #FBF9F4;
  overflow: hidden;
}

.kc-chart figcaption,
.kc-chart-caption {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 12px;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
}

/* nodes */

.kc-node {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 8px);
  background: #fff;
  padding: 14px 18px;
  min-width: 0;
}

.kc-node-eyebrow {
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.kc-node-title {
  font-family: 'DM Sans', 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}

.kc-node-body {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.kc-node-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.kc-node-list li::before {
  content: "·";
  color: var(--amber);
  margin-inline-end: 8px;
  font-weight: 700;
}

.kc-node--accent {
  background: var(--ink, #111016);
  border-color: var(--ink, #111016);
  color: #fff;
  box-shadow: 0 8px 24px -12px rgba(184, 92, 10, 0.4);
}

.kc-node--accent .kc-node-title {
  color: #fff;
}

.kc-node--accent .kc-node-body,
.kc-node--accent .kc-node-list {
  color: rgba(255,255,255,0.78);
}

.kc-node--accent .kc-node-eyebrow {
  color: var(--amber);
}

.kc-node--accent .kc-node-list li::before {
  color: var(--amber);
}

/* ── Chart 1: architecture flow ── */

.kc-arch {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.kc-arch-row {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr auto 1fr;
  align-items: stretch;
  gap: 16px;
}

.kc-arch-arrow {
  align-self: center;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  color: var(--amber);
  font-size: 22px;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.kc-arch-down {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  margin-top: 4px;
}

.kc-arch-down-stem {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kc-arch-down-line {
  width: 2px;
  height: 36px;
  background: var(--amber);
}

.kc-arch-down-arrow {
  color: var(--amber);
  line-height: 0;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 20px;
  margin-top: -2px;
}

.kc-arch-audit {
  grid-column: 2;
  margin-top: 8px;
}

@media (max-width: 720px) {
  .kc-arch-row {
    grid-template-columns: 1fr;
  }

  .kc-arch-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }

  .kc-arch-down,
    .kc-arch-audit {
    grid-template-columns: 1fr;
  }

  .kc-arch-down-stem {
    grid-column: 1;
  }

  .kc-arch-audit {
    grid-column: 1;
  }
}

/* ── Chart 2: sequence diagram (SVG-only, container styling) ── */

.kc-seq {
  display: flex;
  justify-content: center;
}

.kc-seq svg {
  width: 100%;
  max-width: 760px;
  height: auto;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
}

.kc-seq .kc-seq-lane-label {
  font-family: 'DM Sans', 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 600;
  font-size: 13px;
  fill: var(--ink);
}

.kc-seq .kc-seq-lifeline {
  stroke: var(--rule-strong, #d7d2c4);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.kc-seq .kc-seq-arrow    {
  stroke: var(--ink, #111016);
  stroke-width: 1.5;
  fill: none;
}

.kc-seq .kc-seq-arrow-accent {
  stroke: var(--amber);
  stroke-width: 1.5;
  fill: none;
}

.kc-seq .kc-seq-msg-text {
  font-size: 11px;
  fill: var(--ink-soft);
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
}

.kc-seq .kc-seq-step-box {
  fill: #fff;
  stroke: var(--amber);
  stroke-width: 1;
}

.kc-seq .kc-seq-step-text {
  font-size: 11px;
  fill: var(--ink);
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
}

.kc-seq .kc-seq-step-title {
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--amber);
  font-family: 'DM Sans', 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
}

.kc-seq .kc-seq-divider-text {
  font-size: 10.5px;
  fill: var(--ink-muted);
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-style: italic;
}

/* ── Chart 3: decision tree (SVG) ── */

.kc-tree {
  display: flex;
  justify-content: center;
}

.kc-tree svg {
  width: 100%;
  max-width: 820px;
  height: auto;
}

.kc-tree .kc-tree-line {
  stroke: var(--rule-strong, #c9c4b6);
  stroke-width: 1.5;
  fill: none;
}

.kc-tree .kc-tree-line-accent {
  stroke: var(--amber);
  stroke-width: 1.5;
  fill: none;
}

.kc-tree .kc-tree-node {
  fill: #fff;
  stroke: var(--rule);
  stroke-width: 1;
}

.kc-tree .kc-tree-node-q {
  fill: #FBF9F4;
  stroke: var(--ink);
  stroke-width: 1.25;
}

.kc-tree .kc-tree-node-stop {
  fill: #fff;
  stroke: #B0533A;
  stroke-width: 1.5;
}

.kc-tree .kc-tree-node-high {
  fill: var(--ink, #111016);
  stroke: var(--ink, #111016);
}

.kc-tree .kc-tree-node-limited {
  fill: #fff;
  stroke: var(--amber);
  stroke-width: 1.5;
}

.kc-tree .kc-tree-node-minimal {
  fill: #fff;
  stroke: var(--rule-strong, #c9c4b6);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.kc-tree .kc-tree-text {
  font-family: 'DM Sans', 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 12px;
  fill: var(--ink);
}

.kc-tree .kc-tree-text-q {
  font-weight: 500;
}

.kc-tree .kc-tree-text-high {
  fill: #fff;
  font-weight: 600;
}

.kc-tree .kc-tree-text-stop {
  fill: #B0533A;
  font-weight: 600;
}

.kc-tree .kc-tree-text-limited {
  fill: var(--amber);
  font-weight: 600;
}

.kc-tree .kc-tree-text-muted {
  fill: var(--ink-muted);
  font-size: 11px;
}

.kc-tree .kc-tree-edge-label {
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  fill: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Chart 4: phased plan (3 cards) ── */

.kc-plan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.kc-plan-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 8px);
  background: #fff;
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.kc-plan-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--amber);
  border-radius: 8px 8px 0 0;
}

.kc-plan-num {
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 6px;
}

.kc-plan-range {
  font-family: 'Cormorant', 'Amiri', serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.kc-plan-title {
  font-family: 'DM Sans', 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kc-plan-list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  flex: 1;
}

.kc-plan-list li {
  padding-inline-start: 16px;
  position: relative;
  margin-bottom: 6px;
}

.kc-plan-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  width: 6px;
  height: 1.5px;
  background: var(--amber);
}

.kc-plan-output {
  margin: 0;
  padding: 10px 12px;
  background: #FBF9F4;
  border-inline-start: 2px solid var(--amber);
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.5;
  font-family: 'DM Mono', 'IBM Plex Mono', monospace;
}

.kc-plan-output-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  font-size: 10px;
  margin-inline-end: 6px;
}

@media (max-width: 860px) {
  .kc-plan {
    grid-template-columns: 1fr;
  }
}

/* ─── MOBILE RESPONSIVE OVERRIDES (catch-all for inline styles) ─── */

/* Inline grid-template-columns patterns get collapsed to single column on tablet/mobile */

@media (max-width: 1024px) {
  [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 480px"],
    [style*="grid-template-columns: 1fr 480px"],
    [style*="grid-template-columns:1fr 420px"],
    [style*="grid-template-columns: 1fr 420px"],
    [style*="grid-template-columns:480px 1fr"],
    [style*="grid-template-columns: 480px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    align-items: start !important;
  }
}

@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }

  /* Big inline gaps eat viewport */

  [style*="gap:80px"],
    [style*="gap: 80px"],
    [style*="gap:72px"],
    [style*="gap: 72px"],
    [style*="gap:64px"],
    [style*="gap: 64px"] {
    gap: 32px !important;
  }

  /* Section padding hero containers */

  [style*="padding:72px 48px"],
    [style*="padding: 72px 48px"] {
    padding: 40px 20px !important;
  }

  /* Card image negative-margin bleed */

  .product-card-image[style*="margin:-40px"],
    .product-card-image[style*="margin: -40px"] {
    margin: -24px -24px 20px !important;
  }

  /* Inline-flex hero/feature rows */

  .feature-block[style*="grid-template-columns"],
    .contact-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  /* Inline form/card padding shrink */

  [style*="padding:40px"]:not(.product-card-image) {
    padding: 24px !important;
  }

  [style*="padding:48px"] {
    padding: 28px !important;
  }

  /* Headline font shrink for inline display utilities */

  h1[style*="font-size:72px"],
    h1[style*="font-size: 72px"],
    h2[style*="font-size:64px"],
    h2[style*="font-size: 64px"] {
    font-size: 40px !important;
    line-height: 1.1 !important;
  }
}

/* Tables: enforce horizontal scroll wrapper */

@media (max-width: 768px) {
  .comparison-table,
    .table-responsive table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* The category checkboxes need display:flex when shown, and the banner markup
   used to carry that as an inline style. An inline declaration outranks the UA
   sheet's [hidden] { display: none }, so the panel stayed visible and the
   Customize button appeared to do nothing. Driving display from here instead
   lets the hidden attribute win, and keeps the attribute as the single source
   of truth for both the layout and assistive technology. */

#krasper-cookie-options:not([hidden]) {
  display: flex;
}

#krasper-cookie-options[hidden] {
  display: none;
}

/* Cookie banner mobile stack */

@media (max-width: 560px) {
  #krasper-cookie-banner > div {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #krasper-cookie-banner > div > div {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  #krasper-cookie-banner button {
    width: 100% !important;
  }
}

/* Blog index/post container shrink */

@media (max-width: 640px) {
  .blog-post-container,
    .blog-index-container {
    padding-inline-start: 20px !important;
    padding-inline-end: 20px !important;
  }
}

/* Inline flex rows used as contact-info blocks: stack icon above text */

@media (max-width: 480px) {
  .contact-info-row[style*="display:flex"],
    .contact-info-row[style*="display: flex"] {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* Blog search form: full-width controls on mobile */

@media (max-width: 480px) {
  .blog-search-bar,
    form[role="search"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .blog-search-bar input,
    .blog-search-bar button,
    form[role="search"] input,
    form[role="search"] button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Touch-target minimums on touch viewports (WCAG 2.5.8) */

@media (max-width: 1024px) {
  .lang-switcher a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .code-block-copy {
    min-height: 40px;
    padding: 8px 14px;
  }
}

/* Respect prefers-reduced-motion (WCAG 2.3.3 / 2.2.2 — kills smooth-scroll,
   infinite pulse-dot, fade-in transforms, count-up easing for affected users) */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Prevent horizontal scroll caused by overflowing children */

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ══════════════════════════════════════════════════════════════════
   RIGHT-TO-LEFT (Arabic)

   Layout direction comes from the logical properties used throughout
   this file (margin-inline-*, padding-inline-*, border-inline-*,
   inset-inline-*), which flip on their own. What remains here is the
   handful of cases CSS cannot flip by itself: transforms, glyph-based
   arrows, and Arabic typographic conventions.
   ══════════════════════════════════════════════════════════════════ */

/* Mobile drawer slides in from the leading edge, which is the left in RTL. */

[dir="rtl"] .nav-mobile-drawer {
  transform: translateX(-100%);
}

[dir="rtl"] .nav-mobile-drawer.open {
  transform: translateX(0);
}

/* Directional arrow icons: mirror the glyph, keep the stroke weight. */

[dir="rtl"] .product-link svg,
[dir="rtl"] .btn svg,
[dir="rtl"] .breadcrumb svg {
  transform: scaleX(-1);
}

/* Diagonal CTA hatching reads as a mirrored texture rather than a repeat. */

[dir="rtl"] .cta-bg-line {
  background: repeating-linear-gradient(45deg,
        transparent, transparent 40px,
        rgba(255,255,255,0.015) 40px, rgba(255,255,255,0.015) 80px);
}

/* The process connector fills toward the leading edge. */

[dir="rtl"] .process-connector-fill {
  inset-inline-start: auto;
  inset-inline-end: calc(12.5% + 28px);
}

/* Numbers, code, product names and mail addresses stay left-to-right
   inside Arabic prose. Without this, a version string like "v2.1" or an
   IP address renders with its parts reversed. */

[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .code-block-pre,
[dir="rtl"] .stat-num,
[dir="rtl"] .raigate-stat-num,
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* ─── Arabic typography ───
   Arabic has no case, so uppercase transforms are inert, and letter-spacing
   breaks the cursive joins between letters. Both are stripped. Naskh needs
   more leading than Latin at the same size, and reads a touch larger. */

html[lang="ar"] {
  --arabic-scale: 1.06;
}

html[lang="ar"] body {
  font-size: calc(15px * var(--arabic-scale));
  line-height: 1.9;
}

html[lang="ar"] .eyebrow,
html[lang="ar"] .section-label,
html[lang="ar"] .nav-link,
html[lang="ar"] .btn,
html[lang="ar"] .stat-label,
html[lang="ar"] .raigate-stat-label,
html[lang="ar"] .product-tag,
html[lang="ar"] .lang-switcher a {
  text-transform: none;
  letter-spacing: 0;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .section-title,
html[lang="ar"] .hero-title,
html[lang="ar"] .raigate-hero-title {
  letter-spacing: 0;
  line-height: 1.35;
  font-weight: 400;
}

html[lang="ar"] .prose p,
html[lang="ar"] .prose li {
  line-height: 2;
}

/* Latin brand words inside Arabic headings keep their own face and tracking. */

html[lang="ar"] .brand-latin {
  font-family: 'Cormorant', serif;
  letter-spacing: -0.01em;
}

/* ─── Russian typography ───
   Cyrillic in Manrope runs slightly wider than DM Sans Latin; ease the
   tracking on the mono labels so they stop colliding at small sizes. */

html[lang="ru"] .eyebrow,
html[lang="ru"] .section-label,
html[lang="ru"] .stat-label,
html[lang="ru"] .raigate-stat-label {
  letter-spacing: 0.08em;
}

/* ─── CASE STUDIES ─── */

.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}

.case-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.2s;
}

.case-card:hover {
  box-shadow: 0 12px 32px rgba(17,16,22,0.08);
}

.case-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.case-card-year {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--ink-muted);
}

.case-card-title {
  font-family: 'Cormorant', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.case-card-title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s;
}

.case-card-title a:hover {
  color: var(--amber);
}

.case-card-intro {
  font-size: 14px;
  color: var(--ink-soft);
}

.case-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.case-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 3px 8px;
}

.case-card-link {
  font-size: 14px;
  color: var(--amber);
  text-decoration: none;
}

.case-card-link:hover {
  text-decoration: underline;
}

.case-empty {
  max-width: 620px;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  color: var(--ink-soft);
}

/* Facts read as a scannable row on desktop and stack on narrow screens. */

.case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 32px;
}

.case-facts dt {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.case-facts dd {
  font-size: 15px;
  color: var(--ink);
}

.case-facts dd a {
  color: var(--amber);
}

.case-body {
  max-width: 760px;
}

.case-section-title {
  font-family: 'Cormorant', serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 48px 0 16px;
}

.case-body > .case-section-title:first-child {
  margin-top: 0;
}

.case-reviewed {
  font-size: 13px;
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  .case-grid {
    grid-template-columns: 1fr;
  }

  .case-facts {
    gap: 20px;
  }
}

.home-proof-more {
  margin-top: 32px;
}

.hover\:bg-amber-mid:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(212 112 15 / var(--tw-bg-opacity, 1));
}

.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(17 16 22 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {
  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .lg\:text-\[12rem\] {
    font-size: 12rem;
  }
}