/* Application form — renamed steps: "Step N" sits in the small box where the number was, the name beside it */
#apply.n1-apply .n1-item .n1-q.fe-q{ width:auto; min-width:56px; padding:0 12px; white-space:nowrap; font-size:15px; letter-spacing:-.01em; }
@media (max-width:640px){
  #apply.n1-apply .n1-item .n1-q.fe-q{ min-width:44px; padding:0 9px; font-size:13.5px; }
}


/* ---- Step 1: three levels ---- */
#apply .af-ch.is-grid.fe-three{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
#apply .af-ch.is-grid.fe-three[data-n="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:640px){ #apply .af-ch.is-grid.fe-three, #apply .af-ch.is-grid.fe-three[data-n]{ grid-template-columns:minmax(0,1fr); } }

/* ---- Step 2: eligibility & salary ---- */
#apply .fe-step2 .af-body{ display:block; }
#apply .fe-s2{ font-family:inherit; }
#apply .fe-empty{ margin:0; padding:12px 14px; border-radius:8px; background:#F7F9FC; color:var(--cl-body, #34414F); font-size:15px; line-height:1.5; }
#apply .fe-link{ color:#0760C6; font-weight:750; text-decoration:underline; text-underline-offset:3px; }
#apply .fe-ack{ margin-top:20px; padding-top:16px; border-top:1px solid #E3E9F2; }
#apply .fe-ack b{ font-weight:750; color:#0E1E35; }

/* ---- Step 5: Professional Background — short to the eye: one question first, the rest opens only when needed ---- */
#apply .fe-step5 .fe-pb, #apply .fe-step5 .fe-pb-b, #apply .fe-step5 .fe-sp{ display:grid; gap:18px; grid-column:1 / -1; }
#apply .fe-step5 .fe-pb[hidden], #apply .fe-step5 .fe-pb-b[hidden], #apply .fe-step5 .fe-sp[hidden]{ display:none !important; }
#apply .fe-pb-lead{ margin:0; font-size:15px; line-height:1.5; color:#34414F; }
#apply .fe-step5 .af-sub{ margin:6px 0 -6px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#0760C6; }
#apply .af-ch.is-grid.fe-four{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
#apply .af-ch.is-grid.fe-two{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
#apply .af-ch.is-grid.fe-yn{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; max-width:360px; }
#apply .fe-c-sub{ display:block; margin-top:4px; font-size:13px; font-weight:500; line-height:1.45; color:#5B6878; }
#apply .fe-sp-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
#apply .fe-pb-ok, #apply .fe-pb-end{ display:flex; gap:10px; align-items:flex-start; margin:0; padding:12px 14px; border:1px solid #D3E3F8; border-radius:8px;
  background:#F5F9FF; font-size:14.5px; line-height:1.5; color:#0E1E35; grid-column:1 / -1; }
#apply .fe-pb-ok[hidden], #apply .fe-pb-end[hidden]{ display:none !important; }
#apply .fe-ni{ flex:none; display:grid; place-items:center; width:20px; height:20px; margin-top:1px; border-radius:50%; background:#DCE8F8; color:#004594;
  font:italic 800 12.5px/1 Georgia, 'Times New Roman', serif; }
@media (max-width:760px){ #apply .fe-sp-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px){
  #apply .af-ch.is-grid.fe-four, #apply .af-ch.is-grid.fe-two{ grid-template-columns:minmax(0,1fr); }
  #apply .af-ch.is-grid.fe-yn{ max-width:none; }
}

/* Step 5 · tidy and shorter */
#apply .fe-step5 .fe-pb, #apply .fe-step5 .fe-pb-b{ gap:16px; }
#apply .af-ch.is-grid.fe-two .af-c span{ flex-wrap:wrap; row-gap:2px; align-content:center; }
#apply .fe-c-sub{ flex-basis:100%; margin:0; padding-left:30px; }
#apply .fe-step5 .af-ta{ min-height:88px; }
#apply .fe-step5 .fe-sp-grid .af-hint{ font-size:13px; }

#apply .fe-sub-opt{ font-weight:700; letter-spacing:.08em; color:#6B7788; }
#apply .fe-sp-grid{ align-items:start; }

