*, ::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, system-ui, -apple-system, 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: IBM Plex Mono, ui-monospace, 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;
}

:root {
  --portant-white: #ffffff;
  --portant-canvas: #f6f5f4;
  --portant-paper: #F0EFED;
  --portant-notebook: #EBE8E4;
  --portant-parchment: #e2dad2;
  --portant-dark-parchment: #c4b9ae;
  --portant-charred: #94908a;
  --portant-toasted: #777169;
  --portant-burnt: #4b4844;
  --portant-ash: #2a2826;
  --portant-charcoal: #1C1C1C;
  --portant-ink-black: #0c0c0c;
  --portant-lightblue: #91e6fe;
  --portant-teal: #40dffc;
  --portant-bright-blue: #0280ff;
  --portant-blue: #1875fb;
  --portant-bold-blue: #0044f1;
  --portant-navy: #022235;
  --portant-yellow: #ffaa00;
  --portant-mid-orange: #ff8550;
  --portant-light-orange: #ffe4d8;
  --portant-orange: #ff4800;
  --portant-red: #e40a13;
  --portant-light-red: #fee2e2;
  --portant-light-green: #dcfce7;
  /* Social-proof accent palette (see .testimonial-row-reference-style, .proof-bento__card) */
  --portant-ref-red: #e63312;
  --portant-ref-red-deep: #c2410c;
  --portant-ref-yellow-amber: #fa0;
  --portant-ref-yellow-highlight: #ffc940;
  --portant-ref-green: #1b6b4a;
  /* Warm brand gradient (used for btn-gradient, .card-gradient-border, .pill-gradient) */
  --gradient-warm: linear-gradient(35deg, #E9CEA0 0%, #FFAA00 50%, #FF4800 100%);
  /* Cool brand gradient (used for .text-gradient-cool, .btn-cta) */
  --gradient-cool: linear-gradient(90deg, #ffffff 0%, #40DFFC 40%, #1875FB 75%, #0038C6 100%);
  /* Faux-glass edge stroke. Reads as a fluid white highlight on translucent
       surfaces. To flip horizontally (e.g. to chain gradients across adjacent
       cards) override --gradient-glass-edge with the 225deg variant via the
       .surface-glass--flip-h utility — nested var() inside a custom property
       resolves at the defining element, so the override has to redeclare the
       full gradient, not just an inner angle. */
  --gradient-glass-edge: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(255, 255, 255, 0.20) 100%
    );
}

/* SVG anti-aliasing hints: improves sub-pixel rendering when SVGs scale to
     non-integer pixel sizes (very common in % / fr / vw containers). Applies
     to inline <svg> globally; the img[src$=".svg"] rule nudges the image
     decoder toward higher-quality scaling for SVGs used as <img>. */

svg {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

img[src$=".svg"] {
  image-rendering: -webkit-optimize-contrast;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

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

  .container {
    max-width: 640px;
  }
}

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

  .container {
    max-width: 768px;
  }
}

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

  .container {
    max-width: 1024px;
  }
}

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

  .container {
    max-width: 1280px;
  }
}

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

  .container {
    max-width: 1536px;
  }
}

.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}

.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}

.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}

.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}

.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}

.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}

.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}

.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}

.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}

.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}

.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}

.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}

.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}

.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}

.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}

.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}

.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}

.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}

.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}

.prose-stone {
  --tw-prose-body: #44403c;
  --tw-prose-headings: #1c1917;
  --tw-prose-lead: #57534e;
  --tw-prose-links: #1c1917;
  --tw-prose-bold: #1c1917;
  --tw-prose-counters: #78716c;
  --tw-prose-bullets: #d6d3d1;
  --tw-prose-hr: #e7e5e4;
  --tw-prose-quotes: #1c1917;
  --tw-prose-quote-borders: #e7e5e4;
  --tw-prose-captions: #78716c;
  --tw-prose-kbd: #1c1917;
  --tw-prose-kbd-shadows: rgb(28 25 23 / 10%);
  --tw-prose-code: #1c1917;
  --tw-prose-pre-code: #e7e5e4;
  --tw-prose-pre-bg: #292524;
  --tw-prose-th-borders: #d6d3d1;
  --tw-prose-td-borders: #e7e5e4;
  --tw-prose-invert-body: #d6d3d1;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #a8a29e;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #a8a29e;
  --tw-prose-invert-bullets: #57534e;
  --tw-prose-invert-hr: #44403c;
  --tw-prose-invert-quotes: #f5f5f4;
  --tw-prose-invert-quote-borders: #44403c;
  --tw-prose-invert-captions: #a8a29e;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d6d3d1;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #57534e;
  --tw-prose-invert-td-borders: #44403c;
}

/* ── Typography ─────────────────────────────────────────── */

/* Scale: 12 → 14 → 16 → 20 → 24 → 36 → 48 → 64 → 80     */

/* Headings — DM Sans, bold, tight tracking.
     Line-heights are unitless multipliers so they scale with font-size across breakpoints. */

.heading-monumental {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 2.75rem;
  /* 44px */
  font-weight: 600;
  letter-spacing: -0.05rem;
  line-height: 1.05;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .heading-monumental {
    font-size: 3.5rem;
  }

  /* 56px */
}

@media (min-width: 1024px) {
  .heading-monumental {
    font-size: 5rem;
    line-height: 1;
  }

  /* 80px */
}

.heading-hero {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 2.5rem;
  /* 40px */
  font-weight: 600;
  letter-spacing: -0.05rem;
  line-height: 1.1;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .heading-hero {
    font-size: 3rem;
  }

  /* 48px */
}

@media (min-width: 1024px) {
  .heading-hero {
    font-size: 4rem;
    line-height: 1;
  }

  /* 64px */
}

.heading-display {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 2rem;
  /* 32px */
  font-weight: 500;
  letter-spacing: -0.04rem;
  line-height: 1.125;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .heading-display {
    font-size: 2.25rem;
  }

  /* 36px */
}

@media (min-width: 1024px) {
  .heading-display {
    font-size: 3rem;
    line-height: 1.1;
  }

  /* 48px */
}

.heading-section {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 1.625rem;
  /* 26px */
  font-weight: 500;
  letter-spacing: -0.03rem;
  line-height: 1.2;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .heading-section {
    font-size: 2rem;
  }

  /* 32px */
}

@media (min-width: 1024px) {
  .heading-section {
    font-size: 2.25rem;
  }

  /* 36px */
}

.heading-block {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 1.375rem;
  /* 22px */
  font-weight: 500;
  letter-spacing: -0.02rem;
  line-height: 1.25;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .heading-block {
    font-size: 1.5rem;
  }

  /* 24px */
}

@media (min-width: 1024px) {
  .heading-block {
    font-size: 1.75rem;
  }

  /* 28px */
}

/* Body — DM Sans, regular. Unitless line-height for breakpoint-safe scaling. */

.body {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
  text-wrap: pretty;
}

.body-lg {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 1.125rem;
  /* 18px */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .body-lg {
    font-size: 1.25rem;
    line-height: 1.6;
  }

  /* 20px */
}

