/* =========================================================
   Common — reusable, cross-section classes
   ========================================================= */

/* ---------- Container ---------- */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* ---------- Images ---------- */
img {
    width: 100%;
    height: auto;
}

/* ---------- Accessibility ---------- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- Flex ---------- */
.flex {
    display: flex;
}

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

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

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

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

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

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

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

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

/* ---------- Section hairlines ----------
   the 1px rule Figma draws between two sections that share a background.
   Put the class on the <section> rather than repeating the border in every
   section stylesheet. */
.border-top {
    border-top: 1px solid var(--color-border);
}

.border-bottom {
    border-bottom: 1px solid var(--color-border);
}

/* ---------- Accent bar ----------
   the 180x4 gradient rule that sits under a page title */
.accent-bar {
    flex-shrink: 0;
    width: 180px;
    height: 4px;
    border-radius: 2px;
    background-image: linear-gradient(to right, var(--color-signal-500), rgba(8, 198, 173, 0));
}

/* ---------- Breadcrumb ---------- */
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    /* Figma sets the gap with three mono spaces either side of the slash */
    list-style: none;
    /* flex items keep display:list-item, so the markers would still paint */
}

.breadcrumb li {
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-caption);
    color: var(--color-slate-500);
    display: inline-flex;
    gap: 0;

}

.breadcrumb li[aria-current="page"] {
    color: var(--color-heading);
}

.breadcrumb li+li::before {
    content: "/";
    margin-right: 8px;
    color: var(--color-ink-200);
}

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

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--color-teal-700);
}

@media (max-width:767px) {
    .breadcrumb ol {
        gap: 5px;
    }

    .breadcrumb li {
        font-size: var(--font-size-micro);
    }

    .breadcrumb li+li::before {
        margin-right: 5px;
    }
}

/* ---------- Text scale ----------
   Wrappers only. Never place these on a heading, paragraph or span.
   Use them when the design needs a body size other than the global default. */
/* the homepage hero pairs a 120px word with a 54px line -- a bespoke
   lockup, not the Heading/H1 library style every other page uses */
.text-display h1,
.text-display .h1 {
    font-size: var(--font-size-display-title);
    line-height: var(--line-height-display-title);
    letter-spacing: var(--letter-spacing-display-title);
}

.text-display h1 span,
.text-display .h1 span {
    display: block;
    margin-bottom: 2px;
    font-size: var(--font-size-display);
    line-height: var(--line-height-display);
    letter-spacing: var(--letter-spacing-display);
}

.text-xl p {
    font-size: var(--font-size-body-xl);
    line-height: var(--line-height-body-xl);
}

.text-subline p {
    font-size: var(--font-size-subline);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-subline);
    color: var(--color-slate-700);
}

.text-sub p {
    line-height: 1.3125;
    color: var(--color-slate-500);
}

.text-prose p {
    line-height: 1.65;
    color: var(--color-slate-700);
    font-size: var(--font-size-body-md);
}

.text-lead p {
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-lead);
    color: var(--color-teal-700);
}

.text-lg p {
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-body-lg);
}

/* Release Automation body copy — a step down from .text-prose. Figma
   separates these paragraphs with a blank line, so a stack of them takes
   the line height as its gap; --stack-gap is what .split-section-text reads. */
.text-compact {
    --stack-gap: 23px;
}

.text-compact p {
    font-size: var(--font-size-prose-sm);
    line-height: var(--line-height-prose-sm);
    color: var(--color-slate-700);
}

.text-relaxed p {
    line-height: var(--line-height-body-relaxed);
    color: var(--color-slate-700);
    font-size: var(--font-size-body-md);
}

.text-weight-medium p {
    font-weight: var(--font-weight-medium);
}

.text-md p {
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-body-md);
    color: var(--color-slate-700);
}

.text-emphasis p {
    font-family: var(--font-display);
    font-size: var(--font-size-body-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    color: var(--color-slate-700);
}

.text-note p {
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-note);
    color: var(--color-teal-700);
}

.text-caption p {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-body-sm);
}

.text-eyebrow :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-mono);
    font-size: var(--font-size-eyebrow);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-eyebrow);
    letter-spacing: var(--letter-spacing-eyebrow);
    color: var(--color-slate-500);
}

/* ---------- Dot list ----------
   bulleted items led by the 8px signal dot Figma draws as an ellipse.
   The owning section decides how the list flows (rows, columns, grid). */
.dot-list {
    list-style: none;
    /* flex items keep display:list-item, so the markers would still paint */
}

.dot-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-body-sm);
    color: var(--color-slate-700);
}

.dot-list li::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--color-signal-500);
}

/* ---------- Stat (value + label pair) ---------- */
.stat dd {
    display: flex;
    align-items: center;
    gap: 4px;
    order: 1;
    font-family: var(--font-display);
    font-size: var(--font-size-stat);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-stat);
    letter-spacing: var(--letter-spacing-stat);
    color: var(--color-signal-500);
    white-space: nowrap;
}

