/* ============================================================
   LANDING PAGE STYLES
   Extracted from R/landing_page_ui.R inline CSS
   ============================================================ */

/* Inter is served from inst/www/fonts/, not Google Fonts: a stylesheet
   @import from fonts.googleapis.com sent every visitor's IP address to Google
   in the US before they had signed in or accepted anything (7.32.1). The two
   files are the variable-weight latin and latin-ext subsets of Inter 5.3.0
   (@fontsource-variable/inter), SIL Open Font License 1.1 -- the licence
   ships beside them as Inter-OFL.txt. latin-ext carries Polish and the rest
   of the accented Latin the translations need; the browser fetches it only
   when the page uses a character in its unicode-range. CJK text falls back to
   the system stack below, as it always did. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin-ext-wght-normal.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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin-wght-normal.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;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--fo-landing-surface);
  color: var(--fo-landing-text);
  overflow-x: hidden;
}

.landing-page {
  width: 100%;
  min-height: 100vh;
  background-color: var(--fo-landing-surface);
}

/* Navigation Bar */
.landing-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--fo-landing-surface-strong);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fo-landing-accent-soft);
  padding: 12px 0;
  z-index: 1000;
}

.landing-nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-nav-brand img {
  height: 36px;
  width: auto;
}

.landing-nav-brand-text {
  font-size: 20px;
  font-weight: 600;
  color: var(--fo-landing-accent);
}

/* The name with the company under it ("by Unicorn Real Estate Ltd"): the
   address bar carries the company's name, so the page says how the two fit
   together. Quiet, and dropped on a phone, where the nav has no room for a
   second line. */
.landing-nav-brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.landing-nav-brand-by {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fo-landing-footer-muted);
  white-space: nowrap;
}

.landing-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.landing-nav-link {
  color: var(--fo-landing-text-muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s;
  cursor: pointer;
}

.landing-nav-link:hover {
  color: var(--fo-landing-accent);
}

/* The bar's controls since 7.71.0: the Demo menu
   (.landing_nav_demo_menu()), the theme switch (.landing_theme_toggle())
   and the language menu (R/dot-fo_lang_menu.R, whose own rules are in
   custom.css; the bar gives it its colours here). The language menu is a
   globe and two letters where the select was 104px wide, which is the room
   the Demo menu takes. */
.landing-nav-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
}

.landing-nav-demo-btn .fa-chevron-down {
  font-size: 10px;
}

.landing-nav-demo-list,
.landing-nav-lang .fo-lang-menu-list {
  background-color: var(--fo-landing-surface-strong);
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 10px;
  padding: 6px;
}

.landing-nav-demo-list .dropdown-item,
.landing-nav-lang .fo-lang-menu-item {
  color: var(--fo-landing-text);
  border-radius: 6px;
  font-size: 14px;
  padding: 8px 12px;
}

.landing-nav-demo-list .dropdown-item:hover,
.landing-nav-demo-list .dropdown-item:focus,
.landing-nav-lang .fo-lang-menu-item:hover,
.landing-nav-lang .fo-lang-menu-item:focus,
.landing-nav-lang .fo-lang-menu-item.active {
  background-color: var(--fo-landing-accent-soft);
  color: var(--fo-landing-accent);
}

.landing-nav-theme,
.landing-nav-lang .fo-lang-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: transparent;
  color: var(--fo-landing-text-muted);
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.landing-nav-theme:hover,
.landing-nav-lang .fo-lang-menu-btn:hover,
.landing-nav-lang .fo-lang-menu-btn[aria-expanded="true"] {
  color: var(--fo-landing-accent);
  border-color: var(--fo-landing-accent);
}

.landing-nav-theme:focus-visible,
.landing-nav-lang .fo-lang-menu-btn:focus-visible,
.landing-nav-demo-btn:focus-visible {
  outline: 2px solid var(--fo-landing-accent);
  outline-offset: 2px;
}

/* The switch shows what pressing does: a sun on the dark page, a moon on
   the light one (landing_ribbon.js sets is-light). */
.landing-nav-theme {
  width: 32px;
  height: 32px;
  justify-content: center;
  padding: 0;
}
.landing-nav-theme .landing-nav-theme-moon,
.landing-nav-theme.is-light .landing-nav-theme-sun {
  display: none;
}
.landing-nav-theme.is-light .landing-nav-theme-moon {
  display: inline;
}

.landing-nav-cta {
  background: var(--fo-landing-bg);
  color: white;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-block;
}

.landing-nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px var(--fo-landing-accent-strong);
  color: white;
  text-decoration: none;
}

/* Hero Section */
.landing-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

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

.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--fo-landing-accent-soft);
  color: var(--fo-landing-accent);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
  border: 1px solid var(--fo-landing-accent-muted);
}

.landing-hero h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fo-landing-text);
  margin: 0;
}

.landing-hero-product {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fo-landing-text);
  margin: -8px 0 0;
}

.landing-hero-subtitle {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fo-landing-text-muted);
  margin: 0;
}

.landing-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

/* 7.71.0: four buttons. Each keeps its label on one line; when
   the row is too narrow, the buttons wrap, not their words. */
.landing-hero-ctas > a {
  white-space: nowrap;
}

.landing-btn-primary {
  background: var(--fo-landing-bg);
  color: white;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
  text-decoration: none;
  display: inline-block;
}

