/* logstag.com design system (LGSTG-1653)
   Light and airy, in Logstag's own blues: the logo's #203fae for actions, the marketing blue
   #2970ff from the app's brand sheet (logstag-frontend public/brand/preview) for emphasis and
   drawings, and the navy of the earlier logstag.com for dark surfaces. Violet is not a Logstag
   colour and is not used. Geist and the app's status colours. Motion explains the product and
   switches off under prefers-reduced-motion. */

/* Geist with Arial / Courier New metrics adjusted to it: the swap does not shift the layout */
@font-face {
    font-family: "Geist Fallback";
    src: local("Arial");
    font-weight: 100 450;
    size-adjust: 101.21%;
    ascent-override: 99.79%;
    descent-override: 28.65%;
    line-gap-override: 0%
}

/* Geist gets wider with weight: medium text uses a wider Arial, semibold and bold use Arial Bold.
   Headings keep their line breaks across the font swap, and stay bold if web fonts are blocked. */
@font-face {
    font-family: "Geist Fallback";
    src: local("Arial");
    font-weight: 451 550;
    size-adjust: 104.74%;
    ascent-override: 96.43%;
    descent-override: 27.68%;
    line-gap-override: 0%
}

@font-face {
    font-family: "Geist Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT");
    font-weight: 551 900;
    size-adjust: 99.3%;
    ascent-override: 101.71%;
    descent-override: 29.2%;
    line-gap-override: 0%
}

@font-face {
    font-family: "Geist Mono Fallback";
    src: local("Courier New");
    size-adjust: 99.09%;
    ascent-override: 101.93%;
    descent-override: 29.27%;
    line-gap-override: 0%
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false
}

:root {
    --primary: #203fae;
    --primary-hover: #1a338f;
    --primary-soft: #ebf2ff;
    --on-primary-soft: #1a338f;
    --primary-line: #d1e0ff;
    --accent: #2970ff; /* 4.3:1 on white: large text, icons and drawings only */
    --navy: #101f56;
    --sky: #7cceff;
    --lavender: #94a6eb;

    --ink: #181d27;
    --ink-2: #4b5565;
    --ink-3: #5f6b7a; /* 5.1:1 on --bg-soft, 4.7:1 on --primary-soft */
    --bg: #ffffff;
    --bg-soft: #f6f8fb;
    --line: #e5e7eb;
    --line-strong: #d1d5db;

    --success: #16a34a;
    --success-soft: #e7f6ec;
    --on-success-soft: #146c2e;
    --warning: #d48500;
    --warning-soft: #fff4e0;
    --on-warning-soft: #8a4b00;
    --danger: #c91c32;
    --danger-soft: #fdecee;

    --glow: linear-gradient(90deg, var(--primary), var(--accent), var(--sky), var(--primary));

    --font: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, Menlo, monospace;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow-md: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px -12px rgba(16, 24, 40, .14);
    --shadow-lg: 0 1px 2px rgba(16, 24, 40, .06), 0 28px 56px -18px rgba(16, 31, 86, .22);

    --container: 1200px;
    --gutter: 24px;
    --section: 112px;
    /* The header's height; the sticky stage and the explorer bar sit under it */
    --header-h: 88px
}

@media (max-width: 767px) {
    :root {
        --gutter: 20px;
        --section: 80px;
        --header-h: 68px
    }
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
    /* iOS Safari ignores the clip on body for touch scrolling; hidden is the fallback where clip is unsupported */
    overflow-x: hidden;
    overflow-x: clip
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip
}

img,
svg {
    max-width: 100%
}

[hidden] {
    display: none !important
}

a {
    color: var(--primary);
    text-underline-offset: 3px
}

h1,
h2,
h3,
p {
    margin: 0
}

h1,
h2,
h3 {
    text-wrap: balance;
    letter-spacing: -.02em;
    font-weight: 600
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px
}

.container {
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin: 0 auto;
    padding-inline: var(--gutter)
}

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

.eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3)
}

.eyebrow b {
    color: var(--primary);
    font-weight: 500
}

.text-link {
    color: var(--primary);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px
}

/* Buttons ------------------------------------------------------------ */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    border-radius: 10px;
    border: 1px solid transparent;
    font: 500 16px/1 var(--font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease
}

.btn-sm {
    height: 40px;
    padding: 0 16px;
    font-size: 15px
}

.btn-secondary {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--line-strong)
}

.btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md)
}

/* Primary: a rotating gradient ring, a soft halo and a light sweep on hover */
.btn-glow {
    isolation: isolate;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 24px -8px rgba(32, 63, 174, .65)
}

.btn-glow::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    background: conic-gradient(from var(--angle), var(--primary), var(--accent), var(--sky), var(--accent), var(--primary));
    z-index: -2
}

.btn-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: var(--primary);
    z-index: -1
}

.btn-glow .shine {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    overflow: hidden;
    pointer-events: none
}

.btn-glow .shine::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg)
}

.btn-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -10px rgba(32, 63, 174, .8)
}

.btn-glow:hover::after {
    background: var(--primary-hover)
}

.btn .arrow {
    transition: transform .2s ease
}

.btn:hover .arrow {
    transform: translateX(3px)
}

/* Header ------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease
}

.site-header.is-scrolled {
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-sm)
}

.site-header .container {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 32px
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 21px;
    letter-spacing: -.02em;
    /* The wordmark is lowercase by design; the markup keeps the brand spelling "Logstag" */
    text-transform: lowercase
}

.brand img {
    width: 30px;
    height: 38px
}

/* The header logo is larger than the footer's; phones keep the shorter header and a smaller logo */
.site-header .brand {
    font-size: 37px;
    gap: 14px
}

.site-header .brand img {
    width: 54px;
    height: 69px
}

@media (max-width: 767px) {
    .site-header .brand {
        font-size: 31px;
        gap: 13px
    }

    .site-header .brand img {
        width: 44px;
        height: 56px
    }
}

.nav {
    display: flex;
    gap: 26px;
    font-size: 15px
}

.nav a {
    color: var(--ink-2);
    text-decoration: none;
    transition: color .15s ease
}

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

.nav {
    align-items: center
}

.nav a[aria-current="page"],
.nav-group:has([aria-current="page"]) .nav-trigger {
    color: var(--ink);
    font-weight: 500
}

/* Product and Engines menus: open on hover and on click (aria-expanded); without JS, on keyboard focus */
.nav-group {
    position: relative
}

.nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ink-2);
    cursor: pointer;
    transition: color .15s ease
}

.nav-trigger svg {
    transition: transform .2s ease
}

.nav-group:hover .nav-trigger,
.nav-trigger[aria-expanded="true"] {
    color: var(--ink)
}

.nav-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg)
}

.nav-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: -18px;
    width: 360px;
    padding: 8px;
    display: grid;
    gap: 2px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s
}

.nav-panel::before {
    content: "";
    position: absolute;
    inset: -14px 0 auto;
    height: 14px
}

.nav-group:hover:not(.is-dismissed) .nav-panel,
.nav-trigger[aria-expanded="true"] + .nav-panel,
html:not(.js) .nav-group:focus-within .nav-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s
}

.nav-panel a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    color: var(--ink)
}

.nav-panel a:hover,
.nav-panel a:focus-visible,
.nav-panel a[aria-current="page"] {
    background: var(--bg-soft)
}

.nav-panel b {
    font-weight: 500;
    font-size: 15px
}

.nav-panel small {
    display: block;
    color: var(--ink-3);
    font-size: 13px;
    margin-top: 2px
}

.np-ico {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 12%, #fff)
}

.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px
}

/* Language switcher (LGSTG-1661): links to the same page in the other language */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
    text-decoration: none;
    font: 500 13px/1 var(--mono);
    letter-spacing: .04em;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 8px
}

.lang-switch:hover,
.lang-switch:focus-visible {
    color: var(--ink);
    border-color: var(--ink-3)
}

.mobile-menu a.item.lang-item {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.mobile-menu .lang-item span {
    font: 500 13px/1 var(--mono);
    color: var(--ink-3)
}

.menu-btn {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    cursor: pointer;
    align-items: center;
    justify-content: center
}

.menu-btn .x {
    display: none
}

.menu-btn[aria-expanded="true"] .x {
    display: block
}

.menu-btn[aria-expanded="true"] .bars {
    display: none
}

.mobile-menu {
    border-top: 1px solid var(--line);
    background: var(--bg);
    padding: 8px var(--gutter) 24px
}

.mobile-menu a.item {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    font-size: 17px
}

.mobile-menu .group {
    margin: 18px 0 2px;
    font: 500 12px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3)
}

