/* Hebrew For Beginners: shared styles for every page.
   Layout follows the original Wix site (social row, centered logo, colored tab bar,
   photo hero with two boxes, course grid, team band, dark footer) with the
   rounded, Mediterranean look of design option C. Light theme by choice. */
:root {
  --bg: #f4f9f9;
  --tile: #ffffff;
  --ink: #1d2b2f;
  --soft: #55696d;
  --line: #d6e8e7;
  --brand: #0b7f88;        /* tab bar, buttons, headings accents */
  --brand-dark: #08616a;
  --brand-ink: #ffffff;
  --sun: #ffc83d;          /* main call to action */
  --sun-ink: #1d2b2f;
  --coral: #ff6f59;        /* sales, badges */
  --coral-ink: #2a0e08;
  --foot: #1f2a2d;
  --head: "Jost", "Futura", "Futura PT", "Century Gothic", sans-serif;
  --body: "Helvetica Neue", Helvetica, "Arimo", Arial, sans-serif;
  --he: "Noto Sans Hebrew", "Arial Hebrew", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 300 17px/1.6 var(--body); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--brand); }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }
b, strong { font-weight: 600; }
[lang="he"] { font-family: var(--he); font-weight: 400; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 16px/1.1 var(--head); letter-spacing: .02em; text-decoration: none; padding: 14px 24px; border-radius: 999px; border: 0; cursor: pointer; transition: transform .15s, filter .15s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn-sun { background: var(--sun); color: var(--sun-ink); }
.btn-brand { background: var(--brand); color: var(--brand-ink); }
.btn-white { background: #fff; color: var(--brand-dark); }
.btn-line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }

/* 1. Announcement bar, top of every page */
.annbar { background: var(--coral); color: var(--coral-ink); font-size: 14px; font-weight: 600; }
.annbar .wrap { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding-block: 8px; text-align: center; }
.annbar a { text-decoration: none; }
.annbar .tag { font: 500 12px var(--head); text-transform: uppercase; letter-spacing: .08em; background: var(--coral-ink); color: var(--coral); padding: 2px 9px; border-radius: 999px; flex: none; }
.annbar u { text-underline-offset: 3px; }

/* 2. Social row + centered logo */
.masthead { background: #fff; }
.masthead .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding-block: 10px; }
.socials { display: flex; gap: 6px; }
.socials a { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.socials svg { width: 15px; height: 15px; fill: currentColor; }
.brandmark { display: grid; justify-items: center; text-decoration: none; gap: 2px; }
.brandmark img { width: 64px; height: 64px; }
.brandmark span { font: 400 13px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.masthead .cta { justify-self: end; padding: 10px 16px; font-size: 14px; white-space: nowrap; }
@media (max-width: 640px) {
  .masthead .wrap { grid-template-columns: auto 1fr auto; }
  .brandmark { grid-column: 1; grid-row: 1; justify-items: start; grid-auto-flow: column; align-items: center; gap: 8px; }
  .brandmark img { width: 44px; height: 44px; }
  .brandmark span { font-size: 14px; letter-spacing: .04em; text-transform: none; color: var(--ink); font-weight: 500; }
  .socials { display: none; }
  .masthead .cta { grid-column: 3; }
}

/* 3. Tab bar */
.tabbar { background: var(--brand); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; box-shadow: 0 2px 10px rgba(8, 60, 66, .18); }
.tabbar ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabbar ul::-webkit-scrollbar { display: none; }
.tabbar a { display: block; color: #eaf7f6; text-decoration: none; font: 400 16px var(--head); padding: 13px 16px; white-space: nowrap; border-bottom: 3px solid transparent; }
.tabbar a:hover { color: #fff; background: var(--brand-dark); }
.tabbar a[aria-current="page"] { color: #fff; border-bottom-color: var(--sun); font-weight: 500; }
@media (max-width: 900px) { .tabbar ul { justify-content: flex-start; padding-inline: 8px; } .tabbar a { padding: 12px 12px; font-size: 15px; } }

/* Page title band (inner pages) */
.pagehead { padding-block: 40px 8px; text-align: center; }
.pagehead h1 { font-size: clamp(32px, 6vw, 46px); font-weight: 300; }
.pagehead p { color: var(--soft); max-width: 56ch; margin: 10px auto 0; }

/* Section headings, centered like the original */
.sec { padding-block: 48px; }
.sec-title { text-align: center; font-size: clamp(30px, 5.5vw, 40px); font-weight: 300; margin-bottom: 8px; }
.sec-sub { text-align: center; color: var(--soft); max-width: 56ch; margin: 0 auto 28px; }

/* Tiles and grids */
.tile { background: var(--tile); border: 1px solid var(--line); border-radius: 22px; }
.grid3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.badge { display: inline-block; justify-self: start; font: 500 12px var(--head); letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--brand-dark); }
.badge.free { background: var(--sun); color: var(--sun-ink); }
.badge.hot { background: var(--coral); color: var(--coral-ink); }
.sample { font: 500 11px var(--head); letter-spacing: .08em; text-transform: uppercase; border: 1.5px dashed var(--soft); color: var(--soft); padding: 1px 8px; border-radius: 999px; }

/* Course cards (original: image, title, "Read More") */
.course { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; transition: transform .15s, box-shadow .15s; position: relative; }
.course:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(8, 60, 66, .12); }
.course img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.course .in { padding: 18px; display: grid; gap: 8px; flex: 1; align-content: start; text-align: center; justify-items: center; }
.course h3 { font-size: 21px; color: var(--brand-dark); }
.course p { font-size: 15px; color: var(--soft); }
.course .meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 14px; color: var(--soft); font-variant-numeric: tabular-nums; }
.course .meta b { color: #c98a00; }
.course .more { margin-top: auto; padding-top: 6px; font: 500 15px var(--head); color: var(--ink); }
.course .ribbon { position: absolute; top: 14px; left: 0; background: var(--sun); color: var(--sun-ink); font: 500 14px var(--head); letter-spacing: .04em; padding: 5px 14px 5px 12px; border-radius: 0 999px 999px 0; }
.course .ribbon.free { background: var(--coral); color: var(--coral-ink); }

/* Footer (dark, like the original) */
.foot { background: var(--foot); color: #cfdcdd; font-size: 15px; margin-top: 40px; }
.foot .wrap { display: grid; gap: 28px; padding-block: 36px; }
.foot nav { display: grid; gap: 6px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: #fff; }
.foot h4 { color: #fff; font-size: 18px; margin-bottom: 8px; }
.foot .socials a { background: #fff; color: var(--foot); }
.foot .copy { border-top: 1px solid #34413f; padding-block: 14px; text-align: center; font-size: 13px; color: #94a7a8; }
@media (min-width: 860px) { .foot .wrap { grid-template-columns: 1fr 2fr; } }
.foot-follow p { margin-bottom: 14px; color: #a9bcbd; }

/* Follow buttons: each in its network's own color */
.follow { display: flex; flex-wrap: wrap; gap: 10px; }
.follow .fbtn { flex: 1 1 160px; }
.fbtn { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px; color: #fff; text-decoration: none; background: var(--c); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 35%, transparent); transition: transform .15s, box-shadow .15s; }
.fbtn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 45%, transparent); }
.fic { width: 40px; height: 40px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; }
.fic svg { width: 22px; height: 22px; fill: currentColor; }
.ftx { display: grid; line-height: 1.15; }
.ftx small { font: 400 12px var(--body); opacity: .85; }
.ftx b { font: 500 18px var(--head); }
.fb-youtube { --c: #e62117; }
.fb-instagram { --c: #d62976; background: linear-gradient(45deg, #f58529, #dd2a7b 50%, #8134af); }
.fb-facebook { --c: #1877f2; }


/* Announcement posts (home + news page) */
.post { padding: 20px; display: grid; gap: 8px; align-content: start; }
.post .hd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--soft); }
.post h3 { font-size: 22px; }
.post p { color: var(--soft); }
.post .go { font: 500 15px var(--head); color: var(--brand-dark); text-decoration: none; }
.post.big { background: var(--coral); border-color: var(--coral); color: var(--coral-ink); padding: 26px; gap: 12px; }
.post.big .hd, .post.big p { color: var(--coral-ink); }
.post.big .badge { background: var(--coral-ink); color: var(--coral); }
.post.big .sample { border-color: var(--coral-ink); color: var(--coral-ink); }
.post.big h3 { font-size: clamp(26px, 5vw, 36px); font-weight: 500; }
.post.big .btn { justify-self: start; margin-top: 4px; }

/* The header placeholder must not trap the sticky tab bar. */
#site-top { display: contents; }
.home .annbar { display: none; }  /* the home page opens with the full announcement */

/* Store badges (official artwork, equal height) */
.stores { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.store { display: block; line-height: 0; border-radius: 9px; transition: transform .15s; }
.store:hover { transform: translateY(-1px); }
.store img { height: 46px; width: auto; display: block; }

/* Released app card */
.appcard { padding: 22px; display: grid; gap: 14px; align-content: start; scroll-margin-top: 70px; }
.appcard .top { display: flex; align-items: center; gap: 16px; }
.appcard .icon { width: 84px; height: 84px; border-radius: 22%; flex: none; box-shadow: 0 6px 16px rgba(8, 60, 66, .18); }
.appcard h3 { font-size: 24px; font-weight: 500; }
.appcard .sub { color: var(--soft); font-size: 15px; }
.appcard p { color: var(--soft); }

/* Early access block */
.early { padding: 24px; display: grid; gap: 18px; border: 2px dashed var(--brand); background: color-mix(in srgb, var(--brand) 5%, #fff); }
.early .head { display: grid; gap: 8px; }
.early h3 { font-size: 26px; font-weight: 500; }
.early .head p { color: var(--soft); max-width: 70ch; }
.eapps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.eapps li { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px; }
.eapps img { width: 60px; height: 60px; border-radius: 22%; flex: none; }
.eapps b { display: block; font: 500 17px var(--head); }
.eapps span { font-size: 14px; color: var(--soft); }
.early .foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
@media (min-width: 860px) { .early { padding: 32px; } }
@media (max-width: 420px) { .store img { height: 40px; } .appcard, .show { padding: 16px; } }