/* FormaBella Sistem: shared brand variables and typography from style.css. */
.system-page { --section-pad: 88px 0; }
.system-page section[id], .system-package { scroll-margin-top: 112px; }
.system-hero { padding: 145px 0 85px; background: radial-gradient(ellipse at 85% 10%,var(--nude),transparent 60%),var(--cream); }
.system-hero .breadcrumb { color: var(--brown-mid); margin-bottom: 40px; flex-wrap: wrap; }
.system-hero .breadcrumb a { color: var(--brown-mid); }
.system-hero-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:60px; align-items:center; }
.system-hero h1 { margin-bottom:26px; max-width:650px; }
.system-hero h1 em { color:var(--gold-dark); font-weight:400; }
.system-page p + p { margin-top:16px; }
.system-start-price { font-weight:500; }
.system-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.system-page .btn { text-align:center; justify-content:center; white-space:normal; font-size:.78rem; letter-spacing:.055em; padding:16px 26px; }
.system-overview { background:var(--charcoal); color:var(--cream); padding:42px 34px; border-radius:130px 130px 24px 24px; box-shadow:var(--shadow-lg); border:1px solid var(--brown-mid); }
.system-overview > .section-label { text-align:center; margin-top:24px; }
.system-overview h2 { font-size:clamp(1.6rem,2.5vw,2.2rem); text-align:center; color:var(--cream); }
.system-overview p { color:var(--nude); font-size:.9rem; text-align:center; }
.system-orbit { display:grid; gap:12px; margin:30px 0; }
.system-orbit > div { border:1px solid var(--brown-mid); padding:14px 18px; border-radius:var(--radius-md); font-size:.95rem; }
.system-orbit i { color:var(--gold); margin-right:14px; }
.system-offer { background:var(--beige); padding:44px 0; border-block:1px solid var(--border); }
.system-offer-inner { display:grid; grid-template-columns:1.8fr 1fr; gap:40px; align-items:center; }
.system-offer h2 { font-size:1.8rem; margin-bottom:18px; }
.system-offer p { font-size:.92rem; }
.system-text-link { display:block; text-align:center; margin-top:18px; color:var(--gold-dark); text-decoration:underline; text-underline-offset:4px; }
.system-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:32px; }
.system-card { padding:30px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--cream); }
.section--beige .system-card { background:var(--white); }
.system-card h3 { font-size:1.45rem; margin-bottom:18px; }
.system-card p { font-size:.95rem; }
.system-table-wrap { overflow-x:auto; margin:30px 0; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--white); }
.system-table { border-collapse:collapse; width:100%; text-align:left; min-width:620px; font-size:.93rem; }
.system-table caption { text-align:left; padding:20px 24px; font-weight:600; color:var(--charcoal); }
.system-table th,.system-table td { padding:18px 24px; border-top:1px solid var(--border); vertical-align:top; }
.system-table thead th { background:var(--charcoal); color:var(--cream); font-weight:500; }
.system-table tbody th { font-weight:500; min-width:170px; width:25%; }
.system-table tbody tr:nth-child(even) { background:var(--cream); }
.system-table td:last-child { min-width:130px; }
.system-pricing-summary .system-table { min-width:540px; }
.system-pricing-summary a { color:var(--gold-dark); text-decoration:underline; text-underline-offset:4px; }
.system-note { font-size:.88rem; color:var(--text-light); margin-top:24px; }
.system-packages { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:40px; align-items:start; }
.system-package { display:flex; flex-direction:column; background:var(--cream); border:1px solid var(--border); border-radius:var(--radius-lg); padding:34px; }
.system-package:nth-child(2) { border-color:var(--gold-dark); }
.system-package-top { border-bottom:1px solid var(--border); padding-bottom:25px; margin-bottom:25px; }
.system-package h3 { font-size:2rem; }
.system-price { font-family:var(--font-serif); font-size:2.5rem; color:var(--charcoal); margin:14px 0 6px; line-height:1.3; }
.system-price span { display:block; font-family:var(--font-sans); font-size:.9rem; color:var(--text-body); }
.system-email { color:var(--gold-dark); font-weight:500; margin-bottom:20px; }
.system-checklist { padding:8px 0 20px; }
.system-checklist li { position:relative; padding-left:25px; margin:14px 0; }
.system-checklist li::before { content:'✓'; position:absolute; left:0; color:var(--gold-dark); }
.system-details { border-block-end:1px solid var(--border); padding:20px 0; }
.system-details summary { font-weight:500; color:var(--charcoal); cursor:pointer; padding-right:12px; }
.system-details p { margin-top:16px; }
.system-package-cta { margin-top:28px; }
.system-package-cta .btn { width:100%; }
.system-story { margin-top:32px; padding:32px; background:var(--nude); border-radius:var(--radius-lg); }
.system-story h3 { margin-bottom:20px; }
.system-page .container--narrow h3 { margin:30px 0 18px; }
.system-page .container--narrow > .btn { margin-top:24px; }
.system-steps { list-style:decimal; padding:0 0 0 24px; }
.system-steps li { padding-left:8px; margin-bottom:14px; }
.system-final h2 { color:var(--cream); }
.system-final p { color:var(--nude); margin:24px 0 30px; }
.system-page a:focus-visible,.system-page summary:focus-visible,.system-table-wrap:focus-visible { outline:3px solid var(--gold-dark); outline-offset:5px; }
@media(max-width:960px) { .system-hero-grid { gap:32px; } .system-benefits { grid-template-columns:repeat(2,minmax(0,1fr)); } .system-offer-inner { grid-template-columns:1fr; gap:24px; } .system-offer-inner > div:last-child { justify-self:start; } }
@media(max-width:700px) { .system-page { --section-pad:64px 0; } .system-hero { padding:120px 0 60px; } .system-hero-grid,.system-packages,.system-benefits { grid-template-columns:1fr; } .system-overview { max-width:460px; width:100%; margin:0 auto; } .system-package,.system-card { padding:26px; } .system-actions { flex-direction:column; align-items:stretch; } .system-actions .btn { width:100%; } .system-offer-inner > div:last-child { width:100%; } .system-offer .btn { width:100%; } .system-table th,.system-table td { padding:14px 18px; } }
.system-hero .breadcrumb span { color:var(--brown-mid); }