.mobile-menu {
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto
}

.mobile-menu .btns {
    display: grid;
    gap: 12px;
    margin-top: 20px
}

@media (max-width: 1080px) {
    .nav {
        gap: 18px
    }
}

/* With the menu, the language switch stays in the header, next to the menu button */
@media (max-width: 960px) {

    .nav,
    .header-actions .btn {
        display: none
    }

    .site-header .container {
        gap: 8px
    }

    .menu-btn {
        display: inline-flex;
        margin-left: 0
    }
}

/* The Turkish labels are longer: the header switches to the menu earlier */
@media (max-width: 1120px) {

    html[lang="tr"] .nav,
    html[lang="tr"] .header-actions .btn {
        display: none
    }

    html[lang="tr"] .site-header .container {
        gap: 8px
    }

    html[lang="tr"] .menu-btn {
        display: inline-flex;
        margin-left: 0
    }
}

/* Sections ----------------------------------------------------------- */

.section {
    padding-block: var(--section);
    position: relative
}

.section-soft {
    background: var(--bg-soft)
}

.section-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
    margin-bottom: 56px
}

.section-head.center {
    margin-inline: auto;
    text-align: center;
    align-items: center
}

.h2 {
    font-size: clamp(32px, 4.2vw, 46px);
    line-height: 1.1
}

/* The second half of a section heading, in the blue of "layer" in the hero */
.h2 .quiet {
    color: var(--accent)
}

.lead {
    font-size: clamp(18px, 1.6vw, 20px);
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 62ch
}

/* Hero --------------------------------------------------------------- */

.hero {
    position: relative;
    padding-block: 72px 56px;
    overflow: hidden
}

.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: radial-gradient(rgba(32, 63, 174, .14) 1px, transparent 1.2px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at 60% 40%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 65% at 60% 40%, #000 30%, transparent 75%)
}

.blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1
}

.blob-a {
    width: 560px;
    height: 560px;
    top: -200px;
    right: -120px;
    background: radial-gradient(circle, rgba(32, 63, 174, .20), transparent 65%)
}

.blob-b {
    width: 480px;
    height: 480px;
    top: 120px;
    left: -220px;
    background: radial-gradient(circle, rgba(41, 112, 255, .14), transparent 65%)
}

.blob-c {
    width: 420px;
    height: 420px;
    bottom: -220px;
    right: 26%;
    background: radial-gradient(circle, rgba(124, 206, 255, .20), transparent 65%)
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
    align-items: center
}

.hero-copy {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.display {
    font-size: clamp(42px, 5.6vw, 66px);
    line-height: 1.04;
    letter-spacing: -.035em
}

.display .second {
    display: block;
    color: var(--ink-3)
}

.shimmer {
    color: var(--accent)
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.micro {
    font-size: 14px;
    color: var(--ink-3);
    margin-top: -8px
}

/* Hero scene: the data layer, drawn in SVG */
.scene {
    position: relative;
    width: 100%;
    aspect-ratio: 560 / 470
}

.scene svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible
}

.scene .chip-g {
    transform-box: fill-box
}

.scene text {
    font-family: var(--font)
}

.scene .mono {
    font-family: var(--mono)
}

.scene .finding {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    opacity: 0
}

/* References ---------------------------------------------------------- */

.refs {
    padding-block: 8px 72px
}

/* The section title sits on the rule that separates it from the hero */
.refs-title {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 32px;
    font: 500 12px/18px var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3)
}

.refs-title::before,
.refs-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line)
}

.refs-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* Eight logos: the max-width breaks them into two centred rows of four */
    max-width: 760px;
    margin-inline: auto;
    gap: 28px 48px
}

/* Customer logos at a common optical size, in each brand's own colours */
.ref .logo {
    display: block;
    height: var(--h, 36px);
    width: auto
}

/* Cards with a cursor spotlight ------------------------------------------ */

.spot {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.spot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(420px circle at var(--mx, -400px) var(--my, -400px), rgba(32, 63, 174, .10), transparent 45%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease
}

.spot:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(32, 63, 174, .35)
}

.spot:hover::before {
    opacity: 1
}

/* Product screenshots: the real app, on demo data ------------------------------- */

.shot-wrap {
    margin: 0
}

.shot {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    overflow: hidden
}

.shot img {
    display: block;
    width: 100%;
    height: auto
}

/* The capture ends mid-page: fade it out instead of showing a hard cut */
.shot.fade img {
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, #000 78%, transparent)
}

/* Numbered pins on a screenshot, explained by the notes underneath */
.pin {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font: 600 13px/1 var(--mono);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 6px 16px rgba(16, 31, 86, .22)
}

.shot .pin {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%)
}

.shot-notes {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 28px
}

.shot-notes li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 14px;
    align-content: start
}

.shot-notes .pin {
    grid-row: span 2
}

.shot-notes h3 {
    font-size: 19px;
    line-height: 1.35;
    padding-top: 3px
}

/* --ink-2 on --bg-soft is 7.1:1; the larger size keeps the notes easy to read under a screenshot */
.shot-notes p {
    grid-column: 2;
    margin: 0;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink-2)
}

/* Notes without pins: a short rule on top stands in for the number */
.shot-notes.plain li {
    display: block;
    padding-top: 14px;
    border-top: 2px solid var(--primary-line)
}

.shot-notes.plain p {
    margin-top: 6px
}

@media (max-width: 1023px) {
    .checks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .shot-notes {
        grid-template-columns: minmax(0, 1fr)
    }
}

@media (max-width: 767px) {
    .shot .pin {
        width: 20px;
        height: 20px;
        font-size: 10px;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .92)
    }
}

/* Insights ------------------------------------------------------------ */

.sev {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font: 500 12px/1 var(--font)
}

.sev.high {
    background: #fff1e6;
    color: #9a3412
}

.sev.conf {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    color: var(--ink-2)
}

.families {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px
}

.family {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.family h3 {
    font-size: 19px
}

.family p {
    color: var(--ink-2);
    font-size: 15px
}

.engines-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto
}

.engines-dots span {
    font: 500 11px/1 var(--mono);
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--primary-soft);
    color: var(--on-primary-soft)
}

.engines-dots span.off {
    background: var(--bg-soft);
    color: var(--ink-3);
    text-decoration: line-through
}

/* Supported databases ---------------------------------------------------- */

/* Supported databases as a logo cloud; rows stay centred when they wrap */
.db-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px
}

.db-cloud-item {
    width: 148px;
    padding: 22px 8px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-radius: var(--r-lg);
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .2s ease
}

.db-cloud-item img {
    display: block;
    width: 44px;
    height: 44px
}

.stretched {
    color: inherit;
    text-decoration: none
}

.stretched::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1
}

.mono-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font: 600 14px/1 var(--mono);
    color: #fff;
    flex: none
}

/* Logos of different shapes share one footprint on a neutral tile; --s sets the tile size */
.engine-logo {
    --s: 44px;
    position: relative;
    width: var(--s);
    height: var(--s);
    border-radius: calc(var(--s) * .28);
    display: grid;
    place-items: center;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    flex: none
}

.engine-logo img {
    display: block;
    width: calc(var(--s) * .64);
    height: calc(var(--s) * .64)
}

.engine-foot {
    margin-top: 32px;
    display: grid;
    gap: 8px;
    text-align: center;
    color: var(--ink-2);
    font-size: 16px
}

/* Alerts: group, explain, resolve ----------------------------------------- */

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center
}

.checks {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    gap: 16px
}

.checks li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    color: var(--ink-2);
    font-size: 16px
}

.checks li b {
    color: var(--ink);
    font-weight: 600
}

.checks .tick {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
    display: grid;
    place-items: center
}

/* Under a full-width visual the checklist reads as three short columns */
.checks-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 32px;
    margin-top: 44px
}

/* Tabbed screenshots: one real screen at a time, tabs above; site.js rotates them while on screen */
.tabshots-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px
}

.tabshots-tabs [role="tab"] {
    position: relative;
    overflow: hidden;
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink-2);
    font: 500 14px/1.2 var(--font);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease
}

.tabshots-tabs [role="tab"]:hover {
    color: var(--ink)
}

