/* The home page (/), direction C2 of the design canvas: motion, Jenny in the
   first person. Light only, like everything made for Jenny. Fonts are the
   site's own files, so the strict CSP ('self' only) holds; the motion is CSS
   alone, and a visitor who asked for less motion gets none. */

@font-face { font-family: "Rubik"; src: url("/fonts/rubik.woff2") format("woff2");
             font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Gveret Levin"; src: url("/fonts/gveret-levin.woff2") format("woff2");
             font-display: swap; }

:root {
  --ink: #102F36;
  --ink-soft: #24555e;
  --teal: #0a6e75;      /* white text on it: 5.9:1 */
  --aqua: #7fe0e6;
  --sun: #FFE7A8;
  --gold: #E8A815;      /* dark text on it only */
  --mist: #F3FAFA;
  --pale: #E3F5F6;
  --line: #c8e3e5;
  --shadow: 0 10px 30px rgb(16 47 54 / .08);
  color-scheme: light;
}

* { box-sizing: border-box; }
/* `hidden` wins over any class that sets display (the quiz steps, the days). */
[hidden] { display: none !important; }
/* The tilted marquee reaches past both edges: clip it, never scroll sideways. */
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--mist); color: var(--ink);
       font: 18px/1.6 "Rubik", system-ui, sans-serif; overflow-x: clip; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { margin: 0; }

.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; background: var(--ink); color: #fff;
        padding: .6rem 1rem; border-radius: .6rem; z-index: 10; }
