/* =========================================================
       GLOBAL SCOPE
       Future Angular note:
       Keep only reset, tokens, typography and generic helpers here.
       Each section below is intentionally scoped by a unique class.
    ========================================================= */

    :root {
      --color-ink: #2a1a0e;
      --color-muted: #7a5c40;
      --color-soft: #f5ede0;
      --color-soft-2: #faf5ed;
      --color-card: rgba(255, 255, 255, 0.60);
      --color-line: rgba(42, 26, 14, 0.08);
      --color-accent: #5c8c38;
      --color-accent-dark: #3c6020;
      --color-green: #78aa4a;
      --shadow-soft: 0 2px 8px rgba(60, 36, 14, 0.05), 0 12px 40px rgba(60, 36, 14, 0.10);
      --shadow-small: 0 1px 4px rgba(60, 36, 14, 0.04), 0 6px 20px rgba(60, 36, 14, 0.07);
      --radius-xl: 8px;
      --radius-lg: 8px;
      --radius-md: 8px;
      --container: 1180px;
      --section-space: 120px;
      --font-main: 'Heebo', Arial, Helvetica, sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: var(--font-main);
      background:
        radial-gradient(ellipse at 20% -5%, rgba(185, 133, 77, 0.09), transparent 50%),
        #f3e8d6;
      color: var(--color-ink);
      line-height: 1.65;
    }

    img {
      max-width: 100%;
      display: block;
    }

    button,
    a {
      font: inherit;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .page-shell {
      overflow-x: clip;
    }

    .site-container {
      width: min(var(--container), calc(100% - 40px));
      margin: 0 auto;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 6px 14px;
      border: 1px solid var(--color-line);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.60);
      color: var(--color-accent-dark);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--color-accent);
      flex-shrink: 0;
    }

    /* Skip link — visually hidden, appears on keyboard focus */
    .skip-link {
      position: fixed;
      top: -100%;
      right: 50%;
      transform: translateX(50%);
      z-index: 9999;
      padding: 12px 28px;
      background: var(--color-ink);
      color: #fff;
      font-weight: 800;
      font-size: 1rem;
      border-radius: 0 0 var(--radius-md) var(--radius-md);
      text-decoration: none;
      transition: top 150ms ease;
    }

    .skip-link:focus {
      top: 0;
    }

    :focus-visible {
      outline: 3px solid var(--color-accent);
      outline-offset: 3px;
      border-radius: 4px;
    }

    .primary-button,
    .secondary-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 0 28px;
      border-radius: 999px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, opacity 160ms ease;
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: -0.01em;
    }

    .primary-button {
      background: var(--color-ink);
      color: #fff;
      box-shadow: 0 2px 6px rgba(42, 26, 14, 0.10), 0 6px 18px rgba(42, 26, 14, 0.12);
    }

    .primary-button:hover,
    .secondary-button:hover {
      transform: none;
    }

    .secondary-button {
      color: var(--color-ink);
      background: rgba(255, 255, 255, 0.60);
      border-color: var(--color-line);
    }

    /* ── Skeleton loading placeholders ─────────────────────── */

    @keyframes yb-shimmer {
      0%   { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }

    .yb-skeleton {
      background: linear-gradient(90deg, var(--color-soft) 25%, var(--color-soft-2) 37%, var(--color-soft) 63%);
      background-size: 800px 100%;
      animation: yb-shimmer 1.4s ease-in-out infinite;
      border-radius: 8px;
      display: block;
    }

    @media (prefers-reduced-motion: reduce) {
      .yb-skeleton { animation: none; }
    }

    @keyframes yb-fade-in {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .yb-fade-in {
      animation: yb-fade-in 320ms ease both;
    }

    @media (prefers-reduced-motion: reduce) {
      .yb-fade-in { animation: none; }
    }

    /* ── Ripple host + unified hover ──────────────────────── */

    .has-ripple {
      position: relative;
      overflow: hidden;
      --ripple-color: rgba(42, 26, 14, 0.10);
    }

    .has-ripple:hover { opacity: 0.78; }

    .primary-button,
    .yb-book-card__buy {
      --ripple-color: rgba(255, 255, 255, 0.24);
    }

    .yb-ripple {
      position: absolute;
      border-radius: 50%;
      background: var(--ripple-color, rgba(255, 255, 255, 0.24));
      transform: scale(0);
      pointer-events: none;
      animation: yb-ripple 560ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes yb-ripple {
      to { transform: scale(3.8); opacity: 0; }
    }

    /* ── Parchment klaf — shared visual identity ──────── */

    .yb-klaf {
      position: relative;
      background: rgba(255, 255, 255, 0.60);
      box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 10px 28px rgba(0, 0, 0, 0.09),
        0 36px 72px rgba(0, 0, 0, 0.08),
        inset 0 0 48px rgba(160, 100, 40, 0.07);
      overflow: visible;
    }

    .yb-klaf::before,
    .yb-klaf::after {
      content: '';
      position: absolute;
      left: -22px;
      right: -22px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(
        180deg,
        #f2dfa8 0%,
        #c88a36 36%,
        #a06828 58%,
        #c8963e 80%,
        #e8c878 100%
      );
      box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.32),
        0 2px 4px rgba(0, 0, 0, 0.16),
        inset 0 2px 6px rgba(255, 255, 255, 0.42),
        inset 0 -2px 6px rgba(0, 0, 0, 0.22);
      z-index: 2;
    }

    .yb-klaf::before { top: -14px; }
    .yb-klaf::after  { bottom: -14px; }

    .yb-klaf--sm::before,
    .yb-klaf--sm::after {
      height: 18px;
      left: -8px;
      right: -8px;
    }

    .yb-klaf--sm::before { top: -9px; }
    .yb-klaf--sm::after  { bottom: -9px; }

    .section-heading {
      max-width: 620px;
      margin: 0 auto 64px;
      text-align: center;
    }

    .section-heading h2 {
      margin: 16px 0 14px;
      font-size: clamp(1.6rem, 2.6vw, 2.2rem);
      line-height: 1.15;
      letter-spacing: -0.03em;
    }

    .section-heading p {
      margin: 0;
      color: var(--color-muted);
      font-size: 1.05rem;
      line-height: 1.7;
    }

    /* =========================================================
       SECTION 01: HEADER
    ========================================================= */

    .yb-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(250, 242, 228, 0.84);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(42, 26, 14, 0.08);
    }

    .yb-header__inner {
      position: relative;
      min-height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .yb-header__brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -0.02em;
    }

    .yb-header__mark {
      display: grid;
      place-items: center;
    }

    .yb-header__mark img {
      width: 36px;
      height: 26px;
      object-fit: contain;
      display: block;
    }

    .yb-header__nav {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      gap: 24px;
      color: var(--color-muted);
      font-size: 0.95rem;
      white-space: nowrap;
    }

    .yb-header__nav a {
      transition: color 150ms ease;
    }

    .yb-header__nav a:hover {
      color: var(--color-ink);
    }

    .yb-header__actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .yb-header__mini-button {
      display: inline-flex;
      align-items: center;
      min-height: 42px;
      padding: 0 18px;
      border-radius: 999px;
      border: 1px solid var(--color-line);
      background: rgba(255, 255, 255, 0.60);
      font-weight: 800;
      cursor: pointer;
      transition: background 150ms ease, border-color 150ms ease, opacity 160ms ease;
    }

    .yb-header__logout-link {
      background: none;
      border: none;
      font-family: var(--font-main);
      font-size: 0.8rem;
      color: var(--color-muted);
      cursor: pointer;
      text-decoration: underline;
      padding: 0 2px;
      transition: color 160ms;
    }

    .yb-header__logout-link:hover {
      color: var(--color-ink);
    }

    .yb-header__logout-link[hidden] {
      display: none;
    }

    .yb-header__hamburger {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--color-line);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.60);
      cursor: pointer;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      padding: 0;
      flex-shrink: 0;
      transition: opacity 160ms ease;
    }

    .yb-header__hamburger span {
      display: block;
      width: 18px;
      height: 2px;
      background: var(--color-ink);
      border-radius: 999px;
      transition: transform 220ms ease, opacity 220ms ease;
    }

    .yb-header__hamburger.is-open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .yb-header__hamburger.is-open span:nth-child(2) {
      opacity: 0;
    }

    .yb-header__hamburger.is-open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .yb-mobile-nav {
      border-top: 1px solid var(--color-line);
      background: rgba(250, 242, 228, 0.98);
    }

    .yb-mobile-nav__inner {
      display: flex;
      flex-direction: column;
      padding: 8px 0 12px;
    }

    .yb-mobile-nav__link {
      display: block;
      padding: 15px 6px;
      border-bottom: 1px solid var(--color-line);
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--color-ink);
      transition: color 150ms ease, opacity 160ms ease;
    }

    .yb-mobile-nav__link:last-child {
      border-bottom: 0;
    }

    .yb-mobile-nav__action {
      display: block;
      width: 100%;
      padding: 14px 6px;
      margin-top: 8px;
      border-top: 1px solid var(--color-line);
      font-family: var(--font-main);
      font-size: 1rem;
      font-weight: 700;
      color: var(--color-accent);
      background: none;
      border-bottom: none;
      text-align: right;
      cursor: pointer;
    }

    .yb-mobile-nav__action--logout {
      color: var(--color-muted);
    }

    /* =========================================================
       SECTION 02: HERO
    ========================================================= */

    .yb-hero {
      position: relative;
      height: 88vh;
      min-height: 420px;
      overflow: hidden;
    }

    .yb-hero__parallax-img {
      position: absolute;
      top: -15%;
      left: 0;
      width: 100%;
      height: 130%;
      object-fit: cover;
      object-position: center center;
      will-change: transform;
      pointer-events: none;
      user-select: none;
      display: block;
    }

    /* =========================================================
       SECTION 03: INTRO TEXT
    ========================================================= */

    .yb-intro {
      padding: 42px 0 var(--section-space);
    }

    .yb-intro__panel {
      display: block;
      padding: 52px 56px 64px;
      border: none;
      border-radius: 0;
      text-align: center;
    }

    .yb-intro__quote {
      margin: 0;
      padding: 0;
      border: none;
    }

    .yb-intro__text {
      margin: 0;
      font-size: 1.16rem;
      line-height: 1.8;
      color: #5a3e22;
    }

    .yb-intro__cite {
      display: block;
      margin-top: 20px;
      text-align: center;
      font-size: 0.88rem;
      font-style: normal;
      color: #8a6a40;
      letter-spacing: 0.01em;
    }

    /* =========================================================
       SECTION 04: BOOKS
    ========================================================= */

    .yb-books {
      padding: 60px 0 var(--section-space);
      background: rgba(255, 255, 255, 0.34);
    }

    .yb-books__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px;
      margin-top: -80px;
      position: relative;
      z-index: 5;
    }

    .yb-book-card {
      display: grid;
      grid-template-columns: 190px minmax(0, 1fr);
      gap: 28px;
      padding: 32px;
      border-radius: var(--radius-xl);
      background: var(--color-card);
      border: 1px solid rgba(42, 26, 14, 0.06);
      box-shadow: var(--shadow-small);
      position: relative;
      z-index: 0;
      will-change: transform;
      transition:
        transform 360ms cubic-bezier(0.34, 1.35, 0.64, 1),
        box-shadow 320ms ease,
        z-index 0ms;
    }

    .yb-book-card:hover {
      transform: scale(1.048) translateY(-14px);
      box-shadow:
        0 6px 20px rgba(42, 26, 14, 0.08),
        0 22px 56px rgba(42, 26, 14, 0.15),
        0 44px 88px rgba(42, 26, 14, 0.09);
      z-index: 10;
    }

    .yb-book-card__cover {
      aspect-ratio: 0.68;
      border-radius: 4px 8px 8px 4px;
      background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.15), transparent 11%),
        linear-gradient(145deg, #d4b888, #7a4a1e);
      box-shadow: 0 20px 42px rgba(60, 36, 14, 0.22);
      color: #fff8ec;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-self: start;
      position: relative;
      z-index: 1;
      transition:
        transform 360ms cubic-bezier(0.34, 1.35, 0.64, 1),
        box-shadow 320ms ease;
    }

    .yb-book-card:hover .yb-book-card__cover {
      transform: translateY(-22px);
      box-shadow:
        0 28px 56px rgba(60, 36, 14, 0.30),
        0 6px 16px rgba(60, 36, 14, 0.18);
    }

    .yb-book-card.is-tilted .yb-book-card__cover {
      transform: translateY(-20px) rotate(-5deg);
    }

    .yb-book-card:nth-child(2) .yb-book-card__cover {
      background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.15), transparent 11%),
        linear-gradient(145deg, #e8efe5, #667f65);
    }

    .yb-book-card__cover-title {
      font-size: 1.7rem;
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: -0.05em;
    }

    .yb-book-card__meta {
      color: rgba(255, 245, 225, 0.82);
      font-size: 0.9rem;
    }

    .yb-book-card__body h3 {
      margin: 4px 0 10px;
      font-size: 1.3rem;
      line-height: 1.15;
      letter-spacing: -0.04em;
    }

    .yb-book-card__body p {
      margin: 0 0 18px;
      color: var(--color-muted);
    }

    .yb-book-card__list {
      display: grid;
      gap: 8px;
      margin: 0 0 22px;
      padding: 0;
      list-style: none;
      color: var(--color-muted);
      font-size: 0.95rem;
    }

    .yb-book-card__list li::before {
      content: "✓";
      color: var(--color-green);
      font-weight: 900;
      margin-left: 8px;
    }

    .yb-book-card__footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .yb-book-card__price {
      font-size: 1.7rem;
      font-weight: 900;
      letter-spacing: -0.04em;
    }

    .yb-book-card__buy {
      min-height: 46px;
      padding: 0 22px;
      border: 0;
      border-radius: 999px;
      color: #fff;
      background: var(--color-ink);
      font-weight: 700;
      font-size: 0.9rem;
      letter-spacing: -0.01em;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: opacity 160ms ease;
    }


    /* =========================================================
       SECTION 07+08: INFO (process + FAQ merged)
    ========================================================= */

    .yb-info {
      padding: var(--section-space) 0;
      background: rgba(255, 255, 255, 0.36);
    }

    .yb-info__lead-block {
      max-width: 620px;
      margin: 0 auto 40px;
      text-align: center;
    }

    .yb-info__title {
      margin: 16px 0 14px;
      font-size: clamp(1.6rem, 2.6vw, 2.2rem);
      font-weight: 900;
      color: var(--color-ink);
      letter-spacing: -0.03em;
      line-height: 1.15;
    }

    .yb-info__body {
      font-size: 1.05rem;
      color: var(--color-muted);
      line-height: 1.7;
      margin: 0;
    }

    .yb-steps {
      list-style: none;
      padding: 0;
      margin: 0 0 52px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: center;
    }

    .yb-steps__item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 20px 10px 16px;
      background: #fff;
      border: 1.5px solid var(--color-line);
      border-radius: 100px;
    }

    .yb-steps__num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--color-ink);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 900;
      flex-shrink: 0;
    }

    .yb-steps__label {
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--color-ink);
    }

    .yb-info__sep {
      max-width: 760px;
      height: 1px;
      background: var(--color-line);
      margin: 0 auto 52px;
    }

    .yb-info__faq-label {
      max-width: 760px;
      margin: 0 auto 8px;
      font-size: 0.82rem;
      font-weight: 800;
      color: var(--color-muted);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    /* =========================================================
       SECTION 06: TESTIMONIALS
    ========================================================= */

    .yb-testimonials {
      padding: var(--section-space) 0;
      background:
        radial-gradient(ellipse at 60% 0%, rgba(255, 255, 255, 0.05), transparent 50%),
        linear-gradient(155deg, #1a0e06 0%, #2a1a0a 100%);
      color: #fff8ec;
    }

    .yb-testimonials .eyebrow {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 245, 220, 0.18);
      color: rgba(255, 240, 210, 0.90);
    }

    .yb-testimonials .eyebrow::before {
      background: rgba(255, 210, 140, 0.70);
    }

    .yb-testimonials__header {
      text-align: center;
      margin-bottom: 52px;
    }

    .yb-testimonials__runner {
      width: min(var(--container), calc(100% - 40px));
      margin: 0 auto;
      overflow: hidden;
      direction: ltr;
    }

    .yb-testimonials__track {
      display: flex;
      gap: 36px;
      direction: ltr;
      will-change: transform;
    }

    .yb-testimonial {
      flex-shrink: 0;
      padding: 44px 48px 40px;
      margin: 0;
      position: relative;
      direction: rtl;
    }

    .yb-testimonial::before {
      content: '\201C';
      position: absolute;
      top: 18px;
      right: 20px;
      font-size: 90px;
      line-height: 1;
      color: rgba(210, 155, 65, 0.18);
      font-family: Georgia, 'Times New Roman', serif;
      pointer-events: none;
      user-select: none;
    }

    .yb-testimonial__text {
      position: relative;
      margin: 0 0 24px;
      font-size: 1.08rem;
      line-height: 1.84;
      color: rgba(255, 242, 218, 0.87);
      quotes: none;
      text-align: right;
    }

    .yb-testimonial__cite {
      display: block;
      font-style: normal;
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: 0.09em;
      color: rgba(205, 148, 58, 0.78);
      text-transform: uppercase;
      text-align: left;
    }

    .yb-testimonial__book {
      display: block;
      margin-top: 12px;
      margin-bottom: 6px;
      padding-right: 4px;
      font-size: 0.74rem;
      color: rgba(255, 240, 210, 0.36);
      letter-spacing: 0.05em;
      text-align: right;
    }

    /* =========================================================
       SECTION 07: AUTHOR
    ========================================================= */

    .yb-author {
      padding: var(--section-space) 0;
    }

    .yb-author__panel {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 56px;
      align-items: center;
      padding: 52px 0;
    }

    .yb-author__portrait {
      aspect-ratio: 1;
      border-radius: 8px;
      overflow: hidden;
      background: linear-gradient(145deg, #d3b892, #71573d);
    }

    .yb-author__portrait img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center -34px;
      display: block;
    }

    .yb-author__content h2 {
      margin: 14px 0 12px;
      font-size: clamp(1.6rem, 2.6vw, 2.2rem);
      line-height: 1.08;
      letter-spacing: -0.05em;
    }

    .yb-author__content p {
      margin: 0 0 20px;
      color: var(--color-muted);
      font-size: 1.07rem;
    }

    .yb-author__read-more {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: none;
      border: none;
      padding: 0 0 3px 8px;
      font-family: var(--font-main);
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--color-accent);
      cursor: pointer;
      text-decoration: none;
      position: relative;
      overflow: visible;
      transition: color 160ms;
    }

    .yb-author__read-more::after {
      content: '';
      width: 75%;
      position: absolute;
      bottom: 5px;
      left: 0;
      right: 0;
      height: 1px;
      background: rgba(42, 122, 78, 0.35);
      transition: background 160ms;
    }

    .yb-author__read-more:hover {
      color: var(--color-accent-dark);
    }

    .yb-author__read-more-arrow {
      display: inline-block;
      transition: transform 160ms;
    }

    .yb-author__read-more:hover .yb-author__read-more-arrow {
      transform: translateX(-5px);
    }

    /* ── Author modal ────────────────────────────────────── */
    .yb-author-modal {
      position: fixed;
      inset: 0;
      z-index: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .yb-author-modal[hidden] { display: none; }

    @keyframes author-overlay-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    @keyframes author-box-in {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes author-overlay-out {
      from { opacity: 1; }
      to   { opacity: 0; }
    }

    @keyframes author-box-out {
      from { opacity: 1; transform: translateY(0); }
      to   { opacity: 0; transform: translateY(10px); }
    }

    .yb-author-modal__overlay {
      position: absolute;
      inset: 0;
      background: rgba(15, 34, 24, 0.72);
      backdrop-filter: blur(3px);
      animation: author-overlay-in 220ms ease both;
    }

    .yb-author-modal.is-closing .yb-author-modal__overlay {
      animation: author-overlay-out 480ms 160ms ease both;
    }

    .yb-author-modal__box {
      position: relative;
      z-index: 1;
      background: #fff;
      border-radius: 18px;
      width: 100%;
      max-width: 860px;
      max-height: 90vh;
      overflow-y: auto;
      padding: 48px 52px;
      animation: author-box-in 300ms 80ms ease both;
    }

    .yb-author-modal.is-closing .yb-author-modal__box {
      animation: author-box-out 180ms ease both;
      box-shadow: 0 24px 80px rgba(15, 34, 24, 0.28);
    }

    .yb-author-modal__close {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1.5px solid rgba(15, 34, 24, 0.14);
      background: none;
      font-size: 1rem;
      color: var(--color-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 160ms, color 160ms;
    }

    .yb-author-modal__close:hover {
      background: var(--color-soft);
      color: var(--color-ink);
    }

    .yb-author-modal__profile {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 40px;
      align-items: start;
      margin-bottom: 48px;
    }

    .yb-author-modal__portrait {
      aspect-ratio: 3/4;
      border-radius: 12px;
      overflow: hidden;
      background: linear-gradient(145deg, #d3b892, #71573d);
    }

    .yb-author-modal__portrait img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    .yb-author-modal__bio .eyebrow {
      display: block;
      margin-bottom: 10px;
    }

    .yb-author-modal__bio h2 {
      margin: 0 0 20px;
      font-size: clamp(1.3rem, 2.2vw, 1.7rem);
      line-height: 1.15;
      letter-spacing: -0.04em;
      color: var(--color-ink);
    }

    .yb-author-modal__bio p {
      margin: 0 0 14px;
      color: var(--color-muted);
      font-size: 0.97rem;
      line-height: 1.75;
    }

    /* ── Credits ─────────────────────────────────────────── */
    .yb-author-modal__credits-section {
      border-top: 2px solid var(--color-soft);
      padding-top: 36px;
    }

    .yb-author-modal__credits-title {
      margin: 0 0 6px;
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--color-ink);
      letter-spacing: -0.02em;
    }

    .yb-author-modal__credits-intro {
      margin: 0 0 28px;
      font-size: 0.9rem;
      color: var(--color-muted);
    }

    .yb-author-modal__credits-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .yb-credit-card {
      background: var(--color-soft);
      border-radius: 12px;
      padding: 22px 24px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .yb-credit-card__role {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-accent);
    }

    .yb-credit-card__name {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--color-ink);
      line-height: 1.2;
    }

    .yb-credit-card__desc {
      margin: 4px 0 0;
      font-size: 0.84rem;
      color: var(--color-muted);
      line-height: 1.6;
    }

    .yb-faq__list {
      max-width: 760px;
      margin: 0 auto;
      display: grid;
      border-top: 1px solid var(--color-line);
    }

    .yb-faq__item {
      border-radius: 0;
      border: none;
      border-bottom: 1px solid var(--color-line);
      background: transparent;
      overflow: hidden;
    }

    .yb-faq__button {
      width: 100%;
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      color: var(--color-ink);
      font-weight: 700;
      font-size: 1rem;
      text-align: right;
      transition: opacity 160ms ease;
    }

    .yb-faq__button span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border: 1px solid var(--color-line);
      border-radius: 50%;
      font-size: 1.1rem;
      line-height: 1;
      transition: transform 260ms ease, border-color 180ms ease;
      flex-shrink: 0;
      color: var(--color-muted);
    }

    .yb-faq__item.is-open .yb-faq__button span {
      transform: rotate(45deg);
      border-color: var(--color-accent);
      color: var(--color-accent);
    }

    .yb-faq__answer {
      max-height: 0;
      overflow: hidden;
      padding: 0;
      color: var(--color-muted);
      font-size: 0.97rem;
      line-height: 1.75;
      transition: max-height 320ms ease, padding 320ms ease;
    }

    .yb-faq__item.is-open .yb-faq__answer {
      max-height: 260px;
      padding-bottom: 28px;
    }

    .yb-faq__answer a {
      color: var(--color-accent);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .yb-faq__answer a:hover {
      color: var(--color-accent-dark);
    }

    /* =========================================================
       SECTION 09: FINAL CTA
    ========================================================= */

    .yb-final-cta {
      display: none;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
        linear-gradient(150deg, #1a0e06 0%, #3c4c1a 100%);
      color: #fff8ec;
    }

    .yb-final-cta__panel {
      text-align: center;
      padding: var(--section-space) 40px;
      max-width: 780px;
      margin: 0 auto;
    }

    .yb-final-cta__panel h2 {
      margin: 0 0 16px;
      font-size: clamp(1.9rem, 3.2vw, 2.8rem);
      line-height: 1.08;
      letter-spacing: -0.05em;
    }

    .yb-final-cta__panel p {
      margin: 0 auto 32px;
      font-size: 1.1rem;
      line-height: 1.7;
      color: rgba(255, 240, 210, 0.80);
    }

    .yb-final-cta .primary-button {
      background: #f5ece0;
      color: var(--color-ink);
    }

    /* =========================================================
       SECTION 10: FOOTER
    ========================================================= */

    .yb-footer {
      border-top: 1px solid var(--color-line);
      font-size: 0.8rem;
      color: var(--color-muted);
    }

    .yb-footer__inner {
      position: relative;
      min-height: 120px;
      display: flex;
      align-items: center;
    }

    .yb-footer__credit {
      margin-right: auto;
      color: var(--color-muted);
    }

    .yb-footer__credit-link {
      color: inherit;
      font-weight: 700;
      text-decoration: none;
      transition: color 160ms;
    }

    .yb-footer__credit-link:hover {
      color: var(--color-accent);
    }

    .yb-footer__end {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }

    .yb-footer__copy {
      color: var(--color-muted);
    }

    .yb-footer__links {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .yb-footer__pipe {
      opacity: 0.25;
      user-select: none;
    }

    .yb-footer__legal-btn {
      background: none;
      border: none;
      padding: 0;
      font-family: var(--font-main);
      font-size: 0.8rem;
      color: var(--color-muted);
      cursor: pointer;
      transition: color 160ms;
    }

    .yb-footer__legal-btn:hover {
      color: var(--color-accent);
    }

    .yb-footer__contact {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--color-muted);
      text-decoration: none;
      transition: color 160ms;
    }

    .yb-footer__contact:hover {
      color: var(--color-accent);
    }

    /* ── Legal modal ─────────────────────────────────────── */
    .yb-legal-modal {
      position: fixed;
      inset: 0;
      z-index: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .yb-legal-modal[hidden] { display: none; }

    .yb-legal-modal__overlay {
      position: absolute;
      inset: 0;
      background: rgba(15, 34, 24, 0.6);
      backdrop-filter: blur(3px);
    }

    .yb-legal-modal__box {
      position: relative;
      z-index: 1;
      background: #fff;
      border-radius: 16px;
      width: 100%;
      max-width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0 44px 40px;
      box-shadow: 0 20px 60px rgba(15, 34, 24, 0.2);
    }

    .yb-legal-modal__sticky-bar {
      position: sticky;
      top: 0;
      height: 48px;
      margin: 0 -44px 8px;
      padding: 0 44px;
      background: #fff;
      z-index: 5;
    }

    .yb-legal-modal__close {
      position: absolute;
      top: 16px;
      left: 16px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(15, 34, 24, 0.12);
      background: none;
      font-size: 0.9rem;
      color: var(--color-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 160ms;
    }

    .yb-legal-modal__close:hover {
      background: var(--color-soft);
    }

    .yb-legal-modal__title {
      margin: 0 0 20px;
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--color-ink);
    }

    .yb-legal-modal__body {
      font-size: 0.92rem;
      color: var(--color-muted);
      line-height: 1.8;
    }

    .yb-legal-modal__body h3 {
      margin: 22px 0 8px;
      font-size: 1rem;
      font-weight: 800;
      color: var(--color-ink);
    }

    .yb-legal-modal__body h3:first-child {
      margin-top: 0;
    }

    .yb-legal-modal__body ul {
      margin: 0;
      padding-inline-start: 22px;
    }

    .yb-legal-modal__body li {
      margin-bottom: 6px;
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 980px) {
      :root {
        --section-space: 80px;
      }

      .yb-header__nav {
        display: none;
      }

      .yb-header__hamburger {
        display: flex;
      }

      .yb-intro__panel,
      .yb-author__panel {
        grid-template-columns: 1fr;
      }

      .yb-books__grid {
        grid-template-columns: 1fr;
      }

      .yb-books__grid {
        margin-top: -48px;
      }

      .yb-book-card {
        grid-template-columns: 160px minmax(0, 1fr);
      }

      .yb-author__portrait {
        max-width: 340px;
      }

      .yb-author-modal__box {
        padding: 36px 28px;
      }

      .yb-author-modal__profile {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .yb-author-modal__portrait {
        max-width: 180px;
        aspect-ratio: 1;
      }

      .yb-author-modal__credits-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .site-container {
        width: min(100% - 28px, var(--container));
      }

      .yb-header__inner {
        min-height: 68px;
      }

      .yb-header__mini-button:nth-child(1) {
        display: none;
      }

      .yb-hero {
        height: 62vh;
      }

      .yb-intro__panel,
      .yb-author__panel {
        padding: 32px;
        gap: 32px;
      }

      .yb-books__grid {
        margin-top: -28px;
      }

      .yb-book-card {
        grid-template-columns: 1fr;
      }

      .yb-book-card__cover {
        max-width: 210px;
      }

      .yb-testimonial {
        padding: 24px 26px 20px;
      }

      .yb-author-modal {
        padding: 12px;
        align-items: flex-end;
      }

      .yb-author-modal__box {
        padding: 28px 20px 32px;
        border-radius: 18px 18px 0 0;
        max-height: 92vh;
      }

      .yb-author-modal__close {
        top: 14px;
        left: 14px;
      }
    }

    /* =========================================================
       ACCESSIBILITY: REDUCED MOTION
       Removes transform-based motion (vestibular risk) only.
       Color, opacity, and max-height transitions are kept —
       they are not disorienting and preserve interactive feel.
    ========================================================= */
    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      /* Remove positional transforms and hover filters */
      .yb-book-card:hover,
      .yb-book-card:hover .yb-book-card__cover,
      .yb-book-card.is-tilted .yb-book-card__cover {
        transform: none;
      }

      .has-ripple:hover { opacity: 1; }

      .yb-testimonials__track { animation: none; transition: none; }

      /* Snap hamburger icon change — no spin animation */
      .yb-header__hamburger span {
        transition: none;
      }

      /* Snap FAQ icon — no rotation */
      .yb-faq__button span {
        transition: none;
      }
    }

    /* =========================================================
       SHARED FORM FIELDS
       Used by auth modal (index.html) and account.html.
       purchase.css extends these for the purchase form.
    ========================================================= */

    .yb-field {
      display: flex;
      flex-direction: column;
    }

    .yb-field__label {
      display: block;
      margin-bottom: 8px;
      font-size: 0.79rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--color-muted);
    }

    .yb-field__req {
      color: var(--color-accent);
    }

    .yb-field__input {
      display: block;
      width: 100%;
      padding: 13px 16px;
      border: 1.5px solid rgba(42, 26, 14, 0.18);
      border-radius: var(--radius-md);
      background: #fff;
      font-family: var(--font-main);
      font-size: 1rem;
      color: var(--color-ink);
      line-height: 1.5;
      text-align: right;
      outline: none;
      box-sizing: border-box;
      transition: border-color 160ms ease, box-shadow 160ms ease;
      -webkit-appearance: none;
      appearance: none;
    }

    .yb-field__input::placeholder {
      color: rgba(122, 92, 64, 0.34);
    }

    .yb-field__input:focus {
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px rgba(92, 140, 56, 0.13);
    }

    .yb-field__input.is-error {
      border-color: #c0392b;
      box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.10);
    }

    .yb-field__input--textarea {
      resize: none;
      height: 120px;
    }

    .yb-field__error {
      margin: 6px 0 0;
      font-size: 0.82rem;
      font-weight: 700;
      color: #c0392b;
      line-height: 1.4;
      min-height: 0;
    }

    /* =========================================================
       AUTH MODAL
    ========================================================= */

    .yb-auth-modal {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .yb-auth-modal[hidden] {
      display: none;
    }

    .yb-auth-modal__overlay {
      position: absolute;
      inset: 0;
      background: rgba(15, 34, 24, 0.65);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .yb-auth-modal__box {
      position: relative;
      background: #fff;
      border-radius: 16px;
      padding: 44px 40px 40px;
      width: 100%;
      max-width: 440px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 24px 64px rgba(15, 34, 24, 0.28);
    }

    .yb-auth-modal__close {
      position: absolute;
      top: 14px;
      inset-inline-start: 14px;
      background: none;
      border: none;
      font-size: 1.4rem;
      line-height: 1;
      cursor: pointer;
      color: var(--color-muted);
      padding: 6px 10px;
      border-radius: 6px;
      transition: background 160ms, color 160ms;
    }

    .yb-auth-modal__close:hover {
      background: var(--color-soft);
      color: var(--color-ink);
    }

    .yb-auth-modal__title {
      margin: 0 0 8px;
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--color-ink);
    }

    .yb-auth-modal__sub {
      margin: 0 0 28px;
      font-size: 0.9rem;
      color: var(--color-muted);
      line-height: 1.65;
    }

    .yb-auth-form {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    /* Tab switcher: אימייל / טלפון */
    .yb-auth-contact-tabs {
      display: flex;
      gap: 6px;
      background: var(--color-soft);
      border-radius: 10px;
      padding: 4px;
    }

    .yb-auth-tab {
      flex: 1;
      padding: 8px 14px;
      background: none;
      border: none;
      border-radius: 7px;
      cursor: pointer;
      font-size: 0.9rem;
      font-family: var(--font-main);
      color: var(--color-muted);
      transition: all 160ms;
    }

    .yb-auth-tab.is-active {
      background: #fff;
      color: var(--color-accent);
      font-weight: 700;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    }

    /* Lookup error banner */
    .yb-auth-error {
      margin: 0;
      font-size: 0.88rem;
      line-height: 1.55;
      color: #b03020;
      background: #fdf1f0;
      border-inline-end: 3px solid #c0392b;
      padding: 10px 14px;
      border-radius: 8px;
    }

    .yb-auth-error[hidden] {
      display: none;
    }

    /* ── OTP boxes ──────────────────────────────────────── */

    .yb-otp-group {
      display: flex;
      gap: 10px;
      justify-content: center;
      direction: ltr;
    }

    .yb-otp-box {
      width: 56px;
      height: 64px;
      border: 2px solid rgba(42, 26, 14, 0.18);
      border-radius: 12px;
      background: #fff;
      font-family: var(--font-main);
      font-size: 1.8rem;
      font-weight: 700;
      text-align: center;
      color: var(--color-ink);
      outline: none;
      caret-color: transparent;
      transition: border-color 180ms, box-shadow 180ms, background 180ms;
      -webkit-appearance: none;
      appearance: none;
    }

    .yb-otp-box:focus {
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px rgba(42, 122, 78, 0.15);
      background: #f5fbf7;
    }

    .yb-otp-box.is-filled {
      border-color: var(--color-accent);
      background: #f0f8f3;
    }

    .yb-otp-group.is-error .yb-otp-box {
      border-color: #c0392b;
      background: #fdf1f0;
    }

    /* Pop animation on digit entry */
    @keyframes otp-pop {
      0%   { transform: scale(1); }
      35%  { transform: scale(1.2); }
      65%  { transform: scale(0.92); }
      100% { transform: scale(1); }
    }

    .yb-otp-box.is-popping {
      animation: otp-pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Shake on wrong code */
    @keyframes otp-shake {
      0%, 100% { transform: translateX(0); }
      15%  { transform: translateX(-8px); }
      30%  { transform: translateX(8px); }
      45%  { transform: translateX(-5px); }
      60%  { transform: translateX(5px); }
      75%  { transform: translateX(-2px); }
      90%  { transform: translateX(2px); }
    }

    .yb-otp-group.is-shaking {
      animation: otp-shake 500ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
    }

    /* ── Step transitions ───────────────────────────────── */

    @keyframes auth-step-in {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .yb-auth-step {
      animation: auth-step-in 380ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ── Modal box entrance ─────────────────────────────── */

    @keyframes modal-box-in {
      from { opacity: 0; transform: translateY(28px) scale(0.95); }
      to   { opacity: 1; transform: translateY(0)  scale(1); }
    }

    .yb-auth-modal__box {
      animation: modal-box-in 420ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes modal-overlay-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    .yb-auth-modal__overlay {
      animation: modal-overlay-in 300ms ease;
    }

    /* Full-width submit */
    .yb-auth-submit {
      width: 100%;
      justify-content: center;
    }

    /* Back link */
    .yb-auth-back {
      background: none;
      border: none;
      font-family: var(--font-main);
      font-size: 0.88rem;
      color: var(--color-muted);
      cursor: pointer;
      text-decoration: underline;
      text-align: center;
      padding: 0;
      transition: color 160ms;
    }

    .yb-auth-back:hover {
      color: var(--color-ink);
    }

    /* Resend OTP */
    .yb-auth-resend {
      margin: 8px 0 0;
      font-size: 0.85rem;
      color: var(--color-muted);
      text-align: center;
    }

    .yb-auth-resend__btn {
      background: none;
      border: none;
      font-family: var(--font-main);
      font-size: 0.85rem;
      color: var(--color-accent);
      cursor: pointer;
      text-decoration: underline;
      padding: 0;
      margin-inline-start: 4px;
    }

    .yb-auth-resend__btn:hover {
      color: var(--color-accent-dark);
    }

    .yb-auth-resend__btn:disabled {
      color: var(--color-muted);
      cursor: default;
      text-decoration: none;
    }

    .yb-auth-resend__status {
      margin-inline-start: 6px;
      color: var(--color-accent);
    }