/* Clear comparison of separate subscriptions and the connected FormaBella tools. */
.system-section-intro { max-width:820px; }
.system-section-intro h2 { max-width:760px; }
.system-replacements { margin-top:40px; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.system-replacement-labels { display:grid; grid-template-columns:1fr 1fr; gap:64px; background:var(--charcoal); color:var(--cream); padding:18px 30px; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
.system-replacement { display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); gap:20px; align-items:center; padding:24px 30px; background:var(--white); }
.system-replacement + .system-replacement { border-top:1px solid var(--border); }
.system-replacement:nth-child(odd) { background:var(--cream); }
.system-tool-examples { display:block; color:var(--brown-mid); font-family:var(--font-serif); font-size:1.35rem; line-height:1.4; }
.system-tool-purpose { display:block; color:var(--text-light); font-size:.85rem; margin-top:4px; }
.system-replacement > i { color:var(--gold-dark); font-size:1.1rem; }
.system-replacement strong { color:var(--charcoal); display:block; font-weight:500; }
.system-plan-tag { display:block; color:var(--gold-dark); font-size:.8rem; margin-top:5px; }
.system-replacement-bottom { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:30px; margin-top:24px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--beige); }
.system-replacement-bottom h3 { font-size:1.5rem; margin-bottom:10px; }
.system-replacement-bottom .btn { flex-shrink:0; }
.system-feature-spotlight { padding:24px; border:1px solid var(--gold-light); border-left:3px solid var(--gold-dark); background:var(--white); border-radius:var(--radius-md); margin-bottom:24px; }
.system-feature-spotlight .section-label { color:var(--gold-dark); font-size:.67rem; letter-spacing:.12em; margin-bottom:12px; }
.system-feature-spotlight h4 { font-size:1.3rem; margin-bottom:12px; }
.system-feature-spotlight p { font-size:.93rem; }
.system-feature-spotlight .system-note { font-size:.82rem; }
@media(max-width:700px) {
  .system-replacement-labels { display:none; }
  .system-replacement { grid-template-columns:1fr; gap:14px; padding:24px; }
  .system-replacement > i { transform:rotate(90deg); justify-self:start; }
  .system-replacement-bottom { flex-direction:column; align-items:stretch; padding:24px; }
  .system-feature-spotlight { padding:20px; }
}