.skip:focus { top: 1rem; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 4.5rem 2rem 1.5rem; }
.script { font-family: "Gveret Levin", "Rubik", sans-serif; font-weight: 400; }
.big { font-weight: 900; font-size: clamp(2.4rem, 6vw, 5rem); line-height: .98; }
.mid { font-weight: 900; font-size: clamp(2.1rem, 4.5vw, 3.75rem); line-height: 1; }
.kicker { margin: 0; font-size: 2rem; line-height: 1; color: var(--teal); }
.kicker.light, .kicker.sunny { color: var(--sun); }
.muted { color: var(--ink-soft); }
.small { font-size: .9rem; }
.teal-text { color: var(--teal); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem;
       padding: .9rem 1.8rem; border-radius: 14px; font: inherit; font-weight: 800;
       text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn.gold { background: var(--gold); color: var(--ink); }
.btn.gold:hover { background: #f0b938; color: var(--ink); }
.btn.teal { background: var(--teal); color: #fff; }
.btn.ghost { background: rgb(255 255 255 / .14); color: #fff; border-color: rgb(255 255 255 / .55); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- header --- */
.head { max-width: 1240px; margin: 0 auto; padding: 1rem 2rem; display: flex; flex-wrap: wrap;
        align-items: center; justify-content: space-between; gap: 1rem; }
.logo-link img { height: 52px; width: auto; }
.nav { display: flex; flex-wrap: wrap; gap: .3rem; background: #fff; border-radius: 999px;
       padding: .35rem; box-shadow: var(--shadow); }
.nav a { color: var(--ink); text-decoration: none; padding: .5rem 1rem; border-radius: 999px; font-weight: 500; }
.nav a:hover { background: var(--pale); }

/* --- hero: Jenny's photo on one side, her words on a deep panel. The video
   loop goes into .hero-photo when it is ready. --- */
.hero { max-width: 1240px; margin: 0 auto; padding: .5rem 2rem 0; display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hero-photo { border-radius: 36px 0 0 36px; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; max-height: 720px; object-fit: cover; object-position: 50% 35%; }
.hero-text { background: var(--ink); color: #fff; border-radius: 0 36px 36px 0;
             padding: 3.5rem 3rem; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; }
[dir="rtl"] .hero-photo { border-radius: 0 36px 36px 0; }
[dir="rtl"] .hero-text { border-radius: 36px 0 0 36px; }
.hi { margin: 0; font-size: 2.6rem; line-height: 1; color: var(--sun); }
.title { font-size: clamp(3rem, 6.4vw, 6.4rem); line-height: 1.02; }
.title span { display: block; color: var(--aqua); }
.lead { margin: 0; font-size: 1.25rem; max-width: 34ch; }
.lead-dark { margin: 1rem 0 2rem; max-width: 52ch; }

.facts { list-style: none; margin: 0; padding: 1.2rem 1rem 0; display: flex; flex-wrap: wrap;
         justify-content: center; gap: .5rem 1.8rem; font-weight: 500; color: var(--ink-soft); }
.facts li::before { content: "✦ "; color: var(--gold); }

/* --- marquee --- */
.marquee { background: var(--ink); color: var(--mist); margin: 3rem -2.5rem 0; padding: 1.1rem 0;
           transform: rotate(-2deg); overflow: hidden; }
.marquee-track { display: flex; width: max-content; font-weight: 900; font-size: 2.6rem; white-space: nowrap; }
.marquee-track span { padding-inline-end: 1rem; }

/* --- promise --- */
.promise { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
           gap: 2.5rem; align-items: center; }
.arch { width: 100%; max-width: 420px; justify-self: center; aspect-ratio: 4 / 5; object-fit: cover;
        object-position: 50% 22%; border-radius: 50% 50% 28px 28px; }
.points { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
.points li { display: flex; gap: 1rem; align-items: flex-start; }
.points b { font-size: 1.35rem; }
.points p { margin: .1rem 0 0; }
.num { font-size: 2.8rem; line-height: .9; color: var(--teal); min-width: 2.6rem; }

/* --- offers: native horizontal scroll with snap --- */
.row-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem;
            margin-bottom: 1.8rem; }
.hint { margin: 0; font-size: 2rem; color: var(--teal); }
.cards { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
         padding-bottom: .8rem; scrollbar-color: var(--teal) transparent; }
.card { flex: 0 0 min(88%, 440px); scroll-snap-align: start; border-radius: 28px; overflow: hidden;
        display: flex; flex-direction: column; gap: .6rem; }
.card h3 { font-weight: 900; font-size: 2.1rem; }
.card p { margin: 0; }
.card > a, .card-body > a { margin-top: auto; font-weight: 800; }
.card.teal { background: var(--teal); color: #fff; }
.card.teal a { color: var(--sun); }
.card.teal img { height: 260px; width: 100%; object-fit: cover; }
.card-body { padding: 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card.teal .kicker { color: var(--sun); }
.card.sun { background: var(--sun); padding: 1.6rem; }
.card.sun .kicker, .card.sun a { color: var(--ink); }
.card.white { background: #fff; padding: 1.6rem; box-shadow: var(--shadow); }
.wheel-row { display: flex; gap: 1.1rem; align-items: center; }
.wheel { flex: none; width: 140px; height: 140px; border-radius: 50%; position: relative;
         background: conic-gradient(var(--teal) 0 45deg, var(--aqua) 45deg 90deg, var(--gold) 90deg 135deg,
           var(--ink) 135deg 180deg, var(--teal) 180deg 225deg, var(--aqua) 225deg 270deg,
           var(--gold) 270deg 315deg, var(--ink) 315deg 360deg); }
.wheel span { position: absolute; inset: 36px; border-radius: 50%; background: var(--sun);
              display: grid; place-items: center; font-weight: 900; font-size: 1.8rem; }
.tracks { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .6rem; }
.tracks li { background: var(--pale); border-radius: 16px; padding: .8rem 1.1rem; }

/* --- reels --- */
.reels { background: var(--ink); color: var(--mist); margin-top: 3.5rem; }
.reels .wrap { padding-bottom: 5rem; }
.reels h2 { margin: 0 0 2.2rem; }
.reel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.reel-grid figure { margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.reel-grid video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 24px;
                   background: var(--teal); }
.reel-grid figcaption { display: flex; justify-content: space-between; gap: .8rem; font-weight: 500; }
.dur { color: var(--aqua); white-space: nowrap; }

/* --- quiz --- */
.quiz { background: #fff; border-radius: 32px; padding: 2.5rem; box-shadow: var(--shadow);
        display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 2rem; }
.q { border: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.q legend { font-weight: 800; margin-bottom: .75rem; padding: 0; }
.q button { font: inherit; font-weight: 800; background: var(--pale); color: var(--ink); border: none;
            border-radius: 18px; padding: 1.2rem; min-height: 5.5rem; text-align: start; cursor: pointer; }
.q button:hover { background: var(--ink); color: #fff; }
.result { background: var(--ink); color: #fff; border-radius: 24px; padding: 1.8rem; display: grid; gap: .6rem; }
.result h3 { font-weight: 900; font-size: 2.1rem; }
.result p { margin: 0; }

/* --- gallery --- */
.gallery { display: flex; gap: 1rem; padding: 2.5rem 2rem; overflow-x: auto; scroll-snap-type: x proximity; }
.gallery img { flex: 0 0 auto; width: 260px; height: 340px; object-fit: cover; border-radius: 24px; scroll-snap-align: start; }
.gallery img:nth-child(even) { transform: translateY(24px); }

/* --- steps, week, timeline, faq --- */
.steps { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.steps li { background: #fff; border-radius: 24px; padding: 1.5rem; display: flex; flex-direction: column; gap: .3rem; }
.steps b { font-size: 1.3rem; }
.steps .sun, .timeline .sun { background: var(--sun); }
.steps .sun .num { color: var(--ink); }

.week { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 2rem; }
.week > div:first-child { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.week p { margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.tabs button { font: inherit; font-weight: 800; border-radius: 999px; padding: .6rem 1.2rem; min-height: 2.75rem;
               cursor: pointer; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.slots { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.slots li { background: #fff; border-radius: 20px; padding: 1.1rem; display: flex; flex-direction: column; }
.slots b { font-size: 1.6rem; font-weight: 900; }
.slots .dark { background: var(--ink); color: #fff; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.timeline li { background: #fff; border-radius: 20px; padding: 1.25rem; box-shadow: var(--shadow); }
.timeline li:nth-child(odd) { rotate: 1.2deg; }
.timeline li:nth-child(even) { rotate: -1deg; }
.timeline b { display: block; font-size: 1.9rem; font-weight: 900; color: var(--teal); }
.timeline .sun b { color: var(--ink); }

.faq { max-width: 900px; }
.faq h2 { margin-bottom: 1.4rem; }
.faq details { background: #fff; border-radius: 20px; padding: 1.2rem 1.5rem; margin-bottom: .75rem; }
.faq summary { font-weight: 800; font-size: 1.2rem; cursor: pointer; }
.faq details p { margin: .6rem 0 0; }

.foot { background: #fff; margin-top: 4rem; }
.foot-in { padding: 2.5rem 2rem; display: grid; gap: 1rem; }
.details { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .4rem 2rem; }
.details div { display: flex; gap: .5rem; flex-wrap: wrap; }
.details dt { font-weight: 700; }
.details dd { margin: 0; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

.wa { position: fixed; bottom: 1.2rem; inset-inline-start: 1.2rem; width: 60px; height: 60px; border-radius: 50%;
      background: #1f9d55; display: grid; place-items: center; box-shadow: 0 10px 24px rgb(16 47 54 / .25); z-index: 5; }

/* --- phones --- */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .wrap { padding: 3.2rem 1.1rem 1rem; }
  .head { padding: .8rem 1rem; }
  .nav { order: 3; width: 100%; justify-content: center; }
  .logo-link img { height: 40px; }
  .nav { gap: 0; padding: .2rem; }
  .nav a { padding: .45rem .7rem; font-size: .95rem; }
  .hero { grid-template-columns: 1fr; padding: .3rem .6rem 0; }
  .hero-photo, [dir="rtl"] .hero-photo { border-radius: 28px 28px 0 0; height: 440px; }
  .hero-photo img { object-position: 50% 30%; }
  .hero-text, [dir="rtl"] .hero-text { border-radius: 0 0 28px 28px; padding: 1.6rem 1.3rem 1.8rem; }
  .hi { font-size: 2rem; }
  .title { font-size: 3.1rem; }
  .lead { font-size: 1.05rem; }
  .marquee-track { font-size: 1.8rem; }
  .gallery { padding: 2rem 1.1rem; }
  .gallery img { width: 200px; height: 270px; }
  .quiz { padding: 1.5rem; }
}

/* --- motion: only for those who did not ask for less --- */
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 28s linear infinite; }
  @keyframes marquee { to { transform: translateX(50%); } }
  .hero-text > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-text > :nth-child(2) { animation-delay: .1s; }
  .hero-text > :nth-child(3) { animation-delay: .2s; }
  .hero-text > :nth-child(4) { animation-delay: .3s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .arch { animation: grow linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes grow { from { scale: .88; opacity: .4; } }
  }
}