/* Direction A, "המדריך": the owner's brand at full strength. Deep navy, fine gold
   lines, an embossed YS, and the checklist shown as a real booklet. Heebo (base.css)
   carries the display lines and the reading text alike. */

/* The brand's divider: a gold line broken by a small diamond, as in the logo. */
.rule {
  position: relative; display: block; width: 120px; height: 2px;
  background: linear-gradient(to left, var(--gold) 0 42%, transparent 42% 58%, var(--gold) 58% 100%);
}
.rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  background: var(--gold); transform: translate(-50%, -50%) rotate(45deg);
}

/* Header, laid over the navy hero */
.site-header { position: absolute; inset-inline: 0; top: 0; z-index: 20; }
.is-unlocked .site-header { position: relative; background: var(--navy); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.brand { width: clamp(128px, 11vw, 158px); height: auto; }
.header-cta {
  display: none; padding: 10px 20px; border-radius: var(--r-pill);
  color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: inset 0 0 0 1.5px rgba(231, 204, 147, .55);
  transition: background-color .2s, box-shadow .2s;
}
.header-cta:hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px var(--gold-soft); }
@media (min-width: 700px) { .header-cta { display: inline-flex; } }
@media (forced-colors: active) { .header-cta { border: 2px solid ButtonBorder; } }

