/* Shared design tokens + components for the FsRdp section (Default.aspx,

   Server.aspx, InstallingOnLinux.aspx). Previously each page carried its own

   near-identical copy of this CSS (fsrdp-hero / fsrdp-server-hero /

   fsrdp-linux-hero, three fsrdp-step copies, five differently-colored

   "pastel" boxes) - consolidated here so there is exactly one navy hero,

   one white card language (color lives in a small icon badge, not the card

   background), and one neutral note style, shared by all three pages. */



:root {

  --fsrdp-navy-950: #17202b;

  --fsrdp-navy-700: #244a73;

  --fsrdp-blue-600: #336699;

  --fsrdp-ink-soft: #495057;

  --fsrdp-paper: #f4f7fc;

  --fsrdp-line: #d7dee7;

  --fsrdp-shadow: 0 0.35rem 1.25rem rgba(20, 42, 68, 0.14);

  --fsrdp-shadow-hover: 0 0.75rem 1.75rem rgba(20, 42, 68, 0.22);

  --fsrdp-radius: 12px;

}



/* ---------- Page header ---------- */



.fsrdp-hero {

  background: linear-gradient(135deg, var(--fsrdp-navy-950), var(--fsrdp-navy-700));

  border-radius: var(--fsrdp-radius);

  color: #fff;

  padding: 2rem;

}



/* Key visual on the start page. The picture has a white ground, so it sits on the white

   page without a box. The claim lines below are real text in the colours of the picture's

   own lettering (dark ink, red rule); letter-spacing also trails the last letter, which the

   matching padding-left evens out again so the centred lines stay centred. */

.fsrdp-keyvisual {

  text-align: center;

}



.fsrdp-keyvisual img {

  display: block;

  width: 100%;

  max-width: 52rem;

  height: auto;

  margin: 0 auto;

}



.fsrdp-keyvisual-tagline {

  display: inline-block;

  margin: 0.75rem 0 0;

  padding: 0 0 0.5rem 0.3em;

  border-bottom: 3px solid #e60207;

  color: var(--fsrdp-navy-950);

  font-size: clamp(1rem, 0.7rem + 1.2vw, 1.6rem);

  font-weight: 600;

  letter-spacing: 0.3em;

  text-transform: uppercase;

}



.fsrdp-keyvisual-claim {

  margin: 0.75rem 0 0;

  padding-left: 0.2em;

  color: var(--fsrdp-ink-soft);

  font-size: clamp(0.8rem, 0.65rem + 0.5vw, 1rem);

  letter-spacing: 0.2em;

  text-transform: uppercase;

}



/* Phones: tighter tracking, so each line still fits in one row instead of breaking inside

   a sentence - a wrapped tagline would also stretch its red rule across the full width. */

@media (max-width: 575.98px) {

  .fsrdp-keyvisual-tagline {

    font-size: 0.9rem;

    letter-spacing: 0.12em;

    padding-left: 0.12em;

  }



  .fsrdp-keyvisual-claim {

    font-size: 0.72rem;

    letter-spacing: 0.06em;

    padding-left: 0.06em;

  }

}



/* ---------- Base white card (downloads, packages, feature cards) ---------- */



.fsrdp-card {

  border: 0;

  border-radius: var(--fsrdp-radius);

  box-shadow: var(--fsrdp-shadow);

  transition: transform 0.15s ease, box-shadow 0.15s ease;

}



.fsrdp-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--fsrdp-shadow-hover);

}



.fsrdp-platform {

  color: var(--fsrdp-blue-600);

  font-weight: 600;

  letter-spacing: 0.02em;

  text-transform: uppercase;

}



/* ---------- Download matrix (compact reference table) ---------- */



.fsrdp-download-matrix {

  background: #fff;

  border: 1px solid var(--fsrdp-line);

  border-radius: var(--fsrdp-radius);

  box-shadow: var(--fsrdp-shadow);

  overflow: hidden;

}



.fsrdp-download-matrix-header {

  background: var(--fsrdp-navy-700);

  color: #fff;

  font-weight: 700;

  padding: 0.6rem 1rem;

}



.fsrdp-download-matrix-table { margin: 0; }



.fsrdp-download-matrix-table th,

.fsrdp-download-matrix-table td {

  padding: 0.5rem 0.85rem;

  text-align: center;

  vertical-align: middle;

  white-space: normal;

}



@media (max-width: 768px) {

  .fsrdp-download-matrix-table th,

  .fsrdp-download-matrix-table td {

    padding: 0.35rem 0.5rem;

    font-size: 0.8rem;

  }

}



@media (max-width: 480px) {

  .fsrdp-download-matrix {

    overflow-x: auto;

  }

  .fsrdp-download-matrix-table th,

  .fsrdp-download-matrix-table td {

    padding: 0.3rem 0.35rem;

    font-size: 0.7rem;

  }

}



.fsrdp-download-matrix-table tr > *:first-child { text-align: left; }

.fsrdp-download-matrix-table thead th { color: var(--fsrdp-ink-soft); font-weight: 600; }

.fsrdp-download-matrix-table tbody th { font-weight: 600; text-align: left; }

.fsrdp-download-matrix-table a { color: var(--fsrdp-navy-700); font-weight: 600; text-decoration: none; }

.fsrdp-download-matrix-table a:hover { text-decoration: underline; }

.fsrdp-download-matrix-table .btn { color: #fff; }



/* ---------- Download boxes (mobile-only replacement for the table above) ----------

   A 5-column table (Downloads/Windows/Linux ARM64/Linux x64/Anleitung) has no

   honest way to fit a portrait phone even scrolled - swapped below 481px for

   three stacked one-platform-each boxes reusing the same card look. */



.fsrdp-download-boxes { display: none; }



@media (max-width: 480px) {

  .fsrdp-download-table-wrap { display: none; }

  .fsrdp-download-boxes { display: block; }

}



.fsrdp-download-box-body { padding: 0.9rem 1.1rem; }



.fsrdp-download-box-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  padding: 0.5rem 0;

  border-bottom: 1px solid var(--fsrdp-line);

}



.fsrdp-download-box-row:last-of-type { border-bottom: 0; }



.fsrdp-download-box-row span {

  font-weight: 600;

  color: var(--fsrdp-ink-soft);

  font-size: 0.85rem;

}



.fsrdp-download-box-row a {

  color: var(--fsrdp-navy-700);

  font-weight: 600;

  font-size: 0.85rem;

  text-decoration: none;

  white-space: nowrap;

}



.fsrdp-download-box-row a:hover { text-decoration: underline; }



.fsrdp-download-box-links {

  display: flex;

  gap: 1.25rem;

  margin-top: 0.75rem;

  padding-top: 0.75rem;

  border-top: 1px solid var(--fsrdp-line);

  font-size: 0.8rem;

}



.fsrdp-download-box-links a {

  color: var(--fsrdp-navy-700);

  font-weight: 600;

  text-decoration: none;

}



.fsrdp-download-box-links a:hover { text-decoration: underline; }



/* ---------- Feature icon strip (Default.aspx "at a glance" row) ---------- */