.stat dt {
    order: 2;
    font-family: var(--font-display);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h5);
    color: var(--color-ink-900);
    text-align: center;
}

/* ---------- Check list ----------
   items led by the bold check glyph Figma sets in the owning column's colour.
   The owning section supplies --check-color; the list keeps its own spacing. */
.check-list ul,
.content-template-section .content-body ul , .privacy-terms-section .entry-content ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
    /* flex items keep display:list-item, so the markers would still paint */
}

.check-list ul li,
.content-template-section .content-body ul li ,.privacy-terms-section .entry-content ul li{
    /* display: flex;
    align-items: flex-start; */
    /* Pricing sets the list at 15/21; the split sections set these two to
       Figma's larger 15.5/23. Same component, one line each to opt up. */
    font-size: var(--font-size-body-md);
    line-height: 1.3529;
    color: var(--color-slate-700);
    font-weight: var(--font-weight-regular);
    padding-left: 28px;
    position: relative;
}

.check-list ul li strong,
.check-list ul li b,
.content-template-section .content-body ul li strong,
.content-template-section .content-body ul li b , .privacy-terms-section .entry-content ul li strong , .privacy-terms-section .entry-content ul li b{
    display: inline;
    /* white-space: nowrap; */
}

.check-list ul li::before,
.content-template-section .content-body ul li::before , .privacy-terms-section .entry-content ul li::before{
    content: "✓";
    /* √ instead of ✓ */
    font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
    font-weight: var(--font-weight-bold);
    /* make sure the 700 weight is loaded */
    font-style: normal;
    /* remove italic unless you want the slant */
    font-size: var(--font-size-micro);
    line-height: 1;
    color: var(--check-color, var(--color-signal-700));
    background-color: var(--cap-bg-color, var(--color-signal-50));

    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 4px;
    border-radius: 50%;
    position: absolute;
    left: 0;

}

.check-list ul li a,
.content-template-section .content-body ul li a , .privacy-terms-section .entry-content ul li a{
    text-decoration: underline;
    font-size: inherit;
    line-height: inherit;
}

.check-list ul li a:hover,
.check-list ul li a:focus-visible,
.content-template-section .content-body ul li a:hover,
.content-template-section .content-body ul li a:focus-visible , .privacy-terms-section .entry-content ul li a:hover , .privacy-terms-section .entry-content ul li a:focus-visible{
    color: var(--color-heading);
}

.check-list.dual-column-list ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xm);
}

.page-for-it-leaders .check-list.dual-column-list ul {
    max-width: 60%;
    width: 100%;
}

.check-list.dual-column-list ul li {
    max-width: calc(50% - 7px);
    width: 100%;
}

/* Circled variant — the Demo hero sets each check in a tinted disc and
   sets the label in the heading colour, because there are only three of
   them and they carry the page's promise rather than detail. Same list,
   same markup; the mark moves into a circle. */
.check-list-circle ul li {
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3125;
    color: var(--color-ink-900);
}

.check-list-circle ul li::before {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    height: 22px;
    background-color: var(--color-signal-50);
    border-radius: 999px;
    font-size: var(--font-size-body-sm);
    color: var(--check-color, var(--color-teal-700));
}

/* ---------- Section placeholder ----------
   Stands in for a block whose content has not arrived, and reserves the
   height the design gives it so the rest of the page sits where it will
   finally sit. Deliberately plain and obviously unfinished — it should
   never be mistaken for a finished surface. */
.section-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-md);
    background-color: var(--color-white);
    border: 1px dashed var(--color-ink-200);
    border-radius: var(--radius-lg);
    text-align: center;
}

.section-placeholder p {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    line-height: var(--line-height-auto);
    color: var(--color-slate-500);
}

/* ---------- Slider ----------
   a range input drawn the way Figma draws it: a 6px rounded track that is
   teal up to the thumb and grey after it, with a 16px thumb sitting on top.
   Native inputs have no cross-browser "filled" part, so the split is painted
   as a hard-stop gradient positioned from --slider-pos (0..1, set by JS). */
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 16px !important;
    margin: 0;
    /* browsers give range inputs a 2px margin of their own */
    background-color: transparent !important;
    cursor: pointer;
    border: none !important;
    padding: 0 !important;
}

.slider:focus {
    outline: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background-image: linear-gradient(to right,
            var(--color-signal-500) calc(var(--slider-pos, 0) * (100% - 16px) + 8px),
            var(--color-ink-200) 0);
}

.slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background-image: linear-gradient(to right,
            var(--color-signal-500) calc(var(--slider-pos, 0) * (100% - 16px) + 8px),
            var(--color-ink-200) 0);
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    /* centres the 16px thumb on the 6px track */
    border: 3px solid var(--color-white);
    /* Figma strokes the thumb inside */
    border-radius: 999px;
    background-color: var(--color-signal-500);
}

.slider::-moz-range-thumb {
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 3px solid var(--color-white);
    border-radius: 999px;
    background-color: var(--color-signal-500);
}

