/* RemoteTeams marketing site — shared theme
   Palette: pastel moss green + warm gold, on a soft green-tinted ivory ground.
   Display face: Fraunces (warm, soft-contrast serif). Body/UI: Manrope.
   data-theme is set on <html> by theme.js (shared with the rest of the app), so this
   respects whatever the visitor already chose while using RemoteTeams, not just the OS. */

:root {
  --rt-bg: #F6F8EE;
  --rt-bg-soft: #EDF2E1;
  --rt-surface: #FFFFFF;
  --rt-surface-tint: #FBF8EA;
  --rt-ink: #223019;
  --rt-ink-soft: #55614A;
  --rt-ink-faint: #8B9578;
  --rt-green: #5C7A50;
  --rt-green-deep: #37502D;
  --rt-green-pale: #DCE7CB;
  --rt-green-pale-2: #C7D9AE;
  --rt-gold: #C69A3B;
  --rt-gold-deep: #92701F;
  --rt-gold-pale: #F1E2A9;
  --rt-gold-pale-2: #E7CD7C;
  --rt-line: #DBE3C9;
  --rt-line-soft: #E9EFDC;
  --rt-shadow: 0 24px 48px -28px rgba(45, 64, 36, 0.4);
  /* Solid brand fills (buttons, the green band) and the text that sits on them. These are
     separate from --rt-green-deep because that token doubles as a *text* colour, so it goes
     light in dark mode, and text on a solid fill has to contrast with the fill, not the page. */
  --rt-fill: #37502D;
  --rt-fill-hover: #5C7A50;
  --rt-on-fill: #F7FAEF;
  --rt-on-gold-hover: #FBF6E6;
  --rt-band: #37502D;
  --rt-radius-s: 10px;
  --rt-radius-m: 18px;
  --rt-radius-l: 28px;
  --rt-font-display: 'Fraunces', Georgia, serif;
  --rt-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rt-max: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rt-bg: #131C0F;
    --rt-bg-soft: #192414;
    --rt-surface: #1C2716;
    --rt-surface-tint: #21291A;
    --rt-ink: #ECF1E0;
    --rt-ink-soft: #B7C4A3;
    --rt-ink-faint: #94A380;
    --rt-green: #8FB37B;
    --rt-green-deep: #B4D39D;
    --rt-green-pale: #293722;
    --rt-green-pale-2: #34462A;
    --rt-gold: #E2BD63;
    --rt-gold-deep: #F0D287;
    --rt-gold-pale: #37301A;
    --rt-gold-pale-2: #473C1E;
    --rt-line: #2A3521;
    --rt-line-soft: #212B19;
    --rt-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6);
    --rt-fill: #B4D39D;
    --rt-fill-hover: #8FB37B;
    --rt-on-fill: #14200F;
    --rt-on-gold-hover: #2A2106;
    --rt-band: #22331A;
  }
}
:root[data-theme="dark"] {
  --rt-bg: #131C0F;
  --rt-bg-soft: #192414;
  --rt-surface: #1C2716;
  --rt-surface-tint: #21291A;
  --rt-ink: #ECF1E0;
  --rt-ink-soft: #B7C4A3;
  --rt-ink-faint: #94A380;
  --rt-green: #8FB37B;
  --rt-green-deep: #B4D39D;
  --rt-green-pale: #293722;
  --rt-green-pale-2: #34462A;
  --rt-gold: #E2BD63;
  --rt-gold-deep: #F0D287;
  --rt-gold-pale: #37301A;
  --rt-gold-pale-2: #473C1E;
  --rt-line: #2A3521;
  --rt-line-soft: #212B19;
  --rt-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6);
  --rt-fill: #B4D39D;
  --rt-fill-hover: #8FB37B;
  --rt-on-fill: #14200F;
  --rt-on-gold-hover: #2A2106;
  --rt-band: #22331A;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--rt-bg);
  color: var(--rt-ink);
  font-family: var(--rt-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--rt-font-display);
  color: var(--rt-ink);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p { margin: 0; color: var(--rt-ink-soft); }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
a { color: var(--rt-green-deep); text-decoration: none; }
a:hover { color: var(--rt-gold-deep); }
::selection { background: var(--rt-gold-pale-2); color: var(--rt-ink); }

.rt-italic { font-style: italic; color: var(--rt-green-deep); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rt-italic { color: var(--rt-green); } }
:root[data-theme="dark"] .rt-italic { color: var(--rt-green); }

.container { max-width: var(--rt-max); margin: 0 auto; padding-inline: 56px; }
@media (max-width: 900px) { .container { padding-inline: 22px; } }