.fsrdp-feature-strip {

  text-align: center;

  flex-wrap: wrap;

  gap: 0.5rem;

}



/* Replaces the old per-item inline style="flex: 1 1 calc(100% / 10) ..." -

   an inline style has higher specificity than any class selector here and

   silently defeated every breakpoint below (10 items always stayed at their

   inline 10% basis, no matter the media query). Sizing now lives only here.



   Each basis below is calc((100% - (N-1) * gap) / N) for N columns, matching

   the container's gap: 0.5rem exactly - a plain "calc(X% - 4px)" leaves the

   wrong amount of slack once an explicit gap is also reserved between items,

   which is what silently pushed one item too many onto the next line.



   The strip holds 12 items, so every N below is a divisor of 12 (6/4/3/4) and

   no breakpoint ever leaves a half-empty last row. */

.fsrdp-feature-strip-item {

  flex: 1 1 calc((100% - 5 * 0.5rem) / 6);

  min-width: 0;

  padding: 0 5px;

}



.fsrdp-feature-icon {

  color: var(--fsrdp-blue-600);

  font-size: 1.75rem;

  line-height: 1;

  margin-bottom: 0.5rem;

}



.fsrdp-feature-strip .fsrdp-feature-label {

  font-size: 0.85rem;

  color: var(--fsrdp-ink-soft);

  overflow-wrap: break-word;

  hyphens: auto;

}



@media (max-width: 1200px) {

  /* 4 per row -> 3 rows */

  .fsrdp-feature-strip-item {

    flex: 1 1 calc((100% - 3 * 0.5rem) / 4);

  }

}



@media (max-width: 768px) {

  /* 3 per row -> 4 rows */

  .fsrdp-feature-strip-item {

    flex: 1 1 calc((100% - 2 * 0.5rem) / 3);

  }

  .fsrdp-feature-icon { font-size: 1.3rem; }

  .fsrdp-feature-label { font-size: 0.7rem; }

}



@media (max-width: 480px) {

  /* Icon and label shrink again here, so more items fit per row than at 768px:

     4 per row -> exactly 3 rows. */

  .fsrdp-feature-strip-item {

    flex: 1 1 calc((100% - 3 * 0.5rem) / 4);

    padding: 0 2px;

  }

  .fsrdp-feature-icon { font-size: 1rem; margin-bottom: 0.3rem; }

  .fsrdp-feature-label { font-size: 0.6rem; line-height: 1.15; }

}



/* Wide windows: the twelve icons flank the key visual, six on either side, instead of two

   rows underneath it. The strip stays a single list in the markup - display: contents hands

   its items to the .fsrdp-intro grid, which puts the first six into the left column and the

   rest into the right one, spread over the key visual's height. Items hug the picture, so on

   very wide screens they do not drift off to the window edges. The side columns never get

   narrower than the longest label (Sitzungsaufzeichnung); the picture gives way instead. */

@media (min-width: 1200.02px) {

  .fsrdp-intro {

    display: grid;

    grid-template-columns: minmax(10rem, 1fr) minmax(0, 52rem) minmax(10rem, 1fr);

    column-gap: 2rem;

    align-items: center;

    /* The default placement cursor only moves forward, so the right column would start

       in the row where the left one ended. Dense placement fills it from the top. */

    grid-auto-flow: dense;

  }



  .fsrdp-intro > .fsrdp-keyvisual {

    grid-column: 2;

    grid-row: 1 / span 6;

  }



  .fsrdp-intro > .fsrdp-feature-strip {

    display: contents;

  }



  .fsrdp-intro .fsrdp-feature-strip-item {

    width: min(100%, 12rem);

  }



  .fsrdp-intro .fsrdp-feature-strip-item:nth-child(-n + 6) {

    grid-column: 1;

    justify-self: end;

  }



  .fsrdp-intro .fsrdp-feature-strip-item:nth-child(n + 7) {

    grid-column: 3;

    justify-self: start;

  }

}



/* Highlighted strip tile: the browser entry is a real link and deliberately

   pops out of the row (replaces a former inline orange border). Same color

   language as the icon badges - blue, not a foreign accent color. */

.fsrdp-feature-highlight {

  display: block;

  text-decoration: none;

  background: rgba(51, 102, 153, 0.08);

  border: 1px solid var(--fsrdp-blue-600);

  border-radius: var(--fsrdp-radius);

  padding: 0.6rem 0.25rem;

  transition: transform 0.15s ease, box-shadow 0.15s ease;

}



.fsrdp-feature-highlight:hover,

.fsrdp-feature-highlight:focus-visible {

  text-decoration: none;

  transform: translateY(-2px);

  box-shadow: var(--fsrdp-shadow);

}



.fsrdp-feature-highlight .fsrdp-feature-badge {

  display: inline-block;

  margin-top: 0.35rem;

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  color: #fff;

  background: var(--fsrdp-blue-600);

  border-radius: 999px;

  padding: 0.1rem 0.55rem;

}



/* ---------- Neutral note (checklists, prerequisites - not a pitch) ---------- */



.fsrdp-note {

  background: var(--fsrdp-paper);

  border-left: 4px solid var(--fsrdp-blue-600);

  border-radius: 8px;

  padding: 1.5rem;

}



.fsrdp-note h2 { font-size: 1.05rem; }



/* ---------- Section panel (one calm neutral break in an otherwise white page) ---------- */



.fsrdp-panel {

  background: var(--fsrdp-paper);

  border-radius: calc(var(--fsrdp-radius) + 4px);

  padding: 2.25rem;

}



@media (max-width: 768px) {

  .fsrdp-panel {

    padding: 1.5rem;

  }

}



@media (max-width: 480px) {

  .fsrdp-panel {

    padding: 1rem;

  }

}



/* ---------- Feature card: white card, color lives only in the icon badge ---------- */



.fsrdp-feature-card {

  background: #fff;

  border: 1px solid var(--fsrdp-line);

  border-radius: var(--fsrdp-radius);

  box-shadow: var(--fsrdp-shadow);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform 0.15s ease, box-shadow 0.15s ease;

}



.fsrdp-feature-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--fsrdp-shadow-hover);

}



.fsrdp-feature-card-shot {

  display: block;

  width: 100%;

  height: 190px;

  object-fit: cover;

  cursor: zoom-in;

  border: 0;

  padding: 0;

}



@media (max-width: 768px) {

  .fsrdp-feature-card-shot {

    height: 150px;

  }

}



@media (max-width: 480px) {

  .fsrdp-feature-card-shot {

    height: 120px;

  }

}



.fsrdp-feature-card-body {

  padding: 1.5rem;

  display: flex;

  flex-direction: column;

  flex: 1;

}



@media (max-width: 480px) {

  .fsrdp-feature-card-body {

    padding: 1.25rem;

  }

}



.fsrdp-feature-icon-badge {

  width: 2.75rem;

  height: 2.75rem;

  border-radius: 50%;

  background: rgba(51, 102, 153, 0.1);

  color: var(--fsrdp-blue-600);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.2rem;

  margin-bottom: 0.85rem;

  flex: 0 0 auto;

}



.fsrdp-feature-card h2 { font-size: 1.15rem; }



