/* ── Self-hosted Plus Jakarta Sans (variable weight 200-800, SIL OFL, see fonts/OFL-plus-jakarta-sans.txt) ──
   Self-hosted on purpose: loading Google Fonts from Google's servers sends visitors' IPs to Google. */
/* latin-ext */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens (the landing page is dark only) ── */
:root {
    color-scheme: dark;

    --bg: #0c1729;
    --bg-deep: #091221;
    --ink-2: #0c3d37;           /* secondary text on the accent: 5.4:1 */
    --surface: #132035;
    --border: #1f2e45;
    --border-strong: #2a3b55;
    --control-border: #61758e;  /* field outlines: 3.5:1 on the cards, 4:1 on the page (WCAG 1.4.11) */
    --accent: #19c2ad;
    --accent-hover: #3fd8c4;
    --accent-ink: #062521;
    --accent-soft-bg: #0f2433;
    --accent-soft-border: #1f4a4f;
    --accent-soft-text: #8ce9dc;
    --text: #eef3f6;
    --text-2: #dbe4ea;
    --muted: #b4c3cf;
    --muted-2: #a9b9c6;
    --faint: #8fa2b3;
    --wrap: 1208px;

    /* Names the other pages' styles (contact, legal, account, registration) use. */
    --color-primary:        var(--accent);
    --color-primary-light:  var(--accent-hover);
    --color-primary-dark:   #12a594;
    --color-surface:        var(--surface);
    --color-surface-alt:    var(--bg);
    --color-surface-card:   var(--surface);
    --color-surface-footer: var(--bg-deep);
    --color-border:         var(--border-strong);
    --color-border-subtle:  var(--border);
    --color-text:           var(--text-2);
    --color-text-heading:   var(--text);
    --color-text-muted:     var(--muted-2);
    --color-badge-text:     var(--accent-ink);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

a { color: var(--accent-hover); text-decoration: none; }
a:hover { color: var(--accent-soft-text); }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1:focus { outline: none; }
main:focus { outline: none; }

/* Hidden until it has the keyboard focus, then at the top left over the header. */
.skip-link {
    position: absolute; left: 12px; top: -100px; z-index: 100;
    padding: 10px 16px; border-radius: 8px;
    background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; border-radius: 6px; }

.wrap, .container { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ── Buttons ── */
.btn {
    display: inline-block;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 22px;
    border-radius: 11px;
    border: 1px solid transparent;
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
    text-align: center;
    transition: background-color .15s, color .15s;
}
.btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn:disabled { opacity: .6; cursor: default; }

.btn-ghost,
.btn-outline { background: transparent; color: var(--text); border-color: var(--border-strong); font-weight: 600; }
.btn-ghost:hover,
.btn-outline:hover { background: var(--surface); color: #fff; }

.btn-sm { font-size: 14px; padding: 9px 16px; border-radius: 9px; }

/* ── Type ── */
.kicker { font-size: 13px; font-weight: 800; letter-spacing: 1.6px; color: var(--accent); text-transform: uppercase; }
.h2 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -.033em;
    font-weight: 800;
    color: #fff;
    margin-top: 14px;
    max-width: 820px;
    text-wrap: balance;
}
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; gap: 12px; font-size: 16px; line-height: 1.45; color: var(--text-2); }
/* The tick is a mask, so it takes the colour of its background and can change on the accent. */
.check-list li::before {
    content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; background: var(--accent);
    -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat;
}
:root { --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); }

