/* ============================================================
   ספר חיים — the product's own look (Operators Phase 3, ADR-062,
   ADR-064).
   Light, warm and modern; the main site's pages load this file alone
   and carry class="product-site" on <body>. Migdalei's look stays in
   site/mht/assets/mht.css; the old museum look in archive.css retires
   page by page.
   Hebrew first: logical properties only, so the English pages mirror
   for free (home.test.ts). No text under 16 px (type_size.test.ts).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700&family=Noto+Serif+Hebrew:wght@500;700&display=swap');

/* Brand tokens. The product's name, colours and logo are still to come
   from the owner; these are placeholders, and every colour and font on
   the page comes from this block (home.test.ts), so a new brand is a new
   block. On --color-bg: ink 15:1, ink-soft 8:1, primary 7.5:1; white on
   primary 8:1. --color-accent is a fill under dark ink, never text on a
   light ground. */
:root {
  --color-bg: #fbf8f3;
  --color-surface: #ffffff;
  --color-tint: #f3ede4;
  --color-rule: #e4dbcd;
  --color-ink: #1f2421;
  --color-ink-soft: #4a4f4b;
  --color-primary: #1e5a52;
  --color-primary-deep: #15443e;
  --color-primary-soft: #e2eeeb;
  --color-on-primary: #ffffff;
  --color-accent: #d9963b;
  --color-accent-soft: #f7e8d0;
  --color-band: #173f3a;
  --color-on-band: #fbf8f3;
  --color-on-band-soft: #d3e2de;
  --color-focus: #a34a00;
  --color-focus-on-band: #f2c27a;
  --font-display: 'Noto Serif Hebrew', 'Frank Ruhl Libre', Georgia, serif;
  --font-body: 'Assistant', 'Heebo', system-ui, sans-serif;
  --radius: 24px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgb(31 36 33 / .06), 0 14px 36px rgb(31 36 33 / .08);
  --shadow-lift: 0 2px 4px rgb(31 36 33 / .08), 0 22px 48px rgb(31 36 33 / .13);
}

/* ---------- base ---------- */
.product-site *, .product-site *::before, .product-site *::after { box-sizing: border-box; }
.product-site { margin: 0; font-family: var(--font-body); font-size: 19px; line-height: 1.7; color: var(--color-ink); background: var(--color-bg); min-height: 100vh; overflow-x: hidden; }
.product-site h1, .product-site h2, .product-site h3, .product-site p, .product-site ul, .product-site ol, .product-site blockquote { margin: 0; }
.product-site ul, .product-site ol { padding: 0; list-style: none; }
.product-site img { display: block; max-width: 100%; height: auto; }
.product-site a { color: inherit; }
.product-site h1, .product-site h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.product-site h3 { font-weight: 700; line-height: 1.3; }
.product-site .wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.product-site :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 6px; }
.product-site main:focus { outline: none; }
.product-site .skip-link { position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px; background: var(--color-ink); color: var(--color-surface); font-weight: 700; font-size: 18px; text-decoration: none; }
.product-site .skip-link:focus { inset-inline-start: 12px; inset-block-start: 12px; }

/* ---------- header ---------- */
.product-site .bar { background: var(--color-bg); border-block-end: 1px solid var(--color-rule); z-index: 50; }
.product-site .bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 12px; flex-wrap: wrap; }
.product-site .brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-family: var(--font-display); font-weight: 700; font-size: 21px; text-decoration: none; color: var(--color-ink); }
.product-site .brand-mark { inline-size: 30px; block-size: 30px; border-radius: 9px; background: var(--color-primary); position: relative; flex: none; }
.product-site .brand-mark::after { content: ""; position: absolute; inset: 8px 9px; border-radius: 3px; background: var(--color-accent); }
.product-site .bar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0 22px; font-size: 18px; font-weight: 600; }
.product-site .bar nav a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; color: var(--color-ink-soft); }
.product-site .bar nav a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 6px; }
.product-site .bar nav .nav-cta { color: var(--color-on-primary); background: var(--color-primary); border-radius: var(--radius-pill); padding-inline: 22px; }
.product-site .bar nav .nav-cta:hover { color: var(--color-on-primary); background: var(--color-primary-deep); text-decoration: none; }

/* ---------- buttons ---------- */
.product-site .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 12px 30px; border-radius: var(--radius-pill); border: 2px solid transparent; font-family: inherit; font-size: 19px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.product-site .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.product-site .btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.product-site .btn-primary:hover { background: var(--color-primary-deep); }
.product-site .btn-secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.product-site .btn-secondary:hover { background: var(--color-primary-soft); }
.product-site .btn-accent { background: var(--color-accent); color: var(--color-ink); }
.product-site .btn-accent:hover { background: var(--color-accent-soft); }
.product-site .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.product-site .note { font-size: 17px; color: var(--color-ink-soft); }