.fsrdp-feature-card .badge {

  background-color: var(--fsrdp-blue-600);

  color: #fff;

  letter-spacing: 0.03em;

}



/* ---------- Contact CTA banner ---------- */



.fsrdp-contact-banner {

  display: flex;

  align-items: center;

  gap: 1.5rem;

  flex-wrap: wrap;

  background: #fff;

  border: 1px solid var(--fsrdp-line);

  border-radius: var(--fsrdp-radius);

  box-shadow: var(--fsrdp-shadow);

  padding: 1.5rem 1.75rem;

}



.fsrdp-contact-banner-icon {

  width: 3.25rem;

  height: 3.25rem;

  border-radius: 50%;

  background: rgba(51, 102, 153, 0.1);

  color: var(--fsrdp-blue-600);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.4rem;

  flex: 0 0 auto;

}



.fsrdp-contact-banner-body { flex: 1 1 260px; }

.fsrdp-contact-banner-body p { margin-bottom: 0.15rem; }



@media (max-width: 640px) {

  .fsrdp-contact-banner {

    flex-direction: column;

    text-align: center;

    gap: 1rem;

    padding: 1.25rem 1.5rem;

  }

  .fsrdp-contact-banner-icon {

    width: 2.75rem;

    height: 2.75rem;

    font-size: 1.2rem;

    margin: 0 auto;

  }

  .fsrdp-contact-banner-body { flex: 1 1 auto; }

  .fsrdp-contact-banner .btn {

    flex: 0 1 auto;

    width: 100%;

  }

}



/* Responsive buttons in general */

.btn {

  white-space: normal;

  word-wrap: break-word;

}



/* Tablet: Buttons noch nebeneinander, aber mit kleinerer Schrift */

@media (max-width: 768px) {

  .btn {

    font-size: 0.9rem;

    padding: 0.5rem 0.85rem;

  }

}



/* Mobile: Stack buttons vertically, smaller font */

@media (max-width: 480px) {

  .btn {

    width: 100%;

    display: block;

    padding: 0.45rem 0.85rem;

    font-size: 0.85rem;

    margin-bottom: 0.75rem;

  }



  /* Stack buttons in flex containers on mobile */

  .d-flex .btn {

    flex: 1 1 100%;

  }



  /* Last button in a card needs space from content below */

  .card-body .btn:last-child {

    margin-bottom: 1rem;

  }



  /* Alert box buttons stack on mobile */

  .alert .btn {

    width: 100%;

    display: block;

    margin-top: 0.75rem;

    margin-bottom: 0.75rem;

  }



  .alert .btn:last-child {

    margin-bottom: 0;

  }



  /* Hide card metadata on mobile (version numbers, small text) */

  .card-text.text-muted.small {

    display: none;

  }



  /* Reduce card title size on mobile */

  .card-title {

    font-size: 1rem !important;

  }



  /* Compact card text descriptions on mobile */

  .card-text {

    font-size: 0.9rem;

    line-height: 1.4;

  }

}



/* ---------- Numbered install steps (Server.aspx, InstallingOnLinux.aspx) ---------- */



.fsrdp-step {

  display: flex;

  gap: 1rem;

  margin-bottom: 1.75rem;

}



.fsrdp-step-number {

  flex: 0 0 auto;

  width: 2.5rem;

  height: 2.5rem;

  border-radius: 50%;

  background: var(--fsrdp-blue-600);

  color: #fff;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

}



.fsrdp-step-body h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }



.fsrdp-platform-heading {

  display: flex;

  align-items: center;

  gap: 0.6rem;

  margin-bottom: 1.25rem;

}



.fsrdp-platform-heading i { color: var(--fsrdp-blue-600); }



/* ---------- Clickable screenshot (inline figures) ---------- */



.fsrdp-shot {

  width: 100%;

  border: 0;

  padding: 0;

  border-radius: var(--fsrdp-radius);

  box-shadow: var(--fsrdp-shadow);

  display: block;

  cursor: zoom-in;

  transition: box-shadow 0.15s ease;

}



.fsrdp-shot:hover,

.fsrdp-shot:focus-visible {

  box-shadow: var(--fsrdp-shadow-hover);

}



.fsrdp-shot-caption {

  margin-top: 0.6rem;

  font-size: 0.85rem;

  color: var(--fsrdp-ink-soft);

  text-align: center;

}



/* ---------- Lightbox (Bootstrap modal, custom image-viewing chrome) ---------- */



/* Fullscreen lightbox (see the modal-fullscreen dialog in Default.aspx): the body is the

   whole window minus the close row, and the picture takes whatever is left over after its

   caption - min-height:0 is what allows the flex child to actually shrink instead of

   overflowing. */

#fsrdpLightbox .modal-content { background: var(--fsrdp-navy-950); border: 0; }

#fsrdpLightbox .modal-body {

  position: relative;

  padding: 1.5rem;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 0;

}



#fsrdpLightbox figure {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  max-height: 100%;

  min-height: 0;

}



#fsrdpLightbox img {

  max-width: 100%;

  min-height: 0;

  flex: 0 1 auto;

  object-fit: contain;

  border-radius: 8px;

  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);

}

#fsrdpLightbox figcaption { color: #e7edf8; margin-top: 0.85rem; font-size: 0.95rem; }

#fsrdpLightbox .btn-close { filter: invert(1) grayscale(1) brightness(2); }



.fsrdp-lightbox-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 3rem;

  height: 3rem;

  border-radius: 50%;

  border: 0;

  background: rgba(255, 255, 255, 0.12);

  color: #fff;

  font-size: 1.4rem;

  line-height: 1;

}



.fsrdp-lightbox-arrow:hover { background: rgba(255, 255, 255, 0.22); }

.fsrdp-lightbox-arrow.prev { left: 0.75rem; }

.fsrdp-lightbox-arrow.next { right: 0.75rem; }



@media (max-width: 768px) {

  .fsrdp-note {

    padding: 1.25rem;

  }

  .fsrdp-note h2 { font-size: 0.95rem; }

}



@media (max-width: 640px) {

  .fsrdp-lightbox-arrow { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }

}



/* Mobile-optimized hero section */

@media (max-width: 768px) {

  .fsrdp-hero {

    padding: 1.5rem;

  }

  .fsrdp-hero h1 { font-size: 1.5rem !important; }

  .fsrdp-hero .lead { font-size: 0.95rem; }

}



/* ---------- Product comparison grid (Produktvergleich.aspx) ----------

   11 products x 15 features does not fit any screen, so the grid scrolls

   horizontally inside its own container (never the page body) with the

   feature column and the header row pinned. Deliberately no Bootstrap

   .table-striped: its inset box-shadow paints over the opaque background

   the sticky column needs, which would let scrolled cells bleed through. */



.fsrdp-compare {

  background: #fff;

  border: 1px solid var(--fsrdp-line);

  border-radius: var(--fsrdp-radius);

  box-shadow: var(--fsrdp-shadow);

  overflow: hidden;

}



.fsrdp-compare-scroll {

  overflow: auto;

  max-height: 75vh;

  -webkit-overflow-scrolling: touch;

}