/* ---------- Metric row ----------
   a run of .stat metrics separated by the 1px rule Figma draws between them.
   Shared by the homepage results band and the pricing productivity band. */
.metric-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 51px;
    /* Figma: 20px gap + 1px divider + 20px gap */
}

.metric-row .metric-row-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

/* the 1px x 64px divider Figma places between the metrics */
.metric-row .metric-row-item+.metric-row-item::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 50%;
    width: 1px;
    height: 64px;
    background-color: var(--color-border);
    transform: translateY(-50%);
}

.metric-row .metric-row-item dd img {
    flex-shrink: 0;
    width: 34px;
    height: 46px;
}

/* the arrow tracks the value down through the responsive type scale, and the
   divider follows the gap so it stays centred in it */
@media (max-width: 1199px) {

    .metric-row {
        gap: var(--space-lg);
    }

    .metric-row .metric-row-item+.metric-row-item::before {
        left: -14px;
    }

    .metric-row .metric-row-item dd img {
        width: 30px;
        height: 40px;
    }

    h2 br,
    .h2 br {
        display: none;
    }

}

@media (max-width: 991px) {

    .metric-row {
        gap: var(--space-md);
    }

    .metric-row .metric-row-item+.metric-row-item::before {
        left: -12px;
    }

    .metric-row .metric-row-item dd img {
        width: 26px;
        height: 36px;
    }

    .story-card {
        gap: 30px;
    }

}

@media (max-width: 767px) {

    /* two up, two down — the rules would point at nothing once the row wraps */
    .metric-row {
        flex-wrap: wrap;
        gap: var(--space-md) var(--space-sm);
    }

    .metric-row .metric-row-item {
        flex: 1 1 calc(50% - 8px);
        align-items: flex-start;
    }

    .metric-row .metric-row-item+.metric-row-item::before {
        content: none;
    }

    .metric-row .metric-row-item dd img {
        width: 22px;
        height: 30px;
    }

    .page-for-it-leaders .check-list.dual-column-list ul {
        max-width: 100%;
    }

}

/* @media (max-width: 575px) {

    .metric-row .metric-row-item {
        flex: 1 1 100%;
    }

    .metric-row .metric-row-item dd img {
        width: 20px;
        height: 27px;
    }

} */

/* ---------- Back to top ----------
   One button per page, last thing before the scripts. It is hidden until
   js/scroll.js sets data-visible, which happens once the reader is far
   enough down that returning to the top is a real journey.

   visibility, not just opacity: a transparent button would still be
   focusable and still answer to a click. The visibility transition is
   delayed on the way out so the fade finishes before it leaves. */
.back-to-top {
    position: fixed;
    right: var(--space-md);
    bottom: var(--space-md);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    padding: 0;
    background-color: var(--color-signal-500);
    border: 0;
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    color: var(--color-white);
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-none);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease,
        visibility 0s linear 0.25s;
}

