/* Shared styles of telocept.appshines.com: start page, feature pages and installation page.
   The colors follow the web interface of Telocept (telocept.css). */
:root {
  --text: #15304a;
  --muted: #4b6374;
  --page: #f5f7fa;
  --card: #ffffff;
  --border: #d5e0e8;
  --primary: #1f5f85;
  --primary-hover: #2a7099;
  --primary-active: #184d6c;
  --primary-soft: #eaf3f9;
  --sidebar: #173850;
  --header: #0f2a3e;
  --focus: #ce7400;
  --mark: #e07800;
  --mark-soft: rgba(224, 120, 0, 0.14);
  --cta: #2fe06b;
  --cta-hover: #5cf08e;
  --cta-active: #22b955;
  --cta-ink: #062611;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19.5 7'/%3E%3C/svg%3E");
  --check-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fe06b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19.5 7'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 16px/1.55 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--primary); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Header with the navigation. "Installation" is the only button in it. */
.site-header { background: var(--header); color: #fff; }
.site-bar { margin: 0 auto; padding: 14px clamp(16px, 2.5vw, 40px); display: flex; align-items: center; gap: 16px; }
.site-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; margin-inline-end: auto; }
.site-brand img { width: 36px; height: 36px; }
.site-brand span { font-size: 20px; font-weight: 600; letter-spacing: 0.2px; }
/* The logo of Appshines leads back to www.appshines.com. It stands directly on the header, whose blue is dark enough for
   the darker parts of the logo. */
.site-publisher { display: inline-flex; padding: 3px 8px; border-radius: 8px; margin-inline-start: -8px; }
.site-publisher img { display: block; width: auto; height: 31px; }
.site-publisher:hover { background: rgba(255, 255, 255, 0.1); }
.site-publisher:active { background: rgba(255, 255, 255, 0.18); }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a { color: #dfe9f1; text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; }
.site-nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.site-nav a:active { background: rgba(255, 255, 255, 0.18); }
.site-nav a[aria-current="page"] { color: #fff; }
.site-nav svg { width: 18px; height: 18px; }
.site-nav .site-nav-install, .site-nav .site-nav-install[aria-current="page"] { background: #fff; color: var(--sidebar); margin-inline-start: 6px; }
.site-nav .site-nav-install:hover { background: var(--primary-soft); color: var(--sidebar); }
.site-nav .site-nav-install:active { background: #d6e7f2; }

.site-main { max-width: 880px; margin: 0 auto; padding: 40px 16px 24px; }
/* Pages with the overview use the full width of the window, so the overview of Telocept has room. */
.site-main.full { max-width: none; padding-inline: clamp(16px, 2.5vw, 40px); }
h1 { font-size: 32px; line-height: 1.2; margin: 0 0 10px; }
h2 { font-size: 20px; margin: 0 0 12px; }
.lead { font-size: 18px; color: var(--muted); margin: 0 0 28px; max-width: 720px; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; font-weight: 700; color: var(--primary); margin: 0 0 6px; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 24px; margin-bottom: 20px; }
.button {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--primary); color: #fff; text-decoration: none; font-weight: 600;
  padding: 12px 22px; border-radius: 8px; border: 0; cursor: pointer; font: inherit;
}
.button:hover { background: var(--primary-hover); }
.button:active { background: var(--primary-active); }
.button svg { width: 20px; height: 20px; flex: none; }
.button.secondary { background: var(--primary-soft); color: var(--primary); }
.button.secondary:hover { background: #d6e7f2; }
.button.secondary:active { background: #c4dcec; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }
/* The start page heading with the large button "Alle Funktionen" at the right, just above the card. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: 28px; }
.page-head .lead { margin-bottom: 0; }
.button.large { flex: none; padding: 20px 40px; font-size: 22px; gap: 14px; border-radius: 12px; }
.button.large svg { width: 30px; height: 30px; }

/* Installation page: one panel per platform, in it one panel per program or topic, in it one tile per download. */
.platform-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.platform-nav a { display: inline-flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 16px; color: var(--text); font-weight: 600; text-decoration: none; }
.platform-nav a:hover { background: var(--primary-soft); }
.platform-nav a:active { background: #d6e7f2; }
.platform-nav img { width: 24px; height: 24px; }
.platform { background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 24px; }
.platform-head { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.platform-head img { width: 48px; height: 48px; flex: none; }
.platform-head h2 { font-size: 24px; line-height: 1.2; margin: 0; }
.platform-head p { margin: 2px 0 0; color: var(--muted); }
.platform-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 20px 24px 24px; }
.platform-body > * { min-width: 0; }
.platform-body .wide { grid-column: 1 / -1; }
.platform-body .notice { margin-top: 0; }
.platform-body .notice p { margin: 0 0 12px; }
.notice .button.secondary { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.notice .button.secondary:hover { background: #f4f8fb; }
.notice .button.secondary:active { background: #e6eff5; }
.platform-body .button img { width: 20px; height: 20px; flex: none; }
.subpanel { background: var(--page); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.subpanel h3 { font-size: 18px; line-height: 1.3; margin: 0 0 6px; }
.subpanel h4 { font-size: 16px; line-height: 1.3; margin: 0 0 4px; }
.subpanel p { margin: 0 0 10px; }
.subpanel > :last-child, .notes p { margin-bottom: 0; }
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px 28px; }
.notes code { overflow-wrap: anywhere; }
.file-group { margin-top: 16px; }
.file-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin-bottom: 8px; }
.file-group-head h4 { margin: 0; }
.file-group-head .facts { font-size: 14px; }
.files { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.file { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; min-width: 0; }
.file-name { font-weight: 600; }
.file .facts { font-size: 15px; }
.file .button { margin-top: auto; padding: 10px 16px; }
.file-size { font-weight: 400; opacity: .85; }
.facts { color: var(--muted); }
.hash { width: 100%; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.hash summary { cursor: pointer; }
.hash code { font-family: Consolas, "SFMono-Regular", Menlo, monospace; }
ol { margin: 0; padding-left: 22px; }
ol li { margin: 6px 0; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px 40px; }
.steps li { margin: 0; }
.notice { background: var(--primary-soft); border-radius: 8px; padding: 14px 16px; margin-top: 16px; }
.pending { color: var(--muted); margin: 8px 0 0; }
.heading-logo { width: 22px; height: 22px; vertical-align: -4px; margin-inline-end: 4px; }

/* The guide of the installation page (install-guide.js). With JavaScript it appears once a download is chosen, inside the panel of
   that download, with only the steps of this download. The steps count themselves, because which ones show depends on the download. */
.js .guide:not(.shown) { display: none; }
.guide { display: grid; gap: 16px; grid-column: 1 / -1; min-width: 0; counter-reset: guide-step; }
.guide-head { border-top: 3px solid var(--primary); padding-top: 16px; }
.guide-head h3 { font-size: 22px; line-height: 1.25; margin: 0 0 6px; scroll-margin-top: 16px; }
.guide-head h3:focus { outline: none; }
.guide-head p { margin: 0; overflow-wrap: anywhere; }
.file.chosen { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 24px; align-items: start; }
.step.text-only { grid-template-columns: minmax(0, 1fr); }
.step > * { min-width: 0; }
.step-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.step-head h4 { font-size: 18px; line-height: 1.3; margin: 3px 0 0; }
.number { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-weight: 700; }
.number::before { counter-increment: guide-step; content: counter(guide-step); }
.optional { font-size: 13px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; margin-inline-start: 4px; vertical-align: 2px; white-space: nowrap; }
.step ol, .step ul { margin: 0 0 10px; padding-left: 22px; }
.step li { margin: 5px 0; }
.step strong { overflow-wrap: anywhere; }
.step > div > :last-child { margin-bottom: 0; }
.step h5 { font-size: 16px; margin: 0 0 4px; }
.command { margin: 6px 0 10px; padding: 10px 12px; overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: 6px; font: 14px/1.5 Consolas, "SFMono-Regular", Menlo, monospace; }
.shots { display: grid; gap: 14px; }
.shots figure { margin: 0; min-width: 0; }
.shots figure > svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.shots figcaption { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* Start page: one card per feature, the diagram links to the feature page. */
.feature { display: grid; gap: 16px; }
.feature > *, .detail > * { min-width: 0; }
.feature-text { max-width: 820px; }
.feature-text p { margin: 0 0 14px; }
.feature-text ul { margin: 0; padding-left: 20px; }
.feature-text li { margin: 4px 0; }
.shot-hint { color: var(--muted); font-size: 14px; margin: 0; }

/* The overview of Telocept as HTML (telocept-diagram.js). Until it stands, the room is kept free. */
.diagram { min-height: 320px; isolation: isolate; }
.diagram.is-ready { min-height: 0; }
.diagram-failed::before { content: "Die Darstellung der Übersicht konnte nicht geladen werden."; color: var(--muted); }
/* On small screens the overview stacks its cards and grows very tall. The start page shows its beginning until the
   visitor asks for all of it. */
.diagram-more { display: none; justify-self: center; }
/* Starts, stops and continues the calls the overview of the start page plays, with the switch for the sound. Before the
   first start the button pulses, so visitors see that the overview can play calls. */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.demo-note { margin: 0; flex: 1 1 260px; font-size: 14px; color: var(--muted); }
.demo-toggle.is-pulsing { animation: demo-pulse 1.8s ease-in-out infinite; }
@keyframes demo-pulse {
  0% { box-shadow: 0 0 0 0 rgba(31, 95, 133, .55); transform: scale(1); }
  50% { transform: scale(1.04); }
  70% { box-shadow: 0 0 0 16px rgba(31, 95, 133, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 95, 133, 0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .demo-toggle.is-pulsing { animation: none; } }
@media (max-width: 700px) {
  .diagram-teaser { display: grid; gap: 12px; }
  .diagram-teaser:not(.is-open) .diagram { max-height: 1300px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
  .diagram-teaser:not(.is-open) .diagram-more { display: inline-flex; }
}

/* Feature pages: a menu at the left edge in the look of the menu of Telocept, one panel per feature beside it
   (feature-tabs.js). On small screens the menu becomes a row that scrolls sideways above the panels. */
.feature-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.feature-tabs { position: sticky; top: 16px; background: var(--sidebar); color: #fff; border-radius: 10px; padding: 14px 10px;
  max-height: calc(100vh - 32px); overflow-y: auto; }
.feature-tabs .feature-home { margin-bottom: 6px; padding-left: 12px; box-shadow: 0 7px 0 -6px #2b617e; }
.feature-tabs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.feature-tabs a { display: flex; align-items: center; gap: 10px; color: #fff; padding: 9px 12px; border-radius: 7px; text-decoration: none; }
.feature-tabs a:hover, .feature-tabs a[aria-current="page"] { background: #2b617e; }
.feature-tabs a:active { background: #245570; }
.feature-tabs a:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.feature-tabs svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.feature-panel { display: grid; gap: 20px; min-width: 0; }
.feature-panel > .card { margin-bottom: 0; }
.feature-panel .tab-steps { padding: 4px 0 0; }
.tab-steps { justify-content: space-between; }
.tab-steps .tab-next { margin-inline-start: auto; }
.has-feature-tabs .back { margin-top: 20px; }
@media (max-width: 900px) {
  .feature-layout { grid-template-columns: minmax(0, 1fr); }
  .feature-tabs { top: 0; z-index: 20; max-height: none; overflow-x: auto; padding: 8px; border-radius: 8px; display: flex; gap: 4px; }
  .feature-tabs .feature-home { margin-bottom: 0; box-shadow: none; }
  .feature-tabs ul { display: flex; gap: 4px; }
  .feature-tabs a { padding: 8px 12px; white-space: nowrap; }
  /* The menu row stays at the top, a jump to a feature ends below it. */
  .feature-panel { scroll-margin-top: 76px; }
}
.detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.detail h2 { font-size: 22px; }
.detail-text p { margin: 0 0 12px; }
.detail-text ol.marks { list-style: none; padding: 0; margin: 0 0 12px; }
.detail-text ol.marks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; margin: 8px 0; }
.mark-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--mark); color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
}
.detail-figure { margin: 0; min-width: 0; }
/* A picture of a program with numbered frames over it, drawn in the pixels of the picture at scale 1. */
.shot { position: relative; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.shot img { display: block; width: 100%; height: auto; }
.shot-marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.shot-marks .mark { fill: none; stroke: var(--mark); stroke-width: 3; }
.shot-marks .badge { fill: var(--mark); stroke: #fff; stroke-width: 2.5; }
.shot-marks text { fill: #fff; font: 700 14px "Segoe UI", system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.detail-figure figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.back { margin-top: 8px; }

.detail-text { max-width: 820px; }
/* The window of the simulation stands beside the text, clearly apart from the section of the overview below it. */
.sim-intro { display: grid; gap: 24px; align-items: start; padding-bottom: 12px; }
.sim-intro .sim-window { max-width: 460px; min-height: 0; padding: 4px 0 8px; }
@media (min-width: 1100px) {
  .sim-intro { grid-template-columns: minmax(0, 820px) 440px; gap: 48px; }
}

.site-footer { max-width: 880px; margin: 0 auto; padding: 8px 16px 40px; color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-main.full + .site-footer { max-width: none; padding-inline: clamp(16px, 2.5vw, 40px); }

/* The button to the demo, the first goal of the website. It stands out in green on light and dark ground, like the button
   "Produkttour starten" of www.appshines.com. */
.button.demo { background: var(--cta); color: var(--cta-ink); font-weight: 700; }
.button.demo:hover { background: var(--cta-hover); }
.button.demo:active { background: var(--cta-active); }
.button.small { padding: 8px 14px; gap: 8px; }
.button.small svg { width: 16px; height: 16px; }
.button.on-dark { background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.button.on-dark:hover { background: rgba(255, 255, 255, 0.2); }
.button.on-dark:active { background: rgba(255, 255, 255, 0.28); }
.soon-badge { display: inline-block; padding: 1px 10px; border-radius: 999px; background: #fff1d6; color: #7a4a00; font-size: 13px; font-weight: 700; }

/* Start page: the header stays in view, so the demo is one click away everywhere on the long page. */
.has-sticky-header { scroll-padding-top: 76px; }
.site-header.is-sticky { position: sticky; top: 0; z-index: 40; }
.site-nav-sections { margin-inline-end: 4px; }
.home-section { max-width: 1320px; margin: 0 auto; padding: 28px clamp(16px, 2.5vw, 40px) 8px; }
.section-head { margin-bottom: 14px; }
.section-head h2 { font-size: 26px; line-height: 1.2; margin: 0 0 4px; }
.section-head p { margin: 0; color: var(--muted); }
.hero { background: radial-gradient(120% 140% at 0% 0%, #1a4f73 0%, #173850 55%, #0f2a3e 100%); color: #fff; }
.hero-inner { max-width: 1320px; margin: 0 auto; padding: 28px clamp(16px, 2.5vw, 40px) 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; }
.hero h1 { font-size: 46px; line-height: 1.1; margin: 0 0 8px; }
/* Why the overview matters, the first thing a visitor should take along. */
.hero-why { display: flex; align-items: flex-start; gap: 10px; font-size: 24px; line-height: 1.25; font-weight: 600; color: var(--cta-hover); margin: 0 0 12px; }
.hero-why svg { flex: none; width: 1.25em; height: 1.25em; }
.hero-eyebrow { margin: 0 0 10px; color: #dfe9f1; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hero-lead { font-size: 18px; color: #dfe9f1; margin: 0 0 18px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.hero-note { margin: 0; color: #dfe9f1; font-size: 15px; }
.hero-signup { margin-bottom: 18px; }
.hero-points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.hero-points li { padding-left: 26px; background: var(--check-on-dark) left 3px no-repeat; background-size: 18px; }
.hero-platforms { display: flex; flex-wrap: wrap; gap: 8px; text-decoration: none; border-radius: 10px; }
.hero-platforms span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; background: #fff; color: var(--text); border-radius: 8px; font-size: 14px; font-weight: 600; }
.hero-platforms:hover span { background: var(--primary-soft); }
.hero-platforms:active span { background: #d6e7f2; }
.hero-shot { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.hero-shot img { display: block; width: 100%; height: auto; }
.hero-shot:hover { box-shadow: 0 0 0 3px var(--cta), 0 10px 30px rgba(0, 0, 0, 0.35); }
.hero-shot:active { box-shadow: 0 0 0 3px var(--cta-active); }
.hero-play { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--cta); color: var(--cta-ink); font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
.hero-play svg { width: 18px; height: 18px; }
.hero-shot:hover .hero-play { background: var(--cta-hover); }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.tile { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; }
/* 402 by 251 is the size of the smallest picture, so a wide window shows it without any scaling. */
.tile img { display: block; width: 100%; height: auto; aspect-ratio: 402 / 251; object-fit: cover; object-position: top left; }
.tile-body { padding: 12px 14px 14px; border-top: 1px solid var(--border); }
.tile-body h3 { font-size: 17px; line-height: 1.3; margin: 0 0 4px; color: var(--primary); }
.tile-body p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.tile:hover { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 6px 18px rgba(21, 48, 74, 0.14); }
.tile:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.tile:active { border-color: var(--primary-active); box-shadow: 0 0 0 1px var(--primary-active); }
.tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding: 20px 24px; border-radius: 12px; background: radial-gradient(120% 200% at 0% 0%, #1a4f73 0%, #173850 60%, #0f2a3e 100%); color: #fff; }
.cta-band > div:first-child { flex: 1 1 360px; }
.cta-band h2 { font-size: 22px; line-height: 1.25; margin: 0 0 4px; }
.cta-band p { margin: 0; color: #dfe9f1; }

.usp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.usp { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 2px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.usp-icon { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.usp-icon svg { width: 24px; height: 24px; }
.usp h3 { font-size: 17px; line-height: 1.3; margin: 0; }
.usp p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }

.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.platform-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 2px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.platform-card img { grid-row: span 2; width: 40px; height: 40px; }
.platform-card h3 { font-size: 18px; line-height: 1.3; margin: 0; }
.platform-card p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 24px; margin: 16px 0 0; }
.facts-grid dt { font-weight: 700; }
.facts-grid dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }

.capabilities { columns: 3 320px; column-gap: 14px; }
.capability-group { break-inside: avoid; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.capability-group h3 { font-size: 17px; line-height: 1.3; margin: 0 0 8px; }
.capability-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.capability-group li { padding-left: 24px; font-size: 15px; line-height: 1.4; background: var(--check) left 2px no-repeat; background-size: 16px; }

.home-footer { max-width: 1320px; padding: 20px clamp(16px, 2.5vw, 40px) 32px; }
/* On small screens the header gives up its links and the button to the demo stays at the lower edge of the window. */
.demo-dock { display: none; }

/* Feature page: the way to the demo in the menu and at the end of every panel. */
.feature-tabs .feature-demo { justify-content: center; background: var(--cta); color: var(--cta-ink); font-weight: 700; margin-bottom: 6px; }
.feature-tabs .feature-demo:hover { background: var(--cta-hover); }
.feature-tabs .feature-demo:active { background: var(--cta-active); }
.feature-tabs .feature-demo svg { fill: currentColor; stroke: none; opacity: 1; }
#demo-end { margin-bottom: 20px; scroll-margin-top: 20vh; }

/* The window to sign up (signup.js). */
.signup-dialog { border: 0; border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 32px)); color: var(--text); box-shadow: 0 20px 60px rgba(15, 42, 62, 0.4); }
.signup-dialog::backdrop { background: rgba(15, 42, 62, 0.55); }
.signup-form { display: grid; gap: 12px; padding: 18px 20px 20px; }
.signup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.signup-head h2 { font-size: 21px; line-height: 1.25; margin: 0; }
.signup-close { display: inline-flex; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.signup-close svg { width: 20px; height: 20px; }
.signup-close:hover { background: var(--primary-soft); color: var(--text); }
.signup-close:active { background: #d6e7f2; }
.signup-fields { display: grid; gap: 12px; }
.signup-kinds { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.signup-kinds legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.signup-kind { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.signup-kind:hover { background: #f4f8fb; }
.signup-kind:active { background: #e6eff5; }
.signup-kind:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.signup-kind input { margin: 4px 0 0; accent-color: var(--primary); cursor: pointer; }
.signup-kind span { display: grid; }
.signup-kind small { font-size: 14px; color: var(--muted); }
.signup-field { display: grid; gap: 4px; font-weight: 600; }
.signup-field input, .signup-field textarea { width: 100%; padding: 9px 11px; border: 1px solid #9fb3c2; border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-weight: 400; }
.signup-field textarea { resize: vertical; }
.signup-field input:focus, .signup-field textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; }
.signup-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup-privacy { margin: 0; font-size: 14px; color: var(--muted); }
.signup-done p { margin: 0; }
.signup-done-title { font-size: 18px; font-weight: 700; margin-bottom: 4px !important; }
.signup-status { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.signup-status:empty { display: none; }
.signup-status.is-error { color: #a4262c; font-weight: 600; }
.signup-spinner { width: 16px; height: 16px; flex: none; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: signup-spin .8s linear infinite; }
@keyframes signup-spin { to { transform: rotate(360deg); } }
.signup-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.signup-actions .button[disabled] { opacity: .6; cursor: default; }

/* Wide windows keep exactly the width the pictures are made for: tiles of 402 pixels and a large picture of 600 pixels. */
@media (min-width: 1320px) {
  .home-section, .hero-inner { padding-inline: 40px; }
}
@media (max-width: 1040px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .site-nav-sections { display: none; }
}
@media (max-width: 700px) {
  .hero h1 { font-size: 34px; }
  .hero-why { font-size: 20px; }
  .hero-lead { font-size: 17px; }
  .hero-points { grid-template-columns: minmax(0, 1fr); }
  .button.large { width: 100%; justify-content: center; }
  .hero-signup .button { flex: 1 1 140px; justify-content: center; padding-inline: 12px; white-space: nowrap; }
  .has-demo-dock .site-header .button.demo, .has-demo-dock .feature-demo { display: none; }
  .site-header.is-sticky { position: static; }
  .has-sticky-header { scroll-padding-top: 16px; }
  .has-demo-dock { padding-bottom: 74px; }
  .demo-dock { display: flex; justify-content: center; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45; box-shadow: 0 6px 20px rgba(15, 42, 62, 0.35); }
  .cta-band { padding: 16px; }
  .cta-band .buttons { width: 100%; }
  .cta-band .buttons .button { flex: 1 1 140px; justify-content: center; padding-inline: 12px; white-space: nowrap; }
}

@media (max-width: 1000px) {
  .platform-body { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .site-bar { flex-wrap: wrap; gap: 8px 10px; }
}

@media (max-width: 560px) {
  h1 { font-size: 26px; }
  .site-brand span { font-size: 18px; }
  .site-bar { flex-wrap: wrap; gap: 8px 10px; }
  .site-publisher { padding: 3px 6px; margin-inline-start: -6px; }
  .site-publisher img { height: 25px; }
  .site-nav a { padding: 8px; }
  .platform-head { padding: 14px 16px; }
  .platform-head img { width: 40px; height: 40px; }
  .platform-body { padding: 14px; gap: 14px; }
  .subpanel { padding: 14px; }
  .file .button { align-self: stretch; }
  .button { justify-content: center; }
  .card { padding: 18px; }
  .button.large { padding: 16px 24px; font-size: 19px; }
}