/* J «JAZIPLACE family»: the layout system and visual language of jaziplace.com (Theplace/jaziplace-site,
   13 Oct 2026): navy #0C0E22 hero, process, CTA and footer with a 48 px grid, pixel squares and a violet
   glow; light #F6F7FB sections with white cards; a tinted pill eyebrow; the violet capsule on the key
   words; buttons cut at 45° with the violet triangle kept; a white arrow box. Plus Jakarta Sans (Latin),
   Cairo Play (Arabic) with Readex Pro behind it. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/PlusJakartaSans-VF.woff") format("woff"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 160 700; font-display: swap; src: url("/assets/fonts/ReadexPro-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo Play"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("/assets/fonts/CairoPlay-arabic-mono.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

.theme-j {
  --navy: #0C0E22; --navy-2: #12142C; --navy-3: #080A1A; --px: #1A1D40; --violet-d: #5719E0; --tint: #EEF0F5; --violet-l: #EEF0FB;
  --on-dark: #EEF0FB; --on-dark-muted: #AFB4D2;
  --font: "Plus Jakarta Sans", "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #F6F7FB; --bg-deep: #EEF0F6; --surface: #FFFFFF; --surface-2: #EEF0F5;
  --line: #E7E8F0; --line-2: #D6D9E5;
  --ink: #0F1224; --ink-2: #3E4360; --ink-3: #565B75;
  --violet-soft: rgba(101,33,250,.06);
  --tech: #EEF0FB; --tech-soft: rgba(101,33,250,.16); --tech-line: rgba(238,240,251,.75);
  --fc-bg: rgba(255,255,255,.95); --fc-line: #E7E8F0; --fc-ink: #0F1224; --fc-ink-2: #565B75;
  --shadow-j: 0 1px 2px rgba(15,18,36,.04), 0 10px 26px rgba(15,18,36,.05);
  --cut: 14px; --r: 16px;
  background: var(--bg); color: var(--ink); line-height: 1.65; color-scheme: light;
}
html[dir="rtl"] .theme-j { --font: "Cairo Play", "Readex Pro", "Plus Jakarta Sans", system-ui, sans-serif; line-height: 1.75; }

/* dark parts: topbar, header, hero, day, coach, closing, footer */
.theme-j :is(.site-head, .s-hero, .s-day, .s-coach, .s-closing, .site-foot) {
  --bg: #0C0E22; --bg-deep: #12142C; --surface: rgba(255,255,255,.05); --surface-2: rgba(255,255,255,.09);
  --line: rgba(255,255,255,.1); --line-2: rgba(255,255,255,.18);
  --ink: #FFFFFF; --ink-2: #EEF0FB; --ink-3: #AFB4D2;
  --violet-soft: rgba(101,33,250,.16);
  --fc-bg: rgba(18, 20, 44, .9); --fc-line: rgba(255,255,255,.12); --fc-ink: #fff; --fc-ink-2: #AFB4D2;
  color: var(--ink); color-scheme: dark;
}
.theme-j :is(.s-day, .s-coach, .s-closing, .site-foot) {
  background: radial-gradient(ellipse 52% 60% at 50% 100%, rgba(101,33,250,.42), rgba(101,33,250,.1) 48%, transparent 74%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 48px 48px, var(--navy);
  border: 0;
}
.theme-j .site-foot { background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 48px 48px, var(--navy); }
.theme-j .topbar { background: var(--navy-3); color: var(--on-dark-muted); font-size: 13px; }
.theme-j .topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 38px; }
.theme-j .topbar a { color: var(--on-dark-muted); text-decoration: none; }
.theme-j .topbar a:hover { color: #fff; }
.theme-j .site-head { background: rgba(12, 14, 34, .94); border-bottom-color: rgba(255,255,255,.08); }
.theme-j .site-head .bar { height: 72px; }
.theme-j .brand img.lockup { height: 38px; width: auto; display: block; }
.theme-j .nav a { color: #D3D7EE; border-radius: 99px; }
.theme-j .nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.theme-j .lang summary { border-radius: 99px; color: #fff; }
.theme-j .lang ul, .theme-j .menu nav { background: var(--navy-2); }

/* type */
.theme-j h1, .theme-j h2 { font-weight: 800; letter-spacing: -.02em; }
html[dir="rtl"] .theme-j :is(h1, h2, h3) { letter-spacing: 0; font-weight: 700; }
html[dir="rtl"] .theme-j h1 { line-height: 1.62; }
.theme-j .sec-head { margin-inline: auto; text-align: center; max-width: 720px; }
.theme-j .sec-head .lede { margin-inline: auto; color: var(--ink-3); }
.theme-j .eyebrow { display: inline-flex; padding: .3rem .95rem .3rem .8rem; border-radius: 999px; background: var(--tint); border: 1px solid #DDE0EA; color: var(--violet-d); font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.theme-j .eyebrow::before { content: "✦"; width: auto; height: auto; background: none; clip-path: none; color: var(--violet); font-size: 12.5px; }
.theme-j :is(.s-day, .s-coach, .s-closing) .eyebrow { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: var(--on-dark); }
.theme-j :is(.s-day, .s-coach, .s-closing) .eyebrow::before { color: var(--on-dark); }
.theme-j .facet { color: var(--violet); }
.theme-j .facet::after { display: none; }
.theme-j :is(.s-day, .s-coach, .s-closing) .facet { color: #FFFFFF; }
.theme-j mark.hl { background: var(--violet); color: #fff; border-radius: .42em; padding: .04em .3em .12em; display: inline-block; line-height: 1.3; margin-block: .06em; }

/* buttons cut at 45°, the cut piece kept as a violet triangle, a white arrow box */
.theme-j .btn.primary.cut, .theme-j .soon.cut { position: relative; isolation: isolate; background: none; border-radius: 0; box-shadow: none; gap: .8rem; padding: .45rem .45rem .45rem 1.4rem; color: #fff; }
html[dir="rtl"] .theme-j :is(.btn.primary.cut, .soon.cut) { padding: .45rem 1.4rem .45rem .45rem; }
.theme-j :is(.btn.primary.cut, .soon.cut)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--violet);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); transition: background-color .2s; }
.theme-j :is(.btn.primary.cut, .soon.cut)::after { content: ""; position: absolute; top: -4px; right: -4px; width: calc(var(--cut) - 2px); height: calc(var(--cut) - 2px); background: var(--violet); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.theme-j :is(.btn.primary.cut, .soon.cut):hover::before { background: var(--violet-d); }
.theme-j .arr { width: 32px; height: 32px; background: #fff; color: var(--violet); display: grid; place-items: center; flex: none; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.theme-j .arr svg { width: 16px; height: 16px; }
html[dir="rtl"] .theme-j .arr svg { transform: scaleX(-1); }
.theme-j .site-head .soon { font-size: 14px; }
.theme-j .btn.ghost { border-radius: 999px; border: 1.5px solid var(--line-2); }

/* hero */
.theme-j .hero-j { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); text-align: center; padding-block: clamp(56px, 8vw, 96px) clamp(48px, 7vw, 84px); }
.theme-j .bg-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.theme-j .gridl { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; }
html[dir="rtl"] .theme-j .gridl { background-position: 100% 0; }
.theme-j .px { position: absolute; width: 47px; height: 47px; margin-top: 1px; background: var(--px); }
.theme-j .px.a { top: 0; inset-inline-start: 96px; } .theme-j .px.b { top: 48px; inset-inline-start: 48px; background: #15183A; }
.theme-j .px.c { top: 0; inset-inline-end: 144px; } .theme-j .px.d { top: 96px; inset-inline-end: 48px; } .theme-j .px.e { top: 48px; inset-inline-end: 192px; background: #15183A; }
.theme-j .orb { position: absolute; border-radius: 50%; aspect-ratio: 1; }
.theme-j .orb.o1 { width: min(46vw, 540px); top: -22%; inset-inline-start: -6%; background: radial-gradient(circle, rgba(101,33,250,.2), transparent 68%); }
.theme-j .orb.o2 { width: min(40vw, 480px); top: 10%; inset-inline-end: -6%; background: radial-gradient(circle, rgba(101,33,250,.16), transparent 68%); }
.theme-j .glow { position: absolute; inset-inline: -10%; bottom: -1px; height: min(100%, 560px); background: radial-gradient(ellipse 52% 100% at 50% 100%, rgba(101,33,250,.62), rgba(101,33,250,.2) 48%, transparent 74%); }
.theme-j .jc { max-width: 860px; margin-inline: auto; }
.theme-j .chip { display: inline-flex; align-items: center; gap: 10px; padding: .32rem 1rem .32rem .4rem; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); font-size: 14px; font-weight: 500; color: var(--on-dark); }
html[dir="rtl"] .theme-j .chip { padding: .32rem .4rem .32rem 1rem; }
.theme-j .chip .ci { width: 26px; height: 26px; border-radius: 50%; background: var(--violet); display: grid; place-items: center; color: #fff; }
.theme-j .chip svg { width: 14px; height: 14px; }
.theme-j .hero-j h1 { font-size: clamp(34px, 5.4vw, 64px); line-height: 1.16; margin: 22px 0 18px; }
html[dir="rtl"] .theme-j .hero-j h1 { line-height: 1.62; }
.theme-j .hero-j .lead { font-size: clamp(16.5px, 1.6vw, 19px); color: var(--on-dark); max-width: 640px; margin: 0 auto; opacity: .94; }
.theme-j .hero-j .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.theme-j .hero-j .trial-note { color: var(--on-dark-muted); }
.theme-j .hstats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(32px, 5vw, 50px); padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); }
.theme-j .hs { padding-inline: 12px; }
.theme-j .hs + .hs { border-inline-start: 1px solid rgba(255,255,255,.12); }
.theme-j .hs b { display: block; font: 800 clamp(30px, 4vw, 46px)/1.2 "Plus Jakarta Sans", sans-serif; color: #fff; }
.theme-j .hs > span { display: block; color: var(--on-dark-muted); font-size: 14.5px; margin-top: 2px; }
.theme-j .glass-panel { max-width: 880px; margin: clamp(40px, 6vw, 64px) auto 0; padding: clamp(20px, 3vw, 36px); border-radius: 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 80px -40px rgba(101,33,250,.5); }
.theme-j .glass-panel .scan { max-width: 560px; }

/* double ticker */
.theme-j .ticker-j { overflow: hidden; background: var(--navy-2); display: grid; }
.theme-j .tk-row { overflow: hidden; padding-block: 15px; }
.theme-j .tk-row:first-child { background: var(--violet); }
.theme-j .tk-row.rev { border-top: 1px solid rgba(255,255,255,.06); }
.theme-j .tk-track { display: flex; width: max-content; animation: band 64s linear infinite; }
.theme-j .tk-row.rev .tk-track { animation-direction: reverse; animation-duration: 76s; }
html[dir="rtl"] .theme-j .tk-track { animation-name: band-rtl; }
.theme-j .tk-track span { display: inline-flex; align-items: center; gap: 22px; padding-inline-end: 22px; color: #fff; font-size: 16px; font-weight: 500; white-space: nowrap; }
.theme-j .tk-row.rev span { color: #C9CDE6; }
.theme-j .tk-track span::after { content: ""; width: 8px; height: 8px; background: #fff; transform: rotate(45deg); }
.theme-j .tk-row.rev span::after { background: var(--violet); }
.snap .theme-j .tk-track { animation: none; }

/* light sections and white cards */
.theme-j .alt { background: var(--bg); border: 0; }
.theme-j :is(.s-demo, .s-food, .s-pricing) { background: #fff; }
.theme-j .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-j); }
.theme-j .card:hover { box-shadow: 0 18px 40px rgba(15,18,36,.1); border-color: #CFD3E0; }
.theme-j :is(.s-day, .s-coach, .s-closing) .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); box-shadow: none; }
.theme-j .feat .ico { width: 54px; height: 54px; border-radius: 14px; background: var(--tint); color: var(--violet); }
.theme-j .feat .ico svg { width: 26px; height: 26px; }
.theme-j .step .viz, .theme-j .readout { background: var(--bg); }
.theme-j .step .n { color: var(--violet); }
.theme-j .dish .lead { border-bottom-color: var(--line-2); }
.theme-j .plan.best { border: 1.5px solid var(--violet); box-shadow: 0 18px 40px rgba(101,33,250,.14); background: #fff; }
.theme-j .plan .pill { background: var(--violet); }
.theme-j .includes { background: var(--bg); }
.theme-j .feat.wide:first-child .stat { color: var(--violet); }
.theme-j .cuisines { display: none; }

/* FAQ: two columns of white cards with a violet + */
.theme-j .faq-grid { grid-template-columns: minmax(0, 1fr); }
.theme-j .faq-grid .sec-head { position: static; margin-inline: auto; }
.theme-j .qa { border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.theme-j .qa details { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-j); padding-inline: 22px; }
.theme-j .qa details[open] { border-color: #C9CDDA; }
.theme-j .qa summary { font-size: 16.5px; padding: 18px 0; }
.theme-j .qa summary::after { width: 28px; height: 28px; border: 0; border-radius: 50%; transform: none; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; }
.theme-j .qa details[open] summary::after { transform: rotate(45deg); }

/* closing CTA band */
.theme-j .s-closing h2 { color: #fff; }
.theme-j .s-closing .app-icon { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 24px 50px -16px rgba(101,33,250,.6); }

/* readable sizes: nothing under 12.5 px */
.theme-j :is(.bl small, .scan-total small, .float-card small, .coach .ai, .store small, .cu-title) { font-size: 12.5px; }
.theme-j .bl b { font-size: 13px; }

@media (max-width: 900px) {
  .theme-j .qa { grid-template-columns: minmax(0, 1fr); }
  .theme-j .hstats { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .theme-j .hs:nth-child(3) { border-inline-start: 0; }
}
@media (max-width: 640px) {
  .theme-j .topbar { display: none; }
  .theme-j .bl { font-size: 12.5px; } .theme-j .bl b { font-size: 12.5px; }
  .theme-j .site-head .soon { display: none; }
  .theme-j .glass-panel { padding: 14px; }
}
