/* V6 - light-blue (sky) colour touches on top of style.css. Used only by index-v6.html.
   Colour only: same shapes as the original. Her rules (7.11):
   - all lines, dashes and frames stay BLACK, as in the original
   - inner boxes white, page = warm paper with a slightly stronger warm grid
   - headings all black
   - sky only for accents: buttons, ticks, numbers, scissors, hand-written notes, role labels */

:root {
  --sky: #1d9bf0;
  --sky-d: #0a7bcc;
  --navy: #0d2137;
  --paper: #faf8f3;    /* warm paper, a touch warmer than the original #fbfbf7 */
  --grid: #e8e4da;     /* warm grid, a bit stronger than the original #ecece4 */
  --rule: #e6e1d7;
  /* --blue is the "pen" (hand-written notes, role labels, ticks) -> sky.
     --red / --green were the coloured audience lines -> black, so lines and frames stay black. */
  --blue: var(--sky-d);
  --red: var(--ink);
  --green: var(--ink);
}

body { background-color: var(--paper); }

/* headings all black; the .hl spans stay so colour can come back in one line */
.hl { color: inherit; }

/* cut lines: black dashed line, sky scissors */
.cut::after { color: var(--sky); }
/* no scissors on the cut lines right above and below the dark bands (her ask 7.11); the dashed line stays */
hr.cut:has(+ section.start)::after, section.start + hr.cut::after,
hr.cut:has(+ section.closing)::after, main:has(> section.closing:last-child) + hr.cut::after { display: none; }

/* ---------- nav ---------- */
.nav { background: rgba(250, 248, 243, .94); }
/* nav link: black like the original, sky only on hover (her ask 7.11) */
.nav .cta:hover { color: var(--sky); border-color: var(--sky); }
.aud-menu a svg { color: var(--sky); }
.lg-biz, .lg-school, .lg-you { --c: var(--sky); }   /* logo labels stay sky */

/* ---------- buttons: sky fill, same square shape ---------- */
.btn { background: var(--sky); }
.btn:hover { background: var(--sky-d); }
.btn.ghost:hover { border-color: var(--sky-d); color: var(--sky-d); background: transparent; }

/* ---------- hero drawing: one sky line, the dashed and dotted lines black ---------- */
.hero .pat path:nth-child(1) { stroke: var(--sky); }
.hero .pat path:nth-child(2), .hero .pat path:nth-child(3) { stroke: var(--ink); }

/* ---------- dashed / dotted lines that used the pen colour: back to black ---------- */
.piece:nth-child(2) { border-color: var(--ink); }
.msg.ai { border-color: var(--ink); }
.msg.ai small { color: var(--sky-d); }
.layers li:nth-child(2) { border-top-color: var(--ink); }
.team .arrow { border-inline-start-color: var(--ink); }
.team .arrow::after { border-top-color: var(--ink); }
.opt:hover, .opt:has(input:checked) { border-color: var(--ink); }
.dopt-soft button.on { color: var(--sky-d); border-bottom-color: var(--sky); }
.dopt-loop { color: var(--ink); }
.made span { border-color: var(--ink); }