.tabshots-tabs [aria-selected="true"] {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: var(--primary-line)
}

/* The active tab fills while its screen is up: over time, or as the page scrolls through its stretch */
.tabshots.is-timed [aria-selected="true"]::after,
.tabshots.is-scrolled [aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--primary);
    transform-origin: left
}

.tabshots.is-timed [aria-selected="true"]::after {
    animation: tab-progress var(--tab-ms, 6s) linear forwards
}

.tabshots.is-scrolled [aria-selected="true"]::after {
    transform: scaleX(var(--tab-fill, 0))
}

@keyframes tab-progress {
    from { transform: scaleX(0) }
    to { transform: scaleX(1) }
}

.tabshots-frame {
    display: grid;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg);
    box-shadow: var(--shadow-lg)
}

.tabshots-panel {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s
}

.tabshots-panel.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease
}

.tabshots-panel img {
    display: block;
    width: 100%;
    height: auto
}

/* Without JS the first screen shows and the tabs have nothing to switch */
html:not(.js) .tabshots-tabs {
    display: none
}

html:not(.js) .tabshots-panel:first-child {
    opacity: 1;
    visibility: visible
}

/* Tabs beside the screen (Reports): each tab carries a title and one line; the page gets most of the width */
.tabshots.side {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: 32px;
    align-items: start
}

.tabshots.side .tabshots-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0
}

.tabshots.side [role="tab"] {
    display: grid;
    gap: 6px;
    padding: 18px 20px;
    border-radius: var(--r-lg);
    text-align: left;
    white-space: normal
}

.tabshots.side [role="tab"] b {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink)
}

.tabshots.side [role="tab"] span {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-2)
}

.tabshots.side [aria-selected="true"] b {
    color: var(--primary)
}

/* Scroll-driven tabs (homepage, 768px and up): the stage (section heading, tabs and screen) fills the
   window under the header and stays there while the page scrolls through the runway, one stretch per
   tab; site.js shows the tab for the current stretch and sizes the screen to the room left. A window
   too short for a readable screen gets .is-static and the tabs work as on phones: tap and timer */
@media screen and (min-width: 768px) {
    html.js .tabshots-runway:not(.is-static) {
        --tab-scroll: 60vh;
        --stage-pad: 24px;
        margin-top: calc(-1 * var(--stage-pad))
    }

    html.js .tabshots-runway:not(.is-static)::after {
        content: "";
        display: block;
        height: calc(var(--n, 0) * var(--tab-scroll))
    }

    html.js .tabshots-runway:not(.is-static) .tabshots-stage {
        position: sticky;
        top: var(--stick-top, calc(var(--header-h) + 1px));
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: calc(100vh - var(--stick-top, calc(var(--header-h) + 1px)));
        min-height: calc(100svh - var(--stick-top, calc(var(--header-h) + 1px)));
        padding-block: var(--stage-pad)
    }

    /* The title may use the full width (longer Turkish titles stay on one line); the intro keeps its measure */
    html.js .tabshots-runway:not(.is-static) .section-head {
        max-width: none;
        margin-bottom: 28px
    }

    html.js .tabshots-runway:not(.is-static) .section-head .lead {
        max-width: 760px
    }

    html.js .tabshots-runway:not(.is-static) .tabshots-frame {
        width: var(--shot-w, 100%);
        max-width: 100%;
        margin-inline: auto
    }

    /* Under the screen, only the notes of the current tab (site.js marks them .is-current); the others
       stay readable by screen readers. --notes-h keeps the area as tall as the tallest set, so the
       screen does not move when the tab changes */
    /* As wide as the screen, but never narrower than 960px, so a short window's notes stay two or three lines */
    html.js .tabshots-runway:not(.is-static) .tabshots-notes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 32px;
        align-content: start;
        width: max(var(--shot-w, 100%), min(100%, 960px));
        max-width: 100%;
        min-height: var(--notes-h, 0);
        margin: 28px auto 0
    }

    html.js .tabshots-runway:not(.is-static) .tabshots-notes[data-count="1"] > .is-current {
        grid-column: 1 / -1
    }

    html.js .tabshots-runway:not(.is-static) .tabshots-notes > :not(.is-current) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0
    }

    html.js .tabshots-runway:not(.is-static) .tabshots-notes > .is-current {
        animation: note-in .45s ease both
    }

    html.js .tabshots-runway:not(.is-static) .checks li {
        font-size: 15px;
        line-height: 1.5
    }

    /* "More on X" stays in view with the section: under the screen (or its notes), at their right edge */
    html.js .tabshots-runway:not(.is-static) .tabshots-stage > .more-link {
        width: var(--shot-w, 100%);
        max-width: 100%;
        margin: 12px auto 0
    }

    html.js .tabshots-runway:not(.is-static) .tabshots-notes + .more-link {
        width: max(var(--shot-w, 100%), min(100%, 960px))
    }
}

/* Reports beside their tabs: the screen keeps to the right edge, where its "More on" link sits */
@media screen and (min-width: 1024px) {
    html.js .tabshots-runway:not(.is-static) .tabshots.side .tabshots-frame {
        margin-inline: auto 0
    }

    html.js .tabshots-runway:not(.is-static) .tabshots.side + .more-link {
        width: 100%
    }
}

@keyframes note-in {
    from { opacity: 0; transform: translateY(6px) }
    to { opacity: 1; transform: none }
}

/* Short windows: tighter spacing leaves more room for the screen */
@media screen and (min-width: 768px) and (max-height: 800px) {
    html.js .tabshots-runway:not(.is-static) {
        --stage-pad: 16px
    }

    html.js .tabshots-runway:not(.is-static) .section-head {
        margin-bottom: 24px
    }

    html.js .tabshots-runway:not(.is-static) .tabshots-tabs {
        margin-bottom: 16px
    }

    html.js .tabshots-runway:not(.is-static) .tabshots-notes {
        margin-top: 18px
    }

    html.js .tabshots-runway:not(.is-static) .tabshots.side .tabshots-tabs {
        gap: 8px
    }

    html.js .tabshots-runway:not(.is-static) .tabshots.side [role="tab"] {
        gap: 4px;
        padding: 12px 16px
    }

    html.js .tabshots-runway:not(.is-static) .tabshots.side [role="tab"] span {
        font-size: 13.5px;
        line-height: 1.45
    }
}

/* Tablets: the report tabs above the screen become title pills, so the screen keeps its size */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    html.js .tabshots-runway:not(.is-static) .tabshots.side .tabshots-tabs {
        flex-direction: row;
        justify-content: center;
        gap: 8px
    }

    html.js .tabshots-runway:not(.is-static) .tabshots.side [role="tab"] {
        display: block;
        padding: 9px 18px;
        border-radius: 999px
    }

    html.js .tabshots-runway:not(.is-static) .tabshots.side [role="tab"] b {
        font-size: 14px;
        font-weight: 500;
        color: inherit
    }

    html.js .tabshots-runway:not(.is-static) .tabshots.side [role="tab"] span {
        display: none
    }
}

/* Security -------------------------------------------------------------- */

.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.scroll-x svg {
    min-width: 640px
}

.secure-scene {
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    padding: clamp(16px, 2.5vw, 28px);
    margin-bottom: 40px
}

.secure-scene svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible
}

.secure-scene text {
    font-family: var(--font)
}

.secure-scene .mono {
    font-family: var(--mono)
}

.does {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px
}

.does .col {
    padding: 28px
}

.does h3 {
    font-size: 19px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px
}

.does ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px
}

.does li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    color: var(--ink-2);
    font-size: 15px
}

.does .yes svg {
    color: var(--success)
}

.does .no svg {
    color: var(--danger)
}

/* Text only until the certification body's mark arrives (LGSTG-1650) */
.iso {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500
}

.footer-iso {
    margin: 24px 0 0
}

/* FAQ ---------------------------------------------------------------------- */

.faq {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 56px
}

.faq-list {
    display: grid;
    gap: 12px
}

.faq details {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg);
    transition: border-color .2s ease, box-shadow .2s ease
}

.faq details[open] {
    border-color: rgba(32, 63, 174, .35);
    box-shadow: var(--shadow-md)
}

.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-weight: 500;
    font-size: 17px
}

.faq summary::-webkit-details-marker {
    display: none
}

.faq summary .pm {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--bg-soft);
    display: grid;
    place-items: center;
    flex: none;
    transition: transform .25s ease, background-color .25s ease
}