/* Hero */
.hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background:
    radial-gradient(1100px 620px at 6% 10%, rgba(29, 70, 132, .55), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(12, 45, 96, .9), transparent 62%),
    var(--navy);
  padding-block: clamp(108px, 12vw, 152px) clamp(72px, 8vw, 124px);
}
.hero-lines {
  position: absolute; inset-inline: 0; bottom: -70px; z-index: -1;
  width: 100%; height: clamp(360px, 46vw, 640px);
  fill: none; stroke: var(--gold); stroke-width: 1.15;
}
.hero-grid { display: grid; gap: clamp(36px, 5vw, 56px); align-items: center; }
@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    grid-template-areas: "copy art" "tail art";
    align-items: start; column-gap: clamp(44px, 5vw, 72px); row-gap: 30px;
  }
  .hero-copy { grid-area: copy; align-self: end; }
  .hero-art { grid-area: art; align-self: center; }
  .hero-tail { grid-area: tail; }
}
.h1-scene {
  display: block; max-width: 36ch; margin-bottom: 18px;
  font-weight: 600; font-size: clamp(1.12rem, 1rem + .55vw, 1.45rem); line-height: 1.5; color: #C3CFE4;
}
.h1-question {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 1.45rem + 4.1vw, 4.7rem); line-height: 1.04; text-wrap: balance;
}
.h1-question em { font-style: normal; color: var(--gold-soft); }
.hero-sub { max-width: 54ch; margin-top: 24px; font-size: clamp(1.06rem, 1rem + .3vw, 1.24rem); line-height: 1.7; color: #D6DEEC; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }
.btn-hero { min-height: 60px; padding-inline: 30px; font-size: 1.12rem; box-shadow: 0 14px 30px -14px rgba(1, 10, 26, .75); }
.btn-hero .icon { transition: transform .25s var(--ease-out); }
.btn-hero:hover .icon { transform: translateX(-4px); }
.hero-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 6px;
  color: #fff; font-weight: 700; text-decoration: none;
  border-bottom: 2px solid rgba(231, 204, 147, .45); transition: border-color .2s;
}
.hero-link:hover { border-color: var(--gold-soft); }
.hero-tail { display: grid; gap: 0; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 12px 26px; color: #C3CFE4; font-weight: 600; font-size: .98rem; }
.hero-facts li { display: inline-flex; align-items: center; gap: 9px; }
.hero-facts .icon { width: 20px; height: 20px; color: var(--gold-soft); }
.byline {
  display: flex; align-items: center; gap: 14px; max-width: 54ch; margin-top: 34px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14); color: #C3CFE4; font-size: .95rem; line-height: 1.5;
}
.byline img { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px var(--gold); }
.byline strong { color: #fff; }

/* The booklet */
.hero-art { position: relative; display: grid; place-items: center; padding-block: 8px 28px; }
.book {
  position: relative; width: min(70vw, 380px); aspect-ratio: 210 / 297; container-type: inline-size;
  transform: perspective(1800px) rotateY(-16deg) rotateX(5deg) rotateZ(-2deg);
  filter: drop-shadow(0 48px 46px rgba(0, 6, 20, .5)) drop-shadow(0 12px 14px rgba(0, 6, 20, .32));
}
@media (min-width: 1000px) { .book { width: min(32vw, 420px); } }
/* On a phone who wrote it (the photo and the licence) comes before the picture of the
   booklet, and the booklet is smaller. It used to push the byline 1,064px down. */
@media (max-width: 999px) {
  .hero-tail { order: 1; }
  .hero-art { order: 2; }
  .book { width: min(52vw, 300px); }
}
.book-sheet {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3.6cqw;
  padding: 10cqw 9cqw; border-radius: 6px; background: #FBFCFE; text-align: left;
  transform: translate(-34%, 9%) rotate(-11deg);
}
.mini-num { font-family: var(--font-display); font-weight: 800; font-size: 17cqw; line-height: .8; color: var(--gold); }
.mini-title { margin-bottom: 1.6cqw; font-family: var(--font-display); font-weight: 800; font-size: 6.6cqw; line-height: 1.1; color: var(--navy); }
.mini-line { display: block; flex: none; width: var(--w, 80%); height: 1.8cqw; border-radius: 99px; background: #DCE2EC; }
.mini-box { display: flex; flex-direction: column; gap: 2.8cqw; padding: 4.6cqw; border-radius: 3cqw; background: #EEF2F8; }
.mini-mark { background: rgba(194, 135, 34, .55); }

.book-cover {
  position: absolute; inset: 0; overflow: hidden; border-radius: 10px 3px 3px 10px;
  background: linear-gradient(165deg, #FFFFFF 0%, #F7F9FC 52%, #ECF0F6 100%);
  box-shadow: -2px 2px 0 #E2E7EF, -4px 4px 0 #FFFFFF, -6px 6px 0 #DAE0EA, -8px 8px 0 #FFFFFF, -10px 10px 0 #D2D9E5;
}
.book-cover::after {
  content: ""; position: absolute; inset-block: 0; right: 0; width: 7cqw; pointer-events: none;
  background: linear-gradient(to left, rgba(2, 27, 65, .14), rgba(2, 27, 65, 0));
}
.emboss { position: absolute; left: -18cqw; top: 26cqw; width: 80cqw; aspect-ratio: 580 / 720; }
.emboss > span {
  position: absolute; inset: 0;
  -webkit-mask: url(/assets/mark-mask.webp) center / contain no-repeat;
  mask: url(/assets/mark-mask.webp) center / contain no-repeat;
}
.emboss-shade { background: rgba(2, 27, 65, .16); transform: translate(.7cqw, 1cqw); }
.emboss-light { background: #FFFFFF; transform: translate(-.5cqw, -.6cqw); }
.emboss-face { background: linear-gradient(150deg, #F5F7FA 10%, #E8ECF3 62%, #F1F4F8 100%); }
.cover-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: .9; }
.cover-body { position: absolute; inset-inline: 9cqw; top: 10cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 2cqw; }
.cover-mark { width: 10cqw; height: auto; margin-bottom: 5cqw; }
.cover-title { font-family: var(--font-display); font-weight: 800; font-size: 12.6cqw; line-height: 1; color: var(--navy); }
.cover-rule {
  position: relative; display: block; width: 50cqw; height: max(1.5px, .5cqw); margin-block: 2.4cqw;
  background: linear-gradient(to left, var(--gold) 0 43%, transparent 43% 57%, var(--gold) 57% 100%);
}
.cover-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 2.3cqw; height: 2.3cqw;
  background: var(--gold); transform: translate(-50%, -50%) rotate(45deg);
}
.cover-sub { font-weight: 700; font-size: 4.5cqw; color: var(--navy); }
.cover-foot { position: absolute; inset-inline-start: 9cqw; bottom: 8cqw; font-weight: 600; font-size: 3.3cqw; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .book { animation: book-in 1.5s var(--ease-out) .1s both; }
  .hero-copy > * { animation: rise .9s var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .hero-copy > :nth-child(5) { animation-delay: .32s; }
}
@keyframes book-in {
  from { opacity: 0; transform: perspective(1800px) rotateY(-32deg) rotateX(12deg) rotateZ(-7deg) translateY(46px); }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* Sections */
.section { padding-block: clamp(76px, 9vw, 128px); }
.section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.3rem);
  line-height: 1.08; color: var(--navy); text-wrap: balance;
}
.section-head p { max-width: 62ch; margin-top: 16px; font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); color: var(--muted); }

/* What's inside */
.toc { display: grid; }
@media (min-width: 900px) { .toc { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 76px); } }
.toc li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 16px; align-items: start; padding-block: 24px; border-top: 1px solid var(--line); }
.toc-num { font-family: var(--font-display); font-weight: 800; font-size: 3.5rem; line-height: .82; color: var(--gold); }
.toc h3 { font-size: 1.3rem; font-weight: 800; line-height: 1.3; color: var(--navy); }
.toc p { margin-top: 6px; color: var(--muted); }
.extras { display: grid; gap: 18px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 760px) { .extras { grid-template-columns: repeat(3, 1fr); } }
.extras li { padding: 28px 26px 26px; border-radius: var(--r-card); background: var(--mist); }
.extras .icon { width: 46px; height: 46px; margin-bottom: 18px; padding: 11px; border-radius: 50%; background: var(--navy); color: var(--gold-soft); }
.extras h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; color: var(--navy); }
.extras p { margin-top: 6px; color: var(--muted); }
.quote { display: grid; justify-items: center; gap: 24px; margin-top: clamp(64px, 8vw, 104px); text-align: center; }
.quote blockquote {
  max-width: 30ch; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.55rem); line-height: 1.32; color: var(--navy); text-wrap: balance;
}
.quote figcaption { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: var(--navy); }
.quote figcaption img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold); }