/* ---- Step 5 · From / To: one field, two native pickers (Month | Year) ---- */
#apply .fe-my-native{ position:absolute !important; width:1px !important; height:1px !important; min-height:0 !important; margin:-1px !important; padding:0 !important;
  overflow:hidden; clip:rect(0 0 0 0); border:0 !important; opacity:0; pointer-events:none; }
#apply .fe-my{ position:relative; display:grid; grid-template-columns:minmax(0,1.12fr) 1px minmax(0,1fr); height:52px;
  border:1px solid #AFBCCD; border-radius:var(--cr-rk, 10px); background:#FFFFFF; transition:border-color .15s, box-shadow .15s; }
#apply .fe-my:hover{ border-color:#8E9DB2; }
#apply .fe-my:focus-within{ border-color:var(--cr-focus, #1A73E8); box-shadow:0 0 0 3px rgba(26,115,232,.18); }
#apply .af-f.is-bad .fe-my{ border-color:var(--cr-err, #B42318); }
#apply .af-f.is-bad .fe-my:focus-within{ box-shadow:0 0 0 3px rgba(180,35,24,.14); }
#apply .fe-my select{
  -webkit-appearance:none; appearance:none; display:block; width:100%; height:100%; min-width:0; margin:0; padding:0 34px 0 14px;
  border:0; border-radius:0; box-shadow:none; background-color:transparent; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23505C6C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
  font:inherit; font-size:16px; font-weight:650; line-height:1.2; color:#0E1E35; text-overflow:ellipsis;
}
#apply .fe-my .fe-my-m{ padding-left:42px; border-radius:var(--cr-rk, 10px) 0 0 var(--cr-rk, 10px); }
#apply .fe-my .fe-my-y{ border-radius:0 var(--cr-rk, 10px) var(--cr-rk, 10px) 0; }
#apply .fe-my select:hover{ background-color:#F7FAFE; }
#apply .fe-my select:focus{ outline:none; background-color:#EEF4FC; }
#apply .fe-my select.is-ph{ color:#6B7788; font-weight:500; }
#apply .fe-my select option{ color:#0E1E35; font-weight:500; }
#apply .fe-my-div{ align-self:center; height:26px; background:#D6E0EE; }
#apply .fe-my-ic{ position:absolute; left:14px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:#5E6A7B; pointer-events:none; }
#apply .fe-my-ic svg{ display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }


/* "To … or ☐ Currently Working" (the owner's text): "or" shows while To is shown; once ticked, To goes and "or" with it */
#apply .fe-now{ display:flex; align-items:center; gap:10px; }
#apply .fe-or{ font-size:14.5px; font-weight:600; color:#5E6A7B; }
#apply .fe-from-row:has(> .af-f[data-when="x_now!=1"][hidden]) .fe-or{ display:none; }
@media (min-width:641px){
  /* ticked (To hidden): the tick sits beside "From", level with its box */
  #apply .fe-from-row:has(> .af-f[data-when="x_now!=1"][hidden]) .fe-now{ align-self:start; padding-top:40px; }
  /* To shown: "or ☐ Currently Working" goes under the From / To pair */
  #apply .fe-from-row:not(:has(> .af-f[data-when="x_now!=1"][hidden])) .fe-now{ grid-column:1 / -1; margin-top:-6px; }
}

/* ---- Step 6: Professional Skills & Digital Marketing Understanding ----
   Every choice is the site's own tick card (as in Steps 1 and 5): an empty circle that fills blue with a white tick,
   the card turning light blue. The level meanings are written once, as plain boxes above the choices. No side lines. */
