/* Perfect English Exercises — demo (Experience) styles.
 * v1.1.2 recolor: palette matched to the Golden Exercise revamp
 * (source: golden-easy-sample.html, ex.css v1.0.0). No new colors introduced.
 * Per-level accents added via body.pex-level-{slug} + [data-level="{slug}"].
 */

/* Reference palette — must stay in sync with ex.css */
body.pex{
  --rust:#b0432a;
  --rust-d:#8a2f1a;
  --ink:#2b1810;
  --muted:#6f5d50;
  --gold:#f4b100;
  --gold-l:#f4b81e;
  --gold-d:#e09309;
  --bd:#ece1d4;
  --card:#fff;
  --eyebrow-bg:#fbe3d5;
  --audio-bg:#fdf2e9;
  --audio-bd:#eac9b1;
  --pbar-bg:#f0e4d6;
  --slow-bg:#fff8e9;
  --nav-rust-l:#9a3a23;
  --nav-rust-d:#7a2c18;
  --ok-l:#2faa6a;
  --ok-d:#1f8f54;

  /* Per-level accents — default (fallback) is the brand rust+gold */
  --lvl-1:var(--gold-l);
  --lvl-2:var(--gold-d);
  --lvl-ink:var(--ink);
  --lvl-tint:rgba(244,177,0,.10);
  --lvl-tint-strong:rgba(244,177,0,.22);
  --lvl-eyebrow-bg:var(--eyebrow-bg);
  --lvl-eyebrow-ink:var(--rust-d);
}

/* Elementary — friendly gold gradient */
body.pex.pex-level-elementary{
  --lvl-1:#f4b81e;
  --lvl-2:#e09309;
  --lvl-ink:#2b1810;
  --lvl-tint:rgba(244,177,0,.12);
  --lvl-tint-strong:rgba(244,177,0,.28);
  --lvl-eyebrow-bg:#fff4e6;
  --lvl-eyebrow-ink:#8a2f1a;
}
/* Intermediate — brand rust */
body.pex.pex-level-intermediate{
  --lvl-1:#b0432a;
  --lvl-2:#8a2f1a;
  --lvl-ink:#fff;
  --lvl-tint:rgba(176,67,42,.10);
  --lvl-tint-strong:rgba(176,67,42,.24);
  --lvl-eyebrow-bg:#fbe3d5;
  --lvl-eyebrow-ink:#8a2f1a;
}
/* Advanced — deep rust */
body.pex.pex-level-advanced{
  --lvl-1:#9a3a23;
  --lvl-2:#7a2c18;
  --lvl-ink:#fff;
  --lvl-tint:rgba(122,44,24,.12);
  --lvl-tint-strong:rgba(122,44,24,.26);
  --lvl-eyebrow-bg:#fbe3d5;
  --lvl-eyebrow-ink:#7a2c18;
}

/* Warm hero eyebrow chip (matches reference sample) */
.pexd-kicker{
  display:inline-block;
  background:var(--lvl-eyebrow-bg);
  color:var(--lvl-eyebrow-ink);
  font-weight:800;
  font-size:.9rem;
  padding:6px 13px;
  border-radius:999px;
  margin-bottom:12px;
  box-shadow:0 2px 0 rgba(60,30,18,.04);
}

.pexd-orient{color:var(--muted);font-size:1.12rem;margin:6px 0 22px;line-height:1.7}

/* Small progress label (kept textual — retains DOM) */
.pexd-progress{
  color:var(--muted);
  font-weight:700;
  font-size:.95rem;
  margin-bottom:14px;
  letter-spacing:.01em;
}
.pexd-progress::before{
  content:"";
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--lvl-1),var(--lvl-2));
  margin-inline-start:8px;
  vertical-align:middle;
  box-shadow:0 0 0 3px var(--lvl-tint);
}

/* Hebrew prompt on choice — reuse rust-d treatment from reference */
.pexd-prompt-he{
  color:var(--rust-d);
  font-size:clamp(1.6rem,4.5vw,2.4rem);
  font-weight:900;
  margin:6px 0 6px;
  line-height:1.25;
}