/* A full chapter, before the form */
.sample { background: var(--mist); }
.sample-sheet { max-width: 900px; margin-inline: auto; }
.sample .g-done, .sample .g-callback { display: none; }
.sample-cta { margin-top: 40px; text-align: center; }

/* The form */
/* clip, not hidden: hidden turns the section into its own scroll box, and then the
   reassurance column next to the form never stays in view. hidden stays as the fallback
   for browsers without clip. */
.form-section {
  position: relative; overflow: hidden; overflow: clip; isolation: isolate; color: #fff;
  background: radial-gradient(1000px 640px at 94% 0%, rgba(29, 70, 132, .5), transparent 60%), var(--navy);
}
.form-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) {
  .form-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 76px; }
  .form-intro { position: sticky; top: 40px; }
}
.form-intro h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.3rem); line-height: 1.08; text-wrap: balance; }
.assure { display: grid; gap: 18px; margin-top: 32px; }
.assure li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; color: #D6DEEC; font-size: 1.06rem; }
.assure .icon { margin-top: 3px; color: var(--gold-soft); }
.form-card { padding: clamp(24px, 4vw, 44px); border-radius: var(--r-card); background: #fff; color: var(--ink); box-shadow: 0 34px 80px -34px rgba(0, 0, 0, .65); }

/* About */
.about { padding-block: clamp(76px, 9vw, 128px); }
.about-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 80px; } }
.about-photo {
  width: min(100%, 420px); margin-inline: auto; aspect-ratio: 1; padding: 10px; border-radius: 50%;
  background: conic-gradient(from 205deg, var(--gold) 0 23%, var(--navy) 23% 100%);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; border: 7px solid #fff; border-radius: 50%; }
.about-copy h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem); line-height: 1.1; color: var(--navy); }
.about-id { margin-top: 10px; font-weight: 700; color: var(--gold-ink); }
.path { margin-top: 28px; }
.path-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding-block: 16px; }
.path-step:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 22px; top: 66px; bottom: -8px; width: 2px;
  background: linear-gradient(var(--gold), rgba(194, 135, 34, .12));
}
.path-num {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: var(--gold-soft); font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
}
.path h3 { font-size: 1.2rem; font-weight: 800; color: var(--navy); }
.path p { margin-top: 4px; color: var(--muted); }
.about-free { margin-top: 10px; font-weight: 700; color: var(--navy); }
.disclosure { margin-top: 24px; padding: 22px 24px; border-radius: var(--r-card); background: var(--mist); }
.disclosure h3 { font-weight: 800; color: var(--navy); }
.disclosure p { margin-top: 4px; }
.about-ref { margin-top: 18px; color: var(--muted); }

/* FAQ */
.faq { padding-block: clamp(64px, 8vw, 112px); background: var(--mist); }
.faq-wrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .faq-wrap { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 80px; } }
.faq h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); line-height: 1.1; color: var(--navy); }
.faq-list { display: grid; gap: 12px; }
.faq details { border-radius: var(--r-ctl); background: #fff; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px;
  font-weight: 800; font-size: 1.12rem; color: var(--navy); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq details p { padding: 0 22px 22px; }
.faq details a { color: var(--navy); font-weight: 700; }
.faq-mark {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background:
    linear-gradient(var(--navy), var(--navy)) center / 12px 2px no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 2px 12px no-repeat,
    var(--mist);
}
.faq details[open] .faq-mark { background: linear-gradient(var(--gold), var(--gold)) center / 12px 2px no-repeat, var(--navy); }

/* Footer */
.site-footer { padding-block: 56px 112px; background: var(--navy); color: #C3CFE4; }
@media (min-width: 1000px) { .site-footer { padding-bottom: 64px; } }
.foot-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: auto minmax(0, 1fr); gap: 60px; align-items: start; } }
.foot-logo { width: 150px; }
.foot-lic { color: #fff; font-weight: 700; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-soft); font-weight: 700; text-underline-offset: 3px; }
.foot-disclaimer { max-width: 64ch; margin-top: 14px; font-size: .92rem; line-height: 1.6; }

/* The privacy policy and the accessibility statement */
.doc-header { position: relative; background: var(--navy); }
.doc { max-width: 760px; padding-block: clamp(36px, 5vw, 64px) clamp(56px, 8vw, 96px); }
.doc h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); line-height: 1.15; color: var(--navy); }
.doc h2 { margin-top: 34px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); line-height: 1.25; color: var(--navy); }
.doc p { margin-top: 12px; line-height: 1.8; }
.doc ul { display: grid; gap: 8px; margin-top: 12px; }
.doc li { position: relative; padding-inline-start: 24px; line-height: 1.75; }
.doc li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .7em; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.doc a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; }
.doc .draft { margin-top: 20px; padding: 16px 18px; border-radius: var(--r-box); background: var(--mist); font-weight: 700; color: var(--navy); }