.back-to-top[data-visible] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.back-to-top:hover,
.back-to-top:focus-visible {
    background-color: var(--color-signal-600);
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {

    .back-to-top {
        right: var(--space-sm);
        bottom: var(--space-sm);
        width: 42px;
        height: 42px;
    }

}

@media (prefers-reduced-motion: reduce) {

    .back-to-top {
        transition: opacity 0.25s ease, visibility 0s linear 0.25s;
        transform: none;
    }

}

/* ---------- Video still ----------
   The box a video sits in before anyone plays it: the still frame,
   a scrim over it, and the play button. Shared by the Agentic
   workflow cards and the Source Control video section, each of which
   adds only what is particular to it.

   The still is a background layer rather than an <img> so that a
   poster which fails to load simply is not painted and the gradient
   behind it stands in — no broken-image icon, nothing to clean up.
   js/video-modal.js sets --video-poster from the video's URL; set it
   yourself in the markup to serve the still from images/ instead. */

.video-still {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    padding: 18px;
    background-image: linear-gradient(160deg, #0a3a48, #062a35);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--color-border);
    overflow: hidden;
    width: 100%;
}

/* A still that ships with the page goes in as an ordinary <img>. Do not
   be tempted to pass its path through --video-poster instead: a relative
   url() inside a custom property is resolved against the stylesheet that
   consumes it, not the page, so "images/x.jpg" quietly becomes
   "css/images/x.jpg" and 404s. An <img> src resolves against the document
   like every other image on the site.

   alt="" is deliberate — the still is decoration, the link is already
   named — and it also means a file that fails to load draws nothing at
   all rather than a broken-image icon. */
.video-still .video-still-poster {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The other way in: js/video-modal.js looks a still up from the video's
   own service and sets this. Those URLs are absolute, so the trap above
   does not apply to them. */
.video-still::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--video-poster, none);
    background-position: center;
    background-size: cover;
    pointer-events: none;
}

/* keeps anything laid over the still readable, whatever frame the
   video happens to open on */
.video-still::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(to bottom, rgba(6, 26, 33, 0.72), rgba(6, 26, 33, 0.34) 38%, rgba(6, 26, 33, 0.34) 62%, rgba(6, 26, 33, 0.78));
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* only once there is a poster to darken — without one the gradient
   is already dark enough and a scrim would just muddy it. Either
   source counts: the <img> in the markup, or the attribute the
   script sets once a looked-up still has actually loaded. */
.video-still:has(.video-still-poster)::after,
.video-still[data-poster]::after {
    opacity: 1;
}

/* When the video is playing, remove all overlays so iframe controls are fully accessible */
.video-still.is-playing::before,
.video-still.is-playing::after {
    display: none;
    pointer-events: none;
}

.video-still .video-still-play {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background-color: var(--color-signal-500);
    border-radius: 999px;
    font-size: 22px;
    line-height: var(--line-height-none);
    color: var(--color-teal-950);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.video-still:hover .video-still-play,
.video-still:focus-visible .video-still-play {
    transform: scale(1.06);
    background-color: var(--color-signal-600);
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {

    .video-still .video-still-play {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

}

/* ---------- Video modal ----------
   js/video-modal.js builds this on first use, so no page carries the
   markup and nothing is downloaded until someone asks to watch.

   A native <dialog> rather than a div: it traps focus inside itself,
   closes on Esc and paints its own backdrop, none of which is then
   our code to get wrong. */

/* Width is what sizes this, because the frame's 16:9 turns width into
   height. So the height of the window has to be one of the candidates:
   without it a short window — a laptop in landscape, a phone turned
   sideways — pushes the close button off the top of the screen. The
   92px is the close button's row plus a little air. */
.video-modal {
    width: min(1100px, 92vw, calc((100vh - 92px) * 16 / 9));
    width: min(1100px, 92vw, calc((100dvh - 92px) * 16 / 9));
    max-width: none;
    max-height: none;
    padding: 0;
    background-color: transparent;
    border: 0;
    overflow: visible;
}

.video-modal::backdrop {
    background-color: rgba(6, 26, 33, 0.82);
}

.video-modal .video-modal-inner {
    position: relative;
}

.video-modal .video-modal-inner .video-modal-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--color-teal-950);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.video-modal .video-modal-inner .video-modal-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* above the frame rather than over it: the player puts its own controls
   in that corner and the two would sit on top of each other */
.video-modal .video-modal-inner .video-modal-close {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    background-color: transparent;
    border: 0;
    color: var(--color-white);
    font-size: 30px;
    line-height: var(--line-height-none);
    cursor: pointer;
    transition: color 0.2s ease;
}

.video-modal .video-modal-inner .video-modal-close:hover,
.video-modal .video-modal-inner .video-modal-close:focus-visible {
    color: var(--color-signal-500);
}

/* ---------- Small Mobile ---------- */
@media (max-width: 575px) {

    .video-modal .video-modal-inner .video-modal-close {
        width: 32px;
        height: 32px;
        font-size: 26px;
    }

}

/* ---------- Icon button ---------- */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    background-color: var(--color-white);
    border: 1.5px solid var(--color-ink-200);
    border-radius: 999px;
    font-family: var(--font-primary);
    font-size: var(--icon-button-glyph);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-none);
    color: var(--color-teal-700);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.icon-button:hover:not(:disabled),
.icon-button:focus-visible:not(:disabled) {
    border-color: var(--color-teal-700);
}

.icon-button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ---------- Story card ---------- */
.story-card {
    justify-content: space-between;
    /* min-height: 470px; */
    padding: var(--space-lg);
    /* Figma 30px — the 1px stroke sits inside the card in Figma */
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    height: 100%;
    gap: 56px;
}

.story-card .story-card-top {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
}

.story-card .story-card-top .story-card-accent {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background-image: linear-gradient(to right, var(--color-teal-700), #0ba582);
}

.story-card .story-card-top blockquote p {
    font-size: var(--font-size-h6);
    line-height: 1.8666;
    color: var(--color-slate-700);
}

.story-card .story-card-top blockquote p strong {
    font-weight: var(--font-weight-bold);
    color: var(--color-ink-900);
}

.story-card .story-card-att {
    gap: var(--space-xs);
    width: 100%;
}

.story-card .story-card-att .story-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}

.story-card .story-card-att .story-card-logo img {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 30px;
    object-fit: contain;
}

.story-card .story-card-att .story-card-logo-lg {
    height: 58px;
}

.story-card .story-card-att .story-card-logo-lg img {
    max-width: 112px;
    max-height: 58px;
}

.story-card .story-card-att .story-card-logo-empty {
    width: 100px;
    border: 1px dashed var(--color-ink-200);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-none);
    letter-spacing: 0.8px;
    color: var(--color-slate-500);
}

.story-card .story-card-att cite {
    font-family: var(--font-display);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-bold);
    font-style: normal;
    line-height: var(--line-height-stat);
    color: var(--color-teal-700);
}

