/* =============================================================================
   desktop-home.css — Desktop layout for the homepage (Patch 1 of the desktop
   redesign). Translated from the claude.ai/design "MeowTarot Desktop" mockup.

   ADDITIVE + SCOPED:
   - Everything lives under `@media (min-width:1024px)` and `body[data-page='home']`.
   - Below 1024px nothing here applies → existing mobile home + iOS wrap untouched.
   - On desktop: the mobile home sections are hidden and `.mtd-home` is shown.
   Tokens (colors/fonts) mirror the existing brand + the design doc.
   ========================================================================== */

/* desktop block hidden by default (mobile) */
.mtd-home { display: none; }

@media (min-width: 1024px) {
  /* swap: hide the mobile-first home sections, show the desktop block */
  body[data-page='home'] .home-page > .home-hero,
  body[data-page='home'] .home-page > .home-paths,
  body[data-page='home'] .home-page > .home-deck-strip,
  body[data-page='home'] .home-page > .home-seo-content,
  body[data-page='home'] .home-page > .home-app-banner { display: none !important; }

  body[data-page='home'] .home-page { display: block; padding: 0; max-width: none; width: auto; }
  body[data-page='home'] .mtd-home { display: block; color: #3d1a5c; font-family: 'DM Sans', 'IBM Plex Sans Thai', system-ui, sans-serif; }

  .mtd-wrap { max-width: 1240px; margin: 0 auto; padding-inline: 32px; }

  /* ---------- HERO ---------- */
  .mtd-hero { position: relative; overflow: hidden; }
  .mtd-hero__inner { max-width: 1240px; margin: 0 auto; padding: 70px 32px 52px;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
  .mtd-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px/1 'DM Sans';
    letter-spacing: .16em; text-transform: uppercase; color: #a9722a;
    background: rgba(201,147,58,.12); border: 1px solid rgba(201,147,58,.28); padding: 8px 14px; border-radius: 99px; }
  .mtd-h1 { font-family: 'Cormorant Garamond', 'Noto Serif Thai', serif; font-weight: 600; font-size: 64px; line-height: 1.04;
    letter-spacing: -.015em; color: #2a1142; margin: 22px 0 0; }
  .mtd-h1 em { font-style: italic; color: #7a1f66; }
  .mtd-hero__th { font-family: 'Noto Serif Thai', serif; font-size: 20px; color: #6a3f8e; margin: 10px 0 0; font-weight: 500; }
  .mtd-hero__lede { font-size: 16.5px; line-height: 1.65; color: #7c5e96; max-width: 440px; margin: 18px 0 0; }
  .mtd-hero__cta { display: flex; gap: 14px; margin-top: 28px; align-items: center; flex-wrap: wrap; }

  .mtd-btn { appearance: none; border: 0; cursor: pointer; font: 600 16px/1 'DM Sans'; text-decoration: none;
    color: #fdf6ee; background: linear-gradient(135deg, #6e1d4c 0%, #d12878 48%, #e8a838 100%);
    padding: 16px 28px; border-radius: 99px; box-shadow: 0 16px 32px -8px rgba(209,40,120,.55);
    transition: transform .18s, box-shadow .18s; display: inline-flex; align-items: center; }
  .mtd-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -10px rgba(209,40,120,.6); }
  .mtd-btn--ghost { color: #6a3f8e; background: rgba(255,255,255,.6); border: 1px solid rgba(106,63,142,.25);
    box-shadow: none; font-size: 15px; padding: 15px 24px; }
  .mtd-btn--ghost:hover { border-color: #d49a2c; color: #7a1f66; transform: translateY(-1px); box-shadow: none; }

  .mtd-trust { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: #9a86b2; font-size: 13.5px; }
  .mtd-trust__dots { display: flex; }
  .mtd-trust__dots span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fbf5fb; }
  .mtd-trust__dots span:nth-child(1) { background: linear-gradient(135deg, #e8457a, #e8c478); }
  .mtd-trust__dots span:nth-child(2) { background: linear-gradient(135deg, #6a3f8e, #a487c4); margin-left: -9px; }
  .mtd-trust__dots span:nth-child(3) { background: linear-gradient(135deg, #d49a2c, #f6abc3); margin-left: -9px; }
  .mtd-trust strong { color: #6a3f8e; }

  /* fanned card backs */
  .mtd-fan { position: relative; height: 430px; display: flex; align-items: center; justify-content: center; }
  .mtd-fan__halo { position: absolute; width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(232,196,120,.35) 0%, rgba(232,196,120,0) 68%); }
  /* aspect-ratio matches the real back art (1568x2720 = 0.576) so object-fit:cover
   * doesn't crop the card's own border — boba-oracle (.mtd-card--r) is a different
   * source ratio (848x1264) and overrides below. */
  .mtd-card { position: absolute; width: 188px; aspect-ratio: 1568 / 2720; border-radius: 16px;
    border: 1px solid rgba(232,196,120,.5); box-shadow: 0 30px 60px -20px rgba(61,26,92,.65);
    overflow: hidden; animation: mtfloat 6s ease-in-out infinite; }
  .mtd-card__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .mtd-card__m { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center;
    font-family: 'Cormorant Garamond', 'Noto Serif Thai', serif; font-style: italic; font-size: 46px; color: rgba(232,196,120,.85); }
  .mtd-card--l { --rest: rotate(-16deg) translateX(-118px); background: linear-gradient(155deg, #4a1a3e, #7a1f66 50%, #b9246a); }
  .mtd-card--r { --rest: rotate(16deg) translateX(118px); animation-delay: .8s; aspect-ratio: 848 / 1264; background: linear-gradient(155deg, #2a1d4a, #6a3f8e 60%, #a487c4); }
  .mtd-card--c { --rest: rotate(0deg); animation-delay: .4s; position: relative; width: 204px; aspect-ratio: 1568 / 2720; border-radius: 18px;
    border: 1.5px solid rgba(232,196,120,.7); box-shadow: 0 40px 70px -24px rgba(61,26,92,.7);
    background: linear-gradient(155deg, #3d1a5c, #7a1f66 45%, #d12878); }
  .mtd-card--c .mtd-card__m { top: 60%; font-size: 50px; }
  .mtd-card__sun { position: absolute; left: 0; right: 0; top: 34%; transform: translateY(-50%); text-align: center; }
  .mtd-card__sun span { display: inline-block; width: 34px; height: 34px; border-radius: 50%;
    background: radial-gradient(circle at 64% 50%, transparent 44%, #e8c478 45%, #e8c478 53%, transparent 54%); }
  .mtd-card__wm { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
    font: 600 9px/1 'DM Sans'; letter-spacing: .22em; color: rgba(232,196,120,.7); }

  /* ---------- SECTION HEADERS ---------- */
  .mtd-sec { max-width: 1240px; margin: 0 auto; padding: 34px 32px 20px; }
  .mtd-sec__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
  .mtd-kicker { font: 600 11.5px/1 'DM Sans'; letter-spacing: .16em; text-transform: uppercase; color: #a9722a; }
  .mtd-h2 { font-family: 'Cormorant Garamond', 'Noto Serif Thai', serif; font-weight: 600; font-size: 36px; color: #2a1142; margin: 10px 0 0; letter-spacing: -.01em; }
  .mtd-head__th { font-family: 'Noto Serif Thai', serif; font-size: 16px; color: #6a3f8e; }
  .mtd-seeall { appearance: none; border: 0; background: none; cursor: pointer; text-decoration: none;
    font: 600 12px/1 'DM Sans'; letter-spacing: .06em; color: #a9722a; }
  .mtd-seeall:hover { color: #7a1f66; }

  /* ---------- READING MODES ---------- */
  .mtd-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .mtd-mode { display: block; text-decoration: none; background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.9); border-radius: 22px; padding: 26px;
    box-shadow: 0 12px 30px -14px rgba(61,26,92,.22); transition: .2s; }
  .mtd-mode:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -18px rgba(61,26,92,.32); border-color: #e8c478; }
  .mtd-mode__art { margin-bottom: 20px; }
  .mtd-mode__art .c1 { width: 62px; height: 88px; border-radius: 9px; position: relative;
    background: linear-gradient(155deg, #3d1a5c, #7a1f66 45%, #d12878); border: 1px solid rgba(232,196,120,.55);
    box-shadow: 0 10px 20px -8px rgba(61,26,92,.5); }
  .mtd-mode__art .c1::after { content: 'M'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: 'Cormorant Garamond', 'Noto Serif Thai', serif; font-style: italic; font-size: 22px; color: rgba(232,196,120,.85); }
  .mtd-mode__art--three { display: flex; gap: 5px; }
  .mtd-mode__art--three span { width: 42px; height: 88px; border-radius: 8px; border: 1px solid rgba(232,196,120,.5); display: block; }
  .mtd-mode__art--three span:nth-child(1) { background: linear-gradient(160deg, #6a3f8e, #a487c4); transform: rotate(-6deg); }
  .mtd-mode__art--three span:nth-child(2) { background: linear-gradient(160deg, #7a1f66, #d12878); }
  .mtd-mode__art--three span:nth-child(3) { background: linear-gradient(160deg, #3d1a5c, #6a3f8e); transform: rotate(6deg); }
  .mtd-mode h3 { font-family: 'Cormorant Garamond', 'Noto Serif Thai', serif; font-weight: 600; font-size: 25px; color: #2a1142; margin: 0; }
  .mtd-mode__th { font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 13px; color: #9a86b2; margin: 3px 0 0; }
  .mtd-mode__desc { font-size: 14.5px; line-height: 1.55; color: #7c5e96; margin: 12px 0 16px; }
  .mtd-mode__foot { display: flex; align-items: center; justify-content: space-between; }
  .mtd-tag { font: 600 11px/1 'DM Sans'; letter-spacing: .04em; color: #a9722a; background: rgba(201,147,58,.12); padding: 7px 11px; border-radius: 99px; }
  .mtd-mode__go { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e8457a; color: #e8457a;
    display: flex; align-items: center; justify-content: center; font-size: 15px; }

  /* ---------- DECK GALLERY ---------- */
  .mtd-decks { display: flex; gap: 18px; overflow-x: auto; padding: 8px 2px 20px; }
  .mtd-deck { flex-shrink: 0; width: 150px; text-decoration: none; }
  .mtd-deck__card { width: 150px; height: 212px; border-radius: 14px; border: 1px solid rgba(232,196,120,.55);
    box-shadow: 0 18px 36px -14px rgba(61,26,92,.5); position: relative; overflow: hidden; transition: .22s;
    background: linear-gradient(155deg, #3d1a5c, #6a3f8e); }
  .mtd-deck:hover .mtd-deck__card { transform: translateY(-6px) rotate(-1deg); }
  .mtd-deck__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .mtd-deck__card::after { content: ''; position: absolute; inset: 8px; border: .5px solid rgba(232,196,120,.45); border-radius: 9px; pointer-events: none; }
  .mtd-deck__name { font-family: 'Cormorant Garamond', 'Noto Serif Thai', serif; font-weight: 600; font-size: 16px; color: #2a1142; margin-top: 10px; }
  .mtd-deck__note { font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 11.5px; color: #9a86b2; }
  .mtd-deck--velvet .mtd-deck__card { background: linear-gradient(155deg, #3d1a5c, #7a1f66 45%, #d12878); }
  .mtd-deck--honey .mtd-deck__card { background: linear-gradient(155deg, #c9933a, #e8457a); }
  .mtd-deck--boba .mtd-deck__card { background: linear-gradient(155deg, #6a3f8e, #a487c4); }
  .mtd-deck--nakorn .mtd-deck__card { background: linear-gradient(155deg, #7a4a12, #c9933a 55%, #e8c478); }
  .mtd-deck.is-locked .mtd-deck__img { filter: saturate(.45) brightness(.78); }
  .mtd-deck__lock { position: absolute; inset: 0; z-index: 2; background: rgba(42,17,66,.5); display: flex;
    align-items: center; justify-content: center; flex-direction: column; gap: 8px;
    font: 600 10px/1 'DM Sans'; letter-spacing: .14em; color: rgba(232,196,120,.9); }

  /* ---------- WIDGET SHOWCASE BAND ---------- */
  .mtd-widband { max-width: 1240px; margin: 34px auto 0; padding: 0 32px; }
  .mtd-widband__box { position: relative; border-radius: 30px; overflow: hidden;
    background: linear-gradient(150deg, #2a1142 0%, #4a1a45 52%, #6e1d4c 100%);
    box-shadow: 0 40px 80px -30px rgba(42,17,66,.7); }
  .mtd-widband__box::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(700px 360px at 88% -10%, rgba(232,168,56,.22) 0%, rgba(232,168,56,0) 60%),
                radial-gradient(600px 400px at 0% 110%, rgba(209,40,120,.28) 0%, rgba(209,40,120,0) 60%); }
  .mtd-widband__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding: 52px; align-items: center; }
  .mtd-widband__eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px/1 'DM Sans';
    letter-spacing: .16em; text-transform: uppercase; color: #e8c478; background: rgba(232,196,120,.12);
    border: 1px solid rgba(232,196,120,.3); padding: 8px 14px; border-radius: 99px; }
  .mtd-widband__h2 { font-family: 'Cormorant Garamond', 'Noto Serif Thai', serif; font-weight: 600; font-size: 44px; line-height: 1.06;
    color: #fdf6ee; margin: 20px 0 0; letter-spacing: -.01em; }
  .mtd-widband__h2 em { font-style: italic; color: #f6abc3; }
  .mtd-widband__lede { font-size: 16px; line-height: 1.6; color: rgba(253,246,238,.78); max-width: 460px; margin: 16px 0 0; }
  .mtd-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0 0; }
  .mtd-chips span { font: 600 12px/1 'DM Sans'; color: #fdf6ee; background: rgba(255,255,255,.1);
    border: 1px solid rgba(253,246,238,.2); padding: 9px 13px; border-radius: 99px; }
  .mtd-widband__cta { display: flex; gap: 13px; margin-top: 26px; align-items: center; flex-wrap: wrap; }
  .mtd-btn--gold { color: #2a1142; background: linear-gradient(135deg, #e8c478, #d49a2c); box-shadow: 0 16px 30px -10px rgba(232,196,120,.5); font-size: 15px; }
  .mtd-btn--gold:hover { box-shadow: 0 16px 30px -10px rgba(232,196,120,.5); }
  .mtd-link-light { color: rgba(253,246,238,.8); font: 600 14px/1 'DM Sans'; text-decoration: none; }
  .mtd-link-light:hover { color: #fff; }
  .mtd-widstats { display: flex; gap: 28px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(253,246,238,.14); }
  .mtd-widstats b { display: block; font-family: 'Cormorant Garamond', 'Noto Serif Thai', serif; font-weight: 600; font-size: 26px; color: #e8c478; }
  .mtd-widstats small { font-size: 12px; color: rgba(253,246,238,.6); }

  /* browser-window "in the wild" mock */
  .mtd-browser { border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
    border: 1px solid rgba(253,246,238,.1); background: #fbf6ef; }
  .mtd-browser__bar { background: #ece1d6; padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
  .mtd-browser__bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
  .mtd-browser__bar i:nth-child(1) { background: #e8847a; }
  .mtd-browser__bar i:nth-child(2) { background: #e8c478; }
  .mtd-browser__bar i:nth-child(3) { background: #9bca8c; }
  .mtd-browser__url { flex: 1; margin-left: 8px; background: #fff; border-radius: 6px; font: 500 11px/1 'DM Sans'; color: #9a86b2; padding: 6px 12px; }
  .mtd-browser__body { display: grid; grid-template-columns: 1fr 168px; gap: 14px; padding: 18px; }
  .mtd-fakeart h4 { font-family: 'Cormorant Garamond', 'Noto Serif Thai', serif; font-weight: 600; font-size: 18px; color: #2a1142; line-height: 1.2; margin: 0; }
  .mtd-fakeart .byline { font-size: 10px; color: #b3a4c2; margin: 5px 0 12px; }
  .mtd-fakeart .ln { height: 8px; background: #efe7db; border-radius: 4px; margin-bottom: 7px; }
  .mtd-embed { background: #fffaf2; border: 1px solid #ece1d6; border-radius: 14px; padding: 14px; text-align: center;
    box-shadow: 0 10px 24px -12px rgba(61,26,92,.35); }
  .mtd-embed .eb { font: 600 8px/1 'DM Sans'; letter-spacing: .14em; text-transform: uppercase; color: #c9933a; }
  .mtd-embed .tt { font-family: 'Cormorant Garamond', 'Noto Serif Thai', serif; font-style: italic; font-weight: 600; font-size: 15px; color: #3d1a5c; margin: 5px 0 10px; }
  .mtd-embed__card { margin: 0 auto; width: 64px; height: 92px; border-radius: 8px; position: relative;
    background: linear-gradient(155deg, #3d1a5c, #7a1f66 45%, #d12878); border: 1px solid rgba(232,196,120,.55); }
  .mtd-embed__card::after { content: 'M'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: 'Cormorant Garamond', 'Noto Serif Thai', serif; font-style: italic; font-size: 22px; color: rgba(232,196,120,.85); }
  .mtd-embed .rv { margin-top: 10px; font: 600 9px/1.1 'DM Sans'; color: #fff; background: linear-gradient(135deg, #d12878, #e8a838); padding: 8px; border-radius: 99px; }
  .mtd-embed .via { font-size: 8px; color: #b3a4c2; margin-top: 8px; }
  .mtd-embed .via b { color: #6a3f8e; }
  /* live widget embed (real iframe inside the browser chrome) */
  .mtd-browser__body--live { display: block; padding: 0; }
  .mtd-widframe { width: 100%; height: 540px; border: 0; display: block;
    background: linear-gradient(160deg, #f0eaff 0%, #fce4f0 50%, #e4f0ff 100%); }

  /* ---------- TRY THE WIDGET (direct interactive embed, founder 2026-07-02) ---------- */
  .mtd-tryband__lede { font-size: 15.5px; line-height: 1.6; color: #7c6a92; max-width: 560px; margin: 14px 0 0; }
  .mtd-tryband__frame { max-width: 820px; margin: 24px auto 0; border-radius: 26px; overflow: hidden;
    border: 1px solid rgba(106,63,142,.18); box-shadow: 0 20px 48px rgba(61,26,92,.12); }
  .mtd-tryframe { width: 100%; height: 560px; border: 0; display: block;
    background: linear-gradient(160deg, #f0eaff 0%, #fce4f0 50%, #e4f0ff 100%); }

  /* ---------- FOOTER ---------- */
  .mtd-foot { max-width: 1240px; margin: 56px auto 0; padding: 36px 32px 56px;
    border-top: 1px solid rgba(106,63,142,.14); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
  .mtd-foot__brand { display: flex; align-items: center; gap: 9px; font-family: 'Cormorant Garamond', 'Noto Serif Thai', serif; font-style: italic; font-weight: 600; font-size: 21px; color: #3d1a5c; }
  .mtd-foot__brand span { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 64% 50%, transparent 44%, #d49a2c 45%, #d49a2c 53%, transparent 54%); }
  .mtd-foot__links { display: flex; gap: 24px; font-size: 13.5px; }
  .mtd-foot__links a { color: #9a86b2; text-decoration: none; }
  .mtd-foot__links a:hover { color: #7a1f66; }
  .mtd-foot__copy { font-size: 12.5px; color: #b3a4c2; }
}

@keyframes mtfloat { 0%, 100% { transform: var(--rest); } 50% { transform: var(--rest) translateY(-14px); } }