/* After the form, and at the top of the working pages: a one-line thank-you on navy, then
   the checklist at a glance with the offer beside it, then the reader. The checklist comes
   first; saving and printing are one quiet line. */
.after-top {
  color: #fff; padding-block: 26px 28px;
  background: radial-gradient(900px 500px at 8% 0%, rgba(29, 70, 132, .55), transparent 60%), var(--navy);
}
.after-top h1, .after-top h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.15; text-wrap: balance; }
.after-top h1 + p, .after-top h2 + p { max-width: 60ch; margin-top: 10px; color: #D6DEEC; }
/* The result of saving the link: copied, or the address itself. */
.share-status { max-width: 60ch; margin-top: 12px; font-weight: 700; color: var(--gold-soft); overflow-wrap: anywhere; }

.glance-band { padding-block: 20px 4px; background: var(--mist); }
.glance-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .glance-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 44px; } }
.glance { padding: 20px 20px 14px; border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-soft); container-type: inline-size; }
.glance-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; }
.glance-head h2, .glance-head h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1.2; color: var(--navy); }
.glance-intro { margin-top: 6px; font-size: .98rem; color: var(--muted); }
.glance-list { display: grid; margin-top: 12px; border-top: 2px solid var(--navy); }
.glance-list li { display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 12px; align-items: center; padding-block: 11px; border-bottom: 1px solid var(--line); }
.glance-list a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 1px 10px; color: inherit; text-decoration: none; }
.glance-n { grid-row: span 2; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.25; color: var(--gold-ink); }
.glance-t { font-weight: 800; font-size: 1.06rem; line-height: 1.35; color: var(--navy); }
.glance-q { font-size: .95rem; line-height: 1.5; color: var(--muted); }
.glance-list a:hover .glance-t { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
/* The parents' list is the fridge page's own, brought up here on screen. */
.glance .gp-glance-list { margin-top: 12px; }
.glance-foot { margin-top: 12px; font-size: .95rem; color: var(--muted); }
.glance-foot a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; }
.glance-band .booking { box-shadow: var(--shadow-soft); }
.after-quiet { margin-top: 16px; font-size: .95rem; color: var(--muted); }
/* Links inside a line of text: the padding widens what a thumb can hit without moving the line. */
.after-quiet .linkish, .after-end .linkish { padding-block: 10px; }
.after-quiet .linkish { font-weight: 700; color: var(--navy); }
.after-quiet .share-status { color: var(--navy); }
/* "Not you?" waits at the very end, after the checklist. */
.after .reader-wrap { padding-bottom: 40px; }
.after-end { padding-block: 0 44px; background: var(--mist); font-size: .95rem; color: var(--muted); }
.after-end .wrap { display: block; }

/* The working pages (/checklist, /parents-checklist): a plain navy header, no hero under it. */
.site-header.is-solid { position: relative; background: var(--navy); }
.brand-link { display: inline-flex; }
.booking { padding: 28px; border-radius: var(--r-card); background: #fff; color: var(--ink); box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .6); }
.booking h2, .booking h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1.15; color: var(--navy); }
.booking p { margin-block: 10px 20px; color: var(--muted); }
/* The calendar is Calendly's, in English, so the card says what waits there, and what to
   do when no time fits. */
.booking .booking-note { margin-block: 14px 0; font-size: .92rem; line-height: 1.55; }
/* Shown only when the form was valid but the lead did not reach the CRM. No WhatsApp message
   will bring the link, so the one gold "save the link" button sits here. */
.after-warn {
  max-width: 60ch; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-ctl);
  background: rgba(231, 204, 147, .14); box-shadow: inset 0 0 0 1px rgba(231, 204, 147, .45);
  color: #fff; font-weight: 700;
}
.after-warn .btn { margin-top: 12px; }