@charset "utf-8";
/*
    The look of the WebSVJ product pages, matched to the main application's "Aura" design
    (main/webapp app.css): the same tokens, type, top bar, cards, buttons and footer, in the teal of the
    product. The Slovak sibling (infoweb/obyvatelia) carries an identical copy of this file - change both.

    The custom properties keep the names app.css uses. The secondary colour is the primary itself
    (AuraPalette.derive("035d5a")), so the header bands of the cards are light teal.

    The Inter font faces are declared in header.jspf, next to their preloads.
*/

/* ======================================================
    TOKENS
====================================================== */
:root {
    --page-width: 1440px;

    --brand: #035d5a;
    --on-brand: #ffffff;
    /* Plain stand-ins for a browser without color-mix(), refined in the @supports blocks below. */
    --brand-hover: #024b49;
    --brand-soft: #e7eeed;
    --brand-soft-2: #c6d6d5;
    --brand-deep: #035d5a;
    --brand-band: #c6d6d5;
    --brand-band-line: #a1bcb9;
    --link: #034a48;
    --on-brand-hover: rgba(255, 255, 255, 0.14);
    --on-brand-active: rgba(255, 255, 255, 0.22);

    /* The secondary colour and its shades: AuraPalette.derive("035d5a"). */
    --accent: #035d5a;
    --accent-soft: #e7eeed;
    --accent-soft-2: #c6d6d5;
    --accent-line: #a1bcb9;
    --accent-hover: rgba(3, 93, 90, 0.06);

    --bg: #ebeff0;
    --surface: #ffffff;
    --surface-2: #f6f7f9;
    --border: #e3e6ea;
    --border-strong: #cdd2d8;
    --text: #1d2127;
    --muted: #5f6670;

    --focus-ring: 0 0 0 3px rgba(3, 93, 90, 0.32);

    --radius-sm: 6px;
    --radius: 6px;
    --radius-lg: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 6px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 16px 40px -12px rgba(16, 24, 40, 0.25), 0 4px 10px -4px rgba(16, 24, 40, 0.10);

    --info-bg: #eaf2fd;
    --info-fg: #1c4b8a;
    --info-line: #4a86d6;
    --success-bg: #e8f5ec;
    --success-fg: #1d6536;
    --success-line: #3a9d5d;
    --warning-bg: #fdf4e1;
    --warning-fg: #74490a;
    --warning-line: #e0a526;
    --danger-bg: #fdeded;
    --danger-fg: #971c1c;
    --danger-line: #d64545;

    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
@supports (color: color-mix(in srgb, red, blue)) {
    :root {
        --brand-hover: color-mix(in oklab, var(--brand) 84%, black);
        --brand-soft: color-mix(in oklab, var(--brand) 8%, white);
        --brand-soft-2: color-mix(in oklab, var(--brand) 25%, white);
        --link: color-mix(in oklab, var(--brand) 72%, #1d2127);
        --brand-band: color-mix(in oklab, var(--brand-deep) 24%, white);
        --brand-band-line: color-mix(in oklab, var(--brand-deep) 40%, white);
        --on-brand-hover: color-mix(in srgb, var(--on-brand) 14%, transparent);
        --on-brand-active: color-mix(in srgb, var(--on-brand) 22%, transparent);
        --accent-hover: color-mix(in srgb, var(--accent) 6%, transparent);
        --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
    }
}
@supports (color: oklch(from red l c h)) {
    :root {
        --brand-deep: oklch(from var(--brand) min(l, 0.45) c h);
    }
}

/* ======================================================
    BASE
====================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    background-color: var(--bg);
    -webkit-text-size-adjust: 100%;
    /* Anchors land below the sticky top bar. */
    scroll-padding-top: 92px;
}
body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea {
    font-family: inherit;
}
a {
    color: var(--link);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}
::selection {
    background-color: var(--brand-soft-2);
}
:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand) 60%, transparent);
    outline-offset: 2px;
}
h1, h2, h3, h4 {
    line-height: 1.3;
    letter-spacing: -0.01em;
}
img {
    max-width: 100%;
}
hr {
    border: 0;
    border-top: 1px solid var(--border);
}
/* The Lucide sprite icons (svj:icon, svj:item): geometry comes from the sprite, everything else from here. */
.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.processing, body.processing * {
    cursor: progress !important;
}