.faq details[open] summary .pm {
    transform: rotate(45deg);
    background: var(--primary-soft);
    color: var(--primary)
}

.faq .answer {
    padding: 0 20px 20px;
    color: var(--ink-2);
    font-size: 16px
}

/* Closing CTA ---------------------------------------------------------------- */

.closing {
    position: relative;
    border-radius: 32px;
    padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 64px);
    background:
        radial-gradient(600px circle at 15% 20%, rgba(32, 63, 174, .16), transparent 60%),
        radial-gradient(520px circle at 85% 80%, rgba(41, 112, 255, .13), transparent 60%),
        radial-gradient(420px circle at 70% 10%, rgba(124, 206, 255, .16), transparent 60%),
        var(--bg-soft);
    border: 1px solid var(--line);
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px
}

/* Footer ---------------------------------------------------------------------- */

/* A page that ends with a padded section already has its bottom space; don't add the footer's on top */
main:has(> .section:last-child) + .site-footer {
    margin-top: 0
}

.site-footer {
    margin-top: var(--section);
    border-top: 1px solid var(--line);
    background: var(--bg-soft);
    padding-block: 56px 36px;
    font-size: 15px
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) repeat(2, minmax(0, 1fr));
    gap: 32px
}

.footer-grid .about {
    color: var(--ink-2);
    max-width: 34ch;
    display: grid;
    gap: 14px
}

.footer-grid h3 {
    font: 500 12px/16px var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 14px
}

.footer-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px
}

.footer-grid a {
    color: var(--ink-2);
    text-decoration: none
}

.footer-grid a:hover {
    color: var(--primary)
}

.footer-bottom {
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    color: var(--ink-3);
    font-size: 14px
}

.footer-bottom a {
    color: var(--ink-2)
}

.cookie-settings-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-2);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px
}

/* Cookie consent (LGSTG-1644), same banner as on the legacy pages */
.cookie-consent {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 1000;
    width: calc(100% - 32px);
    max-width: 760px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-lg)
}

.cookie-consent-text {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    line-height: 20px
}

.cookie-consent-text a {
    color: var(--primary)
}

.cookie-consent-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0
}

.cookie-consent-btn {
    padding: 10px 18px;
    border: 1.5px solid var(--primary);
    border-radius: 8px;
    background: #fff;
    color: var(--primary);
    font: 600 14px/1 var(--font);
    cursor: pointer
}

.cookie-consent-btn:hover {
    background: var(--primary-soft)
}

@media (max-width: 640px) {
    .cookie-consent {
        flex-direction: column;
        align-items: stretch;
        gap: 12px
    }

    .cookie-consent-btn {
        flex: 1
    }
}

/* Responsive ------------------------------------------------------------------------ */

@media (max-width: 1023px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .scene {
        max-width: 620px;
        margin-inline: auto
    }

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

    .tabshots.side {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px
    }

    .split,
    .faq {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px
    }

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

    .footer-grid .about {
        grid-column: 1 / -1
    }

    /* Smaller logos; the max-width keeps tablets at four per row */
    .refs-inner {
        max-width: 580px;
        gap: 24px 32px
    }

    .ref .logo {
        height: calc(var(--h, 36px) * .8)
    }
}

@media (max-width: 767px) {
    .hero {
        padding-block: 40px 32px
    }

    .checks-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .db-cloud-item {
        width: calc((100% - 24px) / 3);
        padding: 16px 4px 14px;
        font-size: 14px
    }

    .cta-row .btn {
        width: 100%
    }

    .families,
    .does {
        grid-template-columns: minmax(0, 1fr)
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

/* Motion: only when the visitor has not asked for less ------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .btn-glow::before {
        animation: spin 4s linear infinite
    }

    .btn-glow:hover .shine::after {
        animation: sweep .9s ease
    }

    .btn-glow.pulse::before {
        animation: spin 4s linear infinite, halo 2.6s ease-in-out infinite
    }

    .blob-a {
        animation: drift 18s ease-in-out infinite alternate
    }

    .blob-b {
        animation: drift 22s ease-in-out infinite alternate-reverse
    }

    .blob-c {
        animation: drift 26s ease-in-out infinite alternate
    }

    .scene .chip-g {
        animation: bob 6s ease-in-out infinite
    }

    .scene .chip-g:nth-of-type(2n) {
        animation-duration: 7s;
        animation-delay: -2s
    }

    .scene .chip-g:nth-of-type(3n) {
        animation-duration: 8s;
        animation-delay: -4s
    }

    .scene .ring {
        animation: ring 3s ease-out infinite;
        transform-box: fill-box;
        transform-origin: center
    }

    .scene .ring.r2 {
        animation-delay: 1.5s
    }

    .scene .finding {
        animation: finding 18s ease infinite
    }

    .scene .finding.f2 {
        animation-delay: 6s
    }

    .scene .finding.f3 {
        animation-delay: 12s
    }

    .scene .wire {
        animation: dash 1.6s linear infinite
    }

    /* Scroll reveal: html.js is set by an inline script, so without JS everything is visible */
    html.js [data-reveal] {
        opacity: 0;
        transform: translateY(16px) scale(.98);
        transition: opacity .35s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1);
        /* Halve the per-item stagger so a row of cards finishes together, not one by one */
        transition-delay: calc(var(--d, 0s) * .5)
    }

    html.js [data-reveal="left"] {
        transform: translateX(-36px)
    }

    html.js [data-reveal="right"] {
        transform: translateX(36px)
    }

    html.js [data-reveal="pop"] {
        transform: scale(.9)
    }

    /* On a phone a sideways start pushes the card past the screen edge, so slide up instead */
    @media (max-width: 767px) {
        html.js [data-reveal="left"],
        html.js [data-reveal="right"] {
            transform: translateY(16px)
        }
    }

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

}

/* Without motion every animated element shows its final, meaningful state */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }

    .scene .finding.f1 {
        opacity: 1
    }
}

@keyframes spin {
    to {
        --angle: 360deg
    }
}

@keyframes halo {

    0%,
    100% {
        filter: blur(0)
    }

    50% {
        filter: blur(3px)
    }
}

@keyframes sweep {
    from {
        left: -60%
    }

    to {
        left: 130%
    }
}

@keyframes drift {
    from {
        transform: translate3d(0, 0, 0) scale(1)
    }

    to {
        transform: translate3d(40px, 30px, 0) scale(1.08)
    }
}

@keyframes bob {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }
}

@keyframes ring {
    0% {
        transform: scale(.85);
        opacity: .55
    }

    100% {
        transform: scale(1.45);
        opacity: 0
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: -16
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg)
    }

    50% {
        transform: translateY(-14px) rotate(2deg)
    }
}

/* Hero findings: three detector families take turns, 6 s each in an 18 s loop */
@keyframes finding {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.92)
    }

    4%,
    28% {
        opacity: 1;
        transform: none
    }

    33%,
    100% {
        opacity: 0;
        transform: translateY(-6px) scale(.98)
    }
}

/* Alerts timeline (percentages of 12 s) */
/* Inner pages ------------------------------------------------------------------------ */

.page-hero {
    position: relative;
    padding-block: 64px 40px;
    overflow: hidden
}

.page-hero .container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: calc(860px + 2 * var(--gutter));
    margin-inline: 0
}

.page-hero .container.wide {
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto
}

.page-title {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.06;
    letter-spacing: -.03em
}

/* Contact (LGSTG-1665) ---------------------------------------------------------------- */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 32px;
    align-items: start
}

.form-card {
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    padding: clamp(20px, 3vw, 36px)
}

.form-card form {
    display: grid;
    gap: 22px
}

.field {
    display: grid;
    gap: 8px
}

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink)
}

.label .opt {
    color: var(--ink-3);
    font-weight: 400
}

.input,
.select,
.textarea {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--bg);
    color: var(--ink);
    font: 400 16px/1.4 var(--font);
    transition: border-color .15s ease, box-shadow .15s ease
}

.textarea {
    height: auto;
    min-height: 112px;
    padding: 12px 14px;
    resize: vertical
}

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%235f6b7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(32, 63, 174, .15)
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0
}

legend {
    padding: 0;
    margin-bottom: 10px
}

.intents {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px
}

.intent {
    position: relative
}

.intent input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.intent label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 14px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--bg);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease
}