.pexd-hint{color:var(--muted);margin-bottom:20px}

/* Multiple-choice options */
.pexd-opts{display:flex;flex-direction:column;gap:12px;max-width:520px;margin:0 auto}
.pexd-opt{
  direction:ltr;text-align:center;cursor:pointer;
  border:2px solid var(--bd);background:#fff;
  border-radius:14px;padding:15px 18px;
  font-size:1.12rem;font-weight:700;color:var(--ink);
  transition:border-color .15s,transform .12s,background .15s,box-shadow .15s;
}
.pexd-opt:hover{
  border-color:var(--gold);
  transform:translateY(-1px);
  box-shadow:0 8px 22px var(--lvl-tint);
}
.pexd-opt.correct{background:#e8f7ef;border-color:var(--ok-d);color:var(--ok-d)}
.pexd-opt.wrong{background:#fdeceb;border-color:#c0392b;color:#c0392b}
.pexd-opt[disabled]{cursor:default}
.pexd-next{margin-top:18px}

/* Transition copy panel */
.pexd-transition-txt{
  color:var(--ink);font-size:1.2rem;font-weight:700;line-height:1.6;
  max-width:600px;margin:6px auto 22px;
}

/* Big countdown — recolored per level for vibrance */
.pexd-count{
  font-size:3rem;font-weight:950;
  background:linear-gradient(135deg,var(--lvl-1),var(--lvl-2));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  margin:6px 0 14px;min-height:56px;line-height:1;
  text-shadow:0 6px 22px var(--lvl-tint);
}

.pexd-reveal-area{margin-top:6px}

/* Self-rate buttons: mid + low (nailed is the shared .pex-nailed green) */
.pex-rate .pexd-rate-mid{
  background:#fff;border:1px solid var(--audio-bd);color:var(--rust-d);
  border-radius:12px;padding:12px 22px;font-weight:900;cursor:pointer;min-height:48px;
  transition:transform .12s,background .15s;
}
.pex-rate .pexd-rate-mid:hover{background:var(--eyebrow-bg);transform:translateY(-1px)}
.pex-rate .pexd-rate-low{
  background:#fff;border:1px solid var(--bd);color:var(--muted);
  border-radius:12px;padding:12px 22px;font-weight:900;cursor:pointer;min-height:48px;
  transition:transform .12s,background .15s;
}
.pex-rate .pexd-rate-low:hover{background:#faf3ea;transform:translateY(-1px)}
.pex-rate button.chosen{opacity:.5}

/* "Repeat slowly" rail — level-tinted accent (matches reference gold rail on ex.css) */
.pexd-slow{
  margin-top:16px;
  color:var(--rust-d);font-weight:800;
  background:var(--slow-bg);
  border-inline-end:4px solid var(--lvl-1);
  border-radius:12px;padding:12px 16px;
  max-width:520px;margin-left:auto;margin-right:auto;
  box-shadow:0 6px 18px var(--lvl-tint);
}

/* Results screen */
.pexd-result{position:relative;overflow:hidden}
.pexd-result::before{
  content:"";
  position:absolute;inset:0 0 auto 0;height:6px;
  background:linear-gradient(90deg,var(--lvl-1),var(--lvl-2));
  border-top-left-radius:24px;border-top-right-radius:24px;
}
.pexd-result .pexd-score{
  font-size:1.8rem;font-weight:950;
  color:var(--rust-d);margin:8px 0 14px;
}
.pexd-band{color:var(--ink);font-size:1.12rem;line-height:1.7;margin:0 auto 16px;max-width:600px}
.pexd-footer{color:var(--muted);font-weight:800;margin:0 auto 10px;max-width:600px}
.pexd-disc{color:#a8968a;font-size:.85rem;margin:0 auto 18px;max-width:600px}
.pexd-cta{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:14px}
.pexd-secondary{color:var(--rust-d);font-weight:800;text-decoration:underline;cursor:pointer}
.pexd-confirm{
  background:#e8f7ef;border:1px solid var(--ok-d);color:#137a45;
  border-radius:14px;padding:16px 20px;font-weight:800;
  max-width:560px;line-height:1.6;
}

/* Vimeo teaching video wrapper */
.pexd-video{
  max-width:640px;margin:0 auto 22px;
  border-radius:18px;overflow:hidden;
  box-shadow:0 14px 40px rgba(60,30,18,.14);
  border:1px solid var(--bd);
}
.pexd-video .pexd-ratio{position:relative;padding-top:56.25%}
.pexd-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ============================================================
   HUB — level picker
   ============================================================ */
.pexd-levels{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin:26px 0 10px;
}
.pexd-level-card{
  display:flex;flex-direction:column;text-align:center;
  background:#fff;
  border:1px solid var(--bd);
  border-radius:20px;
  box-shadow:0 12px 34px rgba(60,30,18,.08);
  padding:26px 22px;text-decoration:none;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  position:relative;overflow:hidden;
}
/* Level card top accent stripe — differs per level (data-level from template) */
.pexd-level-card::before{
  content:"";
  position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg,var(--gold-l),var(--gold-d));
}
.pexd-level-card[data-level="elementary"]::before{
  background:linear-gradient(90deg,#f4b81e,#e09309);
}
.pexd-level-card[data-level="intermediate"]::before{
  background:linear-gradient(90deg,#b0432a,#8a2f1a);
}
.pexd-level-card[data-level="advanced"]::before{
  background:linear-gradient(90deg,#9a3a23,#7a2c18);
}
.pexd-level-card:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 50px rgba(60,30,18,.16);
  border-color:#e5d4bd;
}

/* Level badge — per-level gradient chip */
.pexd-level-badge{
  display:inline-block;align-self:center;
  background:linear-gradient(135deg,var(--gold-l),var(--gold-d));
  color:var(--ink);
  font-weight:900;
  border-radius:999px;
  padding:8px 18px;
  margin:6px 0 14px;
  letter-spacing:.01em;
  box-shadow:0 8px 20px rgba(224,147,9,.22);
}
.pexd-level-card[data-level="elementary"] .pexd-level-badge{
  background:linear-gradient(135deg,#f4b81e,#e09309);color:#2b1810;
  box-shadow:0 8px 20px rgba(224,147,9,.22);
}
.pexd-level-card[data-level="intermediate"] .pexd-level-badge{
  background:linear-gradient(135deg,#b0432a,#8a2f1a);color:#fff;
  box-shadow:0 8px 20px rgba(138,47,26,.28);
}
.pexd-level-card[data-level="advanced"] .pexd-level-badge{
  background:linear-gradient(135deg,#9a3a23,#7a2c18);color:#fff;
  box-shadow:0 8px 20px rgba(122,44,24,.30);
}

.pexd-level-desc{color:var(--muted);line-height:1.6}
.pexd-help{color:#8a7869;margin-top:20px;font-size:.98rem;text-align:center}

/* Responsive */
@media(max-width:640px){
  .pexd-levels{grid-template-columns:1fr}
  .pexd-count{font-size:2.6rem}
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce){
  .pexd-opt,.pexd-level-card,.pex-rate .pexd-rate-mid,.pex-rate .pexd-rate-low{
    transition:none;
  }
}

/* ---------- v1.1.3 UX/copy patch ---------- */
.pexd-sechead{margin-bottom:14px}
.pexd-secname{display:inline-block;background:var(--lvl-tint-strong,rgba(244,177,0,.28));color:var(--lvl-eyebrow-ink,#8a2f1a);font-weight:900;font-size:.9rem;padding:5px 14px;border-radius:999px;margin-bottom:8px}
.pexd-explain{color:var(--muted,#6f5d50);font-size:1rem;line-height:1.6;max-width:560px;margin:12px auto 0}
.pexd-transition2{text-align:right}
.pexd-t2-head{color:var(--rust-d,#8a2f1a);font-size:clamp(1.5rem,4vw,2.1rem);font-weight:950;margin:2px 0 14px;text-align:center}
.pexd-t2-main{color:var(--ink,#2b1810);font-size:1.08rem;line-height:1.7;margin:0 auto 12px;max-width:600px}
.pexd-t2-box{background:var(--slow-bg,#fff8e9);border:1px solid #f0dcbf;border-right:5px solid var(--gold,#f4b100);border-radius:16px;padding:18px;margin:18px auto 22px;max-width:620px;text-align:right}
.pexd-t2-boxtitle{color:var(--rust-d,#8a2f1a);font-weight:950;font-size:1.05rem;margin-bottom:8px}
.pexd-t2-boxtxt{color:var(--ink,#2b1810);line-height:1.65;margin:0 0 8px}
.pexd-transition2 .pex-cta{display:block;margin:0 auto}
.pex-rate .pexd-rate-no{background:#fff;border:1px solid #e2d2bf;color:#6f5d50;border-radius:12px;padding:12px 24px;font-weight:900;cursor:pointer;min-height:48px}
.pex-rate .pexd-rate-no:hover{border-color:#c0392b;color:#c0392b}
.pexd-correct{margin-top:18px;background:var(--slow-bg,#fff8e9);border-right:4px solid var(--gold,#f4b100);border-radius:14px;padding:16px 18px;max-width:560px;margin-left:auto;margin-right:auto;text-align:center}
.pexd-correct-txt{color:var(--rust-d,#8a2f1a);font-weight:800;line-height:1.6;margin:0 0 14px}
.pexd-repcount{font-weight:950;font-size:1.3rem;color:var(--rust,#b0432a);margin-bottom:12px}
.pexd-repcount.done{color:#1f8f54}
.pexd-tap{cursor:pointer;background:#fff;border:2px solid var(--gold,#f4b100);color:#8a2f1a;border-radius:12px;padding:11px 22px;font-weight:900;font-size:1rem}
.pexd-tap:hover{background:#fff4e0}
/* hide floating WhatsApp / call widgets on demo pages only (demo.css loads only here) */
#ht-ctc-chat,.ht-ctc,.ht_ctc_style,.ht_ctc_chat_style,.callnowbutton,[class*="call-now-button"],.ht-ctc-ic{display:none !important;}
.pexd-flow{padding-bottom:6px}
@media(max-width:640px){.pex-foot{padding:20px 0 30px}.pexd-t2-box{padding:16px 14px}}

/* ---------- v1.1.4: mobile option fit + exercise icons ---------- */
.pexd-opt{white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.4}
@media(max-width:640px){
  .pexd-opts{max-width:100%}
  .pexd-opt{font-size:.98rem;padding:12px 13px}
  .pexd-prompt-he{font-size:clamp(1.35rem,5.5vw,1.9rem)}
  .pex-prompt{font-size:clamp(1.4rem,6vw,2rem)}
}
.pexd-secicon-lg{display:block;width:78px;height:78px;border-radius:50%;object-fit:cover;margin:0 auto 10px;box-shadow:0 6px 18px rgba(60,30,18,.15)}
.pexd-secrow{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:2px}
.pexd-secicon-sm{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:0 0 auto}

/* v1.1.6 — hub intro video */
.pexd-vidcap{text-align:center;color:var(--rust-d,#8a2f1a);font-weight:800;margin:20px 0 10px;font-size:1.06rem}
.pexd-hub-video{max-width:760px;margin:0 auto 6px}
.pexd-hub-sub{text-align:center;margin:22px auto 4px;max-width:640px}
@media(max-width:640px){.pexd-vidcap{font-size:.98rem;margin:16px 8px 8px}}

/* v1.1.8 — golden icon on recognition->golden transition (larger than in-exercise) */
.pexd-t2-icon{display:block;width:108px;height:108px;border-radius:50%;object-fit:cover;margin:0 auto 18px;box-shadow:0 8px 22px rgba(60,30,18,.18)}
@media(max-width:640px){.pexd-t2-icon{width:92px;height:92px;margin-bottom:14px}}