/* ---------- section scaffolding ---------- */
.product-site .sec { padding-block: clamp(64px, 9vw, 112px); }
.product-site .sec.tint { background: var(--color-tint); }
.product-site .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--color-primary); margin-block-end: 14px; }
.product-site .eyebrow::before { content: ""; inline-size: 28px; block-size: 3px; border-radius: 3px; background: var(--color-accent); }
.product-site .sec-head { max-inline-size: 720px; margin-block-end: 44px; }
.product-site .sec-head.center { margin-inline: auto; text-align: center; }
.product-site .sec-head h2 { font-size: clamp(30px, 4vw, 46px); }
.product-site .sec-head p { font-size: 20px; color: var(--color-ink-soft); margin-block-start: 14px; }
.product-site .more { display: inline-flex; align-items: center; min-height: 48px; margin-block-start: 28px; font-weight: 700; color: var(--color-primary); text-underline-offset: 6px; }

/* ---------- hero ---------- */
.product-site .hero { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 104px); }
.product-site .hero-grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
.product-site .hero h1 { font-size: clamp(42px, 6.4vw, 76px); letter-spacing: -.01em; }
.product-site .hero h1 em { font-style: normal; color: var(--color-primary); background: linear-gradient(transparent 68%, var(--color-accent-soft) 68%); padding-inline: 4px; }
.product-site .hero .lead { font-size: clamp(20px, 2vw, 22px); color: var(--color-ink-soft); max-inline-size: 600px; margin-block: 24px 34px; line-height: 1.75; }
.product-site .hero .note { margin-block-start: 16px; }
.product-site .hero-art { position: relative; max-inline-size: 520px; margin-inline: auto; padding-block-end: 64px; }
.product-site .hero-art .print { background: var(--color-surface); padding: 14px 14px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); transform: rotate(-2deg); }
.product-site .hero-art .print img { border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; inline-size: 100%; }
.product-site .quote-card { position: absolute; inset-inline-start: -20px; inset-block-end: 0; max-inline-size: 400px; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 24px 26px; border-inline-start: 5px solid var(--color-accent); }
.product-site .quote-card .label { font-size: 16px; font-weight: 700; color: var(--color-primary); }
.product-site .quote-card blockquote { font-family: var(--font-display); font-size: 21px; line-height: 1.6; margin-block: 10px 14px; }
.product-site .quote-card .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; color: var(--color-ink-soft); }
.product-site .quote-card .play { inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); font-size: 16px; }
.product-site .quote-card .soon { font-weight: 700; color: var(--color-ink); background: var(--color-accent-soft); border-radius: var(--radius-pill); padding: 0 12px; }

/* ---------- stat strip ---------- */
.product-site .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.product-site .stat { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 24px; }
.product-site .stat b { display: block; font-family: var(--font-display); font-size: clamp(40px, 5vw, 56px); line-height: 1.1; color: var(--color-primary); }
.product-site .stat span { display: block; font-size: 18px; color: var(--color-ink-soft); margin-block-start: 6px; }

/* ---------- how it works ---------- */
.product-site .steps { display: grid; grid-template-columns: 1fr; gap: 18px; counter-reset: step; }
.product-site .step { background: var(--color-surface); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow); position: relative; }
.product-site .step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; font-size: 20px; margin-block-end: 18px; }
.product-site .step h3 { font-size: 22px; margin-block-end: 8px; }
.product-site .step p { font-size: 18px; color: var(--color-ink-soft); }

/* ---------- the shelf of ten chapters ---------- */
.product-site .shelf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.product-site .spine { display: flex; align-items: center; min-block-size: 64px; padding: 12px 18px; border-radius: var(--radius-sm); border: 2px dashed var(--color-rule); background: var(--color-surface); font-size: 18px; font-weight: 600; color: var(--color-ink-soft); }
.product-site .spine i { font-style: normal; }
.product-site .spine.full { border: 2px solid var(--color-accent); background: var(--color-accent); color: var(--color-ink); }
.product-site .spine.part { border: 2px solid var(--color-accent); background: linear-gradient(to top, var(--color-accent) 50%, var(--color-accent-soft) 50%); color: var(--color-ink); }