#apply .fe-step6 .af-body{ gap:26px; }
#apply .fe-part{ display:grid; gap:12px; }
#apply .fe-part[hidden]{ display:none !important; }
#apply .fe-h6{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
#apply .fe-h6-t{ margin:0; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#0760C6; }
#apply .fe-cnt{ flex:none; font-size:13px; font-weight:700; color:#6B7788; font-variant-numeric:tabular-nums; transition:color .4s; }
#apply .fe-cnt.is-done{ color:#167C4A; }
#apply .fe-k{ margin:0; padding:10px 12px 11px; border-radius:10px; background:#F3F7FC; border:1px solid #DCE6F3; font-size:13px; line-height:1.4; color:#4E5A6B; }
#apply .fe-k b{ display:block; margin-bottom:2px; font-size:14.5px; font-weight:800; color:#0E1E35; }
#apply .fe-sk-t b, #apply .fe-rt-t b{ display:block; font-size:15px; line-height:1.35; font-weight:700; color:#0E1E35; }
#apply .fe-sk-t span{ display:block; margin-top:3px; font-size:13px; line-height:1.45; color:#5E6A7B; }
#apply .fe-sk-q, #apply .fe-rt-q{ padding-top:14px; border-top:1px solid #EDF0F5; }
/* each question's name is shown in the row; its legend (the name read out, and used by the email) is kept but hidden */
#apply .fe-sk-q > legend.af-l, #apply .fe-rt-q > legend.af-l{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Professional Skills — desktop: one grid, so each skill's four tick cards sit under the four meanings */
#apply .fe-sk-key, #apply .fe-sk-row{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(4, minmax(0,1fr)); gap:8px; }
#apply .fe-sk-key .fe-k{ text-align:center; }
#apply .fe-sk-lead{ margin:0; align-self:center; padding-right:10px; font-size:14.5px; line-height:1.5; color:#34414F; }
#apply .fe-sk-row{ align-items:center; }
#apply .fe-sk-ch{ display:contents; }
#apply .fe-sk-ch .af-c span{ justify-content:center; padding:10px 8px; }

/* Digital Marketing Understanding — ten tick cards per area, in one row (two rows of five on phones) */
#apply .fe-dm-lead{ margin:0; font-size:14.5px; line-height:1.55; color:#34414F; }
#apply .fe-dm-lead b{ color:#0E1E35; font-weight:700; }
#apply .fe-dm-areas{ display:block; margin:4px 0; }
/* the 1–10 key: one line per band (three equal boxes read as column heads over 4 / 4 / 2 numbers, which they are not) */
#apply .fe-dm-key{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
#apply .fe-dm-key .fe-k{ display:flex; gap:10px; align-items:baseline; padding:8px 12px; }
#apply .fe-dm-key .fe-k b{ flex:none; min-width:34px; margin:0; }
#apply .fe-rt-row{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,4fr); gap:8px 12px; align-items:center; }
#apply .fe-rt-t .af-how{ margin-top:1px; white-space:nowrap; }
#apply .af-ch.fe-rt-ch{ display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); gap:6px; }
#apply .fe-rt-ch .af-c span{ justify-content:center; gap:6px; padding:8px 2px; font-variant-numeric:tabular-nums; }
#apply .fe-rt-ch .af-c span::before{ width:17px; height:17px; }
#apply .fe-rt-ch .af-c input:checked + span::before{ background-size:11px; }

/* not enough room beside the name: the name goes above its choices (the four meanings stay in a row above) */
@media (max-width:900px){
  #apply .fe-sk-key, #apply .fe-sk-row{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  #apply .fe-sk-lead{ grid-column:1 / -1; padding:0 0 2px; }
  #apply .fe-sk-t{ grid-column:1 / -1; margin-bottom:4px; }
}
@media (max-width:1000px){
  #apply .fe-rt-row{ grid-template-columns:minmax(0,1fr); gap:8px; }
  #apply .fe-rt-t{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
}
@media (max-width:760px){
  #apply .fe-sk-key{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  #apply .fe-sk-key .fe-k{ text-align:left; }
  #apply .fe-sk-lead{ grid-column:1 / -1; padding:0 0 2px; }
  #apply .fe-sk-row{ grid-template-columns:repeat(2, minmax(0,1fr)); }          /* 2×2, the same places as the key above */
  #apply .fe-sk-t{ grid-column:1 / -1; margin-bottom:4px; }
  #apply .fe-sk-ch .af-c span{ justify-content:flex-start; padding:10px 12px; }
  #apply .af-ch.fe-rt-ch{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}
@media (max-width:380px){
  #apply .fe-sk-ch .af-c span{ gap:8px; padding:10px 9px; font-size:15px; }
  #apply .fe-rt-ch .af-c span{ gap:4px; padding:8px 0; font-size:14.5px; }
  #apply .fe-rt-ch .af-c span::before{ width:16px; height:16px; }
}
@media (max-width:340px){
  #apply .af-ch.fe-rt-ch{ gap:4px; }
  #apply .fe-rt-ch .af-c span{ gap:3px; font-size:14px; letter-spacing:-.01em; }
}

/* ---- Step 7: Salary & Joining Details — monthly in-hand only, the level's range right under the expected amount ---- */
#apply .fe-inhand{ margin:0; }
#apply .fe-inhand b{ font-weight:750; }
#apply .fe-sal .fe-amt{ max-width:320px; }
#apply .fe-range{ display:inline-block; margin:8px 0 0; padding:7px 12px; border-radius:8px; background:#F3F7FC; border:1px solid #DCE6F3;
  font-size:14px; line-height:1.45; color:#34414F; }
#apply .fe-range[hidden]{ display:none; }
#apply .fe-range b{ color:#0E1E35; font-weight:750; white-space:nowrap; }
#apply .fe-sal .af-hint + .fe-range{ display:table; }
#apply .fe-sal .af-echo:empty{ min-height:0; margin:0; }
#apply .fe-yearly{ margin:6px 0 0; font-size:13.5px; line-height:1.45; font-weight:600; color:#8A5300; }
#apply .fe-yearly[hidden]{ display:none; }
#apply .fe-above[hidden]{ display:none !important; }
#apply .af-ch.is-grid.fe-join{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width:640px){
  #apply .fe-sal .fe-amt{ max-width:none; }
  #apply .af-ch.is-grid.fe-join{ grid-template-columns:minmax(0,1fr); }
}