.landing-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px var(--fo-landing-accent-strong);
  color: white;
  text-decoration: none;
}

.landing-btn-secondary {
  background-color: transparent;
  color: var(--fo-landing-accent);
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  border: 2px solid var(--fo-landing-accent-strong);
  transition: all 0.3s;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.landing-btn-secondary:hover {
  background-color: var(--fo-landing-accent-soft);
  border-color: var(--fo-landing-accent);
  color: var(--fo-landing-accent);
  text-decoration: none;
}

/* Mockup Panel */
.landing-mockup {
  background: var(--fo-landing-bg-diagonal);
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 16px;
  padding: 24px;
  min-height: 400px;
  position: relative;
}

.landing-mockup-header {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.landing-mockup-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--fo-landing-accent-strong);
}

.landing-mockup-body {
  display: flex;
  gap: 16px;
}

.landing-mockup-sidebar {
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.landing-mockup-sidebar-item {
  background-color: var(--fo-landing-accent-soft);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--fo-landing-text-muted);
}

.landing-mockup-sidebar-item.active {
  background-color: var(--fo-landing-brand-strong);
  color: var(--fo-landing-accent);
}

.landing-mockup-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-mockup-card {
  background-color: var(--fo-landing-surface-tint);
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 8px;
  padding: 16px;
}

.landing-mockup-card-title {
  font-size: 13px;
  color: var(--fo-landing-text-muted);
  margin-bottom: 12px;
}

.landing-mockup-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--fo-landing-accent);
  margin-bottom: 8px;
}

.landing-mockup-bar {
  height: 8px;
  background-color: var(--fo-landing-accent-muted);
  border-radius: 4px;
  overflow: hidden;
}

.landing-mockup-bar-fill {
  height: 100%;
  background: var(--fo-landing-bg-horizontal);
  border-radius: 4px;
}

/* Features Section */
.landing-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px;
}

.landing-section-title {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 48px;
  color: var(--fo-landing-text);
}

/* Features ribbon (7.64.0, .landing_features_ribbon() in
   R/landing_page_ui.R): every tile the same width, and the same height,
   in two rows since 7.71.0: the first drifts from right to left, the
   second (--reverse) from left to right. Each row's track gets its
   duration from its number of tiles (inline), so both move at the same
   speed. The track holds the tiles twice; each copy ends with the same
   space as the gap between two tiles (padding-right), so moving the track
   by -50% lands the second copy exactly where the first began and the
   loop has no seam. Only transform moves. The edges fade out with a mask.
   The ribbon reaches into the section's side padding to use its full width,
   and pads its own top and bottom so a tile lifted on hover and its shadow
   are not clipped.

   The same height in both rows (7.87.1): the rows are the equal
   rows of a grid (grid-auto-rows: 1fr sizes every row to the tallest), each
   track fills its row (height: 100%) and each set stretches its tiles to
   the track, so the tallest tile of either row sets the height of all.
   Before, each row stretched its tiles to its own tallest tile, and the
   first row, which holds the longer texts and the demo tile, came out
   taller than the second. The grid's rows are equal only if both ribbons
   are the same box: the same padding, and the overlap that puts the second
   row 24px under the first (the gap between two tiles) is a negative bottom
   margin on both, which the rows' wrapper pads back under the last one. */
.landing-features-rows {
  display: grid;
  grid-auto-rows: 1fr;
  padding-bottom: 16px;
}

.landing-features-ribbon {
  overflow: hidden;
  margin: 0 -24px -16px;
  padding: 12px 0 28px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.landing-features-track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: landing-features-marquee 90s linear infinite;
}

/* The second row: the same loop, played backwards. */
.landing-features-ribbon--reverse .landing-features-track {
  animation-direction: reverse;
}

/* Stops under the pointer, and while a tile has the keyboard focus. */
.landing-features-ribbon:hover .landing-features-track,
.landing-features-ribbon:focus-within .landing-features-track {
  animation-play-state: paused;
}

/* Pause / Play (inst/www/landing_ribbon.js): stopped until pressed again. */
.landing-features-ribbon.is-paused .landing-features-track {
  animation-play-state: paused;
}

.landing-features-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

.landing-features-pause {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: transparent;
  color: var(--fo-landing-accent);
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.landing-features-pause:hover {
  background-color: var(--fo-landing-accent-soft);
  border-color: var(--fo-landing-accent);
}

.landing-features-pause:focus-visible {
  outline: 2px solid var(--fo-landing-accent);
  outline-offset: 2px;
}

/* A tile with the keyboard focus (landing_ribbon.js adds is-focus-mode):
   the still layout of reduced motion, so the browser can scroll the tile
   into view. */
.landing-features-ribbon.is-focus-mode {
  overflow-x: auto;
  scroll-padding: 0 24px;
  -webkit-mask-image: none;
  mask-image: none;
}
.landing-features-ribbon.is-focus-mode .landing-features-track {
  animation: none;
  padding-left: 24px;
}
.landing-features-ribbon.is-focus-mode .landing-features-set--copy {
  display: none;
}

.landing-features-set {
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding-right: 24px;
}

@keyframes landing-features-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.landing-feature-card {
  position: relative; /* anchors .landing-feature-soon */
  overflow: hidden;   /* rounds the banner's corners with the card's */
  flex: 0 0 380px;
  width: 380px;
  min-height: 200px;
  box-sizing: border-box;
  background-color: var(--fo-landing-accent-faintest);
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 20px;
  padding: 24px 28px;
  box-shadow: 0 12px 32px var(--fo-landing-surface-tint);
  transition: transform 0.3s, border-color 0.3s, background-color 0.3s;
}

.landing-feature-card:hover,
.landing-feature-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--fo-landing-accent);
  background-color: var(--fo-landing-accent-faint);
}

