@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* The template homepage is the shared visual system for every Rapframe surface. */
:root {
  color-scheme: dark;
  --rf-bg: #111214;
  --rf-panel: #191b1e;
  --rf-raised: #202226;
  --rf-ink: #f0ede7;
  --rf-muted: #a2a3aa;
  --rf-line: #ffffff18;
  --rf-accent: #e8b48e;
  --rf-accent-soft: #302720;
  --rf-button: #f0e9df;
  --font-inter: 'DM Sans';
  --font-poppins: 'Space Grotesk';
  font-family: 'DM Sans', Arial, sans-serif;
  background: var(--rf-bg);
  color: var(--rf-ink);
}
html { background: var(--rf-bg); scroll-padding-top: 90px; }
body { background: var(--rf-bg); color: var(--rf-ink); }
button, input, select, textarea { font: inherit; }
::selection { background: #e8b48e40; color: var(--rf-ink); }
:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 4px; }
.rf-seo-shell, .rf-editorial { font-family: 'DM Sans', Arial, sans-serif; }
.rf-seo-shell :is(h1,h2), .rf-editorial :is(h1,h2), .rf-pricing-page h1, .rf-app-shell h1 { font-family: 'Space Grotesk', 'DM Sans', sans-serif; font-weight: 500; }
.rf-seo-shell h1 { letter-spacing: -.045em; }
.rf-seo-header, .rf-pricing-header { background: var(--rf-bg); border-bottom: 1px solid var(--rf-line); }
.rf-directory-card, .rf-guide-panel, .rf-guide-shortcuts>a, .rf-guide-links>a { border-color: var(--rf-line); border-radius: 12px; }
.rf-directory-card, .rf-guide-shortcuts>a, .rf-guide-end { background: var(--rf-panel); }
.rf-directory-card { transition: border-color 180ms, transform 180ms; }
.rf-directory-card:hover { transform: translateY(-3px); border-color: #e8b48e60; }
.rf-guide-links>a:hover, .rf-guide-shortcuts>a:hover { border-color: var(--rf-accent); background: var(--rf-raised); }
.rf-directory-eyebrow, .rf-guide-number { color: var(--rf-accent); }
.rf-directory-lead { line-height: 1.7; }
.rf-seo-shell .rf-seo-start, .rf-seo-shell .docs_hero_heroCta.docs_hero_heroCta,
.seo-button-primary, .seo-nav .seo-nav-cta, .rf-pricing-page .rf-pricing-cta,
.rf-app-shell .rf-app-submit, .vf-auth-email-form .vf-auth-email-submit {
  background: var(--rf-button); color: #24201c !important; border: 1px solid transparent; border-radius: 8px;
  box-shadow: none; transition: background 160ms, transform 160ms;
}
.rf-seo-shell .rf-seo-start:hover, .rf-seo-shell .docs_hero_heroCta:hover,
.rf-pricing-page .rf-pricing-cta:hover:not(:disabled), .rf-app-shell .rf-app-submit:hover:not(:disabled),
.seo-button-primary:hover, .seo-nav .seo-nav-cta:hover { background: #fff4e5; transform: translateY(-1px); }
.rf-seo-prompt, .rf-seo-entry { color: var(--rf-ink); }
.rf-seo-footer, .seo-footer { color: var(--rf-muted); border-color: var(--rf-line); }
.rf-app-shell { background: var(--rf-bg); font-family: 'DM Sans', Arial, sans-serif; grid-template-columns: 196px minmax(0,1fr); }
.rf-app-shell .rf-app-sidebar { background: #0d0e10; border-right: 1px solid var(--rf-line); box-shadow: none; padding-top: 32px; }
.rf-app-shell .rf-app-side-nav>button { font-size: 12px; }
.rf-pricing-page { background: var(--rf-bg); }
.seo-hero, .seo-hero-visual { background: var(--rf-bg); }
.seo-hero:before { display: none; }
.seo-button, .seo-faq-intro .seo-faq-pricing { border-radius: 8px; }
.rf-app-shell, .rf-pricing-page, .rf-seo-shell { accent-color: var(--rf-accent); }
/* Shared static-page navigation matches the template app without requiring hydration. */
.rf-editorial { padding-left: 196px; }
.rf-site-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 196px; padding: 32px 20px; background: #0d0e10; border-right: 1px solid var(--rf-line); }
.rf-site-brand { display: flex; align-items: center; gap: 10px; color: var(--rf-ink); font: 600 22px 'Space Grotesk',sans-serif; letter-spacing: -.8px; text-decoration: none; }
.rf-site-brand img { width: 31px; height: 31px; border-radius: 8px; }
.rf-site-nav { display: flex; flex-direction: column; gap: 5px; margin-top: 48px; }
.rf-site-nav a { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 7px; font-size: 12px; color: var(--rf-muted); text-decoration: none; }
.rf-site-nav a:hover, .rf-site-nav a[aria-current] { color: var(--rf-ink); background: #ffffff09; }
.rf-site-nav a[aria-current] svg { color: var(--rf-accent); }
.rf-site-nav svg, .rf-site-mobile-nav svg { width: 18px; height: 18px; stroke-width: 1.6; flex-shrink: 0; }
.rf-site-topbar { position: sticky; top: 0; z-index: 30; min-height: 72px; padding: 12px 44px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--rf-line); background: #111214f5; backdrop-filter: blur(16px); }
.rf-site-topbar>span { color: #c1c0bd; font-size: 13px; }
.rf-site-topbar>.rf-language-control { margin-left: auto; }
.rf-site-topbar>.rf-site-create { font-size: 12px; color: var(--rf-ink); text-decoration: none; padding: 10px 14px; background: var(--rf-panel); border: 1px solid var(--rf-line); border-radius: 8px; }
.rf-site-drawer, .rf-site-mobile-nav { display: none; }
.rf-editorial .rf-directory { max-width: 1320px; padding: 42px 44px 80px !important; }
.rf-editorial .rf-seo-breadcrumb { padding: 22px 24px; }
.rf-editorial .rf-seo-header { display: none; }
.rf-editorial .seo-header { display: none; }
@media(max-width: 900px) {
 .rf-app-shell { grid-template-columns: 1fr; }
 .rf-editorial { padding-left: 0; padding-bottom: 80px; }
 .rf-site-sidebar { display: none; }
 .rf-site-topbar { padding: 12px 18px; min-height: 64px; gap: 14px; }
 .rf-site-topbar>.rf-site-create { display: none; }
 .rf-site-drawer { display: block; }
 .rf-site-drawer>summary { display: grid; place-items: center; width: 30px; height: 36px; cursor: pointer; list-style: none; color: var(--rf-muted); }
 .rf-site-drawer>summary::-webkit-details-marker { display: none; }
 .rf-site-drawer>summary svg { width: 24px; height: 24px; }
 .rf-site-drawer .rf-site-nav { position: absolute; top: 63px; left: 0; width: min(300px,100vw); margin: 0; padding: 18px; background: var(--rf-panel); border: 1px solid var(--rf-line); border-radius: 0 0 12px 0; box-shadow: 10px 16px 35px #0006; }
 .rf-site-nav a { min-height: 44px; }
 .rf-site-mobile-nav { position: fixed; inset: auto 0 0; z-index: 35; display: flex; justify-content: space-around; gap: 8px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: #111214f5; backdrop-filter: blur(16px); border-top: 1px solid var(--rf-line); }
 .rf-site-mobile-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 70px; min-height: 42px; text-decoration: none; font-size: 10px; color: var(--rf-muted); }
 .rf-site-mobile-nav a[aria-current] { color: var(--rf-accent); }
 .rf-editorial .rf-directory { padding: 32px 20px 52px !important; }
}
@media(prefers-reduced-motion: reduce) { .rf-directory-card, .rf-seo-start { transition: none; } }
/* Menus and mobile chrome retain dark surfaces in every workspace. */
.rf-language-control .rf-language-switcher { background: var(--rf-panel); color: var(--rf-muted); border-color: var(--rf-line); }
.rf-app-shell .rf-app-bottom-nav { background: #111214f5; border-top-color: var(--rf-line); }
.rf-app-shell .rf-app-credit-button { background: var(--rf-panel); color: var(--rf-accent); }
.rf-app-shell h1 { color: var(--rf-ink); }
.rf-app-shell .rf-app-composer { border-color: var(--rf-line); background: var(--rf-panel); }
.rf-app-shell .rf-app-credit-pill { background: var(--rf-panel); color: var(--rf-accent); box-shadow: none; }
.rf-pricing-page .rf-pricing-cta:disabled { background: var(--rf-raised) !important; color: var(--rf-muted) !important; opacity: 1; }
.rf-pricing-page :is(h1,h2), .rf-pricing-brand { color: var(--rf-ink); }
.rf-editorial :is(h1,h2,h3) { font-weight: 500; }
.rf-editorial .rf-seo-shell [class*="hero"] h1 { color: var(--rf-ink); }
.rf-app-shell .rf-app-submit:disabled { background: var(--rf-raised); color: var(--rf-muted) !important; opacity: 1; }
.rf-app-shell .rf-app-recents-empty { background: var(--rf-panel); border-radius: 12px; }
.rf-app-shell .rf-app-composer { box-shadow: none; border: 1px solid var(--rf-line); }
.rt-source-shell .rf-source-composer { background: var(--rf-panel); border: 1px solid var(--rf-line); box-shadow: none; border-radius: 12px; }

/* Translated headings and labels must fit their grid or flex column. */
.rf-editorial :is(h1,h2,h3,p,a,strong) { overflow-wrap: anywhere; }
.rf-editorial :is(.seo-hero-copy,.seo-step,.rf-guide-shortcuts>a,.rf-guide-links>a,.rf-directory-card>a>div) { min-width: 0; }
.rf-editorial .rf-guide-shortcuts>a>span:last-child { white-space: normal; }
.rf-editorial .seo-steps { grid-template-columns: repeat(4,minmax(0,1fr)); }
@media(max-width:760px) {
  .rf-editorial .seo-hero-visual { grid-template-columns: minmax(0,1fr); }
  .rf-editorial .seo-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:380px) {
  .rf-editorial .rf-guide-shortcuts { grid-template-columns: minmax(0,1fr); }
}