.story-card .story-card-att strong {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    line-height: 1.3125;
    color: var(--color-ink-900);
}

.story-card .story-card-att p {
    font-size: var(--font-size-meta);
    line-height: 1.2857;
    color: var(--color-slate-500);
}

.story-card .story-card-att small {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-stat);
    color: var(--color-teal-700);
}

.story-card .story-card-att .link-arrow {
    margin-top: 26px;
}

.text-quote blockquote p {
    font-size: var(--font-size-body-md);
    line-height: 1.8235;
    color: var(--color-ink-900);
}

.text-quote figcaption {
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-body-sm);
    color: var(--color-heading);
}

/* ---------- Footer column ---------- */
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-col h2 {
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body-sm);
    letter-spacing: var(--letter-spacing-caption);
    color: var(--color-white-80);
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
}

.footer-col ul li a {
    display: block;
    /* keeps the row at the link height, not the inherited 23px line box */
    font-size: var(--font-size-h6);
    line-height: var(--line-height-body-sm);
    color: var(--color-white-80);
    transition: color 0.2s ease;
}

.footer-col ul li a:hover,
.footer-col ul li a:focus-visible {
    color: var(--color-white);
}

.footer-col ul li.current-menu-item a {
    color: var(--color-white);
}

/* ---------- Stat card ---------- */
.stat-card {
    gap: var(--space-xs);
    height: 160px;
    padding: 22px;
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    /* inset ring rather than a border: Figma draws the 1px stroke inside the card */
    box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-stat);
    border: 1px solid var(--color-border);
}

.stat-card strong {
    font-family: var(--font-display);
    font-size: var(--font-size-stat-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-stat);
    color: var(--color-signal-500);
}

.stat-card p {
    font-size: var(--font-size-link);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-link);
    color: var(--color-ink-900);
}

.stat-card small {
    font-size: var(--font-size-body-xs);
    line-height: var(--line-height-body-xs);
    color: var(--color-slate-500);
}

/* ---------- Feature card ---------- */
.feature-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-white);
    /* border: 1px solid var(--color-border); */
    border-radius: var(--radius-lg);
    /* inset ring rather than a border: Figma draws the 1px stroke inside the
       card, so a real border would steal 2px from the head and body heights */
    box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-md);
}

.feature-card .feature-card-head {
    flex-shrink: 0;
    gap: var(--space-sm);
    height: 108px;
    padding-inline: var(--space-lg);
    background-image: linear-gradient(to right, var(--color-heading), var(--color-teal-700));
}

.feature-card .feature-card-head .feature-card-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.16);
}

.feature-card .feature-card-head .feature-card-icon img {
    width: 26px;
    height: 26px;
}

.feature-card .feature-card-head h3 {
    color: var(--color-white);
}

.feature-card .feature-card-body {
    gap: 20px;
    padding: var(--space-lg);
}

.feature-card .feature-card-body .feature-card-text {
    gap: 14px;
}

.feature-card .feature-card-body .feature-card-text strong {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-card-title);
    color: var(--color-ink-900);
}

.feature-card .feature-card-body .feature-card-text p {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-card-body);
    color: var(--color-slate-500);
}


/* the card carries its own responsive behaviour so it can be dropped into any
   section — the owning grid only decides how many sit in a row */
@media (max-width: 767px) {

    .feature-card .feature-card-head {
        height: 92px;
        padding-inline: var(--space-md);
    }

    .feature-card .feature-card-head .feature-card-icon {
        width: 48px;
        height: 48px;
    }

    .feature-card .feature-card-body {
        padding: var(--space-md);
    }

    .story-card {
        gap: 12px;
    }

}

@media (max-width: 575px) {

    .feature-card .feature-card-head {
        gap: 12px;
        padding-inline: var(--space-sm);
    }

    .feature-card .feature-card-body {
        padding: var(--space-sm);
    }

}

/* ---------- Info card ----------
   The plain card: a tinted icon tile, a title and a line or two of copy.
   No gradient head, unlike .feature-card - this is the quieter one, used
   where a row of five or six needs to read as a list rather than a set
   of features.

   Used by: Compliance personas row. */
.info-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 21px 17px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.info-card .info-card-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    background-color: var(--color-signal-50);
    border-radius: var(--radius-sm);
    padding: 9px;
}

.info-card .info-card-icon img {
    filter: brightness(0) saturate(100%) invert(30%) sepia(100%) saturate(445%) hue-rotate(146deg) brightness(96%) contrast(92%);
}

.info-card h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    color: var(--color-heading);
}

.info-card p {
    font-size: var(--font-size-card-sm);
    line-height: var(--line-height-fine);
    color: var(--color-slate-700);
}

/* ---------- Dot rule ----------
   Short phrases on one line, separated by a small teal dot. Figma draws
   the dots as their own nodes; here the separator belongs to the item
   that follows it, so the list can wrap without a dangling dot. */
.dot-rule {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    list-style: none;
}