.landing-feature-card:focus-visible {
  outline: 2px solid var(--fo-landing-accent);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .landing-feature-card {
    flex-basis: 270px;
    width: 270px;
    padding: 28px 24px;
  }
}

/* Without motion, and on a touch screen (no hover to stop it): no
   animation, no loop copy, no Pause button, and the first copy is a row the
   visitor scrolls or swipes, one tile at a time. The two blocks are the
   same rules. */
@media (hover: none) {
  .landing-features-ribbon {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .landing-features-track {
    animation: none;
    padding-left: 24px;
  }
  .landing-features-set--copy {
    display: none;
  }
  .landing-features-controls {
    display: none;
  }
  .landing-feature-card {
    scroll-snap-align: start;
  }
  .landing-feature-card:hover,
  .landing-feature-card:focus-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-features-ribbon {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .landing-features-track {
    animation: none;
    padding-left: 24px;
  }
  .landing-features-set--copy {
    display: none;
  }
  .landing-features-controls {
    display: none;
  }
  .landing-feature-card {
    scroll-snap-align: start;
  }
  .landing-feature-card:hover,
  .landing-feature-card:focus-visible {
    transform: none;
  }
}

/* "Coming soon" ribbon: a diagonal strip across the top-right corner of a
   tile for a feature that is announced but not in the app yet (see `soon`
   in .landing_feature_card()), in the pastel green of the app's "New" /
   "Improved" badges (--fo-landing-ribbon-bg in fo-tokens.css) with dark
   text in both themes. The dashed border keeps "coming" from reading as
   "here". Geometry: the strip is 24px tall (10px x 1.4 line-height + 2 x
   5px padding), so with top: 34px its centre sits 46px below the card's
   top edge, and with width: 200px / right: -54px its centre sits 46px in
   from the right edge -- equal offsets, so the 45deg strip runs corner to
   corner and the card's overflow: hidden clips its two ends. 46px holds
   the longest label ("Prossimamente") and keeps the strip clear of the
   title; a longer label needs a larger offset, or it is cut. */
.landing-feature-card--soon {
  border-style: dashed;
}

.landing-feature-soon {
  position: absolute;
  top: 34px;
  right: -54px;
  width: 200px;
  padding: 5px 0;
  transform: rotate(45deg);
  text-align: center;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fo-landing-ribbon-text);
  background: var(--fo-landing-ribbon-bg);
  box-shadow: 0 2px 8px var(--fo-landing-surface-tint);
  pointer-events: none;
  z-index: 1;
}

/* Demo (7.33.0, R/landing_video.R and landing_video.js): the tour in a
   section of its own between the hero and the features, under a "Demo"
   label, its title and what it shows. From 7.27.0 it was the features
   grid's first tile, one column of three; here it has a stage up to
   1000px wide, centred in the section. */
.landing-demo-header {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.landing-demo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fo-landing-accent);
  background-color: var(--fo-landing-accent-soft);
  border: 1px solid var(--fo-landing-accent-muted);
}

.landing-demo .landing-section-title {
  margin-bottom: 16px;
}

.landing-demo-subtitle {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--fo-landing-text-muted);
}

/* The stage: the picture and its bar in one framed panel with a soft blue
   glow, in the tokens the feature tiles use. */
.landing-video-card {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px 16px 12px;
  background-color: var(--fo-landing-accent-faintest);
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 20px;
  box-shadow: 0 0 80px var(--fo-landing-accent-soft), 0 24px 48px var(--fo-landing-surface-tint);
  scroll-margin-top: 96px; /* clear of the sticky nav bar, 85px on a phone */
}

/* Bigger screen: past the section's edges, as wide as the window allows up
   to 1600px, and never taller than it leaves room for under the nav bar
   and above the control bar (34px: the stage's padding and border). The
   left margin centres it on the section, whose centre is the window's;
   100vw counts the scrollbar, so the 64px it leaves is what keeps the
   stage clear of both edges. */
.landing-video-card--theatre {
  --fo-landing-theatre-width: min(1600px, calc(100vw - 64px), calc((100vh - 200px) * 16 / 9 + 34px));
  max-width: none;
  width: var(--fo-landing-theatre-width);
  margin-left: calc(50% - var(--fo-landing-theatre-width) / 2);
}

/* The toggle only where it gains at least a tenth over the 1000px stage:
   a window 1200px wide and 800px tall. On a laptop's shorter window the
   bigger screen would come out smaller. Two classes, to beat
   .landing-video-btn's display further down. */
@media (max-width: 1199px), (max-height: 799px) {
  .landing-video-bar .landing-video-theatre {
    display: none;
  }
}

.landing-video-player {
  margin: 0;
}

.landing-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--fo-landing-surface);
}

.landing-video-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--fo-landing-surface);
}

.landing-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  padding: 0 0 0 6px; /* the triangle's optical centre */
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--fo-landing-text);
  background: var(--fo-landing-bg);
  box-shadow: 0 4px 16px var(--fo-landing-surface-tint);
  cursor: pointer;
  transition: transform 0.2s;
}