/* ---------- nav ---------- */
.rt-nav {
  position: sticky; top: 0; z-index: 30;
  background: var(--rt-bg);
  border-bottom: 1px solid var(--rt-line);
}
.rt-nav-row { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; gap: 24px; }
.rt-logo { display: flex; align-items: center; gap: 10px; font-family: var(--rt-font-display); font-size: 20px; font-weight: 600; color: var(--rt-ink); white-space: nowrap; }
.rt-nav-links { display: flex; gap: 34px; align-items: center; }
.rt-nav-links a { font-size: 15px; font-weight: 600; color: var(--rt-ink-soft); }
.rt-nav-links a.is-active { color: var(--rt-green-deep); }
.rt-nav-links a:hover { color: var(--rt-gold-deep); }
.rt-nav-cta { display: flex; gap: 10px; align-items: center; }
@media (max-width: 820px) { .rt-nav-links { display: none; } }
.rt-nav-cta .rt-btn { white-space: nowrap; }
/* Phones: logo + theme toggle + two buttons have to share the row without wrapping. */
@media (max-width: 480px) {
  .rt-nav-row { gap: 10px; }
  .rt-logo { font-size: 18px; gap: 8px; }
  .rt-nav-cta { gap: 6px; }
  .rt-nav-cta .rt-btn-sm { padding: 8px 12px; font-size: 13px; }
  .rt-nav-cta .rt-theme-toggle { width: 34px; height: 34px; }
}
/* Narrowest phones: keep the logo mark, drop the wordmark (link keeps its aria-label). */
@media (max-width: 400px) {
  .rt-logo-text { display: none; }
}

/* Theme toggle: moon shows in light mode (click for dark), sun shows in dark mode.
   Icon choice is pure CSS off the same selectors as the palette, so it's correct on
   first paint whether the theme is stamped on <html> or follows the OS. */
.rt-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border-radius: 999px;
  background: transparent; color: var(--rt-ink-soft);
  border: 1px solid var(--rt-line); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.rt-theme-toggle:hover { border-color: var(--rt-green); color: var(--rt-green-deep); }
.rt-theme-toggle:focus-visible { outline: 2px solid var(--rt-green); outline-offset: 2px; }
.rt-theme-toggle .rt-icon-sun { display: none; }
:root[data-theme="dark"] .rt-theme-toggle .rt-icon-moon { display: none; }
:root[data-theme="dark"] .rt-theme-toggle .rt-icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rt-theme-toggle .rt-icon-moon { display: none; }
  :root:not([data-theme="light"]) .rt-theme-toggle .rt-icon-sun { display: block; }
}

/* ---------- buttons ---------- */
.rt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 15px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.rt-btn-primary { background: var(--rt-fill); color: var(--rt-on-fill); }
.rt-btn-primary:hover { background: var(--rt-fill-hover); color: var(--rt-on-fill); transform: translateY(-1px); box-shadow: var(--rt-shadow); }
.rt-btn-gold { background: var(--rt-gold); color: #2A2106; }
.rt-btn-gold:hover { background: var(--rt-gold-deep); color: var(--rt-on-gold-hover); transform: translateY(-1px); box-shadow: var(--rt-shadow); }
.rt-btn-ghost { background: transparent; color: var(--rt-ink); border-color: var(--rt-line); }
.rt-btn-ghost:hover { border-color: var(--rt-green); color: var(--rt-green-deep); }
.rt-btn-sm { padding: 9px 18px; font-size: 13.5px; }
.rt-btn-block { width: 100%; }
.rt-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- pills / badges ---------- */
.rt-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px;
  background: var(--rt-green-pale); color: var(--rt-green-deep);
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.rt-pill-gold { background: var(--rt-gold-pale); color: var(--rt-gold-deep); }

/* ---------- cards ---------- */
.rt-card { background: var(--rt-surface); border: 1px solid var(--rt-line); border-radius: var(--rt-radius-m); padding: 30px; }
.rt-card-tint { background: var(--rt-surface-tint); }
.rt-card-raised { box-shadow: var(--rt-shadow); }

.rt-icon-badge {
  width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--rt-green-pale); color: var(--rt-green-deep); flex-shrink: 0;
}
.rt-icon-badge.is-gold { background: var(--rt-gold-pale); color: var(--rt-gold-deep); }