.intent label:hover {
    border-color: var(--primary);
    transform: translateY(-2px)
}

.intent .i {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--bg-soft);
    color: var(--ink-2);
    display: grid;
    place-items: center;
    transition: background-color .2s ease, color .2s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1)
}

.intent input:checked + label {
    border-color: var(--primary);
    background: #fbfcff;
    box-shadow: 0 0 0 4px rgba(32, 63, 174, .14), var(--shadow-md)
}

.intent input:checked + label .i {
    background: var(--primary);
    color: #fff;
    transform: scale(1.08)
}

.intent input:focus-visible + label {
    outline: 2px solid var(--primary);
    outline-offset: 3px
}

.expect {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--on-primary-soft);
    font-size: 14px
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.chip-check {
    position: relative
}

.chip-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.chip-check label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease
}

.chip-check input:checked + label {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--on-primary-soft)
}

.chip-check input:focus-visible + label {
    outline: 2px solid var(--primary);
    outline-offset: 2px
}

.qualify {
    display: grid;
    gap: 22px;
    padding: 20px;
    border-radius: 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line)
}

.qualify-title {
    font-size: 14px;
    color: var(--ink-2)
}

.form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.privacy {
    font-size: 13px;
    color: var(--ink-3);
    max-width: 46ch
}

.form-error {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 14px
}

.btn[disabled] {
    opacity: .7;
    cursor: progress
}

.side {
    display: grid;
    gap: 16px
}

.side-card {
    padding: 24px;
    display: grid;
    gap: 12px
}

.side-card h2 {
    font-size: 18px
}

.side-card p,
.side-card li {
    color: var(--ink-2);
    font-size: 15px
}

.side-card ol {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px
}

.side-card .mail {
    font: 500 15px/1.4 var(--mono);
    color: var(--primary);
    user-select: all
}

.thanks {
    display: grid;
    gap: 16px;
    justify-items: start;
    padding: 8px 0
}

.thanks .big-check {
    width: 64px;
    height: 64px
}

.thanks .big-check circle {
    stroke-dasharray: 190;
    stroke-dashoffset: 0
}

.thanks .big-check path {
    stroke-dasharray: 40;
    stroke-dashoffset: 0
}

.thanks h2 {
    font-size: 28px
}

.thanks p {
    color: var(--ink-2)
}

@media (prefers-reduced-motion: no-preference) {
    .thanks .big-check circle {
        animation: drawc .7s ease-out both
    }

    .thanks .big-check path {
        animation: drawp .4s ease-out .55s both
    }

    .expect {
        animation: fadeup .35s ease both
    }
}

@keyframes drawc {
    from {
        stroke-dashoffset: 190
    }
}

@keyframes drawp {
    from {
        stroke-dashoffset: 40
    }
}

@keyframes fadeup {
    from {
        opacity: 0;
        transform: translateY(6px)
    }
}

@media (max-width: 1023px) {
    .contact-grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

@media (min-width: 601px) and (max-width: 760px) {
    .intents {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .intents .intent:nth-child(n+4) {
        grid-column: span 1
    }
}

@media (max-width: 600px) {
    .field-row {
        grid-template-columns: minmax(0, 1fr)
    }

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

    .intents .intent:last-child {
        grid-column: 1 / -1
    }
}

/* Pricing (LGSTG-1658) --------------------------------------------------------------- */

.paths {
    display: grid
}

/* One offer: what it is on the left, what it takes on the right, like the quote band below */
.path {
    padding: clamp(24px, 4vw, 48px);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px
}

.path-offer,
.path-steps {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.path.featured {
    border-color: rgba(32, 63, 174, .45);
    box-shadow: 0 0 0 4px rgba(32, 63, 174, .08), var(--shadow-lg)
}

.path .p-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary)
}

.path.featured .p-ico {
    background: var(--primary);
    color: #fff
}

.path h2 {
    font-size: 26px;
    line-height: 1.2
}

.path p {
    color: var(--ink-2)
}

.path h3 {
    font: 500 12px/16px var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-top: 4px
}

.ticks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px
}

.ticks li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    color: var(--ink-2);
    font-size: 15px
}

.ticks svg {
    color: var(--success);
    margin-top: 3px
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0
}

.timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding-bottom: 14px;
    color: var(--ink-2);
    font-size: 15px
}

.timeline li::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 26px;
    bottom: 0;
    width: 2px;
    background: var(--line)
}

.timeline li:last-child::before {
    display: none
}

.timeline .n {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    display: grid;
    place-items: center;
    font: 600 12px/1 var(--mono);
    color: var(--primary);
    position: relative;
    z-index: 1
}

.path .btn {
    margin-top: 6px;
    align-self: flex-start
}

.quote-band {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    align-items: center;
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    background:
        radial-gradient(500px circle at 90% 10%, rgba(41, 112, 255, .10), transparent 60%),
        radial-gradient(500px circle at 10% 90%, rgba(32, 63, 174, .10), transparent 60%),
        var(--bg-soft)
}

.equation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font: 500 15px/1 var(--mono);
    color: var(--ink-2)
}

.equation .tok {
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    color: var(--ink)
}

.equation .tok.out {
    background: var(--primary);
    color: #fff;
    border-color: transparent
}

/* FAQ page ---------------------------------------------------------------------------- */

.faq-page {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: 48px;
    align-items: start
}

.faq-nav {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 4px
}

.faq-nav a {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--ink-2);
    text-decoration: none;
    font-size: 15px;
    transition: background-color .15s ease, color .15s ease
}

.faq-nav a:hover,
.faq-nav a.is-active {
    background: var(--primary-soft);
    color: var(--on-primary-soft)
}

.faq-group {
    display: grid;
    gap: 12px;
    scroll-margin-top: 96px
}

.faq-group + .faq-group {
    margin-top: 48px
}

.faq-group h2 {
    font-size: 24px;
    margin-bottom: 4px
}

.faq-page details {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg);
    transition: border-color .2s ease, box-shadow .2s ease
}

.faq-page details[open] {
    border-color: rgba(32, 63, 174, .35);
    box-shadow: var(--shadow-md)
}

.faq-page summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-weight: 500;
    font-size: 17px
}

.faq-page summary::-webkit-details-marker {
    display: none
}

.faq-page summary .pm {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--bg-soft);
    display: grid;
    place-items: center;
    flex: none;
    transition: transform .25s ease, background-color .25s ease
}

.faq-page details[open] summary .pm {
    transform: rotate(45deg);
    background: var(--primary-soft);
    color: var(--primary)
}

.faq-page .answer {
    padding: 0 20px 20px;
    color: var(--ink-2);
    font-size: 16px
}

@media (max-width: 1023px) {

    .path,
    .quote-band {
        grid-template-columns: minmax(0, 1fr)
    }

    .faq-page {
        grid-template-columns: minmax(0, 1fr)
    }

    .faq-nav {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 6px
    }

    .faq-nav a {
        border: 1px solid var(--line)
    }
}

@media (prefers-reduced-motion: no-preference) {
    html.js .equation .tok {
        opacity: 0;
        transform: translateY(14px) scale(.9);
        transition: opacity .5s ease, transform .5s cubic-bezier(.3, 1.5, .5, 1)
    }

    html.js .equation.is-in .tok {
        opacity: 1;
        transform: none
    }

    html.js .equation.is-in .tok:nth-child(3) {
        transition-delay: .15s
    }

    html.js .equation.is-in .tok:nth-child(5) {
        transition-delay: .45s
    }

    .equation.is-in .tok.out {
        animation: halo-box 2.6s ease-in-out 1s infinite
    }
}

@keyframes halo-box {

    0%,
    100% {
        box-shadow: 0 8px 24px -8px rgba(32, 63, 174, .5)
    }

    50% {
        box-shadow: 0 8px 34px -4px rgba(41, 112, 255, .6)
    }
}

/* Engine pages (LGSTG-1652) and the security page (LGSTG-1650) ------------------------- */

.engine-hero .container {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 48px;
    align-items: center;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto
}

.engine-hero .copy {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.engine-hero .engine-logo {
    --s: 56px
}

.spec {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px
}

.spec-wrap {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg);
    overflow-x: auto
}

.spec th,
.spec td {
    text-align: left;
    vertical-align: top;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line)
}

.spec tr:last-child th,
.spec tr:last-child td {
    border-bottom: 0
}