/* ======================================================
    PAGE LAYOUT
    #top-container stays full width; its side padding (--gutter) centres the page at --page-width.
====================================================== */
/* A column at least as tall as the window, so that the footer of a short page sits at its bottom. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#top-container {
    --gutter: max(24px, calc(50vw - var(--page-width) / 2));
    flex: 1 0 auto;
    padding: 0 var(--gutter);
}

/* ======================================================
    TOP BAR (menu.jspf) - the main application's #hp-topbar
    A rounded panel stuck to the top of the window while scrolling; it loses its top corners once it hangs
    from the edge (body.bar-stuck, app.js).
====================================================== */
#topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    margin: 12px 0 0 0;
    padding: 0 8px 0 14px;
    border-radius: 14px;
    background-color: var(--brand);
    color: var(--on-brand);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 18px rgba(16, 24, 40, 0.12);
    transition: border-radius 0.15s ease;
}
body.bar-stuck #topbar {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.topbar-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 64px;
}
/* The site's icon and title lead home, and show it on hover the way the menu entries do. Pulled into the bar's
   padding by as much as its own, so that the icon keeps its place. */
.topbar-brand, .topbar-brand:link, .topbar-brand:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    margin: 0 4px 0 -8px;
    padding: 0 10px 0 8px;
    border-radius: 9px;
    color: var(--on-brand);
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.topbar-brand:hover {
    background-color: var(--on-brand-hover);
    text-decoration: none;
}
.topbar-brand img {
    width: 36px;
    height: 36px;
}
.topbar-brand-title {
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
/* Each entry is its icon above its label, as in the main application's bar. */
.topnav {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
}
.topnav ul {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.topnav a, .topnav a:link, .topnav a:visited {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 52px;
    padding: 0 10px;
    border-radius: 9px;
    color: var(--on-brand);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
}
.topnav a:hover {
    background-color: var(--on-brand-hover);
    text-decoration: none;
}
.topnav .icon {
    width: 20px;
    height: 20px;
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    margin-left: auto;
}
/* The one call to action on the bar, the main application's "Přihlásit" pill. */
.topbar-cta, .topbar-cta:link, .topbar-cta:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    background-color: var(--on-brand);
    color: var(--brand);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.topbar-cta:hover {
    box-shadow: 0 0 0 3px var(--on-brand-active);
    text-decoration: none;
}
/* Narrow windows only: opens the menu as a dropdown under the bar. */
.topbar-hamburger {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: -8px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--on-brand);
    cursor: pointer;
}
.topbar-hamburger:hover {
    background-color: var(--on-brand-hover);
}
.topbar-hamburger[aria-expanded="true"] {
    background-color: var(--on-brand-active);
}
.topbar-hamburger .icon {
    width: 24px;
    height: 24px;
}

/* ======================================================
    HERO (the landing page)
====================================================== */
.hero {
    position: relative;
    overflow: hidden;
    margin: 20px 0 0 0;
    padding: 48px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
/* The map of the former page background, now behind the hero only, fading out towards the text. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0 0 0 40%;
    background: url('img/mapa.jpg') center / cover no-repeat;
    opacity: 0.22;
    -webkit-mask-image: linear-gradient(to right, transparent, black 45%);
    mask-image: linear-gradient(to right, transparent, black 45%);
    pointer-events: none;
}
.hero > * {
    position: relative;
    z-index: 1;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 4px 12px;
    border-radius: 999px;
    background-color: var(--brand-soft);
    color: var(--brand-deep);
    font-size: 13px;
    font-weight: 600;
}
.hero h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.hero-lead {
    max-width: 640px;
    margin: 16px 0 28px 0;
    color: var(--muted);
    font-size: 17px;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 28px;
    color: var(--muted);
    font-size: 14px;
}
.hero-facts span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hero-facts .icon {
    color: var(--success-line);
}

/* ======================================================
    PAGE AND SECTION HEADINGS
====================================================== */
.page-head {
    margin: 28px 4px 16px 4px;
}
.page-head h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.page-head p {
    margin: 6px 0 0 0;
    color: var(--muted);
}
.section {
    margin-top: 44px;
}
.section-head {
    margin: 0 4px 16px 4px;
}
.card + .section-head {
    margin-top: 32px;
}
.section-head h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.section-head p {
    margin: 4px 0 0 0;
    color: var(--muted);
}

/* ======================================================
    GRIDS
====================================================== */
.grid {
    display: grid;
    gap: 20px;
}
.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ======================================================
    BUTTONS - the main application's .form-actions INPUT, primary and secondary
====================================================== */
.btn, .btn:link, .btn:visited,
.form-raised-button-block input, .features-block-actions .raised-button-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 18px;
    border: 1px solid var(--brand);
    border-radius: 9px;
    background-color: var(--brand);
    color: var(--on-brand);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover, .form-raised-button-block input:hover, .features-block-actions .raised-button:hover .raised-button-block {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--on-brand);
    text-decoration: none;
}
.btn:focus-visible, .form-raised-button-block input:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.btn-secondary, .btn-secondary:link, .btn-secondary:visited {
    background-color: var(--surface);
    border-color: var(--accent-line);
    color: var(--accent);
}
.btn-secondary:hover {
    background-color: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent);
}
.form-raised-button-block input:disabled, .form-raised-button-block input:disabled:hover {
    opacity: 0.45;
    background-color: var(--brand);
    border-color: var(--brand);
    cursor: not-allowed;
}
.form-raised-button-block.secondary input {
    background-color: var(--surface);
    border-color: var(--accent-line);
    color: var(--accent);
}
.form-raised-button-block.secondary input:hover:not(:disabled) {
    background-color: var(--accent-soft);
}
.form-raised-button-block.secondary input:disabled {
    background-color: var(--surface);
    border-color: var(--accent-line);
}
.raised-button, .raised-button:hover {
    text-decoration: none;
}

