/* HEYA — Creator Program page */
.cr-hero{ position:relative; overflow:hidden; padding: clamp(120px,15vh,170px) 0 clamp(70px,9vh,110px); background: radial-gradient(80% 70% at 80% 30%, rgba(212,96,138,.18), transparent 60%), var(--grad-deep); }
.cr-hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap: clamp(40px,6vw,90px); align-items:center; }
.crh-back{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color: var(--on-dark-mute); text-decoration:none; margin-bottom:26px; transition: color .25s; }
.crh-back:hover{ color:#fff; }
html.ar .crh-back i{ transform: scaleX(-1); }
.crh-copy .eyebrow{ display:flex; justify-content:flex-start; }
.crh-title{ color:#fff; margin:22px 0 28px; font-size: clamp(44px,6vw,84px); line-height:1.05; }
.crh-title em{ color:#C9A96E; font-style:italic; }
.crh-copy .lede{ max-width:46ch; }
.crh-stats{ display:flex; align-items:center; gap: clamp(18px,3vw,34px); margin:40px 0 40px; flex-wrap:wrap; }
.crh-stat b{ display:block; font-family: var(--serif); font-size: clamp(40px,4.4vw,56px); font-weight:500; line-height:1; color:#fff; background: linear-gradient(180deg,#fff, #F2C6D8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.crh-stat span{ display:block; font-size:13px; color: var(--on-dark-mute); margin-top:8px; }
.crh-sep{ width:1px; height:46px; background: var(--glass-line); }
/* English stat numbers: the clean UI sans (Outfit, already loaded) instead of the display serif; Arabic keeps its styling */
html:not(.ar) .crh-stat b{ font-family: var(--sans); font-weight:300; letter-spacing:-.02em; }
/* hero visual = the Home page 3-video composition (.cr-stage / .cr-story / .cr-chip in heya.css), reused as is */
.crh-stage{ min-width:0; }

.cr-apply{ background: var(--bg-dark); padding: clamp(70px,10vh,120px) 0; }
.cr-apply-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px,5vw,80px); align-items:start; }
.cra-side{ position:sticky; top:110px; }
.cra-side .h2{ color:#fff; }
.cra-side .h2 em{ color:#C9A96E; font-style:italic; }
.cra-steps{ list-style:none; margin:40px 0 0; padding:0; position:relative; }
.cra-steps::before{ content:""; position:absolute; top:10px; bottom:30px; inset-inline-start:17px; width:1px; background: linear-gradient(180deg, rgba(224,140,172,.6), rgba(224,140,172,.05)); }
.cra-steps li{ display:flex; gap:20px; padding-bottom:28px; position:relative; }
.cra-n{ flex-shrink:0; width:35px; height:35px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; color:#fff; background: var(--bg-dark); border:1px solid rgba(224,140,172,.55); box-shadow:0 0 16px rgba(212,96,138,.3); position:relative; }
.cra-steps h3{ font-family: var(--sans); font-size:16.5px; font-weight:600; color:#fff; margin-top:6px; }
.cra-steps p{ font-size:14px; color: var(--on-dark-mute); line-height:1.6; margin-top:4px; }
.cra-help{ display:flex; align-items:center; gap:14px; margin-top:12px; padding:18px 20px; border-radius: var(--r-card-sm); background: var(--glass); border:1px solid var(--glass-line); }
.cra-help > i{ font-size:22px; color: var(--gold); }
.cra-help span{ display:block; font-size:12.5px; color: var(--on-dark-mute); }
.cra-help a{ color:#fff; font-size:14.5px; font-weight:500; text-decoration:none; }
.cra-help a:hover{ color: var(--gold); }

.cra-card{ position:relative; border-radius:28px; padding: clamp(26px,3.6vw,46px); background: linear-gradient(165deg, rgba(61,32,64,.55), rgba(20,8,28,.9)); border:1px solid var(--glass-line); box-shadow: 0 50px 100px -50px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); }
.cra-card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background: linear-gradient(140deg, rgba(224,140,172,.5), transparent 35%, transparent 70%, rgba(201,169,110,.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.cf-head h2, .cf-done h2{ font-family: var(--serif); font-size: clamp(28px,3vw,36px); color:#fff; font-weight:500; }
.cf-head p{ font-size:14px; color: var(--on-dark-mute); margin-top:6px; }
.cf-group{ margin-top:32px; }
.cf-gt{ display:flex; align-items:center; gap:9px; font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--gold-soft); padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--glass-line); }
.cf-gt i{ font-size:16px; color: var(--gold); }
html.ar .cf-gt{ letter-spacing:0; }
.cf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
.cf-field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.cf-full{ grid-column:1/-1; }
.cf-label{ font-size:13.5px; font-weight:500; color: var(--on-dark-soft); }
.cf-label em{ font-style:normal; color: var(--on-dark-mute); font-weight:400; }
.cf-input{ width:100%; box-sizing:border-box; font: inherit; font-size:15px; color:#fff; background: rgba(13,5,20,.55); border:1px solid rgba(255,255,255,.12); border-radius: var(--r-input); padding:13px 15px; outline:none; transition: border-color .25s, box-shadow .25s, background .25s; }
.cf-input::placeholder{ color: rgba(192,154,191,.45); }
.cf-input:focus{ border-color: var(--pink); background: rgba(13,5,20,.75); box-shadow: 0 0 0 3px rgba(212,96,138,.18); }
textarea.cf-input{ resize:vertical; min-height:96px; line-height:1.55; }
.cf-pre{ display:flex; align-items:stretch; direction:ltr; }
.cf-pfx{ display:grid; place-items:center; padding:0 14px; font-size:14.5px; font-weight:600; color: var(--gold); background: rgba(224,140,172,.08); border:1px solid rgba(255,255,255,.12); border-inline-end:none; border-start-start-radius: var(--r-input); border-end-start-radius: var(--r-input); direction:ltr; }
.cf-pre .cf-input{ border-start-start-radius:0; border-end-start-radius:0; direction:ltr; text-align:start; }
.cf-input[dir="ltr"], html.ar .cf-input[dir="ltr"]{ direction:ltr; text-align:left; }
.cf-input[dir="ltr"]::placeholder{ direction:ltr; text-align:left; }
.cra-help a{ direction:ltr; unicode-bidi:isolate; }
.cf-hint{ font-size:12.5px; color: var(--on-dark-mute); line-height:1.55; }
.cf-err{ display:none; font-size:12.5px; color:#F08BA9; }
.cf-field.bad .cf-input{ border-color:#E0607E; box-shadow:0 0 0 3px rgba(224,96,126,.14); }
.cf-field.bad .cf-err, .agree-bad .cf-err-agree{ display:block; }
.cf-terms{ margin-top:30px; border-radius:16px; background: rgba(255,255,255,.03); border:1px solid var(--glass-line); }
.cf-terms summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:16px 18px; font-size:14.5px; font-weight:600; color:#fff; }
.cf-terms summary::-webkit-details-marker{ display:none; }
.cf-terms summary i{ color: var(--gold); transition: transform .3s; }
.cf-terms[open] summary i{ transform: rotate(180deg); }
.cf-terms ul{ margin:0; padding:0 18px 18px 38px; }
html.ar .cf-terms ul{ padding:0 38px 18px 18px; }
.cf-terms li{ font-size:13.5px; color: var(--on-dark-soft); line-height:1.7; margin-bottom:4px; }
.cf-terms a{ color: var(--gold); }
.cf-check{ display:flex; align-items:flex-start; gap:12px; margin-top:20px; cursor:pointer; font-size:14px; color: var(--on-dark-soft); line-height:1.5; }
.cf-check input{ position:absolute; opacity:0; width:1px; height:1px; }
.cf-box{ flex-shrink:0; width:22px; height:22px; border-radius:7px; border:1px solid rgba(255,255,255,.25); display:grid; place-items:center; transition: background .2s, border-color .2s; margin-top:1px; }
.cf-box i{ font-size:14px; color:#fff; opacity:0; transition: opacity .2s; }
.cf-check input:checked + .cf-box{ background: var(--grad-pink); border-color: transparent; }
.cf-check input:checked + .cf-box i{ opacity:1; }
.cf-check input:focus-visible + .cf-box{ box-shadow:0 0 0 3px rgba(212,96,138,.3); }
.agree-bad .cf-box{ border-color:#E0607E; }
.cf-err-agree{ margin-top:8px; }
.cf-submit{ width:100%; justify-content:center; margin-top:28px; padding:17px 24px; font-size:15.5px; }
html.ar .cf-submit i{ transform: scaleX(-1); }
.cf-done{ text-align:center; padding: 30px 10px; }
.cfd-ic{ width:76px; height:76px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; font-size:36px; color:#fff; background: var(--grad-pink); box-shadow:0 0 50px rgba(212,96,138,.5); }
.cf-done p{ font-size:15px; color: var(--on-dark-soft); line-height:1.7; max-width:40ch; margin:12px auto 28px; }

@media (max-width: 980px){
  .cr-hero-grid, .cr-apply-grid{ grid-template-columns:1fr; }
  .cra-side{ position:static; }
}
@media (max-width: 560px){
  .cf-grid{ grid-template-columns:1fr; }
  .crh-sep{ display:none; }
  .crh-stats{ gap:22px 28px; }
}

.cf-handles{ grid-template-columns:1fr; gap:14px; }
.cf-pfx-ic{ width:48px; padding:0; font-size:19px; }
.cf-pfx-ic i{ color: var(--gold); }
.cf-sub{ display:block; font-size:13.5px; font-weight:500; color: var(--on-dark-soft); margin:26px 0 12px; }
.cf-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.cf-stats .cf-label{ font-size:12.5px; color: var(--on-dark-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-num, html.ar .cf-num{ text-align:center; font-weight:600; letter-spacing:.02em; }
.cf-num::placeholder, html.ar .cf-num::placeholder{ text-align:center; font-weight:400; }
.cf-stats .cf-field{ text-align:center; align-items:stretch; }
@media (max-width:560px){ .cf-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .cf-stats .cf-label{ font-size:11.5px; white-space:normal; min-height:2.9em; min-height:2lh; display:flex; align-items:flex-end; justify-content:center; margin-bottom:8px; }
  /* one shared label row per metric row (subgrid): every input starts on the same line even if a label wraps further on some device fonts */
  .cf-stats{ grid-template-rows:auto auto auto; row-gap:0; }
  .cf-stats .cf-field{ display:grid; grid-template-rows:subgrid; grid-row:span 3; gap:0; }
  .cf-stats .cf-err{ margin-top:8px; } }
.cf-plats{ display:flex; flex-direction:column; gap:14px; }
.cf-plat{ display:flex; flex-direction:column; gap:14px; padding:16px; border-radius:18px; background: rgba(255,255,255,.025); border:1px solid var(--glass-line); transition: border-color .3s; }
.cf-plat:focus-within{ border-color: rgba(224,140,172,.35); }
.cf-plat .cf-stats{ gap:10px; }
@media (max-width:560px){ .cf-plat{ padding:12px; } }

/* layout v2: steps full width, form centered below */
.cr-apply-grid{ grid-template-columns:1fr; gap: clamp(44px,6vh,72px); justify-items:center; }
.cra-side{ position:static; width:100%; text-align:center; }
.cra-side .eyebrow{ justify-content:center; }
.cra-side .h2{ margin-top:14px; }
.cra-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:48px; }
.cra-steps::before{ top:17px; bottom:auto; left:12.5%; right:12.5%; inset-inline-start:auto; width:auto; height:1px; background: linear-gradient(90deg, rgba(224,140,172,.1), rgba(224,140,172,.6), rgba(224,140,172,.1)); }
.cra-steps li{ flex-direction:column; align-items:center; text-align:center; gap:16px; padding:0 6px; }
.cra-steps h3{ margin-top:0; }
.cra-steps p{ max-width:28ch; margin-inline:auto; }
.cra-card{ width:100%; max-width:780px; }
.cra-card .cf-head{ text-align:center; }
.cra-help{ width:100%; max-width:780px; box-sizing:border-box; justify-content:center; margin-top:-40px; background:transparent; border:none; }
.cra-help span{ display:inline; margin-inline-end:8px; }
@media (max-width:860px){
  .cra-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px; }
  .cra-steps::before{ display:none; }
}
@media (max-width:480px){
  .cra-steps{ grid-template-columns:1fr; gap:26px; }
}

/* ---- production additions (HEYA): the real form's security check, messages and terms version,
   in the design's own tokens ---- */
.cf-hp{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.cf-turnstile-slot{ margin-top:22px; min-height:65px; }
.cf-alert{ margin-top:16px; padding:12px 16px; border-radius:14px; font-size:13.5px; line-height:1.55; color:#F08BA9; background: rgba(240,139,169,.08); border:1px solid rgba(240,139,169,.28); }
.cf-alert[hidden]{ display:none; }
.cf-ver{ margin:0; padding:0 18px 16px; font-size:12px; color: var(--on-dark-mute); }
.cf-submit:disabled{ opacity:.6; cursor:default; }
.cf-done:focus{ outline:none; }

/* mobile: centre the Creator page composition (text direction stays per language) */
@media (max-width: 980px){   /* same breakpoint as the single-column layout above */
  .crh-copy{ text-align:center; }
  .crh-copy .eyebrow{ justify-content:center; }
  .crh-copy .lede{ margin-inline:auto; }
  .crh-stats{ justify-content:center; }
  .crh-stat{ text-align:center; }
}