.landing-video-play:hover,
.landing-video-play:focus-visible {
  transform: scale(1.08);
}

.landing-video-card--started .landing-video-play {
  display: none;
}

.landing-video-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 12px;
}

.landing-video-field {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--fo-landing-text-muted);
}

.landing-video-field select,
.landing-video-btn {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fo-landing-text);
  background-color: var(--fo-landing-accent-soft);
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 6px;
  padding: 4px 8px;
  color-scheme: dark; /* the native drop-down list too */
}

.landing-video-field select option {
  color: var(--fo-landing-text);
  background-color: var(--fo-landing-surface);
}

.landing-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.landing-video-field select:focus-visible,
.landing-video-btn:hover,
.landing-video-btn:focus-visible {
  border-color: var(--fo-landing-accent);
  outline: none;
}

.landing-video-btn[aria-pressed="true"] {
  color: var(--fo-landing-accent);
  border-color: var(--fo-landing-accent);
}

/* Under the bar, inside the player, so it shows in full screen too. */
.landing-video-error {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--fo-landing-text);
}

/* Full screen takes the picture and the bar under it (landing_video.js):
   the picture fills the screen above the bar. */
.landing-video-player:fullscreen {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 12px;
  background: var(--fo-landing-surface);
}

.landing-video-player:fullscreen .landing-video-frame {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
}

/* A bigger screen means nothing in full screen. */
.landing-video-player:fullscreen .landing-video-theatre {
  display: none;
}

/* A size down since 7.71.0, for the shorter tile. */
.landing-feature-icon {
  width: 48px;
  height: 48px;
  background: var(--fo-landing-bg);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
}

.landing-feature-title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--fo-landing-text);
}

.landing-feature-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fo-landing-text-muted);
}

/* The demo tile's button (.landing_demo_tile_button()): the hero's
   secondary button, a size down to sit in a tile. Since 7.87.1 it
   sits in the tile's top-right corner, on the icon's line and centred on
   it (39px tall in the icon's 48px: top is the tile's top padding + 4px,
   right its side padding), not under the text: there it made the demo
   tile, and with it every tile, 31px taller than the longest text needs.
   The DOM keeps it after the description, so a screen reader meets it
   last. The widest label (Portuguese, 262px) leaves 12px to the icon in
   the 324px of a tile. */
.landing-feature-demo-btn {
  position: absolute;
  top: 28px;
  right: 28px;
  padding: 8px 20px;
  font-size: 15px;
  font-family: inherit;
}

/* A phone's tile (270px, .landing-feature-card above) has 222px for text,
   less than the widest label: there the button goes back under the text
   and wraps its label to the tile. After the rule above, which it
   overrides. */
@media (max-width: 575.98px) {
  .landing-feature-demo-btn {
    position: static;
    margin-top: 16px;
    max-width: 100%;
  }
}

/* Usage Section */
.landing-usage-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.landing-usage-step {
  background-color: var(--fo-landing-accent-faintest);
  border-left: 4px solid var(--fo-landing-accent);
  padding: 24px 32px;
  border-radius: 8px;
}

.landing-usage-step-number {
  font-size: 14px;
  font-weight: 700;
  color: var(--fo-landing-accent);
  margin-bottom: 8px;
}

.landing-usage-step-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--fo-landing-text);
}

.landing-usage-step-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fo-landing-text-muted);
}

/* Contact Section */
.landing-contact {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  background-color: var(--fo-landing-accent-faintest);
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 16px;
  padding: 48px 32px;
}

.landing-contact-icon {
  width: 64px;
  height: 64px;
  background: var(--fo-landing-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 24px;
}

.landing-contact h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--fo-landing-text);
}

.landing-contact-email {
  font-size: 18px;
  color: var(--fo-landing-accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.landing-contact-email:hover {
  color: var(--fo-landing-brand);
  text-decoration: underline;
}

/* Footer */
.landing-footer {
  background-color: var(--fo-landing-surface-overlay);
  border-top: 1px solid var(--fo-landing-accent-soft);
  padding: 48px 24px 24px;
  margin-top: 80px;
}

.landing-footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 32px;
}

.landing-footer-section h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--fo-landing-accent);
}

.landing-footer-section p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--fo-landing-text-muted);
  margin-bottom: 12px;
}

.landing-footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--fo-landing-accent-soft);
  text-align: center;
  font-size: 14px;
  color: var(--fo-landing-footer-muted);
}

/* Footer links (7.22.0: privacy policy and terms of use). Same muted token
   as the copyright line above, underlined so it reads as a link at a glance;
   the accent on hover follows the rest of the landing page. */
.landing-footer-links {
  margin-top: 6px;
}

.landing-footer-link,
.landing-footer-link:visited {
  color: var(--fo-landing-footer-muted);
  text-decoration: underline;
  font-size: 14px;
}

.landing-footer-link:hover,
.landing-footer-link:focus {
  color: var(--fo-landing-accent);
}

/* The company's registered particulars, under the copyright line. Colour
   comes from the footer line above it, so it follows light and dark mode
   without its own override. */
.landing-footer-company {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

/* Responsive Design */
/* Trust section: who holds the bank login and what FO can do with it. */
.landing-trust {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 48px;
  padding: 28px 32px;
  background-color: var(--fo-landing-accent-faintest);
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 12px;
}

.landing-trust-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--fo-landing-bg);
  border-radius: 12px;
}