.spec th {
    width: 30%;
    font: 500 13px/1.5 var(--mono);
    color: var(--ink-2);
    background: var(--bg-soft);
    white-space: nowrap
}

.spec td {
    color: var(--ink)
}

.spec code,
.grant {
    font: 500 13px/1.5 var(--mono);
    background: var(--primary-soft);
    color: var(--on-primary-soft);
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap
}

.no-mark {
    color: var(--danger);
    font-weight: 600
}

.callout {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding: 18px 20px;
    border-radius: var(--r-md);
    border: 1px solid #fde4c4;
    background: var(--warning-soft);
    color: var(--ink);
    font-size: 15px
}

.callout svg {
    color: var(--warning);
    margin-top: 2px
}

.callout.info {
    border-color: var(--primary-line);
    background: var(--primary-soft)
}

.callout.info svg {
    color: var(--primary)
}

.other-engines {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.other-engines li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    font-weight: 500
}

.other-engines .engine-logo {
    --s: 30px
}

/* Long pages with a section menu (security) */
.doc-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: 56px;
    align-items: start
}

.doc-body {
    display: grid;
    gap: 72px;
    min-width: 0
}

.doc-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    scroll-margin-top: 96px
}

.doc-section h2 {
    font-size: clamp(26px, 3vw, 32px);
    line-height: 1.2
}

.doc-section > p {
    color: var(--ink-2);
    max-width: 70ch
}

.two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px
}

.mini-card {
    padding: 22px;
    display: grid;
    gap: 8px;
    align-content: start
}

.mini-card h3 {
    font-size: 17px
}

.mini-card p {
    color: var(--ink-2);
    font-size: 15px
}

@media (max-width: 1023px) {

    .engine-hero .container,
    .doc-layout {
        grid-template-columns: minmax(0, 1fr)
    }

    
    .doc-layout .faq-nav {
        position: static
    }
}

@media (max-width: 767px) {

    .two-col {
        grid-template-columns: minmax(0, 1fr)
    }

    .spec th {
        width: auto;
        white-space: normal
    }
}

.codeblock {
    margin: 0;
    padding: 16px 18px;
    border-radius: var(--r-md);
    background: #0f1320;
    color: #e5e7eb;
    font: 400 13.5px/1.6 var(--mono);
    overflow-x: auto;
    white-space: pre
}

.codeblock .c {
    color: #8b93a1
}

.reviewed {
    font: 500 13px/1.5 var(--mono);
    color: var(--ink-3)
}

/* A card may set its own icon colour with --ico and --ico-bg */
.mini-card .ico {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--ico-bg, var(--primary-soft));
    color: var(--ico, var(--primary))
}

/* Insights safeguards: two columns of three under the section head */
.two-col.guards {
    gap: 20px 24px
}

/* One claim per line, set larger than a checklist (Insights in short) */
.does ul.stack {
    gap: 16px
}

.does ul.stack li {
    grid-template-columns: 24px 1fr;
    font-size: 18px;
    line-height: 1.5
}

.does ul.stack li svg {
    margin-top: 4px
}

.doc-section .secure-scene {
    margin: 0
}

/* Long-form text pages (cookie policy, articles) */
.prose {
    max-width: 780px;
    display: grid;
    gap: 18px;
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1.65
}

.prose > h2 {
    margin-top: 28px;
    color: var(--ink);
    font-size: clamp(22px, 2.4vw, 26px);
    line-height: 1.25;
    letter-spacing: -.01em
}

.prose > h3 {
    margin-top: 12px;
    color: var(--ink);
    font-size: 19px
}

.prose ul,
.prose ol {
    margin: 0;
    padding-left: 22px;
    display: grid;
    gap: 8px
}

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

.prose code {
    font: 500 .88em/1.5 var(--mono);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    padding: 1px 6px;
    border-radius: 5px
}

.prose .spec code {
    border: 0;
    background: var(--primary-soft)
}

.spec thead th {
    width: auto;
    background: var(--bg);
    color: var(--ink-3);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em
}

.spec td code {
    white-space: nowrap
}

.link-btn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center
}

/* Insights page (scan illustration, detectors, guards) */
.scan-scene {
    width: 100%;
    aspect-ratio: 520 / 380
}

.scan-scene svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible
}

.scan-scene text {
    font-family: var(--font)
}

.scan-scene .mono {
    font-family: var(--mono)
}

.scan-scene .tag {
    filter: drop-shadow(0 6px 10px rgba(159, 18, 57, .12))
}

@media (prefers-reduced-motion: no-preference) {
    .scan-scene .scanline {
        animation: scan 6s linear infinite
    }

    .scan-scene .t1,
    .scan-scene .hit1 {
        animation: hit1 6s ease infinite
    }

    .scan-scene .t2,
    .scan-scene .hit2 {
        animation: hit2 6s ease infinite
    }

    .scan-scene .t3,
    .scan-scene .hit3 {
        animation: hit3 6s ease infinite
    }
}

@keyframes scan {
    from { transform: translateX(0) }
    to { transform: translateX(440px) }
}

@keyframes hit1 {
    0%, 78% { opacity: 0 }
    82%, 96% { opacity: 1 }
    100% { opacity: 0 }
}

@keyframes hit2 {
    0%, 51% { opacity: 0 }
    55%, 96% { opacity: 1 }
    100% { opacity: 0 }
}

@keyframes hit3 {
    0%, 85% { opacity: 0 }
    89%, 97% { opacity: 1 }
    100% { opacity: 0 }
}

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

.detector {
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.detector h3 {
    font-size: 20px
}

.detector > p {
    color: var(--ink-2);
    font-size: 15px
}

.detector .ico {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary)
}

.rules {
    margin: 4px 0 8px;
    padding: 14px 0 0;
    border-top: 1px dashed var(--line);
    list-style: none;
    display: grid;
    gap: 10px;
    font-size: 14px;
    color: var(--ink-2)
}

.rules li {
    padding-left: 18px;
    position: relative
}

.rules li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary)
}

.guard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px
}

.guard-list li {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg);
    border-left: 3px solid var(--primary)
}

.guard-list b {
    font-weight: 600
}

.guard-list span {
    color: var(--ink-2);
    font-size: 15px
}

@media (max-width: 1023px) {
    .detectors {
        grid-template-columns: minmax(0, 1fr)
    }
}

.lifecycle {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    gap: 14px
}

.lifecycle li {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    color: var(--ink-2);
    font-size: 15px
}

.lifecycle .st {
    justify-self: start;
    padding: 5px 10px;
    border-radius: 999px;
    font: 500 12px/1.2 var(--mono)
}

.st.active { background: var(--danger-soft); color: #9f1239 }
.st.gone { background: var(--success-soft); color: var(--on-success-soft) }
.st.dismissed { background: var(--bg); color: var(--ink-2); border: 1px solid var(--line) }

.finding-mock {
    margin: 0;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    overflow: hidden
}

.fm-head {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line)
}

.fm-dot {
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: #f97316;
    box-shadow: 0 0 0 4px #ffedd5
}

.fm-title b {
    display: block;
    font-weight: 600;
    font-size: 15px
}

.fm-title code {
    font: 500 13px var(--mono);
    color: var(--on-primary-soft)
}

.fm-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    color: var(--ink-3);
    font-size: 13px
}

.fm-meta .engine-logo {
    --s: 20px
}

.fm-chip {
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff1e6;
    color: #9a3412;
    font: 600 13px/1.2 var(--mono)
}

.fm-body {
    padding: 4px 20px 18px;
    display: grid;
    gap: 8px
}

.fm-body h3.mk {
    margin-top: 12px;
    font: 500 11px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3)
}

.fm-kv {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px
}

.fm-kv div {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-soft)
}

.fm-kv dt {
    font-size: 12px;
    color: var(--ink-3)
}

.fm-kv dd {
    margin: 4px 0 0;
    font: 600 14px/1.3 var(--mono);
    color: var(--ink)
}

.fm-why {
    font-size: 14px;
    color: var(--ink-2)
}

.fm-signal {
    display: inline-block;
    margin-right: 8px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--primary-soft);
    color: var(--on-primary-soft);
    font: 500 12px/1.4 var(--mono)
}

.fm-fix {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    color: var(--ink-2);
    display: grid;
    gap: 4px
}

.fm-foot {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: var(--ink-3)
}

.fm-actions {
    display: flex;
    gap: 8px
}

.fm-btn {
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 500
}