.body-sm {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Inline tag pill — orange text with a light-orange backdrop via ::before */

.hs-tag {
  position: relative;
  isolation: isolate;
  color: #ff4800;
  font-weight: 500;
}

.hs-tag::before {
  content: '';
  position: absolute;
  inset: -1px -2px;
  background: #ffe4d8;
  border-radius: 0.375rem;
  z-index: -1;
  opacity: 0.6;
}

/* UI */

.caption {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.015rem;
  line-height: 1.125rem;
}

/* Eyebrow — IBM Plex Mono (the only mono role) */

.eyebrow {
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  line-height: 1rem;
}

.kicker {
  /* alias for .eyebrow — use .eyebrow in new code */
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  line-height: 1rem;
}

.\!label {
  font-family: IBM Plex Mono, ui-monospace, monospace !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1rem !important;
  text-transform: uppercase !important;
  line-height: 1rem !important;
}

.label {
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  line-height: 1rem;
}

/* ── Buttons ────────────────────────────────────────────── */

.\!btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  text-decoration: none !important;
  border-radius: 0.5rem !important;
  transition: background-color 0.15s ease, background-image 0.2s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease, background-image 0.2s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn-lg {
  height: 3rem;
  padding: 0.625rem 1.5rem;
  font-size: 1rem;
}

.btn-md {
  height: 2.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.9375rem;
}

.btn-sm {
  height: 2.375rem;
  padding: 0.375rem 1rem;
  font-size: 1rem;
}

.btn-xl {
  height: 3.5rem;
  padding: 0.375rem 2.5rem;
  font-size: 1.125rem;
}

.btn-primary {
  color: #fff;
  background-color: #0c0c0c;
  border: 2px solid rgba(12, 12, 12, 0.2);
}

.btn-primary:hover {
  background-image: radial-gradient(at 75% 0%, #4b4844 0%, #0c0c0c 70%);
  border-color: rgba(0, 0, 0, 0.25);
}

.btn-accent {
  color: #fff;
  background-color: #ff4800;
  border: 2px solid transparent;
}

.btn-accent:hover {
  background-color: color-mix(in srgb, #ff4800 85%, black);
}

.btn-secondary {
  color: #0c0c0c;
  background-color: #fff;
  border: 1px solid rgba(12, 12, 12, 0.1);
}

.btn-secondary:hover {
  border-color: rgba(12, 12, 12, 0.2);
}

/* Dark-mode ghost. White text + 1px --gradient-glass-edge stroke, no fill.
     Uses ::before mask technique (same as .surface-glass--faint) so the
     gradient paints only the ring without bleeding into a transparent inner.
     Hover adds a very light white fill (shows through the masked-out pseudo
     interior). Use on ink-black surfaces. */

.btn-ghost--dark {
  position: relative;
  color: #fff;
  background: transparent;
  border: none;
}

.btn-ghost--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient-glass-edge);
  -webkit-mask:
      linear-gradient(#000, #000) content-box,
      linear-gradient(#000, #000);
  mask:
      linear-gradient(#000, #000) content-box,
      linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.btn-ghost--dark:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

.btn-gradient {
  background: linear-gradient(35deg, #E9CEA0 0%, #FFAA00 50%, #FF4800 100%);
  color: #0c0c0c;
  font-weight: 600;
  border: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.btn-gradient:hover {
  background: linear-gradient(35deg, #E9CEA0 0%, #F0A200 50%, #F24400 100%);
  color: #0c0c0c;
  border: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.btn-cta {
  color: #fff;
  background-image: radial-gradient(
      120% 180% at 0% 100%,
      #40DFFC 0%,
      #2CAAFC 38%,
      #1875FB 75%,
      #0C56E0 88%,
      #0038C6 100%
    );
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.06);
  transition: filter 0.15s ease;
}

.btn-cta:hover {
  filter: brightness(1.08);
}

/* Cool brand gradient as text fill. Reusable on any inline element (eyebrow, heading span, etc.). */

.text-gradient-cool {
  background-image: var(--gradient-cool);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Dark variant of the site header. Charcoal-to-ink gradient with a hairline bottom border.
     Transition supports the [data-hide-on-scroll].is-tucked behaviour driven by main.js. */

.site-header-dark {
  background: linear-gradient(180deg, var(--portant-charcoal) 0%, var(--portant-ink-black) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: transform 0.3s ease;
}

.site-header-dark nav a {
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  transition: opacity 0.15s ease;
}

.site-header-dark nav a:hover {
  opacity: 0.7;
}

/* Dark footer: mirror of .site-header-dark, applied as a modifier on top
     of the global .site-footer structure so the layout (inner padding,
     bottom row, legal links etc.) is shared with the marketing site. */

.site-footer-dark {
  background: linear-gradient(180deg, var(--portant-ink-black) 0%, var(--portant-charcoal) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Override the light .site-footer-legal-links a:hover (-> ink-black). */

.site-footer-dark .site-footer-legal-links a:hover {
  color: #fff;
  opacity: 0.7;
}

/* Hide the parchment hairline; the wrapper border-top already supplies the top edge. */

.site-footer-dark .site-footer-inner::before {
  display: none;
}

/* Homepage: light pre-footer social proof (above global CTA) */

/* ── Icon boxes (duotone) ──────────────────────────────── */

/* Border-only container + two-tone Phosphor icon.
     Apply variant class to the container div; descendant
     selectors colour the icon's stroke and fill paths.      */

.icon-box-orange svg path[opacity] {
  fill: var(--portant-light-orange);
  opacity: 1;
}

.icon-box-orange svg path:not([opacity]) {
  fill: var(--portant-orange);
}

.icon-box-positive svg path[opacity] {
  fill: var(--portant-light-orange);
  opacity: 1;
}

.icon-box-positive svg path:not([opacity]) {
  fill: var(--portant-orange);
}

.icon-box-negative svg path[opacity] {
  fill: var(--portant-parchment);
  opacity: 1;
}

.icon-box-negative svg path:not([opacity]) {
  fill: var(--portant-burnt);
}

/* ── Cards ──────────────────────────────────────────────── */

.\!card {
  border-radius: 0.5rem !important;
  border: 1px solid #e2dad2 !important;
  background-color: #fff !important;
}

.card {
  border-radius: 0.5rem;
  border: 1px solid #e2dad2;
  background-color: #fff;
}

.card-inset {
  background-color: #EBE8E4;
}

.card-lg {
  border-radius: 1.75rem;
}

/* Gradient outline card. Self-contained: sets radius + bg + border so it
     does not need to compose with .card / .card-inset (which would conflict
     with the layered background-image). */

.card-gradient-border {
  border-radius: 0.5rem;
  border: 2px solid transparent;
  background:
      linear-gradient(#fff, #fff) padding-box,
      var(--gradient-warm) border-box;
}

/* Cool variant of .card-gradient-border: charcoal fill + cool wash + cool
     gradient stroke. For dark-mode emphasis cards (e.g. Pricing Grow tier).
     The cool wash on padding-box mirrors the .feature-step.surface-charcoal
     ::before treatment but at ~2× intensity (0.08 alpha vs the feature
     blocks' compound 0.04) so the emphasis card pops slightly more without
     departing from the brand wash. */

.card-gradient-border--cool {
  border-radius: 1rem;
  border: 2px solid transparent;
  background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(64, 223, 252, 0.08) 40%,
        rgba(24, 117, 251, 0.08) 75%,
        rgba(0, 56, 198, 0.08) 100%
      ) padding-box,
      linear-gradient(var(--portant-charcoal), var(--portant-charcoal)) padding-box,
      var(--gradient-cool) border-box;
}

/* Standalone cool wash. Same tint layer as .card-gradient-border--cool's
     padding-box (white→cyan→blue→deep-blue at 0.08 alpha) without the border
     stroke or fixed border-radius, so it can be applied to non-card surfaces
     (e.g. a single column of a comparison table). */

.bg-cool-wash {
  background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(64, 223, 252, 0.06) 40%,
      rgba(24, 117, 251, 0.08) 85%,
      rgba(0, 56, 198, 0.08) 100%
    );
}

/* Faux-glass surface family. Mirrors .card-gradient-border / .pill-gradient
     for the cool/dark side of the brand. Both utilities use the same dual-
     background trick (padding-box for the inner fill, border-box for the
     gradient stroke). Compose on any element that needs a translucent card,
     column, badge, or modal sitting on a dark surface. */

.surface-glass.is-active,
  .surface-glass--bright {
  background:
      linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10)) padding-box,
      var(--gradient-glass-edge) border-box;
}

/* Solid charcoal surface with the gradient-glass-edge stroke. The interior
     fill is the top padding-box layer; the gradient stroke is the border-box
     layer, which is translucent and composites over the host's background-
     color in the 1px ring area. Composes with .surface-glass--flip-h to
     mirror the stroke direction. */

.surface-charcoal {
  border: 1px solid transparent;
  background:
      linear-gradient(var(--portant-charcoal), var(--portant-charcoal)) padding-box,
      var(--gradient-glass-edge) border-box;
}

/* When .surface-charcoal composes on .feature-step, drop the warm
     gradient-glass-edge stroke entirely — the cool ::after ring (defined
     below) is the only border treatment we want on these cards. Removing
     the 1px transparent border also lets the cool ring sit flush on the
     outer corner so its arc matches the card's border-radius exactly
     (otherwise inset:0 + border-radius:inherit traces a slightly tighter
     curve than the parent, reading as a double-border with mismatched
     rounding). Specificity 0,2,0 beats .feature-step's 0,1,0. */

.feature-step.surface-charcoal {
  border: 0;
  background: var(--portant-charcoal);
}

/* Faint variant: minimal fill, clean gradient ring. Uses the mask technique
     (same as .surface-glass-cool) instead of dual-background so the stroke
     stays at full strength on the ring without bleeding into the inner area —
     reads as "just the border" even though there's a 2% fill underneath. */

.surface-glass--faint {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
}

.surface-glass--faint::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient-glass-edge);
  -webkit-mask:
      linear-gradient(#000, #000) content-box,
      linear-gradient(#000, #000);
  mask:
      linear-gradient(#000, #000) content-box,
      linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Horizontally flip the glass-edge gradient (mirror across the vertical
     axis). Compose alongside any .surface-glass* class to chain gradient
     directions across adjacent surfaces. Redeclares the full gradient because
     CSS resolves nested var() at the defining element, not at use. */

.surface-glass--flip-h {
  --gradient-glass-edge: linear-gradient(
      225deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(255, 255, 255, 0.20) 100%
    );
}

/* Cool variant uses a pseudo-element + mask for the gradient stroke so the
     stroke paints only the ring (not the whole area). This is required when
     the inner fill is translucent — the dual-background trick used by
     .card-gradient-border and .surface-glass assumes an opaque inner that
     would mask the underlying stroke layer; here, a 20%-alpha inner can't,
     so the stroke would bleed through and read as full-opacity. */

.surface-glass-cool {
  position: relative;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(64, 223, 252, 0.20) 40%,
      rgba(24, 117, 251, 0.20) 75%,
      rgba(0, 56, 198, 0.20) 100%
    );
}

.surface-glass-cool::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: var(--gradient-cool);
  -webkit-mask:
      linear-gradient(#000, #000) content-box,
      linear-gradient(#000, #000);
  mask:
      linear-gradient(#000, #000) content-box,
      linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── ROI calculator preset chip ─────────────────────────── */

.roi-preset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid #e2dad2;
  background-color: #fff;
  padding: 0.625rem 0.875rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.roi-preset:hover {
  border-color: #1875FB;
  background-color: rgb(24 117 251 / 0.04);
}

.roi-preset:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(24 117 251 / 0.25);
}

.roi-preset[aria-pressed='true'] {
  border-color: #1875FB;
  background-color: rgb(24 117 251 / 0.08);
  box-shadow: inset 0 0 0 1px #1875FB;
}

/* ── ROI calculator slider ──────────────────────────────── */

.roi-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  height: 0.5rem;
  background: #EBE8E4;
  border-radius: 9999px;
  outline: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: #1875FB;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgb(12 12 12 / 0.15), 0 0 0 1px rgb(24 117 251 / 0.2);
  cursor: grab;
  -webkit-transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.roi-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgb(12 12 12 / 0.18), 0 0 0 4px rgb(24 117 251 / 0.18);
}

.roi-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}

.roi-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 2px 6px rgb(12 12 12 / 0.18), 0 0 0 4px rgb(24 117 251 / 0.3);
}

.roi-slider::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: #1875FB;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgb(12 12 12 / 0.15), 0 0 0 1px rgb(24 117 251 / 0.2);
  cursor: grab;
  -moz-transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.roi-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
}

.roi-slider::-moz-range-track {
  background: transparent;
  height: 0.5rem;
  border-radius: 9999px;
}

/* ── ROI calculator value chip (slider readout) ────────── */

.roi-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  border-radius: 0.375rem;
  background-color: #EBE8E4;
  padding: 0.25rem 0.625rem;
  font-weight: 700;
  color: #0c0c0c;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.roi-chip-wide {
  min-width: 3.25rem;
}

/* ── Links ──────────────────────────────────────────────── */

.link-accent {
  color: #ff4800;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.link-accent:hover {
  color: color-mix(in srgb, #ff4800 85%, black);
}

/* ── Pills ──────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid rgba(12, 12, 12, 0.1);
  background-color: #EBE8E4;
  font-weight: 600;
  white-space: nowrap;
  font-family: IBM Plex Mono, ui-monospace, monospace;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: #777169;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* ── Layout ─────────────────────────────────────────────── */

.section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 640px) {
  .section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.container-site {
  width: 100%;
  max-width: 86rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-site {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-site {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.container-narrow {
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-narrow {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-narrow {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ── Utility patterns ───────────────────────────────────── */

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.scroll-mask {
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* ── Modules ────────────────────────────────────────────── */

/* Hero — full-width opening section with larger vertical rhythm */

.module-hero {
  position: relative;
  overflow: hidden;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 640px) {
  .module-hero {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (min-width: 1024px) {
  .module-hero {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.module-hero--split .module-hero__grid {
  display: grid;
  align-items: center;
  gap: 3.5rem;
}

@media (min-width: 1024px) {
  .module-hero--split .module-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

/* Bento cards with graphic above text — tighter top padding on the text area */

.aspect-video + div {
  padding-top: 1rem;
}

@media (min-width: 640px) {
  .aspect-video + div {
    padding-top: 1.25rem;
  }
}

/* Feature row — two-column split with optional order flip */

.module-feature-row__grid {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .module-feature-row__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.module-feature-row--reversed .module-feature-row__grid > :first-child {
  order: 2;
}

/* Homepage — alternating 50/50 feature rows */

.feature-step {
  /* Mobile: match the page-wide card gap (18px). At sm+ restore breathing room. */
  margin-top: 1.125rem;
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
}

@media (min-width: 640px) {
  .feature-step {
    margin-top: 5rem;
    border-radius: 1.25rem;
  }
}

/* First card: rely on the intro paragraph's mb-14 for heading-to-card spacing on mobile.
     At sm+ add explicit margin-top so the card sits comfortably below the heading. */

.feature-step:first-of-type {
  margin-top: 0;
}

@media (min-width: 640px) {
  .feature-step:first-of-type {
    margin-top: 4rem;
  }
}

@media (min-width: 1024px) {
  .feature-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .feature-step:nth-child(even) .feature-step__media {
    order: -1;
  }
}

.feature-step__text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Tight bottom on mobile — media butts directly against text with no gap. */
  padding: 1.5rem 1.5rem 1rem;
}

@media (min-width: 640px) {
  .feature-step__text {
    padding: 3rem 2.5rem;
  }
}

@media (min-width: 1024px) {
  .feature-step__text {
    padding: 5rem;
    gap: 2rem;
  }
}

.feature-step__media {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mobile: image runs to card edges. Inset returns at sm. */
  padding: 0;
  min-width: 0;
}

@media (min-width: 640px) {
  .feature-step__media {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .feature-step__media {
    padding: 4rem;
  }

  /* Flush the image edge closest to the text column */

  .feature-step:nth-child(odd) .feature-step__media {
    padding-left: 0;
  }

  .feature-step:nth-child(even) .feature-step__media {
    padding-right: 0;
  }
}

.feature-step__media-inner {
  position: relative;
  background-color: rgba(255, 255, 255, 0.04);
  /* Mobile: no border or radius; the parent card's overflow:hidden + radius does the clipping. */
  border: 0;
  border-radius: 0;
  width: 100%;
  /* Hug the square 1080×1080 feature SVGs instead of letterboxing inside a fixed height. */
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (min-width: 640px) {
  /* At sm+ the inner sits inset from the card edge: 2% white fill +
       gradient-glass ring. Uses the mask technique (same as
       .surface-glass--faint) instead of the dual-background trick because
       a translucent inner would let the border-box stroke bleed through. */

  .feature-step__media-inner {
    border-radius: 1rem;
  }

  .feature-step__media-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--gradient-glass-edge);
    -webkit-mask:
        linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
    mask:
        linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}

.feature-step__title {
  margin: 0;
}

/* Card body copy — matches .body-lg sizing for readability inside the wide feature cards. */

.feature-step__body {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 1.125rem;
  /* 18px */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .feature-step__body {
    font-size: 1.25rem;
    /* 20px */
    line-height: 1.6;
  }
}

/* Contrast tagline — sits directly under body copy, filled with the cool
     white→blue brand gradient. Spacing handled by .feature-step__text's flex gap. */

.feature-step__contrast {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 1.125rem;
  /* 18px */
  font-weight: 500;
  line-height: 1.55;
  text-wrap: pretty;
  background-image: var(--gradient-cool);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (min-width: 1024px) {
  .feature-step__contrast {
    font-size: 1.25rem;
    /* 20px */
    line-height: 1.6;
  }
}

/* Static "halfway" cool-gradient wash on dark feature cards.
     Scoped to .surface-charcoal so light-themed .feature-step elsewhere on
     the site are unaffected. Two pseudos mirror the .why-card rig but at
     fixed sub-1 opacities (no scroll animation) so the card reads as
     "mostly greyscale with cool pulling through". Independently controlled
     so the stroke can carry more of the cool than the interior fill.
     inset:0 keeps the pseudos inside the parent's padding-box (respects
     overflow:hidden); the parent's .surface-charcoal gradient-glass stroke
     still paints on the outermost 1px, with the cool ring sitting just
     inside it — layered rather than replacing it. */

.feature-step.surface-charcoal {
  position: relative;
  isolation: isolate;
}

.feature-step.surface-charcoal::before,
  .feature-step.surface-charcoal::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.feature-step.surface-charcoal::before {
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(64, 223, 252, 0.20) 40%,
      rgba(24, 117, 251, 0.20) 75%,
      rgba(0, 56, 198, 0.20) 100%
    );
  opacity: 0.2;
  z-index: -1;
}

.feature-step.surface-charcoal::after {
  padding: 1px;
  background: var(--gradient-cool);
  -webkit-mask:
      linear-gradient(#000, #000) content-box,
      linear-gradient(#000, #000);
  mask:
      linear-gradient(#000, #000) content-box,
      linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.4;
}

/* Compact social proof — flush to bottom of text column.
     Hidden on mobile to reduce clutter; testimonials live in the dedicated proof sections below. */

.feature-step__proof {
  display: none;
}

@media (min-width: 640px) {
  .feature-step__proof {
    margin-top: auto;
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, #0c0c0c 10%, transparent);
  }
}

.feature-step__proof-card {
  position: relative;
  flex-shrink: 0;
  width: 3.5rem;
  height: 5.75rem;
  border-radius: 0.625rem;
  overflow: hidden;
}

.feature-step__proof-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

/* CTA band — dark, narrow, centered call-to-action strip */

/* Logo bar — masked horizontal marquee of partner/customer logos */

.module-logo-bar__track {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* FAQ — narrow-column accordion */

.module-faq {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #f6f5f4;
}

@media (min-width: 640px) {
  .module-faq {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.module-faq__list {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Prose — narrow-column long-form content */

/* ── Testimonial masonry ─────────────────────────────────── */

.testimonial-masonry {
  -moz-columns: 1;
       columns: 1;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

@media (min-width: 640px) {
  .testimonial-masonry {
    -moz-columns: 2;
         columns: 2;
  }
}

@media (min-width: 1024px) {
  .testimonial-masonry {
    -moz-columns: 4;
         columns: 4;
  }
}

.testimonial-masonry blockquote {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin-bottom: 1rem;
  display: inline-block;
  width: 100%;
}

.testimonial-masonry blockquote > footer {
  padding-top: 1.25rem;
}

.testimonial-masonry-fade {
  position: relative;
  /* Tall enough to show ~2 stacked single-column cards before the fade. */
  max-height: 720px;
  overflow: hidden;
}

@media (min-width: 640px) {
  .testimonial-masonry-fade {
    max-height: 620px;
  }
}

@media (min-width: 1024px) {
  .testimonial-masonry-fade {
    max-height: 720px;
  }
}

.testimonial-masonry-fade::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent, var(--portant-canvas));
  pointer-events: none;
  z-index: 1;
}

/* Dark-mode fade target — compose alongside .testimonial-masonry-fade. */

.testimonial-masonry-fade--dark::after {
  background: linear-gradient(to bottom, transparent, var(--portant-ink-black));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.-inset-4 {
  inset: -1rem;
}

.-inset-8 {
  inset: -2rem;
}

.inset-0 {
  inset: 0px;
}

.-left-10 {
  left: -2.5rem;
}

.-right-1 {
  right: -0.25rem;
}

.-right-10 {
  right: -2.5rem;
}

.-right-32 {
  right: -8rem;
}

.-top-3 {
  top: -0.75rem;
}

.-top-4 {
  top: -1rem;
}

.bottom-0 {
  bottom: 0px;
}

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

.bottom-5 {
  bottom: 1.25rem;
}

.left-0 {
  left: 0px;
}

.left-0\.5 {
  left: 0.125rem;
}

.left-1 {
  left: 0.25rem;
}

.left-1\/2 {
  left: 50%;
}

.left-3\.5 {
  left: 0.875rem;
}

.left-\[14px\] {
  left: 14px;
}

.left-\[22px\] {
  left: 22px;
}

.left-\[30px\] {
  left: 30px;
}

.left-\[38px\] {
  left: 38px;
}

.left-\[6px\] {
  left: 6px;
}

.left-\[8\%\] {
  left: 8%;
}

.left-full {
  left: 100%;
}

.right-0 {
  right: 0px;
}

.right-0\.5 {
  right: 0.125rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-5 {
  right: 1.25rem;
}

.right-6 {
  right: 1.5rem;
}

.top-0 {
  top: 0px;
}

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

.top-1 {
  top: 0.25rem;
}

.top-1\/2 {
  top: 50%;
}

.top-3 {
  top: 0.75rem;
}

.top-4 {
  top: 1rem;
}

.top-5 {
  top: 1.25rem;
}

.top-6 {
  top: 1.5rem;
}

.top-\[10\%\] {
  top: 10%;
}

.top-\[8\%\] {
  top: 8%;
}

.isolate {
  isolation: isolate;
}

.-z-10 {
  z-index: -10;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[60\] {
  z-index: 60;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

.-m-1 {
  margin: -0.25rem;
}

.m-0 {
  margin: 0px;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

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

.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.-mb-px {
  margin-bottom: -1px;
}

.-ml-px {
  margin-left: -1px;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-14 {
  margin-bottom: 3.5rem;
}

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

.mb-3 {
  margin-bottom: 0.75rem;
}

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

.mb-5 {
  margin-bottom: 1.25rem;
}

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

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

.mb-auto {
  margin-bottom: auto;
}

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3\.5 {
  margin-left: 0.875rem;
}

.ml-\[0\.2em\] {
  margin-left: 0.2em;
}

.ml-auto {
  margin-left: auto;
}

.mr-10 {
  margin-right: 2.5rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mr-6 {
  margin-right: 1.5rem;
}

.mr-auto {
  margin-right: auto;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

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

.mt-14 {
  margin-top: 3.5rem;
}

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

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

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-20 {
  margin-top: 5rem;
}

.mt-24 {
  margin-top: 6rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

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

.mt-9 {
  margin-top: 2.25rem;
}

.mt-\[0\.08em\] {
  margin-top: 0.08em;
}

.mt-auto {
  margin-top: auto;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.\!block {
  display: block !important;
}

.block {
  display: block;
}

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

.inline {
  display: inline;
}

.flex {
  display: flex;
}

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

.table {
  display: table;
}

.\!grid {
  display: grid !important;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.\!hidden {
  display: none !important;
}

.hidden {
  display: none;
}

.aspect-\[1200\/630\] {
  aspect-ratio: 1200/630;
}

.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

.aspect-\[5\/3\] {
  aspect-ratio: 5/3;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.size-\[3px\] {
  width: 3px;
  height: 3px;
}

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

.h-1 {
  height: 0.25rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-48 {
  height: 12rem;
}

.h-5 {
  height: 1.25rem;
}

.h-56 {
  height: 14rem;
}

.h-6 {
  height: 1.5rem;
}

.h-64 {
  height: 16rem;
}

.h-7 {
  height: 1.75rem;
}

.h-72 {
  height: 18rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[1\.05em\] {
  height: 1.05em;
}

.h-\[22px\] {
  height: 22px;
}

.h-\[4\.5rem\] {
  height: 4.5rem;
}

.h-\[44px\] {
  height: 44px;
}

.h-\[58\%\] {
  height: 58%;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.max-h-\[420px\] {
  max-height: 420px;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-4 {
  min-height: 1rem;
}

.min-h-\[156px\] {
  min-height: 156px;
}

.min-h-\[20rem\] {
  min-height: 20rem;
}

.min-h-\[280px\] {
  min-height: 280px;
}

.min-h-\[28rem\] {
  min-height: 28rem;
}

.min-h-\[340px\] {
  min-height: 340px;
}

.min-h-\[40px\] {
  min-height: 40px;
}

.min-h-\[44px\] {
  min-height: 44px;
}

.min-h-\[50px\] {
  min-height: 50px;
}

.min-h-\[min\(70vh\2c 520px\)\] {
  min-height: min(70vh, 520px);
}

.min-h-dvh {
  min-height: 100dvh;
}

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

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-32 {
  width: 8rem;
}

.w-4 {
  width: 1rem;
}

.w-40 {
  width: 10rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-72 {
  width: 18rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[120px\] {
  width: 120px;
}

.w-\[275px\] {
  width: 275px;
}

.w-\[300px\] {
  width: 300px;
}

.w-\[320px\] {
  width: 320px;
}

.w-\[340px\] {
  width: 340px;
}

.w-\[4\.5rem\] {
  width: 4.5rem;
}

.w-\[44px\] {
  width: 44px;
}

.w-\[50\%\] {
  width: 50%;
}

.w-\[58\%\] {
  width: 58%;
}

.w-\[70\%\] {
  width: 70%;
}

.w-\[80\%\] {
  width: 80%;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[140px\] {
  min-width: 140px;
}

.min-w-\[200px\] {
  min-width: 200px;
}

.min-w-\[4\.5rem\] {
  min-width: 4.5rem;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-\[110px\] {
  max-width: 110px;
}

.max-w-\[140px\] {
  max-width: 140px;
}

.max-w-\[260px\] {
  max-width: 260px;
}

.max-w-\[27rem\] {
  max-width: 27rem;
}

.max-w-\[45\%\] {
  max-width: 45%;
}

.max-w-\[640px\] {
  max-width: 640px;
}

.max-w-\[720px\] {
  max-width: 720px;
}

.max-w-\[75rem\] {
  max-width: 75rem;
}

.max-w-\[832px\] {
  max-width: 832px;
}

.max-w-\[88px\] {
  max-width: 88px;
}

.max-w-\[90rem\] {
  max-width: 90rem;
}

.max-w-\[min\(100\%\2c 42rem\)\] {
  max-width: min(100%, 42rem);
}

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

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

.max-w-md {
  max-width: 28rem;
}

.max-w-none {
  max-width: none;
}

.max-w-site {
  max-width: 86rem;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xl {
  max-width: 36rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-none {
  flex: none;
}

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

.shrink {
  flex-shrink: 1;
}

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

.grow {
  flex-grow: 1;
}

.basis-\[calc\(50\%-0\.5rem\)\] {
  flex-basis: calc(50% - 0.5rem);
}

.table-fixed {
  table-layout: fixed;
}

.border-collapse {
  border-collapse: collapse;
}

.origin-bottom {
  transform-origin: bottom;
}

.origin-center {
  transform-origin: center;
}

.origin-left {
  transform-origin: left;
}

.-translate-x-0\.5 {
  --tw-translate-x: -0.125rem;
  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));
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  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));
}

.-translate-y-0\.5 {
  --tw-translate-y: -0.125rem;
  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));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  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));
}

.translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  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));
}

.translate-x-full {
  --tw-translate-x: 100%;
  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));
}

.translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  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));
}

.rotate-180 {
  --tw-rotate: 180deg;
  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));
}

.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));
}

@keyframes hero-icon-fall {
  0% {
    transform: translateY(-30%) rotate(0deg);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  100% {
    transform: translateY(130%) rotate(360deg);
    opacity: 0;
  }
}

.animate-hero-icon-fall {
  animation: hero-icon-fall 25s linear infinite;
}

@keyframes hero-icons-dissolve-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.animate-hero-icons-dissolve-in {
  animation: hero-icons-dissolve-in 4s ease-in-out 2s forwards;
}

@keyframes integrations-scroll-rtl {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-integrations-scroll {
  animation: integrations-scroll-rtl 960s linear infinite;
}

@keyframes scroll-ltr-3 {
  0% {
    transform: translateX(calc(-100% / 3));
  }

  100% {
    transform: translateX(0);
  }
}

.animate-scroll-ltr-3 {
  animation: scroll-ltr-3 300s linear infinite;
}

@keyframes scroll-rtl-3 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100% / 3));
  }
}

.animate-scroll-rtl-3 {
  animation: scroll-rtl-3 300s linear infinite;
}

@keyframes scroll-testimonials-ltr {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.animate-scroll-testimonials-ltr {
  animation: scroll-testimonials-ltr 180s linear infinite;
}

@keyframes step1-cursor {
  0% {
    left: 8%;
    top: 8%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  28% {
    left: 38%;
    top: 25%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  32% {
    left: 38%;
    top: 25%;
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 1;
  }

  36% {
    left: 38%;
    top: 25%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  44% {
    left: 38%;
    top: 25%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  52% {
    left: 38%;
    top: 25%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }

  100% {
    left: 38%;
    top: 25%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.animate-step1-cursor {
  animation: step1-cursor 2.5s ease-in-out infinite;
}

@keyframes step1-icon-pop {
  0%, 30% {
    transform: scale(1);
  }

  34% {
    transform: scale(1.1);
  }

  42% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

.animate-step1-icon-pop {
  animation: step1-icon-pop 2.5s ease-in-out infinite;
}

@keyframes step3-gear-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.animate-step3-gear-rotate {
  animation: step3-gear-rotate 1.25s linear infinite;
}

@keyframes step3-sparkle {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.animate-step3-sparkle {
  animation: step3-sparkle 1.5s ease-in-out infinite;
}

@keyframes step4-sync-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.animate-step4-sync-rotate {
  animation: step4-sync-rotate 6s linear infinite;
}

@keyframes testimonial-highlight-draw {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

.animate-testimonial-highlight-draw {
  animation: testimonial-highlight-draw 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

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

.resize {
  resize: both;
}

.scroll-mt-24 {
  scroll-margin-top: 6rem;
}

.scroll-mt-8 {
  scroll-margin-top: 2rem;
}

.scroll-mt-\[140px\] {
  scroll-margin-top: 140px;
}

.list-none {
  list-style-type: none;
}

.auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

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

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

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

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

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

.justify-between {
  justify-content: space-between;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-14 {
  gap: 3.5rem;
}

.gap-16 {
  gap: 4rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-20 {
  gap: 5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-\[1\.125rem\] {
  gap: 1.125rem;
}

.gap-\[60px\] {
  gap: 60px;
}

.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-14 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
}

.space-y-16 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-32 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(8rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(8rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-portant-ink-black\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(12 12 12 / 0.1);
}

.divide-portant-parchment > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(226 218 210 / var(--tw-divide-opacity, 1));
}

.divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.1);
}

.self-start {
  align-self: flex-start;
}

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

.justify-self-start {
  justify-self: start;
}

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

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

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

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-visible {
  overflow-y: visible;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

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

.whitespace-nowrap {
  white-space: nowrap;
}

.text-balance {
  text-wrap: balance;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-card-lg {
  border-radius: 1.75rem;
}

.rounded-card-xl {
  border-radius: 2.25rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rounded-t-sm {
  border-top-left-radius: 0.125rem;
  border-top-right-radius: 0.125rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-x {
  border-left-width: 1px;
  border-right-width: 1px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

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

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

.border-l {
  border-left-width: 1px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.border-black\/10 {
  border-color: rgb(0 0 0 / 0.1);
}

.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.border-orange-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}

.border-portant-bold-blue {
  --tw-border-opacity: 1;
  border-color: rgb(0 68 241 / var(--tw-border-opacity, 1));
}

.border-portant-burnt {
  --tw-border-opacity: 1;
  border-color: rgb(75 72 68 / var(--tw-border-opacity, 1));
}

.border-portant-charred\/30 {
  border-color: rgb(148 144 138 / 0.3);
}

.border-portant-dark-parchment {
  --tw-border-opacity: 1;
  border-color: rgb(196 185 174 / var(--tw-border-opacity, 1));
}

.border-portant-ink-black {
  --tw-border-opacity: 1;
  border-color: rgb(12 12 12 / var(--tw-border-opacity, 1));
}

.border-portant-ink-black\/10 {
  border-color: rgb(12 12 12 / 0.1);
}

.border-portant-ink-black\/15 {
  border-color: rgb(12 12 12 / 0.15);
}

.border-portant-ink-black\/20 {
  border-color: rgb(12 12 12 / 0.2);
}

.border-portant-ink-black\/5 {
  border-color: rgb(12 12 12 / 0.05);
}

.border-portant-ink-black\/80 {
  border-color: rgb(12 12 12 / 0.8);
}

.border-portant-parchment {
  --tw-border-opacity: 1;
  border-color: rgb(226 218 210 / var(--tw-border-opacity, 1));
}

.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}

.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}

.border-slate-200\/60 {
  border-color: rgb(226 232 240 / 0.6);
}

.border-slate-200\/80 {
  border-color: rgb(226 232 240 / 0.8);
}

.border-slate-200\/90 {
  border-color: rgb(226 232 240 / 0.9);
}

.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.border-slate-400 {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.border-slate-900\/10 {
  border-color: rgb(15 23 42 / 0.1);
}

.border-teal-500 {
  --tw-border-opacity: 1;
  border-color: rgb(20 184 166 / var(--tw-border-opacity, 1));
}

.border-transparent {
  border-color: transparent;
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25);
}

.border-white\/\[0\.08\] {
  border-color: rgb(255 255 255 / 0.08);
}

.border-b-transparent {
  border-bottom-color: transparent;
}

.bg-\[\#E53935\] {
  --tw-bg-opacity: 1;
  background-color: rgb(229 57 53 / var(--tw-bg-opacity, 1));
}

.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.bg-amber-200\/60 {
  background-color: rgb(253 230 138 / 0.6);
}

.bg-amber-200\/80 {
  background-color: rgb(253 230 138 / 0.8);
}

.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}

.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}

.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}

.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}

.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}

.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}

.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-200\/60 {
  background-color: rgb(191 219 254 / 0.6);
}

.bg-blue-200\/80 {
  background-color: rgb(191 219 254 / 0.8);
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-cyan-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1));
}

.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}

.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}

.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.bg-lime-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 252 203 / var(--tw-bg-opacity, 1));
}

.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}

.bg-orange-200\/60 {
  background-color: rgb(254 215 170 / 0.6);
}

.bg-orange-200\/80 {
  background-color: rgb(254 215 170 / 0.8);
}

.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.bg-pink-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
}

.bg-portant-ash {
  --tw-bg-opacity: 1;
  background-color: rgb(42 40 38 / var(--tw-bg-opacity, 1));
}

.bg-portant-ash\/\[0\.02\] {
  background-color: rgb(42 40 38 / 0.02);
}

.bg-portant-blue {
  --tw-bg-opacity: 1;
  background-color: rgb(24 117 251 / var(--tw-bg-opacity, 1));
}

.bg-portant-canvas {
  --tw-bg-opacity: 1;
  background-color: rgb(246 245 244 / var(--tw-bg-opacity, 1));
}

.bg-portant-canvas\/50 {
  background-color: rgb(246 245 244 / 0.5);
}

.bg-portant-charcoal {
  --tw-bg-opacity: 1;
  background-color: rgb(28 28 28 / var(--tw-bg-opacity, 1));
}

.bg-portant-charred\/10 {
  background-color: rgb(148 144 138 / 0.1);
}

.bg-portant-charred\/60 {
  background-color: rgb(148 144 138 / 0.6);
}

.bg-portant-ink-black {
  --tw-bg-opacity: 1;
  background-color: rgb(12 12 12 / var(--tw-bg-opacity, 1));
}

.bg-portant-ink-black\/5 {
  background-color: rgb(12 12 12 / 0.05);
}

.bg-portant-light-orange {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 216 / var(--tw-bg-opacity, 1));
}

.bg-portant-notebook {
  --tw-bg-opacity: 1;
  background-color: rgb(235 232 228 / var(--tw-bg-opacity, 1));
}

.bg-portant-orange {
  --tw-bg-opacity: 1;
  background-color: rgb(255 72 0 / var(--tw-bg-opacity, 1));
}

.bg-portant-orange\/10 {
  background-color: rgb(255 72 0 / 0.1);
}

.bg-portant-orange\/15 {
  background-color: rgb(255 72 0 / 0.15);
}

.bg-portant-orange\/20 {
  background-color: rgb(255 72 0 / 0.2);
}

.bg-portant-orange\/\[0\.07\] {
  background-color: rgb(255 72 0 / 0.07);
}

.bg-portant-paper {
  --tw-bg-opacity: 1;
  background-color: rgb(240 239 237 / var(--tw-bg-opacity, 1));
}

.bg-portant-parchment {
  --tw-bg-opacity: 1;
  background-color: rgb(226 218 210 / var(--tw-bg-opacity, 1));
}

.bg-red-200\/60 {
  background-color: rgb(254 202 202 / 0.6);
}

.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}

.bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-slate-100\/80 {
  background-color: rgb(241 245 249 / 0.8);
}

.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.bg-slate-200\/80 {
  background-color: rgb(226 232 240 / 0.8);
}

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

.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.bg-slate-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}

.bg-teal-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}

.bg-teal-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}

.bg-violet-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}

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

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}

.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}

.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}

.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}

.bg-white\/\[0\.06\] {
  background-color: rgb(255 255 255 / 0.06);
}

.bg-yellow-300\/80 {
  background-color: rgb(253 224 71 / 0.8);
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-amber-500 {
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-800 {
  --tw-gradient-from: #92400e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(146 64 14 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-600 {
  --tw-gradient-from: #059669 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-portant-ash {
  --tw-gradient-from: #2a2826 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(42 40 38 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-portant-ink-black\/80 {
  --tw-gradient-from: rgb(12 12 12 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(12 12 12 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-portant-orange\/15 {
  --tw-gradient-from: rgb(255 72 0 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 72 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-portant-paper {
  --tw-gradient-from: #F0EFED var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(240 239 237 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-rose-500 {
  --tw-gradient-from: #f43f5e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 63 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-sky-500 {
  --tw-gradient-from: #0ea5e9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-50 {
  --tw-gradient-from: #f8fafc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 250 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-900\/50 {
  --tw-gradient-from: rgb(15 23 42 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-portant-ash {
  --tw-gradient-to: rgb(42 40 38 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #2a2826 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-slate-50\/80 {
  --tw-gradient-to: rgb(248 250 252 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(248 250 252 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-stone-800 {
  --tw-gradient-to: rgb(41 37 36 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #292524 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-\[\#0a1628\] {
  --tw-gradient-to: #0a1628 var(--tw-gradient-to-position);
}

.to-blue-700 {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}

.to-orange-600 {
  --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
}

.to-portant-ash\/10 {
  --tw-gradient-to: rgb(42 40 38 / 0.1) var(--tw-gradient-to-position);
}

.to-portant-white {
  --tw-gradient-to: #ffffff var(--tw-gradient-to-position);
}

.to-red-700 {
  --tw-gradient-to: #b91c1c var(--tw-gradient-to-position);
}

.to-slate-100 {
  --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position);
}

.to-stone-950 {
  --tw-gradient-to: #0c0a09 var(--tw-gradient-to-position);
}

.to-teal-800 {
  --tw-gradient-to: #115e59 var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-center {
  -o-object-position: center;
     object-position: center;
}

.object-top {
  -o-object-position: top;
     object-position: top;
}

.\!p-0 {
  padding: 0px !important;
}

.p-1 {
  padding: 0.25rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.p-8 {
  padding: 2rem;
}

.p-9 {
  padding: 2.25rem;
}

.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

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

.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

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

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

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

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

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-14 {
  padding-bottom: 3.5rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

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

.pl-10 {
  padding-left: 2.5rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pt-0 {
  padding-top: 0px;
}

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

.pt-1 {
  padding-top: 0.25rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-14 {
  padding-top: 3.5rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-2\.5 {
  padding-top: 0.625rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-24 {
  padding-top: 6rem;
}

.pt-32 {
  padding-top: 8rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

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

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

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

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

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

.font-sans {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

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

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[0\.6875rem\] {
  font-size: 0.6875rem;
}

.text-\[0\.9375rem\] {
  font-size: 0.9375rem;
}

.text-\[1\.375rem\] {
  font-size: 1.375rem;
}

.text-\[1\.875rem\] {
  font-size: 1.875rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

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

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

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

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

.font-bold {
  font-weight: 700;
}

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

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

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

.leading-\[1\.08\] {
  line-height: 1.08;
}

.leading-\[1\.55\] {
  line-height: 1.55;
}

.leading-\[1\.6\] {
  line-height: 1.6;
}

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

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}

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

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

.tracking-wider {
  letter-spacing: 0.05em;
}

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

.text-\[\#0A66C2\] {
  --tw-text-opacity: 1;
  color: rgb(10 102 194 / var(--tw-text-opacity, 1));
}

.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}

.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-current {
  color: currentColor;
}

.text-cyan-700 {
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}

.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}

.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}

.text-inherit {
  color: inherit;
}

.text-lime-700 {
  --tw-text-opacity: 1;
  color: rgb(77 124 15 / var(--tw-text-opacity, 1));
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}

.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}

.text-pink-700 {
  --tw-text-opacity: 1;
  color: rgb(190 24 93 / var(--tw-text-opacity, 1));
}

.text-portant-blue {
  --tw-text-opacity: 1;
  color: rgb(24 117 251 / var(--tw-text-opacity, 1));
}

.text-portant-burnt {
  --tw-text-opacity: 1;
  color: rgb(75 72 68 / var(--tw-text-opacity, 1));
}

.text-portant-charred {
  --tw-text-opacity: 1;
  color: rgb(148 144 138 / var(--tw-text-opacity, 1));
}

.text-portant-ink-black {
  --tw-text-opacity: 1;
  color: rgb(12 12 12 / var(--tw-text-opacity, 1));
}

.text-portant-ink-black\/30 {
  color: rgb(12 12 12 / 0.3);
}

.text-portant-ink-black\/50 {
  color: rgb(12 12 12 / 0.5);
}

.text-portant-ink-black\/85 {
  color: rgb(12 12 12 / 0.85);
}

.text-portant-orange {
  --tw-text-opacity: 1;
  color: rgb(255 72 0 / var(--tw-text-opacity, 1));
}

.text-portant-paper {
  --tw-text-opacity: 1;
  color: rgb(240 239 237 / var(--tw-text-opacity, 1));
}

.text-portant-parchment {
  --tw-text-opacity: 1;
  color: rgb(226 218 210 / var(--tw-text-opacity, 1));
}

.text-portant-toasted {
  --tw-text-opacity: 1;
  color: rgb(119 113 105 / var(--tw-text-opacity, 1));
}

.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}

.text-sky-700 {
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

.text-slate-950 {
  --tw-text-opacity: 1;
  color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}

.text-teal-600 {
  --tw-text-opacity: 1;
  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
}

.text-teal-700 {
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}

.text-teal-800 {
  --tw-text-opacity: 1;
  color: rgb(17 94 89 / var(--tw-text-opacity, 1));
}

.text-violet-600 {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}

.text-violet-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}

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

.text-white\/35 {
  color: rgb(255 255 255 / 0.35);
}

.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}

.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}

.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.text-yellow-400 {
  --tw-text-opacity: 1;
  color: rgb(250 204 21 / var(--tw-text-opacity, 1));
}

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

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

.decoration-portant-ink-black\/20 {
  text-decoration-color: rgb(12 12 12 / 0.2);
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

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

.placeholder-portant-charred::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(148 144 138 / var(--tw-placeholder-opacity, 1));
}

.placeholder-portant-charred::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(148 144 138 / var(--tw-placeholder-opacity, 1));
}

.opacity-0 {
  opacity: 0;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-95 {
  opacity: 0.95;
}

.opacity-\[0\.12\] {
  opacity: 0.12;
}

.opacity-\[0\.14\] {
  opacity: 0.14;
}

.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);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_20px_50px_rgba\(0\2c 0\2c 0\2c 0\.35\)\] {
  --tw-shadow: 0 20px 50px rgba(0,0,0,0.35);
  --tw-shadow-colored: 0 20px 50px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.06\)\] {
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-card {
  --tw-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  --tw-shadow-colored: 0 18px 45px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

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

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.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);
}

.ring-1 {
  --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(1px + 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);
}

.ring-2 {
  --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(2px + 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);
}

.ring-amber-100\/50 {
  --tw-ring-color: rgb(254 243 199 / 0.5);
}

.ring-black\/\[0\.04\] {
  --tw-ring-color: rgb(0 0 0 / 0.04);
}

.ring-blue-100\/50 {
  --tw-ring-color: rgb(219 234 254 / 0.5);
}

.ring-emerald-100\/50 {
  --tw-ring-color: rgb(209 250 229 / 0.5);
}

.ring-indigo-100\/50 {
  --tw-ring-color: rgb(224 231 255 / 0.5);
}

.ring-orange-100\/50 {
  --tw-ring-color: rgb(255 237 213 / 0.5);
}

.ring-portant-ink-black\/10 {
  --tw-ring-color: rgb(12 12 12 / 0.1);
}

.ring-portant-ink-black\/5 {
  --tw-ring-color: rgb(12 12 12 / 0.05);
}

.ring-slate-100\/50 {
  --tw-ring-color: rgb(241 245 249 / 0.5);
}

.ring-slate-100\/80 {
  --tw-ring-color: rgb(241 245 249 / 0.8);
}

.ring-slate-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(226 232 240 / var(--tw-ring-opacity, 1));
}

.ring-slate-200\/60 {
  --tw-ring-color: rgb(226 232 240 / 0.6);
}

.ring-slate-900\/10 {
  --tw-ring-color: rgb(15 23 42 / 0.1);
}

.ring-slate-900\/5 {
  --tw-ring-color: rgb(15 23 42 / 0.05);
}

.ring-teal-100\/50 {
  --tw-ring-color: rgb(204 251 241 / 0.5);
}

.ring-violet-100\/50 {
  --tw-ring-color: rgb(237 233 254 / 0.5);
}

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

.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.ring-offset-portant-ink-black {
  --tw-ring-offset-color: #0c0c0c;
}

.blur {
  --tw-blur: blur(8px);
  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);
}

.blur-2xl {
  --tw-blur: blur(40px);
  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);
}

.blur-3xl {
  --tw-blur: blur(64px);
  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);
}

.brightness-0 {
  --tw-brightness: brightness(0);
  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);
}

.drop-shadow-\[0_0_3px_currentColor\] {
  --tw-drop-shadow: drop-shadow(0 0 3px currentColor);
  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);
}

.drop-shadow-\[0_0_4px_currentColor\] {
  --tw-drop-shadow: drop-shadow(0 0 4px currentColor);
  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);
}

.drop-shadow-md {
  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  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);
}

.drop-shadow-sm {
  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
  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);
}

.grayscale {
  --tw-grayscale: grayscale(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);
}

.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);
}

.backdrop-blur-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

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

.transition-all {
  transition-property: all;
  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;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.\[-ms-overflow-style\:none\] {
  -ms-overflow-style: none;
}

.\[animation-duration\:300s\] {
  animation-duration: 300s;
}

.\[scrollbar-width\:none\] {
  scrollbar-width: none;
}

.\[text-wrap\:balance\] {
  text-wrap: balance;
}

.\[text-wrap\:pretty\] {
  text-wrap: pretty;
}

/* Hero falling icons: preserve aspect ratio so document-shaped icons (Slides, PDF) aren't squashed */

.hero-fall-icon {
  -o-object-fit: contain;
     object-fit: contain;
}

/* Hero headline: tight line-height so the two lines sit close */

.hero-headline {
  line-height: 1.15 !important;
}

/* When progress bar is visible, hide the active tab's border so only the load bar shows */

.progress-bar-visible .sales-paperwork-tab[aria-selected="true"] {
  border-bottom-color: transparent;
}

/* Integrations section: horizontal scroll strip with end fades */

.integrations-scroll-wrap {
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.integrations-scroll-inner {
  width: -moz-max-content;
  width: max-content;
}

.integrations-scroll-inner img {
  -o-object-fit: contain;
     object-fit: contain;
}

/* ============================================================ */

/* Nav: 2026 rebrand (Figma Header - Open)                       */

/* ============================================================ */

.nav-header {
  background-color: #f6f5f4;
  border-bottom: 1px solid #e2dad2;
  transition: background-color 0.2s ease, transform 0.3s ease;
}

:root {
  --nav-banner-h: 0rem;
  --nav-total-h: calc(5rem + var(--nav-banner-h));
}

:root:has(.nav-header--has-banner) {
  --nav-banner-h: 3.25rem;
}

.nav-header-spacer {
  height: var(--nav-total-h);
}

/* Subpage hero: offset top padding by half the banner height for optical centering. Blog articles opt out and manage their own top padding. */

main > section:first-of-type:not(.module-hero):not(.blog-article-hero) {
  padding-top: max(0rem, calc(1rem - var(--nav-banner-h, 0rem) / 2));
}

@media (min-width: 640px) {
  main > section:first-of-type:not(.module-hero):not(.blog-article-hero) {
    padding-top: calc(2.5rem - var(--nav-banner-h, 0rem) / 2);
  }
}

@media (min-width: 1024px) {
  main > section:first-of-type:not(.module-hero):not(.blog-article-hero) {
    padding-top: calc(3.5rem - var(--nav-banner-h, 0rem) / 2);
  }
}

/* Generic "tucked" state — any element with [data-hide-on-scroll] uses this. */

[data-hide-on-scroll].is-tucked {
  transform: translateY(-100%);
}

.nav-header.is-tucked .nav-dropdown-panel {
  opacity: 0 !important;
  pointer-events: none !important;
}

.nav-header::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  top: var(--nav-total-h, 5rem);
  bottom: 0;
  background: rgb(0 0 0 / 0.05);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease-in;
  z-index: -1;
}

/* ── Nav promo banner ──────────────────────────────────────── */

.nav-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  box-sizing: border-box;
  background: linear-gradient(90deg, #FF4800 0%, #FFAA00 50%, #FF4800 100%);
  position: relative;
}

.nav-banner__message {
  margin: 0;
  padding: 0 2.5rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0c0c0c;
  line-height: 1.35;
}

@media (min-width: 640px) {
  .nav-banner__message {
    font-size: 0.875rem;
  }
}

.nav-banner__link {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0c0c0c;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nav-banner__link:hover {
  text-decoration: underline;
}

.nav-banner__close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  color: #0c0c0c;
  opacity: 0.6;
  transition: opacity 0.15s ease;
  cursor: pointer;
}

.nav-banner__close:hover {
  opacity: 1;
}

.nav-header.nav-header--menu-open {
  background-color: #f6f5f4;
}

.nav-header.nav-header--menu-open::after {
  opacity: 1;
}

.nav-header.nav-header--menu-open .nav-dropdown-panel {
  background-color: #f6f5f4;
}

.nav-group {
  align-self: stretch;
  display: flex;
  align-items: center;
}

.nav-menu-link {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1rem;
  color: #777169;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-menu-link:hover,
.nav-menu-link.nav-menu-link--active {
  color: #0c0c0c;
}

.nav-menu-link.nav-menu-link--active {
  background-color: #ffffff;
  border-radius: 0.5rem;
}

.nav-chevron {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  transition: transform 0.2s ease;
  display: inline-block;
  vertical-align: middle;
}

.nav-menu-link--active .nav-chevron {
  transform: rotate(180deg);
}

.nav-cta-link {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #0c0c0c;
}

.nav-cta-button {
  height: 38px;
  padding: 6px 16px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #fff;
  background-color: #0c0c0c;
  border: 2px solid rgba(12, 12, 12, 0.2);
  border-radius: 0.5rem;
  transition: background-color 0.15s ease, background-image 0.2s ease, border-color 0.15s ease;
}

.nav-cta-button:hover {
  background-image: radial-gradient(at 75% 0%, #4b4844 0%, #0c0c0c 70%);
  border-color: rgba(0, 0, 0, 0.25);
}

.nav-header .btn-primary {
  border: 2px solid transparent;
  border-radius: calc(0.5rem + 2px);
  /* gradient trim hidden – kept for easy re-enable
  background:
    linear-gradient(theme('colors.portant.ink-black'), theme('colors.portant.ink-black')) padding-box,
    linear-gradient(35deg, #E9CEA0 0%, #FFAA00 50%, #FF4800 100%) border-box;
  */
}

/* Dropdown panel: same bg as header and hero, full width */

.nav-dropdown-panel {
  top: var(--nav-total-h, 5rem);
  background-color: #f6f5f4;
  border-bottom: 1px solid #e2dad2;
  transform: translateY(-4px);
}

.nav-dropdown-section-label {
  color: #777169;
}

.nav-dropdown-link {
  padding: 12px;
  margin: -12px;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease;
}

.nav-dropdown-link:hover {
  background-color: #ffffff;
}

.nav-dropdown-item-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #0c0c0c;
}

.nav-dropdown-item-desc {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #777169;
}

/* Mega menu featured CTA cards (photo / illustration backgrounds) */

.nav-dropdown-cta-card {
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 40px;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  max-width: 610px;
}

.nav-dropdown-cta-card--product {
  position: relative;
  overflow: hidden;
  background-color: #0c0c0c;
  background-image: linear-gradient(
      to top,
      rgb(12 12 12 / 0.9) 0%,
      rgb(12 12 12 / 0.5) 38%,
      rgb(12 12 12 / 0.12) 62%,
      transparent 85%
    ),
    url('/assets/nav-product-mega-menu-cta-bg-16x9.webp');
  background-size: cover;
  background-position: center;
}

.nav-dropdown-cta-card--product > * {
  position: relative;
  z-index: 1;
}

.nav-dropdown-cta-card--product .nav-dropdown-cta-headline {
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}

.nav-dropdown-cta-card--product .nav-dropdown-cta-label {
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}

.nav-dropdown-cta-card--solutions {
  position: relative;
  overflow: hidden;
  background-color: #0c0c0c;
  background-image: linear-gradient(
      to top,
      rgb(12 12 12 / 0.9) 0%,
      rgb(12 12 12 / 0.5) 38%,
      rgb(12 12 12 / 0.12) 62%,
      transparent 85%
    ),
    url('/assets/nav-solutions-mega-menu-cta-bg-16x9.webp');
  background-size: cover;
  background-position: center;
}

.nav-dropdown-cta-card--solutions > * {
  position: relative;
  z-index: 1;
}

.nav-dropdown-cta-card--solutions .nav-dropdown-cta-headline {
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}

.nav-dropdown-cta-card--solutions .nav-dropdown-cta-label {
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}

.nav-dropdown-cta-card--resources {
  position: relative;
  overflow: hidden;
  background-color: #f6f5f4;
  background-image: url('/assets/nav-resources-mega-menu-cta-bg-16x9.webp');
  background-size: cover;
  background-position: center top;
}

.nav-dropdown-cta-card--resources::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    to top,
    rgb(255 255 255 / 0.95) 0%,
    rgb(255 255 255 / 0.78) 38%,
    rgb(255 255 255 / 0.4) 62%,
    rgb(255 255 255 / 0.12) 82%,
    transparent 100%
  );
}

.nav-dropdown-cta-card--resources > * {
  position: relative;
  z-index: 1;
}

.nav-dropdown-cta-card--resources .nav-dropdown-cta-headline {
  color: #0c0c0c;
  text-shadow: none;
}

.nav-dropdown-cta-card--resources .nav-dropdown-cta-label {
  color: #ff4800;
  text-shadow: none;
}

.nav-dropdown-cta-label {
  color: #ff4800;
}

.nav-dropdown-cta-headline {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #0c0c0c;
}

.nav-dropdown-cta-button {
  align-self: flex-start;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ff4800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.nav-dropdown-cta-button:hover {
  background-color: color-mix(in srgb, #ff4800 85%, black);
}

.nav-dropdown-cta-button svg {
  width: 24px;
  height: 24px;
}

/* Mobile menu: match header and hero bg, same typography */

.nav-mobile-panel {
  background-color: #f6f5f4;
  border-left: 1px solid rgba(12, 12, 12, 0.1);
}

/* Dark variant: composed alongside .nav-mobile-panel for ink-black surfaces
   (e.g. /ai/ lander). Mirrors .site-header-dark gradient. */

.nav-mobile-panel--dark {
  background: linear-gradient(180deg, var(--portant-charcoal) 0%, var(--portant-ink-black) 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
}

.nav-mobile-panel--dark .nav-mobile-link {
  color: #fff;
}

.nav-mobile-panel--dark .nav-mobile-link:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.nav-mobile-section-label {
  color: #777169;
}

.nav-mobile-link {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #0c0c0c;
}

.nav-mobile-cta-button {
  height: 38px;
  padding: 6px 16px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #fff;
  background-color: #0c0c0c;
  border: 2px solid rgba(12, 12, 12, 0.2);
  border-radius: 0.5rem;
}

/* ============================================================ */

/* CTA Banner: "Footnote Banner" above footer                   */

/* ============================================================ */

.site-cta-banner {
  background-color: #f6f5f4;
  border-top: 1px solid #e2dad2;
}

/* Dark-mode variant: compose alongside .site-cta-banner to flip the chrome
   without affecting the marketing-site banner. */

.site-cta-banner--dark {
  background-color: var(--portant-ink-black);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.site-cta-banner-inner {
  max-width: 86rem;
  margin: 0 auto;
  /* Mobile vertical padding matches sectional py-20 (80px) for rhythm consistency.
     Bottom adds ~1rem so the section visually breathes off the next section. */
  padding: 5rem 1rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
}

.site-cta-banner-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  /* let child w-full button span the banner width on mobile */
  gap: 1rem;
}

.site-cta-banner-subtext {
  max-width: 24rem;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .site-cta-banner-inner {
    padding: 2.5rem 1.5rem 3.5rem;
  }
}

@media (min-width: 1024px) {
  .site-cta-banner-inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
    padding: 3.125rem 3rem 4.125rem;
  }

  .site-cta-banner-heading {
    flex: 2 1 0%;
  }

  .site-cta-banner-action {
    flex: 1 1 0%;
    align-self: auto;
    align-items: flex-end;
    text-align: right;
  }
}

/* Mid-page CTA variant: drops the top border (so it visually merges with the
   section it sits inside) and doubles the inner top/bottom padding. Used on
   the AI page for the CTA merged into the FEATURES section. */

.site-cta-banner--mid {
  border-top: 0;
}

.site-cta-banner--mid .site-cta-banner-inner {
  padding-top: 10rem;
  padding-bottom: 12rem;
}

@media (min-width: 640px) {
  .site-cta-banner--mid .site-cta-banner-inner {
    padding-top: 5rem;
    padding-bottom: 7rem;
  }
}

@media (min-width: 1024px) {
  .site-cta-banner--mid .site-cta-banner-inner {
    padding-top: 6.25rem;
    padding-bottom: 8.25rem;
  }
}

/* ============================================================ */

/* Footer: 2026 rebrand (Figma Footer)                          */

/* ============================================================ */

.site-footer {
  background-color: #f6f5f4;
}

.site-footer-inner {
  max-width: 86rem;
  margin: 0 auto;
  padding: 1.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
  position: relative;
}

.site-footer-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1rem;
  right: 1rem;
  height: 1px;
  background-color: #e2dad2;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 1.5rem;
}

.site-footer-col {
  width: calc(50% - 0.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.site-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer-list a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer-list a:hover {
  color: var(--portant-ink-black);
}

.site-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.site-footer-logo a {
  display: inline-block;
}

.site-footer-logo img {
  height: 1.5rem;
  width: auto;
}

/* Mobile: stack as another vertical list, left-aligned with the link columns above.
   Desktop: copyright on the left, legal links wrap to the right on a single baseline. */

.site-footer-legal {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1.5rem;
}

.site-footer-copyright {
  color: inherit;
  flex-shrink: 0;
}

.site-footer-legal-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.site-footer-legal-links a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site-footer-legal-links a:hover {
  color: var(--portant-ink-black);
}

/* HubSpot cookie banner trigger: match plain legal links (no default button chrome). */

.site-footer-legal-links .site-footer-legal-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  text-align: inherit;
  transition: color 0.15s ease;
}

.site-footer-legal-links .site-footer-legal-button:hover {
  color: var(--portant-ink-black);
}

@media (min-width: 1024px) {
  .site-footer-legal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1rem;
  }

  .site-footer-legal-links {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem 1.5rem;
    margin-left: auto;
  }
}

/* ============================================================ */

/* Blog & Article styles                                        */

/* ============================================================ */

.blog-kicker {
  font-family: IBM Plex Mono, ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Article foot: grouped internal links (see lib/blog-template.js) */

.blog-related-resources-panel {
  box-shadow:
    0 1px 2px 0 rgb(15 23 42 / 0.04),
    0 8px 24px -4px rgb(15 23 42 / 0.07);
}

/* (blog-hero-grid removed — the homepage hero has no grid overlay; the blog
   hero now mirrors that calm canvas treatment.) */

/* Blog CTA: accent + dots */

.blog-cta-accent {
  background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 91, 46, 0.08) 0%, transparent 70%);
  z-index: 1;
}

.blog-cta-dots {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
  background-size: 20px 20px;
  z-index: 1;
}

/* Blog listing: filter toolbar (below hero) */

.blog-filter-toolbar {
  position: relative;
  z-index: 25;
  overflow: visible;
}

.blog-filter-toolbar .container-site {
  overflow: visible;
}

/* Blog listing: filter toolbar dropdowns */

.blog-dropdown-wrap {
  position: relative;
  z-index: 1;
}

/* Open menu stacks above sibling triggers (author/sort/category in one row) */

.blog-dropdown-wrap:has(.blog-dropdown-panel.is-open) {
  z-index: 50;
}

.blog-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  right: auto;
  z-index: 1;
  box-sizing: border-box;
  /* At least trigger width; avoid width:max-content + child width:100% collapse */
  min-width: 100%;
  width: max(100%, 12.5rem);
  max-width: min(100vw - 1.5rem, 20rem);
  max-height: min(18rem, 70vh);
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 0.5rem;
  border: 1px solid rgba(12, 12, 12, 0.1);
  background-color: #fff;
  box-shadow:
    0 4px 6px -1px rgb(15 23 42 / 0.08),
    0 12px 24px -4px rgb(15 23 42 / 0.12);
  padding: 0.375rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition:
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.2s;
}

.blog-dropdown-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.blog-dropdown-panel:not(.is-open) {
  pointer-events: none;
}

/* Right-aligned: anchor to trigger’s right edge; grow left if needed */

.blog-dropdown-panel--align-end {
  left: auto;
  right: 0;
}

/* Author list: comfortable reading width */

.blog-dropdown-panel--author {
  width: max(100%, 20rem);
  max-width: min(100vw - 1.5rem, 22rem);
  padding: 0.5rem;
}

/* Category list: room for long labels */

.blog-dropdown-panel--category {
  width: max(100%, 20rem);
  max-width: min(100vw - 1.5rem, 24rem);
  padding: 0.5rem;
}

.blog-dropdown-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  padding: 0.625rem 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  color: #1e293b;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.blog-dropdown-item + .blog-dropdown-item {
  margin-top: 2px;
}

.blog-dropdown-item:hover,
.blog-dropdown-item:focus-visible {
  background-color: #f8fafc;
  outline: none;
}

.blog-dropdown-item[aria-selected='true'] {
  background-color: rgb(255 91 46 / 0.08);
  color: #0f172a;
}

.blog-dropdown-item-check {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: #ff4800;
  opacity: 0;
}

.blog-dropdown-item[aria-selected='true'] .blog-dropdown-item-check {
  opacity: 1;
}

.blog-dropdown-item-avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  margin: 0;
}

.blog-dropdown-item-avatar-spacer {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}

.blog-dropdown-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 0.125rem;
}

.blog-dropdown-item-title {
  display: block;
  font-weight: 600;
  line-height: 1.25;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-dropdown-item-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #64748b;
  overflow: hidden;
}

.blog-dropdown-item-meta {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

.blog-dropdown-item[aria-selected='true'] .blog-dropdown-item-meta {
  color: #ff4800;
}

.blog-dropdown-btn[aria-expanded='true'] .blog-dropdown-chevron {
  transform: rotate(180deg);
}

.blog-dropdown-chevron {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border: 1px solid rgba(12, 12, 12, 0.1);
  background-color: #fff;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.blog-filter-chip:hover {
  border-color: rgba(255, 91, 46, 0.35);
  background-color: #f8fafc;
}

.blog-filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.blog-filter-chip-remove:hover {
  background-color: #f1f5f9;
  color: #1e293b;
}

.blog-filter-chip-remove:focus-visible {
  outline: 2px solid #ff4800;
  outline-offset: 1px;
}

/* Category pill (on cards) — outlined editorial label.
   Transparent fill + parchment border keeps the card calm; uppercase mono
   gives it the same kicker DNA as the homepage section eyebrows. */

.blog-pill,
.blog-pill-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 9999px;
  border: 1px solid var(--portant-parchment);
  background-color: transparent;
  font-weight: 600;
  white-space: nowrap;
  font-family: IBM Plex Mono, ui-monospace, monospace;
  text-transform: uppercase;
  color: #4b4844;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Subtle accent dot keeps the category scannable without adding weight. */

.blog-pill::before,
.blog-pill-sm::before {
  content: '';
  display: inline-block;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 9999px;
  background-color: var(--portant-orange);
}

.blog-pill {
  padding: 0.25rem 0.6875rem;
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
}

.blog-pill-sm {
  padding: 0.1875rem 0.5625rem;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
}

.blog-card:hover .blog-pill,
.blog-card:hover .blog-pill-sm,
.blog-row-card:hover .blog-pill,
.blog-row-card:hover .blog-pill-sm {
  border-color: var(--portant-dark-parchment);
}

/* 16:9 thumbnails — article cards only (playbooks use full-bleed tall covers) */

.blog-thumb-16x9 {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

/* No image scrim on article cards: keep artwork bright like marketing imagery */

.blog-thumb-16x9--article img {
  transform-origin: center center;
}

/* Playbook: tall panel, text over image */

.blog-playbook-cover {
  z-index: 0;
}

.blog-playbook-scrim {
  background: linear-gradient(
    to top,
    rgb(15 23 42 / 0.94) 0%,
    rgb(15 23 42 / 0.55) 38%,
    rgb(15 23 42 / 0.2) 68%,
    rgb(15 23 42 / 0.06) 100%
  );
  pointer-events: none;
}

/* Blog cards: subtle resting depth, soft warm hover lift. Mirrors the homepage
   "How it works" / power-feature card rhythm — confident but never glossy. */

.blog-card:not(.blog-card--hero),
.blog-row-card {
  box-shadow: 0 1px 2px 0 rgb(12 12 12 / 0.04);
}

.blog-card--hero {
  box-shadow: 0 1px 2px 0 rgb(12 12 12 / 0.05),
    0 8px 24px -8px rgb(12 12 12 / 0.06);
}

.blog-playbook-card {
  box-shadow:
    0 4px 6px -1px rgb(15 23 42 / 0.08),
    0 2px 4px -2px rgb(15 23 42 / 0.06);
}

.blog-card,
.blog-row-card,
.blog-playbook-card {
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease;
}

.blog-card:hover,
.blog-row-card:hover {
  transform: translateY(-2px);
  border-color: var(--portant-dark-parchment);
  box-shadow:
    0 4px 6px -1px rgb(12 12 12 / 0.06),
    0 18px 38px -12px rgb(12 12 12 / 0.12);
}

.blog-card--hero:hover {
  transform: translateY(-3px);
  border-color: var(--portant-dark-parchment);
  box-shadow:
    0 8px 12px -2px rgb(12 12 12 / 0.08),
    0 24px 48px -12px rgb(12 12 12 / 0.14);
}

.blog-playbook-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 12px -2px rgb(15 23 42 / 0.1),
    0 18px 36px -6px rgb(15 23 42 / 0.14);
}

/* Netflix-style horizontal scroll row */

.blog-row-wrap {
  position: relative;
}

.blog-row-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.blog-row-track::-webkit-scrollbar {
  display: none;
}

.blog-row-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(12, 12, 12, 0.1);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  color: #0c0c0c;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, background-color 0.25s ease;
}

@media (min-width: 641px) {
  .blog-row-arrow {
    display: flex;
  }
}

.blog-row-arrow:hover {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  transform: translateY(-50%) scale(1.08);
  background-color: #fff;
}

.blog-row-arrow:active {
  transform: translateY(-50%) scale(0.98);
}

.blog-row-arrow--left {
  left: -8px;
}

.blog-row-arrow--right {
  right: -8px;
}

.blog-row-arrow--hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Blog article hero (individual post) — editorial stack + wide cover */

.blog-article-hero__category {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  background-color: rgba(226, 232, 240, 0.72);
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1e293b;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.blog-article-hero__category:hover {
  background-color: rgba(203, 213, 225, 0.85);
  color: #020617;
}

/* Hero cover: bleed to .container-site edges when single-column; at lg match main article column only (not sidebar lane) */

.blog-article-hero__cover {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.blog-article-hero__cover .blog-article-cover,
.blog-article-hero__cover .blog-article-cover > div {
  width: 100%;
  max-width: 100%;
}

/* ================================================================
   BLOG ARTICLE — MOBILE "ON THIS PAGE" PILL + BOTTOM SHEET
   Mirrors the docs feature (.docs-toc-pill / .docs-toc-drawer) but
   scoped to blog articles. Hidden at >=lg where the right-rail
   sidebar (author + TOC) is visible.
   ================================================================ */

.blog-toc-pill {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: #ff4800;
  border: 1px solid #ff4800;
  border-radius: 9999px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.blog-toc-pill:hover {
  background: color-mix(in srgb, #ff4800 90%, black);
  border-color: color-mix(in srgb, #ff4800 90%, black);
}

.blog-toc-pill:active {
  transform: translateX(-50%) scale(0.97);
}

.blog-toc-pill svg {
  width: 18px;
  height: 18px;
  color: #fff;
  transition: transform 0.25s ease;
}

.blog-toc-pill.is-open svg {
  transform: rotate(180deg);
}

@media (max-width: 1023.98px) {
  .blog-toc-pill {
    display: flex;
  }
}

.blog-toc-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0);
  visibility: hidden;
  transition: background 0.3s ease, visibility 0s 0.3s;
}

.blog-toc-overlay.is-open {
  background: rgba(0, 0, 0, 0.35);
  visibility: visible;
  transition: background 0.3s ease, visibility 0s 0s;
}

.blog-toc-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  max-height: 80vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blog-toc-overlay.is-open .blog-toc-drawer {
  transform: translateY(0);
}

.blog-toc-drawer-handle {
  flex-shrink: 0;
  padding: 12px 0;
  display: flex;
  justify-content: center;
}

.blog-toc-drawer-handle::before {
  content: "";
  width: 40px;
  height: 4px;
  background: rgba(12, 12, 12, 0.18);
  border-radius: 2px;
}

.blog-toc-drawer-author {
  flex-shrink: 0;
  padding: 0 20px 20px;
}

.blog-toc-drawer-author .blog-sidebar-author-panel {
  margin-bottom: 0;
}

.blog-toc-drawer-title {
  flex-shrink: 0;
  margin: 0;
  padding: 0 20px 12px;
}

.blog-toc-drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 28px;
  -webkit-overflow-scrolling: touch;
}

.blog-toc-drawer-nav-inner {
  border-left: 1px solid rgba(12, 12, 12, 0.1);
  display: flex;
  flex-direction: column;
}

.blog-toc-drawer-nav a {
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #777169;
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  white-space: normal;
  word-wrap: break-word;
}

.blog-toc-drawer-nav a:hover {
  color: #0c0c0c;
  background-color: rgba(15, 23, 42, 0.04);
}

.blog-toc-drawer-nav a.active {
  color: #ff4800;
  font-weight: 500;
  border-left-color: #ff4800;
  background-color: rgba(255, 91, 46, 0.06);
}

body.blog-toc-open {
  overflow: hidden;
}

/* Divider between Featured and category rows — parchment hairline like
   the section borders Nick uses on the homepage. */

#blog-category-rows {
  border-top: 1px solid var(--portant-parchment);
}

/* Row section separator */

.blog-row-section + .blog-row-section {
  border-top: 1px solid var(--portant-parchment);
  margin-top: 0;
}

/* ============================================================ */

/* Article body prose — blog reading system                     */

/* ============================================================ */

.article-body {
  --article-accent-soft: rgba(255, 91, 46, 0.09);
  --article-accent-softer: rgba(255, 91, 46, 0.05);
}

/* --- Headings ------------------------------------------------ */

.article-body h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #0c0c0c;
  margin-top: 4rem;
  margin-bottom: 1.125rem;
  line-height: 1.22;
  letter-spacing: -0.025em;
}

/* Anchor targets + TOC: clear fixed nav (h-20) */

.article-body h2[id],
.article-body h3[id] {
  scroll-margin-top: 6rem;
}

.article-body h2:first-child {
  margin-top: 0;
}

.article-body h3 {
  font-size: 1.3125rem;
  font-weight: 600;
  color: #0c0c0c;
  margin-top: 3rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.article-body h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #0c0c0c;
  margin-top: 2.25rem;
  margin-bottom: 0.5rem;
  line-height: 1.32;
  letter-spacing: -0.015em;
}

/* --- Body text & lead ---------------------------------------- */

.article-body p {
  margin-bottom: 1.85rem;
  line-height: 1.8;
  color: #303030;
  font-size: 1.25rem;
  letter-spacing: -0.006em;
}

.article-body > p:first-of-type {
  font-size: 1.375rem;
  line-height: 1.6;
  font-weight: 600;
  color: #0c0c0c;
  opacity: 0.9;
  margin: 0 0 2.25rem;
  padding-left: 1.25rem;
  border-left: 3px solid rgba(12, 12, 12, 0.12);
}

/* --- Links --------------------------------------------------- */

.article-body a {
  color: #ff4800;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(255, 91, 46, 0.32);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease, background-color 0.15s ease;
  border-radius: 2px;
}

.article-body a:hover {
  color: color-mix(in srgb, #ff4800 85%, black);
  text-decoration-color: color-mix(in srgb, #ff4800 85%, black);
  background-color: var(--article-accent-softer);
}

/* --- Bold ---------------------------------------------------- */

.article-body strong {
  color: #0c0c0c;
  font-weight: 600;
}

/* --- Unordered lists ----------------------------------------- */

.article-body ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.85rem;
  color: #303030;
  font-size: 1.25rem;
}

.article-body ul > li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: 0.7rem;
  line-height: 1.82;
}

.article-body ul > li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.68em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff4800 0%, #ff8550 100%);
  box-shadow: 0 0 0 3px var(--article-accent-soft);
}

.article-body ul > li:last-child {
  margin-bottom: 0;
}

.article-body ul ul > li {
  padding-left: 1.55rem;
}

.article-body ul ul > li::before {
  width: 5px;
  height: 5px;
  top: 0.72em;
  background: #0c0c0c;
  opacity: 0.22;
  box-shadow: none;
}

.article-body ul ul ul > li::before {
  border-radius: 2px;
  width: 6px;
  height: 2px;
  top: 0.85em;
  opacity: 0.35;
}

/* --- Ordered lists ------------------------------------------- */

.article-body ol {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.85rem;
  counter-reset: article-ol;
  color: #303030;
  font-size: 1.25rem;
}

.article-body ol > li {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1rem;
  line-height: 1.82;
  counter-increment: article-ol;
}

.article-body ol > li::before {
  content: counter(article-ol);
  position: absolute;
  left: 0;
  top: 0.15em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.875rem;
  height: 1.875rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: linear-gradient(165deg, #fff 0%, #F0EFED 100%);
  border: 1px solid rgba(12, 12, 12, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ff4800;
  line-height: 1;
}

.article-body ol > li:last-child {
  margin-bottom: 0;
}

/* Nested ordered: letters, then roman */

.article-body ol ol {
  counter-reset: article-ol-sub;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

.article-body ol ol > li {
  counter-increment: article-ol-sub;
  padding-left: 2.5rem;
}

.article-body ol ol > li::before {
  content: counter(article-ol-sub, lower-alpha) ".";
  min-width: 1.625rem;
  height: 1.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0c0c0c;
  background: rgba(248, 247, 245, 0.9);
  border-radius: 8px;
}

.article-body ol ol ol {
  counter-reset: article-ol-subsub;
}

.article-body ol ol ol > li {
  counter-increment: article-ol-subsub;
}

.article-body ol ol ol > li::before {
  content: counter(article-ol-subsub, lower-roman) ".";
  font-size: 0.7rem;
  border-radius: 6px;
  color: #777169;
}

/* Nested lists spacing */

.article-body ul ul,
.article-body ol ul,
.article-body ul ol,
.article-body ol ol {
  margin-top: 0.65rem;
  margin-bottom: 0.65rem;
}

/* --- Inline code --------------------------------------------- */

.article-body code {
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.84em;
  font-weight: 500;
  background-color: rgba(248, 247, 245, 0.95);
  border: 1px solid rgba(12, 12, 12, 0.08);
  border-radius: 6px;
  padding: 0.12em 0.42em;
  color: #3f3f46;
}

/* --- Pre / code blocks --------------------------------------- */

.article-body pre {
  margin: 2rem 0;
  padding: 1.125rem 1.35rem;
  overflow-x: auto;
  border-radius: 12px;
  background: linear-gradient(165deg, #1c1c1c 0%, #141414 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.35);
  font-size: 0.875rem;
  line-height: 1.65;
  color: #e4e4e0;
}

.article-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
}

/* --- Images & embedded media (full width of article column) ---- */

.article-body img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 2.25rem 0;
  border: none;
  box-shadow: none;
}

.article-body .grid img,
.article-body blockquote img {
  display: block;
  width: 2.5rem;
  min-width: 2.5rem;
  max-width: 2.5rem;
  height: 2.5rem;
  max-height: 2.5rem;
  border-radius: 0.5rem;
  margin: 0;
  border: none;
  box-shadow: none;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
}

.article-body .grid img.rounded-full {
  border-radius: 9999px;
  width: 5rem;
  min-width: 5rem;
  max-width: 5rem;
  height: 5rem;
  min-height: 5rem;
  max-height: 5rem;
  margin: 0 auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.article-body .partner-card img {
  display: block;
  width: 4rem;
  min-width: 4rem;
  max-width: 4rem;
  height: 4rem;
  min-height: 4rem;
  max-height: 4rem;
  border-radius: 9999px;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.article-body .grid p {
  margin-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.article-body .partner-card p {
  margin: 0;
}

.article-body picture {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 2.25rem 0;
}

.article-body picture img {
  margin-top: 0;
  margin-bottom: 0;
}

.article-body video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 2.25rem 0;
  border: 1px solid rgba(12, 12, 12, 0.06);
  box-shadow: 0 20px 50px -28px rgba(15, 23, 42, 0.25);
}

.article-body iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 2.25rem 0;
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: 14px;
  box-shadow: 0 20px 50px -28px rgba(15, 23, 42, 0.25);
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 12rem;
}

/* Typography plugin: keep article media edge-to-edge in customer stories */

.article-body.prose img,
.article-body.prose video,
.article-body.prose iframe {
  width: 100%;
  max-width: 100%;
}

/* --- Blockquotes (quotes) ------------------------------------ */

.article-body blockquote {
  position: relative;
  border: 1px solid rgba(12, 12, 12, 0.06);
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem;
  margin: 2.25rem 0;
  color: #0c0c0c;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1.72;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.article-body blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0.85rem;
  top: 0.35rem;
  font-size: 3.25rem;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  color: rgba(255, 91, 46, 0.14);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.article-body blockquote p {
  position: relative;
  z-index: 1;
  margin-bottom: 0.5rem;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  font-style: italic;
}

.article-body blockquote p:last-child {
  margin-bottom: 0;
}

.article-body blockquote em {
  font-style: italic;
  color: #777169;
  font-weight: 400;
}

.article-body blockquote footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.article-body blockquote footer img {
  height: 32px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  min-height: 32px;
  max-height: 32px;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0;
  border: none;
  box-shadow: none;
}

.article-body blockquote footer span {
  font-size: 0.875rem;
  font-weight: 600;
  color: #777169;
  line-height: 1.4;
}

.article-body blockquote footer strong {
  color: #0c0c0c;
}

/* --- Tables -------------------------------------------------- */

.article-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2.25rem 0;
  font-size: 0.9375rem;
  border: 1px solid rgba(12, 12, 12, 0.1);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 36px -22px rgba(15, 23, 42, 0.2);
}

.article-body th,
.article-body td {
  padding: 0.875rem 1.2rem;
  text-align: left;
  color: #777169;
  border-bottom: 1px solid rgba(12, 12, 12, 0.1);
  vertical-align: top;
}

.article-body th {
  background: linear-gradient(180deg, #F0EFED 0%, #EBE8E4 100%);
  color: #0c0c0c;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(12, 12, 12, 0.1);
}

.article-body tbody tr {
  transition: background-color 0.15s ease;
}

.article-body tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.45);
}

.article-body tr:last-child td {
  border-bottom: none;
}

.article-body tbody tr:nth-child(even) td {
  background: rgba(248, 247, 245, 0.55);
}

.article-body tbody tr:nth-child(even):hover td {
  background-color: rgba(255, 255, 255, 0.65);
}

/* --- Figures & captions (Webflow: figure > div > img|iframe) -- */

.article-body figure,
.article-body [class*='w-richtext-figure'] {
  margin: 2.5rem 0;
  width: 100%;
  max-width: 100%;
}

.article-body figure > div,
.article-body [class*='w-richtext-figure'] > div {
  width: 100%;
}

.article-body figure picture,
.article-body [class*='w-richtext-figure'] picture {
  margin-top: 0;
  margin-bottom: 0;
}

.article-body figure img,
.article-body figure video,
.article-body figure iframe,
.article-body [class*='w-richtext-figure'] img,
.article-body [class*='w-richtext-figure'] video,
.article-body [class*='w-richtext-figure'] iframe {
  margin-top: 0;
  margin-bottom: 0;
}

.article-body figcaption {
  font-size: 0.8125rem;
  color: #94908a;
  text-align: center;
  margin-top: 0.75rem;
  line-height: 1.55;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
  letter-spacing: -0.01em;
}

/* --- Horizontal rules ---------------------------------------- */

.article-body hr {
  position: relative;
  height: 1px;
  margin: 3rem 0;
  border: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(12, 12, 12, 0.12) 22%,
    rgba(12, 12, 12, 0.12) 78%,
    transparent 100%
  );
}

.article-body hr::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #ff4800;
  opacity: 0.45;
  box-shadow: 0 0 0 4px var(--article-accent-soft);
}

/* --- Callout box (pro tips) ---------------------------------- */

.article-callout {
  position: relative;
  background: #f6f5f4;
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: 14px;
  padding: 1.35rem 1.5rem;
  margin: 2.25rem 0;
}

.article-callout p {
  margin-bottom: 0;
  color: #0c0c0c;
  line-height: 1.72;
  font-size: 1.03rem;
}

.article-callout strong {
  color: #0c0c0c;
}

/* === Zero to Hero event branding ============================================
   Used by /blog/zero-to-hero-* event articles. Mirrors getzerotohero.netlify.app
   brand: deep navy backdrop, neon-pink primary, pink→gold→aqua signature gradient.
   Component classes are scoped under .article-body so they win the cascade
   against the default article typography (p color, link color, list bullets, etc).
============================================================================ */

.article-body {
  --zth-dark: #0f1225;
  --zth-navy: #2b2e4a;
  --zth-pink: #e5097f;
  --zth-gold: #febd3b;
  --zth-aqua: #91d1ce;
  --zth-soft-pink: #fce7f3;
  --zth-gradient: linear-gradient(90deg, #e5097f 0%, #febd3b 50%, #91d1ce 100%);
}

.article-body .zth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.article-body .zth-eyebrow::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--zth-pink);
  box-shadow: 0 0 0 4px rgba(229, 9, 127, 0.18);
}

.article-body .zth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #ffffff;
  background: var(--zth-pink);
  border: none;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 32px -10px rgba(229, 9, 127, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.article-body .zth-btn:hover {
  background: #ff1a8a;
  transform: translateY(-1px);
  box-shadow: 0 20px 40px -12px rgba(229, 9, 127, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #ffffff;
  text-decoration: none;
}

.article-body .zth-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.45rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.article-body .zth-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}

.article-body .zth-btn-arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}

.article-body .zth-btn:hover .zth-btn-arrow {
  transform: translateX(3px);
}

/* Hero panel: branded opening block that replaces a stock blockquote */

.article-body .zth-hero {
  position: relative;
  margin: 2.5rem 0 3rem;
  padding: 2.5rem 2rem 2.25rem;
  border-radius: 22px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(229, 9, 127, 0.18) 0%, transparent 55%),
              radial-gradient(110% 130% at 100% 100%, rgba(145, 209, 206, 0.14) 0%, transparent 55%),
              linear-gradient(160deg, #0f1225 0%, #1a1d35 60%, #0f1225 100%);
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(15, 18, 37, 0.6);
}

.article-body > .zth-hero:first-child {
  margin-top: 0;
}

.article-body .zth-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--zth-gradient);
}

.article-body .zth-hero .zth-eyebrow {
  margin-bottom: 1.1rem;
}

.article-body .zth-hero h2,
.article-body .zth-hero p,
.article-body .zth-hero strong,
.article-body .zth-hero em {
  color: #ffffff;
}

.article-body .zth-hero p {
  margin: 0 0 1.4rem;
  font-size: 1.18rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 400;
}

.article-body .zth-hero p strong {
  color: #ffffff;
  font-weight: 600;
}

.article-body .zth-hero p em {
  font-style: normal;
  background: var(--zth-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

.article-body .zth-hero a:not(.zth-btn):not(.zth-btn-ghost) {
  color: var(--zth-soft-pink);
  text-decoration-color: rgba(252, 231, 243, 0.45);
}

.article-body .zth-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin: 1.5rem 0 0;
}

/* Pull-quote: editorial display style, no clichéd serif quotemark */

.article-body .zth-quote {
  position: relative;
  margin: 3rem 0;
  padding: 2rem 0 2rem 1.85rem;
  border-left: 3px solid transparent;
  -o-border-image: var(--zth-gradient) 1;
     border-image: var(--zth-gradient) 1;
  background: transparent;
}

.article-body .zth-quote p {
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1.6rem;
  line-height: 1.32;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: #0c0c0c;
}

.article-body .zth-quote p + p {
  margin-top: 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #94908a;
  letter-spacing: 0;
  line-height: 1.5;
}

/* Event details card: dark navy with brand-gradient top stripe */

.article-body .zth-details-card {
  position: relative;
  margin: 2.5rem 0;
  padding: 2rem 1.85rem 1.85rem;
  border-radius: 20px;
  background: linear-gradient(180deg, #0f1225 0%, #161936 100%);
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(15, 18, 37, 0.55);
}

.article-body .zth-details-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--zth-gradient);
}

.article-body .zth-details-card .zth-eyebrow {
  margin-bottom: 1.2rem;
}

.article-body .zth-details-card h3 {
  margin: 0 0 1.4rem;
  padding: 0;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.2;
}

.article-body .zth-details-card h3::before {
  display: none;
}

.article-body .zth-details-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}

.article-body .zth-details-rows li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  line-height: 1.5;
}

.article-body .zth-details-rows li::before {
  display: none;
}

.article-body .zth-details-rows li svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  color: var(--zth-soft-pink);
  opacity: 0.9;
}

.article-body .zth-details-rows li strong {
  color: #ffffff;
  font-weight: 600;
  margin-right: 0.45rem;
}

.article-body .zth-details-card .zth-hero-actions {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Partner logos row */

.article-body .zth-partner-strip {
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.article-body .zth-partner-strip-label {
  margin: 0 0 0.85rem;
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.article-body .zth-partner-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.75rem 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-body .zth-partner-logos li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.article-body .zth-partner-logos li::before {
  display: none;
}

.article-body .zth-partner-logos img {
  display: block;
  margin: 0;
  width: auto;
  max-width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.article-body .zth-partner-logos img.zth-partner-logo--portant {
  height: 22px;
}

.article-body .zth-partner-logos img.zth-partner-logo--supered {
  height: 28px;
}

.article-body .zth-partner-logos img.zth-partner-logo--askelephant {
  height: 28px;
}

/* Inline standalone CTA row (between sections, not inside a dark panel) */

.article-body .zth-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 2.25rem 0;
}

.article-body .zth-cta-row p {
  margin: 0;
  color: #94908a;
  font-size: 0.95rem;
}

/* Responsive tweaks */

@media (min-width: 640px) {
  .article-body .zth-hero {
    padding: 3rem 2.75rem 2.75rem;
  }

  .article-body .zth-hero p {
    font-size: 1.25rem;
  }

  .article-body .zth-quote p {
    font-size: 1.85rem;
  }

  .article-body .zth-details-card {
    padding: 2.5rem 2.25rem 2.25rem;
  }

  .article-body .zth-details-card h3 {
    font-size: 1.85rem;
  }
}

/* Article sidebars (blog + customer stories): template gallery–style section labels */

.article-sidebar-label {
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94908a;
}

/* Blog + customer-story article sidebar: no elevation shadow on stacked panels */

.article-sidebar .article-sidebar-stack > * {
  box-shadow: none;
}

/* TOC block: sit on canvas — no card surface */

.article-sidebar-toc {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Improved TOC sidebar link */

.toc-link {
  display: block;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #94908a;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.docs-toc-nav {
  min-width: 0;
  max-width: 100%;
}

.docs-toc-nav .toc-link {
  color: #777169;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-toc-nav .toc-link:hover {
  color: #0c0c0c;
  background-color: rgba(15, 23, 42, 0.04);
}

.docs-toc-nav .toc-link.active {
  color: #ff4800;
  font-weight: 500;
  border-left-color: #ff4800;
  background-color: rgba(255, 91, 46, 0.06);
}

.toc-link:hover {
  color: #0c0c0c;
}

.toc-link.active {
  color: #ff4800;
  font-weight: 500;
  border-left-color: #ff4800;
}

/* Blog article hero: byline headshot */

.blog-hero-author-avatar {
  box-shadow:
    0 0 0 1px rgba(12, 12, 12, 0.1),
    0 2px 8px -2px rgba(15, 23, 42, 0.12);
}

/* Blog article sidebar: author card (homepage-style panel + dark CTA) */

.blog-sidebar-author-card {
  border-radius: 0.5rem;
  border: 1px solid rgba(12, 12, 12, 0.1);
  background-color: #fff;
  box-shadow:
    0 18px 50px -24px rgba(15, 23, 42, 0.14),
    0 8px 24px -12px rgba(15, 23, 42, 0.08);
  padding: 1.5rem;
}

.blog-sidebar-author-ctas {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.blog-sidebar-author-panel .btn-accent,
.blog-sidebar-author-cta .btn-accent {
  background-color: #0c0c0c;
  color: #fff;
}

.blog-sidebar-author-panel .btn-accent:hover,
.blog-sidebar-author-cta .btn-accent:hover {
  background-color: #2a2a2a;
}

/* Category + read time row (sidebar) */

.blog-sidebar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.blog-sidebar-category-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid rgba(12, 12, 12, 0.1);
  background-color: #EBE8E4;
  padding: 0.3125rem 0.75rem;
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0c0c0c;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.blog-sidebar-category-pill:hover {
  border-color: #ff4800;
  background-color: rgba(255, 91, 46, 0.08);
  color: #ff4800;
}

.blog-sidebar-meta__read {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #777169;
}

.blog-sidebar-cta {
  margin-top: 1.25rem;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: #0c0c0c;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  transition: background-color 0.15s ease;
}

.blog-sidebar-cta:hover {
  background-color: #262626;
}

/* Improved author card (legacy / other contexts) */

.author-card {
  border-radius: 0.5rem;
  background-color: #F0EFED;
  border: 1px solid rgba(12, 12, 12, 0.1);
  padding: 1.25rem;
}

/* Footer responsive — mobile-first */

@media (min-width: 640px) {
  .site-footer-inner {
    padding: 2.5rem 1.5rem;
  }

  .site-footer-inner::before {
    left: 1.5rem;
    right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .site-footer-inner {
    padding: 3.125rem 3rem;
  }

  .site-footer-inner::before {
    left: 3rem;
    right: 3rem;
  }

  .site-footer-links {
    flex-wrap: nowrap;
    gap: 1.5rem;
  }

  .site-footer-col {
    width: 25%;
    flex: 1 1 0%;
  }
}

/* ============================================================ */

/* Homepage: compositions, hero, testimonials, flow, templates   */

/* (merged from homepage.css)                                    */

/* ============================================================ */

body {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  background-color: #f6f5f4;
  color: #0c0c0c;
}

/* Homepage FAQ: extra vertical breathing room */

.portant-home-main .module-faq {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

@media (min-width: 640px) {
  .portant-home-main .module-faq {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* Customer featured carousel (homepage; matches /customers featured UX) */

.customers-featured-track {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.customers-featured-track::-webkit-scrollbar {
  display: none;
}

/* Homepage: gutter lives on the track so it scrolls with cards (no hard clip at scrollport left) */

.customers-featured-outer .customers-featured-track {
  padding-left: 1rem;
  padding-right: 1rem;
  scroll-padding-left: 1rem;
}

@media (min-width: 640px) {
  .customers-featured-outer .customers-featured-track {
    padding-left: max(1.5rem, calc((100% - 86rem) / 2 + 1.5rem));
    padding-right: 1.5rem;
    scroll-padding-left: max(1.5rem, calc((100% - 86rem) / 2 + 1.5rem));
  }
}

@media (min-width: 1024px) {
  /* Match .container-site's effective content offset. container-site has
     max-width: 86rem + padding-left: 3rem, so at viewports >86rem the
     centred container pushes content by (100% - 86rem) / 2 + 3rem.
     max() collapses to 3rem at narrower viewports. */

  .customers-featured-outer .customers-featured-track {
    padding-left: max(3rem, calc((100% - 86rem) / 2 + 3rem));
    padding-right: 2rem;
    scroll-padding-left: max(3rem, calc((100% - 86rem) / 2 + 3rem));
  }
}

.customers-featured-slide {
  scroll-snap-align: center;
  flex: 0 0 min(92vw, 68rem);
}

.customers-photo-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.45;
  pointer-events: none;
}

[data-home-featured-tab].is-active {
  border-color: #0c0c0c !important;
  background-color: #0c0c0c !important;
  color: #fff !important;
}

[data-home-featured-tab].is-active img {
  /* Avoid brightness() here: extreme values can blow out or hide the photo on the dark pill */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* .home-security-card now applies a simple white card style via utility classes in markup. */

/* Homepage only: extra vertical breathing room (hero class is shared with /customers/) */

.portant-home-main .module-hero {
  padding-top: 2.5rem;
  padding-bottom: 4.5rem;
}

@media (min-width: 640px) {
  .portant-home-main .module-hero {
    padding-top: 4rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1024px) {
  .portant-home-main .module-hero {
    padding-top: 5.5rem;
    padding-bottom: 7.5rem;
  }
}

.hero-composition {
  min-height: 360px;
  isolation: isolate;
}

.hero-grid-panel {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.42) 1px, transparent 1px);
  background-size: 28px 28px;
}

.hero-doc-card {
  border: 1px solid rgba(12, 12, 12, 0.1);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(2px);
}

.hero-doc-rule {
  height: 1px;
  background: rgba(12, 12, 12, 0.2);
}

.hero-doc-rule-light {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.testimonial-row-reference-style {
  --ref-card-w: 340px;
  --ref-card-h: 480px;
  --ref-card-radius: 14px;
  --ref-card-border: 1.5px solid rgba(34, 34, 34, 0.08);
}

.testimonial-row-reference-style .ref-card {
  width: var(--ref-card-w);
  height: var(--ref-card-h);
  border-radius: var(--ref-card-radius);
  border: var(--ref-card-border);
  box-shadow: none;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.testimonial-row-reference-style .ref-card.ref-card-01 {
  background-color: #fbfbfb;
}

.testimonial-row-reference-style .ref-card.ref-card-01 .ref-num {
  color: #0c0c0c;
  opacity: 0.4;
}

.testimonial-row-reference-style .ref-card.ref-card-01 .ref-main {
  color: #0c0c0c;
}

.testimonial-row-reference-style .ref-card.ref-card-01 .ref-sub {
  color: #0c0c0c;
}

.testimonial-row-reference-style .ref-card.ref-card-02 {
  background-color: #fa0;
}

.testimonial-row-reference-style .ref-card.ref-card-02 .ref-num {
  color: #0c0c0c;
  opacity: 0.4;
}

.testimonial-row-reference-style .ref-card.ref-card-02 .ref-main {
  color: #0c0c0c;
}

.testimonial-row-reference-style .ref-card.ref-card-02 .ref-sub {
  color: #0c0c0c;
}

.testimonial-row-reference-style .ref-card.ref-card-03 {
  background-color: var(--portant-ref-red);
}

.testimonial-row-reference-style .ref-card.ref-card-03 .ref-num {
  color: #fff;
  opacity: 0.5;
}

.testimonial-row-reference-style .ref-card.ref-card-03 .ref-main {
  color: #fff;
}

.testimonial-row-reference-style .ref-card.ref-card-03 .ref-sub {
  color: rgba(255, 255, 255, 0.85);
}

.testimonial-row-reference-style .ref-card .ref-num {
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  margin-bottom: 1rem;
}

.testimonial-row-reference-style .ref-card .ref-main {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.4px;
  flex-shrink: 0;
}

.testimonial-row-reference-style .ref-card .ref-sub {
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
  margin-top: auto;
}

.testimonial-row-reference-style .ref-card .ref-logo {
  margin-top: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-row-reference-style .ref-card .ref-logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 4px;
}

.testimonial-row-reference-style .ref-card .ref-logo .ref-logo-initials {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #777169;
  line-height: 1;
}

.testimonial-row-reference-style .ref-card.ref-card-img {
  padding: 0;
  overflow: hidden;
  border: var(--ref-card-border);
}

.testimonial-row-reference-style .ref-card.ref-card-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

@media (min-width: 640px) {
  .hero-composition {
    min-height: 460px;
    max-width: 520px;
  }
}

@media (min-width: 1024px) {
  .hero-composition {
    min-height: 560px;
    max-width: none;
  }
}

/* ── Social-proof bento grid ──────────────────────────────── */

.proof-bento {
  display: flex;
  flex-direction: column;
  /* Match home-security-card grid gap on mobile (gap-1.5 = 0.375rem). */
  gap: 0.375rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .proof-bento {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
  }

  .proof-bento .proof-bento__primary {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    order: 2;
  }

  .proof-bento .proof-bento__primary .proof-bento__card--hero {
    flex: 1 1 auto;
    min-height: 320px;
  }

  .proof-bento .proof-bento__side {
    min-width: 0;
    align-self: stretch;
    order: 1;
  }
}

.proof-bento__side {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

@media (min-width: 640px) {
  .proof-bento__side {
    gap: 1rem;
  }
}

.proof-bento__row--wide-narrow,
.proof-bento__row--narrow-wide {
  display: grid;
  gap: 0.375rem;
  grid-template-columns: 1fr;
  min-width: 0;
  /* Do not flex-shrink rows below content — was causing overflow:visible overlap */
}

@media (min-width: 640px) {
  .proof-bento__row--wide-narrow,
  .proof-bento__row--narrow-wide {
    gap: 1rem;
  }
}

/* Mobile: stat row gets two columns; the longer-text row stays single column. */

.proof-bento__row--wide-narrow {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (min-width: 640px) {
  .proof-bento__row--wide-narrow {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  .proof-bento__row--narrow-wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

.proof-bento__card {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  padding: 1.25rem;
  min-height: 160px;
  min-width: 0;
}

@media (min-width: 640px) {
  .proof-bento__card {
    padding: 1.75rem;
    min-height: 260px;
  }
}

/* Hero photo card */

.proof-bento__card--hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 240px;
  box-shadow: 0 1px 2px rgba(12, 12, 12, 0.06);
}

.proof-bento .proof-bento__card--hero {
  border: 1px solid #e2dad2;
}

@media (min-width: 640px) {
  .proof-bento__card--hero {
    min-height: 300px;
  }
}

@media (min-width: 1024px) {
  .proof-bento__card--hero {
    min-height: 320px;
  }

  .proof-bento .proof-bento__card--hero {
    min-height: 100%;
  }
}

.proof-bento__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Bias toward face on right; slight downward offset so crop isn’t flush to the top */
  -o-object-position: 90% 15%;
     object-position: 90% 15%;
}

/* Overlay is positioned absolutely so the gradient always fills the card
   regardless of content height. Mobile: full-card vertical gradient. sm+:
   side-panel anchored to the left edge with a horizontal fade. */

.proof-bento__hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.2) 100%);
}

@media (min-width: 640px) {
  /* Scoped to .proof-bento so the side-panel treatment only fires inside the
     bento layout. Reused outside (e.g. portrait rail card) keeps the default
     full-card bottom gradient from the rule above. */

  .proof-bento .proof-bento__hero-overlay {
    inset: 0 auto 0 0;
    /* anchor left; full top-to-bottom */
    width: 55%;
    max-width: 22rem;
    padding: 1.75rem;
    justify-content: space-between;
    background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.55) 60%, transparent 100%);
  }
}

@media (min-width: 1024px) {
  .proof-bento .proof-bento__hero-overlay {
    width: min(100%, 24rem);
    max-width: none;
  }
}

.proof-bento__hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  height: 2.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  background: #fff;
  color: var(--portant-ink-black);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: background 0.15s;
  width: -moz-fit-content;
  width: fit-content;
}

.proof-bento__hero-cta:hover {
  background: rgba(255,255,255,0.92);
}

/* Stat card (white/inset bg) */

.proof-bento__card--stat {
  background-color: var(--portant-white);
  border: 1px solid #e2dad2;
  box-shadow: 0 1px 2px rgba(12, 12, 12, 0.04);
}

/* Canvas modifier — pricing free-plan tile palette by default, warm gradient border + white
   surface on hover. Card keeps a 1px parchment border at all times (no layout shift); the
   gradient ring is drawn by a ::before pseudo-element using the mask-composite "border-only"
   trick (outer rect minus content-box rect = a 1px ring). */

.proof-bento__card--canvas {
  position: relative;
  background-color: #f6f5f4;
  border: 1px solid #e2dad2;
  transition: background-color 0.2s ease;
  /* Min height defined here (not via Tailwind utilities) so it wins the
     cascade against the .proof-bento__card { min-height: 260px } component
     default at sm+. 16rem mobile, 20rem tablet (2x2), 24rem desktop (4-up). */
  min-height: 16rem;
}

@media (min-width: 640px) {
  .proof-bento__card--canvas {
    min-height: 20rem;
  }
}

@media (min-width: 1024px) {
  .proof-bento__card--canvas {
    min-height: 24rem;
  }
}

.proof-bento__card--canvas::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: var(--gradient-warm);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.proof-bento__card--canvas:hover,
.proof-bento__card--canvas:focus-visible {
  background-color: #fff;
}

.proof-bento__card--canvas:hover::before,
.proof-bento__card--canvas:focus-visible::before {
  opacity: 1;
}

/* HubSpot stat — brand orange, white type + lockup */

.proof-bento__card--hubspot {
  background-color: var(--portant-orange);
  border: 1px solid color-mix(in srgb, var(--portant-white) 22%, var(--portant-orange));
  box-shadow: 0 1px 2px rgba(12, 12, 12, 0.08);
}

.proof-bento__hubspot-lockup {
  filter: brightness(0) invert(1);
}

.proof-bento__hubspot-metric {
  color: var(--portant-white);
}

.proof-bento__hubspot-caption {
  color: color-mix(in srgb, var(--portant-white) 82%, transparent);
}

/* Brand stat card (Portant blue) */

.proof-bento__card--dark {
  background-color: var(--portant-ink-black);
  border: 1px solid color-mix(in srgb, var(--portant-white) 18%, var(--portant-ink-black));
  box-shadow: 0 1px 2px rgba(12, 12, 12, 0.06);
}

/* Quote card */

.proof-bento__card--quote {
  background-color: var(--portant-parchment);
  border: 1px solid #e2dad2;
  box-shadow: 0 1px 2px rgba(12, 12, 12, 0.04);
}

/* Portrait card variant — tall and narrow for use inside a horizontal rail
   (paired with .power-feature-cards-track). Sizing scales with breakpoint;
   layout-agnostic on its own. */

.proof-bento__card--portrait {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(85vw, 20rem);
  min-height: 22rem;
  transition: transform 0.2s ease;
  transform-origin: center;
}

@media (min-width: 640px) {
  .proof-bento__card--portrait {
    width: 22rem;
    min-height: 28rem;
  }
}

@media (min-width: 1024px) {
  .proof-bento__card--portrait {
    width: 24rem;
    min-height: 32rem;
  }
}

.proof-bento__card--portrait:hover,
.proof-bento__card--portrait:focus-visible {
  transform: scale(1.01);
}

/* Portrait hero overlay: quote at top, attribution at bottom.
   Mobile/tablet: full-card vertical gradient (works with rail card aspect).
   lg+: gradient hugs the left edge and fades out so the photo subject shows. */

.proof-bento__card--portrait .proof-bento__hero-overlay {
  justify-content: space-between;
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .proof-bento__card--portrait .proof-bento__hero-overlay {
    padding: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .proof-bento__card--portrait .proof-bento__hero-overlay {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.3) 35%,
      rgba(0, 0, 0, 0) 65%
    );
  }
}

/* Quote card footer: push to bottom so attribution sits at the chevron line
   on all sizes (overrides the mt-4 utility used at mobile). */

.proof-bento__card--portrait > footer {
  margin-top: auto;
}

/* Cap text-content line length so copy doesn't run into the right edge or
   sit underneath the chevron pinned at bottom-left. */

.proof-bento__card--portrait > p,
.proof-bento__card--portrait > div,
.proof-bento__card--portrait > footer,
.proof-bento__card--portrait .proof-bento__hero-overlay > p,
.proof-bento__card--portrait .proof-bento__hero-overlay > div {
  max-width: 90%;
}

@media (prefers-reduced-motion: reduce) {
  .proof-bento__card--portrait {
    transition: none;
  }

  .proof-bento__card--portrait:hover,
  .proof-bento__card--portrait:focus-visible {
    transform: none;
  }
}

/* Circular chevron-right affordance pinned to the bottom-left of a portrait
   card. Sized to match the Matthew B avatar (h-10 w-10 = 2.5rem). Dark by
   default; inverted on dark/photo card backgrounds. */

.proof-bento__card-chevron {
  position: absolute;
  bottom: 1.75rem;
  left: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: #0c0c0c;
  color: #fff;
  z-index: 2;
}

.proof-bento__card--hero .proof-bento__card-chevron,
.proof-bento__card--dark .proof-bento__card-chevron {
  background-color: #fff;
  color: #0c0c0c;
}

/* ============================================================ */

/* AI page proof-bento variants — dark palette                 */

/* ai-faint  : matches .surface-glass--faint (logo rail under hero) */

/* ai-cool   : matches the "active" .why-card state (cool gradient) */

/* ============================================================ */

.proof-bento__card--ai-faint {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 0;
  box-shadow: none;
  color: #fff;
}

.proof-bento__card--ai-faint::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient-glass-edge);
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.proof-bento__card--ai-cool {
  position: relative;
  isolation: isolate;
  border: 0;
  box-shadow: none;
  color: #fff;
}

.proof-bento__card--ai-cool::before,
.proof-bento__card--ai-cool::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.proof-bento__card--ai-cool::before {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(64, 223, 252, 0.20) 40%,
    rgba(24, 117, 251, 0.20) 75%,
    rgba(0, 56, 198, 0.20) 100%
  );
  z-index: -1;
}

.proof-bento__card--ai-cool::after {
  padding: 1px;
  background: var(--gradient-cool);
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Stars lockups masked to exact portant-orange (#FF4800). Filter chains drift,
   so the silhouette is recoloured via mask-image + background-color. */

.proof-bento__lockup-orange {
  display: block;
  background-color: var(--portant-orange);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.proof-bento__lockup-orange--hubspot {
  -webkit-mask-image: url('/assets/hubspot-stars.png');
  mask-image: url('/assets/hubspot-stars.png');
  aspect-ratio: 680 / 160;
}

.proof-bento__lockup-orange--g2 {
  -webkit-mask-image: url('/assets/g2-stars.png');
  mask-image: url('/assets/g2-stars.png');
  aspect-ratio: 688 / 160;
}

/* Chevron stays light on the new dark-mode card variants. */

.proof-bento__card--ai-faint .proof-bento__card-chevron,
.proof-bento__card--ai-cool .proof-bento__card-chevron {
  background-color: #fff;
  color: #0c0c0c;
}

.noise-panel {
  position: relative;
  overflow: hidden;
}

.noise-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.noise-panel > * {
  position: relative;
  z-index: 2;
}

.geo-circles::after {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 55% 50%, transparent calc(8% - 1px), rgba(255,255,255,0.20) 8%, rgba(255,255,255,0.20) calc(8% + 1px), transparent calc(8% + 2px)),
    radial-gradient(circle at 55% 50%, transparent calc(24% - 1px), rgba(255,255,255,0.16) 24%, rgba(255,255,255,0.16) calc(24% + 1px), transparent calc(24% + 2px)),
    radial-gradient(circle at 55% 50%, transparent calc(44% - 1px), rgba(255,255,255,0.13) 44%, rgba(255,255,255,0.13) calc(44% + 1px), transparent calc(44% + 2px)),
    radial-gradient(circle at 55% 50%, transparent calc(68% - 1px), rgba(255,255,255,0.10) 68%, rgba(255,255,255,0.10) calc(68% + 1px), transparent calc(68% + 2px));
  pointer-events: none;
  z-index: 1;
}

.geo-vlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent calc(42% - 1px), rgba(255,255,255,0.16) 42%, transparent calc(42% + 1px)),
    linear-gradient(90deg, transparent calc(56% - 1px), rgba(255,255,255,0.16) 56%, transparent calc(56% + 1px)),
    linear-gradient(90deg, transparent calc(66% - 1px), rgba(255,255,255,0.17) 66%, transparent calc(66% + 1px)),
    linear-gradient(90deg, transparent calc(74% - 1px), rgba(255,255,255,0.17) 74%, transparent calc(74% + 1px)),
    linear-gradient(90deg, transparent calc(80% - 1px), rgba(255,255,255,0.18) 80%, transparent calc(80% + 1px)),
    linear-gradient(90deg, transparent calc(84.5% - 1px), rgba(255,255,255,0.18) 84.5%, transparent calc(84.5% + 1px)),
    linear-gradient(90deg, transparent calc(88% - 1px), rgba(255,255,255,0.19) 88%, transparent calc(88% + 1px)),
    linear-gradient(90deg, transparent calc(90.5% - 1px), rgba(255,255,255,0.19) 90.5%, transparent calc(90.5% + 1px)),
    linear-gradient(90deg, transparent calc(92.5% - 1px), rgba(255,255,255,0.20) 92.5%, transparent calc(92.5% + 1px)),
    linear-gradient(90deg, transparent calc(94% - 1px), rgba(255,255,255,0.20) 94%, transparent calc(94% + 1px)),
    linear-gradient(90deg, transparent calc(95.5% - 1px), rgba(255,255,255,0.21) 95.5%, transparent calc(95.5% + 1px)),
    linear-gradient(90deg, transparent calc(96.8% - 1px), rgba(255,255,255,0.21) 96.8%, transparent calc(96.8% + 1px));
  pointer-events: none;
  z-index: 1;
}

.geo-hatching::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 21px,
      rgba(255,255,255,0.14) 21px,
      rgba(255,255,255,0.14) 22px
    ),
    linear-gradient(180deg, transparent calc(32% - 1px), rgba(255,255,255,0.10) 32%, transparent calc(32% + 1px)),
    linear-gradient(180deg, transparent calc(60% - 1px), rgba(255,255,255,0.10) 60%, transparent calc(60% + 1px)),
    linear-gradient(90deg, transparent calc(78% - 1px), rgba(255,255,255,0.08) 78%, transparent calc(78% + 1px)),
    linear-gradient(90deg, transparent calc(88% - 1px), rgba(255,255,255,0.08) 88%, transparent calc(88% + 1px));
  pointer-events: none;
  z-index: 1;
}

.flow-panel {
  position: relative;
  overflow: hidden;
  background: #e2dad2 url('/hero-icons/workflow-bg-pattern.svg') center / cover no-repeat;
  font-size: 1rem;
}

@media (max-width: 1023px) {
  .flow-panel {
    font-size: 0.8rem;
  }
}

@media (max-width: 639px)  {
  .flow-panel {
    font-size: 0.65rem;
  }
}

.flow-panel > * {
  position: relative;
  z-index: 1;
}

/* Node cards */

.flow-node {
  position: relative;
  border-radius: 0.375rem;
  border: 0.0625rem solid #c4b9ae;
  background: rgba(255, 255, 255, 0.98);
  padding: 1.15rem 1.45rem;
}

.flow-node__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Per-node icon colors */

.flow-node-1 {
  --icon-bg: #ff4800;
  --icon-border: #ffe4d8;
}

.flow-node-2 {
  --icon-bg: #EBE8E4;
  --icon-border: #f6f5f4;
}

.flow-node-3 {
  --icon-bg: #1875FB;
  --icon-border: #c8deff;
}

.flow-node-4 {
  --icon-bg: #ff4800;
  --icon-border: #ffe4d8;
}

/* Node icon */

.flow-icon {
  width: 2.5625rem;
  height: 2.5625rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--icon-bg);
  border: 0.25rem solid var(--icon-border);
}

.flow-icon img,
.flow-icon svg {
  width: 1.3rem;
  height: 1.3rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.flow-icon--roller {
  overflow: hidden;
  padding: 0;
  align-items: flex-start;
  justify-content: flex-start;
}

.flow-icon__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.0625rem;
  height: 2.0625rem;
  flex-shrink: 0;
}

/* Text roller for Node 2 value */

.flow-value-roller {
  overflow: hidden;
  height: 1.25rem;
  margin-top: 0.25rem;
}

.flow-value-roller__item {
  display: flex;
  align-items: center;
  height: 1.25rem;
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0c0c0c;
  line-height: 1;
}

/* Node typography */

.flow-label {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94908a;
  line-height: 1;
}

.flow-value {
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0c0c0c;
  line-height: 1;
  margin-top: 0.25rem;
}

/* Connector between nodes */

.flow-connector {
  display: flex;
  justify-content: center;
  position: relative;
  height: 1.625rem;
  z-index: 2;
}

/* Vertical line */

.flow-connector::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 0.0625rem;
  top: 0;
  bottom: 0;
  background: #c4b9ae;
  transform: translateX(-50%);
}

/* Square caps at connection points */

.flow-connector__cap {
  position: absolute;
  left: 50%;
  width: 0.1875rem;
  height: 0.1875rem;
  background: #c4b9ae;
  transform: translateX(-50%);
  z-index: 1;
}

.flow-connector__cap--top {
  top: 0;
  transform: translate(-50%, calc(-50% - 0.05rem));
}

.flow-connector__cap--bottom {
  bottom: 0;
  transform: translate(-50%, calc(50% + 0.05rem));
}

/* Glow behind node on check */

[class*="flow-node-"]::before {
  content: '';
  position: absolute;
  inset: -0.6rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.8rem;
  z-index: -1;
  opacity: 0;
}

.flow-node-1::before {
  animation: fc1 10s ease-in-out infinite;
}

.flow-node-2::before {
  animation: fc2 10s ease-in-out infinite;
}

.flow-node-3::before {
  animation: fc3 10s ease-in-out infinite;
}

.flow-node-4::before {
  animation: fc4 10s ease-in-out infinite;
}

/* Status pill */

.flow-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 1rem;
  padding: 0.0625rem 0.3125rem 0;
  border-radius: 0.125rem;
  background: #e0ffe5;
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-size: 0.556rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #0bb16f;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(0.5rem);
}

.flow-node-1 .flow-pill {
  animation: fc1 10s ease-in-out infinite, flow-pill-slide 10s ease-in-out infinite;
}

.flow-node-2 .flow-pill {
  animation: fc2 10s ease-in-out infinite, flow-pill-slide 10s ease-in-out infinite;
}

.flow-node-3 .flow-pill {
  animation: fc3 10s ease-in-out infinite, flow-pill-slide 10s ease-in-out infinite;
}

.flow-node-4 .flow-pill {
  animation: fc4 10s ease-in-out infinite, flow-pill-slide 10s ease-in-out infinite;
}

@keyframes flow-pill-slide {
  0%,14%  {
    transform: translateX(0.5rem)
  }

  17%     {
    transform: translateX(0)
  }

  85%     {
    transform: translateX(0)
  }

  90%     {
    transform: translateX(0.5rem)
  }

  100%    {
    transform: translateX(0.5rem)
  }
}

.templates-section-bg {
  background-color: #EBE8E4;
  background-image:
    linear-gradient(rgba(12, 12, 12, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 12, 12, 0.1) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .templates-section-bg {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

/* Homepage templates showcase — scrolling wall of document cards */

.templates-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.templates-showcase__text {
  position: relative;
  z-index: 5;
  padding: 2.5rem 0 1.5rem;
}

.templates-text-panel {
  max-width: 28rem;
}

.templates-scroll-wall {
  position: relative;
  display: flex;
  gap: 0.75rem;
  padding: 0 0.75rem;
  height: clamp(20rem, 42vh, 26rem);
}

.templates-scroll-col {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.templates-scroll-col--lg {
  display: none;
}

.templates-scroll-track {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  animation: tpl-scroll-up var(--dur, 40s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes tpl-scroll-up {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .templates-scroll-track {
    animation-play-state: paused;
  }
}

@media (min-width: 640px) {
  .templates-scroll-wall {
    height: clamp(22rem, 46vh, 30rem);
    gap: 1rem;
    padding: 0 1.25rem;
  }

  .templates-scroll-track {
    gap: 1rem;
  }
}

/* md+: overlay layout — wall fills section behind frosted text panel */

@media (min-width: 768px) {
  /* Tight-wrap section to showcase height (no extra vertical padding vs scroll wall) */

  .templates-section-bg {
    padding-top: 0;
    padding-bottom: 0;
    min-height: unset;
  }

  .templates-showcase {
    display: block;
    flex: 1 1 auto;
    min-height: clamp(37.5rem, 78vh, 52rem);
  }

  .templates-showcase__text {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    min-height: clamp(37.5rem, 78vh, 52rem);
    padding: 3rem 0;
    pointer-events: none;
  }

  .templates-text-panel {
    pointer-events: auto;
    padding: 2.25rem 2.5rem;
    background: rgba(242, 241, 237, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  }

  .templates-scroll-wall {
    position: absolute;
    inset: 0;
    height: auto;
    padding: 0 2rem;
    gap: 1.125rem;
  }
}

@media (min-width: 1024px) {
  .templates-showcase {
    min-height: clamp(42.5rem, 82vh, 56rem);
  }

  .templates-showcase__text {
    min-height: clamp(42.5rem, 82vh, 56rem);
  }

  .templates-scroll-col--lg {
    display: block;
  }

  .templates-scroll-wall {
    gap: 1.25rem;
    padding: 0 2.5rem;
  }
}

@media (min-width: 1280px) {
  .templates-scroll-wall {
    gap: 1.5rem;
    padding: 0 3rem;
  }
}

/* Template preview card — base (paper-like document tiles) */

.tpl-card {
  --a: #3b82f6;
  --tpl-paper: #f6f5f4;
  --tpl-ink: #2a2826;
  --tpl-ink-muted: #777169;
  position: relative;
  background-color: var(--tpl-paper);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, transparent 42%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(15, 23, 42, 0.012) 1px,
      rgba(15, 23, 42, 0.012) 2px
    );
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 2px 6px rgba(15, 23, 42, 0.06),
    0 16px 36px rgba(15, 23, 42, 0.07);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tpl-card__band {
  flex-shrink: 0;
  position: relative;
}

.tpl-card__body {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background-repeat: no-repeat;
}

.tpl-card__tag {
  display: block;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.25;
  flex-shrink: 0;
  color: var(--tpl-ink);
}

/* ── Proposal cover ───────────────────────── */

.tpl-card--prop .tpl-card__band {
  height: 32%;
  min-height: 2.75rem;
  background:
    radial-gradient(ellipse 120% 100% at 100% 0%, rgba(255, 255, 255, 0.2) 0%, transparent 55%),
    linear-gradient(148deg, var(--a) 0%, color-mix(in srgb, var(--a) 45%, #2a2826) 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.tpl-card--prop .tpl-card__band::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 14%;
  height: 45%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)) 0 0 / 48% 2px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)) 0 7px / 32% 1px no-repeat;
  pointer-events: none;
}

.tpl-card--prop .tpl-card__tag {
  padding: 6% 9% 0;
  font-size: 8px;
  font-weight: 700;
  color: var(--tpl-ink);
}

.tpl-card--prop .tpl-card__body {
  margin: 5% 9% 9%;
  background:
    linear-gradient(var(--tpl-ink-muted), var(--tpl-ink-muted)) 0 0 / 34% 1.5px no-repeat,
    radial-gradient(circle 1.2px at 6px 20px, #e2dad2 99%, transparent 100%) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle 1.2px at 6px 28px, #e2dad2 99%, transparent 100%) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle 1.2px at 6px 36px, #e2dad2 99%, transparent 100%) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(
      to bottom,
      #e2dad2 0px,
      #e2dad2 1.5px,
      transparent 1.5px,
      transparent 4.5px
    )
      12px 44px / calc(100% - 12px) calc(100% - 44px) no-repeat;
}

/* ── Invoice / quote ──────────────────────── */

.tpl-card--inv .tpl-card__band {
  height: 2rem;
  background:
    linear-gradient(var(--a), var(--a)) 0 0 / 100% 3px no-repeat,
    linear-gradient(#e2dad2, #e2dad2) 8% 55% / 20% 1px no-repeat,
    linear-gradient(#e2dad2, #e2dad2) 72% 55% / 22% 1px no-repeat;
}

.tpl-card--inv .tpl-card__tag {
  padding: 5% 8% 0;
  font-size: 7px;
  font-weight: 800;
  color: var(--a);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tpl-card--inv .tpl-card__body {
  margin: 4% 7.5% 8%;
  border-radius: 2px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background-color: rgba(255, 255, 255, 0.55);
  background-image:
    linear-gradient(#f1f5f9, #f1f5f9) 0 0 / 100% 18% no-repeat,
    linear-gradient(#4b4844, #4b4844) 5% 7% / 18% 2px no-repeat,
    linear-gradient(#4b4844, #4b4844) 44% 7% / 10% 2px no-repeat,
    linear-gradient(#4b4844, #4b4844) 62% 7% / 10% 2px no-repeat,
    linear-gradient(#4b4844, #4b4844) 80% 7% / 12% 2px no-repeat,
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 6px,
      rgba(226, 232, 240, 0.95) 6px,
      rgba(226, 232, 240, 0.95) 7px
    )
      0 18% / 100% 82% no-repeat,
    linear-gradient(#e2dad2, #e2dad2) 6% calc(100% - 10px) / 38% 1px no-repeat,
    linear-gradient(var(--a), var(--a)) 68% calc(100% - 6px) / 28% 3px no-repeat;
}

/* ── Contract / agreement ─────────────────── */

.tpl-card--ctr .tpl-card__band {
  height: 3px;
  background: var(--a);
}

.tpl-card--ctr .tpl-card__tag {
  padding: 6% 9% 0;
  font-size: 8px;
  font-weight: 700;
}

.tpl-card--ctr .tpl-card__body {
  margin: 4% 8% 14%;
  background:
    repeating-linear-gradient(
      to bottom,
      #e2dad2 0px,
      #e2dad2 1.5px,
      transparent 1.5px,
      transparent 4px
    )
      0 0 / 44% 34% no-repeat,
    repeating-linear-gradient(
      to bottom,
      #e2dad2 0px,
      #e2dad2 1.5px,
      transparent 1.5px,
      transparent 4px
    )
      52% 0 / 44% 34% no-repeat,
    linear-gradient(#4b4844, #4b4844) 0 40% / 30% 1.5px no-repeat,
    repeating-linear-gradient(
      to bottom,
      #e2dad2 0px,
      #e2dad2 1.5px,
      transparent 1.5px,
      transparent 4px
    )
      0 48% / 92% 22% no-repeat,
    linear-gradient(#94908a, #94908a) 0 calc(100% - 3px) / 28% 1px no-repeat,
    linear-gradient(#94908a, #94908a) 58% calc(100% - 3px) / 28% 1px no-repeat;
}

/* ── Letter ───────────────────────────────── */

.tpl-card--ltr .tpl-card__band {
  height: 20%;
  min-height: 2.25rem;
  background:
    linear-gradient(var(--a), var(--a)) 8% 28% / 24% 2.5px no-repeat,
    linear-gradient(#e2dad2, #e2dad2) 8% 48% / 16% 1px no-repeat,
    linear-gradient(#e2dad2, #e2dad2) 8% 58% / 12% 1px no-repeat,
    linear-gradient(#777169, #777169) 74% 30% / 20% 1.5px no-repeat,
    linear-gradient(#e2dad2, #e2dad2) 74% 46% / 14% 1px no-repeat;
}

.tpl-card--ltr .tpl-card__tag {
  padding: 4% 9% 0;
  font-size: 7px;
  font-weight: 700;
  color: var(--tpl-ink);
}

.tpl-card--ltr .tpl-card__body {
  margin: 3% 9% 9%;
  background:
    repeating-linear-gradient(
      to bottom,
      #e2dad2 0px,
      #e2dad2 1.5px,
      transparent 1.5px,
      transparent 4.5px
    )
      0 0 / 100% 36% no-repeat,
    repeating-linear-gradient(
      to bottom,
      #e2dad2 0px,
      #e2dad2 1.5px,
      transparent 1.5px,
      transparent 4.5px
    )
      0 52% / 86% 28% no-repeat,
    linear-gradient(#e2dad2, #e2dad2) 0 calc(100% - 2px) / 26% 1px no-repeat;
}

/* ── Certificate ──────────────────────────── */

.tpl-card--cert {
  background-color: #fdfcfa;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, transparent 50%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(15, 23, 42, 0.015) 1px,
      rgba(15, 23, 42, 0.015) 2px
    );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 2px 6px rgba(15, 23, 42, 0.06),
    0 16px 36px rgba(15, 23, 42, 0.07),
    inset 0 0 0 3px #fdfcfa,
    inset 0 0 0 4px color-mix(in srgb, var(--a) 22%, transparent);
}

.tpl-card--cert .tpl-card__band {
  height: 4px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--a) 85%, #2a2826),
    color-mix(in srgb, var(--a) 50%, #ffaa00)
  );
}

.tpl-card--cert .tpl-card__tag {
  text-align: center;
  padding: 14% 12% 0;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tpl-ink);
}

.tpl-card--cert .tpl-card__body {
  margin: 4% 14% 12%;
  background:
    radial-gradient(circle 5px at 50% 8%, color-mix(in srgb, var(--a) 14%, transparent) 100%, transparent 101%) 0 0 / 100% 100% no-repeat,
    linear-gradient(#94908a, #94908a) 12% 28% / 76% 2px no-repeat,
    linear-gradient(#e2dad2, #e2dad2) 18% 40% / 64% 1.5px no-repeat,
    linear-gradient(#e2dad2, #e2dad2) 22% 48% / 56% 1.5px no-repeat,
    linear-gradient(var(--a), var(--a)) 50% 64% / 40% 1px no-repeat,
    linear-gradient(#e2dad2, #e2dad2) 18% 84% / 64% 1px no-repeat;
}

/* ── Card responsive scaling ──────────────── */

@media (min-width: 640px) {
  .tpl-card__tag {
    font-size: 8px;
  }

  .tpl-card--prop .tpl-card__tag {
    font-size: 9px;
  }

  .tpl-card--inv .tpl-card__tag {
    font-size: 7px;
  }

  .tpl-card--ctr .tpl-card__tag {
    font-size: 9px;
  }

  .tpl-card--ltr .tpl-card__tag {
    font-size: 8px;
  }

  .tpl-card--cert .tpl-card__tag {
    font-size: 9px;
  }
}

@media (min-width: 1024px) {
  .tpl-card__tag {
    font-size: 9px;
  }

  .tpl-card--prop .tpl-card__tag {
    font-size: 10px;
  }

  .tpl-card--inv .tpl-card__tag {
    font-size: 8px;
  }

  .tpl-card--ctr .tpl-card__tag {
    font-size: 10px;
  }

  .tpl-card--ltr .tpl-card__tag {
    font-size: 9px;
  }

  .tpl-card--cert .tpl-card__tag {
    font-size: 11px;
  }
}

/* Flow animation: slot roller and status indicators */

.flow-slot {
  height: 1.25rem;
  overflow: hidden;
}

.flow-slot-col {
  animation: flow-slot-step 10s ease-in-out infinite;
}

.flow-gen-col {
  animation: flow-slot-step 10s ease-in-out infinite;
}

.flow-slot-2 {
  height: 1.25rem;
  overflow: hidden;
  display: inline-block;
}

.flow-slot-2-col {
  animation: flow-slot-step-2 4s ease-in-out infinite;
}

@keyframes flow-slot-step-2 {
  0%, 40%   {
    transform: translateY(0);
  }

  50%, 90%  {
    transform: translateY(-25%);
  }

  100%      {
    transform: translateY(-50%);
  }
}

@keyframes flow-slot-step {
  0%, 13%   {
    transform: translateY(0);
  }

  15%, 28%  {
    transform: translateY(-8.33%);
  }

  30%, 43%  {
    transform: translateY(-16.67%);
  }

  45%, 58%  {
    transform: translateY(-25%);
  }

  60%, 73%  {
    transform: translateY(-33.33%);
  }

  75%, 88%  {
    transform: translateY(-41.67%);
  }

  90%, 100% {
    transform: translateY(-50%);
  }
}

.flow-status {
  position: relative;
  width: 1rem;
  height: 1rem;
  margin-left: -0.5rem;
  flex-shrink: 0;
}

.flow-spinner {
  position: absolute;
  inset: 0;
  border: 0.125rem solid rgba(12, 12, 12, 0.1);
  border-top-color: #94908a;
  border-radius: 50%;
  opacity: 0;
}

.flow-check {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.flow-check svg {
  width: 0.625rem;
  height: 0.625rem;
}

@keyframes flow-spin {
  to {
    transform: rotate(360deg);
  }
}

.flow-node-1 .flow-spinner {
  animation: flow-spin .5s linear infinite, fs1 10s ease-in-out infinite;
}

.flow-node-1 .flow-check   {
  animation: fc1 10s ease-in-out infinite;
}

.flow-node-2 .flow-spinner {
  animation: flow-spin .5s linear infinite, fs2 10s ease-in-out infinite;
}

.flow-node-2 .flow-check   {
  animation: fc2 10s ease-in-out infinite;
}

.flow-node-3 .flow-spinner {
  animation: flow-spin .5s linear infinite, fs3 10s ease-in-out infinite;
}

.flow-node-3 .flow-check   {
  animation: fc3 10s ease-in-out infinite;
}

.flow-node-4 .flow-spinner {
  animation: flow-spin .5s linear infinite, fs4 10s ease-in-out infinite;
}

.flow-node-4 .flow-check   {
  animation: fc4 10s ease-in-out infinite;
}

@keyframes fs1 {
  0%{
    opacity:1
  }

  14%{
    opacity:1
  }

  16%{
    opacity:0
  }

  100%{
    opacity:0
  }
}

@keyframes fc1 {
  0%,14%{
    opacity:0
  }

  17%{
    opacity:1
  }

  85%{
    opacity:1
  }

  90%{
    opacity:0
  }

  100%{
    opacity:0
  }
}

@keyframes fs2 {
  0%,15%{
    opacity:0
  }

  17%{
    opacity:1
  }

  29%{
    opacity:1
  }

  31%{
    opacity:0
  }

  100%{
    opacity:0
  }
}

@keyframes fc2 {
  0%,29%{
    opacity:0
  }

  32%{
    opacity:1
  }

  85%{
    opacity:1
  }

  90%{
    opacity:0
  }

  100%{
    opacity:0
  }
}

@keyframes fs3 {
  0%,30%{
    opacity:0
  }

  32%{
    opacity:1
  }

  44%{
    opacity:1
  }

  46%{
    opacity:0
  }

  100%{
    opacity:0
  }
}

@keyframes fc3 {
  0%,44%{
    opacity:0
  }

  47%{
    opacity:1
  }

  85%{
    opacity:1
  }

  90%{
    opacity:0
  }

  100%{
    opacity:0
  }
}

@keyframes fs4 {
  0%,45%{
    opacity:0
  }

  47%{
    opacity:1
  }

  59%{
    opacity:1
  }

  61%{
    opacity:0
  }

  100%{
    opacity:0
  }
}

@keyframes fc4 {
  0%,59%{
    opacity:0
  }

  62%{
    opacity:1
  }

  85%{
    opacity:1
  }

  90%{
    opacity:0
  }

  100%{
    opacity:0
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-spinner, .flow-check, .flow-pill, .flow-gen-col {
    animation: none;
  }

  .flow-check, .flow-pill {
    opacity: 1;
    transform: none;
  }

  .flow-gen-col {
    transform: none;
  }

  [class*="flow-node-"]::before {
    opacity: 1;
  }
}

/* ============================================================ */

/* Templates gallery: sidebar, carousel, scroll rows             */

/* (merged from templates-gallery.css)                           */

/* ============================================================ */

:root {
  /* Sticky sidebars + template anchors: --site-sticky-header-gap (JS) follows fixed nav — full offset when visible (nav h-20 + promo banner if present + breathing room), small gutter when hidden */
  --site-sticky-header-gap: calc(5rem + var(--nav-banner-h, 0rem) + 1.25rem);
  --templates-sticky-top-gap: var(--site-sticky-header-gap);
  /* Blog post body grid — hero cover uses these so the image matches the article column, not the sidebar lane */
  --blog-article-sidebar-col: 340px;
  --blog-article-main-sidebar-gap: 4rem;
}

.templates-layout-shell {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .templates-layout-shell {
    display: grid;
    grid-template-columns: minmax(260px, 288px) minmax(0, 1fr);
    align-items: start;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
    row-gap: 0;
  }
}

@media (min-width: 1280px) {
  .templates-layout-shell {
    -moz-column-gap: 3.5rem;
         column-gap: 3.5rem;
  }
}

/* Blog posts (+ customer stories): match individual template landers (e.g. templates/invoice-workflow/) */

.blog-article-layout-shell {
  display: block;
}

@media (min-width: 1024px) {
  .blog-article-layout-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--blog-article-sidebar-col);
    align-items: start;
    -moz-column-gap: var(--blog-article-main-sidebar-gap);
         column-gap: var(--blog-article-main-sidebar-gap);
    /* lg:gap-16 — same as workflow template content + aside */
    row-gap: 0;
  }
}

.blog-article-main-col {
  min-width: 0;
  width: 100%;
}

/* Stretch aside to full row height so sticky sidebar can stick for the whole article (grid default is stretch; we had align-items:start on the shell) */

@media (min-width: 1024px) {
  .blog-article-layout-shell > .article-sidebar {
    align-self: stretch;
    min-width: 0;
  }

  /* Same behavior as templates gallery `.templates-sidebar-col`: stick + scroll when taller than viewport */

  .blog-article-layout-shell .article-sidebar-stack {
    position: sticky;
    top: var(--templates-sticky-top-gap);
    max-height: calc(100vh - var(--templates-sticky-top-gap) - 1rem);
    overflow-y: auto;
    width: 100%;
    transition:
      top 0.3s ease,
      max-height 0.3s ease;
  }
}

.templates-sidebar-col {
  width: 100%;
}

@media (min-width: 1024px) {
  .templates-sidebar-col {
    position: sticky;
    top: var(--templates-sticky-top-gap);
    max-height: calc(100vh - var(--templates-sticky-top-gap) - 1rem);
    overflow-y: auto;
    width: auto;
    transition:
      top 0.3s ease,
      max-height 0.3s ease;
  }

  #templates-content,
  .template-group {
    scroll-margin-top: var(--templates-sticky-top-gap);
  }
}

.templates-main-col {
  min-width: 0;
}

#templates-content > .template-group + .template-group {
  margin-top: 3rem;
}

@media (min-width: 640px) {
  #templates-content > .template-group + .template-group {
    margin-top: 3.5rem;
  }
}

@media (min-width: 1024px) {
  #templates-content > .template-group + .template-group {
    margin-top: 4.5rem;
  }
}

.templates-sidebar {
  border-radius: 1.25rem;
  border: 1px solid var(--portant-parchment);
  background: linear-gradient(165deg, #f6f5f4 0%, #F0EFED 100%);
  padding: 1.35rem 1.25rem 1.5rem;
}

@media (min-width: 1024px) {
  .templates-sidebar {
    padding: 1.5rem 1.35rem 1.65rem;
  }
}

.templates-sidebar-title {
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #777169;
  margin: 0 0 0.75rem;
}

.templates-search-wrap {
  position: relative;
}

.templates-search-wrap svg {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94908a;
  pointer-events: none;
}

.templates-search-input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--portant-parchment);
  background: rgba(255, 255, 255, 0.85);
  padding: 0.65rem 0.875rem 0.65rem 2.5rem;
  font-size: 0.875rem;
  color: #0c0c0c;
  transition: border-color 0.15s ease;
}

.templates-search-input::-moz-placeholder {
  color: #94908a;
}

.templates-search-input::placeholder {
  color: #94908a;
}

.templates-search-input:hover {
  border-color: var(--portant-dark-parchment);
}

.templates-search-input:focus {
  outline: 2px solid #ff4800;
  outline-offset: 2px;
  border-color: #ff4800;
}

.templates-nav-label {
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #777169;
  margin: 1.75rem 0 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--portant-parchment);
}

.templates-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.templates-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.65rem;
  border-radius: 0.65rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #777169;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.templates-nav-link:hover {
  background: rgba(255, 255, 255, 0.75);
  color: #0c0c0c;
}

.templates-nav-link--all {
  font-weight: 600;
  color: #0c0c0c;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--portant-parchment);
}

.templates-nav-link--all:hover {
  background: var(--portant-white);
}

.templates-nav-count {
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #777169;
  background: var(--portant-notebook);
  padding: 0.2rem 0.45rem;
  border-radius: 0.35rem;
  min-width: 1.5rem;
  text-align: center;
}

.templates-nav-link--all .templates-nav-count {
  background: var(--portant-light-orange);
  color: var(--portant-orange);
}

.templates-sidebar-cta {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--portant-parchment);
}

.templates-sidebar-cta-card {
  border-radius: 0.75rem;
  border: 1px solid var(--portant-parchment);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 247, 245, 0.92) 100%);
  padding: 1rem 1rem 1.1rem;
}

.templates-sidebar-cta-author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.templates-sidebar-cta-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
}

.templates-sidebar-cta-author-text {
  min-width: 0;
}

.templates-sidebar-cta-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0c0c0c;
  line-height: 1.25;
}

.templates-sidebar-cta-role {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: #777169;
  line-height: 1.3;
}

.templates-sidebar-cta-bio {
  margin: 0.65rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #777169;
}

.templates-sidebar-cta-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.85rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--portant-ink-black);
  background: var(--portant-white);
  border: 1px solid var(--portant-parchment);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.templates-sidebar-cta-demo:hover {
  background: var(--portant-canvas);
  border-color: var(--portant-dark-parchment);
  color: var(--portant-ink-black);
}

.templates-sidebar-cta-demo:focus-visible {
  outline: 2px solid #ff4800;
  outline-offset: 2px;
}

.template-group-header {
  max-width: 100%;
  padding-right: 0.5rem;
  margin-bottom: 1.1rem;
}

@media (min-width: 640px) {
  .template-group-header {
    margin-bottom: 1.35rem;
  }
}

.templates-row-outer {
  position: relative;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

@media (min-width: 1024px) {
  .templates-row-outer {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
}

.templates-row-outer::before,
.templates-row-outer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2rem;
  z-index: 2;
  pointer-events: none;
}

.templates-row-outer::before {
  left: 0;
  background: linear-gradient(90deg, #f6f5f4 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.templates-row-outer::after {
  right: 0;
  background: linear-gradient(270deg, #f6f5f4 0%, transparent 100%);
}

.templates-row-outer[data-scrolled-left='true']::before {
  opacity: 1;
}

.templates-carousel-wrap {
  position: relative;
}

.templates-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(12, 12, 12, 0.1);
  color: #0c0c0c;
  cursor: pointer;
  transition:
    opacity 0.25s ease,
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.templates-carousel-arrow:hover {
  transform: translateY(-50%) scale(1.08);
  background-color: #fff;
  border-color: rgba(12, 12, 12, 0.2);
}

.templates-carousel-arrow:active {
  transform: translateY(-50%) scale(0.98);
}

.templates-carousel-arrow:focus-visible {
  outline: 2px solid #ff4800;
  outline-offset: 2px;
}

.templates-carousel-arrow--left {
  left: -8px;
}

.templates-carousel-arrow--right {
  right: -8px;
}

.templates-carousel-arrow--hidden {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .templates-carousel-arrow {
    display: none;
  }
}

.templates-gallery-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.35rem 0.25rem 1rem;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

@media (min-width: 1024px) {
  .templates-gallery-scroll {
    gap: 1.25rem;
    padding: 0.35rem 0.5rem 1.15rem;
    scroll-padding-left: 0.5rem;
  }
}

.templates-gallery-scroll::-webkit-scrollbar {
  height: 6px;
}

.templates-gallery-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.templates-gallery-scroll::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.12);
  border-radius: 3px;
}

.templates-gallery-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.2);
}

.templates-carousel-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(380px, calc(100vw - 2.5rem));
}

@media (min-width: 640px) {
  .templates-carousel-card {
    width: min(400px, 72vw);
  }
}

@media (min-width: 1024px) {
  .templates-carousel-card {
    width: min(420px, 38vw);
  }
}

.templates-carousel-card .template-card {
  position: relative;
  height: 100%;
}

/* ── Integrations & power features: horizontal feature cards + slot grid ─ */

/* Both carousels: no outer left padding — gutter lives on the inner track so it
   scrolls with cards (no hard clip at scrollport left). */

.customers-featured-outer {
  padding-left: 0;
  padding-right: 0;
}

.power-feature-cards-outer {
  padding-left: 0;
  padding-right: 0;
}

.power-feature-cards-toolbar {
  display: flex;
  box-sizing: border-box;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  /* Match container-site gutters so arrows clear the viewport edge at every breakpoint. */
  max-width: 86rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .power-feature-cards-toolbar {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .power-feature-cards-toolbar {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.power-feature-cards-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border-radius: 9999px;
  border: 1px solid #e2dad2;
  background-color: #ffffff;
  color: #0c0c0c;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}

.power-feature-cards-nav__btn:hover {
  border-color: #94908a;
  background-color: #F0EFED;
}

.power-feature-cards-nav__btn:active {
  transform: scale(0.96);
}

.power-feature-cards-nav__btn:focus-visible {
  outline: 2px solid #ff4800;
  outline-offset: 2px;
}

.power-feature-cards-nav__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Dark-mode variant for dark surface contexts (currently the /ai page).
   Compose alongside .power-feature-cards-nav__btn. */

.power-feature-cards-nav__btn--dark {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.power-feature-cards-nav__btn--dark:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.1);
}

.power-feature-cards-nav__btn--dark:focus-visible {
  outline-color: #1875FB;
}

@media (prefers-reduced-motion: reduce) {
  .power-feature-cards-nav__btn:active {
    transform: none;
  }
}

.power-feature-cards-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  /* Match .power-feature-cards-track padding-left so snap aligns with the gutter */
  scroll-padding-left: 1rem;
  scroll-padding-right: 0;
  padding-bottom: 0.75rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* No horizontal mask — first card stays fully opaque (also see #integrations-power-features block below) */
  mask-image: none;
  -webkit-mask-image: none;
}

@media (min-width: 640px) {
  .power-feature-cards-wrap {
    scroll-padding-left: max(1.5rem, calc((100% - 80rem) / 2 + 1.5rem));
  }
}

@media (min-width: 1024px) {
  .power-feature-cards-wrap {
    scroll-padding-left: max(2rem, calc((100% - 80rem) / 2 + 2rem));
  }
}

/* Ensure no ancestor mask (e.g. .scroll-mask) clips the power feature strip */

#integrations-power-features .power-feature-cards-outer,
#integrations-power-features .power-feature-cards-wrap,
#integrations-power-features .power-feature-cards-track,
#integrations-power-features .power-feature-card {
  mask-image: none;
  -webkit-mask-image: none;
  mask: none;
  -webkit-mask: none;
}

.power-feature-cards-wrap::-webkit-scrollbar {
  display: none;
}

.power-feature-cards-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  width: -moz-max-content;
  width: max-content;
  padding-top: 0.25rem;
  /* Left gutter scrolls with cards (was outer padding — avoids a hard clip at scrollport edge) */
  padding-left: 1rem;
  /* Breathing room after the last card inside the widened scrollport */
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .power-feature-cards-track {
    padding-left: max(1.5rem, calc((100% - 86rem) / 2 + 1.5rem));
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .power-feature-cards-track {
    padding-left: max(3rem, calc((100% - 86rem) / 2 + 3rem));
    padding-right: 3rem;
  }
}

.power-feature-card {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  width: min(28rem, calc(100vw - 2.5rem));
  min-height: 17.5rem;
  padding: 2rem;
  border-radius: 1.75rem;
}

/* Corner decoration: smaller on mobile so body copy can run full width without overlap. */

.power-feature-card > svg {
  width: 2.5rem;
  height: 2.5rem;
}

@media (min-width: 640px) {
  .power-feature-card > svg {
    width: 4rem;
    height: 4rem;
  }
}

@media (min-width: 1024px) {
  .power-feature-card {
    width: clamp(20rem, calc((100vw - 8rem) / 2.05 - 0.5rem), 36rem);
    min-height: 19rem;
    padding: 2.25rem;
  }
}

/* Marketing-lander BENEFITS 3-up cards: equalize image-tile heights via subgrid.
   Image tiles share a row track sized to the tallest image; smaller images keep their
   natural size and center in the extra space. Text divs share a second row track.

   :has() scopes this to outer grids whose cards put the media tile FIRST (marketing landers).
   The homepage "How it works" grid uses the same column classes but puts media LAST, so
   :has(> div > div.overflow-hidden:first-child) excludes it. The "templates" grid lower
   on each lander uses sm:grid-cols-2 lg:grid-cols-3 (no md:grid-cols-3) and <a> wrappers,
   so it's excluded twice over. */

div.grid.grid-cols-1.md\:grid-cols-3:has(
    > div.flex.flex-col.rounded-xl.bg-white > div.overflow-hidden.bg-portant-parchment:first-child
  ) {
  grid-template-rows: auto auto;
}

div.grid.grid-cols-1.md\:grid-cols-3:has(
    > div.flex.flex-col.rounded-xl.bg-white > div.overflow-hidden.bg-portant-parchment:first-child
  )
  > div.flex.flex-col.rounded-xl.bg-white {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

div.grid.grid-cols-1.md\:grid-cols-3:has(
    > div.flex.flex-col.rounded-xl.bg-white > div.overflow-hidden.bg-portant-parchment:first-child
  )
  > div.flex.flex-col.rounded-xl.bg-white
  > div.overflow-hidden.bg-portant-parchment:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   AI Hero Pipeline Panel
   Animated kanban: 5 stage columns slide horizontally behind a
   pinned deal card (Acme Corp). The deal lifts on stage change;
   action minis type in below it with a status pill on completion.
   Driver: hero-pipeline IIFE in main.js.
   ============================================================ */

/* Panel uses the same padding-box / border-box dual-background trick as
   .card-gradient-border / .surface-glass — just with an opaque dark inner
   fill instead of translucent white. Consistent with the glass family. */

.hero-pipeline {
  border: 1px solid transparent;
  background:
    linear-gradient(#1d1d1e, #1d1d1e) padding-box,
    var(--gradient-glass-edge) border-box;
  border-radius: 1.25rem;
  padding: 1.3125rem;
  position: relative;
  overflow: hidden;
  box-shadow: inset -2px 2px 20px 0 rgba(0, 0, 0, 0.25);
}

.hero-pipeline__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1rem;
}

.hero-pipeline__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: DM Sans, system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Atlas pill graphic replaces the literal "Atlas" word in the header.
   Height-locked so it sits on the same baseline as the "LIVE" text and the
   20px HubSpot mark; width auto preserves the 236:97 viewBox ratio. */

.hero-pipeline__title-pill {
  display: block;
  height: 2.25rem;
  width: auto;
  flex-shrink: 0;
  /* Adds to the title's flex gap (0.625rem) to make the pill→dot space
     double-width, while dot→LIVE stays at the base gap so they read paired. */
  margin-right: 0.625rem;
}

.hero-pipeline__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff4800;
  box-shadow: 0 0 8px 1px #ff4800, inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  animation: hero-pipeline-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-pipeline-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

/* Viewport reveals the active stage centred with neighbours peeking in.
   The deal card sits absolutely-positioned at the centre so it visually
   reads as a deal living in whichever column slid behind it. */

.hero-kanban-viewport {
  position: relative;
  height: 340px;
  margin: 0 -1.25rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.hero-kanban-track {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 0.5rem;
  padding: 0 1.25rem;
  align-items: stretch;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Columns own layout only. Translucent fill + glass-edge stroke come from
   the .surface-glass utility composed in the HTML. The brighter active fill
   piggybacks on the same .is-active state via .surface-glass.is-active. */

.hero-kanban-column {
  flex: 0 0 360px;
  border-radius: 0.625rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0.42;
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Active column: tier-4 cool treatment (mirrors .feature-step.surface-charcoal).
   Layered on top of the .surface-glass--faint base — the cool wash sits on the
   element's own background-image, and the ::before ring inherited from --faint
   gets its background swapped from the warm glass-edge gradient to the full
   cool gradient at 0.4 opacity (the mask stays put, so it's still a 1px ring). */

.hero-kanban-column.is-active {
  opacity: 1;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(64, 223, 252, 0.04) 40%,
    rgba(24, 117, 251, 0.04) 75%,
    rgba(0, 56, 198, 0.04) 100%
  );
}

.hero-kanban-column.is-active.surface-glass--faint::before {
  background: var(--gradient-cool);
  opacity: 0.4;
}

.hero-kanban-column__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

.hero-kanban-column__name {
  font-weight: 600;
  color: #fff;
}

.hero-kanban-column__count {
  color: #fff;
}

.hero-kanban-column__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.25rem;
}

.hero-kanban-placeholder {
  height: 26px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
}

.hero-kanban-placeholder--short {
  width: 70%;
}

.hero-kanban-column.is-active .hero-kanban-placeholder {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.20);
  visibility: hidden;
  /* deal-focus covers the slot */
}

/* Deal focus owns positioning/sizing/shadow; the cool-tinted fill + cool
   gradient stroke come from .surface-glass-cool composed in HTML. */

.hero-deal-focus {
  position: absolute;
  top: 56px;
  left: 50%;
  width: 330px;
  transform: translateX(-50%);
  border-radius: 0.625rem;
  padding: 0.875rem 1rem 1rem;
  z-index: 5;
  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.25);
}

.hero-deal-focus.is-moving {
  animation: hero-deal-lift 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes hero-deal-lift {
  0%, 100% {
    transform: translateX(-50%) scale(1) translateY(0);
    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.25);
  }

  35% {
    transform: translateX(-50%) scale(1.06) translateY(-6px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.10);
  }
}

.hero-deal-focus__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.hero-deal-focus__info {
  min-width: 0;
}

.hero-deal-focus__name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-deal-focus__sub {
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.80);
  margin-top: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-deal-focus__amount {
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
}

/* Action feed: vertical stack of minis. Each new mini for the current
   stage appends below the previous one and rises in. min-height reserves
   the slot so the deal card stays full-size even when the feed is empty
   between stages. The stack fades out before the deal advances. */

.hero-action-feed {
  margin-top: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* Sized to fit both stage tiles (~50px each + 0.4rem gap) + breathing room
     so the parent deal card never shifts as the second tile streams in. */
  min-height: 7.25rem;
}

/* Dark-mode action tile (Atlas hero pipeline). Three columns: brand-icon
   square that fills row height on the left, title + artifact in the middle,
   green completion check on the right. Replaces the earlier light/orange
   tile pattern with the rebrand surface: translucent white fill + border,
   white text, and a stroked checkmark in a green dot. */

.hero-action-mini {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.625rem;
  align-items: stretch;
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
}

.hero-action-mini.is-active {
  animation: hero-action-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-action-mini.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
}

@keyframes hero-action-rise {
  from {
    transform: translateY(8px);
    opacity: 0;
  }

  to   {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Fixed-size icon plate. Both plate and inner img are hardcoded in px so
   brand SVGs with differing intrinsic dimensions all render identically.
   object-fit: contain on the explicitly-sized img fills the limiting axis
   (width for landscape SVGs, height for portrait) and preserves the
   aspect ratio, so every icon visually maxes out the same 24px box. */

.hero-action-mini__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 5px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}

.hero-action-mini__icon img {
  display: block;
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}

.hero-action-mini__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.hero-action-mini__agent {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #fff;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.hero-action-mini__agent .hero-action-mini__caret {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 2px;
  background: #fff;
  vertical-align: -1px;
  animation: hero-caret-blink 0.7s steps(1) infinite;
}

@keyframes hero-caret-blink {
  0%, 49% {
    opacity: 1;
  }

  50%, 100% {
    opacity: 0;
  }
}

.hero-action-mini__artifact {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-action-mini__artifact.is-shown {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 60ms;
}

/* Completion indicator. Stroked checkmark on a saturated green dot; mirrors
   the figma rebrand spec. Opacity-only entry so transform stays clean. */

.hero-action-mini__check {
  align-self: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-action-mini__check svg {
  width: 14px;
  height: 14px;
}

.hero-action-mini__check.is-shown {
  opacity: 1;
}

@media (max-width: 720px) {
  .hero-kanban-column {
    flex-basis: 290px;
  }

  .hero-deal-focus {
    width: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pipeline__dot {
    animation: none;
  }

  .hero-deal-focus.is-moving {
    animation: none;
  }

  .hero-action-mini {
    transition: none;
  }

  .hero-action-mini.is-active {
    animation: none;
  }

  .hero-action-mini__agent .hero-action-mini__caret {
    animation: none;
  }

  .hero-kanban-track {
    transition: none;
  }
}

/* ============================================================
   Agent Pipeline kanban (pipeline section)
   Static 4-column grid of deal cards driven by a JS sequence in
   main.js (agent-kanban IIFE). The kanban runs an ~12s loop:
     1. Scan: blue band sweeps top->bottom over the kanban (2.4s).
        Chips reveal together at ~20% of scan so they are visible
        before the band crosses their Y position.
     2. Spin: every spinner is rotating as soon as its chip is
        revealed (parallel ambient state, ~1.4s/rev linear).
     3. Process: cards activate sequentially L->R as the scan
        finishes. Each card's gradient + ring overlays ramp up.
     4. Complete: spark crossfades (with blur) to a blue tick.
        Gradient + ring HOLD at the completed values.
     5. Hold all-complete for 3s, fade ONLY the chips (kanban
        chrome + card data stay put), pause briefly, restart.
   State classes (added by JS, styled here):
     .agent-kanban.is-scanning
     .kanban-deal-action.is-revealed / .is-processing /
                       .is-complete / .is-finishing
   ============================================================ */

/* Kanban font-size scale (rems, 10px minimum, 14px default).
   xs:   0.625rem  / 10px — tertiary meta, count badges (floor)
   sm:   0.75rem   / 12px — secondary labels (eyebrow, col head, action, owner)
   base: 0.875rem  / 14px — primary readable text (deal co, amount, toolbar meta)
   lg:   1rem      / 16px — emphasis (reserved). */

.agent-kanban {
  --kanban-fs-xs:   0.625rem;
  --kanban-fs-sm:   0.75rem;
  --kanban-fs-base: 0.875rem;
  --kanban-fs-lg:   1rem;
  /* Shared easing token. cubic-bezier(0.22, 1, 0.36, 1) is a punchy
     ease-out curve used for every state transition + the scan sweep.
     Spinner uses linear (no entry/exit); kanban fade-out uses an
     accelerating curve since exits feel right speeding up. */
  --ease-out-strong: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-strong:  cubic-bezier(0.55, 0, 1, 0.45);
  display: flex;
  flex-direction: column;
  font-size: var(--kanban-fs-base);
  background-color: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.kanban-toolbar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kanban-toolbar-title {
  font-size: var(--kanban-fs-base);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
}

.kanban-toolbar-counter {
  margin-left: auto;
  font-size: var(--kanban-fs-sm);
  color: #94908a;
}

.kanban-cols {
  position: relative;
  /* anchor for absolute .kanban-scan overlay */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  /* Bottom padding intentionally 0 so columns run flush into the kanban's
     cropped bottom edge (clipped by the frame's rounded-3xl curve). */
  padding: 0.875rem 0.875rem 0;
  align-items: stretch;
}

/* Scan overlay: full-size element over .kanban-cols. A linear-gradient
   draws an ~80px band at vertical center of the element; the whole
   element translates from -100% (band above the cols) to +100% (band
   below the cols), so the band visually sweeps top->bottom across the
   kanban. Position absolute keeps it out of the grid flow. */

.kanban-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-100%);
  z-index: 3;
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(50% - 56px),
    rgba(24, 117, 251, 0.18) calc(50% - 28px),
    rgba(64, 223, 252, 0.55) 50%,
    rgba(24, 117, 251, 0.18) calc(50% + 28px),
    transparent calc(50% + 56px),
    transparent 100%
  );
  filter: blur(6px);
}

.agent-kanban.is-scanning .kanban-scan {
  /* Linear so the scan reads as a constant-velocity beam (like a CT
     scanner) rather than slowing toward the bottom. */
  animation: kanban-scan 2400ms linear forwards;
}

@keyframes kanban-scan {
  0%   {
    transform: translateY(-100%);
    opacity: 0;
  }

  12%  {
    opacity: 1;
  }

  88%  {
    opacity: 1;
  }

  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

.kanban-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Generous bottom padding so cards have visible whitespace beneath them
     within the cropped col (suggests more pipeline to scroll). */
  padding: 0.875rem 0.5rem 2.5rem;
  background-color: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  /* Extension is expressed here (not as frame bottom padding) so the kanban's
     bottom edge keeps meeting the frame's rounded curve = cropped look. */
  min-height: 25rem;
}

.kanban-col-head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.125rem 0.5rem;
  font-family: IBM Plex Mono, ui-monospace, monospace;
  font-size: var(--kanban-fs-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.kanban-col-count {
  margin-left: auto;
  font-size: var(--kanban-fs-xs);
  color: #94908a;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.dot--orange {
  background: #ff4800;
}

.dot--amber  {
  background: #ffaa00;
}

.dot--gray   {
  background: #94908a;
}

/* Deal card. Tier-4 cool treatment (mirrors .feature-step.surface-charcoal):
   ~4% cool wash on the card background, plus a 1px masked cool ring at 0.4
   opacity via ::before. Stands alone — no .surface-glass underlay — so the
   card's only chrome is the cool tint, not warm-grey-on-warm-grey-on-warm-grey. */

.kanban-deal {
  position: relative;
  border-radius: 8px;
  padding: 0.625rem 0.6875rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  background-color: rgba(255, 255, 255, 0.02);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(64, 223, 252, 0.04) 40%,
    rgba(24, 117, 251, 0.04) 75%,
    rgba(0, 56, 198, 0.04) 100%
  );
}

.kanban-deal::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient-cool);
  opacity: 0.4;
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.kanban-deal-co {
  font-size: var(--kanban-fs-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: #fff;
}

.kanban-deal-amt {
  font-size: var(--kanban-fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

/* Action chip layout. Text on the left, status block (stacked spark +
   tick) on the right. Default state: hidden (opacity 0, slight rise).
   .is-revealed brings it into view; .is-processing and .is-complete
   ramp the gradient/ring overlays via opacity-only transitions. */

.kanban-deal-action {
  position: relative;
  overflow: hidden;
  padding: 0.5625rem 0.625rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(24, 117, 251, 0.25);
  border-radius: 6px;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--kanban-fs-base);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.3;
  opacity: 0;
  transform: translateY(20%);
  transition:
    opacity 250ms var(--ease-out-strong),
    transform 250ms var(--ease-out-strong);
}

.kanban-deal-action.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Loop reset: only the chips fade out (kanban chrome + card data stay
   put). Exit mirrors the entry direction (came up from translateY(20%),
   settles back down to translateY(20%)) so removing the class on reset
   doesn't run an invisible transform tween. Children + ::before/::after
   fade with the host since they inherit opacity. */

.kanban-deal-action.is-finishing {
  opacity: 0;
  transform: translateY(20%);
  transition:
    opacity 500ms var(--ease-in-strong),
    transform 500ms var(--ease-in-strong);
}

/* Cool gradient fill overlay. Opacity-only tween (Principle 3). Ramps
   0 -> 0.30 on processing, 0.30 -> 0.45 on complete. */

.kanban-deal-action::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-cool);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease-out-strong);
}

.kanban-deal-action.is-processing::before {
  opacity: 0.30;
}

.kanban-deal-action.is-complete::before   {
  opacity: 0.45;
}

/* Highlight ring overlay. Replaces animated border-color so we stay on
   opacity-only animation. Ramps in on processing, holds on complete. */

.kanban-deal-action::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 16px rgba(64, 223, 252, 0.40);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease-out-strong);
}

.kanban-deal-action.is-processing::after,
.kanban-deal-action.is-complete::after {
  opacity: 1;
}

.kanban-deal-action > * {
  position: relative;
  z-index: 1;
}

.kanban-deal-action__text {
  min-width: 0;
  flex: 1;
}

/* Status slot: fixed 18px box, spark + tick absolutely stacked so they
   crossfade in place. Spark spins continuously while processing. */

.kanban-deal-action__status {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-block;
}

.kanban-spark,
.kanban-tick {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kanban-spark {
  color: #fff;
  /* Default opacity 1 (the host chip controls visibility via its own
     opacity transition). Only the .is-complete crossfade tweens spark
     opacity directly. */
  opacity: 1;
  transition:
    opacity 200ms var(--ease-out-strong),
    filter 200ms var(--ease-out-strong);
}

.kanban-spark svg {
  width: 14px;
  height: 14px;
}

/* Spinners spin from the moment a chip is revealed (so all 5 are spinning
   in parallel while waiting their turn) until that card is marked complete.
   animation-delay 150ms lets the chip's reveal transition finish first so
   the rotation doesn't pop in at full speed mid-fade. */

.kanban-deal-action.is-revealed .kanban-spark {
  animation: kanban-spark-rotate 1.4s linear infinite;
  animation-delay: 150ms;
}

.kanban-deal-action.is-complete .kanban-spark {
  opacity: 0;
  filter: blur(1px);
  animation: none;
}

.kanban-tick {
  color: #1875FB;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 250ms var(--ease-out-strong),
    transform 250ms var(--ease-out-strong);
}

.kanban-tick svg {
  width: 18px;
  height: 18px;
}

.kanban-deal-action.is-complete .kanban-tick {
  opacity: 1;
  transform: scale(1);
}

@keyframes kanban-spark-rotate {
  to {
    transform: rotate(360deg);
  }
}

.kanban-deal-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--kanban-fs-xs);
  color: #94908a;
}

.kanban-deal-meta span:last-child {
  font-family: IBM Plex Mono, ui-monospace, monospace;
}

@media (max-width: 880px) {
  .kanban-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kanban-scan,
  .kanban-deal-action.is-revealed .kanban-spark {
    animation: none;
  }

  .kanban-scan {
    opacity: 0;
  }

  .kanban-deal-action,
  .kanban-deal-action::before,
  .kanban-deal-action::after,
  .kanban-spark,
  .kanban-tick {
    transition: none;
  }
}

/* ============================================================
   Why Atlas card scroll-active state
   ============================================================
   The 3 stacked cards in the "Why Atlas" section adopt the
   hero deal-focus card style (matches .surface-glass-cool:
   cool gradient border at full opacity + cool gradient fill
   at ~20% opacity + lighter body text) as each one crosses
   the middle of the viewport.

   Driven by CSS scroll-driven view() animations - no JS, no
   IntersectionObserver. Each card runs its own timeline
   automatically. The animation peak (50% keyframe) is when
   the card is in the middle of its pass through the viewport.

   Wrapped in @supports so browsers without scroll-driven
   animations fall back to the default .surface-charcoal
   styling (graceful enhancement; the highlight is not load-
   bearing).
   ============================================================ */

.why-card {
  position: relative;
  isolation: isolate;
}

/* inset: -1px puts the pseudos on the parent's border-box (outer card edge),
   aligning the active stroke with the 1px transparent border that hosts the
   default .surface-charcoal gradient ring. Without this, abs-positioned
   pseudos resolve inset: 0 against the padding-box (1px inside the outer
   edge), and the inactive/active strokes don't share the same outer edge. */

.why-card::before,
.why-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
}

/* Semi-opacity cool fill (matches .surface-glass-cool background) */

.why-card::before {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(64, 223, 252, 0.20) 40%,
    rgba(24, 117, 251, 0.20) 75%,
    rgba(0, 56, 198, 0.20) 100%
  );
  z-index: -1;
}

/* Full-opacity gradient border via mask trick (matches .surface-glass-cool::before) */

.why-card::after {
  padding: 2px;
  background: var(--gradient-cool);
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@supports (animation-timeline: view()) {
  .why-card::before,
  .why-card::after {
    animation: why-card-glow linear both;
    animation-timeline: view();
    animation-range: cover 25% cover 75%;
  }

  .why-card p {
    animation: why-card-text linear both;
    animation-timeline: view();
    animation-range: cover 25% cover 75%;
  }

  @keyframes why-card-glow {
    0%, 100% {
      opacity: 0;
    }

    50%      {
      opacity: 1;
    }
  }

  @keyframes why-card-text {
    0%, 100% {
      color: #94908a;
    }

    50%      {
      color: rgba(255, 255, 255, 0.92);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-card::before,
  .why-card::after,
  .why-card p {
    animation: none;
  }
}

/* ============================================================
 * Language selector (header desktop + mobile, footer) and the
 * geo-aware language prompt. Markup is injected by injectGlobalNav
 * (vite.config.js); interactivity lives in main.js.
 * ============================================================ */

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

.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #0c0c0c;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-switch-btn:hover {
  background-color: #EBE8E4;
}

.lang-switch-globe {
  color: #777169;
  flex: none;
}

.lang-switch-current {
  font-variant-numeric: tabular-nums;
}

.lang-switch-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 11rem;
  display: none;
  flex-direction: column;
  padding: 0.375rem;
  background: #ffffff;
  border: 1px solid #e2dad2;
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(12, 12, 12, 0.12);
  z-index: 60;
}

.lang-switch-menu.is-open {
  display: flex;
}

/* Footer selector: left-aligned button, so the menu opens upward and to the right. */

.lang-switch--footer .lang-switch-menu {
  top: auto;
  bottom: calc(100% + 0.5rem);
  left: 0;
  right: auto;
}

.lang-switch-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  color: #4b4844;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-switch-option:hover {
  background-color: #f6f5f4;
  color: #0c0c0c;
}

.lang-switch-option[aria-current="true"] {
  color: #0c0c0c;
  font-weight: 600;
}

.lang-switch-option[aria-current="true"]::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #1875FB;
}

/* Geo-aware language prompt (created by main.js; absent for no-JS and crawlers) */

.geo-banner {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translate(-50%, calc(100% + 1.5rem));
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  max-width: calc(100vw - 2rem);
  padding: 0.875rem 1.125rem;
  background: #0c0c0c;
  color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 18px 48px rgba(12, 12, 12, 0.28);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.geo-banner.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.geo-banner__text {
  font-size: 0.9375rem;
  font-weight: 500;
  margin: 0;
}

.geo-banner__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.geo-banner__switch {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #0c0c0c;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.geo-banner__switch:hover {
  opacity: 0.9;
}

.geo-banner__dismiss {
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
  cursor: pointer;
  white-space: nowrap;
}

.geo-banner__dismiss:hover {
  color: #ffffff;
}

@media (max-width: 480px) {
  .geo-banner {
    left: 1rem;
    right: 1rem;
    transform: translateY(calc(100% + 1.5rem));
    max-width: none;
  }

  .geo-banner.is-visible {
    transform: translateY(0);
  }
}

.placeholder\:text-portant-charred::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 144 138 / var(--tw-text-opacity, 1));
}

.placeholder\:text-portant-charred::placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 144 138 / var(--tw-text-opacity, 1));
}

.first\:pt-0:first-child {
  padding-top: 0px;
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.focus-within\:border-portant-orange\/40:focus-within {
  border-color: rgb(255 72 0 / 0.4);
}

.focus-within\:ring-2:focus-within {
  --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(2px + 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);
}

.focus-within\:ring-portant-orange\/10:focus-within {
  --tw-ring-color: rgb(255 72 0 / 0.1);
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  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));
}

.hover\:border-portant-charred:hover {
  --tw-border-opacity: 1;
  border-color: rgb(148 144 138 / var(--tw-border-opacity, 1));
}

.hover\:border-portant-dark-parchment:hover {
  --tw-border-opacity: 1;
  border-color: rgb(196 185 174 / var(--tw-border-opacity, 1));
}

.hover\:border-portant-ink-black\/20:hover {
  border-color: rgb(12 12 12 / 0.2);
}

.hover\:border-portant-ink-black\/30:hover {
  border-color: rgb(12 12 12 / 0.3);
}

.hover\:border-portant-orange:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 72 0 / var(--tw-border-opacity, 1));
}

.hover\:border-slate-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}

.hover\:border-slate-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}