.fsrdp-compare-table {

  margin: 0;

  min-width: 1400px;

  font-size: 0.85rem;

  border-collapse: separate;

  border-spacing: 0;

}



/* FSRdp next to a single competitor: three columns fit most screens as they are. */

.fsrdp-compare-table.fsrdp-compare-table-compact {

  min-width: 0;

}



.fsrdp-compare-table th,

.fsrdp-compare-table td {

  padding: 0.6rem 0.7rem;

  vertical-align: top;

  text-align: center;

  border-bottom: 1px solid var(--fsrdp-line);

  background: #fff;

}



/* Column headings: pinned to the top while scrolling vertically. This only
   sticks because .fsrdp-compare-scroll scrolls both axes itself (overflow:
   auto + max-height) - sticky positions relative to that nearest scrolling
   ancestor, not the page. */

.fsrdp-compare-table thead th {

  position: sticky;

  top: 0;

  z-index: 3;

  background: var(--fsrdp-navy-700);

  color: #fff;

  font-weight: 600;

  vertical-align: middle;

  border-bottom: 0;

}



.fsrdp-compare-table thead th.is-own {

  background: var(--fsrdp-blue-600);

}



/* Feature column: pinned to the left while scrolling sideways. */

.fsrdp-compare-feature {

  position: sticky;

  left: 0;

  z-index: 2;

  width: 15rem;

  min-width: 15rem;

  text-align: left;

  font-weight: 600;

  color: var(--fsrdp-navy-950);

  box-shadow: 1px 0 0 var(--fsrdp-line);

}



.fsrdp-compare-table thead .fsrdp-compare-feature {

  /* Corner cell: sticky on both axes at once, so it needs to sit above
     both the plain sticky header cells (z-index 3) and the sticky first
     column in the body (z-index 2). */

  z-index: 4;

  color: #fff;

  box-shadow: none;

}



.fsrdp-compare-hint {

  display: block;

  margin-top: 0.15rem;

  font-size: 0.75rem;

  font-weight: 400;

  color: var(--fsrdp-ink-soft);

}



/* Own column: the reference point of the whole page, marked by a tint

   rather than by a louder color language than the rest of the section. */

.fsrdp-compare-table tbody td.is-own {

  background: rgba(51, 102, 153, 0.07);

  font-weight: 600;

}



.fsrdp-compare-table tbody tr:not(.fsrdp-compare-group):hover td,

.fsrdp-compare-table tbody tr:not(.fsrdp-compare-group):hover th {

  background: var(--fsrdp-paper);

}



.fsrdp-compare-table tbody tr:hover td.is-own {

  background: rgba(51, 102, 153, 0.12);

}



/* Section heading row. The cell spans the full table width, so the label

   itself is stuck to the left edge - otherwise it would scroll out of sight

   together with the products. */

.fsrdp-compare-group th {

  background: var(--fsrdp-navy-950);

  color: #fff;

  text-align: left;

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  padding: 0.4rem 0.7rem;

}



.fsrdp-compare-group th span {

  position: sticky;

  left: 0.7rem;

  display: inline-block;

}