.dot-rule li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-figure-xs);
    line-height: 1.181;
    color: var(--color-teal-700);
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
}

.dot-rule li+li::before {
    content: "";
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-signal-500);
}

/* ---------- Card grid ----------
   a row of equal cards that reflows on its own. Grid rather than flex so the
   children need no rule of their own — the section sets how narrow a card may
   get before the row breaks, and how much air sits between them. */
.card-grid {
    display: grid;
    /* min() keeps the track from having a floor wider than the container --
       without it the row cannot shrink below --card-grid-min on small screens */
    grid-template-columns: repeat(auto-fit, minmax(min(var(--card-grid-min, 320px), 100%), 1fr));
    gap: var(--card-grid-gap, var(--space-lg));
    width: 100%;
}

/* ---------- Logo grid ----------
   hairline-separated cells; the 1px gaps show the wrapper colour through */
.logo-grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    background-color: var(--color-border);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    /* box-shadow: inset 0 0 0 1px var(--color-border); */
}

.logo-grid .logo-grid-row {
    display: flex;
    gap: 1px;
}

.logo-grid .logo-grid-row .logo-grid-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    height: 90px;
    padding: var(--space-sm);
    background-color: var(--color-white);
}

.logo-grid .logo-grid-row .logo-grid-cell img {
    width: auto;
    max-width: 100%;
    max-height: 42px;
    object-fit: contain;
}

/* four across leaves the marks unreadable on a phone */
/* @media (max-width: 575px) {

    .logo-grid .logo-grid-row {
        flex-wrap: wrap;
    }

    .logo-grid .logo-grid-row .logo-grid-cell {
        flex: 1 1 calc(50% - 1px);
        height: 76px;
    }

} */

/* ---------- Inline arrow link ---------- */
.link-arrow,
.contact-section .contact-info-card p a,
.content-template-section .content-body a , .privacy-terms-section .entry-content a{
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-body-sm);
    color: var(--color-teal-700);
}

.link-arrow span,
.contact-section .contact-info-card p a span , .privacy-terms-section .entry-content a span{
    font-family: var(--font-mono);
    font-weight: var(--font-weight-semibold);
    width: 11px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: stretch;
}

.link-arrow span img,
.contact-section .contact-info-card p a span img , .privacy-terms-section .entry-content a span img{
    max-width: 100%;
    height: auto !important;
    width: 100% !important;
}

.link-arrow:hover,
.contact-section .contact-info-card p a:hover,
.link-arrow:focus-visible,
.contact-section .contact-info-card p a:focus-visible,
.content-template-section .content-body a:hover,
.content-template-section .content-body a:focus-visible , .privacy-terms-section .entry-content a:hover , .privacy-terms-section .entry-content a:focus-visible{
    text-decoration: underline;
}

/* ---------- Button ---------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: var(--button-height);
    padding-inline: var(--space-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-body-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.button span {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-medium);
    width: 11px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: stretch;
}

.button span img {
    max-width: 100%;
    height: auto;
}

.button-primary {
    background-color: var(--color-signal-500);
    color: var(--color-white);
}

.button-primary:hover,
.button-primary:focus-visible {
    background-color: var(--color-signal-600);
}

.button-ghost {
    padding-inline: calc(var(--space-md) - 2px);
    /* keeps the 2px border inside the Figma width */
    background-color: var(--color-white);
    border: 2px solid var(--color-teal-700);
    color: var(--color-teal-700);
}

.button-ghost:hover,
.button-ghost:focus-visible {
    background-color: var(--color-teal-700);
    color: var(--color-white);
}

.button-ghost:hover span img,
.button-ghost:focus-visible span img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.button-md {
    min-height: var(--button-height-md);
}

.button-white {
    background-color: var(--color-white);
    color: var(--color-teal-950);
}

.button-white:hover,
.button-white:focus-visible {
    background-color: var(--color-border);
}

.button-white span img {
    filter: brightness(0) saturate(100%) invert(10%) sepia(82%) saturate(429%) hue-rotate(147deg) brightness(101%) contrast(102%);
}

.button-lg {
    min-height: var(--button-height-lg);
}

.button-blue {
    background-color: var(--color-teal-700);
    color: var(--color-white);
}

.button-blue:hover,
.button-blue:focus-visible {
    background-color: var(--color-heading);
}

.button-blue span img {
    filter: brightness(0) saturate(100%) invert(92%) sepia(94%) saturate(26%) hue-rotate(340deg) brightness(106%) contrast(107%);
}

@media (max-width: 991px) {

    .button {
        min-height: 48px;
        font-weight: var(--font-weight-semibold);
    }

    .story-card {
        min-height: 336px;
        padding: 20px 18px;
    }

}

