@font-face { font-family: "Varela Round"; src: url("fonts/varela-round-hebrew-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Varela Round"; src: url("fonts/varela-round-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Assistant"; src: url("fonts/assistant-hebrew-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; src: url("fonts/assistant-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Assistant"; src: url("fonts/assistant-hebrew-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; src: url("fonts/assistant-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Assistant"; src: url("fonts/assistant-hebrew-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; src: url("fonts/assistant-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Assistant"; src: url("fonts/assistant-hebrew-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; src: url("fonts/assistant-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* kisim.co.il in the design "כיסים אמיתיים" (Guy, 20.10.2026; the mockup:
   site-pending/design-ref/Main.dc.html, not in the repo). The theme follows
   the visitor's phone (prefers-color-scheme). Fonts above: Varela Round and
   Assistant, the app's own woff2 files, served from this site (OFL, in
   fonts/). No request to any other server. */
:root {
  color-scheme: light;
  --bg: #EEF2F8; --band: #E3E9F2; --card: #FFFFFF; --border: #D6DEEA; --text: #1C3354; --muted: #55657E;
  --chip: #FCE3B0; --chip-ink: #5E3F08; --frame: #1C3354;
  --shadow: 0 30px 60px rgba(28,51,84,.22); --shadow-sm: 0 10px 24px rgba(28,51,84,.16);
  --stitch: rgba(28,51,84,.28); --accent-line: rgba(240,170,60,.9);
  --link: #8F5A10; --link-hover: #6E450B;
  --accent: #F0AA3C; --accent-ink: #1A1204;
  --navy: #1C3354; --navy-flap: #2B4A75; --navy-text: #E9EEF7; --navy-muted: #C9D3E4; --navy-gold: #FFD08A;
  --p1-bg: #FCE3B0; --p1-flap: #F6CD7E; --p1-ink: #5E3F08;
  --p2-bg: #D3E2FB; --p2-flap: #B5CDF6; --p2-ink: #1A3870;
  --p3-bg: #CFEBDD; --p3-flap: #A9DCC2; --p3-ink: #14523A;
  --p4-bg: #E1DBF8; --p4-flap: #C9BFF2; --p4-ink: #352C7A;
  --display: "Varela Round", Assistant, system-ui, sans-serif;
  --sans: Assistant, system-ui, "Segoe UI", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0E1524; --band: #131C2E; --card: #172136; --border: #243049; --text: #E9EEF7; --muted: #93A1BA;
    --chip: #3A2808; --chip-ink: #FFD08A; --frame: #05080F;
    --shadow: 0 30px 60px rgba(0,0,0,.55); --shadow-sm: 0 10px 24px rgba(0,0,0,.45);
    --stitch: rgba(255,255,255,.25); --accent-line: rgba(240,170,60,.75);
    --link: #FFC266; --link-hover: #FFD08A;
    --p1-bg: #5A3D0E; --p1-flap: #7A5518; --p1-ink: #FFD08A;
    --p2-bg: #1B3260; --p2-flap: #28457F; --p2-ink: #C9DBFF;
    --p3-bg: #123F2E; --p3-flap: #1C5940; --p3-ink: #B5EED3;
    --p4-bg: #2D2766; --p4-flap: #3E3786; --p4-ink: #D9D4FF;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 18px; line-height: 1.6; overflow-x: clip; }
img, svg, video { max-width: 100%; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2 { font-family: var(--display); font-weight: 400; margin: 0; }
h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.2; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 24px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--card); color: var(--text); padding: 10px 14px; border-radius: 10px; z-index: 10; }
.skip:focus { top: 12px; }
.center { text-align: center; }

/* Header */
.site-head .wrap { padding-block: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand img { width: 40px; height: 40px; border-radius: 11px; }
.brand span { font-family: var(--display); font-size: 26px; }
.brand:hover { color: var(--text); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 16px; font-weight: 600; }
.nav a { text-decoration: none; color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--text); }
.nav .cta { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 10px 20px; }
.nav .cta:hover { color: var(--accent-ink); filter: brightness(1.05); }

/* Hero */
.hero { padding-block: 48px 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.hero-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.chip { align-self: flex-start; font-size: 15px; font-weight: 700; color: var(--chip-ink); background: var(--chip); border-radius: 999px; padding: 6px 14px; }
.hero h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.1; }
.lead { margin: 0; font-size: 21px; color: var(--muted); max-width: 520px; }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.badge { display: inline-block; line-height: 0; border-radius: 10px; }
.badge img { height: 56px; width: auto; }
.badge-play img { height: 82px; margin-block: -13px; }
.small-note { font-size: 15px; color: var(--muted); }
.hero-visual { flex: 0 1 380px; min-width: 0; margin: 0 auto; position: relative; padding: 24px 0; }
.phone { background: var(--frame); border-radius: 44px; padding: 12px; box-shadow: var(--shadow); max-width: 320px; margin: 0 auto; }
.phone img { display: block; width: 100%; height: auto; border-radius: 34px; }
/* Over the screenshot but not over an amount (Guy, 21.10.2026: it hid ₪3,658): the pocket at the
   height of "עסקה אחת דורשת תשומת לב" (37% down the screenshot), the other card on the bottom bar. */
.pocket.float-pocket { position: absolute; top: 38%; right: -18px; width: 168px; }
.float-left { position: absolute; bottom: 36px; left: -22px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 12px 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.float-left span:first-child { font-size: 13px; color: var(--muted); }
.big-num { font-family: var(--display); font-size: 26px; line-height: 1.2; }
@media (max-width: 480px) {
  .pocket.float-pocket { right: 0; }
  .float-left { left: 0; }
}

/* A pocket: corners 8 above and 26 below, a deeper flap, a dashed seam (as in the app). */
.pocket { position: relative; overflow: hidden; background: var(--pk-bg); color: var(--pk-ink); border-radius: 8px 8px 26px 26px; padding: 20px 14px 14px; box-shadow: var(--shadow-sm); }
.pocket::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 11px; background: var(--pk-flap); border-radius: 8px 8px 50% 50%; }
.pocket::after { content: ""; position: absolute; inset: 16px 6px 6px 6px; border: 1.5px dashed var(--stitch); border-radius: 4px 4px 20px 20px; pointer-events: none; }
.pocket > * { position: relative; }
.pocket .label { font-size: 14px; font-weight: 700; }
.pocket .of { font-size: 13px; }
.pocket.big { border-radius: 8px 8px 26px 26px; padding: 40px 28px 30px; display: flex; flex-direction: column; gap: 10px; box-shadow: none; }
.pocket.big::before { height: 16px; border-radius: 8px 8px 50% 50%; }
.pocket.big::after { inset: 24px 9px 9px 9px; border-width: 2px; border-radius: 4px 4px 18px 18px; }
.pocket h3 { margin: 0; font-size: 24px; font-weight: 800; }
.pocket p { margin: 0; font-size: 17px; }
.pk1 { --pk-bg: var(--p1-bg); --pk-flap: var(--p1-flap); --pk-ink: var(--p1-ink); }
.pk2 { --pk-bg: var(--p2-bg); --pk-flap: var(--p2-flap); --pk-ink: var(--p2-ink); }
.pk3 { --pk-bg: var(--p3-bg); --pk-flap: var(--p3-flap); --pk-ink: var(--p3-ink); }
.pk4 { --pk-bg: var(--p4-bg); --pk-flap: var(--p4-flap); --pk-ink: var(--p4-ink); }

/* Three pockets */
.three { padding-block: 24px 80px; display: flex; flex-direction: column; gap: 32px; }
.three h2 { text-align: center; }
.pockets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; }

/* Capture and import */
.band { background: var(--band); padding: 80px 0; }
.split { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.split.reverse { flex-wrap: wrap-reverse; }
.split-text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.split-visual { flex: 0 1 320px; min-width: 0; margin: 0 auto; }
.split-visual .phone { max-width: none; }
.split-text > p { margin: 0; font-size: 19px; color: var(--muted); }
.sources { display: flex; flex-wrap: wrap; gap: 10px; }
.sources span { background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: 16px; }
.import-card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 8px; }
.import-card > div { border: 2px dashed var(--accent-line); border-radius: 16px; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.import-card b { font-weight: 800; font-size: 18px; }
.import-card span { font-size: 16px; color: var(--muted); }

/* Budget */
.budget { padding-block: 80px; }
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks li::before { content: ""; flex: 0 0 12px; height: 12px; margin-top: 9px; border-radius: 3px 3px 7px 7px; background: var(--accent); }

/* Video */
.video-sec { padding-block: 0 80px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
/* Square, as the video is (Guy, 21.10.2026): the video fills the frame inside the seam. */
.video-frame { width: 100%; max-width: 560px; aspect-ratio: 1 / 1; background: var(--navy); border-radius: 28px; padding: 10px; box-shadow: var(--shadow); }
/* No seam of its own: the poster and the video have theirs (Guy, 21.10.2026). */
.video-frame > div { height: 100%; border-radius: 20px; }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; background: #10203A; }
.video-note { margin: 0; font-size: 16px; color: var(--muted); text-align: center; }

/* Privacy: the big navy pocket, the same in both themes */
.privacy-sec { padding: 0 24px 80px; }
.privacy-pocket { max-width: 1112px; margin: 0 auto; position: relative; background: var(--navy); color: var(--navy-text); border-radius: 14px 14px 48px 48px; padding: 64px 40px 48px; overflow: hidden; }
.privacy-pocket::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 22px; background: var(--navy-flap); border-radius: 14px 14px 50% 50%; }
.privacy-pocket::after { content: ""; position: absolute; inset: 32px 12px 12px 12px; border: 2px dashed rgba(240,170,60,.75); border-radius: 8px 8px 38px 38px; pointer-events: none; }
.privacy-pocket > div { position: relative; display: flex; flex-direction: column; gap: 24px; }
.privacy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 22px; }
.privacy-grid div { display: flex; flex-direction: column; gap: 6px; }
.privacy-grid b { font-weight: 800; font-size: 19px; color: var(--navy-gold); }
.privacy-grid span { font-size: 16px; color: var(--navy-muted); }
.privacy-pocket a { align-self: flex-start; color: var(--navy-gold); font-weight: 700; font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; }
.privacy-pocket a:hover { color: #FFE2B0; }
@media (max-width: 560px) { .privacy-pocket { padding: 56px 24px 44px; } }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; padding: 0 24px 80px; display: flex; flex-direction: column; gap: 14px; }
.faq h2 { margin-bottom: 10px; text-align: center; }
.faq details { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px 22px; }
.faq summary { font-weight: 800; font-size: 19px; cursor: pointer; }
.faq details p { margin: 10px 0 0; color: var(--muted); }

/* Footer */
.site-foot { border-top: 1px solid var(--border); background: var(--band); }
.site-foot .wrap { padding-block: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; font-size: 15px; color: var(--muted); }
.site-foot .who { display: flex; align-items: center; gap: 10px; }
.site-foot .who img { width: 32px; height: 32px; border-radius: 9px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-foot nav a { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
.site-foot nav a:hover { color: var(--text); }
.site-foot .tm { padding-top: 0; font-size: 13px; }
.site-foot .tm p { margin: 0; }

/* The privacy and terms pages */
.doc { padding-block: 24px 72px; }
.doc .wrap { max-width: 820px; }
.doc h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.15; margin-bottom: 8px; }
.doc h2 { font-size: clamp(24px, 3vw, 30px); margin: 40px 0 12px; }
.doc h3 { font-size: 20px; margin: 28px 0 8px; }
.doc .meta { color: var(--muted); font-size: 16px; margin-top: 0; }
.doc ul, .doc ol { padding-inline-start: 24px; }
.doc li { margin-bottom: 8px; }
.doc p, .doc li { overflow-wrap: anywhere; }
.doc table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--border); padding: 8px 10px; text-align: start; }

/* Support: its table of contents */
.toc { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px 22px; margin: 0 0 8px; }
.toc ol { margin: 6px 0 0; }
.toc a { min-height: 32px; display: inline-flex; align-items: center; }

/* The 404 page's button */
.button { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.button:hover { color: var(--accent-ink); filter: brightness(1.05); }

/* /app/: the download page */
.app-page { padding-block: 72px 96px; text-align: center; }
.app-page h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.15; }
.app-page p { color: var(--muted); font-size: 19px; max-width: 520px; margin: 14px auto 0; }
.app-page .badges { justify-content: center; margin-top: 28px; }