.landing-trust-title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  color: var(--fo-landing-text);
}

.landing-trust-points {
  margin: 0;
  padding-left: 20px;
  color: var(--fo-landing-text-muted);
  line-height: 1.6;
}

.landing-trust-points li {
  margin-bottom: 6px;
}

/* Interactive mockup (7.31.0, R/landing_mockup.R, inst/www/landing_mockup.js):
   the hero's "window" shows the app's own screens behind a sidebar of
   tabs, with a lightbox for the full-size picture. Tokens only, like the
   video tile: fo-tokens.css owns every colour. */
.landing-mockup--shots {
  padding: 16px;
}

.landing-mockup--shots .landing-mockup-body {
  gap: 12px;
}

.landing-mockup--shots .landing-mockup-sidebar {
  width: 104px;
  flex-shrink: 0;
}

/* The tabs are real buttons: the drawing's look, plus a pointer, a hover
   and a focus ring. */
.landing-mockup--shots .landing-mockup-sidebar-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.landing-mockup--shots .landing-mockup-sidebar-item:hover {
  background: var(--fo-landing-accent-muted);
  color: var(--fo-landing-text);
}

.landing-mockup--shots .landing-mockup-sidebar-item.active:hover {
  background: var(--fo-landing-brand-strong);
  color: var(--fo-landing-accent);
}

.landing-mockup--shots .landing-mockup-sidebar-item:focus-visible,
.landing-mockup-zoom:focus-visible,
.landing-lightbox-btn:focus-visible {
  outline: 2px solid var(--fo-landing-accent);
  outline-offset: 2px;
}

.landing-mockup--shots .landing-mockup-content {
  min-width: 0;
}

.landing-mockup-panel[hidden] {
  display: none;
}

.landing-mockup-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 8px;
  background: var(--fo-landing-surface-tint);
  overflow: hidden;
  line-height: 0;
  cursor: zoom-in;
}

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

.landing-mockup-caption,
.landing-mockup-error {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fo-landing-text-muted);
}

.landing-mockup-panel--error .landing-mockup-zoom {
  cursor: default;
}

/* The lightbox: on <body> while open (the tokens live on :root, so it
   needs no landing ancestor), the picture as large as the window allows. */
body.landing-lightbox-open {
  overflow: hidden;
}

.landing-lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 72px;
  background: var(--fo-landing-surface-overlay);
}

.landing-lightbox-frame {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.landing-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 8px;
  background: var(--fo-landing-surface-tint);
}

.landing-lightbox-caption {
  font-size: 15px;
  text-align: center;
  color: var(--fo-landing-text);
}

.landing-lightbox-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 50%;
  background: var(--fo-landing-surface-strong);
  color: var(--fo-landing-text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.landing-lightbox-btn:hover {
  background: var(--fo-landing-brand-strong);
  color: var(--fo-landing-accent);
}

.landing-lightbox-close {
  top: 16px;
  right: 16px;
}

.landing-lightbox-prev,
.landing-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
}

.landing-lightbox-prev {
  left: 16px;
}

.landing-lightbox-next {
  right: 16px;
}

/* Partners (7.31.0): the professionals FO wants to work with, and an
   invitation to ask for a demo. Its own classes: the landing tests count
   the features ribbon's tiles. */
.landing-partners-subtitle {
  max-width: 720px;
  margin: -24px auto 40px;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  color: var(--fo-landing-text-muted);
}

/* Auto-fit columns (as the features grid had until 7.64.0):
   three on desktop, two on tablets, one on phones, which the six tiles fill at every width (3 + 3, 2 x 3). */
.landing-partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.landing-partner-card {
  background-color: var(--fo-landing-accent-faintest);
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 12px;
  padding: 28px;
  transition: all 0.3s;
}

.landing-partner-card:hover {
  transform: translateY(-4px);
  border-color: var(--fo-landing-accent);
  background-color: var(--fo-landing-accent-faint);
}

.landing-partner-icon {
  width: 48px;
  height: 48px;
  background: var(--fo-landing-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.landing-partner-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--fo-landing-text);
}

.landing-partner-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fo-landing-text-muted);
}

.landing-partners-cta {
  max-width: 720px;
  margin: 48px auto 0;
  text-align: center;
}

.landing-partners-invite {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 24px;
  color: var(--fo-landing-text);
}

.landing-partners-note {
  font-size: 14px;
  margin-top: 16px;
  color: var(--fo-landing-text-muted);
}

