@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(fonts/cinzel-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dmsans-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/dmsans-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/fraunces-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/fraunces-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ================= Alla Tarot — Marseille-pop design system ================= */
:root {
  --ink: #17130f; --paper: #f6ecd6; --paper-2: #efe0bf; --card: #fbf4e3;
  --yellow: #f4c430; --red: #d9412b; --blue: #5ba4d6; --green: #4f9a5b; --navy: #1d3557;
  --muted: #5b5146;
  --display: 'Fraunces', Georgia, serif; --label: 'Cinzel', Georgia, serif; --body: 'DM Sans', system-ui, sans-serif;
  --b: 3px solid var(--ink); --sh: 6px 6px 0 var(--ink); --sh-s: 4px 4px 0 var(--ink);
  --r: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body.lock { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
section { padding: 110px 0; position: relative; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: .98; letter-spacing: -.02em; margin: 0; font-variation-settings: "opsz" 144; }
h2 { font-size: clamp(42px, 6.4vw, 84px); }
h2 em, h1 em { font-style: italic; font-weight: 600; color: var(--red); }
.kicker { font-family: var(--label); font-weight: 700; font-size: 14px; letter-spacing: .28em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.kicker::before, .kicker::after { content: "✦"; color: var(--red); letter-spacing: 0; }
.lead { font-size: 19px; color: var(--muted); max-width: 600px; }
.center { text-align: center; } .center .lead { margin: 20px auto 0; }

/* tarot svg text */
.tc-num { font: 700 22px var(--label); fill: var(--ink); }
.tc-title { font: 700 16px var(--label); letter-spacing: 2px; fill: var(--ink); }
.tcard { display: block; width: 100%; height: auto; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--body); font-weight: 700; font-size: 17px;
  padding: 17px 30px; border: var(--b); border-radius: 60px; text-decoration: none; cursor: pointer; background: var(--yellow); color: var(--ink);
  box-shadow: var(--sh-s); transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--red); }
.btn-ink:hover { box-shadow: 6px 6px 0 var(--red); }
.btn-paper { background: var(--card); }
.btn .arr { transition: transform .2s; } .btn:hover .arr { transform: translateX(4px); }

/* ---------- prices ---------- */
.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price .now { font-family: var(--display); font-weight: 900; font-size: 46px; line-height: 1; letter-spacing: -.03em; }
.price .now sup { font-size: .5em; vertical-align: .55em; margin-right: 1px; }
.price .was { position: relative; font-family: var(--display); font-weight: 600; font-size: 24px; color: var(--muted); }
.price .was::after { content: ""; position: absolute; left: -6%; right: -6%; top: 52%; height: 3px; background: var(--red); transform: rotate(-14deg); border-radius: 3px; }
.price .save { font-family: var(--label); font-weight: 800; font-size: 12px; letter-spacing: .12em; background: var(--red); color: var(--paper); padding: 4px 10px; border-radius: 30px; border: 2px solid var(--ink); align-self: center; }
.stamp { width: 92px; height: 92px; border-radius: 50%; background: var(--red); color: var(--paper); border: var(--b); display: grid; place-items: center; text-align: center;
  font-family: var(--display); font-weight: 900; font-size: 27px; line-height: .9; transform: rotate(-12deg); box-shadow: var(--sh-s); position: relative; }
.stamp::before { content: ""; position: absolute; inset: 6px; border: 2px dashed rgba(246,236,214,.7); border-radius: 50%; }
.stamp small { display: block; font-family: var(--label); font-size: 10px; letter-spacing: .14em; font-weight: 700; margin-top: 4px; }

/* ---------- announcement + header ---------- */
.announce { background: var(--ink); color: var(--paper); font-size: 14px; text-align: center; padding: 9px 16px; font-weight: 500; }
.announce b { color: var(--yellow); }
.hdr { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: var(--b); }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-mark { width: 30px; height: 44px; flex: none; }
.logo b { font-family: var(--display); font-weight: 900; font-size: 30px; letter-spacing: -.02em; line-height: 1; }
.logo b i { font-weight: 600; color: var(--red); }
.nav { display: flex; gap: 6px; }
.nav a { text-decoration: none; font-weight: 600; font-size: 15.5px; padding: 8px 14px; border-radius: 40px; border: 2px solid transparent; transition: border-color .15s, background .15s; }
.nav a:hover { border-color: var(--ink); background: var(--card); }
.hdr .btn { padding: 12px 22px; font-size: 15px; }
.burger { display: none; width: 52px; height: 52px; border: var(--b); border-radius: 50%; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; position: relative; z-index: 80; }
.burger span { position: absolute; left: 13px; right: 13px; height: 3px; background: var(--ink); border-radius: 3px; transition: transform .35s, top .35s; }
.burger span:nth-child(1) { top: 19px; } .burger span:nth-child(2) { top: 28px; }
.menu-open .hdr { z-index: 75; background: var(--yellow); transition: background .3s .2s; }
.menu-open .burger { background: var(--paper); }
.menu-open .burger span:nth-child(1) { top: 23.5px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: 23.5px; transform: rotate(-45deg); }

/* ---------- mobile menu ---------- */
.mmenu { position: fixed; inset: 0; z-index: 70; background: var(--yellow); display: flex; flex-direction: column; padding: 150px 26px 26px; overflow: hidden;
  clip-path: circle(0 at calc(100% - 46px) 66px); transition: clip-path .6s cubic-bezier(.7,0,.2,1); visibility: hidden; }
.mmenu::before { content: ""; position: absolute; inset: -50%; z-index: -1; opacity: .35;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--paper) 0 7deg, transparent 7deg 14deg); animation: spin 90s linear infinite; }
.menu-open .mmenu { clip-path: circle(150% at calc(100% - 46px) 66px); visibility: visible; }
.mmenu a.ml { display: flex; align-items: baseline; gap: 16px; text-decoration: none; font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 1.1; letter-spacing: -.02em;
  padding: 8px 0; border-bottom: 3px solid var(--ink); opacity: 0; transform: translateY(24px); transition: opacity .4s, transform .4s; }
.mmenu a.ml small { font-family: var(--label); font-size: 15px; font-weight: 700; color: var(--red); width: 44px; flex: none; letter-spacing: .1em; }
.menu-open .mmenu a.ml { opacity: 1; transform: none; }
.menu-open .mmenu a.ml:nth-of-type(1) { transition-delay: .18s; } .menu-open .mmenu a.ml:nth-of-type(2) { transition-delay: .24s; }
.menu-open .mmenu a.ml:nth-of-type(3) { transition-delay: .30s; } .menu-open .mmenu a.ml:nth-of-type(4) { transition-delay: .36s; }
.menu-open .mmenu a.ml:nth-of-type(5) { transition-delay: .42s; }
.mm-fan { display: flex; justify-content: center; margin: auto 0 22px; height: 150px; }
.mm-fan .tcard { width: 92px; margin: 0 -14px; filter: drop-shadow(4px 4px 0 var(--ink)); transform: translateY(60px) rotate(0); opacity: 0; transition: transform .6s cubic-bezier(.3,1.4,.5,1), opacity .4s; }
.menu-open .mm-fan .tcard { opacity: 1; transition-delay: .4s; }
.menu-open .mm-fan .tcard:nth-child(1) { transform: rotate(-14deg) translateY(10px); }
.menu-open .mm-fan .tcard:nth-child(2) { transform: translateY(-6px); z-index: 1; }
.menu-open .mm-fan .tcard:nth-child(3) { transform: rotate(14deg) translateY(10px); }
.mmenu .btn { width: 100%; }
.mm-mail { text-align: center; margin-top: 14px; font-weight: 600; font-size: 15px; }

/* ---------- hero ---------- */
.hero { padding: 70px 0 120px; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 1500px; height: 1500px; right: -560px; top: -470px; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(from 0deg, var(--paper-2) 0 6deg, transparent 6deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 62%); mask: radial-gradient(circle, #000 0 30%, transparent 62%); animation: spin 140s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(50px, 6.3vw, 92px); }
.hero h1 .ul { position: relative; white-space: nowrap; }
.hero h1 .ul svg { position: absolute; left: -2%; bottom: -.12em; width: 104%; height: .32em; }
.hero p.sub { font-size: 20px; color: var(--muted); max-width: 540px; margin: 28px 0 36px; }
.hero .ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hero .from { font-size: 15px; color: var(--muted); }
.hero .from .was { position: relative; } .hero .from .was::after { content: ""; position: absolute; left: -4%; right: -4%; top: 50%; height: 2px; background: var(--red); transform: rotate(-12deg); }
.hero .from b { color: var(--ink); font-size: 19px; }
.ticks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 38px; }
.ticks span { border: 2px solid var(--ink); border-radius: 40px; padding: 7px 16px; font-size: 14px; font-weight: 600; background: var(--card); }
.ticks span::before { content: "✦ "; color: var(--red); }
.fan { position: relative; height: 560px; }
.fan .c { position: absolute; width: 238px; top: 50%; left: 50%; transition: transform .5s cubic-bezier(.3,1.3,.5,1); filter: drop-shadow(7px 7px 0 var(--ink)); }
.fan .c1 { transform: translate(-118%, -46%) rotate(-15deg); }
.fan .c2 { transform: translate(-50%, -58%); z-index: 2; }
.fan .c3 { transform: translate(18%, -46%) rotate(15deg); }
.fan:hover .c1 { transform: translate(-130%, -48%) rotate(-21deg); }
.fan:hover .c2 { transform: translate(-50%, -64%); }
.fan:hover .c3 { transform: translate(30%, -48%) rotate(21deg); }
.spin-badge { position: absolute; z-index: 3; right: -2%; top: 0; width: 150px; height: 150px; }
.spin-badge::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--paper); border: var(--b); box-shadow: var(--sh-s); }
.spin-badge .ring { position: relative; }
.spin-badge .ring { width: 100%; height: 100%; animation: spin 18s linear infinite; }
.spin-badge .ring text { font: 700 12px var(--label); letter-spacing: 2px; fill: var(--ink); }
.spin-badge .mid { position: absolute; inset: 30px; border-radius: 50%; background: var(--red); color: var(--paper); border: var(--b); display: grid; place-items: center; text-align: center;
  font-family: var(--display); font-weight: 900; font-size: 30px; line-height: .85; }
.spin-badge .mid small { display: block; font: 700 10px var(--label); letter-spacing: .14em; margin-top: 4px; }

