/* Landing pages that answer a search intent ("תוכנה לניהול קליניקה", "תוכנה לקוסמטיקאיות" ...), 20.9.2026.
   Loaded AFTER legal.css and built on its tokens, so these pages stay one family with the rest of
   the site. legal.css is a 760px document shell; a landing page needs room for a screenshot, a
   feature grid and a comparison table, so the measure widens to 1060px and the running text keeps
   its own 68ch column inside it. Light only, like every page of the site (legal.css: color-scheme). */

:root { --acc-ink: #3d6dc3; --accsoft: #edf4ff; --tint: #f4f6fe; --ok: #1d7a4c; --no: #9a3b3b; }

.topbar .in, main, main + footer.legal { max-width: 1060px; }
.topbar .in { justify-content: space-between; }
.topbar nav { display: flex; align-items: center; gap: 4px; }
.topbar nav a { font-weight: 600; font-size: 14px; color: var(--ink2); padding: 6px 10px; border-radius: 9px; }
.topbar nav a:hover { background: var(--accsoft); color: var(--acc-ink); }
.topbar nav a.go { background: var(--acc-ink); color: #fff; padding: 8px 16px; border-radius: 999px; }
.topbar nav a.go:hover { background: #2f5cb0; color: #fff; }
@media (max-width: 720px) { .topbar nav a:not(.go) { display: none; } }

main { padding-top: 26px; }
.crumbs { font-size: 13px; color: var(--mut); margin: 0 0 18px; }
.crumbs a { color: var(--mut); }
.crumbs span { margin: 0 6px; opacity: .6; }

/* hero: the phrase people searched for, what the product is in one paragraph, one action */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 34px; align-items: center; margin: 0 0 40px; }
.hero h1 { text-align: start; font-size: clamp(1.9rem, 4.2vw, 2.6rem); margin: 0 0 14px; }
.hero .lead { font-size: 17px; color: var(--ink2); margin: 0 0 18px; max-width: 56ch; }
.hero .acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.btn-p, .btn-g { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 12px; font-weight: 700; font-size: 15.5px; text-decoration: none; }
.btn-p { background: var(--acc-ink); color: #fff; box-shadow: 0 10px 24px -14px rgba(42, 86, 198, .8); }
.btn-p:hover { background: #2f5cb0; }
.btn-g { background: var(--card); color: var(--acc-ink); border: 1px solid #cfd8ee; }
.btn-g:hover { background: var(--accsoft); }
.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ticks li { font-size: 13.5px; color: var(--ink2); margin: 0; }
.ticks li::before { content: "✓"; color: var(--ok); font-weight: 700; margin-inline-end: 6px; }
.hero figure { margin: 0; }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 24px 50px -30px rgba(22, 53, 126, .45); background: var(--card); }
.shot figcaption { font-size: 13px; color: var(--mut); margin-top: 8px; text-align: center; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; gap: 22px; } .hero h1 { text-align: center; } .hero .lead { margin-inline: auto; text-align: center; } .hero .acts, .ticks { justify-content: center; } }

/* in-page contents */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.toc li { margin: 0; }
.toc a { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--ink2); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; text-decoration: none; }
.toc a:hover { border-color: #cfd8ee; color: var(--acc-ink); }

section { margin: 46px 0 0; scroll-margin-top: 20px; }
section > h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.3; margin: 0 0 12px; letter-spacing: -.015em; text-wrap: balance; }
section > h2::before { content: ""; display: block; width: 34px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--acc-ink), #6ea8ff); margin: 0 0 12px; }
.prose { max-width: 68ch; }
.prose p, .prose li { font-size: 16px; }
.prose h3 { font-size: 1.05rem; margin: 22px 0 6px; color: var(--ink); }

/* what the product covers */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; margin: 18px 0 0; }
.feat { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.feat h3 { margin: 0 0 6px; font-size: 1.04rem; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.feat h3 .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--accsoft); display: grid; place-items: center; }
.feat h3 .ic svg { width: 19px; height: 19px; stroke: var(--acc-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feat p { margin: 0; font-size: 15px; }
.feat p + p { margin-top: 8px; }

/* screenshots in the running page */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 20px 0 0; }
/* an odd number of screenshots: the first takes the full width, so none is left alone in half a row */
.shots .shot:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) { .shots { grid-template-columns: 1fr; } }
.tablewrap + .prose { margin-top: 16px; }

/* the comparison */
.tablewrap { overflow-x: auto; margin: 18px 0 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
.cmp th, .cmp td { padding: 12px 14px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th { background: var(--tint); font-size: 13.5px; color: var(--ink); }
.cmp thead th:last-child { background: var(--accsoft); color: var(--acc-ink); }
.cmp tbody th { font-weight: 600; color: var(--ink); width: 24%; }
.cmp td:last-child { background: #fafcff; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp .y { color: var(--ok); font-weight: 700; }
.cmp .n { color: var(--no); font-weight: 700; }

/* who it is for */
.segs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0 0; }
.seg { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.seg:hover { border-color: #b9c8ee; transform: translateY(-2px); }
.seg b { display: block; color: var(--ink); font-size: 1.02rem; margin: 0 0 4px; }
.seg span { font-size: 14.5px; color: var(--ink2); }
.seg i { display: block; font-style: normal; font-weight: 600; font-size: 13.5px; color: var(--acc-ink); margin-top: 8px; }

/* price band */
.priceband { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 0; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.plan .n { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--acc-ink); }
.plan .p { font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height: 1.2; margin: 2px 0; }
.plan .p small { font-size: .9rem; font-weight: 500; color: var(--mut); }
.plan p { margin: 0; font-size: 14.5px; }
.fine { font-size: 13.5px; color: var(--mut); margin: 12px 0 0; }

/* FAQ */
.faq { margin: 16px 0 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 600; font-size: 16px; color: var(--ink); display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 20px; line-height: 1; color: var(--acc-ink); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.faq .a { padding: 0 20px 16px; max-width: 72ch; }
.faq .a p { margin: 0 0 8px; font-size: 15.5px; }
.faq .a p:last-child { margin: 0; }

/* closing call and further reading */
.close { margin: 50px 0 0; background: linear-gradient(135deg, #24388f, #2f5fc4); border-radius: 20px; padding: 34px 24px; text-align: center; color: #fff; }
.close h2 { color: #fff; margin: 0 0 8px; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.close p { color: rgba(255, 255, 255, .9); margin: 0 auto 18px; max-width: 54ch; font-size: 16px; }
.close .btn-p { background: #fff; color: #24388f; box-shadow: none; }
.close .btn-p:hover { background: #eef3ff; }
.close a.q { color: #fff; font-size: 14.5px; margin-inline-start: 14px; }
.more { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.more li { margin: 0; }
.more a { display: block; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink); }
.more a:hover { border-color: #b9c8ee; color: var(--acc-ink); }
.more a small { display: block; font-weight: 400; color: var(--mut); font-size: 13px; margin-top: 3px; }
.stamp { font-size: 13px; color: var(--mut); margin: 34px 0 0; text-align: center; }

@media (prefers-reduced-motion: reduce) { .seg, .faq summary::after { transition: none; } }
@media print { .topbar nav, .close, .wa-float { display: none; } }