/* ======================================================
    CARDS - the main application's .news-item-block
====================================================== */
.card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: clip;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}
.card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: var(--accent-soft-2);
    border-bottom: 1px solid var(--accent-line);
}
/* The icon on a white tile, as the main application's .news-item-header-icon. */
.card-header > .icon {
    box-sizing: content-box;
    width: 26px;
    height: 26px;
    padding: 9px;
    border-radius: var(--radius);
    background-color: var(--surface);
    box-shadow: inset 0 0 0 1px var(--accent-line);
    color: var(--accent);
    stroke-width: 1.9;
}
.card-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 650;
    color: var(--accent);
}
.card-body {
    flex: 1;
    padding: 16px 18px;
    line-height: 1.6;
}
.card-body p {
    margin: 0 0 10px 0;
}
.card-body p:last-child, .card-body ul:last-child {
    margin-bottom: 0;
}
.card-body ul:not([class]) {
    margin: 0 0 10px 0;
    padding-left: 22px;
}
.card-body h3 {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 650;
}
.card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 0 18px 18px 18px;
}
.card-actions .push {
    margin-left: auto;
}

/* A list of features (svj:item): an icon and the text. */
.checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}
.checklist li {
    display: flex;
    gap: 10px;
    padding: 5px 0;
}
.checklist .icon {
    margin-top: 3px;
    color: var(--brand);
}

/* Numbered steps. */
.steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
.steps li {
    position: relative;
    padding: 4px 0 12px 44px;
    counter-increment: step;
}
.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--brand-soft-2);
    color: var(--brand-deep);
    font-size: 14px;
    font-weight: 650;
}
.steps li:first-child::before {
    background-color: var(--brand);
    color: var(--on-brand);
}
.steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 14.5px;
    top: 34px;
    bottom: 2px;
    width: 1px;
    background: var(--border-strong);
}

.partners {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100%;
}
.partners img {
    display: block;
    border-radius: var(--radius);
}

