/* Jeli product page (prefix .jl-). Plain <div>s throughout, so the theme's global
   section/header/footer rules stay out of it (UI/UX principle 11). */
.jl {
    --jl-red: #e44d3a; --jl-green: #53d690; --jl-green-d: #1f563a;
    --jl-ink: #000; --jl-text: #333; --jl-muted: #5f6360;
    --jl-line: #e4e7e4; --jl-soft: #f5f7f5;
    background: #fff; clear: both; color: var(--jl-text); font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px; line-height: 28px; overflow-x: clip;
}
.jl *, .jl *::before, .jl *::after { box-sizing: border-box; }
.jl h1, .jl h2, .jl h3 { color: var(--jl-ink); font-family: inherit; margin: 0; }
.jl p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.jl img { display: block; max-width: 100%; }
.jl a { text-decoration: none; }
.jl [hidden] { display: none !important; }
.jl :focus-visible { outline: 3px solid var(--jl-green-d); outline-offset: 2px; }
.jl-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* hero */
.jl-hero { padding: 64px 0 72px; border-bottom: 1px solid var(--jl-line); }
.jl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.jl-eyebrow { color: var(--jl-red) !important; font-size: 15px !important; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 14px !important; }
.jl h1 { font-size: 54px; line-height: 1.08; font-weight: 900; letter-spacing: -.8px; margin-bottom: 20px; }
.jl-lead { font-size: 20px !important; line-height: 31px !important; }

