:root{
  --navy:#072f68;
  --navy2:#0a417e;
  --blue:#0878e6;
  --sky:#21a7ee;
  --ink:#142f58;
  --muted:#5c7290;
  --line:#d8e7f4;
  --soft:#f6fbff;
  --green:#33b84a;
  --purple:#7b2ee6;
  --pink:#e9368d;
  --orange:#ff7625;
  --yellow:#f1b51d;
  --teal:#1ab7b1;
  --red:#ef493e;
  --shadow:0 16px 40px rgba(20,65,110,.12);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.45}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
.wrap{width:min(1180px,calc(100% - 30px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid #e0edf8}
.header-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.brand-mark{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:20px;background:linear-gradient(145deg,#075c9f,#0aa7de);box-shadow:0 8px 20px rgba(0,118,194,.2)}
.brand-text{display:grid;line-height:1.05}.brand-text strong{font-size:23px;color:var(--navy)}.brand-text small{text-transform:uppercase;letter-spacing:.18em;color:#7486a1;font-weight:800;font-size:11px;margin-top:6px}
.main-nav{display:flex;align-items:center;gap:18px;font-weight:750;color:#445d7e}.main-nav>a:not(.nav-btn):hover{color:var(--blue)}
.nav-btn{padding:11px 18px;border-radius:999px;background:var(--navy);color:#fff}.help-btn{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#e9f8f0;border:1px solid #a9ddbf;font-weight:900;color:#175f45}
.mobile-nav{display:none}
.button,.button-form button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 21px;border-radius:999px;border:0;font-weight:850;cursor:pointer}
.button.primary,.button-form button{background:linear-gradient(90deg,#0750a0,#0c8aea);color:white;box-shadow:0 8px 22px rgba(6,100,190,.2)}
.button.secondary{background:white;color:#0867c5;border:2px solid #178be9}
.button.small{min-height:40px;padding:8px 17px;font-size:14px}
.eyebrow{text-transform:uppercase;letter-spacing:.19em;font-size:12px;font-weight:900;color:#087be6;margin:0 0 8px}
.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#f7fdff 0%,#eef9ff 52%,#f9fcff 100%);border-bottom:1px solid #e1eef8}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}.hero:before{width:420px;height:420px;left:-170px;top:-170px;background:rgba(40,166,235,.11)}.hero:after{width:480px;height:480px;right:-170px;bottom:-250px;background:rgba(78,188,245,.1)}
.hero-inner{position:relative;z-index:1;padding:50px 0 42px;text-align:center}
.hero h1{font-size:clamp(35px,5vw,60px);line-height:1.04;margin:6px auto 14px;color:var(--navy);letter-spacing:-.035em}.hero-lead{max-width:850px;margin:0 auto;color:#536d8e;font-size:19px}.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-badges{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:20px}.hero-badges span{background:white;border:1px solid #d6e8f6;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:800;color:#46637f}
.section{padding:34px 0}.section-heading{text-align:center;margin-bottom:22px}.section-heading h2{font-size:clamp(28px,3vw,42px);margin:0 0 8px;color:var(--navy);letter-spacing:-.02em}.section-heading p{margin:0 auto;max-width:760px;color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.feature-card{position:relative;display:flex;min-height:168px;flex-direction:column;padding:15px;border:1px solid #d9e8f5;border-radius:18px;background:white;box-shadow:0 6px 18px rgba(24,66,111,.07);transition:.18s ease;overflow:hidden}
.feature-card.clickable:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(24,66,111,.15);border-color:#9ecff1}.feature-card.clickable:after{content:"Open →";position:absolute;right:12px;top:12px;font-size:11px;font-weight:900;color:#0878df;background:#eaf6ff;padding:4px 8px;border-radius:999px}
.feature-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:22px;font-weight:900;margin-bottom:9px;box-shadow:0 7px 16px rgba(0,0,0,.12)}
.green{background:linear-gradient(145deg,#75d930,#1da33b)}.purple{background:linear-gradient(145deg,#9a4cf3,#6820cf)}.blue{background:linear-gradient(145deg,#1ab4f4,#0874dd)}.orange{background:linear-gradient(145deg,#ff9d21,#f2571b)}.pink{background:linear-gradient(145deg,#ff5dab,#dd1f74)}.teal{background:linear-gradient(145deg,#40d6cc,#0aa4a0)}.red{background:linear-gradient(145deg,#ff7161,#dd2d2d)}.yellow{background:linear-gradient(145deg,#ffd442,#e89a0b)}
.feature-card h3{margin:0 0 5px;font-size:18px;color:#0a376f}.feature-card p{margin:0;color:#5d7290;font-size:14px;line-height:1.35}.benefit-tag{margin-top:auto;padding:7px 9px;border-radius:11px;background:#f0f8ff;font-weight:850;color:#0b6ebf;font-size:12px;text-align:center}
.feature-card:nth-child(4n+2) .benefit-tag{background:#f5eeff;color:#6c29bd}.feature-card:nth-child(4n+3) .benefit-tag{background:#eaf9f6;color:#087f78}.feature-card:nth-child(4n+4) .benefit-tag{background:#fff4e8;color:#b55a10}
.coming{opacity:.96}.coming:after{content:"More pages next";position:absolute;right:12px;top:12px;font-size:10px;font-weight:800;color:#64758b;background:#f2f5f8;padding:4px 7px;border-radius:999px}
.cta-banner{margin:18px 0 42px;padding:24px;border-radius:24px;background:linear-gradient(130deg,#effaff,#f9fdff 42%,#eaf6ff);border:1px solid #d5e8f6;display:flex;align-items:center;justify-content:space-between;gap:22px;box-shadow:var(--shadow)}.cta-banner h2{margin:0 0 5px;color:var(--navy);font-size:28px}.cta-banner p{margin:0;color:#607590}.cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.site-footer{padding:26px 0;background:#072f68;color:#ddecfb}.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}.footer-inner small{opacity:.8}
/* detail pages */
@media(max-width:900px){.main-nav>a:not(.nav-btn):not(.help-btn){display:none}.feature-grid{grid-template-columns:repeat(2,1fr)}.cta-banner{align-items:flex-start;flex-direction:column}.cta-actions{justify-content:flex-start}}
@media(max-width:560px){.wrap{width:min(100% - 20px,1180px)}.header-inner{height:66px}.brand-mark{width:42px;height:42px}.brand-text strong{font-size:19px}.brand-text small{font-size:9px}.nav-btn{padding:9px 12px;font-size:13px}.help-btn{width:38px;height:38px}.main-nav{gap:7px}.hero-inner{padding:35px 0 30px}.hero-lead,.detail-hero .lead{font-size:16px}.feature-grid{grid-template-columns:1fr 1fr;gap:8px}.feature-card{min-height:154px;padding:12px}.feature-card h3{font-size:16px}.feature-card p{font-size:12px}.feature-card.clickable:after,.coming:after{display:none}.cta-banner h2{font-size:23px}.footer-inner{flex-direction:column;align-items:flex-start}}



/* v2 — Real FM Central screenshots on Contacts, Family Tree, Calendar & Today. */
.real-screen-section {
  padding: 36px 0 58px;
  background: linear-gradient(180deg, #f7fbfe 0%, #ffffff 100%);
  border-top: 1px solid #e4edf5;
  border-bottom: 1px solid #e4edf5;
}
.real-screen-wrap { max-width: 1120px; }
.real-screen-heading {
  max-width: 800px;
  margin: 0 auto 22px;
  text-align: center;
}
.real-screen-heading .eyebrow { margin-bottom: 5px; }
.real-screen-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.real-screen-heading p:last-child {
  margin: 10px auto 0;
  color: var(--muted);
  line-height: 1.5;
}
.real-screen-card {
  margin: 0;
  padding: 8px;
  overflow: hidden;
  border: 1px solid #d5e3ee;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(23, 73, 112, .13);
}
.real-screen-card-single {
  width: min(100%, 900px);
  margin: 0 auto;
}
.real-screen-tree { width: min(100%, 760px); }
.real-screen-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #f5f8fb;
}
.real-screen-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.real-screen-gallery-calendar .real-screen-card { height: 100%; }
.real-screen-card figcaption {
  display: grid;
  gap: 2px;
  padding: 7px 9px 12px;
  color: var(--muted);
  line-height: 1.3;
}
.real-screen-card figcaption strong {
  color: var(--navy);
  font-size: 1.05rem;
}
.real-screen-card figcaption span { font-size: .88rem; }

@media (max-width: 760px) {
  .real-screen-section { padding: 26px 0 42px; }
  .real-screen-heading { text-align: left; margin-bottom: 16px; }
  .real-screen-gallery { grid-template-columns: 1fr; gap: 16px; }
  .real-screen-card { padding: 5px; border-radius: 16px; }
  .real-screen-card img { border-radius: 11px; }
}

/* v5 — Compact feature detail pages with compact bottom benefits and real screens. */
.detail-hero{padding:22px 0 14px;text-align:center;background:linear-gradient(145deg,#fff,#f1faff 60%,#f9fdff);border-bottom:1px solid #e4edf5}
.detail-hero h1{margin:0 0 6px;font-size:clamp(34px,4vw,50px);line-height:1;color:var(--navy);letter-spacing:-.03em}
.detail-hero .lead{max-width:850px;margin:0 auto;color:#506b8e;font-size:18px;line-height:1.3}
.quick-benefit-list{width:min(720px,100%);margin:12px auto 0;padding:0;list-style:none;display:grid;gap:5px;text-align:left}
.quick-benefit-list li{display:flex;align-items:center;gap:9px;color:#143d74;font-size:15px;line-height:1.25}
.benefit-bullet{flex:0 0 11px;width:11px;height:11px;border-radius:50%;box-shadow:none}
.real-screen-section{padding:14px 0 28px}
.real-screen-heading{margin:0 auto 10px;text-align:center}
.real-screen-heading h2{font-size:clamp(1.5rem,2.5vw,2.05rem)}
.real-screen-heading p{display:none}
.real-screen-card{padding:6px;border-radius:18px}
.real-screen-card img{border-radius:12px}
.real-screen-card figcaption{padding:5px 7px 8px}
.real-screen-card figcaption span{font-size:.82rem}
@media(max-width:560px){.detail-hero{padding:17px 0 11px}.detail-hero h1{font-size:32px}.detail-hero .lead{font-size:15px}.quick-benefit-list{margin-top:10px;gap:4px}.quick-benefit-list li{font-size:13px;gap:8px}.benefit-bullet{width:9px;height:9px;flex-basis:9px}.real-screen-section{padding:10px 0 22px}.real-screen-heading{margin-bottom:8px;text-align:center}}
/* Compact bottom benefit list — matches the top benefit list. */
.benefit-section{
  padding:18px 0 28px;
  background:linear-gradient(145deg,#fff,#f4faff 65%,#fff);
  border-top:1px solid #e4edf5;
}
.compact-bottom-benefits h2{
  margin:0;
  text-align:center;
  color:var(--navy);
  font-size:clamp(1.55rem,2.6vw,2.1rem);
  line-height:1.1;
  letter-spacing:-.02em;
}
.bottom-benefit-list{margin-top:11px}
.back-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.real-screen-tasks{width:min(100%,900px);margin:0 auto}
@media(max-width:560px){
  .benefit-section{padding:14px 0 22px}
  .compact-bottom-benefits h2{font-size:1.5rem}
  .bottom-benefit-list{margin-top:9px}
  .back-row{margin-top:13px}
}


/* v6 — compact HTML sample screens for remaining feature pages. */
.sample-screen-section{padding:14px 0 28px;background:linear-gradient(180deg,#f7fbfe 0%,#fff 100%);border-top:1px solid #e4edf5;border-bottom:1px solid #e4edf5}
.sample-screen-wrap{max-width:980px}
.sample-screen-heading{margin:0 auto 10px;text-align:center}.sample-screen-heading h2{margin:0;color:var(--navy);font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.08}
.sample-app{overflow:hidden;border:1px solid #d4e2ef;border-radius:18px;background:#fff;box-shadow:0 18px 44px rgba(23,73,112,.12)}
.sample-topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 14px;background:#123f72;color:#fff;font-weight:850}.sample-topbar .sample-brand{text-align:center;font-size:18px}.sample-topbar .sample-tools{display:flex;gap:8px}.sample-topbar .sample-tool{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border:1px solid rgba(255,255,255,.65);border-radius:10px;background:rgba(255,255,255,.08);font-size:13px}.sample-body{padding:13px;background:#f8fbfe}.sample-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.sample-title-row h3{margin:0;color:#0b376a;font-size:22px;line-height:1.1}.sample-btn{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 12px;border:1px solid #98c6ed;border-radius:10px;background:#eaf5ff;color:#075db6;font-weight:850;font-size:13px}.sample-btn.primary{background:#1476e6;color:#fff;border-color:#1476e6}.sample-btn.greenbtn{background:#eaf8ef;color:#0c7137;border-color:#9bd8b1}.sample-btn.warn{background:#fff4de;color:#895308;border-color:#e6c27c}.sample-btn.redbtn{background:#fff0ef;color:#a51f1a;border-color:#efaaa5}
.sample-panel{margin-top:9px;border:1px solid #d7e4ef;border-radius:13px;background:#fff;overflow:hidden}.sample-panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 11px;background:#eaf4ff;color:#123f72;font-weight:900}.sample-panel-head.greenhead{background:#eaf8ef;color:#17623b}.sample-panel-head.goldhead{background:#fff5d9;color:#76530c}.sample-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 11px;border-top:1px solid #e2eaf1}.sample-row:first-child{border-top:0}.sample-row strong{color:#123f72}.sample-row small{display:block;margin-top:2px;color:#6b7f98}.sample-row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.sample-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:#edf5ff;color:#145b9e;font-weight:800;font-size:11px}.sample-badge.private{background:#fff1de;color:#8a560a}.sample-badge.safe{background:#e9f8ef;color:#1a723e}.sample-badge.danger{background:#fff0ef;color:#a72520}.sample-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.sample-field{display:grid;gap:4px}.sample-field.wide{grid-column:1/-1}.sample-field label{font-size:12px;font-weight:850;color:#4b6482}.sample-input,.sample-select,.sample-textarea{width:100%;border:1px solid #cbdceb;border-radius:9px;background:#fff;padding:8px 9px;color:#294766}.sample-textarea{min-height:72px}.sample-check{display:flex;align-items:center;gap:7px;color:#294766;font-weight:750;font-size:13px}.sample-check span{width:17px;height:17px;border-radius:4px;border:1px solid #8eb6d7;background:#edf6ff;display:inline-grid;place-items:center;color:#0872d7}.sample-check span.on:before{content:'✓';font-size:12px;font-weight:900}.sample-chip-row{display:flex;gap:6px;flex-wrap:wrap}.sample-chip{padding:5px 9px;border-radius:999px;background:#edf6ff;border:1px solid #c9e0f2;color:#25567f;font-weight:800;font-size:12px}.sample-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:9px 0}.sample-stat{padding:10px;border:1px solid #cfe0ef;border-radius:12px;background:#edf6ff;text-align:center}.sample-stat strong{display:block;color:#0757a7;font-size:22px;line-height:1}.sample-stat span{font-size:11px;color:#5f748d}.sample-kbd{display:grid;grid-template-columns:repeat(3,64px);gap:8px;justify-content:center;margin:10px auto}.sample-key{height:54px;border:1px solid #bad0e4;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b376a;font-weight:900;font-size:20px}.sample-match{max-width:430px;margin:0 auto 10px;padding:9px 11px;border:2px solid #59a0e8;border-radius:13px;background:#eff7ff;color:#0b376a}.sample-vault-lock{padding:26px 16px;text-align:center}.sample-vault-lock .lock{font-size:42px}.sample-folder-tree{padding:11px 13px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.55;color:#264865;white-space:pre-wrap}.sample-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sample-video{padding:12px;border:1px solid #d6e4ef;border-radius:12px;background:#fff}.sample-video .play{font-size:24px;color:#0878e6}.sample-video strong{display:block;color:#113c70}.sample-mini-note{padding:8px 10px;border-radius:10px;background:#fff7df;color:#78560e;font-size:12px;font-weight:700}.sample-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sample-scroll{max-height:420px;overflow:auto}.sample-screen-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#6e8198;font-weight:900;margin-bottom:7px}
@media(max-width:700px){.sample-field-grid,.sample-two-col{grid-template-columns:1fr}.sample-field.wide{grid-column:auto}.sample-stat-grid{grid-template-columns:repeat(2,1fr)}.sample-video-grid{grid-template-columns:1fr 1fr}.sample-body{padding:9px}.sample-topbar{padding:8px 9px}.sample-title-row h3{font-size:19px}}
@media(max-width:460px){.sample-video-grid{grid-template-columns:1fr}.sample-row{grid-template-columns:1fr}.sample-row-actions{justify-content:flex-start}.sample-kbd{grid-template-columns:repeat(3,58px)}.sample-key{height:50px}}