@media (max-width: 992px) {
  /* minmax(0, 1fr), not 1fr: a 1fr column is never narrower than its
     widest unbreakable content, and on a phone the mockup's tabs are one
     row meant to scroll sideways (max-width: 768px below) -- about 700px --
     so the column took that width and the headline and buttons ran off the
     right edge of a 390px screen (7.56.0). */
  .landing-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  /* A tablet's bar keeps its links, each on one line, a little closer
     together, so the bar fits from 769px, where they go. */
  .landing-nav-links {
    gap: 20px;
  }
  
  .landing-footer-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* 7.71.0: with the Demo menu, the theme switch and the language
   menu, the section links leave the bar no room below 1200px in French
   (measured: about 1140px needed) or German. They go there; the Demo menu
   stays until 768px, where the hero's buttons remain. */
@media (max-width: 1199.98px) {
  .landing-nav-link:not(.landing-nav-demo-btn) {
    display: none;
  }
}

/* A phone's bar holds the brand, the language picker and Login; the
   padding tightens, so it fits from 360px. */
@media (max-width: 480px) {
  .landing-nav-container {
    padding: 0 16px;
  }

  .landing-nav-cta {
    padding: 8px 16px;
  }
}

@media (max-width: 768px) {
  .landing-hero h1 {
    font-size: 36px;
  }

  /* A phone's stage: the picture nearly edge to edge. */
  .landing-video-card {
    padding: 8px 8px 10px;
    border-radius: 14px;
  }

  .landing-video-frame {
    border-radius: 8px;
  }

  .landing-demo-subtitle {
    font-size: 16px;
  }
  
  .landing-trust {
    flex-direction: column;
  }
  
  .landing-nav-links {
    gap: 16px;
  }
  
  .landing-nav-link {
    display: none;
  }
  
  .landing-hero-ctas {
    flex-direction: column;
  }
  
  .landing-btn-primary,
  .landing-btn-secondary {
    width: 100%;
    text-align: center;
  }

  /* A phone stacks the mockup: the tabs become a row to scroll sideways,
     above the picture; the lightbox's arrows drop to the bottom edge. */
  .landing-mockup--shots .landing-mockup-body {
    flex-direction: column;
  }

  .landing-mockup--shots .landing-mockup-sidebar {
    width: auto;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .landing-mockup--shots .landing-mockup-sidebar-item {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .landing-lightbox {
    padding: 64px 12px;
  }

  .landing-lightbox-prev,
  .landing-lightbox-next {
    top: auto;
    bottom: 12px;
    transform: none;
  }

  .landing-lightbox-prev {
    left: 12px;
  }

  .landing-lightbox-next {
    right: 12px;
  }
}

/* 7.71.0: on a phone the bar also holds the theme switch, so the
   language menu shows its globe alone, as in the app's top bar, and the
   gaps close up: Login fits from 360px in French and German. After the
   768px block, whose gap this overrides. */
@media (max-width: 480px) {
  .landing-nav-links {
    gap: 10px;
  }

  .landing-nav-lang .fo-lang-menu-code {
    display: none;
  }
}

/* Pricing (7.37.0): the four plans, built by R/dot-landing_pricing.R and
   driven by inst/www/landing_pricing.js. Present only once billing is
   switched on. Its own classes, like the partners section's. */
.landing-pricing-subtitle {
  max-width: 720px;
  margin: -24px auto 28px;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  color: var(--fo-landing-text-muted);
}

.landing-pricing-toggles {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}

.landing-pricing-toggle {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 999px;
  background-color: var(--fo-landing-accent-faintest);
}

.landing-pricing-toggle-btn {
  border: 0;
  border-radius: 999px;
  padding: 7px 16px;
  background: transparent;
  color: var(--fo-landing-text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.landing-pricing-toggle-btn[aria-pressed="true"] {
  background: var(--fo-landing-bg);
  color: var(--fo-landing-text);
}

.landing-pricing-toggle-btn:focus-visible {
  outline: 2px solid var(--fo-landing-accent);
  outline-offset: 2px;
}

.landing-pricing-save {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}

.landing-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.landing-pricing-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px 24px;
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 12px;
  background-color: var(--fo-landing-accent-faintest);
}

/* Gold: the green "Best value" ribbon and a green ring. The ribbon is a
   diagonal corner strip in a deeper green (--fo-landing-best-bg) with
   white text. */
.landing-pricing-card--best {
  border-color: var(--fo-landing-best-bg);
  background-color: var(--fo-landing-accent-faint);
  box-shadow: 0 0 0 1px var(--fo-landing-best-ring) inset;
}

.landing-pricing-ribbon {
  position: absolute;
  top: 24px;
  right: -44px;
  width: 170px;
  padding: 5px 0;
  transform: rotate(45deg);
  text-align: center;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fo-landing-best-text);
  background: var(--fo-landing-best-bg);
  box-shadow: 0 2px 6px var(--fo-landing-surface-tint);
  pointer-events: none;
}

.landing-pricing-plan {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fo-landing-accent);
}

.landing-pricing-descriptor {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--fo-landing-text-muted);
}

.landing-pricing-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  color: var(--fo-landing-text);
}

.landing-pricing-currency,
.landing-pricing-per {
  font-size: 15px;
  font-weight: 600;
  color: var(--fo-landing-text-muted);
}

.landing-pricing-amount {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.landing-pricing-contact {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.landing-pricing-note {
  min-height: 20px;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--fo-landing-text-muted);
}

.landing-pricing-note s {
  opacity: 0.7;
}

.landing-pricing-features {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.landing-pricing-features-head {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fo-landing-text-muted);
}

.landing-pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.45;
  color: var(--fo-landing-text);
}

.landing-pricing-feature--off {
  color: var(--fo-landing-text-muted);
}

.landing-pricing-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--fo-landing-ribbon-bg);
}

.landing-pricing-feature--off .landing-pricing-icon {
  color: var(--fo-landing-text-muted);
  opacity: 0.7;
}

/* The Gold card's ambassador box, under the price and ringed in green so
   it is seen before the feature list. The ring pulses three times when the
   card is drawn (not with reduced motion), and turns solid once ticked. */