/* The original screenshot sits inside a responsive silver desktop monitor. */
.system-monitor-figure { margin:44px 0 0; }
.system-monitor { margin:0; border:1px solid #bfc0bf; border-radius:20px; overflow:hidden; background:#222322; padding:0 13px; box-shadow:0 24px 50px rgba(44,40,37,.16),inset 0 0 0 2px #e0e1df; }
.system-monitor-camera { display:flex; align-items:center; justify-content:center; height:25px; }
.system-monitor-camera span { width:5px; height:5px; border-radius:50%; background:#101710; box-shadow:0 0 0 2px #303330; }
.system-screen-scroll { overflow-x:auto; overscroll-behavior-x:contain; background:var(--white); border-radius:3px; }
.system-screen-scroll img { width:100%; max-width:none; height:auto; }
.system-screen-scroll:focus-visible { outline:3px solid var(--gold-dark); outline-offset:-3px; }
.system-monitor-chin { margin:13px -13px 0; height:58px; display:flex; align-items:center; justify-content:center; border-top:1px solid #e1e2df; background:linear-gradient(110deg,#d1d3d1,#f0f0ed 45%,#d4d6d3); color:var(--brown-mid); }
.system-monitor-chin span { font-family:var(--font-alt); font-style:italic; font-size:1.15rem; letter-spacing:.04em; }
.system-monitor-stand { display:flex; flex-direction:column; align-items:center; filter:drop-shadow(0 12px 8px rgba(44,40,37,.09)); }
.system-monitor-neck { width:18%; height:64px; background:linear-gradient(90deg,#bbbebb,#e8e9e6 48%,#c3c6c2); clip-path:polygon(22% 0,78% 0,100% 100%,0 100%); }
.system-monitor-base { width:29%; height:13px; border:1px solid #c4c6c2; border-radius:60% 60% 4px 4px; background:linear-gradient(#eceeea,#c8cbc6); }
.system-monitor-figure figcaption { display:flex; justify-content:space-between; align-items:start; gap:24px; padding:24px 0 0; color:var(--text-light); font-size:.85rem; }
.system-monitor-figure figcaption > span { max-width:720px; }
.system-monitor-figure figcaption a { flex-shrink:0; color:var(--gold-dark); text-decoration:underline; text-underline-offset:4px; }
.system-monitor-figure figcaption i { font-size:.7rem; margin-left:5px; }
.system-screen-mobile-hint { display:none; }
@media(max-width:700px) {
  .system-monitor { padding:0 7px; border-radius:12px; }
  .system-monitor-camera { height:15px; }
  .system-monitor-camera span { width:3px; height:3px; }
  .system-screen-scroll img { min-width:700px; }
  .system-monitor-chin { height:32px; margin:7px -7px 0; }
  .system-monitor-chin span { font-size:.85rem; }
  .system-monitor-neck { height:36px; width:22%; }
  .system-monitor-base { width:36%; height:9px; }
  .system-monitor-figure figcaption { flex-direction:column; gap:14px; padding-top:20px; }
  .system-screen-mobile-hint { display:block; margin-top:8px; }
}