/* The price band at the bottom of a card. */
.price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 14px 18px;
    background-color: var(--brand-soft);
    border-top: 1px solid var(--border);
}
.price + .price {
    padding-top: 0;
    border-top: 0;
}
.price-amount {
    color: var(--brand-deep);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.price-amount.minor {
    font-size: 18px;
}
.price-period {
    color: var(--muted);
}
.price-note {
    flex-basis: 100%;
    color: var(--muted);
    font-size: 13px;
}
.badge, .badge:link, .badge:visited {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--success-bg);
    color: var(--success-fg);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.badge-push {
    margin-left: auto;
}

/* ======================================================
    NOTIFICATIONS - the main application's four tones
====================================================== */
.note, .note-success, .note-warning, .note-danger {
    margin: 20px 0 0 0;
    padding: 12px 16px;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--radius);
    font-size: 14px;
}
.note {
    background-color: var(--info-bg);
    border-color: color-mix(in srgb, var(--info-line) 30%, transparent);
    border-left-color: var(--info-line);
    color: var(--info-fg);
}
.note-success {
    background-color: var(--success-bg);
    border-color: color-mix(in srgb, var(--success-line) 30%, transparent);
    border-left-color: var(--success-line);
    color: var(--success-fg);
}
.note-warning {
    background-color: var(--warning-bg);
    border-color: color-mix(in srgb, var(--warning-line) 35%, transparent);
    border-left-color: var(--warning-line);
    color: var(--warning-fg);
}
.note-danger {
    background-color: var(--danger-bg);
    border-color: color-mix(in srgb, var(--danger-line) 30%, transparent);
    border-left-color: var(--danger-line);
    color: var(--danger-fg);
}
.note a, .note-success a, .note-warning a, .note-danger a {
    color: inherit;
    text-decoration: underline;
}

/* ======================================================
    BLOCKS - the main application's .sidebar-block, header bands in shades of the primary
====================================================== */
.block {
    padding: 14px 16px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.block-title {
    margin: -14px -16px 12px -16px;
    padding: 10px 16px;
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
    background: var(--brand-band);
    border-bottom: 1px solid var(--brand-band-line);
    color: var(--brand-deep);
    font-size: 16px;
    font-weight: 600;
}
.contact-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    margin: 0;
}
.contact-list dt {
    color: var(--muted);
}
.contact-list dd {
    margin: 0;
    font-weight: 500;
}
.link-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.link-list a, .link-list a:link, .link-list a:visited {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 -8px;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--text);
}
.link-list a:hover {
    background-color: var(--brand-soft);
    text-decoration: none;
}
.link-list .icon {
    color: var(--muted);
}

/* ======================================================
    FORMS (dotaz3.jsp; weblib's text-field, text-area and form-action tags)
====================================================== */
.field-row {
    display: flex;
    gap: 14px;
}
.field-row + .field-row {
    margin-top: 18px;
}
.field-row > .icon {
    box-sizing: content-box;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    padding: 9px;
    border-radius: var(--radius);
    background-color: var(--brand-soft);
    color: var(--brand);
}
.field-row > .field {
    flex: 1;
    min-width: 0;
}
.field-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}
/* The types that are not text-like sit inside :where(), which adds nothing to the specificity, so that the
   .validation-error state below still wins. */
.std-form input:where(:not([type=submit], [type=button], [type=hidden], [type=checkbox], [type=radio])),
.std-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background-color: var(--surface);
    color: var(--text);
    font-size: 15px;
    line-height: 1.35;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.std-form input:where(:not([type=submit], [type=button])):hover, .std-form textarea:hover {
    border-color: color-mix(in oklab, var(--border-strong) 70%, var(--text));
}
.std-form input:where(:not([type=submit], [type=button])):focus, .std-form textarea:focus {
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
    outline: none;
}
.std-form input.validation-error:not(:focus), .std-form textarea.validation-error:not(:focus) {
    border-color: var(--danger-line);
    background-color: var(--danger-bg);
}
::placeholder {
    color: #8a9099;
}
.input-hint {
    margin-top: 8px;
    color: var(--muted);
    font-size: 13.5px;
}
.inline-field {
    display: flex;
    gap: 10px;
}
.inline-field > :first-child {
    flex: 1;
    min-width: 0;
}
.lookup-result {
    margin-top: 12px;
}
.lookup-result .note, .lookup-result .note-success, .lookup-result .note-warning, .lookup-result .note-danger {
    margin: 0;
}

/* ======================================================
    PAGES OF THE OLDER MARKUP
    The release notes, terms and confirmation pages keep their markup (the relnotes skill writes it), styled
    here as the cards above: .features-block is a card, its header the card's band.
====================================================== */
.block-header {
    margin: 32px 4px 16px 4px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
}
.block-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.features-block, .features-block-narrow {
    flex: 1;
    min-width: 0;
    padding: 0 18px 16px 18px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    line-height: 1.6;
}
.features-block-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -18px 14px -18px;
    padding: 12px 18px;
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
    background: var(--accent-soft-2);
    border-bottom: 1px solid var(--accent-line);
    color: var(--accent);
    font-size: 1.2rem;
    font-weight: 650;
    line-height: 1.3;
}
.features-block-detail {
    margin-bottom: 10px;
}
.features-block-detail h1 {
    margin: 24px 0 8px 0;
    font-size: 19px;
    font-weight: 650;
    color: var(--accent);
}
.features-block-detail h2 {
    margin: 18px 0 6px 0;
    font-size: 16px;
    font-weight: 650;
}
.features-block-detail p {
    margin: 0 0 10px 0;
}
.features-block-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.page-subtitle {
    margin: -8px 4px 0 4px;
    color: var(--muted);
}