.landing-pricing-ambassador-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 2px dashed var(--fo-landing-ribbon-bg);
  border-radius: 10px;
  background-color: var(--fo-landing-accent-soft);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fo-landing-text);
  cursor: pointer;
  animation: landing-ambassador-ring 1.6s ease-out 0.6s 3;
}

.landing-pricing-ambassador-toggle:hover,
.landing-pricing-ambassador-toggle:focus-within {
  border-style: solid;
}

.landing-pricing-ambassador-toggle:has(input:checked) {
  border-style: solid;
  border-color: var(--fo-landing-best-bg);
  box-shadow: 0 0 0 3px var(--fo-landing-best-ring);
}

.landing-pricing-ambassador-toggle input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--fo-landing-best-bg);
}

.landing-pricing-ambassador-toggle-icon {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

@keyframes landing-ambassador-ring {
  0%   { box-shadow: 0 0 0 0 var(--fo-landing-best-ring); }
  100% { box-shadow: 0 0 0 10px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-pricing-ambassador-toggle {
    animation: none;
  }
}

.landing-pricing-cta {
  width: 100%;
  padding: 13px 20px;
  font-size: 15px;
  text-align: center;
}

.landing-pricing-fine {
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--fo-landing-text-muted);
}

.landing-pricing-ambassador {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  max-width: 980px;
  margin: 36px auto 0;
  padding: 24px 28px;
  border: 1px solid var(--fo-landing-accent-muted);
  border-radius: 12px;
  background-color: var(--fo-landing-accent-faintest);
}

.landing-pricing-ambassador-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--fo-landing-bg);
  font-size: 24px;
}

.landing-pricing-ambassador-body {
  flex: 1 1 320px;
  display: grid;
  gap: 8px;
}

.landing-pricing-ambassador-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--fo-landing-text);
}

.landing-pricing-ambassador-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fo-landing-text-muted);
}

.landing-pricing-ambassador-price {
  font-weight: 700;
  white-space: nowrap;
  color: var(--fo-landing-text);
}

.landing-pricing-ambassador-details {
  font-size: 14px;
  color: var(--fo-landing-text-muted);
}

.landing-pricing-ambassador-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--fo-landing-accent);
}

.landing-pricing-ambassador-details ol {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 20px;
  line-height: 1.55;
}

@media (max-width: 576px) {
  .landing-nav-brand-by {
    display: none;
  }

  .landing-pricing-amount {
    font-size: 34px;
  }

  .landing-pricing-ambassador {
    padding: 20px;
  }
}

/* ============================================================
   LIGHT-MODE GUARD
   ------------------------------------------------------------
   The landing page is rendered with a permanently dark surface
   (`--fo-landing-surface` = `#0b0e14` in both themes). However,
   `inst/www/custom.css` contains global light-mode rules such as
   `body:not(.dark-mode) p { color: #212529 !important }` and the
   same forced near-black colour for every `h1`-`h6`, `strong`,
   `em`, `b`, label, etc. When the user is in light mode and
   logs out, the landing page is shown but all of its headings,
   paragraphs and inline copy inherit the near-black colour on a
   near-black background, leaving the entire page (hero copy,
   feature cards, "How it works" steps, contact and footer) and
   even the mockup sidebar items ("Dashboard", "Portfolio",
   "Statements", "Tax", "Settings") effectively invisible
   (https://github.com/felcherif/FO – see the screenshot in the
   originating issue).

   The block below restores the landing-page tokens for every
   text element inside `.landing-page` in light mode. It uses
   higher selector specificity than the custom.css rules
   (`.landing-page` + element vs. `body:not(.dark-mode)` +
   element) and matches the `!important` weight, so the landing
   surface keeps its intended palette regardless of the active
   app theme.
   ============================================================ */
body:not(.dark-mode) .landing-page,
body:not(.dark-mode) .landing-page h1,
body:not(.dark-mode) .landing-page h2,
body:not(.dark-mode) .landing-page h3,
body:not(.dark-mode) .landing-page h4,
body:not(.dark-mode) .landing-page h5,
body:not(.dark-mode) .landing-page h6,
body:not(.dark-mode) .landing-page strong,
body:not(.dark-mode) .landing-page b,
body:not(.dark-mode) .landing-page .landing-hero-product,
body:not(.dark-mode) .landing-page em,
body:not(.dark-mode) .landing-page label,
body:not(.dark-mode) .landing-page .landing-trust-title,
body:not(.dark-mode) .landing-page .landing-video-error,
body:not(.dark-mode) .landing-page .landing-partner-title,
body:not(.dark-mode) .landing-page .landing-partners-invite,
body:not(.dark-mode) .landing-page .landing-pricing-price,
body:not(.dark-mode) .landing-page .landing-pricing-feature,
body:not(.dark-mode) .landing-page .landing-pricing-ambassador-toggle,
body:not(.dark-mode) .landing-page .landing-pricing-ambassador-title,
body:not(.dark-mode) .landing-page .landing-pricing-ambassador-price,
body:not(.dark-mode) .landing-page .landing-pricing-toggle-btn[aria-pressed="true"] {
  color: var(--fo-landing-text) !important;
}

/* The pricing ribbon is white-on-green in both themes. */
body:not(.dark-mode) .landing-page .landing-pricing-ribbon {
  color: var(--fo-landing-best-text) !important;
}

/* The "Coming soon" ribbon is dark-on-green in both themes (it sits on its
   own green strip, not on the landing surface), so the light-mode sweep
   must re-assert its own text token, not the body text colour. */