.fm-btn.ghost {
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--line)
}

.finding-mock figcaption {
    padding: 10px 20px;
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--ink-3)
}

@media (max-width: 767px) {
    .lifecycle li {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px
    }

    .fm-kv {
        grid-template-columns: minmax(0, 1fr)
    }
}

/* Reports page */
.mail-scene {
    width: 100%;
    aspect-ratio: 520 / 380
}

.mail-scene svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible
}

.mail-scene text {
    font-family: var(--font)
}

@media (prefers-reduced-motion: no-preference) {
    .mail-scene .pg {
        animation: pg-build 6s ease infinite
    }

    .mail-scene .pg2 {
        animation-delay: .5s
    }

    .mail-scene .pg3 {
        animation-delay: 1s
    }
}

@keyframes pg-build {
    0%, 4% { opacity: 0; transform: translateY(6px) }
    12%, 90% { opacity: 1; transform: none }
    100% { opacity: 0 }
}

.report-kinds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px
}

.rkind {
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.rkind h3 {
    font-size: 19px;
    line-height: 1.3
}

.rk-tag {
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 999px;
    font: 500 12px/1.2 var(--mono)
}

.rk-tag.sec { background: var(--danger-soft); color: #9f1239 }
.rk-tag.score { background: var(--primary-soft); color: var(--on-primary-soft) }
.rk-tag.inv { background: #e8edf7; color: var(--navy) }

.rk-scope {
    margin: 0;
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--bg-soft);
    font-size: 14px
}

.rk-scope dt {
    font: 500 11px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3)
}

.rk-scope dd {
    margin: 4px 0 0;
    color: var(--ink)
}

.rk-sections {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px;
    font-size: 14.5px;
    color: var(--ink-2)
}

/* Under the report cards: more reports are coming, with no date or count */
.more-soon {
    margin-top: 24px;
    text-align: right;
    font-size: 17px;
    font-weight: 500;
    color: var(--ink-2)
}

@media (max-width: 1023px) {
    .report-kinds {
        grid-template-columns: minmax(0, 1fr)
    }
}

/* Explorers page */
.jump {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px
}

.jump a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    transition: border-color .2s ease, transform .2s ease
}

.jump a:hover {
    border-color: var(--primary);
    transform: translateY(-2px)
}

.jump .mono-badge,
.ex-step .mono-badge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 10px
}

/* Explorer headings carry the badge, number and colour of their jump link */
.ex-step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ex, var(--ink-3))
}

.ex-num {
    font-weight: 600
}

.ex-num::after {
    content: "·";
    margin-left: 10px
}

/* While the explorer bar is up, the headings of the explorers not being read fade back */
.has-ex-bar .section-head {
    transition: opacity .3s ease
}

.has-ex-bar .section-head.is-faded {
    opacity: .45
}

/* Explorer bar (site.js builds it): under the header once the jump links scroll away, it names the
   explorer being read, with a dot per explorer and a line that fills across all of them */
.ex-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--header-h) + 1px);
    z-index: 40;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s
}

.ex-bar.is-shown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s ease, transform .25s ease
}

.ex-bar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 60px
}

.ex-bar-titles {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%
}

.ex-bar-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease
}

.ex-bar-title.is-current {
    opacity: 1;
    transform: none
}

.ex-bar-title .mono-badge {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 11px
}

.ex-bar-num {
    font: 600 13px/1 var(--mono);
    color: var(--ex)
}

.ex-bar-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 17px;
    color: var(--ink-2)
}

.ex-bar-text b {
    color: var(--ink);
    font-weight: 700
}

.ex-bar-dots {
    display: flex;
    flex: none
}

.ex-bar-dots a {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px
}

.ex-bar-dots a::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--line);
    transition: transform .25s ease
}

.ex-bar-dots a.is-past::before {
    background: var(--ink-3)
}

.ex-bar-dots a.is-current::before {
    background: var(--ex);
    transform: scale(1.3)
}

.ex-bar-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: var(--ex, var(--primary));
    transform-origin: left;
    transform: scaleX(var(--p, 0))
}

@media (max-width: 767px) {
    .ex-bar-inner {
        height: 52px
    }

    .ex-bar-text {
        font-size: 15px
    }

    /* The dots already say where the reader is; the name gets the room */
    .ex-bar-sub,
    .ex-bar-num {
        display: none
    }
}

@media print {
    .ex-bar {
        display: none
    }
}

.xrow {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 56px;
    align-items: center
}

.xrow.flip .xcopy {
    order: 2
}

.xcopy {
    display: grid;
    gap: 16px
}

.xcopy > p {
    color: var(--ink-2);
    font-size: 17px
}

.xfacts {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    font-size: 15px;
    color: var(--ink-2)
}

.xfacts li {
    padding-left: 22px;
    position: relative
}

.xfacts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg)
}

.xvis {
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    padding: 24px
}

@media (prefers-reduced-motion: no-preference) {
    .chain-vis .cv-row.root .cv-tag {
        animation: root-pulse 2.4s ease-in-out infinite
    }

    .q-vis .qv-n.up i {
        animation: bob 2.6s ease-in-out infinite;
        display: inline-block
    }

    .s-vis .sv-row {
        animation: sv-in 8s ease infinite
    }

    .s-vis .sv-row:nth-child(2) { animation-delay: .4s }
    .s-vis .sv-row:nth-child(3) { animation-delay: .8s }
    .s-vis .sv-row:nth-child(4) { animation-delay: 1.2s }
    .s-vis .sv-row:nth-child(5) { animation-delay: 1.6s }
}

@keyframes root-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 28, 50, .35) }
    50% { box-shadow: 0 0 0 6px rgba(201, 28, 50, 0) }
}

@keyframes sv-in {
    0% { opacity: 0; transform: translateX(-8px) }
    6%, 92% { opacity: 1; transform: none }
    100% { opacity: 0 }
}

.chain-vis {
    display: grid;
    gap: 8px;
    font-size: 13px
}

.cv-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-weight: 600
}

.cv-pill {
    font: 500 12px var(--mono);
    color: var(--ink-3)
}

.cv-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg)
}

.cv-row.root { border-color: #fecdd3; background: #fff7f8 }
.cv-row.d1 { margin-left: 22px }
.cv-row.d2 { margin-left: 22px }
.cv-row.d3 { margin-left: 44px }

.cv-tag {
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--danger);
    color: #fff;
    font: 500 11px/1.3 var(--mono);
    white-space: nowrap
}