@media (max-width: 767px) {
    .button {
        width: 100%;
    }

    .accent-bar {
        margin-right: auto;
    }

    .dot-rule {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .dot-rule li {
        width: 100%;
    }

    .dot-rule li::before {
        content: "";
        flex: 0 0 5px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: var(--color-signal-500);
    }

    .stat dt {
        text-align: left;
    }
}

/* Swiper Pagination Overrides */
.swiper-pagination-bullet {
    background-color: #CBD6DD !important;
    opacity: 1 !important;
}

.swiper-pagination-bullet-active {
    background-color: var(--color-signal-500, #08c6ad) !important;
}

/* Swiper Slide Equal Height Override */
.swiper-slide {
    height: auto !important;
}

/* Universal fix for Swiper clipping on zoom */
.swiper,
.swiper-container {
    padding-block: 15px !important;
    margin-block: -15px !important;
}

/* start :: form  */

.demo-hero-section-card {
    padding: 31px;
    /* Figma 32 — the 1px stroke sits inside the card in Figma */
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: 0 16px 40px rgba(10, 37, 64, 0.1);
}

/* h4's size but not its line height: the shared 21/20 is set for headings
   that sit tight above a rule, and this one sits above a form */
.demo-hero-section-card h2 {
    font-size: var(--font-size-figure-xs);
    line-height: 1.3181;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.2px;
    color: var(--color-ink-900);
    font-family: var(--font-primary);
    margin-bottom: 20px;
}

form {
    gap: 16px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

form {
    gap: 0 !important;
}

form fieldset {
    max-width: 100% !important;
}

form fieldset:not(:has([style*="display: none"], [style*="display:none"])) {
    margin-bottom: 16px !important;
}

form .form-columns-2 {
    gap: 14px !important;
}


form label,
form legend {
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-eyebrow) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.3076 !important;
    /* Figma: 14 → 17 */
    color: var(--color-slate-700) !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

/* Hiding HubSpot label when it is empty */
.hs-form-field>label:has(> span:empty) {
    display: none !important;
}

form .form-columns-2 {
    display: flex !important;
}

form .input {
    margin-right: 0 !important;
}

form input,
form select,
form textarea,
.product-hero-section .product-hero-section-wrapper .product-hero-section-row .product-hero-section-content .hero-faq-search-wrapper input {
    width: 100% !important;
    height: 44px !important;
    padding: 6px 14px !important;
    background-color: var(--color-white) !important;
    border: 1px solid var(--color-input-border) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-meta) !important;
    line-height: 1.2857 !important;
    color: var(--color-slate-700) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

form#adminbarsearch input {
    font-size: 13px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    line-height: 1.84615384 !important;
    text-indent: 0 !important;
    height: 24px !important;
    width: 24px !important;
    max-width: none !important;
    padding: 0 3px 0 24px !important;
    margin: 0 !important;
    color: #c3c4c7 !important;
    background-color: rgba(255, 255, 255, 0) !important;
    border: none !important;
    outline: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition-duration: .4s !important;
    transition-property: width, background !important;
    transition-timing-function: ease !important;
}

form textarea {
    resize: none !important;
    height: 100px !important;
}

form .hs_error_rollup {
    display: none !important;
}


form input::placeholder,
form select::placeholder,
form select option,
form select,
select:has(option[value=""]:checked),
form textarea::placeholder,
.product-hero-section .product-hero-section-wrapper .product-hero-section-row .product-hero-section-content .hero-faq-search-wrapper input::placeholder {
    color: #7C8F9E !important;
}

form input:focus,
form select:focus,
form textarea:focus,
.product-hero-section .product-hero-section-wrapper .product-hero-section-row .product-hero-section-content .hero-faq-search-wrapper input:focus {
    outline: none !important;
    border-color: var(--color-signal-500) !important;
    box-shadow: 0 0 0 3px rgba(8, 198, 173, 0.18) !important;
}


form input.invalid.error,
.product-hero-section .product-hero-section-wrapper .product-hero-section-row .product-hero-section-content .hero-faq-search-wrapper input.invalid.error {
    border-color: red !important;
    outline: none !important;
    box-shadow: 0 0 0 3px #ff00002b !important;
}

/* the chevron is drawn here rather than left to the platform, so the
   select matches the inputs on every OS */

form select {
    appearance: none !important;
    padding-right: 38px !important;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-slate-500) 50%), linear-gradient(135deg, var(--color-slate-500) 50%, transparent 50%) !important;
    background-position: right 18px top 51%, right 13px top 51% !important;
    background-repeat: no-repeat !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* thin chevron like Figma */
    background-image: url('../images/dropdown-arrow.svg') !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
    /* keep text from running under the icon */

}

form .input .inputs-list.multi-container {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    gap: 6px !important;
    padding: 0 !important;
}

form .input .inputs-list.multi-container li {
    max-width: calc(33.33% - 7.5px) !important;
    width: 100% !important;
}

form .hs_i_m_interested_in .input .inputs-list.multi-container li {
    max-width: 100% !important;
}