body:not(.dark-mode) .landing-page .landing-feature-soon {
  color: var(--fo-landing-ribbon-text) !important;
}

body:not(.dark-mode) .landing-page p,
body:not(.dark-mode) .landing-page .landing-hero-subtitle,
body:not(.dark-mode) .landing-page .landing-feature-description,
body:not(.dark-mode) .landing-page .landing-usage-step-description,
body:not(.dark-mode) .landing-page .landing-trust-points,
body:not(.dark-mode) .landing-page .landing-trust-points li,
body:not(.dark-mode) .landing-page .landing-nav-link,
body:not(.dark-mode) .landing-page .landing-mockup-sidebar-item,
body:not(.dark-mode) .landing-page .landing-mockup-card-title,
body:not(.dark-mode) .landing-page .landing-mockup-caption,
body:not(.dark-mode) .landing-page .landing-mockup-error,
body:not(.dark-mode) .landing-page .landing-partners-subtitle,
body:not(.dark-mode) .landing-page .landing-partner-description,
body:not(.dark-mode) .landing-page .landing-partners-note,
body:not(.dark-mode) .landing-page .landing-demo-subtitle,
body:not(.dark-mode) .landing-page .landing-video-field,
body:not(.dark-mode) .landing-page .landing-pricing-subtitle,
body:not(.dark-mode) .landing-page .landing-pricing-descriptor,
body:not(.dark-mode) .landing-page .landing-pricing-currency,
body:not(.dark-mode) .landing-page .landing-pricing-per,
body:not(.dark-mode) .landing-page .landing-pricing-note,
body:not(.dark-mode) .landing-page .landing-pricing-features-head,
body:not(.dark-mode) .landing-page .landing-pricing-feature--off,
body:not(.dark-mode) .landing-page .landing-pricing-toggle-btn,
body:not(.dark-mode) .landing-page .landing-pricing-fine,
body:not(.dark-mode) .landing-page .landing-pricing-ambassador-text,
body:not(.dark-mode) .landing-page .landing-pricing-ambassador-details {
  color: var(--fo-landing-text-muted) !important;
}

body:not(.dark-mode) .landing-page .landing-nav-brand-text,
body:not(.dark-mode) .landing-page .landing-badge,
body:not(.dark-mode) .landing-page .landing-demo-eyebrow,
body:not(.dark-mode) .landing-page .landing-mockup-sidebar-item.active,
body:not(.dark-mode) .landing-page .landing-mockup-value,
body:not(.dark-mode) .landing-page .landing-btn-secondary,
body:not(.dark-mode) .landing-page .landing-usage-step-number,
body:not(.dark-mode) .landing-page .landing-contact-email,
body:not(.dark-mode) .landing-page .landing-pricing-plan,
body:not(.dark-mode) .landing-page .landing-pricing-ambassador-details summary {
  color: var(--fo-landing-accent) !important;
}

body:not(.dark-mode) .landing-page .landing-footer p,
body:not(.dark-mode) .landing-page .landing-footer .landing-footer-bottom {
  color: var(--fo-landing-footer-muted) !important;
}

/* The lightbox (7.31.0) sits on <body>, outside .landing-page, so it
   carries its own guard against custom.css's light-mode text colours. */
body:not(.dark-mode) .landing-lightbox-caption,
body:not(.dark-mode) .landing-lightbox-btn {
  color: var(--fo-landing-text) !important;
}

/* ============================================================
   LIGHT THEME (7.71.0)
   The landing page is dark until the visitor presses the bar's theme
   switch (.landing_theme_toggle(), inst/www/landing_ribbon.js), which sets
   <html data-fo-landing-theme="light">; R/app_ui.R sets it again from the
   kept pick before the page is drawn. The page's colours are all tokens
   (inst/www/fo-tokens.css pins them to the dark palette everywhere), so
   the light palette is the same tokens, set again on the overlay and on
   the lightbox, which sits on <body>. The light-mode guard above reads the
   tokens and follows. The brand gradients, the green "best" and ribbon
   colours are the same in both themes.
   ============================================================ */
html[data-fo-landing-theme="light"] #landing-page-overlay,
html[data-fo-landing-theme="light"] .landing-lightbox {
  --fo-landing-surface:          #f6f8fc;
  --fo-landing-surface-strong:   rgba(246, 248, 252, 0.95);
  --fo-landing-surface-overlay:  rgba(236, 240, 247, 0.9);
  --fo-landing-surface-tint:     rgba(20, 26, 42, 0.08);
  --fo-landing-text:             #141a2a;
  --fo-landing-text-muted:       #46516a;
  --fo-landing-footer-muted:     #5b6579;
  --fo-landing-accent:           #0a58ca;
  --fo-landing-accent-faintest:  rgba(10, 88, 202, 0.04);
  --fo-landing-accent-faint:     rgba(10, 88, 202, 0.07);
  --fo-landing-accent-soft:      rgba(10, 88, 202, 0.09);
  --fo-landing-accent-muted:     rgba(10, 88, 202, 0.22);
  --fo-landing-accent-strong:    rgba(10, 88, 202, 0.3);
}

/* custom.css paints the overlay itself dark (#landing-page-overlay). */
html[data-fo-landing-theme="light"] #landing-page-overlay {
  background-color: var(--fo-landing-surface);
}

html[data-fo-landing-theme="light"] .landing-page {
  color: var(--fo-landing-text);
}