.hover\:border-white\/40:hover {
  border-color: rgb(255 255 255 / 0.4);
}

.hover\:bg-\[\#cf5104\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(207 81 4 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-portant-ash:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(42 40 38 / var(--tw-bg-opacity, 1));
}

.hover\:bg-portant-canvas:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(246 245 244 / var(--tw-bg-opacity, 1));
}

.hover\:bg-portant-ink-black\/10:hover {
  background-color: rgb(12 12 12 / 0.1);
}

.hover\:bg-portant-notebook:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(235 232 228 / var(--tw-bg-opacity, 1));
}

.hover\:bg-portant-orange\/85:hover {
  background-color: rgb(255 72 0 / 0.85);
}

.hover\:bg-portant-paper:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 239 237 / var(--tw-bg-opacity, 1));
}

.hover\:bg-portant-parchment:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 218 210 / var(--tw-bg-opacity, 1));
}

.hover\:bg-portant-parchment\/60:hover {
  background-color: rgb(226 218 210 / 0.6);
}

.hover\:bg-slate-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-slate-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/15:hover {
  background-color: rgb(255 255 255 / 0.15);
}

.hover\:bg-white\/\[0\.14\]:hover {
  background-color: rgb(255 255 255 / 0.14);
}

.hover\:text-blue-500:hover {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.hover\:text-portant-ink-black:hover {
  --tw-text-opacity: 1;
  color: rgb(12 12 12 / var(--tw-text-opacity, 1));
}

.hover\:text-portant-orange:hover {
  --tw-text-opacity: 1;
  color: rgb(255 72 0 / var(--tw-text-opacity, 1));
}

.hover\:text-portant-red:hover {
  --tw-text-opacity: 1;
  color: rgb(228 10 19 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-600:hover {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-900:hover {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}

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

.hover\:decoration-portant-orange:hover {
  text-decoration-color: #ff4800;
}

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:shadow-elevated:hover {
  --tw-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
  --tw-shadow-colored: 0 24px 60px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

.focus\:border-portant-orange:focus {
  --tw-border-opacity: 1;
  border-color: rgb(255 72 0 / var(--tw-border-opacity, 1));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-0:focus {
  --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(0px + 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);
}

.focus\:ring-1:focus {
  --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(1px + 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);
}

.focus\:ring-2:focus {
  --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(2px + 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);
}

.focus\:ring-inset:focus {
  --tw-ring-inset: inset;
}

.focus\:ring-blue-600:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity, 1));
}

.focus\:ring-portant-orange:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 72 0 / var(--tw-ring-opacity, 1));
}

.focus\:ring-portant-orange\/20:focus {
  --tw-ring-color: rgb(255 72 0 / 0.2);
}

.focus\:ring-portant-parchment:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(226 218 210 / var(--tw-ring-opacity, 1));
}