form .input .inputs-list.multi-container li label {
    font-family: var(--font-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
    user-select: none !important;
    /* Prevent text selection when clicking */
    position: relative !important;
        color: var(--color-slate-700) !important;
    /* Context for the input's clickable overlay */
}


/* Hack: Make the actual input element stretch its clickable area over the entire label */
form .input .inputs-list.multi-container li label input[type="checkbox"]::before {
    content: "" !important;
    position: absolute !important;
    top: -4px !important;
    bottom: -4px !important;
    left: -4px !important;
    right: -4px !important;
    z-index: 1 !important;
    /* Cover the text so clicking hits the input::before */
    cursor: pointer !important;
}

form .input .inputs-list.multi-container li label input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 1px solid var(--color-slate-400, #94a3b8) !important;
    border-radius: 3px !important;
    background-color: #fff !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    position: static !important;
    /* Important: Allows ::before to cover the whole label */
}

form .input .inputs-list.multi-container li label input[type="checkbox"]:focus {
    outline: none !important;
    border-color: var(--color-signal-500) !important;
    box-shadow: none !important;
}

form .input .inputs-list.multi-container li label input[type="checkbox"]:checked {
    background-color: var(--color-signal-500) !important;
    border-color: var(--color-signal-500) !important;
}

form .input .inputs-list.multi-container li label input[type="checkbox"]:checked::after {
    content: "✓" !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: 1 !important;
}

form .actions input[type="submit"] {
    width: 100% !important;
    min-width: 100% !important;
    min-height: 48px !important;
    padding-block: 12px !important;
    /* the form's own 16px row gap already sits above the button; this
       only tops it up to the 20 Figma leaves before the submit */
    margin-top: 4px !important;
    white-space: normal !important;
    text-align: center !important;
    border: none !important;
    cursor: pointer !important;
    box-sizing: border-box;
}

form .actions input[type="submit"] {
    background-color: var(--color-signal-500) !important;
    color: var(--color-white) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-xs) !important;
    min-height: var(--button-height) !important;
    padding-inline: var(--space-md) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-h6) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-body-sm) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

form .actions input[type="submit"]:hover,
form .actions input[type="submit"]:focus-visible {
    background-color: var(--color-signal-600) !important;
}

form .wpcf7-spinner {
    position: absolute;
    right: 20px;
    top: calc(50% + 4px);
    transform: translateY(-50%);
    margin: 0 auto;
}

form .hs-form-field ul {
    list-style: none !important;
    margin-top: var(--space-xs) !important;
    text-align: left;
}

form .hs-form-field ul li label {
    color: red !important;
    margin-bottom: 0 !important;
}

.submitted-message p {
    color: var(--color-green-600) !important;
    font-size: var(--font-size-subline) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: var(--line-height-subline) !important;
}


/* ---------- Mobile ---------- */
@media (max-width: 767px) {

    form .form-columns-2 {
        flex-direction: column !important;
        gap: 16px !important;
    }

    form .input .inputs-list.multi-container li {
        max-width: calc(50% - 7.5px) !important;
    }

    form .form-columns-2 .hs-form-field {
        width: 100% !important;
    }

    .video-still {
        padding: 15px !important;
    }

}

/* end :: form  */

/* start :: remove padding */
.remove-padding-top {
    padding-top: var(--remove-padding) !important;
}

.remove-padding-bottom {
    padding-bottom: var(--remove-padding) !important;
}

/* end :: remove padding */
/* =========================================================
   Lottie Placeholder Styles
   ========================================================= */
.dbm-lottie-wrapper {
    display: grid;
    width: 100%;
    place-items: center;
}

.dbm-lottie-placeholder,
.dbm-lottie-wrapper lottie-player {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
}

.dbm-lottie-placeholder {
    object-fit: contain;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.dbm-lottie-wrapper lottie-player {
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dbm-lottie-wrapper.is-loaded lottie-player {
    opacity: 1;
}

.dbm-lottie-wrapper.is-loaded .dbm-lottie-placeholder {
    opacity: 0;
    pointer-events: none;
}

.platform-section .platform-section-card .platform-section-panels .platform-section-panel .platform-section-panel-image .dbm-lottie-wrapper .dbm-lottie-placeholder {
    border-radius: 12px;
}

/* ACF Admin Preview Image Overrides */
.acf-admin-preview-container {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #f1f1f1;
    padding: 15px;
}

.acf-admin-preview-image {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


/* start :: privacy policy & termcondition page */
.privacy-terms-section{padding-block: var(--section-padding);}
.privacy-terms-section .entry-header h1 , .privacy-terms-section .entry-header .h1{margin-bottom: var(--space-md);}
.privacy-terms-section .entry-content p , .privacy-terms-section .entry-content ul{margin-bottom: var(--space-xxm);}
.privacy-terms-section .entry-content h2 , .privacy-terms-section .entry-content .h2{margin-bottom: var(--space-smm);}
.privacy-terms-section .entry-content h3 , .privacy-terms-section .entry-content .h3{margin-bottom: var(--space-xxl);}
/* end :: privacy policy & termcondition page */

div:has(img[src*="tracemyip.org"]){
    display:none !important;
}