/* ---------- sky accents ---------- */
.layers .ln { -webkit-text-stroke-color: var(--sky); }
.layers li.all .ln { color: var(--sky); }
.journey .n { color: var(--sky-d); }
.journey li:last-child .n { background: var(--sky); border-color: var(--ink); color: #fff; }
.journey .len { color: var(--sky-d); }
.usecase .cat { color: var(--sky-d); }
.usecase .ours .who { color: var(--sky-d); }
.bar i { background: var(--sky); }
.dopt-arrow:hover { background: var(--sky); border-color: var(--sky); color: #fff; }

/* ---------- join band: navy instead of black ---------- */
section.start { background: var(--navy); }
.start .note { color: #8fd0fb; }

/* ---------- price: dark navy card (her screenshot 7.11) ---------- */
.price-card { border-color: var(--ink); color: #fff; background: linear-gradient(180deg, #082a3d 0%, #0b2134 100%); }
.price-card .offer-eye { color: var(--sky); }
.price-card-txt a { color: #8fd0fb; }
.price-card-buy { border-inline-start-color: rgba(255, 255, 255, .25); }
.price-card .price-steps div { border-color: rgba(255, 255, 255, .2); }
.price-card .price-steps dt { color: var(--sky); }
.price-card .price-steps dd { color: #e3edf4; }
.price-card .offer-sum { color: #fff; }
.price-card .offer-note { color: #b9cad8; }
@media (max-width: 900px) { .price-card-buy { border-top-color: rgba(255, 255, 255, .25); } }

/* ---------- FAQ: sky plus sign ---------- */
.faq summary::after { color: var(--sky); }

/* ---------- closing: navy band ---------- */
section.closing { background: var(--navy); color: #fff; }
.closing .h2 { color: #fff; }
.closing .kicker { color: #8fd0fb; }
.closing .lead { color: #dbe8f3; }

/* ---------- footer ---------- */
footer a:hover, .more-prof a:hover { color: var(--sky-d); border-color: var(--sky); }

/* ---------- team photos (her Drive folder, 7.11): round face beside the name, cards stay square ---------- */
.lead-agent, .ag { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; }
.lead-agent > *:not(.face), .ag > *:not(.face) { grid-column: 2; }
.face { grid-column: 1; grid-row: 1 / span 3; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--ink); background: #fff; }
.lead-agent .face { width: 72px; height: 72px; }
.ag b { margin-inline-end: 0; }

/* ---------- tighter spacing (her ask 7.11: "a bit less space") ---------- */
section { padding: 56px 0; }
.hero { padding: 30px 0 36px; }
section.start { padding: 72px 0; }
.split-hero { padding: 46px 0 44px; }   /* v6-home */
.home-sec { padding: 50px 0; }          /* v6-home */
@media (max-width: 900px) { section { padding: 46px 0; } }
@media (max-width: 640px) {
  .hero { padding: 24px 0 30px; }
  section.start { padding: 54px 0; }
  .split-hero { padding: 32px 0 30px; }
  .home-sec { padding: 40px 0; }
}

/* ---------- hero video instead of the pattern drawing (index.html, 7-8.11; drawing kept as a comment in the page).
   Trial 2 (her yes 8.11): the video sits UNDER the hero text at full width, big enough to read. ---------- */
.hero:has(.hero-vid) .wrap { grid-template-columns: minmax(0, 1fr); }
.hero:has(.hero-vid) .copy { grid-column: 1; grid-row: 1; }
.hero .hero-vid-wrap { grid-column: 1; grid-row: 2; position: relative; margin-top: 40px; }
.hero .hero-vid-wrap .hero-vid { margin-top: 0; }
/* big play button over the poster (click to play, 8.11) */
.vid-play { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; display: flex; align-items: center; gap: 12px; padding: 14px 26px 14px 22px; border: 0; background: var(--sky); color: #fff; font: inherit; font-weight: 700; font-size: 18px; cursor: pointer; box-shadow: 0 8px 24px rgba(13, 33, 55, .25); }
.vid-play svg { width: 26px; height: 26px; fill: currentColor; }
.vid-play:hover { background: var(--sky-d); }
.vid-play[hidden] { display: none; }
.hero .hero-vid { grid-column: 1; grid-row: 2; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 40px; border: 1.5px solid var(--ink); background: #fff; }
/* hero text centred above the video (her ask 8.11) */
.hero:has(.hero-vid) .copy { text-align: center; max-width: 820px; margin-inline: auto; }
.hero:has(.hero-vid) h1 { text-align: center; }
.hero:has(.hero-vid) .lead, .hero:has(.hero-vid) .cta-note, .hero:has(.hero-vid) .eyebrow-kw { margin-inline: auto; }
.hero:has(.hero-vid) .lead { max-width: 62ch; }
.hero:has(.hero-vid) .cta-row { justify-content: center; }
@media (max-width: 900px) { .hero:has(.hero-vid) .wrap { display: flex; flex-direction: column; } .hero:has(.hero-vid) .copy { order: 1; } .hero .hero-vid-wrap { order: 2; } }
@media (max-width: 640px) { .hero .hero-vid-wrap { margin-top: 26px; } .vid-play { font-size: 16px; padding: 11px 20px 11px 16px; } }

/* ---------- "מכאן, המערכת שלכם." centred under the steps (her ask 7.11) ---------- */
.journey-end { margin-inline: auto; text-align: center; }
.journey-end p { margin-inline: auto; }
.journey-more { text-align: center; max-width: none; }

/* ---------- menu centred on wide screens, so it no longer shifts with the logo width per page (her ask 8.11) ----------
   logo | (links + "פתרונות") centred | CTA */
@media (min-width: 901px) {
  .nav .wrap { display: grid; grid-template-columns: 1fr auto auto 1fr; column-gap: 22px; }
  .nav .logo { justify-self: start; }
  .nav .nav-links { grid-column: 2; }
  .nav .aud { grid-column: 3; margin-inline-start: 0; }
  .nav .cta { grid-column: 4; justify-self: end; margin-inline-start: 0; }
}

/* ---------- closing + footer = one navy block (her ask 8.11) ----------
   closing about a third shorter, smaller heading; professions + legal links inside the navy; a thin line, then the credit */
section.closing { padding: 58px 0 40px; }
.closing .h2 { font-size: 52px; max-width: 22ch; }
.closing .lead { margin-bottom: 22px; }
main:has(> section.closing:last-child) + hr.cut { display: none; }
footer.foot { background: var(--navy); color: #c9d7e3; }
footer.foot .foot-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 30px 32px 24px; font-size: 15px; color: #c9d7e3; }
footer.foot .foot-grid::before, footer.foot .foot-by::before { content: ""; position: absolute; top: 0; left: 32px; right: 32px; border-top: 1px solid rgba(255, 255, 255, .18); }
footer.foot b { color: #fff; font-weight: 700; }
footer.foot .foot-prof > b { display: block; margin-bottom: 10px; font-size: 16px; }
footer.foot .foot-brand { display: block; margin-bottom: 8px; font-family: var(--display-en); font-size: 24px; line-height: 1; letter-spacing: .02em; direction: ltr; }
footer.foot .foot-legal { text-align: left; }
footer.foot p { margin: 0 0 6px; max-width: none; }
footer.foot a { color: #c9d7e3; text-decoration: none; border: 0; }
footer.foot a:hover, footer.foot a[aria-current] { color: #6fc2fa; }
footer.foot .foot-by { position: relative; display: block; padding: 14px 32px 26px; font-size: 13px; color: #8ea4b6; }
footer.foot .foot-by .by { margin: 0; }
footer.foot .foot-by b { color: #c9d7e3; }
@media (max-width: 640px) {
  .closing .h2 { font-size: 38px; }
  footer.foot .foot-grid { grid-template-columns: 1fr; gap: 20px; padding: 26px 18px 20px; }
  footer.foot .foot-legal { text-align: right; }
  footer.foot .foot-grid::before, footer.foot .foot-by::before { left: 18px; right: 18px; }
  footer.foot .foot-by { padding: 12px 18px 22px; }
}

/* ---------- about: small photo of Orly at the top of the "בקצרה" card (8.11) ---------- */
.about-card .me-head { align-items: center; padding-bottom: 14px; }   /* photo on the right, the name on the left, same line (her ask 8.11; "בקצרה" removed) */
.about-card .me-photo { display: block; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--ink); background: #fff; }
/* about: card top lines up with the "נעים להכיר" heading (her ask 8.11) */
.about-hero .about-card { margin-top: 70px; }
@media (max-width: 900px) { .about-hero .about-card { margin-top: 0; } }