.jl-count { margin-top: 30px; }
.jl-count__label { color: var(--jl-ink); font-size: 16px !important; font-weight: 700; margin-bottom: 10px !important; }
.jl-count__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 88px)); gap: 10px; perspective: 600px; }
.jl-count__tile { --jl-flap: 46px; background: var(--jl-green); border-radius: 12px; padding: 8px 6px 10px; text-align: center; }
.jl-count__tile b { display: block; color: var(--jl-ink); font-size: 34px; font-weight: 900; line-height: var(--jl-flap); font-variant-numeric: tabular-nums; }
.jl-count__tile > span { display: block; color: var(--jl-ink); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .4px; margin-top: 5px; text-transform: uppercase; }
.jl [hidden] { display: none !important; }
.jl-sr { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

/* split-flap digits, like a railway departure board */
.jl-flip { height: var(--jl-flap); perspective: 220px; position: relative; }
.jl-flip::after { background: rgba(0, 0, 0, .22); content: ''; height: 1px; left: 0; position: absolute; right: 0; top: 50%; z-index: 2; }
.jl-flip__half { background: var(--jl-green); height: 50%; left: 0; overflow: hidden; position: absolute; right: 0; }
.jl-flip__half > span { display: block; height: var(--jl-flap); line-height: var(--jl-flap); }
.jl-flip__top { border-radius: 6px 6px 0 0; top: 0; transform-origin: 50% 100%; }
.jl-flip__bottom { border-radius: 0 0 6px 6px; bottom: 0; transform-origin: 50% 0; }
.jl-flip__bottom > span { transform: translateY(-50%); }
.jl-flip__leaf { backface-visibility: hidden; z-index: 1; }
.jl-flip__leaf.jl-flip__top { background: linear-gradient(to bottom, var(--jl-green) 60%, #48c381); }

.jl-actions { margin-top: 26px; }
.jl-btn { display: inline-block; border-radius: 10px; font-size: 18px; font-weight: 700; line-height: 1; padding: 17px 28px; }
.jl-btn--primary { background: var(--jl-red); color: #fff !important; }
.jl-btn--primary:hover { background: #cf3f2d; }
.jl-btn--light { background: #fff; color: var(--jl-ink) !important; }

/* sample question */
.jl-try { background: #fff; border: 1px solid var(--jl-line); border-radius: 18px; box-shadow: 0 10px 34px rgba(0,0,0,.08); padding: 26px; }
/* sample question: told word by word, then the bar lifts off the name */
.jl-try { position: relative; }
.jl-try__head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; }
.jl-try__head .jl-try__label { margin-bottom: 0 !important; }
.jl-sound { align-items: center; appearance: none; background: #fff; border: 1px solid var(--jl-line); border-radius: 999px; color: var(--jl-muted); cursor: pointer; display: inline-flex; font: 600 13px/1 'Source Sans Pro', sans-serif; gap: 6px; padding: 6px 11px; }
.jl-sound .jl-sound__waves { opacity: .25; }
.jl-sound[aria-pressed="true"] { border-color: var(--jl-green); color: var(--jl-green-d); }
.jl-sound[aria-pressed="true"] .jl-sound__waves { opacity: 1; }

.jl-mask { clip-path: inset(-.3em 0 -.45em 0); display: inline-block; position: relative; transition: width .45s cubic-bezier(.2,.8,.2,1); white-space: nowrap; width: 4.6em; }
.jl-mask::after { background: #000; border-radius: 3px; bottom: .1em; content: ''; left: 0; position: absolute; right: 0; top: .14em; transform-origin: right center; transition: transform .5s cubic-bezier(.7,0,.3,1); }
.jl-mask::before { animation: jlShimmer 1.8s ease-in-out infinite; background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,.45) 50%, transparent 85%); bottom: .1em; content: ''; left: 0; position: absolute; right: 0; top: .14em; transform: translateX(-100%); z-index: 1; }
.jl-mask__name { background: linear-gradient(transparent 70%, var(--jl-green) 70%, var(--jl-green) 92%, transparent 92%); display: inline-block; opacity: 0; transform: translateY(.4em); transition: opacity .35s .2s, transform .45s .2s cubic-bezier(.2,.8,.2,1); }
.jl-mask.is-lifted::after { transform: scaleX(0); }
.jl-mask.is-lifted::before { animation: none; opacity: 0; }
.jl-mask.is-lifted .jl-mask__name { opacity: 1; transform: none; }
@keyframes jlShimmer { 60%, 100% { transform: translateX(100%); } }

.jl-js .jl-try .jl-w { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .35s, transform .4s cubic-bezier(.2,.8,.2,1); }
.jl-js .jl-try .jl-mask { opacity: 0; transition: opacity .4s, width .45s cubic-bezier(.2,.8,.2,1); }
.jl-js .jl-try__option { opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1), border-color .2s, background .2s; }
.jl-js .jl-try.is-told .jl-w, .jl-js .jl-try.is-told .jl-mask { opacity: 1; transform: none; }
.jl-js .jl-try.is-told .jl-try__option:enabled, .jl-js .jl-try.is-told .jl-try__option.is-right, .jl-js .jl-try.is-told .jl-try__option.is-wrong { opacity: 1; transform: none; }
.jl-js .jl-try.is-told .jl-try__option:disabled { transform: none; }
.jl-js .jl-try.is-told .jl-try__option:disabled:not(.is-right):not(.is-wrong) { opacity: .55; }

.jl-try__option.is-right { animation: jlPop .45s cubic-bezier(.3,1.6,.5,1); }
.jl-try__option.is-wrong { animation: jlNudge .4s ease-in-out; }
@keyframes jlPop { 40% { transform: scale(1.06); } }
@keyframes jlNudge { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.jl-try__reveal:not([hidden]) { animation: jlRise .5s cubic-bezier(.2,.8,.2,1); }
@keyframes jlRise { from { opacity: 0; transform: translateY(12px); } }
.jl-burst { color: var(--jl-green); font-size: 22px; left: 0; line-height: 1; pointer-events: none; position: absolute; top: 0; z-index: 3; }
.jl-burst:nth-child(even) { color: var(--jl-green-d); }

@media (prefers-reduced-motion: reduce) {
    .jl-js .jl-try .jl-w, .jl-js .jl-try .jl-mask, .jl-js .jl-try__option { opacity: 1; transform: none; transition: none; }
    .jl-mask, .jl-mask::after, .jl-mask__name { transition: none; }
    .jl-js .jl-clues:not(.is-dealt) .jl-clue { opacity: 1; transform: none; }
    .jl-clue, .jl-clue__inner { transition: none !important; }
    .jl-mask::before, .jl-try__option.is-right, .jl-try__option.is-wrong, .jl-try__reveal:not([hidden]) { animation: none; }
}

.jl-try__label { color: var(--jl-green-d); font-size: 14px !important; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 10px !important; }
.jl-try__clue { color: var(--jl-ink); font-size: 21px !important; font-weight: 600; line-height: 30px !important; margin-bottom: 18px !important; }
.jl-try__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jl-try__option { appearance: none; background: #fff; border: 2px solid var(--jl-line); border-radius: 10px; color: var(--jl-ink); cursor: pointer; font: 600 16px/20px 'Source Sans Pro', sans-serif; min-height: 54px; padding: 10px 12px; text-align: left; }
.jl-try__option:hover:enabled { border-color: var(--jl-green-d); }
.jl-try__option:disabled { cursor: default; opacity: .55; }
.jl-try__option.is-right { background: var(--jl-green); border-color: var(--jl-green); opacity: 1; }
.jl-try__option.is-wrong { border-color: var(--jl-red); color: var(--jl-red); opacity: 1; }
.jl-try__reveal { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; border-top: 1px solid var(--jl-line); margin-top: 18px; padding-top: 18px; }
.jl-try__reveal img { border-radius: 12px; height: 72px; object-fit: cover; width: 72px; }
.jl-try__verdict { color: var(--jl-ink); font-weight: 700; margin-bottom: 4px !important; }
.jl-try__story { font-size: 16px !important; line-height: 24px !important; }
.jl-try__next { color: var(--jl-red) !important; display: inline-block; font-size: 16px; font-weight: 700; margin-top: 10px; }

/* sections */
.jl-section { padding: 76px 0; }
.jl-section--soft { background: var(--jl-soft); }
.jl h2 { font-size: 38px; font-weight: 900; line-height: 1.15; letter-spacing: -.4px; }
.jl-section__lead { font-size: 20px !important; margin: 10px 0 36px !important; max-width: 680px; }
.jl h3 { font-size: 21px; font-weight: 700; line-height: 1.25; }

.jl-link { color: var(--jl-red) !important; font-weight: 700; }
.jl-link:hover { text-decoration: underline; }

.jl-stakes { display: grid; gap: 34px; grid-template-columns: 96px minmax(0, 720px); }
.jl-stakes .adk { color: var(--jl-red); font-size: 84px; line-height: 1; }
.jl-stakes h2 { margin-bottom: 14px; }
.jl-stakes p { margin-bottom: 14px; }
.jl-stakes .jl-stakes__turn { color: var(--jl-ink); font-size: 24px; font-weight: 700; line-height: 33px; margin: 20px 0 0; }

.jl-clues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jl-clue { display: flex; perspective: 1200px; }
.jl-clue__inner { display: grid; flex: 1; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,.7,.2,1); }
.jl-clue.is-turned .jl-clue__inner { transform: rotateY(180deg); }
.jl-clue__face { backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; border-radius: 12px; border-top: 4px solid var(--jl-red); display: flex; flex-direction: column; grid-area: 1 / 1; padding: 22px 22px 18px; }
.jl-clue__front p { color: var(--jl-ink); flex: 1; font-size: 19px !important; font-weight: 600; line-height: 27px !important; }
.jl-clue__back { border-top-color: var(--jl-green); transform: rotateY(180deg); }
.jl-clue__turn, .jl-clue__return, .jl-guess__change { align-self: flex-start; appearance: none; background: none; border: 0; cursor: pointer; font: 700 16px/1 'Source Sans Pro', sans-serif; padding: 14px 0 4px; }
.jl-clue__turn { align-items: center; color: var(--jl-red); display: none; gap: 8px; }
.jl-js .jl-clue__turn { display: inline-flex; }
.jl-clue__turn .adk { font-size: 20px; transition: transform .3s; }
.jl-clue__turn:hover .adk { transform: rotate(-12deg) scale(1.15); }
.jl-clue__return { color: var(--jl-muted); font-size: 14px; margin-top: auto; }
.jl-clue__hint { color: var(--jl-ink); font-size: 21px !important; font-weight: 700; line-height: 28px !important; margin-bottom: 14px !important; }
.jl-clue__hint span { color: var(--jl-green-d); display: block; font-size: 13px; letter-spacing: .7px; line-height: 18px; text-transform: uppercase; }
.jl-guess label { color: var(--jl-ink); display: block; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.jl-guess__row { display: flex; flex-wrap: wrap; gap: 8px; }
.jl-guess input { border: 2px solid var(--jl-line); border-radius: 10px; box-sizing: border-box; color: var(--jl-ink); flex: 1 1 130px; font: 16px 'Source Sans Pro', sans-serif; height: 46px; margin: 0; max-width: 100%; min-width: 0; padding: 0 12px; width: auto; }
.jl-guess input:focus { border-color: var(--jl-green-d); outline: none; }
.jl-guess button { background: var(--jl-green); border: 0; border-radius: 10px; color: var(--jl-ink); cursor: pointer; font: 700 16px 'Source Sans Pro', sans-serif; height: 46px; padding: 0 16px; }
.jl-guess__saved p { color: var(--jl-ink); font-size: 17px !important; line-height: 25px !important; }
.jl-guess__saved b { font-weight: 700; }
.jl-guess__saved.is-new b { animation: jlPop .45s cubic-bezier(.3,1.6,.5,1); display: inline-block; }
.jl-guess__change { color: var(--jl-red); font-size: 15px; padding-top: 6px; }

/* dealt onto the table as the section scrolls in */
.jl-js .jl-clues:not(.is-dealt) .jl-clue { opacity: 0; transform: translateY(46px) rotate(var(--tilt, -3deg)) scale(.96); }
.jl-clue { transition: opacity .45s, transform .6s cubic-bezier(.2,.9,.25,1.15); }
.jl-clue:nth-child(2) { --tilt: 3deg; } .jl-clue:nth-child(3) { --tilt: -2deg; } .jl-clue:nth-child(4) { --tilt: 4deg; } .jl-clue:nth-child(5) { --tilt: -4deg; } .jl-clue:nth-child(6) { --tilt: 2deg; }
.jl-clues__next { font-size: 20px; margin-top: 26px; }

.jl-invite { max-width: 820px; }
.jl-invite h2 { margin-bottom: 10px; }
.jl-invite__blurb { color: var(--jl-ink); font-size: 24px !important; font-style: italic; line-height: 33px !important; margin-bottom: 14px !important; }
.jl-facts { border-top: 1px solid var(--jl-line); display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; padding-top: 26px; }
.jl-facts b { color: var(--jl-ink); display: block; font-size: 26px; font-weight: 900; line-height: 1.15; }
.jl-facts span { color: var(--jl-muted); display: block; font-size: 16px; line-height: 22px; margin-top: 4px; }

.jl-faq { max-width: 820px; }
.jl-faq h2 { margin-bottom: 22px; }
.jl-faq details { background: #fff; border: 1px solid var(--jl-line); border-radius: 12px; margin-bottom: 10px; }
.jl-faq summary { color: var(--jl-ink); cursor: pointer; font-weight: 700; list-style-position: inside; padding: 15px 18px; }
.jl-faq details p { padding: 0 18px 16px; }

/* close */
.jl-close { background: var(--jl-red); color: #fff; padding: 72px 0; text-align: center; }
.jl-close h2 { color: #fff; margin-bottom: 10px; }
.jl-close p { color: #fff; }
.jl-notify { display: flex; gap: 10px; justify-content: center; margin: 24px auto 0; max-width: 500px; }
.jl-notify label { height: 1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0 0 0 0); }
.jl-notify input { background: #fff; border: 0; border-radius: 10px; color: var(--jl-ink); flex: 1; font: 18px 'Source Sans Pro', sans-serif; height: 54px; margin: 0; min-width: 0; padding: 0 16px; width: auto; }
.jl-notify button { background: #000; border: 0; border-radius: 10px; color: #fff; cursor: pointer; font: 700 18px 'Source Sans Pro', sans-serif; height: 54px; padding: 0 24px; }
.jl-notify button:disabled { cursor: default; opacity: .7; }
.jl-notify__status { font-weight: 700; margin-top: 14px !important; min-height: 28px; }
.jl-notify__note { font-size: 15px !important; margin-top: 2px !important; }

@media (max-width: 900px) {
    .jl-hero { padding: 40px 0 48px; }
    .jl-hero__grid { gap: 36px; grid-template-columns: minmax(0, 1fr); }
    .jl h1 { font-size: 42px; }
    .jl-actions--notify { display: none; }
    .jl-clues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .jl h1 { font-size: 36px; }
    .jl h2 { font-size: 30px; }
    .jl-lead, .jl-section__lead { font-size: 18px !important; line-height: 28px !important; }
    .jl-section { padding: 52px 0; }
    .jl-count__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .jl-count__tile { --jl-flap: 40px; }
    .jl-count__tile b { font-size: 28px; }
    .jl-count__tile > span { font-size: 10px; }
    .jl-btn { display: block; text-align: center; }
    .jl-try { padding: 20px; }
    .jl-try__reveal { align-items: center; grid-template-columns: 60px minmax(0, 1fr); }
    .jl-try__reveal img { height: 60px; width: 60px; }
    .jl-try__reveal > div { display: contents; }
    .jl-try__verdict { margin-bottom: 0 !important; }
    .jl-try__story, .jl-try__next { grid-column: 1 / -1; }
    .jl-try__next { margin-top: 0; }
    .jl-try__clue { font-size: 19px !important; line-height: 27px !important; }
    .jl-clues, .jl-facts { grid-template-columns: minmax(0, 1fr); }
    .jl-facts { gap: 18px; }
    .jl-stakes .jl-stakes__turn { font-size: 21px; line-height: 29px; }
    .jl-stakes { gap: 12px; grid-template-columns: minmax(0, 1fr); }
    .jl-stakes .adk { font-size: 60px; }
    .jl-close { padding: 52px 0; }
    .jl-notify { flex-direction: column; }
    .jl-notify input { flex: none; }
}