/* ── Nav ── */
.nav {
    position: sticky; top: 0; z-index: 10;
    background: rgba(12, 23, 41, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #1a2940;
}
.nav .wrap { height: 72px; display: flex; align-items: center; gap: 32px; }
.logo { display: flex; align-items: center; gap: 9px; color: #fff; }
.logo:hover { color: #fff; }
.logo img { width: 19px; height: 24px; }
.logo span { font-size: 21px; font-weight: 800; letter-spacing: -.5px; }
.nav-links { margin-left: auto; display: flex; gap: 30px; font-size: 15px; font-weight: 600; }
.nav-links a { color: #c3d0db; }
.nav-links a:hover { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-signin { font-size: 15px; font-weight: 700; color: var(--text); padding: 9px 14px; border-radius: 9px; }
.nav-signin:hover { color: #fff; background: var(--surface); }
.nav-cta { white-space: nowrap; }

/* Menu: hidden until the nav links no longer fit. The panel spans the header's width,
   so it is placed against the sticky header, not the button. */
.nav-menu { display: none; }
.nav-menu summary {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    font-size: 22px; color: var(--text); cursor: pointer; list-style: none; user-select: none;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover,
.nav-menu[open] summary { background: var(--surface); }
.nav-menu .ph-x,
.nav-menu[open] .ph-list { display: none; }
.nav-menu[open] .ph-x { display: block; }
.nav-menu-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    display: flex; flex-direction: column;
    padding: 8px 24px 20px;
    background: var(--bg-deep); border-bottom: 1px solid var(--border-strong);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
}
.nav-menu-panel > a {
    padding: 14px 0; font-size: 16px; font-weight: 600; color: var(--text-2);
    border-bottom: 1px solid var(--border);
}
.nav-menu-panel > a:hover { color: #fff; }
.nav-menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.nav-menu-actions i { vertical-align: -2px; }

/* ══ Home page ══
   Sections sit on the page colour; two places are on the accent (the phone showcase and the closing
   box) and security sits on the darker band. Text on the accent is dark: accent ink 7.2:1, the
   secondary ink 5.4:1; white would be 2.2:1 and fails. */

/* The DeskFlow pin as a large, faint shape on the accent. Decoration only. */
.pin { position: absolute; pointer-events: none; height: auto; }
.pin path { fill: #fff; fill-opacity: .16; }
.pin circle { fill: var(--accent); }
.pin-b, .pin-e { opacity: .75; }

/* ── Hero ── */
.hero { padding-top: 96px; overflow-x: clip; }
.hero-copy { max-width: none; }
.pill {
    display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700;
    color: var(--accent-soft-text); background: var(--accent-soft-bg);
    border: 1px solid var(--accent-soft-border); border-radius: 30px; padding: 6px 14px;
}
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.hero h1 {
    font-size: clamp(40px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.04em;
    font-weight: 800; color: #fff; margin-top: 24px;
}
.hero h1 span { display: block; color: var(--accent); }
.hero-sub { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--muted); margin-top: 28px; max-width: 640px; text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-left: 16px; font-size: 15px; font-weight: 600; color: var(--accent-soft-text); }
.hero-note i { color: var(--accent); font-size: 17px; }

/* The screenshots: the desktop on the right, the phone over its left edge, both on a stripe of
   the accent that runs across the full width. Positions are shares of the content width, so the
   picture scales as one. */
.hero-shots { position: relative; margin-top: 72px; aspect-ratio: 1208 / 704; }
.hero-stripe { position: absolute; top: 28.4%; height: 59.7%; left: -100vw; right: -100vw; background: var(--accent); }
.hero-shots .pin-a { left: -10.4%; top: 30.5%; width: 24.8%; }
.hero-shots .pin-b { right: -4.6%; top: 39.8%; width: 16.6%; }
.hero-desktop { position: absolute; top: 0; left: 15.2%; width: 87.7%; }
.hero-phone { position: absolute; top: 17%; left: 0; width: 22.4%; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }

/* ── Frames around the screenshots ── */
.frame {
    padding: 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-strong);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
}
.frame img { width: 100%; height: auto; border-radius: 12px; background: var(--bg); }
.frame-phone { padding: 9px; border-radius: clamp(18px, 3vw, 40px); background: var(--bg-deep); border-width: 2px; }
.frame-phone img { aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: clamp(12px, 2.3vw, 31px); }

/* ── Key numbers ── */
.stats { padding-top: 56px; }
.stats-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0;
    border-radius: 22px; background: var(--surface); border: 1px solid var(--border);
}
.stats-grid > div { padding: 30px 32px; }
.stats-grid > div + div { border-left: 1px solid var(--border); }
.stats-grid dt { font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.03em; color: #fff; }
.stats-grid dd { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--muted); }

/* ── Section heads ── */
.problem, .how, .features, .rollout, .pricing { padding-top: 150px; }
.h2 .accent { color: var(--accent); }
.section-lead { font-size: 19px; line-height: 1.6; color: var(--muted); margin-top: 20px; max-width: 760px; text-wrap: pretty; }
.section-note { font-size: 15px; line-height: 1.6; color: var(--faint); margin-top: 22px; }
/* A link in running text is underlined, not told apart by colour alone (WCAG 1.4.1). */
.section-note a { text-decoration: underline; text-underline-offset: 2px; }
.list-label { font-size: 13px; font-weight: 800; letter-spacing: 1.2px; color: var(--faint); text-transform: uppercase; }

/* ── Why DeskFlow ── */
.problem-grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; margin-top: 56px; align-items: start; }
.problem .list-label { margin-bottom: 18px; }
.question-list { list-style: none; margin: 0; padding: 0; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.question-list li { display: flex; align-items: center; gap: 16px; padding: 22px 24px; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--text); }
.question-list li + li { border-top: 1px solid var(--border); }
.q-mark {
    flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    font-size: 20px; font-weight: 800; color: var(--accent); background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border);
}

/* The comparison: "without" in muted text with a cross, "with DeskFlow" highlighted with a tick.
   The marks are background images, so ::before stays free for the phone layout's labels. */
.compare-table, .sec-table {
    width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
}
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: 18px 20px; }
.compare-table thead th { padding: 16px 20px; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); }
.compare-table tbody th { width: 1%; white-space: nowrap; font-size: 16px; font-weight: 800; color: var(--text); }
.compare-table tbody th, .compare-table tbody td { border-top: 1px solid var(--border); }
.compare-table td { font-size: 15.5px; line-height: 1.45; }
.compare-table .col-with { background-color: var(--accent-soft-bg); }
.compare-table thead .col-with { color: var(--accent); }
.compare-table tbody .col-with { color: var(--text); border-top-color: var(--accent-soft-border); }
.compare-table td.col-without, .compare-table td.col-with { padding-left: 48px; background-repeat: no-repeat; background-position: 20px 20px; background-size: 18px; }
.compare-table td.col-without {
    color: var(--faint);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8a99' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.compare-table td.col-with {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319c2ad' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}

/* ── How it works: a timeline ── */
.timeline { position: relative; list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
/* The line runs from the first number to the last: each column is (100% - 3 gaps) / 4 wide. */
.timeline::before {
    content: ""; position: absolute; top: 27px; left: 28px; right: calc(25% - 58px); height: 2px;
    background: linear-gradient(90deg, var(--accent-soft-border), var(--accent));
}
.timeline li { display: flex; flex-direction: column; gap: 14px; }
.tl-num {
    position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    font-size: 22px; font-weight: 800; color: var(--accent); background: var(--bg); border: 2px solid var(--accent);
}
.timeline li:last-child .tl-num { background: var(--accent); color: var(--accent-ink); }
.timeline h3 { margin-top: 8px; font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: #fff; }
.timeline p { font-size: 16px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* ── Showcases ── */
.showcases { padding-top: 150px; display: flex; flex-direction: column; gap: 130px; }
.showcase { display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.showcase.reverse { flex-direction: row-reverse; }
.showcase-copy { flex: 0 1 440px; min-width: 0; }
.show-label { display: flex; align-items: center; gap: 14px; }
.show-num { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 800; color: var(--faint); }
.show-num::after { content: ""; width: 28px; height: 2px; background: var(--border-strong); }
.showcase-copy .anchored { margin-top: 16px; }
.showcase-copy h3 { font-size: clamp(28px, 2.9vw, 38px); line-height: 1.12; letter-spacing: -.03em; font-weight: 800; color: #fff; text-wrap: balance; }
.showcase-copy p { font-size: 18px; line-height: 1.6; color: var(--muted); margin-top: 18px; text-wrap: pretty; }
.showcase-copy .check-list { margin-top: 26px; gap: 12px; }
.showcase-copy .check-list li { font-size: 17px; }
.showcase .frame-laptop { flex: 0 1 700px; min-width: 0; }

/* The phone showcase on the accent across the full width. */
.mobile-band { position: relative; overflow: hidden; margin-top: 150px; padding: 88px 0; background: var(--accent); color: var(--accent-ink); }
.mobile-band .pin-c { right: 40px; top: 59px; width: min(540px, 45vw); }
.mobile-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.phone-pair { flex: 0 1 560px; display: flex; align-items: flex-start; }
.phone-pair .frame-phone { width: 280px; flex: 0 1 280px; min-width: 0; box-shadow: 0 30px 70px rgba(6, 37, 33, .45); }
.phone-pair .frame-phone + .frame-phone { margin-left: -28px; margin-top: 40px; }
.mobile-band .showcase-copy { flex-basis: 470px; }
.mobile-band .show-num { color: var(--ink-2); }
.mobile-band .show-num::after { background: var(--ink-2); }
.mobile-band .kicker { color: var(--accent-ink); }
.mobile-band .showcase-copy h3 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; color: var(--bg); }
.mobile-band .showcase-copy p, .mobile-band .check-list li { color: var(--accent-ink); }
.mobile-band .check-list li::before { background: var(--bg); }
.mobile-band .anchor-link, .mobile-band .anchor-link:focus-visible, .mobile-band .anchored:hover .anchor-link { color: var(--accent-ink); }
.mobile-band .anchor-link:hover { background: rgba(6, 37, 33, .12); color: var(--accent-ink); }
.mobile-band :focus-visible { outline-color: var(--accent-ink); }

/* ── Features: two cards, each a list with an icon per entry ── */
.feature-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; align-items: start; }
.feature-group { padding: 36px; border-radius: 24px; }
.feature-tag {
    display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: 13px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: var(--accent-soft-text); background: var(--accent-soft-bg);
}
.feature-tag-strong { color: var(--accent-ink); background: var(--accent); }
.feature-list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.feature-list li { display: flex; align-items: flex-start; gap: 16px; }
.feature-list i, .cert-grid i {
    flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 22px;
    color: var(--accent); background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border);
}
.feature-list strong { display: block; font-size: 17px; font-weight: 800; color: #fff; }
.feature-list span { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ── Security: on the darker band ── */
.security { margin-top: 150px; padding: 120px 0; background: var(--bg-deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cert-grid { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cert-grid li { display: flex; align-items: flex-start; gap: 18px; padding: 28px; border-radius: 20px; }
.cert-grid i { width: 52px; height: 52px; border-radius: 14px; font-size: 28px; }
.cert-grid strong { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: #fff; }
.cert-grid span { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.security-grid { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.sec-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.sec-facts li { display: flex; align-items: center; gap: 18px; padding: 24px; border-radius: 20px; }
.sec-facts i {
    flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; font-size: 28px;
    color: var(--accent-ink); background: var(--accent);
}
.sec-facts strong { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.8px; color: #fff; line-height: 1.15; }
.sec-facts span { display: block; margin-top: 2px; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.sec-table { border-radius: 20px; }
.sec-table th, .sec-table td { text-align: left; vertical-align: top; padding: 18px 22px; font-size: 15.5px; line-height: 1.55; }
.sec-table thead th { padding: 16px 22px; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--border); }
.sec-table tbody th { width: 170px; font-weight: 800; color: var(--text); }
.sec-table td { color: var(--muted); }
.sec-table tbody tr + tr > * { border-top: 1px solid var(--border); }

/* ── Rollout ── */
.rollout-steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rollout-steps li { position: relative; overflow: hidden; padding: 30px 28px; border-radius: 22px; }
/* The large number is drawn from data-step: decoration, as the label above the title says it. */
.rollout-steps li::before {
    content: attr(data-step); position: absolute; right: 18px; top: 4px;
    font-size: 96px; font-weight: 800; letter-spacing: -4px; line-height: 1; color: var(--border);
}
.rollout-label, .rollout-steps h3, .rollout-steps p { position: relative; }
.rollout-label { font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.rollout-steps h3 { margin: 12px 0 10px; font-size: 21px; line-height: 1.25; font-weight: 800; color: #fff; }
.rollout-steps p { font-size: 15.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.prepare {
    margin-top: 20px; display: flex; align-items: center; gap: 40px; padding: 28px 32px;
    border-radius: 22px; background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border);
}
.prepare .list-label { flex: 0 0 220px; color: var(--accent-soft-text); }
.prepare-list { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.prepare-list li { font-size: 16.5px; }

/* ── Pricing ── */
.pricing-head { text-align: center; }
.pricing-head .anchored { max-width: none; margin-left: auto; margin-right: auto; }
.pricing-head p { font-size: 19px; line-height: 1.6; color: var(--muted); margin-top: 18px; }
/* The two cards share the grid's rows (name, price, label, list, button), so the shorter list
   keeps its button level with the other one. */
.price-plans {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px;
    max-width: 920px; margin: 48px auto 0;
}
.price-plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; padding: 40px; border-radius: 26px; }
.price-plan.featured { background: var(--accent-soft-bg); border: 2px solid var(--accent); box-shadow: 0 30px 80px rgba(25, 194, 173, .13); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-name { font-size: 22px; font-weight: 800; color: #fff; }
.plan-seats {
    padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: var(--accent-soft-text); background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border);
}
.featured .plan-seats { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; }
.price strong { font-size: clamp(44px, 4.4vw, 60px); font-weight: 800; letter-spacing: -2px; line-height: 1.1; color: #fff; }
.price span { font-size: 18px; font-weight: 600; color: var(--muted); }
.price-plan .list-label { margin: 26px 0 14px; padding-top: 24px; border-top: 1px solid var(--border); }
.featured .list-label { border-top-color: var(--accent-soft-border); }
.price-plan .check-list li { font-size: 16.5px; }
.price-plan .btn { display: flex; align-items: center; justify-content: center; margin-top: 32px; align-self: end; }

/* ── Closing call to action: the accent box ── */
.closing { padding-top: 140px; }
.closing-box {
    position: relative; overflow: hidden; min-height: 300px; padding: 48px 64px; border-radius: 30px;
    display: flex; align-items: center; justify-content: space-between; gap: 40px;
    background: var(--accent); color: var(--accent-ink);
}
.closing-box .pin-d { right: 120px; top: -60px; width: 420px; }
.closing-box .pin-e { right: -40px; top: 150px; width: 220px; }
.closing-box > div { position: relative; }
.closing-box > div:first-of-type { max-width: 660px; }
.closing-box h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; color: var(--bg); }
.closing-box p { margin-top: 16px; font-size: 19px; line-height: 1.5; font-weight: 600; color: var(--accent-ink); }
.closing-ctas { flex: 0 0 auto; }
.closing-box .btn { display: inline-flex; align-items: center; gap: 10px; padding: 18px 28px; border-radius: 14px; font-size: 17px; background: var(--bg); color: #fff; }
.closing-box .btn i { color: var(--accent); }
.closing-box .btn:hover { background: var(--surface); color: #fff; }
.closing-box :focus-visible { outline-color: var(--accent-ink); }

/* ── Home page: tablets ── */
@media (max-width: 1099px) {
    .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
    .timeline::before { display: none; }
    .rollout-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cert-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    /* The comparison needs the full width for its three columns. */
    .problem-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 979px) {
    .security-grid, .feature-groups { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .security-grid { gap: 20px; }
    .sec-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-grid > div:nth-child(3) { border-left: 0; }
    .stats-grid > div:nth-child(n + 3) { border-top: 1px solid var(--border); }
    .showcase, .showcase.reverse, .mobile-inner { flex-direction: column; align-items: stretch; gap: 32px; }
    .showcase-copy, .mobile-band .showcase-copy { flex: none; max-width: 640px; }
    .showcase .frame-laptop { flex: none; }
    .phone-pair { flex: none; align-self: center; }
    .mobile-inner { flex-direction: column-reverse; }
    .price-plans { grid-template-columns: minmax(0, 560px); justify-content: center; row-gap: 18px; }
    .price-plan { grid-row: auto; grid-template-rows: none; }
    .price-plan .btn { align-self: auto; }
    .prepare { flex-direction: column; align-items: stretch; gap: 16px; }
    .prepare .list-label { flex: none; }
    .closing-box { flex-direction: column; align-items: flex-start; }
}

/* ── Home page: phones ── */
@media (max-width: 559px) {
    /* 64px between sections, 24px from a heading block to its content. Body text 15px, small 13.5px. */
    .hero { padding-top: 32px; }
    .stats { padding-top: 40px; }
    .problem, .how, .showcases, .features, .rollout, .pricing, .closing { padding-top: 64px; }
    .mobile-band, .security { margin-top: 64px; padding: 56px 0; }

    .section-lead, .showcase-copy p, .pricing-head p { font-size: 15px; line-height: 1.55; margin-top: 12px; }
    .list-label { font-size: 11.5px; }
    .section-note { font-size: 13.5px; margin-top: 16px; }

    /* Hero: the phone would be too small beside the desktop, so only the desktop is shown,
       on the stripe. */
    .pill { font-size: 12px; padding: 4px 11px; }
    .hero h1 { font-size: 34px; line-height: 1.06; letter-spacing: -1.1px; margin-top: 16px; }
    .hero-sub { font-size: 16px; line-height: 1.5; margin-top: 14px; }
    .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
    .hero-ctas .btn-lg { padding: 15px 20px; font-size: 16px; justify-content: center; }
    .hero-note { margin: 4px 0 0; justify-content: center; font-size: 14px; }
    .hero-shots { aspect-ratio: auto; margin-top: 32px; padding-bottom: 24px; }
    .hero-stripe { top: 30%; height: auto; bottom: 0; }
    .hero-shots .pin, .hero-phone { display: none; }
    .hero-desktop { position: relative; left: 0; width: 100%; }
    .frame { padding: 5px; border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
    .frame img { border-radius: 8px; }
    .frame-phone { padding: 5px; }

    /* Key numbers: two side by side */
    .stats-grid { border-radius: 16px; }
    .stats-grid > div { padding: 16px 18px; }
    /* "Mehrsprachig" is wider than a half-width cell on small phones, so it may hyphenate. */
    .stats-grid dt { font-size: 22px; letter-spacing: -.5px; hyphens: auto; overflow-wrap: break-word; }
    .stats-grid dd { font-size: 13px; margin-top: 2px; }

    /* Why DeskFlow */
    .problem-grid { margin-top: 24px; gap: 28px; }
    .problem .list-label { margin-bottom: 12px; }
    .question-list li { padding: 14px 16px; gap: 12px; font-size: 14.5px; }
    .q-mark { width: 32px; height: 32px; font-size: 16px; }
    /* Tables become one block per row: the topic as its heading, the cells below it. The column
       header is gone, so a cell that needs it names it itself (data-label). */
    .compare-table thead, .sec-table thead { display: none; }
    .compare-table tr, .sec-table tr { display: block; padding: 14px 16px; }
    .compare-table tbody tr + tr, .sec-table tbody tr + tr { border-top: 1px solid var(--border); }
    .compare-table th, .compare-table td, .sec-table th, .sec-table td { display: block; width: auto; white-space: normal; padding: 0; border: 0 !important; font-size: 14px; }
    .compare-table tbody th, .sec-table tbody th { margin-bottom: 4px; font-size: 15px; }
    .compare-table td.col-without, .compare-table td.col-with { padding: 8px 10px 8px 34px; background-position: 10px 10px; background-size: 16px; border-radius: 8px; }
    .compare-table td.col-without { background-color: transparent; }
    .compare-table td.col-with { margin-top: 6px; }
    .compare-table td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 2px;
        font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--faint);
    }
    .compare-table td.col-with::before { color: var(--accent-soft-text); }
    .sec-table tr > * + * { margin-top: 2px; }

    /* Timeline: one step per row, the number beside the title */
    .timeline { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px; }
    .timeline li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; }
    .tl-num { width: 40px; height: 40px; font-size: 16px; grid-row: span 2; }
    .timeline h3 { margin-top: 8px; font-size: 17px; }
    .timeline p { font-size: 14px; line-height: 1.5; }

    /* Showcases */
    .showcases { gap: 56px; }
    .showcase, .showcase.reverse, .mobile-inner { gap: 24px; }
    .showcase-copy .anchored { margin-top: 10px; }
    .showcase-copy h3, .mobile-band .showcase-copy h3 { font-size: 24px; letter-spacing: -.6px; }
    .showcase-copy .check-list { margin-top: 16px; }
    .phone-pair .frame-phone { width: 42vw; flex-basis: 42vw; }
    .phone-pair .frame-phone + .frame-phone { margin-left: -14px; margin-top: 28px; }
    .mobile-band .pin-c { right: -60px; top: 20px; width: 260px; }

    /* Features */
    .feature-groups { margin-top: 24px; gap: 14px; }
    .feature-group { padding: 20px 18px; border-radius: 16px; }
    .feature-tag { font-size: 11.5px; }
    .feature-list { margin-top: 18px; gap: 16px; }
    .feature-list li { gap: 12px; }
    .feature-list i { width: 36px; height: 36px; font-size: 19px; border-radius: 10px; }
    .feature-list strong { font-size: 15px; }
    .feature-list span { font-size: 13.5px; line-height: 1.5; margin-top: 2px; }

    /* Security */
    .cert-grid { margin-top: 24px; gap: 10px; }
    .cert-grid li { padding: 16px; gap: 14px; border-radius: 14px; }
    .cert-grid i { width: 40px; height: 40px; font-size: 22px; border-radius: 10px; }
    .cert-grid strong { font-size: 16px; }
    .cert-grid span { font-size: 13.5px; margin-top: 2px; }
    .security-grid { margin-top: 10px; gap: 10px; }
    .sec-facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .sec-facts li { padding: 16px; gap: 14px; border-radius: 14px; }
    .sec-facts i { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
    .sec-facts strong { font-size: 22px; }
    .sec-facts span { font-size: 13.5px; }
    .sec-table { border-radius: 14px; }

    /* Rollout */
    .rollout-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 24px; }
    .rollout-steps li { padding: 18px; border-radius: 16px; }
    .rollout-steps li::before { font-size: 64px; right: 14px; top: 2px; }
    .rollout-label { font-size: 11.5px; }
    .rollout-steps h3 { font-size: 17px; margin: 6px 0 4px; }
    .rollout-steps p { font-size: 14px; }
    .prepare { padding: 18px; border-radius: 16px; }
    .prepare-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .prepare-list li { font-size: 14.5px; }

    /* Pricing */
    .price-plans { margin-top: 28px; }
    .price-plan { padding: 22px; border-radius: 18px; }
    .plan-name { font-size: 18px; }
    .price { margin-top: 12px; }
    .price strong { font-size: 38px; letter-spacing: -1.2px; }
    .price span { font-size: 15px; }
    .price-plan .list-label { margin: 18px 0 10px; padding-top: 16px; }
    .price-plan .check-list li { font-size: 14.5px; }
    .price-plan .btn { margin-top: 22px; padding: 13px; }

    /* Closing */
    .closing-box { min-height: 0; padding: 28px 22px; gap: 22px; border-radius: 18px; }
    .closing-box .pin-d { right: -40px; top: -30px; width: 200px; }
    .closing-box .pin-e { display: none; }
    .closing-box h2 { font-size: 26px; letter-spacing: -.6px; }
    .closing-box p { font-size: 15px; margin-top: 10px; }
    .closing-ctas, .closing-box .btn { width: 100%; justify-content: center; }
    .closing-box .btn { padding: 14px 20px; font-size: 16px; }
}
@media (max-width: 419px) {
    /* Keeps "Mehrsprachig" on one line down to 360px. */
    .stats-grid dt { font-size: 20px; }
}

/* ── Footer ── */
.footer { margin-top: 120px; border-top: 1px solid var(--border); background: var(--bg-deep); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-top: 56px; padding-bottom: 40px; }
.footer .logo img { width: 16px; height: 20px; }
.footer .logo span { font-size: 17px; }
.footer-tag { font-size: 15px; color: var(--faint); margin-top: 14px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-col h2 { margin-bottom: 4px; font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }
.footer-col a { color: var(--text-2); }
.footer-col a:hover { color: #fff; }
.copyright {
    /* Bottom-aligned: the copyright and the label sit on the line of the DATAGROUP wordmark. */
    display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; line-height: 1;
    font-size: 14px; color: var(--faint); padding-top: 20px; padding-bottom: 32px; border-top: 1px solid var(--border);
}
/* Labelled like the link columns, the logo beside it. */
.footer-by { display: flex; align-items: flex-end; gap: 14px; }
.footer-by span { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }
.footer-by img { width: auto; height: 36px; }
/* The text box keeps room below the letters; 2px down puts them on the wordmark baseline. */
.copyright > span, .footer-by span { position: relative; top: 2px; }

/* ── Legal pages ── */
.legal-page {
    max-width: 780px;
    margin: 60px auto 0;
    padding: 0 24px;
}

.legal-page h1 {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.8px;
    color: var(--color-text-heading);
    margin-bottom: 8px;
}

.legal-intro {
    color: var(--color-text-muted);
    font-size: 14px;
    margin-bottom: 48px;
}

.legal-section {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.legal-section:last-child { border-bottom: none; }

.legal-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-heading);
    margin-bottom: 14px;
}

.legal-section h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-heading);
    margin-top: 20px;
    margin-bottom: 8px;
}

.legal-section p {
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 12px;
}

.legal-section ul {
    list-style: none;
    margin: 0 0 12px 0;
    padding: 0;
}

.legal-section ul li {
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.75;
    padding-left: 18px;
    position: relative;
}

.legal-section ul li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

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

.legal-section a:hover { color: var(--color-primary-light); }

/* ── Simple content pages (404) ── */
.simple-page { padding-top: 84px; }
.simple-page p { color: var(--muted); margin-top: 14px; }

/* ── Form controls ── */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--color-text);
}

.form-control {
    width: 100%;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    border: 1px solid var(--control-border);
    border-radius: 9px;
    background: var(--bg-deep);
    color: var(--color-text);
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(25, 194, 173, 0.18);
}

.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 0.65;
}

/* ── Blazor validation ── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #ff6b6b; }
.validation-message { color: #ff8080; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after { content: "An error has occurred." }

.darker-border-checkbox.form-check-input { border-color: #929292; }

/* ── Responsive: header, footer and spacing shared by all pages ── */
@media (max-width: 979px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
    /* The full nav needs about 920px (German), so below 960px the links and sign-in move into
       the menu; the call to action stays while it fits. */
    .nav .wrap { gap: 14px; }
    .nav-links, .nav-signin { display: none; }
    .nav-menu { display: block; }
    .nav-actions { margin-left: auto; gap: 6px; }
}
@media (max-width: 559px) {
    .wrap, .container { padding-left: 20px; padding-right: 20px; }
    html { scroll-padding-top: 68px; }
    .nav .wrap { height: 56px; }
    .logo span { font-size: 19px; }
    .nav-menu-panel { padding: 4px 20px 18px; }
    .nav-menu-panel > a { padding: 13px 0; font-size: 15.5px; }
    .nav-menu-actions { margin-top: 16px; }
    .nav-menu-actions .btn { padding: 12px; }

    .kicker { font-size: 11.5px; letter-spacing: 1.2px; }
    .h2 { font-size: 26px; line-height: 1.12; letter-spacing: -.7px; margin-top: 10px; }
    .check-list { gap: 8px; }
    .check-list li { font-size: 14px; gap: 10px; }
    .check-list li::before { width: 18px; height: 18px; }

    /* Footer: brand on its own row, the two link columns side by side, larger tap targets */
    .footer { margin-top: 64px; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; padding-top: 32px; padding-bottom: 24px; }
    .footer-grid > div:first-child { grid-column: 1 / -1; }
    .footer-tag { margin-top: 8px; font-size: 14px; }
    .footer-col { gap: 0; font-size: 14px; }
    .footer-col a { padding: 6px 0; }
    .copyright { font-size: 12.5px; padding-bottom: 28px; }
    .footer-by span { font-size: 11px; }
    .footer-by img { height: 32px; }
}
@media (max-width: 419px) {
    /* No room left in the header: the call to action is in the phone menu and right below in the hero. */
    .nav-cta { display: none; }
}

/* ── Call to action: larger, with one attention pulse on load ── */
.btn-lg { font-size: 16px; font-weight: 800; padding: 15px 24px; border-radius: 12px; }
.btn-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 10px 30px rgba(25, 194, 173, .28);
    animation: cta-pulse 2.2s ease-out 1s 2;
}
.btn-cta i { transition: transform .15s; }
.btn-cta:hover i { transform: translateX(3px); }
@keyframes cta-pulse {
    0%   { box-shadow: 0 10px 30px rgba(25, 194, 173, .28), 0 0 0 0 rgba(25, 194, 173, .55); }
    70%  { box-shadow: 0 10px 30px rgba(25, 194, 173, .28), 0 0 0 16px rgba(25, 194, 173, 0); }
    100% { box-shadow: 0 10px 30px rgba(25, 194, 173, .28), 0 0 0 0 rgba(25, 194, 173, 0); }
}

/* Phones and tablets: the button stays at the bottom once the hero's has scrolled away. */
.sticky-cta { display: none; }
@media (max-width: 959px) {
    .sticky-cta {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        background: rgba(9, 18, 33, .95); backdrop-filter: blur(10px);
        border-top: 1px solid var(--border-strong);
        transform: translateY(110%); visibility: hidden;
        transition: transform .25s, visibility 0s .25s;
    }
    .sticky-cta.is-visible { transform: none; visibility: visible; transition: transform .25s; }
    .sticky-cta .btn { display: block; max-width: 520px; margin: 0 auto; }
    body:has(.sticky-cta) .copyright { padding-bottom: 88px; }
}
@media (max-width: 559px) {
    .anchored { margin-top: 10px; }
}

/* ── Linkable headings: a link icon appears beside the heading on hover or focus ── */
/* The heading runs inline, so the icon follows its last line of text. The wrapper carries the heading's spacing. */
.anchored { margin-top: 14px; max-width: 820px; line-height: 1.1; text-wrap: balance; }
.anchored > h2, .anchored > h3 { display: inline; margin: 0; }
.anchor-link {
    margin-left: 4px; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px; font-size: 18px; color: var(--muted);
    opacity: 0; transition: opacity .15s, background-color .15s, color .15s;
}
.anchored:hover .anchor-link,
.anchor-link:focus-visible,
.anchor-link.is-copied { opacity: 1; color: var(--text-2); }
.anchor-link:hover { background: var(--surface); color: var(--accent-hover); }
/* No hover on touch screens: the icon is always there, quietly. */
@media (hover: none) { .anchor-link { opacity: .55; } }

.copy-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 120;
    transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
    padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 600;
    color: var(--accent-soft-text); background: var(--surface); border: 1px solid var(--accent-soft-border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    transition: opacity .2s, transform .2s;
}
.copy-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn-cta { animation: none; }
    .sticky-cta, .copy-toast, .anchor-link { transition: none; }
}