.focus\:ring-slate-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity, 1));
}

.focus\:ring-slate-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1));
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:rounded:focus-visible {
  border-radius: 0.25rem;
}

.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline:focus-visible {
  outline-style: solid;
}

.focus-visible\:outline-2:focus-visible {
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}

.focus-visible\:outline-offset-\[-4px\]:focus-visible {
  outline-offset: -4px;
}

.focus-visible\:outline-portant-blue:focus-visible {
  outline-color: #1875FB;
}

.focus-visible\:outline-portant-orange:focus-visible {
  outline-color: #ff4800;
}

.focus-visible\:ring-2:focus-visible {
  --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(2px + 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);
}

.focus-visible\:ring-portant-charred:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(148 144 138 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-portant-orange:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 72 0 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
}

.group[open] .group-open\:rotate-90 {
  --tw-rotate: 90deg;
  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));
}

.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  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));
}

.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  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));
}

.group:hover .group-hover\:scale-\[1\.02\] {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  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));
}

.group:hover .group-hover\:scale-\[1\.03\] {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  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));
}

.group:hover .group-hover\:gap-2 {
  gap: 0.5rem;
}

.group:hover .group-hover\:border-portant-ink-black {
  --tw-border-opacity: 1;
  border-color: rgb(12 12 12 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:bg-portant-ink-black {
  --tw-bg-opacity: 1;
  background-color: rgb(12 12 12 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-portant-parchment {
  --tw-bg-opacity: 1;
  background-color: rgb(226 218 210 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:text-portant-ink-black {
  --tw-text-opacity: 1;
  color: rgb(12 12 12 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-portant-orange {
  --tw-text-opacity: 1;
  color: rgb(255 72 0 / var(--tw-text-opacity, 1));
}

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

.group:hover .group-hover\:underline {
  text-decoration-line: underline;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.prose-headings\:scroll-mt-24 :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  scroll-margin-top: 6rem;
}

.prose-h1\:mt-0 :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  margin-top: 0px;
}

.prose-h1\:text-3xl :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.prose-h1\:font-bold :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-weight: 700;
}

.prose-h1\:tracking-tight :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  letter-spacing: -0.025em;
}

.prose-h1\:text-portant-ink-black :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  --tw-text-opacity: 1;
  color: rgb(12 12 12 / var(--tw-text-opacity, 1));
}

.prose-a\:text-portant-orange :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  --tw-text-opacity: 1;
  color: rgb(255 72 0 / var(--tw-text-opacity, 1));
}

.prose-a\:no-underline :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  text-decoration-line: none;
}

.hover\:prose-a\:underline :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))):hover {
  text-decoration-line: underline;
}