/* ---- Step 8: Education Background ---- */
#apply .fe-12{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,.9fr); gap:18px; }
#apply .af-ch.is-grid.fe-qual{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
#apply .af-ch.is-grid.fe-3c{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
#apply .af-ch.is-grid.fe-st{ max-width:440px; }
#apply .fe-he, #apply .fe-aq, #apply .fe-aq-item{ display:grid; gap:18px; }
#apply .fe-he[hidden], #apply .fe-aq[hidden], #apply .fe-aq-item[hidden]{ display:none !important; }
#apply .fe-yr{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
#apply .fe-yr > .af-f[hidden]{ display:none; }
#apply .fe-aq-tick{ padding-top:16px; border-top:1px solid #E3E9F2; }
#apply .fe-aq-tick b{ font-weight:700; color:#0E1E35; }
#apply .fe-aq .af-sub{ margin-bottom:-6px; }
/* one qualification: plain, like the rest of the form; two or more: each in the same box, numbered */
#apply .fe-aq:not(.is-multi) .fe-aq-h1{ display:none; }
#apply .fe-aq.is-multi .fe-aq-item{ padding:16px; border:1px solid #DCE6F3; border-radius:12px; background:#FAFCFF; }
#apply .fe-aq-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:-4px; }
#apply .fe-aq-t{ margin:0; font-size:15px; font-weight:750; color:#0E1E35; }
#apply .fe-aq-x{ height:34px; padding:0 12px; border:1px solid #E7C3BF; border-radius:8px; background:#FFFFFF; color:#B42318; font:inherit; font-size:14px; font-weight:650; cursor:pointer; }
#apply .fe-aq-x:hover{ background:#FEF3F2; }
#apply .fe-aq-x[hidden], #apply .fe-aq-add[hidden]{ display:none; }
#apply .fe-aq-add{ justify-self:start; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border:1px solid #C9D9EF; border-radius:10px;
  background:#FFFFFF; color:#0760C6; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
#apply .fe-aq-add > span[aria-hidden]{ font-size:20px; line-height:1; font-weight:600; }
#apply .fe-aq-add:hover{ background:#EAF2FD; border-color:#A9C4EA; }
#apply .fe-aq-add:focus-visible, #apply .fe-aq-x:focus-visible{ outline:2px solid var(--cr-focus, #1A73E8); outline-offset:2px; }
@media (max-width:900px){
  #apply .fe-12{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  #apply .fe-12 > .af-f:first-child{ grid-column:1 / -1; }
  #apply .af-ch.is-grid.fe-qual{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:640px){
  #apply .af-ch.is-grid.fe-qual{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  #apply .af-ch.is-grid.fe-3c{ grid-template-columns:minmax(0,1fr); }
  #apply .af-ch.is-grid.fe-st{ max-width:none; }
}
@media (max-width:560px){
  #apply .fe-12, #apply .fe-yr{ grid-template-columns:minmax(0,1fr); }
  #apply .fe-aq.is-multi .fe-aq-item{ padding:14px 12px; }
}
@media (max-width:400px){
  #apply .fe-qual .af-c span, #apply .fe-st .af-c span{ gap:8px; padding:10px 10px; font-size:14.5px; }
}
@media (max-width:345px){
  #apply .af-ch.is-grid.fe-qual{ grid-template-columns:minmax(0,1fr); }
}
/* a yearly-looking amount: the "per month in hand" echo would contradict the note, so it rests until corrected */
#apply .fe-sal.is-yearly .af-echo{ display:none; }
#apply .fe-above[hidden]{ display:none !important; }