/* ---------- cards (the "rooms") ---------- */
.product-site .rooms { display: grid; grid-template-columns: 1fr; gap: 20px; }
.product-site .room { position: relative; display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 28px; text-decoration: none; color: var(--color-ink); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.product-site a.room:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.product-site a.room::after { content: "←"; margin-block-start: auto; padding-block-start: 18px; font-size: 22px; font-weight: 700; color: var(--color-primary); }
.product-site .room .num { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 16px; background: var(--color-primary-soft); font-size: 26px; margin-block-end: 18px; }
.product-site .room h3 { font-size: 23px; margin-block-end: 8px; }
.product-site .room p { font-size: 18px; color: var(--color-ink-soft); }
.product-site .room.photo { padding-block-start: 0; }
.product-site .room.photo::before { content: ""; display: block; margin-inline: -28px; margin-block-end: 24px; aspect-ratio: 16 / 9; background: var(--img) center 30% / cover; }
.product-site .room.photo .num { margin-block-start: -52px; position: relative; border: 4px solid var(--color-surface); }
.product-site .live-dot, .product-site .badge { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; display: inline-flex; align-items: center; gap: 8px; min-block-size: 32px; padding: 2px 14px; border-radius: var(--radius-pill); font-size: 16px; font-weight: 700; }
.product-site .live-dot { background: var(--color-primary-soft); color: var(--color-primary-deep); }
.product-site .live-dot::before { content: ""; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--color-primary); }
.product-site .badge { background: var(--color-accent-soft); color: var(--color-ink); }
.product-site .room.photo .live-dot { background: var(--color-surface); }

/* ---------- questions and answers ---------- */
.product-site .faq { display: grid; gap: 14px; max-inline-size: 860px; }
.product-site .faq details { background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); border-inline-start: 5px solid transparent; }
.product-site .faq details[open] { border-inline-start-color: var(--color-accent); }
.product-site .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-block-size: 64px; padding: 16px 24px; font-size: 20px; font-weight: 700; line-height: 1.45; cursor: pointer; list-style: none; border-radius: var(--radius-sm); }
.product-site .faq summary::-webkit-details-marker { display: none; }
.product-site .faq summary::after { content: "+"; flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-size: 26px; font-weight: 700; line-height: 1; }
.product-site .faq details[open] summary::after { content: "−"; background: var(--color-primary); color: var(--color-on-primary); }
.product-site .faq summary:hover { color: var(--color-primary); }
.product-site .faq-a { padding: 0 24px 22px; font-size: 19px; color: var(--color-ink-soft); }
.product-site .faq-a ul { display: grid; gap: 10px; }
.product-site .faq-a b { color: var(--color-ink); }
.product-site .faq-a a { color: var(--color-primary); font-weight: 700; text-underline-offset: 4px; }

/* ---------- call band ---------- */
.product-site .cta-band { background: var(--color-band); color: var(--color-on-band); border-radius: calc(var(--radius) * 1.5); padding: clamp(48px, 7vw, 80px) 28px; text-align: center; }
.product-site .cta-band :focus-visible { outline-color: var(--color-focus-on-band); }
.product-site .cta-band h2 { font-size: clamp(30px, 4vw, 46px); margin-block-end: 28px; }
.product-site .cta-band .note { color: var(--color-on-band-soft); margin-block-start: 18px; }

/* ---------- footer ---------- */
.product-site .foot { border-block-start: 1px solid var(--color-rule); padding-block: 36px; font-size: 17px; color: var(--color-ink-soft); }
.product-site .foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.product-site .foot nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.product-site .foot a { display: inline-flex; align-items: center; min-height: 48px; color: var(--color-primary); font-weight: 600; }

/* ---------- wider screens ---------- */
@media (min-width: 720px) {
  .product-site .stats { grid-template-columns: repeat(4, 1fr); }
  .product-site .steps { grid-template-columns: repeat(2, 1fr); }
  .product-site .shelf { grid-template-columns: repeat(5, 1fr); }
  .product-site .spine { min-block-size: 132px; align-items: flex-end; }
  .product-site .rooms.three { grid-template-columns: repeat(3, 1fr); }
  .product-site .rooms.bento { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .product-site .bar { position: sticky; inset-block-start: 0; }
  .product-site .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 64px; }
  .product-site .steps { grid-template-columns: repeat(4, 1fr); }
  .product-site .rooms.bento { grid-template-columns: repeat(3, 1fr); }
  .product-site .rooms.bento .big { grid-row: span 2; }
}
@media (max-width: 719px) {
  .product-site .bar .wrap { justify-content: center; }
  .product-site .bar nav { justify-content: center; gap: 0 18px; }
  .product-site .cta-row .btn { inline-size: 100%; }
  .product-site .quote-card { position: relative; inset-inline-start: auto; margin-block-start: -40px; margin-inline: 12px; }
  .product-site .hero-art { padding-block-end: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .product-site .btn, .product-site .room { transition: none; }
  .product-site .btn:hover, .product-site a.room:hover { transform: none; }
}