/* ---------- marquee ---------- */
.marquee { background: var(--red); border-top: var(--b); border-bottom: var(--b); overflow: hidden; transform: rotate(-1.5deg); margin: -10px -20px 0; position: relative; z-index: 5; }
.marquee .track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee span { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 34px; color: var(--paper); padding: 14px 0; white-space: nowrap; }
.marquee span i { font-style: normal; color: var(--yellow); margin: 0 26px; font-size: 26px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- readings ---------- */
.readings { padding-top: 140px; }
.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 70px; }
.prod { background: var(--card); border: var(--b); border-radius: var(--r); box-shadow: var(--sh); display: flex; flex-direction: column; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.prod:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.prod .top { position: relative; height: 290px; border-bottom: var(--b); display: grid; place-items: center; overflow: hidden; }
.prod .top::before { content: ""; position: absolute; inset: -40%; opacity: .25; background: repeating-conic-gradient(from 0deg, var(--paper) 0 8deg, transparent 8deg 16deg); }
.prod .top .tcard { width: 150px; position: relative; transform: rotate(-5deg) translateY(28px); filter: drop-shadow(5px 5px 0 var(--ink)); transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.prod:hover .top .tcard { transform: rotate(3deg) translateY(10px) scale(1.04); }
.prod .top .stamp { position: absolute; right: 16px; top: 16px; width: 76px; height: 76px; font-size: 22px; }
.prod .flag { position: absolute; left: 16px; top: 16px; background: var(--ink); color: var(--yellow); font: 700 11px var(--label); letter-spacing: .16em; padding: 6px 12px; border-radius: 30px; }
.bg-blue { background: var(--blue); } .bg-red { background: var(--red); } .bg-yellow { background: var(--yellow); }
.bg-green { background: var(--green); } .bg-navy { background: var(--navy); } .bg-paper { background: var(--paper-2); }
.prod .body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.prod .sub { font: 700 12px var(--label); letter-spacing: .2em; color: var(--red); text-transform: uppercase; }
.prod h3 { font-size: 40px; margin: 8px 0 12px; }
.prod p { margin: 0 0 16px; color: var(--muted); font-size: 16px; }
.prod ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.prod li { padding: 7px 0 7px 28px; position: relative; font-size: 15.5px; font-weight: 500; border-top: 1.5px dashed rgba(23,19,15,.25); }
.prod li::before { content: "✦"; position: absolute; left: 4px; color: var(--red); }
.prod .meta { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.prod .price { margin-bottom: 18px; }
.prod .btn { width: 100%; }

.daily { margin-top: 44px; display: grid; grid-template-columns: 260px 1fr auto; gap: 40px; align-items: center; background: var(--navy); color: var(--paper);
  border: var(--b); border-radius: var(--r); box-shadow: var(--sh); padding: 36px 44px; position: relative; overflow: hidden; }
.daily::before { content: ""; position: absolute; left: -120px; top: -120px; width: 520px; height: 520px; opacity: .12; background: repeating-conic-gradient(var(--yellow) 0 6deg, transparent 6deg 12deg); border-radius: 50%; }
.daily .cards2 { position: relative; height: 230px; }
.daily .cards2 .tcard { position: absolute; width: 140px; filter: drop-shadow(5px 5px 0 #000); }
.daily .cards2 .tcard:first-child { left: 0; top: 10px; transform: rotate(-9deg); }
.daily .cards2 .tcard:last-child { left: 100px; top: 0; transform: rotate(8deg); }
.daily .sub { color: var(--yellow); }
.daily h3 { font-size: 52px; margin: 6px 0 10px; color: var(--paper); }
.daily p { color: #cdd6e6; margin: 0; max-width: 520px; }
.daily .price .was { color: #9fb0c8; }
.daily .price .now { color: var(--yellow); } .daily .price .per { font-size: 16px; color: #cdd6e6; }
.daily .right { text-align: center; position: relative; }
.daily .right .btn { margin-top: 14px; }

/* ---------- delivery & studio status ---------- */
.dl { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 12px; margin-bottom: 16px; line-height: 1.35; }
.dl b { font-size: 14px; color: var(--ink); }
.dl-i { background: #e4f1e4; } .dl-t { background: #fbe7c2; }
.delivery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 44px; border: var(--b); border-radius: var(--r); background: var(--card); box-shadow: var(--sh-s); overflow: hidden; }
.dv { display: flex; gap: 16px; padding: 26px 26px; } .dv + .dv { border-left: var(--b); }
.dv .ic { width: 48px; height: 48px; flex: none; border: var(--b); border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--yellow); }
.dv:nth-child(2) .ic { background: var(--blue); } .dv:nth-child(3) .ic { background: var(--red); color: var(--paper); }
.dv h4 { font-family: var(--display); font-weight: 900; font-size: 24px; margin: 0 0 4px; }
.dv p { margin: 0; font-size: 14.5px; color: var(--muted); } .dv p b { color: var(--ink); }
.status { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; font-weight: 600; background: var(--card); border: 2px solid var(--ink); border-radius: 40px; padding: 7px 16px 7px 12px; }
.status i { width: 10px; height: 10px; border-radius: 50%; background: #b9ae9c; flex: none; }
.status.open i { background: #2fa44f; box-shadow: 0 0 0 0 rgba(47,164,79,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(47,164,79,0); } 100% { box-shadow: 0 0 0 0 rgba(47,164,79,0); } }
.mmenu .status { margin: 0 auto 12px; }
.hours { margin-top: 26px; background: var(--card); border: var(--b); border-radius: var(--r); box-shadow: var(--sh-s); padding: 20px 24px; }
.hours .h-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.hours .h-top > b { font-family: var(--display); font-weight: 900; font-size: 24px; }
.hours .status { margin: 0; font-size: 12.5px; }
.h-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1.5px dashed rgba(23,19,15,.25); font-size: 15px; }
.h-row span { color: var(--muted); }

/* ---------- pick a card ---------- */
.pick { background: var(--ink); color: var(--paper); overflow: hidden; }
.pick::before { content: ""; position: absolute; left: 50%; top: 55%; width: 1400px; height: 1400px; transform: translate(-50%, -50%); opacity: .07;
  background: repeating-conic-gradient(var(--yellow) 0 5deg, transparent 5deg 10deg); border-radius: 50%; }
.pick .kicker::before, .pick .kicker::after { color: var(--yellow); }
.pick h2 em { color: var(--yellow); }
.pick .lead { color: #c9bfae; }
.deck { display: flex; justify-content: center; gap: 28px; margin: 64px 0 40px; perspective: 1400px; position: relative; }
.flip { width: 210px; aspect-ratio: 220 / 380; position: relative; cursor: pointer; border: 0; padding: 0; background: none; transition: transform .3s; }
.flip:nth-child(1) { transform: rotate(-6deg) translateY(14px); } .flip:nth-child(3) { transform: rotate(6deg) translateY(14px); }
.flip:hover:not(.done) { transform: translateY(-14px) rotate(0); }
.flip .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4,1.6,.5,1); }
.flip.open .in { transform: rotateY(180deg); }
.flip .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(6px 6px 0 var(--yellow)); }
.flip .face.front { transform: rotateY(180deg); }
.flip.dim { opacity: .35; pointer-events: none; }
.reveal { max-width: 640px; margin: 0 auto; text-align: center; background: var(--paper); color: var(--ink); border: var(--b); border-radius: var(--r); box-shadow: 6px 6px 0 var(--yellow);
  padding: 30px 34px; display: none; }
.reveal.show { display: block; animation: pop .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes pop { from { transform: scale(.9) translateY(20px); opacity: 0; } }
.reveal h3 { font-size: 40px; margin: 4px 0 10px; }
.reveal p { margin: 0 0 22px; color: var(--muted); font-size: 18px; }
.reveal .again { display: block; margin: 14px auto 0; background: none; border: 0; font: 600 14px var(--body); text-decoration: underline; cursor: pointer; color: var(--muted); }
.hint { text-align: center; font-family: var(--label); letter-spacing: .2em; font-size: 13px; color: var(--yellow); }

/* ---------- bundle ---------- */
.bundle .box { background: var(--yellow); border: var(--b); border-radius: 28px; box-shadow: 10px 10px 0 var(--ink); display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; padding: 60px; position: relative; overflow: hidden; }
.bundle .box::before { content: ""; position: absolute; right: -300px; top: 50%; width: 900px; height: 900px; transform: translateY(-50%); opacity: .3; border-radius: 50%;
  background: repeating-conic-gradient(var(--paper) 0 7deg, transparent 7deg 14deg); }
.bundle h2 { font-size: clamp(40px, 5.4vw, 72px); }
.bundle h2 em { color: var(--red); }
.bundle .lead { color: var(--ink); opacity: .8; margin: 18px 0 24px; }
.bundle ol { list-style: none; padding: 0; margin: 0 0 28px; counter-reset: b; }
.bundle li { counter-increment: b; display: flex; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 2px solid var(--ink); font-weight: 600; }
.bundle li::before { content: counter(b, upper-roman); font: 700 14px var(--label); width: 34px; height: 34px; flex: none; border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; background: var(--paper); }
.bundle li span { margin-left: auto; font-size: 14px; color: var(--muted); position: relative; }
.bundle .price .now { font-size: 64px; }
.bundle .box > div:first-child { z-index: 2; }
.bundle .stack { position: relative; height: 470px; }
.bundle .stack .tcard { position: absolute; width: 190px; left: 50%; top: 50%; filter: drop-shadow(6px 6px 0 var(--ink)); transition: transform .4s cubic-bezier(.3,1.3,.5,1); }
.bundle .stack .tcard:nth-child(1) { transform: translate(-50%, -50%) translate(-150px, 30px) rotate(-22deg); }
.bundle .stack .tcard:nth-child(2) { transform: translate(-50%, -50%) translate(-76px, -4px) rotate(-11deg); }
.bundle .stack .tcard:nth-child(3) { transform: translate(-50%, -50%) translate(0, -16px); }
.bundle .stack .tcard:nth-child(4) { transform: translate(-50%, -50%) translate(76px, -4px) rotate(11deg); }
.bundle .stack .tcard:nth-child(5) { transform: translate(-50%, -50%) translate(150px, 30px) rotate(22deg); }
.bundle .stack .stamp { position: absolute; right: 4%; top: 2%; width: 120px; height: 120px; font-size: 34px; z-index: 6; }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 70px; }
.step { background: var(--card); border: var(--b); border-radius: var(--r); padding: 0 30px 34px; box-shadow: var(--sh-s); text-align: center; position: relative; }
.step .n { width: 86px; height: 86px; margin: -43px auto 18px; border: var(--b); border-radius: 50%; display: grid; place-items: center; font: 800 26px var(--label); }
.step:nth-child(1) .n { background: var(--yellow); } .step:nth-child(2) .n { background: var(--blue); } .step:nth-child(3) .n { background: var(--red); color: var(--paper); }
.step h3 { font-size: 32px; margin-bottom: 10px; }
.step p { margin: 0; color: var(--muted); }

/* ---------- empty image slots (filled by the owner) ---------- */
.slot { position: relative; background: var(--paper-2); border: var(--b); border-radius: 14px; overflow: hidden; }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot .fn { position: absolute; left: 10px; bottom: 8px; font-size: 11px; font-weight: 600; color: rgba(23,19,15,.35); letter-spacing: .04em; }

/* ---------- inside the reading ---------- */
.inside { background: var(--paper-2); border-top: var(--b); border-bottom: var(--b); }
.inside .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.inside ul { list-style: none; padding: 0; margin: 30px 0 36px; }
.inside li { display: flex; gap: 16px; padding: 13px 0; border-bottom: 2px solid var(--ink); font-size: 18px; font-weight: 500; }
.inside li b { font: 700 14px var(--label); color: var(--red); width: 36px; flex: none; padding-top: 3px; }
.pages { position: relative; height: 520px; }
.pages .slot { position: absolute; width: 54%; aspect-ratio: 8.5 / 11; box-shadow: var(--sh); background: var(--card); }
.pages .slot:nth-child(1) { left: 0; top: 60px; transform: rotate(-7deg); }
.pages .slot:nth-child(2) { left: 23%; top: 0; z-index: 2; }
.pages .slot:nth-child(3) { right: 0; top: 70px; transform: rotate(7deg); z-index: 1; }
.tape { position: absolute; width: 90px; height: 26px; background: rgba(244,196,48,.75); border: 1.5px solid rgba(23,19,15,.25); top: -12px; left: 50%; transform: translateX(-50%) rotate(-4deg); z-index: 3; }

/* ---------- about ---------- */
.about .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
.alla-card { position: relative; background: var(--card); border: 4px solid var(--ink); border-radius: 22px; padding: 16px; box-shadow: 10px 10px 0 var(--red); transform: rotate(-3deg); max-width: 420px; }
.alla-card .frame { border: 3px solid var(--ink); }
.alla-card .num, .alla-card .ttl { font: 700 22px var(--label); text-align: center; padding: 8px 0; letter-spacing: .14em; }
.alla-card .slot { border-radius: 0; border-left: 0; border-right: 0; aspect-ratio: 4 / 5; }
.alla-card .ttl { font-size: 20px; }
.about .sig { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 46px; color: var(--red); margin-top: 18px; }
.about p { font-size: 18.5px; color: var(--muted); }
.about blockquote { margin: 28px 0; padding: 22px 26px; background: var(--card); border: var(--b); border-radius: var(--r); box-shadow: var(--sh-s);
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.3; }
.about .mini { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.about .mini .slot { aspect-ratio: 1; box-shadow: var(--sh-s); }

/* ---------- reviews ---------- */
.rgrid2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 70px; }
.rev { background: var(--card); border: var(--b); border-radius: 6px; padding: 34px 28px 26px; box-shadow: var(--sh-s); position: relative; }
.rev:nth-child(3n+1) { transform: rotate(-1.6deg); } .rev:nth-child(3n+2) { transform: rotate(1.2deg); margin-top: 26px; } .rev:nth-child(3n) { transform: rotate(-.6deg); }
.rev .stars { color: var(--red); letter-spacing: 4px; font-size: 18px; }
.rev p { font-family: var(--display); font-weight: 500; font-size: 21px; line-height: 1.38; margin: 12px 0 22px; min-height: 120px; }
.rev .who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 2px dashed rgba(23,19,15,.3); font-size: 15px; }
.rev .who .slot { width: 46px; height: 46px; border-radius: 50%; border-width: 2px; flex: none; }
.rev .who b { display: block; } .rev .who span { color: var(--muted); font-size: 13.5px; }
.rev .prod-tag { position: absolute; top: -14px; right: 18px; background: var(--blue); border: 2px solid var(--ink); border-radius: 30px; font: 700 11px var(--label); letter-spacing: .12em; padding: 5px 12px; }
.rev .shot { aspect-ratio: 16 / 10; margin: -6px 0 18px; }
.ph-text { color: rgba(23,19,15,.38); }

/* ---------- guarantee ---------- */
.guar .wrap { display: grid; grid-template-columns: auto 1fr; gap: 60px; align-items: center; max-width: 1000px; }
.seal { width: 230px; height: 230px; position: relative; }
.seal svg.ring { width: 100%; height: 100%; animation: spin 30s linear infinite; }
.seal svg.ring text { font: 700 15px var(--label); letter-spacing: 4.6px; fill: var(--ink); }
.seal .mid { position: absolute; inset: 42px; border-radius: 50%; background: var(--green); border: var(--b); box-shadow: var(--sh-s); display: grid; place-items: center; text-align: center;
  color: var(--paper); font-family: var(--display); font-weight: 900; font-size: 56px; line-height: .8; }
.seal .mid small { display: block; font: 700 12px var(--label); letter-spacing: .16em; margin-top: 8px; }
.guar h2 { font-size: clamp(38px, 5vw, 64px); }
.guar p { font-size: 19px; color: var(--muted); max-width: 560px; margin: 18px 0 0; }

/* ---------- faq ---------- */
.faq { max-width: 860px; margin: 64px auto 0; display: grid; gap: 16px; }
.faq details { background: var(--card); border: var(--b); border-radius: 16px; box-shadow: var(--sh-s); transition: box-shadow .2s; }
.faq details[open] { box-shadow: 6px 6px 0 var(--red); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 26px; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.2; display: flex; gap: 20px; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 38px; height: 38px; border: 2.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 500 26px/1 var(--body); background: var(--yellow); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 26px 24px; color: var(--muted); }

/* ---------- final ---------- */
.final { background: var(--red); border-top: var(--b); color: var(--paper); text-align: center; overflow: hidden; }
.final::before { content: ""; position: absolute; left: 50%; top: 110%; width: 1800px; height: 1800px; transform: translate(-50%, -50%); border-radius: 50%; opacity: .22;
  background: repeating-conic-gradient(var(--yellow) 0 6deg, transparent 6deg 12deg); animation: spin 160s linear infinite; }
.final h2 { font-size: clamp(48px, 8vw, 116px); position: relative; }
.final h2 em { color: var(--yellow); }
.final p { position: relative; font-size: 20px; max-width: 560px; margin: 24px auto 36px; color: #fde6dc; }
.final .backs { display: flex; justify-content: center; margin-top: 70px; position: relative; }
.final .backs .tcard { width: 150px; margin: 0 -10px; filter: drop-shadow(6px 6px 0 var(--ink)); }
.final .backs .tcard:nth-child(1) { transform: rotate(-12deg) translateY(20px); } .final .backs .tcard:nth-child(3) { transform: rotate(12deg) translateY(20px); }
.final .backs .tcard:nth-child(2) { position: relative; z-index: 1; }

/* ---------- footer ---------- */
.ftr { background: var(--ink); color: #b9ae9c; padding: 80px 0 120px; font-size: 15px; }
.ftr .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.ftr .logo b { color: var(--paper); }
.ftr h4 { font: 700 13px var(--label); letter-spacing: .2em; color: var(--yellow); margin: 0 0 18px; }
.ftr ul { list-style: none; margin: 0; padding: 0; } .ftr li { margin-bottom: 10px; }
.ftr a { text-decoration: none; } .ftr a:hover { color: var(--yellow); }
.ftr .disc { margin-top: 60px; padding-top: 26px; border-top: 1px solid #3a332b; font-size: 13px; line-height: 1.7; display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.ftr .pay { display: flex; gap: 8px; flex-wrap: wrap; } .ftr .pay span { border: 1.5px solid #4a4237; border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: #d8ccb6; }

/* ---------- sticky mobile cta ---------- */
.sticky { display: none; }

/* ---------- reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(40px); transition: opacity .7s, transform .7s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } .rv { opacity: 1; transform: none; } }

/* ================= responsive ================= */
@media (max-width: 1060px) {
  .rgrid, .rgrid2 { grid-template-columns: 1fr 1fr; }
  .daily { grid-template-columns: 200px 1fr; } .daily .right { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .daily .right .btn { margin: 0; }
  .bundle .box { grid-template-columns: 1fr; padding: 44px; }
}
@media (max-width: 880px) {
  .delivery { grid-template-columns: 1fr; } .dv + .dv { border-left: 0; border-top: var(--b); }
  section { padding: 84px 0; }
  .nav, .hdr .btn-hdr { display: none; }
  .burger { display: block; }
  .hdr .wrap { height: 70px; }
  .hero { padding: 40px 0 80px; }
  .hero .wrap, .inside .wrap, .about .wrap, .guar .wrap { grid-template-columns: 1fr; }
  .fan { height: 420px; order: -1; margin: 0 -20px; }
  .fan .c { width: 170px; }
  .spin-badge { width: 116px; height: 116px; right: 4%; top: 0; } .spin-badge .mid { inset: 23px; font-size: 23px; }
  .steps { grid-template-columns: 1fr; gap: 64px; }
  .pages { height: 420px; }
  .about .wrap { gap: 50px; } .alla-card { margin: 0 auto; }
  .guar .wrap { justify-items: center; text-align: center; gap: 30px; } .guar p { margin: 18px auto 0; }
  .ftr .cols { grid-template-columns: 1fr 1fr; }
  .sticky { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; align-items: center; gap: 12px; background: var(--ink); color: var(--paper);
    border: 3px solid var(--ink); border-radius: 60px; padding: 8px 8px 8px 22px; box-shadow: 4px 4px 0 var(--red); transform: translateY(140%); transition: transform .4s cubic-bezier(.3,1.3,.5,1); }
  .sticky.on { transform: none; }
  .sticky .t { flex: 1; font-size: 13px; line-height: 1.25; } .sticky .t b { display: block; font-family: var(--display); font-size: 17px; }
  .sticky .t s { color: #a99d8a; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
  .sticky .t em { font-style: normal; color: var(--yellow); font-weight: 700; }
  .sticky .btn { padding: 12px 20px; font-size: 15px; box-shadow: none; border-width: 2px; }
  .menu-open .sticky { transform: translateY(140%); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .rgrid, .rgrid2 { grid-template-columns: 1fr; }
  .rev:nth-child(n) { transform: none; margin-top: 0; }
  .prod h3 { font-size: 36px; }
  .daily { grid-template-columns: 1fr; padding: 30px 24px; } .daily .cards2 { height: 270px; }
  .fan .c { width: 150px; } .fan { height: 360px; } .daily h3 { font-size: 42px; }
  .deck { gap: 10px; } .flip { width: 30%; }
  .bundle .box { padding: 34px 22px; } .bundle .box > div:first-child { z-index: 2; }
.bundle .stack { height: 330px; } .bundle .stack .tcard { width: 130px; }
  .bundle .stack .tcard:nth-child(1) { transform: translate(-50%, -50%) translate(-100px, 24px) rotate(-22deg); }
  .bundle .stack .tcard:nth-child(2) { transform: translate(-50%, -50%) translate(-52px, -2px) rotate(-11deg); }
  .bundle .stack .tcard:nth-child(4) { transform: translate(-50%, -50%) translate(52px, -2px) rotate(11deg); }
  .bundle .stack .tcard:nth-child(5) { transform: translate(-50%, -50%) translate(100px, 24px) rotate(22deg); }
  .bundle .stack .stamp { width: 92px; height: 92px; font-size: 26px; right: 0; }
  .pages { height: 320px; }
  .marquee span { font-size: 26px; }
  .faq summary { font-size: 20px; padding: 18px 20px; }
  .final .backs .tcard { width: 110px; }
  .ftr .cols { grid-template-columns: 1fr; }
}

/* ================= product landing: The Year Ahead ================= */
.ftr-min { text-align: center; padding: 64px 0 110px; }
.ftr-min .logo { justify-content: center; }
.ftr-min p { margin: 14px auto 0; max-width: 460px; }
.ftr-min .disc { display: block; max-width: 680px; margin: 34px auto 0; }
.hdr-solo .wrap { justify-content: center; height: 76px; }
.btn-big { font-size: 19px; padding: 20px 36px; }
.assure { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-size: 14.5px; font-weight: 600; }
.assure span::before { content: "✓ "; color: var(--green); font-weight: 800; }
.center .assure { justify-content: center; }
.ya-hero { padding-bottom: 90px; }
.ya-hero .wrap { grid-template-columns: 1fr 1fr; }
.arc-wrap { position: relative; height: 560px; }
.arc { position: absolute; left: 50%; bottom: 150px; width: 0; height: 0; }
.ak { position: absolute; left: -46px; bottom: 0; width: 92px; transform-origin: 50% 330px;
  transform: rotate(calc(-66deg + var(--i) * 12deg)); }
.ak .tcard { filter: drop-shadow(3px 3px 0 var(--ink)); }
.ak .mo { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font: 700 12px var(--label); letter-spacing: .1em; text-transform: uppercase;
  background: var(--card); border: 2px solid var(--ink); border-radius: 20px; padding: 2px 8px; white-space: nowrap; }
.ak:first-child .mo { background: var(--yellow); }
.arc-main { position: absolute; left: 50%; bottom: 10px; width: 250px; transform: translateX(-50%) rotate(-3deg); z-index: 2; filter: drop-shadow(7px 7px 0 var(--ink)); transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
.arc-wrap:hover .arc-main { transform: translateX(-50%) translateY(-12px) rotate(2deg); }
.ya-hero .spin-badge { right: 0; top: 10px; }

.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 60px; }
.mt { display: flex; gap: 14px; align-items: center; background: var(--card); border: var(--b); border-radius: 16px; padding: 14px; box-shadow: var(--sh-s); transition-delay: var(--d); }
.mt .mini-back { width: 54px; flex: none; transition: transform .3s; }
.mt:hover .mini-back { transform: rotate(-8deg) translateY(-3px); }
.mt b { display: block; font-family: var(--display); font-weight: 900; font-size: 24px; line-height: 1.05; }
.mt span { font: 700 12px var(--label); letter-spacing: .14em; color: var(--muted); }
.mt em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.mt.now { background: var(--yellow); box-shadow: 6px 6px 0 var(--red); }
.mt.now em { color: var(--ink); font-weight: 700; }

.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 64px; }
.theme { background: var(--card); border: var(--b); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; display: flex; flex-direction: column; }
.th-top { height: 230px; display: grid; place-items: center; border-bottom: var(--b); position: relative; overflow: hidden; }
.th-top::before { content: ""; position: absolute; inset: -40%; opacity: .25; background: repeating-conic-gradient(from 0deg, var(--paper) 0 8deg, transparent 8deg 16deg); }
.th-top .tcard { width: 120px; position: relative; transform: rotate(-4deg) translateY(22px); filter: drop-shadow(5px 5px 0 var(--ink)); }
.th-body { padding: 24px 26px 26px; }
.th-body h3 { font-size: 34px; margin-bottom: 8px; }
.th-body p { color: var(--muted); margin: 0 0 14px; font-size: 16px; }
.th-body ul { list-style: none; padding: 0; margin: 0; }
.th-body li { padding: 9px 0 9px 26px; position: relative; border-top: 1.5px dashed rgba(23,19,15,.25); font-family: var(--display); font-style: italic; font-weight: 500; font-size: 18px; line-height: 1.3; }
.th-body li::before { content: "?"; position: absolute; left: 2px; top: 8px; font: 800 16px var(--display); font-style: normal; color: var(--red); }
.inside li b { width: 70px; }
.final .backs .tcard:nth-child(2) { width: 170px; }

@media (max-width: 1060px) { .mgrid { grid-template-columns: repeat(3, 1fr); } .tgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 880px) {
  .ya-hero .wrap { grid-template-columns: 1fr; }
  .ya-hero .arc-wrap { order: -1; height: 400px; margin: 0 -20px; }
  .ak { width: 64px; left: -32px; transform-origin: 50% 240px; }
  .ak .mo { font-size: 10px; top: -24px; padding: 1px 6px; }
  .arc { bottom: 110px; }
  .arc-main { width: 175px; }
  .ya-hero .spin-badge { top: 0; right: 2%; }
  .mgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  .tgrid { grid-template-columns: 1fr; }
  .mt { padding: 10px; gap: 10px; } .mt .mini-back { width: 40px; } .mt b { font-size: 19px; } .mt em { display: none; }
  .btn-big { width: 100%; font-size: 17px; padding: 18px 20px; }
  .ak { width: 50px; left: -25px; transform-origin: 50% 200px; transform: rotate(calc(-60.5deg + var(--i) * 11deg)); }
  .ak .mo { display: none; }
  .ya-hero .arc-wrap { height: 360px; } .arc { bottom: 100px; }
}

/* ================= quiz ================= */
.quiz { max-width: 640px; margin: 0 auto; padding: 40px 20px 70px; position: relative; }
.q-fan { display: flex; justify-content: center; height: 210px; margin-bottom: 10px; }
.q-fan .tcard { width: 104px; margin: 0 -18px; filter: drop-shadow(4px 4px 0 var(--ink)); }
.q-fan .tcard:nth-child(1) { transform: rotate(-14deg) translateY(28px); }
.q-fan .tcard:nth-child(2) { width: 124px; position: relative; z-index: 1; }
.q-fan .tcard:nth-child(3) { transform: rotate(14deg) translateY(28px); }
.q-steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 24px; }
.q-steps span { width: 42px; height: 42px; border: var(--b); border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--label); background: var(--card); transition: background .3s; }
.q-steps span.on { background: var(--yellow); }
.q-steps i { width: 46px; height: 3px; background: var(--ink); border-radius: 3px; }
.q-box { background: var(--card); border: var(--b); border-radius: 24px; box-shadow: var(--sh); padding: 38px 40px 34px; }
.q-step { display: none; text-align: center; padding: 0; }
.q-step.on { display: block; animation: pop .45s cubic-bezier(.3,1.4,.5,1); }
.q-step .kicker { margin-bottom: 12px; font-size: 12px; }
.q-step h1 { font-size: clamp(32px, 5vw, 44px); line-height: 1.04; }
.q-step h1 em { display: block; }
.q-sub { color: var(--muted); margin: 14px auto 24px; max-width: 420px; }
.q-in, .q-dob select { width: 100%; font: 600 19px var(--body); color: var(--ink); background: var(--paper); border: var(--b); border-radius: 14px; padding: 16px 18px; outline: none; transition: box-shadow .15s; }
.q-in:focus, .q-dob select:focus { box-shadow: 4px 4px 0 var(--yellow); }
.q-in { text-align: center; }
.q-dob { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 10px; }
.q-dob select { padding: 16px 12px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317130f' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.q-sign { display: none; margin-top: 16px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 40px; padding: 9px 18px; font-weight: 600; font-size: 15px; }
.q-sign.show { display: inline-block; animation: pop .4s cubic-bezier(.3,1.5,.5,1); }
.q-sign b { font-size: 18px; } .q-sign em { font-style: normal; font-weight: 500; }
.q-err { display: none; color: var(--red); font-weight: 600; font-size: 14px; margin: 12px 0 0; }
.q-err.show { display: block; }
.q-step .btn-big { margin-top: 24px; }
.q-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.q-nav .btn-big { margin-top: 24px; }
.q-back { background: none; border: 0; font: 600 15px var(--body); color: var(--muted); cursor: pointer; margin-top: 24px; padding: 10px 4px; }
.q-consent { display: flex; gap: 12px; text-align: left; margin-top: 18px; font-size: 13.5px; color: var(--muted); line-height: 1.45; cursor: pointer; }
.q-consent input { width: 22px; height: 22px; flex: none; accent-color: var(--ink); margin-top: 1px; }
.q-lock { font-size: 13px; color: var(--muted); margin: 16px 0 0; }
.q-load { display: none; text-align: center; padding: 30px 0 10px; }
.loading .q-box, .loading .q-steps, .loading .q-fan { display: none; }
.loading .q-load { display: block; }
.q-shuffle { position: relative; height: 230px; }
.q-shuffle .tcard { position: absolute; width: 120px; left: 50%; top: 10px; margin-left: -60px; filter: drop-shadow(4px 4px 0 var(--ink)); animation: shuffle 1.5s ease-in-out infinite; }
.q-shuffle .tcard:nth-child(2) { animation-delay: .25s; } .q-shuffle .tcard:nth-child(3) { animation-delay: .5s; }
@keyframes shuffle { 0%, 100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(-70px) rotate(-14deg); } 60% { transform: translateX(70px) rotate(14deg); } }
.q-load h2 { font-size: clamp(28px, 5vw, 40px); margin: 24px 0 22px; min-height: 2.1em; }
.q-bar { height: 16px; border: var(--b); border-radius: 20px; background: var(--card); overflow: hidden; max-width: 420px; margin: 0 auto; }
.q-bar i { display: block; height: 100%; width: 0; background: var(--yellow); border-right: 3px solid var(--ink); transition: width 5.6s linear; }
@media (max-width: 640px) {
  .quiz { padding-top: 24px; }
  .q-fan { height: 170px; } .q-fan .tcard { width: 84px; } .q-fan .tcard:nth-child(2) { width: 100px; }
  .q-box { padding: 28px 20px 26px; }
  .q-dob { grid-template-columns: 1fr 1fr; } .q-dob select:first-child { grid-column: 1 / -1; }
  .q-nav { flex-direction: column-reverse; } .q-nav .btn-big { width: 100%; } .q-back { margin-top: 4px; }
}

/* ================= offer ================= */
.timer-bar { position: sticky; top: 0; z-index: 61; background: var(--red); color: var(--paper); text-align: center; font-weight: 600; font-size: 15px; padding: 9px 14px; border-bottom: 3px solid var(--ink); }
.timer-bar b { color: var(--yellow); }
.timer-bar .clock { display: inline-block; min-width: 58px; background: var(--ink); color: var(--yellow); border-radius: 8px; padding: 1px 8px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.expired .timer-bar { background: var(--ink); }
.timer-bar + .hdr { position: relative; }
.of-hero .wrap { grid-template-columns: 1.1fr .9fr; }
.of-hero h1 { font-size: clamp(42px, 5.6vw, 78px); }
.of-hero h1 em { display: block; }
.of-hero .sub b { color: var(--ink); }
.of-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; border: var(--b); border-radius: 16px; background: var(--card); box-shadow: var(--sh-s); margin-bottom: 26px; overflow: hidden; }
.of-facts div { padding: 12px 18px; } .of-facts div + div { border-left: 2px dashed rgba(23,19,15,.3); }
.of-facts span { display: block; font: 700 11px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.of-facts b { font-family: var(--display); font-size: 20px; font-weight: 800; word-break: break-all; }
.of-price { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 26px; }
.of-price .now { font-size: 64px; }
.of-price .was { font-size: 30px; }
.of-timer, .co-timer { background: var(--yellow); border: 2px solid var(--ink); border-radius: 40px; padding: 8px 16px; font-weight: 600; font-size: 15px; }
.of-timer b, .co-timer b { font-variant-numeric: tabular-nums; color: var(--red); }
.of-fan { position: relative; height: 520px; }
.of-fan .c { position: absolute; top: 50%; left: 50%; width: 220px; filter: drop-shadow(7px 7px 0 var(--ink)); }
.of-fan .c1 { transform: translate(-112%, -44%) rotate(-14deg); }
.of-fan .c2 { width: 250px; transform: translate(-50%, -54%); z-index: 2; }
.of-fan .c3 { transform: translate(12%, -44%) rotate(14deg); }
.of-stamp { position: absolute; right: 4%; top: 6%; width: 120px; height: 120px; font-size: 34px; z-index: 3; }

.arrive-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; margin-top: 60px; }
.mail { background: #fff; border: var(--b); border-radius: 22px; box-shadow: var(--sh); overflow: hidden; }
.mail-top { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 2px solid var(--ink); background: var(--paper-2); }
.mail-top i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: var(--red); }
.mail-top i:nth-child(2) { background: var(--yellow); } .mail-top i:nth-child(3) { background: var(--green); }
.mail-top span { margin-left: 10px; font-weight: 700; font-size: 14px; }
.mail-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 6px; font-size: 14px; }
.mail-head b { display: block; font-size: 15px; } .mail-head span { color: var(--muted); }
.mail-head em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 13px; }
.mail-av { width: 42px; height: 42px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 20px; }
.mail-subj { padding: 8px 22px 4px; font-family: var(--display); font-weight: 800; font-size: 23px; line-height: 1.2; }
.mail-body { padding: 4px 22px; font-size: 15px; color: #3b3658; }
.mail-body p { margin: 10px 0; }
.mail-att { display: flex; align-items: center; gap: 14px; margin: 14px 22px 22px; border: 2px solid var(--ink); border-radius: 14px; padding: 12px 14px; background: var(--paper); }
.mail-att .pdf { background: var(--red); color: #fff; font: 800 12px var(--body); border-radius: 6px; padding: 10px 7px; border: 2px solid var(--ink); }
.mail-att > div { min-width: 0; flex: 1; }
.mail-att b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mail-att b span { font: inherit; color: inherit; }
.mail-att div > span { font-size: 13px; color: var(--muted); }
.mail-att .dl { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; background: var(--yellow); font-weight: 800; flex: none; }

.pdfs { position: relative; height: 520px; }
.pg { position: absolute; width: 56%; aspect-ratio: 8.5 / 11; background: #fbf6ea; border: 2.5px solid var(--ink); border-radius: 6px; box-shadow: var(--sh); overflow: hidden; }
.pg:nth-child(1) { left: 22%; top: 0; z-index: 3; }
.pg:nth-child(2) { left: 0; top: 70px; transform: rotate(-8deg); }
.pg:nth-child(3) { right: 0; top: 80px; transform: rotate(8deg); }
.pg-in { position: absolute; inset: 10px; border: 1.5px solid rgba(23,19,15,.35); padding: 16px 14px; display: flex; flex-direction: column; }
.pg-cover { background: var(--navy); } .pg-cover .pg-in { border-color: rgba(244,196,48,.5); align-items: center; text-align: center; color: var(--paper); }
.pg-brand { font: 700 10px var(--label); letter-spacing: .3em; color: var(--yellow); }
.pg-card { width: 34%; margin: 14px 0 12px; filter: drop-shadow(3px 3px 0 #000); }
.pg-k { font: 700 9px var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.pg-cover .pg-k { color: var(--yellow); }
.pg-t { font-family: var(--display); font-weight: 900; font-size: 25px; line-height: 1.05; margin: 4px 0 6px; }
.pg-n { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 22px; color: var(--yellow); }
.pg-p { font-size: 10px; color: #cdd6e6; margin-top: 4px; }
.pg-row { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.pg-mini { width: 22%; flex: none; }
.pg-lines { flex: 1; display: grid; gap: 6px; margin-bottom: 8px; }
.pg-lines i { display: block; height: 7px; border-radius: 4px; background: rgba(23,19,15,.18); filter: blur(.4px); }
.pg-lines i.s { width: 60%; }
.pg-h { font-family: var(--display); font-weight: 800; font-size: 13px; margin: 6px 0 6px; }
.pg-d { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed rgba(23,19,15,.3); }
.pg-d b { font: 700 11px var(--label); width: 34px; color: var(--red); }
.pg-d span { flex: 1; } .pg-d i { display: block; height: 7px; border-radius: 4px; background: rgba(23,19,15,.18); width: 85%; }
.pg-lock { margin-top: auto; align-self: center; font-size: 10.5px; font-weight: 700; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 20px; padding: 3px 10px; }
.inside .alla-card { justify-self: center; }

.checkout { padding-top: 50px; }
.co-box { max-width: 760px; margin: 0 auto; background: var(--card); border: 4px solid var(--ink); border-radius: 28px; box-shadow: 10px 10px 0 var(--ink); padding: 42px 46px; }
.co-head { text-align: center; margin-bottom: 26px; }
.co-head h2 { font-size: clamp(38px, 5vw, 58px); }
.co-timer { display: inline-block; margin-top: 18px; }
.co-item { display: grid; grid-template-columns: 74px 1fr auto; gap: 18px; align-items: center; border: var(--b); border-radius: 16px; padding: 14px 18px; background: #fff; }
.co-card { width: 74px; } .co-card .tcard { filter: drop-shadow(3px 3px 0 var(--ink)); }
.co-txt b { display: block; font-family: var(--display); font-size: 24px; font-weight: 900; line-height: 1.1; }
.co-txt span { display: block; font-size: 14px; color: var(--muted); }
.co-txt span b { display: inline; font-family: var(--body); font-size: 14px; font-weight: 700; color: var(--ink); }
.co-pr { text-align: right; } .co-pr s { display: block; color: var(--muted); text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.co-pr b { font-family: var(--display); font-weight: 900; font-size: 34px; }
.co-bumps-h { font: 700 12px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin: 26px 0 12px; }
.bump { display: grid; grid-template-columns: 26px 54px 1fr; gap: 14px; align-items: center; border: 2.5px dashed var(--ink); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; background: #fff8e1; cursor: pointer; transition: background .2s, border-color .2s; }
.bump.on { background: var(--yellow); border-style: solid; }
.bump input { width: 24px; height: 24px; accent-color: var(--ink); margin: 0; }
.bump-card { width: 54px; } .bump-card .tcard { filter: drop-shadow(2px 2px 0 var(--ink)); }
.bump-txt b { font-size: 16px; } .bump-pr { font-weight: 800; color: var(--red); white-space: nowrap; } .bump-pr s { color: var(--muted); font-weight: 500; margin-left: 4px; }
.bump-txt em { display: block; font-style: normal; font-size: 14px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 3px solid var(--ink); margin-top: 20px; padding-top: 18px; font-weight: 700; font-size: 19px; }
.co-total b { font-family: var(--display); font-weight: 900; font-size: 44px; }
.co-go { width: 100%; margin-top: 18px; font-size: 20px; }
.co-err { color: var(--red); font-weight: 600; text-align: center; margin: 12px 0 0; min-height: 1px; }
.co-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 14px; font-weight: 600; }
.co-pay { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.co-pay span { border: 1.5px solid var(--ink); border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 700; background: #fff; }
.co-pay-step { display: none; } .co-pay-step.on { display: block; }
.co-sum { display: flex; justify-content: space-between; gap: 14px; align-items: center; border: var(--b); border-radius: 14px; padding: 12px 16px; background: #fff; font-weight: 600; margin-bottom: 16px; }
.co-sum b { font-family: var(--display); font-size: 28px; }
.co-whop { min-height: 300px; background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 12px; }
.co-msg { text-align: center; padding: 60px 10px; color: var(--muted); font-weight: 600; }
.co-change { display: block; margin: 16px auto 0; background: none; border: 0; font: 600 15px var(--body); color: var(--muted); cursor: pointer; text-decoration: underline; }
.ftr-min .legal { font-size: 14px; } .ftr-min .legal a { color: #d8ccb6; }
.sticky .t s { color: #a99d8a; font-family: var(--body); font-size: 13px; text-decoration-color: var(--red); text-decoration-thickness: 2px; }

@media (max-width: 1060px) { .arrive-grid { grid-template-columns: 1fr; } .pdfs { max-width: 560px; margin: 0 auto; width: 100%; } }
@media (max-width: 880px) {
  .of-hero .wrap { grid-template-columns: 1fr; }
  .of-fan { order: -1; height: 330px; } .of-fan .c { width: 150px; } .of-fan .c2 { width: 175px; }
  .of-stamp { width: 92px; height: 92px; font-size: 26px; right: 2%; top: 0; }
  .timer-bar { font-size: 13.5px; }
}
@media (max-width: 640px) {
  .of-facts { grid-template-columns: 1fr 1fr; } .of-facts div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 2px dashed rgba(23,19,15,.3); }
  .of-price .now { font-size: 54px; }
  .pdfs { height: 380px; }
  .pg-t { font-size: 18px; } .pg-n { font-size: 16px; } .pg-in { inset: 6px; padding: 10px 9px; }
  .co-box { padding: 28px 18px; border-width: 3px; box-shadow: 6px 6px 0 var(--ink); }
  .co-item { grid-template-columns: 56px 1fr; } .co-card { width: 56px; } .co-pr { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 12px; align-items: baseline; }
  .bump { grid-template-columns: 24px 1fr; } .bump-card { display: none; }
  .co-total b { font-size: 38px; }
}

/* offer: inside fan + about Alla */
.in-fan { position: relative; height: 420px; }
.in-fan .tcard { position: absolute; width: 190px; left: 50%; top: 50%; filter: drop-shadow(6px 6px 0 var(--ink)); }
.in-fan .tcard:nth-child(1) { transform: translate(-115%, -46%) rotate(-12deg); }
.in-fan .tcard:nth-child(2) { transform: translate(-50%, -54%); z-index: 2; }
.in-fan .tcard:nth-child(3) { transform: translate(15%, -46%) rotate(12deg); }
.of-about { background: var(--navy); color: var(--paper); border-bottom: var(--b); overflow: hidden; }
.of-about::before { content: ""; position: absolute; left: -300px; top: 50%; width: 1000px; height: 1000px; transform: translateY(-50%); border-radius: 50%; opacity: .1;
  background: repeating-conic-gradient(var(--yellow) 0 6deg, transparent 6deg 12deg); }
.of-about .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; position: relative; }
.of-about .alla-card { box-shadow: 10px 10px 0 var(--yellow); justify-self: center; color: var(--ink); width: 100%; max-width: 380px; }
.of-about .kicker::before, .of-about .kicker::after { color: var(--yellow); }
.of-about h2 em { color: var(--yellow); }
.of-about p { font-size: 18px; color: #cdd6e6; margin: 22px 0 0; }
.of-about blockquote { margin: 26px 0 0; padding: 22px 26px; background: var(--card); color: var(--ink); border: var(--b); border-radius: var(--r); box-shadow: 6px 6px 0 var(--red);
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: 25px; line-height: 1.3; }
.vows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.vows div { border: 2px solid var(--yellow); border-radius: 14px; padding: 14px; }
.vows b { display: block; font-family: var(--display); font-size: 21px; color: var(--yellow); }
.vows span { font-size: 14px; color: #cdd6e6; line-height: 1.4; display: block; margin-top: 4px; }
.of-about .sig { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 44px; color: var(--yellow); margin-top: 20px; }
@media (max-width: 880px) {
  .of-about .wrap { grid-template-columns: 1fr; gap: 50px; }
  .in-fan { height: 320px; } .in-fan .tcard { width: 140px; }
}
@media (max-width: 640px) { .vows { grid-template-columns: 1fr; } }

/* offer: Alla live status + delivery */
.alla-live { display: inline-flex; align-items: center; gap: 12px; background: var(--card); border: 2px solid var(--ink); border-radius: 50px; padding: 6px 18px 6px 6px; box-shadow: 3px 3px 0 var(--ink); margin: 0 0 22px; text-align: left; }
.al-av { position: relative; width: 44px; height: 44px; flex: none; }
.al-av img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--ink); }
.al-av i { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--card); background: #b9ae9c; }
.alla-live.on .al-av i { background: #2fa44f; animation: pulse 1.8s infinite; }
.al-t b { display: block; font-size: 15px; line-height: 1.2; }
.al-t span { display: block; font-size: 13px; color: var(--muted); }
.alla-live.on .al-t b { color: #1f7a3a; }
.co-head .alla-live { display: flex; width: fit-content; margin: 16px auto 0; }
.co-eta { color: var(--ink) !important; margin-top: 4px; }
.co-eta b { color: var(--red) !important; }
.of-facts { grid-template-columns: repeat(4, auto); }
@media (max-width: 640px) {
  .of-facts { grid-template-columns: 1fr 1fr; }
  .of-facts div:nth-child(3) { grid-column: auto; border-left: 0; border-top: 2px dashed rgba(23,19,15,.3); }
  .of-facts div:nth-child(4) { border-top: 2px dashed rgba(23,19,15,.3); grid-column: 1 / -1; }
  .alla-live { padding-right: 14px; }
}
.of-facts { grid-template-columns: auto auto auto 1fr; }
.of-facts b[data-email] { font-size: 16px; word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 640px) { .of-facts { grid-template-columns: 1fr 1fr; } }

/* offer: free bonus */
.of-bonus { display: flex; gap: 14px; align-items: center; background: var(--yellow); border: var(--b); border-radius: 16px; box-shadow: var(--sh-s); padding: 12px 18px 12px 12px; margin: -6px 0 26px; max-width: 560px; }
.ob-card { width: 48px; flex: none; } .ob-card .tcard { filter: drop-shadow(2px 2px 0 var(--ink)); transform: rotate(-6deg); }
.ob-k { display: block; font: 700 11px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.of-bonus b { font-family: var(--display); font-size: 21px; font-weight: 900; }
.of-bonus b s { font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--muted); text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.of-bonus b em { font-style: normal; background: var(--red); color: var(--paper); font: 800 12px var(--label); letter-spacing: .12em; padding: 3px 9px; border-radius: 20px; vertical-align: 3px; }
.of-bonus > div > span:last-child { display: block; font-size: 14px; color: var(--ink); }
.of-bonus > div > span:last-child b { font-family: var(--body); font-size: 14px; font-weight: 800; }
.co-bonus { margin-top: 12px; background: #fff8e1; border-style: dashed; }
.co-tag { display: inline-block !important; background: var(--red); color: var(--paper) !important; font: 700 10.5px var(--label) !important; letter-spacing: .14em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; margin-bottom: 4px; }
.co-pr b.free { color: var(--green); font-size: 28px; }
.mail-att.att2 { margin-bottom: 0; } .mail-att.att2 + .mail-att { margin-top: 10px; }
.mail-att.att2 .pdf { background: var(--green); }

/* offer: Destiny Matrix bonus */
.mx-bonus { background: var(--paper-2); border-top: var(--b); border-bottom: var(--b); }
.mx-bonus h2 { font-size: clamp(38px, 5.4vw, 70px); }
.mx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-top: 60px; }
.mx-frame { background: var(--card); border: var(--b); border-radius: 24px; box-shadow: var(--sh); padding: 20px 20px 16px; }
.mx-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mx-cap b { font-family: var(--display); font-weight: 900; font-size: 24px; }
.mx-cap span { font-size: 14px; color: var(--muted); }
.mx-svg { width: 100%; display: block; margin: 6px 0; }
.mx-svg text { text-anchor: middle; dominant-baseline: central; }
.mx-svg .mx-n { font: 800 30px var(--display); fill: #fff; } .mx-svg .mx-n.big { font-size: 44px; fill: var(--ink); }
.mx-svg .mx-q { font: 700 18px var(--body); fill: rgba(23,19,15,.4); }
.mx-svg .mx-l { font: 700 15px var(--label); letter-spacing: 2px; fill: var(--ink); text-transform: uppercase; }
.mx-legend { display: flex; justify-content: center; gap: 22px; font-size: 13px; font-weight: 600; color: var(--muted); }
.mx-legend i { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--ink); margin-right: 6px; vertical-align: -2px; }
.mx-legend i.o { background: var(--yellow); } .mx-legend i.l { background: var(--paper-2); }
.mx-core { display: flex; gap: 18px; align-items: center; margin-top: 22px; background: var(--navy); color: var(--paper); border: var(--b); border-radius: 18px; padding: 18px 22px; box-shadow: var(--sh-s); }
.mx-num { width: 74px; height: 74px; flex: none; border-radius: 50%; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); display: grid; place-items: center; font: 900 36px var(--display); }
.mx-k { font: 700 11px var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); }
.mx-core b { display: block; font-family: var(--display); font-size: 28px; font-weight: 900; line-height: 1.1; }
.mx-core p { margin: 4px 0 0; color: #cdd6e6; font-size: 15.5px; }
.mx-right h3 { font-size: 34px; margin-bottom: 14px; }
.mx-list { list-style: none; padding: 0; margin: 0; counter-reset: mx; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mx-list li { counter-increment: mx; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 12px 14px 12px 50px; position: relative; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.mx-list li::before { content: counter(mx, upper-roman); position: absolute; left: 10px; top: 12px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); background: var(--yellow); display: grid; place-items: center; font: 700 11px var(--label); color: var(--ink); }
.mx-list li b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.mx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.mx-stats span { text-align: center; border: 2px solid var(--ink); border-radius: 14px; padding: 10px 6px; background: var(--card); font-size: 13px; font-weight: 600; color: var(--muted); }
.mx-stats b { display: block; font: 900 28px var(--display); color: var(--ink); }
.mx-value { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; background: var(--yellow); border: var(--b); border-radius: 16px; padding: 14px 20px; box-shadow: var(--sh-s); font-weight: 600; }
.mx-value s { text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.mx-value b { font-family: var(--display); font-size: 22px; font-weight: 900; }
.mx-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
@media (max-width: 960px) { .mx-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .mx-list { grid-template-columns: 1fr; } .mx-stats { grid-template-columns: repeat(2, 1fr); } .mx-svg .mx-l { font-size: 13px; } }
.al-av img { object-position: 50% 50%; }
.mail-av { overflow: hidden; } .mail-av img { width: 100%; height: 100%; object-fit: cover; }
/* matrix bonus — compact list */
.mx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-chips span { background: var(--card); border: 2px solid var(--ink); border-radius: 30px; padding: 7px 14px; font-size: 14.5px; font-weight: 600; }
.mx-stats { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px; grid-template-columns: none !important;
  margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--muted); }
.mx-stats b { display: inline !important; font: 900 22px var(--display) !important; color: var(--ink); }
.mx-stats i { font-style: normal; margin: 0 6px; color: var(--red); }
.mx-cta { width: 100%; margin-top: 16px; }
@media (max-width: 640px) {
  .mx-chips span { font-size: 13px; padding: 6px 11px; }
  .mx-bonus .lead { font-size: 16px; }
  .mx-value { padding: 12px 16px; } .mx-value b { font-size: 19px; }
}

/* ===== fixes: centred badges, facts, Safari ===== */
.stamp, .spin-badge .mid, .seal .mid { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: .9; }
.stamp small, .spin-badge .mid small, .seal .mid small { margin-top: 6px; line-height: 1; }
.stamp { font-size: 24px; letter-spacing: -.02em; }
.prod .top .stamp { font-size: 18px; }
.of-stamp { font-size: 28px !important; }
.bundle .stack .stamp { font-size: 28px; }
.of-facts { grid-template-columns: repeat(3, auto) !important; }
.of-facts div:nth-child(n) { grid-column: auto !important; }
.of-sent { font-size: 14px; color: var(--muted); margin: -14px 0 22px; overflow-wrap: anywhere; }
.of-sent b { color: var(--ink); }
@supports not (overflow: clip) { body { overflow-x: hidden; } }
input, select, button { -webkit-appearance: none; appearance: none; }
.q-consent input { -webkit-appearance: checkbox; appearance: auto; }
.bump input { -webkit-appearance: checkbox; appearance: auto; }
.q-in, .q-dob select { font-size: 17px; }  /* >=16px stops iOS zoom on focus */
@media (max-width: 640px) {
  .of-facts { grid-template-columns: 1fr 1fr 1fr !important; }
  .of-facts div { padding: 10px 10px; } .of-facts b { font-size: 16px; } .of-facts div + div { border-left: 2px dashed rgba(23,19,15,.3) !important; border-top: 0 !important; }
  .of-stamp { font-size: 22px !important; }
}
@media (max-width: 380px) { .of-facts b { font-size: 14px; } .of-facts span { font-size: 9.5px; letter-spacing: .1em; } }

.mq-wrap { overflow: hidden; padding: 14px 0; margin: -14px 0; position: relative; z-index: 5; }
.inside, .mx-bonus, .of-about, .checkout { overflow: hidden; }
.mgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mt { min-width: 0; } .mt > div:last-child { min-width: 0; }
@media (max-width: 1060px) { .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 880px) { .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .mt b { font-size: 16px; } .mt .mini-back { width: 32px; } .mt { gap: 8px; padding: 9px; } }
.mail-head > div:not(.mail-av) { min-width: 0; flex: 1; }
.mail-av { flex: none; }
.mail-head > div:not(.mail-av) > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-head > div span span { display: inline; }
.mail-head em { white-space: nowrap; }
.seal svg.ring text { letter-spacing: 3.6px; }
.of-facts b { white-space: nowrap; }
@media (max-width: 400px) {
  .of-facts { grid-template-columns: 1fr 1fr !important; }
  .of-facts div:nth-child(3) { grid-column: 1 / -1 !important; border-left: 0 !important; border-top: 2px dashed rgba(23,19,15,.3) !important; }
  .of-facts b { font-size: 16px; }
  .mx-core { flex-direction: column; text-align: center; }
}

/* ===== reviews: horizontal strip ===== */
.rstrip { position: relative; margin-top: 56px; }
.rs-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding: 18px 4px 22px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.rs-track::-webkit-scrollbar { height: 6px; } .rs-track::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 6px; }
.rcard { flex: 0 0 340px; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; background: var(--card); border: var(--b); border-radius: 18px; box-shadow: var(--sh-s); padding: 22px 22px 20px; }
.rc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rcard .stars { color: var(--red); letter-spacing: 3px; font-size: 16px; }
.rc-date { font-size: 13px; color: var(--muted); white-space: nowrap; }
.rcard p { font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.4; margin: 12px 0 18px; flex: 1; }
.rc-empty p, .rc-empty b, .rc-empty .rc-date, .rc-empty .rc-who div span { color: rgba(23,19,15,.38); }
.rc-empty { min-height: 240px; }
.rc-who { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 2px dashed rgba(23,19,15,.3); font-size: 15px; }
.rc-av { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: var(--yellow); display: grid; place-items: center; font-size: 22px; overflow: hidden; }
.rc-av img { width: 100%; height: 100%; object-fit: cover; }
.rc-who b { display: block; } .rc-who span { font-size: 13.5px; color: var(--muted); }
.rcard .prod-tag { position: absolute; top: -13px; right: 16px; background: var(--blue); border: 2px solid var(--ink); border-radius: 30px; font: 700 11px var(--label); letter-spacing: .12em; padding: 4px 11px; }
.rv-shot { border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; margin-top: 12px; }
.rs-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: var(--b); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); font: 700 22px var(--body); color: var(--ink); cursor: pointer; }
.rs-prev { left: -26px; } .rs-next { right: -26px; }
.rs-hint { display: none; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); margin: 4px 0 0; }
@media (max-width: 1260px) { .rs-prev { left: -6px; } .rs-next { right: -6px; } }
@media (max-width: 640px) {
  .rs-btn { display: none; } .rs-hint { display: block; }
  .rcard { flex-basis: 82%; } .rcard p { font-size: 17px; }
  .rs-track { margin: 0 -20px; padding-left: 20px; padding-right: 20px; scroll-padding: 0 20px; }
}

/* ===== thank-you ===== */
.ty { max-width: 680px; margin: 0 auto; padding: 50px 20px 80px; text-align: center; }
.ty-cards { display: flex; justify-content: center; height: 190px; margin-bottom: 44px; }
.ty-cards .tcard { width: 104px; margin: 0 -14px; filter: drop-shadow(4px 4px 0 var(--ink)); }
.ty-cards .tcard:nth-child(1) { transform: rotate(-12deg) translateY(22px); } .ty-cards .tcard:nth-child(3) { transform: rotate(12deg) translateY(22px); }
.ty-cards .tcard:nth-child(2) { position: relative; z-index: 1; width: 120px; }
.ty h1 { font-size: clamp(40px, 7vw, 64px); }
.ty-sub { color: var(--muted); font-size: 18px; margin: 16px auto 30px; overflow-wrap: anywhere; } .ty-sub b { color: var(--ink); }
.ty-steps { display: grid; gap: 12px; text-align: left; }
.ty-step { display: flex; gap: 16px; align-items: center; background: var(--card); border: var(--b); border-radius: 16px; box-shadow: var(--sh-s); padding: 16px 18px; }
.ty-step .n { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: var(--yellow); display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.ty-step.done .n { background: var(--green); color: #fff; }
.ty-step b { display: block; font-family: var(--display); font-size: 20px; font-weight: 900; }
.ty-step span { font-size: 15px; color: var(--muted); } .ty-step span b { display: inline; font: 700 15px var(--body); color: var(--ink); }
.ty-note { margin-top: 26px; background: #fff8e1; border: 2px dashed var(--ink); border-radius: 16px; padding: 16px 18px; font-size: 15px; color: var(--muted); text-align: left; overflow-wrap: anywhere; }
.ty-note b { color: var(--ink); }

/* ===== thank-you: inbox note + Daily Stars upsell ===== */
.ty h1 { margin-bottom: 22px; }
.ty-mail { display: flex; gap: 14px; text-align: left; background: var(--yellow); border: var(--b); border-radius: 18px; box-shadow: var(--sh-s); padding: 16px 18px; margin-bottom: 34px; overflow-wrap: anywhere; }
.ty-mail-ic { font-size: 30px; line-height: 1; }
.ty-mail b { font-weight: 800; } .ty-mail > div > b { display: block; font-family: var(--display); font-size: 21px; font-weight: 900; margin-bottom: 4px; }
.ty-mail span { font-size: 15px; }
.up { padding: 0 !important; text-align: left; background: var(--navy); color: var(--paper); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--red); overflow: hidden; margin-bottom: 34px; }
.up-bar { background: var(--red); color: var(--paper); text-align: center; font-weight: 700; font-size: 14.5px; padding: 9px 12px; border-bottom: 3px solid var(--ink); }
.up-bar b { background: var(--ink); color: var(--yellow); border-radius: 8px; padding: 1px 8px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.up-in { padding: 26px 26px 28px; }
.up .kicker { color: var(--yellow); margin-bottom: 8px; } .up .kicker::before, .up .kicker::after { color: var(--yellow); }
.up h2 { font-size: clamp(32px, 5.5vw, 46px); color: var(--paper); } .up h2 em { color: var(--yellow); }
.up-sub { color: #cdd6e6; margin: 12px 0 20px; } .up-sub b { color: var(--paper); }
.up-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: center; }
.up-mail { background: var(--card); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; }
.um-top { display: flex; justify-content: space-between; gap: 8px; background: var(--yellow); border-bottom: 2px solid var(--ink); padding: 8px 12px; font-weight: 800; font-size: 13px; }
.um-top em { font-style: normal; font-weight: 600; }
.um-body { display: grid; grid-template-columns: 74px 1fr; gap: 12px; padding: 12px; }
.um-card .tcard { filter: drop-shadow(2px 2px 0 var(--ink)); }
.um-k { font: 700 10px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.um-body b { font-family: var(--display); font-size: 20px; font-weight: 900; }
.um-body p { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.um-lines { display: grid; gap: 5px; margin-top: 6px; } .um-lines i { height: 6px; border-radius: 3px; background: rgba(23,19,15,.15); } .um-lines i.s { width: 60%; }
.um-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; } .um-tags span { font-size: 11px; font-weight: 700; border: 1.5px solid var(--ink); border-radius: 20px; padding: 2px 7px; }
.up-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.up-list li { padding-left: 24px; position: relative; font-size: 15px; color: #cdd6e6; } .up-list li::before { content: "✦"; position: absolute; left: 2px; color: var(--yellow); }
.up-list b { color: var(--paper); }
.up-time { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; font-weight: 600; font-size: 15px; }
.up-time label { cursor: pointer; } .up-time input { position: absolute; opacity: 0; }
.up-time label span { display: inline-block; border: 2px solid var(--paper); border-radius: 30px; padding: 6px 14px; font-weight: 700; }
.up-time input:checked + span { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.up-time em { font-style: normal; font-size: 13px; color: #9fb0c8; }
.up-price { margin: 16px 0 14px; font-size: 18px; color: #cdd6e6; } .up-price b { font-family: var(--display); font-weight: 900; color: var(--yellow); font-size: 26px; }
.up-yes { width: 100%; font-size: 19px; }
.up-terms { font-size: 12.5px; line-height: 1.5; color: #b9c4d6; margin: 12px 0 0; } .up-terms b { color: var(--paper); }
.up-no { display: block; margin: 14px auto 0; background: none; border: 0; color: #9fb0c8; font: 600 14px var(--body); text-decoration: underline; cursor: pointer; }
.up-err { color: #ffb4a8; font-weight: 600; text-align: center; margin: 10px 0 0; min-height: 1px; }
.up-pay, .up-done { display: none; }
.up.paying #up-choose, .up.paying .up-time { display: none; } .up.paying .up-pay { display: block; }
.up.done .up-bar, .up.done #up-choose, .up.done .up-time, .up.done .up-pay, .up.done .up-price { display: none; } .up.done .up-done { display: block; }
.up-done { background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; padding: 14px 18px; margin-top: 18px; }
.up-done b { font-family: var(--display); font-size: 22px; font-weight: 900; display: block; } .up-done span b { display: inline; font: 800 15px var(--body); }
@media (max-width: 640px) { .up-grid { grid-template-columns: 1fr; } .up-in { padding: 20px 16px 22px; } .ty-mail { padding: 14px; } }

/* ===== offer: free insight ===== */
.ins { background: var(--yellow); border-top: var(--b); border-bottom: var(--b); }
.ins .kicker::before, .ins .kicker::after { color: var(--red); }
.ins .lead { color: var(--ink); opacity: .85; }
.ins-box { max-width: 820px; margin: 44px auto 0; background: var(--card); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 10px 10px 0 var(--ink); padding: 30px 32px; }
.ins-head { display: flex; align-items: center; gap: 18px; }
.ins-num { width: 84px; height: 84px; flex: none; border-radius: 50%; background: var(--navy); color: var(--yellow); border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; font: 900 40px var(--display); }
.ins-k { font: 700 11px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.ins-head b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 5vw, 42px); line-height: 1.05; }
.ins-text { font-family: var(--display); font-weight: 500; font-size: 21px; line-height: 1.45; margin: 20px 0; }
.ins-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ins-two > div { border: 2px solid var(--ink); border-radius: 14px; padding: 12px 14px; }
.ins-plus { background: #e4f1e4; } .ins-minus { background: #fbe1da; }
.ins-two span { font: 700 11px var(--label); letter-spacing: .14em; text-transform: uppercase; }
.ins-two p { margin: 4px 0 0; font-size: 15px; }
.ins-locked { margin-top: 16px; display: grid; gap: 8px; }
.ins-locked div { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border: 2px dashed rgba(23,19,15,.35); border-radius: 12px; padding: 10px 14px; background: var(--paper-2); }
.ins-locked span { font-weight: 700; } .ins-locked b { font-size: 13.5px; color: var(--muted); }
.ins-bridge { margin-top: 22px; text-align: center; }
.ins-bridge p { margin: 0 0 16px; } .ins-bridge .btn { width: 100%; }

/* ===== offer: is this for me + comparison ===== */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.fit-grid > div { border: var(--b); border-radius: 18px; box-shadow: var(--sh-s); padding: 22px 24px; }
.fit-yes { background: #e4f1e4; } .fit-no { background: #fbe1da; }
.fit-grid b { font-family: var(--display); font-size: 24px; font-weight: 900; }
.fit-grid ul { margin: 10px 0 0; padding-left: 20px; } .fit-grid li { margin: 6px 0; }
.cmp { max-width: 720px; margin: 34px auto 0; background: var(--card); border: var(--b); border-radius: 18px; box-shadow: var(--sh-s); padding: 18px 22px 22px; }
.cmp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 2px dashed rgba(23,19,15,.25); }
.cmp-row b { font-family: var(--display); font-size: 24px; font-weight: 900; white-space: nowrap; color: var(--muted); }
.cmp-row b small { font: 600 13px var(--body); }
.cmp-row.win { border-bottom: 0; } .cmp-row.win span { font-weight: 800; } .cmp-row.win em { font-style: normal; color: var(--green); }
.cmp-row.win b { color: var(--red); font-size: 34px; }
.cmp .btn { width: 100%; margin-top: 12px; }

/* ===== offer: Alla video + misc ===== */
.al-video { position: relative; margin-top: 22px; border: 3px solid var(--yellow); border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: rgba(255,255,255,.06); display: grid; place-items: center; }
.al-video video { display: none; width: 100%; height: 100%; object-fit: cover; }
.al-video.has video { display: block; } .al-video.has .fn { display: none; }
.al-video .fn { color: #9fb0c8; font-size: 14px; font-weight: 600; padding: 10px; text-align: center; }
.al-cta { width: 100%; margin-top: 18px; }
.co-month { margin: 14px 0 0; font-size: 14.5px; font-weight: 600; }
.co-month b { color: var(--red); }
@media (max-width: 640px) {
  .ins-box { padding: 22px 16px; box-shadow: 6px 6px 0 var(--ink); border-width: 3px; }
  .ins-num { width: 64px; height: 64px; font-size: 30px; }
  .ins-text { font-size: 18px; }
  .ins-two, .fit-grid { grid-template-columns: 1fr; }
  .cmp-row { flex-direction: column; gap: 2px; } .cmp-row b { font-size: 22px; }
}
/* Alla video loop */
.al-video { aspect-ratio: 4 / 5; max-width: 420px; display: block; background: #0b0a17; }
.al-video video { display: block !important; width: 100%; height: 100%; object-fit: cover; }
.al-cap { position: absolute; left: 12px; bottom: 12px; background: rgba(15,13,36,.75); color: var(--yellow); font: 700 11px var(--label); letter-spacing: .16em; text-transform: uppercase; padding: 6px 12px; border-radius: 30px; }
@media (max-width: 880px) { .al-video { max-width: none; } }
/* hide the sticky bar while the buyer is paying */
.paying .sticky { display: none !important; }
.co-whop { padding: 6px; border-radius: 18px; background: #fbf6ea; }
/* quiz: gender step */
.q-gender { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.q-gender button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 10px; border: var(--b); border-radius: 18px; background: var(--paper); font: 700 18px var(--body); color: var(--ink); cursor: pointer; box-shadow: var(--sh-s); transition: transform .12s, background .15s; }
.q-gender button span { font-size: 34px; line-height: 1; }
.q-gender button:hover { transform: translate(-2px,-2px); }
.q-gender button.on { background: var(--yellow); }
.q-gender .q-g-other { grid-column: 1 / -1; flex-direction: row; justify-content: center; padding: 14px; font-size: 16px; }

/* ===== free insight v2 ===== */
.ins-head { display: block; }
.ins-k { text-align: center; margin-bottom: 14px; }
.ins-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ins-trio > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.ins-trio .ins-num { width: 64px; height: 64px; font-size: 30px; }
.ins-trio .ins-core { background: var(--yellow); color: var(--ink); }
.ins-trio b { display: block; font-family: var(--display); font-weight: 900; font-size: 19px; line-height: 1.1; }
.ins-trio em { font-style: normal; font: 700 10.5px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ins-sec { margin-top: 20px; }
.ins-sec h4 { margin: 0 0 6px; font: 700 12px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.ins-sec h4 i { font-style: normal; color: var(--muted); letter-spacing: .08em; }
.ins-dark h4 { color: var(--red); }
.ins-sec p { margin: 0; font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.5; }
.ins-more { margin: 26px 0 12px; text-align: center; font: 700 12px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.ins-more::before, .ins-more::after { content: ""; flex: 1; height: 2px; background: rgba(23,19,15,.2); }
.ins-locked { display: grid; gap: 10px; margin: 0; }
.ins-locked .lk { display: block; border: 2px dashed rgba(23,19,15,.35); border-radius: 14px; padding: 12px 14px; background: var(--paper-2); }
.lk-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lk-h span { font-weight: 800; } .lk-h b { font: 700 12px var(--label); letter-spacing: .08em; color: var(--red); }
.lk p { margin: 6px 0 4px; font-size: 15px; line-height: 1.45; color: var(--ink);
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%); mask-image: linear-gradient(90deg, #000 55%, transparent 100%); }
.lk-lock { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.lk-alla { background: #e9e4f6; }
@media (max-width: 640px) {
  .ins-trio .ins-num { width: 52px; height: 52px; font-size: 24px; }
  .ins-trio b { font-size: 15px; } .ins-trio em { font-size: 9px; letter-spacing: .08em; }
  .ins-sec p { font-size: 17px; }
  .lk p { -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%); mask-image: linear-gradient(180deg, #000 40%, transparent 100%); }
}

/* marquee: wider than the screen so the tilted ends never show */
.mq-wrap { overflow: hidden; padding: 18px 0; margin: -18px 0; }
.marquee { width: 112%; margin: 0 0 0 -6% !important; }
.ins-locked .lk-h { border: 0; padding: 0; background: none; border-radius: 0; display: flex; }
.mail-att .dl { display: flex; align-items: center; justify-content: center; padding: 0; line-height: 0; }
.mail-att .dl svg { display: block; }
/* matrix diagram inside the free insight */
.ins-who { text-align: center; } .ins-who b { font-family: var(--display); font-weight: 900; font-size: 24px; }
.ins-box .mx-svg { max-width: 420px; margin: 4px auto 0; }
.ins-box .mx-legend { margin-bottom: 4px; flex-wrap: wrap; gap: 6px 18px; }
.ins-bridge .mx-stats { margin: 0 0 12px; }
.ins-bridge .mx-stats s { color: var(--muted); text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.ins-bridge .mx-stats b.free { color: var(--green); font-size: 20px !important; }

/* ===== about Alla v2: stats, ritual, media ===== */
.al-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 4px; }
.al-stats div { border: 2px solid var(--yellow); border-radius: 14px; padding: 12px 10px; text-align: center; }
.al-stats b { display: block; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; color: var(--yellow); }
.al-stats span { display: block; margin-top: 6px; font-size: 13px; color: #cdd6e6; line-height: 1.3; }
.of-about > .wrap + .wrap { display: block; margin-top: 64px; }
.al-rit-h { text-align: center; font-size: clamp(30px, 4.5vw, 46px); color: var(--paper); } .al-rit-h em { color: var(--yellow); }
.al-ritual { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.al-ritual div { background: rgba(255,255,255,.05); border: 2px solid rgba(244,196,48,.6); border-radius: 16px; padding: 18px 16px; }
.al-ritual span { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); color: var(--ink); align-items: center; justify-content: center; font: 700 14px var(--label); border: 2px solid var(--ink); }
.al-ritual b { display: block; font-family: var(--display); font-weight: 900; font-size: 21px; margin: 10px 0 4px; color: var(--paper); }
.al-ritual p { margin: 0; font-size: 14.5px !important; color: #cdd6e6; line-height: 1.45; }
.al-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 36px 0 30px; }
.al-media .al-video { max-width: none; margin: 0; }
.al-photo { border: 3px solid var(--yellow); border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; }
.al-photo img { width: 100%; height: 100%; object-fit: cover; }
.of-about .al-cta { width: auto; min-width: 320px; }
@media (max-width: 880px) { .al-ritual { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .al-stats b { font-size: 26px; } .al-stats span { font-size: 11.5px; }
  .al-ritual { grid-template-columns: 1fr; }
  .al-media { grid-template-columns: 1fr 1fr; gap: 10px; } .al-media > :first-child { grid-column: 1 / -1; aspect-ratio: 4 / 4; }
  .of-about .al-cta { width: 100%; min-width: 0; }
}
.ftr-min .legal { margin-top: 18px; font-size: 14px; } .ftr-min .legal a { color: #d8ccb6; text-decoration: underline; text-underline-offset: 3px; }
/* ===== legal pages ===== */
.legal-page { max-width: 780px; margin: 0 auto; padding: 56px 20px 80px; }
.legal-page h1 { font-size: clamp(40px, 6vw, 60px); margin-bottom: 8px; }
.legal-page .upd { color: var(--muted); font-size: 14px; margin: 0 0 30px; }
.legal-page h2 { font-size: 26px; margin: 34px 0 10px; }
.legal-page p, .legal-page li { font-size: 16px; line-height: 1.65; color: #2f2a24; }
.legal-page ul { padding-left: 22px; } .legal-page li { margin: 6px 0; }
.legal-page .box { background: var(--card); border: var(--b); border-radius: 16px; box-shadow: var(--sh-s); padding: 16px 20px; margin: 20px 0; }
.legal-page a { color: var(--red); }
/* facts card hugs its content instead of stretching to the column width */
.of-facts { width: fit-content; max-width: 100%; }
@media (max-width: 640px) { .of-facts { width: 100%; } }
.rcard .stars i { font-style: normal; color: rgba(23,19,15,.2); }
.rcard .prod-tag { max-width: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-av { background: var(--navy); }
.al-media { grid-template-columns: 1fr 1fr; max-width: 820px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .al-media > :first-child { grid-column: auto; aspect-ratio: 4 / 5; } }

/* ===== thank-you v2 ===== */
.ty2 { max-width: 760px; margin: 0 auto; padding: 36px 20px 70px; }
.ty-ok { display: flex; align-items: center; gap: 16px; }
.ty-ok-ic { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--green); color: #fff; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); }
.ty-ok-k { font: 700 12px var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.ty-ok h1 { font-size: clamp(26px, 4.4vw, 38px); line-height: 1.1; margin-top: 4px; }
.ty-ok h1 em { font-style: italic; font-weight: 600; color: var(--red); }
.ty-inbox { margin: 20px 0 30px; background: var(--card); border: var(--b); border-radius: 18px; box-shadow: var(--sh-s); padding: 16px 18px; overflow-wrap: anywhere; }
.ty-inbox .ti-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.ty-inbox .ti-row > span { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.ty-inbox .ti-row b { font-family: var(--display); font-size: 19px; font-weight: 900; margin-right: 6px; }
.ty-inbox .ti-row em { font-style: normal; color: var(--muted); font-size: 15px; } .ty-inbox .ti-row em b { font: 700 15px var(--body); color: var(--ink); }
.ty-inbox p { margin: 10px 0 0; padding-top: 12px; border-top: 2px dashed rgba(23,19,15,.2); font-size: 14.5px; color: var(--muted); }
.ty-inbox p b { color: var(--ink); }

.ds { background: var(--navy); color: var(--paper); border: 4px solid var(--ink); border-radius: 28px; box-shadow: 10px 10px 0 var(--red); overflow: hidden; position: relative; }
.ds::before { content: ""; position: absolute; left: 50%; top: -260px; width: 900px; height: 900px; transform: translateX(-50%); border-radius: 50%; opacity: .08; background: repeating-conic-gradient(var(--yellow) 0 6deg, transparent 6deg 12deg); pointer-events: none; }
.ds-bar { position: relative; background: var(--red); text-align: center; font-weight: 700; font-size: 15px; padding: 10px 12px; border-bottom: 3px solid var(--ink); }
.ds-bar b { background: var(--ink); color: var(--yellow); border-radius: 8px; padding: 2px 9px; margin-left: 4px; font-variant-numeric: tabular-nums; font-size: 17px; }
.ds-in { position: relative; padding: 28px 30px 30px; text-align: center; }
.ds-k { font: 700 12px var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); }
.ds h2 { font-size: clamp(34px, 6vw, 54px); color: var(--paper); margin-top: 10px; } .ds h2 em { color: var(--yellow); }
.ds-sub { color: #cdd6e6; font-size: 17px; max-width: 560px; margin: 12px auto 22px; } .ds-sub b { color: var(--paper); }
.ds-grid { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: center; text-align: left; }
.ds-phone { width: 250px; aspect-ratio: 9 / 18; border: 4px solid var(--ink); border-radius: 36px; background: #0c0b1d; padding: 8px; box-shadow: 6px 6px 0 var(--yellow); }
.ph-screen { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 50% 18%, #3a2f7a, #120f2b 70%); padding: 30px 10px 10px; text-align: center; }
.ph-time { font: 300 54px/1 var(--body); color: #fff; letter-spacing: -1px; }
.ph-date { font-size: 12.5px; color: #cdd6e6; margin-top: 4px; }
.ph-note { margin-top: 18px; text-align: left; background: rgba(255,255,255,.88); color: var(--ink); border-radius: 16px; padding: 10px 11px; font-size: 11.5px; line-height: 1.35; }
.pn-top { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.pn-top b { font-size: 10px; letter-spacing: .06em; } .pn-top em { margin-left: auto; font-style: normal; }
.pn-app { width: 18px; height: 18px; border-radius: 5px; background: var(--yellow); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.ph-note > b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.ph-card { position: absolute; left: 50%; bottom: 12px; width: 92px; transform: translateX(-50%) rotate(-6deg); filter: drop-shadow(3px 3px 0 #000); }
.ds-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ds-list li { display: flex; gap: 12px; align-items: center; background: rgba(255,255,255,.06); border: 2px solid rgba(244,196,48,.55); border-radius: 14px; padding: 11px 14px; }
.ds-list li > span { font-size: 24px; width: 32px; text-align: center; flex: none; }
.ds-list b { display: block; font-family: var(--display); font-weight: 900; font-size: 18px; color: var(--paper); }
.ds-list div { font-size: 14px; color: #cdd6e6; }
.ds-price { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 26px 0 16px; }
.dp-free { background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; padding: 6px 18px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-3deg); }
.dp-free b { display: block; font: 900 40px/1 var(--display); } .dp-free span { font: 700 12px var(--label); letter-spacing: .14em; text-transform: uppercase; }
.dp-then { font-size: 18px; color: #cdd6e6; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dp-then s { color: #9fb0c8; text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.dp-then b { font: 900 30px var(--display); color: var(--yellow); }
.dp-save { background: var(--red); color: var(--paper); border: 2px solid var(--ink); border-radius: 20px; padding: 3px 10px; font: 800 12px var(--label); letter-spacing: .1em; align-self: center; }
.ds-yes { width: 100%; font-size: 20px; padding: 20px; animation: dsPulse 2.2s ease-in-out infinite; }
@keyframes dsPulse { 50% { transform: scale(1.025); } }
.ds-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--paper); }
.ds-terms { font-size: 12px; line-height: 1.5; color: #9fb0c8; margin: 12px auto 0; max-width: 560px; } .ds-terms b { color: #cdd6e6; } .ds-terms a { color: #cdd6e6; }
.ds-no { display: block; margin: 14px auto 0; background: none; border: 0; color: #8a9bb5; font: 600 13.5px var(--body); text-decoration: underline; cursor: pointer; }
.ds .up-pay, .ds .up-done { display: none; text-align: left; }
.ds.paying #up-choose, .ds.paying .ds-price { display: none; } .ds.paying .up-pay { display: block; }
.ds.done .ds-bar, .ds.done #up-choose, .ds.done .ds-price, .ds.done .up-pay { display: none; } .ds.done .up-done { display: block; }
.ty2 .ty-note { margin-top: 26px; }
@media (max-width: 640px) {
  .ds-in { padding: 22px 16px 24px; }
  .ds-grid { grid-template-columns: 1fr; justify-items: center; }
  .ds-phone { width: 220px; }
  .ds-list { width: 100%; }
  .ds-bar { font-size: 13px; }
  .ty-ok-ic { width: 46px; height: 46px; font-size: 22px; }
}
section.ds { padding: 0 !important; }
.ph-card { width: 72px; bottom: 14px; }
@media (max-width: 640px) { .ph-card { width: 62px; } .ph-note { font-size: 11px; } }
/* home: coming soon + misc */
.prod.soon .top { filter: grayscale(.55); }
.prod.soon .top .tcard { opacity: .8; }
.btn-soon { background: var(--paper-2); color: var(--muted); box-shadow: none; border-style: dashed; cursor: default; pointer-events: none; width: 100%; margin-top: 8px; }
.prod.soon .stamp { background: var(--navy); }
.hero .from { text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }
.daily-note { font-size: 13px; color: #cdd6e6; margin: 10px 0 0; }
.ftr li small { color: #8a7f6c; }
.home-media { grid-template-columns: 1fr 1fr; margin: 26px 0 0; max-width: none; }
.about .al-stats div { border-color: var(--ink); background: var(--card); }
.about .al-stats b { color: var(--red); } .about .al-stats span { color: var(--muted); }
.bundle ol li span { font-weight: 700; }
.al-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.al-stats div { min-width: 0; padding: 10px 6px; }
@media (max-width: 380px) { .al-stats b { font-size: 21px; } .al-stats span { font-size: 10.5px; } }