/* ---- Step 9: Resume & Portfolio ---- */
#apply .fe-lead{ margin:-6px 0 0; font-size:14.5px; line-height:1.55; color:#34414F; }
#apply .fe-sf[hidden], #apply .fe-about[hidden]{ display:none !important; }
#apply .fe-about{ display:grid; gap:12px; }
/* Video Presenter & Content Creator: the self-introduction video block in Step 9 is spaced like the form body around it */
#apply .fe-video{ display:grid; gap:18px; }
#apply .fe-video[hidden]{ display:none; }
#apply .fe-about .af-ta{ min-height:120px; }
#apply .fe-count{ display:block; margin-top:6px; font-size:12.5px; color:#6B7788; text-align:right; font-variant-numeric:tabular-nums; }
#apply .af-got-a [data-file-view]{ font-weight:750; }
/* Step 6 status without "Intern / Fresher" (experience-only posts): three in a row, no empty cell */
@media (min-width:641px){ #apply .af-ch.is-grid.fe-four[data-n="3"]{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* a post's own set of questions (Step 6 part 2, Step 7 skills): laid out like the set it replaces */
#apply .fe-set{ display:grid; gap:16px; grid-column:1 / -1; }
#apply .fe-step6 .fe-set{ gap:12px; }
#apply .fe-set[hidden]{ display:none !important; }
/* three answers in a row (Step 6 "strategy document for client approval"); one column on phones */
#apply .af-ch.is-grid.fe-three-c{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width:760px){ #apply .af-ch.is-grid.fe-three-c{ grid-template-columns:minmax(0,1fr); } }
#apply .fe-lead-post[hidden]{ display:none !important; }
#apply .fe-lead-post{ margin-top:-4px; font-size:14px; color:#4E5A6B; }
/* two answers a row, the tick beside the words (long answers wrap beside it, never under it); one column on phones */
#apply .af-ch.is-grid.fe-2c{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (max-width:640px){ #apply .af-ch.is-grid.fe-2c{ grid-template-columns:minmax(0,1fr); } }
/* a choice with a small line under its name, in a 3-column row: the tick on the left, the name and its line beside it */
#apply .af-ch.fe-three-c .af-c span:has(> .fe-c-sub), #apply .af-ch.fe-2c .af-c span:has(> .fe-c-sub){ display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:10px; align-items:start; align-content:start; }
#apply .af-ch.fe-three-c .af-c span:has(> .fe-c-sub)::before, #apply .af-ch.fe-2c .af-c span:has(> .fe-c-sub)::before{ grid-row:span 2; margin-top:1px; }
#apply .af-ch.fe-three-c .af-c span > .fe-c-sub, #apply .af-ch.fe-2c .af-c span > .fe-c-sub{ grid-column:2; padding-left:0; }
#apply .fe-num[hidden]{ display:none !important; }
/* in a row where some answers have a small line under the name, every answer starts at the top (one clean line of ticks) */
#apply .af-ch.fe-three-c:has(.fe-c-sub) .af-c span{ align-items:flex-start; }
#apply .af-ch.fe-three-c:has(.fe-c-sub) .af-c span::before{ margin-top:1px; }
/* "select all that apply" (short labels): three in a row, two on phones */
#apply .af-ch.is-grid.fe-ticks{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width:640px){ #apply .af-ch.is-grid.fe-ticks{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:641px){ #apply .af-ch.is-grid.fe-ticks.fe-ticks4{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

/* Invest & Collaborate (owner 2026-10-08): "Preferred First Conversation" in an even grid like the application form;
   the supporting document's plain line sits between its label and the upload box */
#partner .af-ch.is-grid.pt-four{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:640px){ #partner .af-ch.is-grid.pt-four{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
#partner .af-hint.pt-doc{ display:block; margin:2px 0 10px; }