.prose-img\:rounded-lg :is(:where(img):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  border-radius: 0.5rem;
}

@media not all and (min-width: 640px) {
  .max-sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

@media (min-width: 640px) {
  .sm\:-top-5 {
    top: -1.25rem;
  }

  .sm\:right-5 {
    right: 1.25rem;
  }

  .sm\:top-5 {
    top: 1.25rem;
  }

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

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

  .sm\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .sm\:mt-10 {
    margin-top: 2.5rem;
  }

  .sm\:mt-12 {
    margin-top: 3rem;
  }

  .sm\:mt-14 {
    margin-top: 3.5rem;
  }

  .sm\:mt-16 {
    margin-top: 4rem;
  }

  .sm\:mt-20 {
    margin-top: 5rem;
  }

  .sm\:mt-24 {
    margin-top: 6rem;
  }

  .sm\:mt-28 {
    margin-top: 7rem;
  }

  .sm\:mt-3 {
    margin-top: 0.75rem;
  }

  .sm\:mt-6 {
    margin-top: 1.5rem;
  }

  .sm\:mt-7 {
    margin-top: 1.75rem;
  }

  .sm\:mt-8 {
    margin-top: 2rem;
  }

  .sm\:mt-auto {
    margin-top: auto;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

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

  .sm\:hidden {
    display: none;
  }

  .sm\:h-10 {
    height: 2.5rem;
  }

  .sm\:h-11 {
    height: 2.75rem;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-14 {
    height: 3.5rem;
  }

  .sm\:h-16 {
    height: 4rem;
  }

  .sm\:h-20 {
    height: 5rem;
  }

  .sm\:h-28 {
    height: 7rem;
  }

  .sm\:h-5 {
    height: 1.25rem;
  }

  .sm\:h-56 {
    height: 14rem;
  }

  .sm\:h-6 {
    height: 1.5rem;
  }

  .sm\:h-8 {
    height: 2rem;
  }

  .sm\:h-9 {
    height: 2.25rem;
  }

  .sm\:h-auto {
    height: auto;
  }

  .sm\:w-11 {
    width: 2.75rem;
  }

  .sm\:w-12 {
    width: 3rem;
  }

  .sm\:w-16 {
    width: 4rem;
  }

  .sm\:w-2\/3 {
    width: 66.666667%;
  }

  .sm\:w-20 {
    width: 5rem;
  }

  .sm\:w-28 {
    width: 7rem;
  }

  .sm\:w-3\/5 {
    width: 60%;
  }

  .sm\:w-5 {
    width: 1.25rem;
  }

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:w-6 {
    width: 1.5rem;
  }

  .sm\:w-8 {
    width: 2rem;
  }

  .sm\:w-9 {
    width: 2.25rem;
  }

  .sm\:w-\[11\.5rem\] {
    width: 11.5rem;
  }

  .sm\:w-\[25\%\] {
    width: 25%;
  }

  .sm\:w-\[320px\] {
    width: 320px;
  }

  .sm\:w-\[340px\] {
    width: 340px;
  }

  .sm\:w-\[36\%\] {
    width: 36%;
  }

  .sm\:w-\[40\%\] {
    width: 40%;
  }

  .sm\:w-\[5\.5rem\] {
    width: 5.5rem;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:min-w-\[12\.5rem\] {
    min-width: 12.5rem;
  }

  .sm\:min-w-\[160px\] {
    min-width: 160px;
  }

  .sm\:min-w-\[5rem\] {
    min-width: 5rem;
  }

  .sm\:max-w-\[140px\] {
    max-width: 140px;
  }

  .sm\:max-w-\[15rem\] {
    max-width: 15rem;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:basis-0 {
    flex-basis: 0px;
  }

  .sm\:-translate-y-1 {
    --tw-translate-y: -0.25rem;
    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));
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

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

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

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

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-10 {
    gap: 2.5rem;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:gap-20 {
    gap: 5rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .sm\:space-y-40 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(10rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(10rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
  }

  .sm\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .sm\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }

  .sm\:self-auto {
    align-self: auto;
  }

  .sm\:overflow-visible {
    overflow: visible;
  }

  .sm\:rounded-3xl {
    border-radius: 1.5rem;
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-12 {
    padding: 3rem;
  }

  .sm\:p-2 {
    padding: 0.5rem;
  }

  .sm\:p-3 {
    padding: 0.75rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

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

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sm\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .sm\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .sm\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .sm\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm\:pb-0 {
    padding-bottom: 0px;
  }

  .sm\:pb-10 {
    padding-bottom: 2.5rem;
  }

  .sm\:pb-14 {
    padding-bottom: 3.5rem;
  }

  .sm\:pb-16 {
    padding-bottom: 4rem;
  }

  .sm\:pb-20 {
    padding-bottom: 5rem;
  }

  .sm\:pb-24 {
    padding-bottom: 6rem;
  }

  .sm\:pb-28 {
    padding-bottom: 7rem;
  }

  .sm\:pb-32 {
    padding-bottom: 8rem;
  }

  .sm\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .sm\:pb-8 {
    padding-bottom: 2rem;
  }

  .sm\:pt-10 {
    padding-top: 2.5rem;
  }

  .sm\:pt-12 {
    padding-top: 3rem;
  }

  .sm\:pt-14 {
    padding-top: 3.5rem;
  }

  .sm\:pt-16 {
    padding-top: 4rem;
  }

  .sm\:pt-20 {
    padding-top: 5rem;
  }

  .sm\:pt-24 {
    padding-top: 6rem;
  }

  .sm\:pt-28 {
    padding-top: 7rem;
  }

  .sm\:pt-3 {
    padding-top: 0.75rem;
  }

  .sm\:pt-32 {
    padding-top: 8rem;
  }

  .sm\:pt-36 {
    padding-top: 9rem;
  }

  .sm\:pt-6 {
    padding-top: 1.5rem;
  }

  .sm\:text-left {
    text-align: left;
  }

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

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

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

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .sm\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

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

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

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:leading-\[1\.06\] {
    line-height: 1.06;
  }

  .sm\:leading-relaxed {
    line-height: 1.625;
  }

  .sm\:first\:pl-0:first-child {
    padding-left: 0px;
  }

  .sm\:last\:pr-0:last-child {
    padding-right: 0px;
  }
}

@media (min-width: 768px) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:grid {
    display: grid;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

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

@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-24 {
    top: 6rem;
  }

  .lg\:top-\[calc\(var\(--nav-total-h\2c 5rem\)\+1\.5rem\)\] {
    top: calc(var(--nav-total-h,5rem) + 1.5rem);
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:order-none {
    order: 0;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mt-14 {
    margin-top: 3.5rem;
  }

  .lg\:mt-20 {
    margin-top: 5rem;
  }

  .lg\:mt-24 {
    margin-top: 6rem;
  }

  .lg\:mt-5 {
    margin-top: 1.25rem;
  }

  .lg\:mt-7 {
    margin-top: 1.75rem;
  }

  .lg\:mt-8 {
    margin-top: 2rem;
  }

  .lg\:mt-auto {
    margin-top: auto;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

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

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-6 {
    height: 1.5rem;
  }

  .lg\:h-8 {
    height: 2rem;
  }

  .lg\:h-auto {
    height: auto;
  }

  .lg\:h-full {
    height: 100%;
  }

  .lg\:min-h-0 {
    min-height: 0px;
  }

  .lg\:min-h-\[32rem\] {
    min-height: 32rem;
  }

  .lg\:w-\[420px\] {
    width: 420px;
  }

  .lg\:w-auto {
    width: auto;
  }

  .lg\:max-w-4xl {
    max-width: 56rem;
  }

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

  .lg\:max-w-none {
    max-width: none;
  }

  .lg\:max-w-xl {
    max-width: 36rem;
  }

  .lg\:flex-1 {
    flex: 1 1 0%;
  }

  .lg\:shrink-0 {
    flex-shrink: 0;
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1fr_220px\] {
    grid-template-columns: 1fr 220px;
  }

  .lg\:grid-cols-\[1fr_340px\] {
    grid-template-columns: 1fr 340px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1\.05fr\)_minmax\(0\2c 0\.95fr\)\] {
    grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 42\%\)_minmax\(0\2c 58\%\)\] {
    grid-template-columns: minmax(0,42%) minmax(0,58%);
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

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

  .lg\:items-stretch {
    align-items: stretch;
  }

  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

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

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-20 {
    gap: 5rem;
  }

  .lg\:gap-24 {
    gap: 6rem;
  }

  .lg\:gap-3 {
    gap: 0.75rem;
  }

  .lg\:gap-5 {
    gap: 1.25rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:self-start {
    align-self: flex-start;
  }

  .lg\:self-center {
    align-self: center;
  }

  .lg\:justify-self-end {
    justify-self: end;
  }

  .lg\:text-balance {
    text-wrap: balance;
  }

  .lg\:rounded-r-2xl {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }

  .lg\:border-b-0 {
    border-bottom-width: 0px;
  }

  .lg\:border-r {
    border-right-width: 1px;
  }

  .lg\:border-t-0 {
    border-top-width: 0px;
  }

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:p-14 {
    padding: 3.5rem;
  }

  .lg\:p-4 {
    padding: 1rem;
  }

  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .lg\:px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .lg\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .lg\:pb-0 {
    padding-bottom: 0px;
  }

  .lg\:pb-20 {
    padding-bottom: 5rem;
  }

  .lg\:pb-24 {
    padding-bottom: 6rem;
  }

  .lg\:pb-28 {
    padding-bottom: 7rem;
  }

  .lg\:pb-3 {
    padding-bottom: 0.75rem;
  }

  .lg\:pr-4 {
    padding-right: 1rem;
  }

  .lg\:pt-14 {
    padding-top: 3.5rem;
  }

  .lg\:pt-20 {
    padding-top: 5rem;
  }

  .lg\:pt-24 {
    padding-top: 6rem;
  }

  .lg\:pt-28 {
    padding-top: 7rem;
  }

  .lg\:pt-40 {
    padding-top: 10rem;
  }

  .lg\:pt-7 {
    padding-top: 1.75rem;
  }

  .lg\:text-left {
    text-align: left;
  }

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

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .lg\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .lg\:text-\[2\.65rem\] {
    font-size: 2.65rem;
  }

  .lg\:text-\[3\.25rem\] {
    font-size: 3.25rem;
  }

  .lg\:text-\[4\.5rem\] {
    font-size: 4.5rem;
  }

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

  .lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .lg\:leading-\[1\.04\] {
    line-height: 1.04;
  }

  .lg\:opacity-0 {
    opacity: 0;
  }

  .group:focus-within .lg\:group-focus-within\:opacity-100 {
    opacity: 1;
  }

  .group:hover .lg\:group-hover\:opacity-100 {
    opacity: 1;
  }
}

@media (min-width: 1280px) {
  .xl\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .xl\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .xl\:gap-14 {
    gap: 3.5rem;
  }

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

  .xl\:leading-\[1\.03\] {
    line-height: 1.03;
  }
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}

.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  .\[\&\>a\]\:lg\:min-h-0>a {
    min-height: 0px;
  }

  .\[\&\>a\]\:lg\:flex-1>a {
    flex: 1 1 0%;
  }
}

.\[\&\>svg\]\:h-full>svg {
  height: 100%;
}

.\[\&\>svg\]\:w-full>svg {
  width: 100%;
}