/* The marketing site fitos.co.il (4.8.15, D-512, D-514): its own page layout (an approved deviation from the UI map,
   for the site only), built only from the system's tokens (tokens.css, copied at build time) — no colour of its own. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-page);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-xs); }

.skip { position: absolute; inset-inline-start: var(--space-4); top: -100px; background: var(--bg-surface);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 10; }
.skip:focus { top: var(--space-2); }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--space-4); }

/* The top of every page */
.site-head { background: var(--bg-surface); border-bottom: 1px solid var(--border-default); position: sticky; top: 0; z-index: 5; }
.site-head .wrap { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; flex-wrap: wrap; }
.site-head .logo img { height: 28px; width: auto; }
.site-nav { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-inline-start: auto; }
.site-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none;
  font-weight: var(--font-weight-semibold); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--primary); background: var(--primary-alpha-10); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px;
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent;
  font: inherit; font-weight: var(--font-weight-bold); text-decoration: none; cursor: pointer; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn-ghost { background: var(--bg-surface); color: var(--primary); border-color: var(--border-default); }
.btn[disabled] { opacity: 0.6; cursor: wait; }

/* Sections */
main { display: block; }
.hero { background: var(--bg-surface); border-bottom: 1px solid var(--border-default); padding-block: var(--space-10); }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.2; margin: 0 0 var(--space-3); }
.hero .lead { font-size: 1.2rem; color: var(--text-secondary); margin: 0 0 var(--space-6); max-width: 46rem; }
.hero .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.band { padding-block: var(--space-10); }
.band + .band { border-top: 1px solid var(--border-subtle); }
.band h2 { font-size: var(--font-size-2xl); margin: 0 0 var(--space-4); }
.band h3 { font-size: var(--font-size-lg); margin: 0 0 var(--space-2); }
.muted { color: var(--text-secondary); }

.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-sm); }
.card ul, .card ol { margin: 0; padding-inline-start: var(--space-5); }
.card li + li { margin-top: var(--space-2); }

.feature { display: grid; gap: var(--space-6); align-items: start; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.feature blockquote { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-inline-start: 4px solid var(--primary);
  background: var(--primary-alpha-10); border-radius: var(--radius-sm); color: var(--text-secondary); }
.feature ul { padding-inline-start: var(--space-5); margin: 0; }
.feature li + li { margin-top: var(--space-2); }
.shot { margin: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-default); box-shadow: var(--shadow-md);
  background: var(--bg-surface); }
.shot figcaption { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); color: var(--text-muted); }

.cta { text-align: center; background: var(--bg-surface); }
.cta .actions { justify-content: center; display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* The contact / demo form */
.form { display: grid; gap: var(--space-4); max-width: 40rem; }
.form .row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.field { display: grid; gap: var(--space-1); }
.field label, .field legend { font-weight: var(--font-weight-semibold); }
.field input, .field textarea, .field select { font: inherit; padding: var(--space-2) var(--space-3); min-height: 44px; border-radius: var(--radius-sm);
  border: 1px solid var(--input-border); background: var(--bg-surface); color: var(--text-primary); }
.field textarea { min-height: 7rem; resize: vertical; }
.field .hint { font-size: var(--font-size-sm); color: var(--text-muted); }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice { display: flex; gap: var(--space-4); flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.choice label, .consent { display: inline-flex; gap: var(--space-2); align-items: flex-start; font-weight: var(--font-weight-normal); }
.choice input, .consent input { width: 20px; height: 20px; margin-top: 3px; }
.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid; }
.notice[hidden] { display: none; }
.notice.ok { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.notice.err { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }

.prose { max-width: 46rem; }
.prose h2 { font-size: var(--font-size-xl); margin: var(--space-8) 0 var(--space-2); }

.site-foot { background: var(--bg-surface); border-top: 1px solid var(--border-default); padding-block: var(--space-6); font-size: var(--font-size-sm);
  color: var(--text-muted); }
.site-foot .wrap { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.site-foot nav { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-inline-start: auto; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* A card that is a link: the whole card opens it, the title shows it */
a.card { display: block; color: inherit; text-decoration: none; }
a.card h3 { color: var(--primary); }
a.card:hover { border-color: var(--primary); }

/* The pricing page (4.8.15 stage B, D-518) */
.grid.prices { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
.prices .card h2 { font-size: var(--font-size-lg); }
.price-table { width: 100%; border-collapse: collapse; }
.price-table caption { text-align: start; color: var(--text-muted); font-size: var(--font-size-sm); margin-bottom: var(--space-2); }
.price-table th, .price-table td { padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); vertical-align: top; }
.price-table th { text-align: start; font-weight: var(--font-weight-normal); }
.price-table td { text-align: end; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.price-table .next { display: block; font-weight: var(--font-weight-normal); font-size: var(--font-size-sm); color: var(--text-secondary); }
#prices > .notice, #prices-body > .muted, #prices-body > .notice { margin: 0 0 var(--space-4); }
.calc-title { margin-top: var(--space-8); }
.calc { max-width: none; }
.calc output { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-md); background: var(--primary-alpha-10); }