.fsrdp-compare-yes i { color: #1f7a45; }

.fsrdp-compare-no i { color: #c62828; }

.fsrdp-compare-limited i { color: #b06a00; }



.fsrdp-compare-table td i { font-size: 1.05rem; }



.fsrdp-compare-no { color: var(--fsrdp-ink-soft); }



.fsrdp-compare-note {

  display: block;

  margin-top: 0.2rem;

  font-size: 0.75rem;

  font-weight: 400;

  line-height: 1.25;

  color: var(--fsrdp-ink-soft);

}



.fsrdp-compare-fact {

  font-size: 0.8rem;

  color: var(--fsrdp-navy-950);

}



.fsrdp-compare-fact .fsrdp-compare-note {

  margin-top: 0;

  font-size: 0.8rem;

  color: inherit;

}



/* ---------- Legend above the grid ---------- */



.fsrdp-compare-legend {

  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem 1.5rem;

  font-size: 0.85rem;

  color: var(--fsrdp-ink-soft);

}



.fsrdp-legend-yes { color: #1f7a45; }

.fsrdp-legend-no { color: #c62828; }

.fsrdp-legend-limited { color: #b06a00; }



/* The scroll hint is only true where the grid actually scrolls - on a wide

   desktop it would point at something that is not happening. */

.fsrdp-compare-scrollhint { display: none; }



@media (max-width: 1500px) {

  .fsrdp-compare-scrollhint {

    display: inline;

    margin-left: auto;

    color: var(--fsrdp-blue-600);

    font-weight: 600;

  }

}



@media (max-width: 768px) {

  .fsrdp-compare-table {

    font-size: 0.8rem;

  }

  .fsrdp-compare-table th,

  .fsrdp-compare-table td {

    padding: 0.45rem 0.5rem;

  }

  .fsrdp-compare-feature {

    width: 10rem;

    min-width: 10rem;

  }

  .fsrdp-compare-legend {

    font-size: 0.78rem;

    gap: 0.3rem 1rem;

  }

}



@media (max-width: 480px) {

  .fsrdp-compare-table {

    min-width: 1100px;

    font-size: 0.72rem;

  }

  .fsrdp-compare-feature {

    width: 8.5rem;

    min-width: 8.5rem;

  }

  .fsrdp-compare-note,

  .fsrdp-compare-hint {

    font-size: 0.66rem;

  }

  .fsrdp-compare-scrollhint {

    margin-left: 0;

  }

}



/* ---------- Ready-made prompt for an AI assistant (InstallingServerLinux.aspx) ----------

   A <pre> would scroll the long first line out of sight; the point of the box is

   that the whole prompt can be read and copied in one go. */



.fsrdp-ai-prompt {

  white-space: pre-wrap;

  overflow-wrap: anywhere;

  background: #fff;

  border: 1px solid var(--fsrdp-line);

  border-radius: 8px;

  padding: 0.75rem 0.9rem;

  font-size: 0.8rem;

  line-height: 1.4;

}



/* ---------- Topology page (FSRdpTopologie.aspx) ---------- */



/* The three ports as a strip above the four cases: the whole page turns on which of

   them a firewall lets through, so they are named once before the first diagram. */

.fsrdp-topo-ports {

  display: grid;

  gap: 0.75rem;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

}



.fsrdp-topo-port {

  background: var(--fsrdp-paper);

  border: 1px solid var(--fsrdp-line);

  border-radius: 8px;

  padding: 0.7rem 0.9rem;

  display: flex;

  align-items: baseline;

  gap: 0.6rem;

}



.fsrdp-topo-port-num {

  color: var(--fsrdp-blue-600);

  font-weight: 700;

  font-variant-numeric: tabular-nums;

}



.fsrdp-topo-port-text {

  color: var(--fsrdp-ink-soft);

  font-size: 0.9rem;

  line-height: 1.35;

}



.fsrdp-topo-case {

  margin-bottom: 3rem;

}



.fsrdp-topo-head {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  margin-bottom: 0.75rem;

}



.fsrdp-topo-badge {

  background: var(--fsrdp-navy-700);

  border-radius: 999px;

  color: #fff;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  padding: 0.2rem 0.7rem;

  text-transform: uppercase;

  white-space: nowrap;

}



.fsrdp-topo-figure {

  background: #fff;

  border: 1px solid var(--fsrdp-line);

  border-radius: var(--fsrdp-radius);

  box-shadow: var(--fsrdp-shadow);

  margin: 0 0 1rem;

  padding: 1.25rem;

}



/* The drawing keeps a minimum width and scrolls inside its own box rather than

   shrinking its labels into illegibility on a phone. */

.fsrdp-topo-canvas { overflow-x: auto; }



.fsrdp-topo-svg {

  display: block;

  width: 100%;

  min-width: 620px;

  height: auto;

}



.fsrdp-topo-figure figcaption {

  color: var(--fsrdp-ink-soft);

  font-size: 0.88rem;

  margin-top: 0.9rem;

}



/* ---- Diagram vocabulary. Same shapes in all four pictures, so the reader learns

   them once: green frame = your network, navy box = the server, white card = a

   participant, red band = the firewall, and a gap in that band = an opening. ---- */



.fsrdp-topo-lan {

  fill: #f1f8f2;

  stroke: #2f9e5c;

  stroke-width: 1.5;

}



.fsrdp-topo-server {

  fill: var(--fsrdp-navy-700);

  stroke: var(--fsrdp-navy-950);

  stroke-width: 1.5;

}



.fsrdp-topo-client {

  fill: #fff;

  stroke: var(--fsrdp-blue-600);

  stroke-width: 1.5;

}



.fsrdp-topo-vpn {

  fill: #fff;

  stroke: #2f9e5c;

  stroke-width: 1.5;

}



.fsrdp-topo-wall {

  fill: #fdecec;

  stroke: #c0392b;

  stroke-width: 1.5;

}



.fsrdp-topo-wall-closed {

  fill: #f7d9d6;

}



/* An opening is drawn as page-coloured, so the wall really has a hole in it. */

.fsrdp-topo-gap { fill: #fff; }



.fsrdp-topo-void {

  fill: #f7f8fa;

  stroke: var(--fsrdp-line);

  stroke-width: 1.5;

  stroke-dasharray: 6 5;

}



.fsrdp-topo-title {

  fill: var(--fsrdp-navy-950);

  font-size: 15px;

  font-weight: 600;

}



/* Text that sits inside the navy server box. A modifier class rather than a sibling

   selector: which text lands on the dark box is a decision of the drawing, not

   something a reader of the stylesheet should have to reconstruct from element order. */

.fsrdp-topo-on-navy { fill: #fff; }

.fsrdp-topo-sub.fsrdp-topo-on-navy { fill: #cddbe9; }



.fsrdp-topo-sub {

  fill: var(--fsrdp-ink-soft);

  font-size: 11.5px;

}



.fsrdp-topo-port-line {

  fill: #fff;

  font-size: 13px;

  font-weight: 600;

  font-variant-numeric: tabular-nums;

}



/* A port that is reachable from the internet is called out, not just listed. */

.fsrdp-topo-port-open { fill: #ffd9a0; }



.fsrdp-topo-zone {

  fill: var(--fsrdp-ink-soft);

  font-size: 12px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.fsrdp-topo-edge {

  fill: var(--fsrdp-navy-950);

  font-size: 12px;

  font-variant-numeric: tabular-nums;

}



.fsrdp-topo-edge-open { fill: #b9581c; }



.fsrdp-topo-wall-text {

  fill: #c0392b;

  font-size: 12px;

  letter-spacing: 0.1em;

}



.fsrdp-topo-void-text {

  fill: var(--fsrdp-ink-soft);

  font-size: 14px;

  font-weight: 600;

}



.fsrdp-topo-void-sub {

  fill: #8a939e;

  font-size: 11.5px;

}



.fsrdp-topo-flow {

  fill: none;

  stroke: var(--fsrdp-navy-700);

  stroke-width: 2;

}



.fsrdp-topo-flow-dashed {

  fill: none;

  stroke: var(--fsrdp-navy-700);

  stroke-width: 2;

  stroke-dasharray: 7 5;

}



.fsrdp-topo-arrowhead { fill: var(--fsrdp-navy-700); }



/* ---- Facts under each diagram: term and answer, two columns on wide screens ---- */



.fsrdp-topo-facts {

  background: var(--fsrdp-paper);

  border-radius: var(--fsrdp-radius);

  display: grid;

  gap: 0.85rem 2rem;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  margin: 0;

  padding: 1.25rem 1.5rem;

}



.fsrdp-topo-facts dt {

  color: var(--fsrdp-blue-600);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}



.fsrdp-topo-facts dd {

  color: var(--fsrdp-ink-soft);

  font-size: 0.92rem;

  line-height: 1.45;

  margin: 0.15rem 0 0;

}



.fsrdp-topo-facts code {

  background: #fff;

  border: 1px solid var(--fsrdp-line);

  border-radius: 4px;

  color: var(--fsrdp-navy-700);

  font-size: 0.85em;

  padding: 0.05rem 0.3rem;

}



/* ---- Summary table ---- */



.fsrdp-topo-table-scroll {

  border: 1px solid var(--fsrdp-line);

  border-radius: var(--fsrdp-radius);

  box-shadow: var(--fsrdp-shadow);

  overflow-x: auto;

}



.fsrdp-topo-table {

  margin: 0;

  min-width: 640px;

}



.fsrdp-topo-table thead th {

  background: var(--fsrdp-navy-700);

  color: #fff;

  font-size: 0.9rem;

  text-align: center;

  vertical-align: bottom;

  white-space: nowrap;

}



.fsrdp-topo-table thead th span {

  display: block;

  font-size: 0.75rem;

  font-weight: 400;

  opacity: 0.85;

}



.fsrdp-topo-table tbody th {

  font-size: 0.9rem;

  font-weight: 600;

  white-space: nowrap;

}



.fsrdp-topo-table tbody td {

  color: var(--fsrdp-ink-soft);

  font-size: 0.9rem;

  text-align: center;

  vertical-align: middle;

}



.fsrdp-topo-table .is-yes { color: #2f9e5c; font-size: 1.05rem; }

.fsrdp-topo-table .is-no { color: #c0392b; font-size: 1.05rem; }



/* The optional half of case 2 (browser access): dashed instead of solid, so the reader

   sees at a glance which part of the picture the case works without. */

.fsrdp-topo-optional {

  stroke-dasharray: 7 5;

}



.fsrdp-topo-gap-optional {

  stroke: #d98324;

  stroke-width: 1.5;

  stroke-dasharray: 5 4;

}



/* The one section that is not about a firewall opening but about data leaving the

   network - amber instead of navy, so it reads as a caveat and not as a fourth case. */

.fsrdp-topo-badge-warn {

  background: #b9581c;

}



/* ---------- Wegweiser-Kästchen (Default.aspx) ---------- */



/* Same white-card language as .fsrdp-card, but built for a short question plus one link:

   the link sits at the bottom edge of every card (margin-top:auto), so three cards of

   different text length still line their links up. */

.fsrdp-pointer-card {

  background: #fff;

  border: 1px solid var(--fsrdp-line);

  border-radius: var(--fsrdp-radius);

  box-shadow: var(--fsrdp-shadow);

  padding: 1.5rem;

  display: flex;

  flex-direction: column;

  transition: transform 0.15s ease, box-shadow 0.15s ease;

}



.fsrdp-pointer-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--fsrdp-shadow-hover);

}



.fsrdp-pointer-card p {

  color: var(--fsrdp-ink-soft);

  margin-bottom: 1rem;

}



.fsrdp-pointer-link {

  margin-top: auto;

  color: var(--fsrdp-blue-600);

  font-weight: 600;

  text-decoration: none;

}



.fsrdp-pointer-link:hover,

.fsrdp-pointer-link:focus-visible {

  text-decoration: underline;

}



/* The chevron nudges forward on hover - the one bit of motion these cards get. */

.fsrdp-pointer-link .fa {

  margin-left: 0.35rem;

  transition: transform 0.15s ease;

  display: inline-block;

}



.fsrdp-pointer-card:hover .fsrdp-pointer-link .fa {

  transform: translateX(3px);

}



@media (max-width: 480px) {

  .fsrdp-pointer-card {

    padding: 1.25rem;

  }

}



/* ---------- Order call to action ----------

   The navy band of .fsrdp-hero, but as a standalone strip that can sit in the

   middle of a page: price on the left, one white button on the right. Used on

   the FsRdp landing page and on Lizenz.aspx so the way to Order.aspx looks the

   same wherever a visitor meets it. */



.fsrdp-order-cta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.5rem;

  flex-wrap: wrap;

  background: linear-gradient(135deg, var(--fsrdp-navy-950), var(--fsrdp-navy-700));

  border-radius: var(--fsrdp-radius);

  box-shadow: var(--fsrdp-shadow);

  color: #fff;

  padding: 1.5rem 1.75rem;

}



.fsrdp-order-cta-body { flex: 1 1 300px; }



.fsrdp-order-cta-title {

  font-size: 1.25rem;

  font-weight: 600;

  margin-bottom: 0.25rem;

}



.fsrdp-order-cta-price {

  font-size: 1.05rem;

  margin-bottom: 0;

}



.fsrdp-order-cta-price strong { white-space: nowrap; }



.fsrdp-order-cta-note {

  color: rgba(255, 255, 255, 0.75);

  font-size: 0.875rem;

  margin: 0.35rem 0 0;

}



.fsrdp-order-cta .btn {

  background: #fff;

  border: 0;

  color: var(--fsrdp-navy-700);

  flex: 0 0 auto;

  font-weight: 600;

  padding: 0.7rem 1.6rem;

}



.fsrdp-order-cta .btn:hover,

.fsrdp-order-cta .btn:focus {

  background: #eaf1fa;

  color: var(--fsrdp-navy-950);

}



@media (max-width: 640px) {

  .fsrdp-order-cta {

    flex-direction: column;

    text-align: center;

    padding: 1.25rem 1.5rem;

  }



  .fsrdp-order-cta .btn { width: 100%; }

}



/* Product landing page. Scoped to Default.aspx; shared documentation is unchanged. */

body:has(.fsrdp-landing) { background: #fbfcfe; }

body:has(.fsrdp-landing) #features { padding: 0 24px !important; }

.fsrdp-landing { --fl-ink: #142638; --fl-muted: #526473; --fl-green: #127454; --fl-line: #dbe4e8; max-width: 1240px; margin: 0 auto; color: var(--fl-ink); font-size: 1.125rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; }

.fsrdp-landing *, .fsrdp-landing *::before, .fsrdp-landing *::after { box-sizing: border-box; }

.fsrdp-landing [id] { scroll-margin-top: 28px; }

.fsrdp-landing a { text-underline-offset: 4px; }

.fsrdp-landing a:focus-visible, .fsrdp-landing button:focus-visible, .fsrdp-landing summary:focus-visible { outline: 3px solid #127454; outline-offset: 5px; }

.fsrdp-landing h1, .fsrdp-landing h2, .fsrdp-landing h3 { color: var(--fl-ink); font-weight: 700; line-height: 1.15; letter-spacing: -.035em; }

.fsrdp-landing h2 { font-size: clamp(1.9rem, 3.1vw, 2.75rem); margin: 0 0 22px; }

.fsrdp-landing h3 { font-size: 1.3rem; margin: 0 0 14px; letter-spacing: -.02em; }

.fsrdp-landing p { color: var(--fl-muted); margin: 0 0 20px; }

.fsrdp-landing .fl-eyebrow { font-size: 1rem; font-weight: 700; letter-spacing: .13em; color: var(--fl-green); margin-bottom: 20px; }

.fl-nav { display: flex; align-items: center; gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--fl-line); }

.fl-wordmark { font-size: 1.6rem; font-weight: 800; color: var(--fl-ink); letter-spacing: -.05em; text-decoration: none; white-space: nowrap; }

.fl-wordmark span { display: block; font-size: 1rem; font-weight: 500; letter-spacing: .02em; color: var(--fl-muted); }

/* The image is stored at 3x for sharp rendering on high-DPI screens. */
.fl-wordmark .fl-flag { display: inline-block; width: auto; height: 1.3em; margin-left: .15em; vertical-align: -.3em; }

.fl-nav-links { display: flex; gap: 28px; margin-left: auto; }

.fl-nav-links a { font-size: 1rem; color: var(--fl-muted); text-decoration: none; font-weight: 600; }

.fl-nav-links a:hover { color: var(--fl-green); }

.fsrdp-landing .fl-button { display: inline-flex; justify-content: center; align-items: center; gap: 22px; padding: 15px 24px; background: var(--fl-green); border: 1px solid var(--fl-green); border-radius: 7px; color: white; font-size: 1rem; font-weight: 650; line-height: 1.4; text-decoration: none; transition: background .15s; }

.fsrdp-landing .fl-button:hover { background: #0c5b40; border-color: #0c5b40; color: white; }

.fsrdp-landing .fl-button-small { font-size: 1rem; padding: 11px 17px; }

.fl-hero { display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: 42px; padding: 88px 0 72px; }

.fsrdp-landing h1 { font-size: clamp(2.8rem, 4.5vw, 4.25rem); letter-spacing: -.05em; line-height: 1.06; margin: 0 0 26px; }

.fsrdp-landing h1 span { color: var(--fl-green); }

.fl-dot { display: inline-block; width: 7px; height: 7px; background: var(--fl-green); border-radius: 50%; margin-right: 8px; }

.fsrdp-landing .fl-lead { font-size: 1.25rem; max-width: 530px; line-height: 1.75; }

.fl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 29px; }

.fsrdp-landing .fl-text-link { color: var(--fl-green); font-size: 1rem; font-weight: 650; text-decoration: none; }

.fsrdp-landing .fl-text-link:hover { text-decoration: underline; }

.fsrdp-landing .fl-micro { margin-top: 17px; margin-bottom: 0; font-size: 1rem; line-height: 1.65; }

.fl-hero-visual { margin: 0; border: 1px solid #d1dce2; border-radius: 13px; background: white; overflow: hidden; box-shadow: 0 24px 70px -24px #254d6745; transform: rotate(-1deg); }

.fl-window-bar { display: flex; align-items: center; gap: 15px; padding: 12px 14px; color: #5f7281; background: #eef3f6; font-size: 1rem; }

.fl-window-dots { color: #a8b9c4; font-size: 1rem; letter-spacing: 2px; }

.fl-live { margin-left: auto; }

.fsrdp-landing-shot { display: block; border: 0; width: 100%; padding: 0; background: #142638; cursor: zoom-in; }

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

.fl-hero-visual figcaption { padding: 19px 22px; position: relative; }

.fl-hero-visual figcaption strong { display: block; font-size: 1rem; padding-right: 20px; }

.fl-hero-visual figcaption > span:not(.fl-zoom) { font-size: 1rem; color: var(--fl-muted); }

.fl-zoom { position: absolute; right: 22px; top: 20px; font-size: 1.3rem; color: var(--fl-green); }

.fl-facts { display: grid; grid-template-columns: repeat(3, 1fr); padding: 26px 0; border-top: 1px solid var(--fl-line); border-bottom: 1px solid var(--fl-line); }

.fl-facts > div { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 0 20px; }

.fl-facts > div + div { border-left: 1px solid var(--fl-line); }

.fl-facts i { font-size: 1.3rem; color: var(--fl-green); }

.fsrdp-landing .fl-facts p { margin: 0; font-size: 1rem; }

.fl-facts strong, .fl-facts span { display: block; }

.fl-facts strong { color: var(--fl-ink); font-size: 1rem; }

.fl-section { padding: 80px 0; }

.fl-section-heading { max-width: 760px; margin-bottom: 38px; }

.fl-benefit-grid, .fl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }

.fl-benefit-grid article { padding: 0 25px 0 0; }

.fl-benefit-grid p { font-size: 1.125rem; margin-bottom: 0; }

.fl-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: #e6f2ec; border-radius: 10px; color: var(--fl-green); margin-bottom: 23px; font-size: 1.1rem; }

.fl-product, .fl-browser { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 65px; border-top: 1px solid var(--fl-line); }

.fl-product-shot { margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 45px -22px #254d6766; border: 1px solid var(--fl-line); }

.fl-browser { grid-template-columns: 1.15fr 1fr; }

.fl-checks { list-style: none; padding: 0; margin: 25px 0; }

.fl-checks li { padding: 0 0 12px 25px; position: relative; font-size: 1.125rem; }

.fl-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--fl-green); font-weight: 700; }

.fl-setup { border-top: 1px solid var(--fl-line); }

.fl-steps article { display: flex; flex-direction: column; align-items: flex-start; }

.fl-step-number { font-size: 2.8rem; line-height: 1; letter-spacing: -.06em; color: #9aada6; margin-bottom: 22px; font-weight: 300; }

.fl-steps p { font-size: 1.125rem; }

.fl-steps a { margin-top: auto; }

.fl-pricing { display: grid; grid-template-columns: 1.2fr 1fr; gap: 90px; align-items: center; padding: 60px; background: #142e2b; border-radius: 16px; }

.fsrdp-landing .fl-pricing h2 { color: white; }

.fsrdp-landing .fl-pricing > div:first-child > p, .fl-pricing .fl-checks { color: #cedfd8; }

.fsrdp-landing .fl-pricing .fl-eyebrow, .fsrdp-landing .fl-pricing .fl-text-link, .fl-pricing .fl-checks li::before { color: #9be2b7; }

.fl-price-card { background: white; border-radius: 10px; padding: 34px; text-align: center; }

.fsrdp-landing .fl-price-card .fl-price-amount { font-size: 5rem; color: var(--fl-ink); line-height: 1; font-weight: 700; letter-spacing: -.06em; margin-bottom: 12px; }

.fsrdp-landing .fl-price-unit { font-size: 1rem; color: var(--fl-ink); margin-bottom: 12px; }

.fsrdp-landing .fl-price-terms { font-size: 1rem; margin-bottom: 24px; }

.fl-price-card .fl-button { width: 100%; }

.fl-price-trial { display: block; margin-top: 15px; font-size: 1rem; color: var(--fl-green); font-weight: 600; }

.fl-trust { display: grid; grid-template-columns: 180px 1fr; max-width: 940px; gap: 55px; margin: 20px auto 0; align-items: center; }

.fl-monogram { background: #eaf0f4; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; color: #31506b; font-size: 3.2rem; font-weight: 700; letter-spacing: -.06em; }

.fl-monogram span { font-size: .65rem; line-height: 1.6; letter-spacing: .16em; text-align: center; }

.fl-trust h2 { font-size: 2rem; }

.fl-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; border-top: 1px solid var(--fl-line); }

.fl-faq details { border-bottom: 1px solid var(--fl-line); }

.fl-faq summary { cursor: pointer; font-weight: 650; padding: 22px 25px 22px 0; list-style: none; position: relative; line-height: 1.45; }

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

.fl-faq summary::after { content: "+"; position: absolute; right: 0; top: 18px; color: var(--fl-green); font-size: 1.35rem; }

.fl-faq details[open] summary::after { content: "−"; }

.fl-faq details p { font-size: 1.125rem; padding-right: 20px; }

.fl-faq details a { color: var(--fl-green); }

.fl-start { background: #eaf3ee; text-align: center; border: 1px solid #d6e7dc; border-radius: 15px; padding: 58px 24px; }

.fl-start h2 { font-size: clamp(2rem, 3.5vw, 3rem); }

.fl-downloads { padding: 55px 0 75px; }

.fl-downloads h2 { font-size: 1.6rem; }

.fl-downloads > p { font-size: 1.125rem; }

.fl-downloads .fsrdp-download-matrix { box-shadow: none; }

@media (min-width: 1440px) { .fl-hero { gap: 60px; } }

@media (max-width: 1000px) { .fl-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 55px; } .fl-hero-copy { max-width: 740px; } .fsrdp-landing h1 { font-size: clamp(2.8rem, 6.5vw, 4.1rem); } .fl-hero-visual { max-width: 740px; transform: none; } .fl-pricing { gap: 35px; padding: 40px; } .fl-product, .fl-browser { gap: 32px; } .fl-nav { gap: 20px; } .fl-nav-links { gap: 18px; } }

@media (max-width: 760px) { body:has(.fsrdp-landing) #features { padding: 0 20px !important; } .fl-nav { flex-wrap: wrap; gap: 15px; padding: 20px 0; } .fl-nav > .fl-button { margin-left: auto; } .fl-nav-links { order: 3; flex-basis: 100%; margin: 0; gap: 25px; } .fl-section { padding: 50px 0; } .fl-facts { gap: 20px; grid-template-columns: 1fr; } .fl-facts > div { justify-content: flex-start; padding: 0; } .fl-facts > div + div { border-left: none; } .fl-facts i { width: 25px; text-align: center; } .fl-benefit-grid, .fl-steps { grid-template-columns: 1fr; gap: 32px; } .fl-benefit-grid article { padding: 0; } .fl-icon { margin-bottom: 16px; } .fl-product, .fl-browser, .fl-pricing, .fl-faq { grid-template-columns: 1fr; gap: 30px; } .fl-browser > figure { order: 2; } .fl-pricing { padding: 35px 24px; } .fl-price-card { padding: 27px; } .fl-trust { grid-template-columns: 1fr; gap: 25px; } .fl-monogram { width: 110px; font-size: 2.4rem; } .fl-monogram span { font-size: .65rem; } .fl-start { padding: 45px 24px; } .fl-step-number { font-size: 2.2rem; margin-bottom: 15px; } .fl-hero { padding: 45px 0; } .fl-faq { gap: 5px; } }

@media (max-width: 400px) { body:has(.fsrdp-landing) #features { padding: 0 16px !important; } .fsrdp-landing h1 { font-size: 2.65rem; } .fl-wordmark span { display: none; } .fl-wordmark { font-size: 1.4rem; } .fsrdp-landing .fl-button-small { font-size: 1rem; padding: 10px 12px; } .fl-window-bar { gap: 7px; padding: 10px; font-size: 1rem; } .fl-window-dots { display: none; } .fl-hero-visual figcaption { padding: 15px; } .fl-zoom { right: 12px; } .fl-pricing { padding: 26px 18px; } .fl-price-card { padding: 24px 18px; } }

@media (prefers-reduced-motion: reduce) { .fsrdp-landing * { transition: none !important; } }



/* Original FSRdp brand artwork, shown in full at every viewport width. */

.fsrdp-landing .fl-brand-visual { max-width: 1040px; margin: 55px auto 0; }

.fl-brand-visual a { display: block; border-radius: 12px; overflow: hidden; background: #fff; cursor: zoom-in; }

.fl-brand-visual img { display: block; width: 100%; height: auto; }

.fl-brand-visual figcaption { margin-top: 15px; text-align: center; font-size: 1rem; color: var(--fl-muted); }

@media (max-width: 760px) { .fsrdp-landing .fl-brand-visual { margin-top: 32px; } .fl-brand-visual figcaption { font-size: 1rem; } }


/* Give larger labels space to wrap, including at narrow mobile widths. */
.fl-window-bar { flex-wrap: wrap; }
.fl-nav-links { flex-wrap: wrap; }
.fl-wordmark span { white-space: normal; max-width: 15rem; }
.fsrdp-landing .fl-downloads .fsrdp-download-matrix-table,
.fsrdp-landing .fl-downloads .fsrdp-download-box-body,
.fsrdp-landing .fl-downloads .fsrdp-download-box-row,
.fsrdp-landing .fl-downloads .fsrdp-download-box-links,
.fsrdp-landing .fl-downloads .btn { font-size: 1rem; }
@media (max-width: 1000px) {
  .fl-nav { flex-wrap: wrap; }
  .fl-nav > .fl-button { margin-left: auto; }
  .fl-nav-links { order: 3; flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 400px) {
  .fl-nav > .fl-button { flex-basis: 100%; }
  .fl-nav-links { gap: 12px 20px; }
  .fl-window-bar .fl-live { margin-left: 0; }
  .fsrdp-landing .fl-button { gap: 12px; padding-left: 18px; padding-right: 18px; }
}

/* Thirteen product features in a U around the widescreen artwork (left, right, underneath). */
.fl-brand-showcase { display: grid; grid-template-columns: 180px minmax(0, 1fr) 180px; grid-template-areas: "left visual right" ". bottom ."; align-items: center; gap: 24px; margin-top: 55px; }
.fsrdp-landing .fl-brand-showcase .fl-brand-visual { grid-area: visual; margin: 0; max-width: none; min-width: 0; }
.fl-brand-showcase .fl-brand-features-left { grid-area: left; }
.fl-brand-showcase .fl-brand-features-right { grid-area: right; }
.fl-brand-showcase .fl-brand-features-bottom { grid-area: bottom; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fl-brand-features { display: grid; grid-template-columns: 1fr; gap: 8px; list-style: none; margin: 0; padding: 0; text-align: center; }
.fl-brand-features li { min-width: 0; padding: 10px 6px; border-radius: 10px; font-size: 1rem; line-height: 1.4; color: var(--fl-ink); overflow-wrap: anywhere; hyphens: auto; }
.fl-brand-features a { color: var(--fl-green); text-decoration: none; display: block; border-radius: 6px; }
.fl-brand-features a:hover { text-decoration: underline; }
.fl-brand-icon { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; margin-bottom: 7px; color: var(--fl-green); font-size: 1.65rem; }
/* One feature at a time is briefly highlighted (fsrdp-site.js picks it at random):
   a soft background and green label fade in, the icon grows and glows. */
.fl-brand-features li.is-highlighted { animation: fl-brand-item-glow 1s ease-in-out; }
.fl-brand-features li.is-highlighted i { animation: fl-brand-icon-pulse 1s ease-in-out; }
@keyframes fl-brand-item-glow {
  0%, 100% { background-color: transparent; color: var(--fl-ink); }
  35%, 65% { background-color: #e6f2ec; color: var(--fl-green); }
}
@keyframes fl-brand-icon-pulse {
  0%, 100% { transform: none; color: var(--fl-green); text-shadow: none; }
  35%, 65% { transform: scale(1.22); color: #19a174; text-shadow: 0 0 14px #19a17488; }
}
/* Narrow: artwork on top, then all thirteen features in one centred, wrapping grid (the lists
   dissolve via display: contents so an odd last row stays centred instead of hanging left). */
@media (max-width: 1099px) {
  .fl-brand-showcase { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
  .fsrdp-landing .fl-brand-showcase .fl-brand-visual { flex: 0 0 100%; order: -1; margin-bottom: 4px; }
  .fl-brand-showcase .fl-brand-features { display: contents; }
  .fl-brand-showcase .fl-brand-features li { flex: 0 0 calc((100% - 48px) / 3); }
}
@media (max-width: 599px) {
  .fl-brand-showcase { margin-top: 32px; gap: 24px 16px; }
  .fl-brand-showcase .fl-brand-features li { flex-basis: calc((100% - 16px) / 2); }
}

/* Promo video: local poster linking to YouTube (no embedded player, see Default.aspx) */
.fl-video { border-top: 1px solid var(--fl-line); }
.fl-video-link { position: relative; display: block; max-width: 960px; margin: 0 auto; border-radius: 10px; overflow: hidden; border: 1px solid var(--fl-line); box-shadow: 0 14px 45px -22px #254d6766; }
.fl-video-link img { display: block; width: 100%; height: auto; transition: transform .25s; }
.fl-video-play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; padding-left: 6px; border-radius: 50%; background: var(--fl-green); color: white; font-size: 2rem; box-shadow: 0 10px 30px -8px #0008; transition: transform .2s, background .2s; }
.fl-video-link:hover img, .fl-video-link:focus-visible img { transform: scale(1.02); }
.fl-video-link:hover .fl-video-play, .fl-video-link:focus-visible .fl-video-play { transform: scale(1.08); background: #0e5d43; }
.fsrdp-landing .fl-video > .fl-micro { text-align: center; }
@media (max-width: 760px) { .fl-video-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 1.5rem; } }