.cv-tag.b { background: #fff4e0; color: #8a4b00 }
.cv-tag.bb { background: #ffedd5; color: #9a3412 }

.cv-row code {
    font: 500 12px var(--mono);
    color: var(--ink-2)
}

.cv-q {
    font: 400 12px var(--mono);
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.cv-t {
    font: 500 12px var(--mono);
    color: var(--ink)
}

.q-vis {
    display: grid;
    gap: 2px;
    font-size: 13px
}

.qv-head,
.qv-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 56px;
    gap: 12px;
    align-items: center;
    padding: 10px 6px
}

.qv-head {
    font: 500 11px var(--mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line)
}

.qv-row {
    border-bottom: 1px solid var(--line)
}

.qv-row code {
    font: 400 12px var(--mono);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.qv-n {
    font: 600 13px var(--mono)
}

.qv-n i {
    font-style: normal;
    font-weight: 500;
    font-size: 11.5px;
    margin-left: 4px
}

.qv-n.up i { color: var(--danger) }
.qv-n.down i { color: var(--success) }
.qv-n i.flat { color: var(--ink-3) }

.qv-c {
    font: 500 13px var(--mono);
    color: var(--ink-2);
    text-align: right
}

.qv-foot {
    margin-top: 8px;
    font: 500 11.5px var(--mono);
    color: var(--ink-3);
    text-align: right
}

.s-vis {
    display: grid;
    gap: 8px;
    font-size: 13.5px
}

.sv-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px
}

.sv-row b {
    font: 500 11px var(--mono);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-right: 6px
}

.sv-b {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font: 600 14px var(--mono)
}

.sv-b.add { background: var(--success-soft); color: var(--on-success-soft) }
.sv-b.mod { background: var(--warning-soft); color: var(--on-warning-soft) }
.sv-b.del { background: var(--danger-soft); color: #9f1239 }
.sv-b.grant { background: var(--primary-soft); color: var(--on-primary-soft); font-size: 12px }

.sv-t {
    font: 500 12px var(--mono);
    color: var(--ink-3)
}

.matrix th,
.matrix td {
    white-space: nowrap
}

.matrix td.y { color: var(--on-success-soft) }
.matrix td.n { color: var(--ink-3) }

.does ul.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px
}

@media (max-width: 1023px) {
    .xrow {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px
    }

    .xrow.flip .xcopy {
        order: 0
    }
}

@media (max-width: 767px) {
    .cv-row {
        grid-template-columns: auto minmax(0, 1fr) auto
    }

    .cv-row code {
        display: none
    }

    .cv-row.d1, .cv-row.d2 { margin-left: 12px }
    .cv-row.d3 { margin-left: 24px }

    .qv-head,
    .qv-row {
        grid-template-columns: minmax(0, 1fr) 96px
    }

    .qv-c,
    .qv-head span:last-child {
        display: none
    }

    .does ul.two {
        grid-template-columns: minmax(0, 1fr)
    }
}

/* Alerts page */
.life-scene {
    display: grid;
    gap: 18px;
    justify-items: center
}

.lc-card {
    width: min(100%, 420px);
    padding: 22px;
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: 12px
}

.lc-top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.lc-sev {
    padding: 4px 9px;
    border-radius: 6px;
    background: #ffedd5;
    color: #9a3412;
    font: 600 12px/1.2 var(--mono)
}

.lc-status {
    position: relative;
    display: inline-grid;
    justify-items: end
}

.lc-status .s {
    grid-area: 1 / 1;
    padding: 4px 10px;
    border-radius: 999px;
    font: 500 12px/1.2 var(--mono);
    white-space: nowrap;
    opacity: 0
}

.lc-status .s1 { background: var(--danger-soft); color: #9f1239 }
.lc-status .s2 { background: var(--warning-soft); color: var(--on-warning-soft) }
.lc-status .s3 { background: var(--primary-soft); color: var(--on-primary-soft) }
.lc-status .s4 { background: #e8edf7; color: var(--navy) }
.lc-status .s5 { background: var(--success-soft); color: var(--on-success-soft); opacity: 1 }

.lc-title {
    font-size: 19px;
    font-weight: 600
}

.lc-db {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-3);
    font-size: 13px
}

.lc-db .engine-logo {
    --s: 22px
}

.lc-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.lc-sections span {
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    font-size: 12px;
    color: var(--ink-2)
}

.lc-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px
}

.lc-steps li {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg);
    font-size: 12.5px;
    color: var(--ink-3)
}

@media (prefers-reduced-motion: no-preference) {
    .lc-status .s {
        animation: lc-chip 12.5s infinite
    }

    .lc-steps li {
        animation: lc-pill 12.5s infinite
    }

    .lc-status .s5 { opacity: 0 }
    .lc-status .s2, .lc-steps .k2 { animation-delay: 2.5s }
    .lc-status .s3, .lc-steps .k3 { animation-delay: 5s }
    .lc-status .s4, .lc-steps .k4 { animation-delay: 7.5s }
    .lc-status .s5, .lc-steps .k5 { animation-delay: 10s }
}

@keyframes lc-chip {
    0% { opacity: 0 }
    3%, 19% { opacity: 1 }
    21%, 100% { opacity: 0 }
}

@keyframes lc-pill {
    0% { opacity: .5 }
    3%, 19% { opacity: 1; color: var(--ink); border-color: var(--primary) }
    21%, 100% { opacity: .5 }
}

.muted-note {
    margin-top: 22px;
    font-size: 14px;
    color: var(--ink-3)
}

.alert-mock {
    padding: 24px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--bg);
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: 8px;
    font-size: 14.5px;
    color: var(--ink-2)
}

.alert-mock header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line)
}

.alert-mock header b {
    font-size: 17px;
    color: var(--ink)
}

.am-db {
    margin-left: auto;
    font: 500 12px var(--mono);
    color: var(--ink-3)
}

.alert-mock h3.mk {
    margin-top: 10px;
    font: 500 11px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3)
}

.alert-mock ul,
.alert-mock ol {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 4px
}

.alert-mock code {
    font: 500 12.5px var(--mono);
    color: var(--on-primary-soft)
}

.am-ctx {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-soft)
}

.two-col.four {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

@media (max-width: 1023px) {
    .two-col.four {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 767px) {
    .two-col.four {
        grid-template-columns: minmax(0, 1fr)
    }
}

/* "More on X" sits under its section, on the right */
.more-link {
    margin-top: 24px;
    text-align: right;
    font-size: 17px
}

.more-link .text-link {
    font-weight: 600
}

/* Blog */
.prose-wrap {
    max-width: calc(780px + 2 * var(--gutter));
    margin-inline: auto
}

.article-hero .container {
    display: grid;
    gap: 16px;
    justify-items: start
}

.article-hero .page-title {
    font-size: clamp(34px, 4.6vw, 52px)
}

.back {
    color: var(--ink-3);
    text-decoration: none;
    font-size: 14px
}

.back:hover {
    color: var(--primary)
}

.post-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c) 10%, #fff);
    color: color-mix(in srgb, var(--c) 80%, #000);
    font: 500 12px/1.2 var(--mono)
}

.byline {
    font: 500 13px/1.5 var(--mono);
    color: var(--ink-3)
}

.prose .codeblock {
    font-size: 13px
}

.prose .spec-wrap {
    margin: 4px 0
}

.tryit {
    margin-top: 48px;
    padding: 28px;
    border-radius: var(--r-lg);
    border: 1px solid var(--primary-line);
    background: linear-gradient(135deg, #f5f7ff, #faf5ff);
    display: grid;
    gap: 10px;
    justify-items: start
}

.tryit b {
    font-size: 19px
}

.tryit p {
    color: var(--ink-2)
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px
}

.post-card {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start
}

.post-card h2 {
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -.01em
}

.post-card:hover .stretched {
    color: var(--primary)
}

.post-card p {
    color: var(--ink-2);
    font-size: 15px
}

.post-meta {
    margin-top: auto;
    font: 500 12.5px var(--mono);
    color: var(--ink-3)
}

@media (max-width: 767px) {
    .post-grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

.article-hero .container.prose-wrap {
    max-width: calc(780px + 2 * var(--gutter));
    margin-inline: auto
}

/* Print: pages print as documents (security page "Save as PDF") */
.print-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

@media print {
    @page {
        size: A4;
        margin: 16mm 14mm
    }

    html,
    body {
        background: #fff !important
    }

    .site-header,
    .site-footer,
    .cookie-consent,
    .hero-bg,
    .blob,
    .cta-row,
    .faq-nav,
    .closing,
    .print-btn,
    .secure-scene,
    .tryit {
        display: none !important
    }

    [data-reveal],
    [data-reveal].is-in,
    [data-inview] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important
    }

    .section,
    .page-hero {
        padding-block: 12px !important
    }

    .doc-layout {
        display: block
    }

    .doc-body {
        gap: 28px
    }

    .two-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px
    }

    .spot,
    .spec-wrap,
    .callout,
    .doc-section h2 {
        break-inside: avoid
    }

    .shimmer {
        -webkit-text-fill-color: currentColor !important;
        color: var(--primary) !important;
        background: none !important
    }

    .h2 .quiet {
        color: var(--primary)
    }

    a.text-link[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: .85em;
        color: var(--ink-3)
    }

    .print-only {
        display: block !important
    }

    .lc-status .s5 {
        opacity: 1 !important
    }

    h1,
    h2,
    h3 {
        break-after: avoid
    }
}

.print-only {
    display: none
}

@media (prefers-reduced-motion: reduce) {
    .nav-panel,
    .nav-trigger svg {
        transition: none
    }
}

html:not(.js) .print-btn {
    display: none
}

/* Badges inside links draw their letters with CSS, so link text reads "Oracle", not "OROracle" */
.mono-badge[data-b]::before {
    content: attr(data-b)
}

.further {
    margin-top: 24px;
    font-size: 15px;
    color: var(--ink-2)
}

.related {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.related h2 {
    font-size: 18px;
    margin-bottom: 10px
}

.related ul {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px
}

.nf-links {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-size: 17px
}

.sources {
    margin-top: 40px
}

.sources h2 {
    font-size: 18px;
    margin-bottom: 10px
}

.sources ul {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
    color: var(--ink-3);
    font-size: 15px
}

.sources + .related {
    margin-top: 32px
}