/* ---------- sections ---------- */
.rt-section { padding-block: 100px; }
.rt-section-tight { padding-block: 64px; }
.rt-band-green { background: var(--rt-green-pale); }
.rt-band-ink { background: var(--rt-band); color: #F1F6E7; }
.rt-band-ink h1, .rt-band-ink h2, .rt-band-ink h3 { color: #FAFCF3; }
.rt-band-ink p { color: #D7E4C7; }
.rt-band-ink .rt-pill { background: rgba(246, 248, 238, 0.14); color: #F1F6E7; }
@media (max-width: 900px) { .rt-section { padding-block: 64px; } }

.rt-eyebrow { font-family: var(--rt-font-body); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rt-gold-deep); }

/* ---------- grids ---------- */
.rt-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.rt-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.rt-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.rt-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .rt-grid-3, .rt-grid-4, .rt-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rt-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .rt-grid-3, .rt-grid-4, .rt-grid-5 { grid-template-columns: 1fr; } }

/* Two-column page sections (hero, feature splits, About, Contact) set their columns inline,
   so the collapse has to use !important to beat the inline style. */
@media (max-width: 820px) {
  .rt-split { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
}

/* ---------- hero mock panel ---------- */
.rt-mock {
  background: var(--rt-surface); border: 1px solid var(--rt-line); border-radius: var(--rt-radius-l);
  box-shadow: var(--rt-shadow); padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.rt-mock-row { display: flex; align-items: center; gap: 12px; background: var(--rt-surface-tint); border: 1px solid var(--rt-line-soft); border-radius: var(--rt-radius-s); padding: 14px 16px; }
.rt-mock-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rt-mock-chip { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }

/* ---------- checklist ---------- */
.rt-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.rt-check-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; color: var(--rt-ink-soft); }
.rt-check-list svg { flex-shrink: 0; margin-top: 2px; color: var(--rt-green); }

/* ---------- footer ---------- */
.rt-footer { border-top: 1px solid var(--rt-line); padding-block: 64px 40px; }
.rt-footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 40px; }
.rt-footer h4 { font-family: var(--rt-font-body); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--rt-ink-faint); margin-bottom: 16px; font-weight: 800; }
.rt-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.rt-footer ul a { color: var(--rt-ink-soft); font-size: 14.5px; }
.rt-footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--rt-line-soft); font-size: 13px; color: var(--rt-ink-faint); flex-wrap: wrap; gap: 12px; }
.rt-social { display: flex; gap: 10px; }
.rt-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rt-line); display: flex; align-items: center; justify-content: center; color: var(--rt-ink-soft); }
.rt-social a:hover { border-color: var(--rt-green); color: var(--rt-green-deep); }
@media (max-width: 900px) { .rt-footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- forms ---------- */
.rt-field { display: flex; flex-direction: column; gap: 7px; }
.rt-field label { font-size: 13.5px; font-weight: 700; color: var(--rt-ink); }
.rt-field input, .rt-field textarea, .rt-field select {
  font-family: var(--rt-font-body); font-size: 15px; padding: 13px 15px; border-radius: var(--rt-radius-s);
  border: 1px solid var(--rt-line); background: var(--rt-surface); color: var(--rt-ink); outline: none;
}
.rt-field input:focus, .rt-field textarea:focus, .rt-field select:focus { border-color: var(--rt-green); }
.rt-field textarea { resize: vertical; min-height: 120px; font-family: inherit; }
.rt-field .rt-field-error { font-size: 13px; color: #B3441F; }
:root[data-theme="dark"] .rt-field .rt-field-error { color: #E89A7C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rt-field .rt-field-error { color: #E89A7C; } }

/* ---------- misc ---------- */
.rt-divider { height: 1px; background: var(--rt-line); border: none; margin: 0; }
.rt-stat { display: flex; flex-direction: column; gap: 4px; }
.rt-stat strong { font-family: var(--rt-font-display); font-size: 34px; color: var(--rt-ink); font-weight: 600; }
.rt-stat span { font-size: 13.5px; color: var(--rt-ink-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

.rt-toggle-wrap { display: inline-flex; align-items: center; gap: 12px; background: var(--rt-surface); border: 1px solid var(--rt-line); border-radius: 999px; padding: 5px; }
.rt-toggle-opt { padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; border: none; background: transparent; color: var(--rt-ink-soft); }
.rt-toggle-opt.is-on { background: var(--rt-fill); color: var(--rt-on-fill); }

.rt-faq-item { border-bottom: 1px solid var(--rt-line); padding-block: 22px; }
.rt-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; width: 100%; text-align: left; background: none; border: none; padding: 0; }
.rt-faq-q h4 { font-family: var(--rt-font-body); font-size: 16.5px; font-weight: 700; color: var(--rt-ink); }
.rt-faq-a { padding-top: 12px; font-size: 15px; color: var(--rt-ink-soft); max-width: 640px; }
.rt-faq-a[hidden] { display: none; }
.rt-faq-plus { flex-shrink: 0; color: var(--rt-gold-deep); transition: transform .2s ease; }
.rt-faq-plus.is-open { transform: rotate(45deg); }