/* ---- release notes (relnotes.jsp, relnotes-archive.jsp, maintenance.jsp) ---- */
.header-and-legend-container {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}
.header-and-legend-container .block-header {
    flex: 1;
}
/* The legend of the three kinds of change: one muted row at the right of the title. */
.legend-container {
    margin: 0 4px 20px auto;
    color: var(--muted);
    font-size: 13.5px;
}
.legend-container > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}
.legend-container .relnote {
    margin: 0;
    padding-left: 24px;
}
.legend-container .relnote::before {
    top: 0.1em;
    width: 16px;
    height: 16px;
}
.reldate {
    margin-left: auto;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}
.relnote {
    position: relative;
    margin-bottom: 8px;
    padding-left: 28px;
}
.relnote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--relnote-icon) center / contain no-repeat;
    mask: var(--relnote-icon) center / contain no-repeat;
}
.story::before {
    --relnote-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E");
    background-color: var(--success-line);
}
.bugfix::before {
    --relnote-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
    background-color: var(--danger-line);
}
.minor::before {
    --relnote-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E");
    background-color: var(--muted);
}

/* ======================================================
    FOOTER (footer.jspf) - the main application's .footer-aura
====================================================== */
#footer {
    flex: none;
    margin: 48px 0 0 0;
    padding: 14px 0;
    background: var(--surface);
    color: var(--muted);
    border-top: 1px solid var(--border);
    font-size: 13px;
}
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 24px;
}
#footer a, #footer a:link, #footer a:visited {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#footer a:hover {
    color: var(--text);
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

/* ======================================================
    NARROW WINDOWS
====================================================== */
@media (max-width: 1100px) {
    .topbar-brand-title {
        display: none;
    }
}
@media (max-width: 960px) {
    .grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }
    .block-container {
        flex-direction: column;
    }
    .hero {
        padding: 32px 24px;
    }
    .hero::after {
        inset: 0;
        opacity: 0.10;
        -webkit-mask-image: none;
        mask-image: none;
    }
}
/* The menu folds behind the hamburger into a dropdown under the bar. */
@media (max-width: 860px) {
    #top-container {
        --gutter: 12px;
    }
    #topbar {
        margin-top: 8px;
    }
    .topbar-hamburger {
        display: grid;
    }
    /* Next to the hamburger rather than at the bar's edge. */
    .topbar-brand, .topbar-brand:link, .topbar-brand:visited {
        margin-left: 0;
    }
    .topbar-brand-title {
        display: block;
        font-size: 16px;
    }
    .topnav {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        padding: 6px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: var(--shadow-lg);
    }
    body.drawer-open .topnav {
        display: block;
    }
    .topnav ul {
        flex-direction: column;
    }
    .topnav a, .topnav a:link, .topnav a:visited {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        height: auto;
        padding: 10px 12px;
        color: var(--text);
    }
    .topnav a:hover {
        background-color: var(--brand-soft);
    }
    .topnav .icon {
        color: var(--muted);
    }
    .grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
    .page-head h1 {
        font-size: 24px;
    }
    .section-head h2, .block-header {
        font-size: 22px;
    }
    .header-and-legend-container {
        flex-direction: column;
        align-items: stretch;
    }
    .legend-container {
        margin: 0 0 4px 0;
    }
    .header-and-legend-container .block-header {
        margin-bottom: 8px;
    }
}
@media (max-width: 560px) {
    .topbar-cta span {
        display: none;
    }
    .topbar-cta, .topbar-cta:link, .topbar-cta:visited {
        padding: 0 11px;
    }
    .hero {
        padding: 24px 18px;
    }
    .field-row > .icon {
        display: none;
    }
    .inline-field {
        flex-direction: column;
    }
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .card-actions .push {
        margin-left: 0;
    }
}