/* Funn — internships page (/internships). Same fonts and brand tokens as the launch site. */
/* Fonts are served from here, not Google Fonts: no render-blocking third-party CSS, no visitor IPs sent to Google.
   Latin and latin-ext only (latin-ext carries ₹). Both fonts are under the SIL Open Font License 1.1. */
@font-face { font-family: 'Bagel Fat One'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bagelfatone-latin-v2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bagel Fat One'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bagelfatone-latin-ext-v2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-latin-v9.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-latin-ext-v9.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Internships page (/internships): the most fun page on the site. Funn tokens from the app; follows the device's light or dark setting.
   Buttons, ticket cards, pills, sparkles and the reveal come from ui.css. */
:root {
  --gum: #ff3d8b; --sun: #ffd60a; --volt: #2d5bff; --mint: #00d6a3; --tang: #ff7a1a; --blush: #ff9ec4;
  --ink: #1a1033; --stage: #0d0720; --card: #1c1238; --paper: #ffffff; --cream: #fff8e6;
  --bg: var(--cream); --fg: var(--ink); --muted: rgba(26, 16, 51, 0.76); --surface: #ffffff; --edge: var(--ink);
  --band-ink: var(--ink); --band-sun: var(--sun); --band-sun-fg: var(--ink);
  --display: 'Bagel Fat One', 'Figtree', system-ui, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 16px;
  --focus: var(--volt);
  color-scheme: light dark;
}
@media (min-width: 700px) { :root { --gutter: clamp(24px, 4vw, 56px); } }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--stage); --fg: #f5f3f8; --muted: rgba(245, 243, 248, 0.78); --surface: var(--card); --edge: #f5f3f8;
    --band-ink: #1c1238; --band-sun: #2b1d4f; --band-sun-fg: #f5f3f8; --focus: var(--sun);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-weight: 500; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--gum); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; line-height: 1; margin: 0; }
section[id], article[id], #faq { scroll-margin-top: 90px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }
.wordmark { font-family: var(--display); font-size: 26px; letter-spacing: -0.02em; line-height: 1; }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 30; padding: max(10px, env(safe-area-inset-top)) var(--gutter) 0; }
.bar__in { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; border-radius: 999px; background: var(--sun); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); color: var(--ink); --focus: var(--volt); }
.brand { display: flex; align-items: center; gap: 8px; margin-right: auto; min-height: 44px; text-decoration: none; color: var(--ink); border-radius: 999px; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.bar__links { display: none; gap: 2px; margin-right: 6px; }
.bar__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 15px; transition: background 0.2s; }
.bar__links a:hover { background: rgba(26, 16, 51, 0.1); }
@media (min-width: 760px) { .bar__links { display: flex; } .bar[data-menu] .menu-btn { display: none; } }
@media (max-width: 759px) { .bar[data-menu] .menu-btn { display: inline-flex; } }
@media (max-width: 380px) { .bar__in .wordmark { font-size: 22px; } }

main { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- hero: colour blobs, floating tickets and role stickers ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 24px; padding: 48px 0 40px; min-height: min(760px, calc(100svh - 70px)); isolation: isolate; }
/* The art box reaches the screen edges on phones (it spans the page gutter) and clips its own blobs, so nothing pokes out sideways. */
/* The hero lets its art box out to the screen edge (the art clips itself, never wider than the screen). */
.hero { overflow-x: visible; }
.hero__art { position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.9; }
.b1 { width: 320px; height: 320px; right: 3%; top: 2%; background: var(--sun); }
.b2 { width: 240px; height: 240px; right: 170px; top: 230px; background: var(--blush); opacity: 0.75; }
.b3 { width: 190px; height: 190px; right: 5%; bottom: 3%; background: var(--mint); opacity: 0.7; }
@media (prefers-color-scheme: dark) { .blob { opacity: 0.35; } }
.hero__ticket { position: absolute; height: auto; filter: drop-shadow(0 10px 12px rgba(26, 16, 51, 0.22)); }
.t1 { width: 120px; right: 34%; top: 8%; --r0: -14deg; --r1: -6deg; --t: 12s; }
.t2 { width: 76px; right: 4%; bottom: 14%; --r0: 12deg; --r1: 20deg; --t: 10s; --delay: -3s; }
.hero__stickers { display: none; position: absolute; right: calc(var(--gutter) + 8px); top: 14%; width: 40%; height: 74%; }
.stk { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 3px solid var(--ink); border-radius: 16px; background: var(--c); color: var(--ink); font-weight: 900; font-size: 15px; white-space: nowrap; box-shadow: 0 5px 0 var(--ink); }
.stk--sun { --c: var(--sun); left: 2%; top: 4%; --r0: -6deg; --r1: -2deg; --t: 11s; }
.stk--mint { --c: var(--mint); right: 0; top: 0; --r0: 5deg; --r1: 9deg; --t: 13s; --delay: -2s; }
.stk--gum { --c: var(--gum); left: 22%; top: 24%; --r0: -3deg; --r1: 2deg; --t: 12s; --delay: -5s; }
.stk--volt { --c: var(--volt); color: #fff; left: 0; top: 46%; --r0: 4deg; --r1: 8deg; --t: 14s; --delay: -1s; }
.stk--tang { --c: var(--tang); right: 0; top: 56%; --r0: -7deg; --r1: -3deg; --t: 10s; --delay: -4s; }
.stk--blush { --c: var(--blush); left: 16%; top: 80%; --r0: 3deg; --r1: -2deg; --t: 12s; --delay: -6s; }
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .hero h1 { font-size: clamp(60px, 6.6vw, 96px); }
  .hero__stickers { display: block; }
}
@media (max-width: 999px) {
  .b1 { width: 220px; height: 220px; right: -90px; top: -30px; }
  .b2 { width: 150px; height: 150px; right: -50px; top: 300px; }
  .b3 { display: none; }
  .t1 { width: 74px; right: 6px; top: 16px; }
  .t2 { display: none; }
}
.eyebrow { margin: 0 0 18px; }
.live { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(0, 214, 163, 0.35); animation: live 2.4s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 7px rgba(0, 214, 163, 0); } }
.hero h1 { font-size: clamp(50px, 9vw, 112px); line-height: 1.02; }
.hero h1 .hl-mark--gum { rotate: 1.5deg; }
.hero__line { max-width: 34ch; margin: 22px 0 0; font-size: clamp(19px, 2vw, 24px); font-weight: 700; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 28px; }
.tag { margin: 30px 0 0; }
.tag span { display: inline-block; padding: 6px 14px 8px; border-radius: 14px; border: 3px solid var(--ink); background: #fff; color: var(--gum); font-family: var(--display); font-size: clamp(22px, 3vw, 32px); line-height: 1; rotate: -2deg; box-shadow: 0 4px 0 var(--ink); }
.tag span { color: #c40f57; }

/* ---------- sections ---------- */
.sec { padding: 56px 0 16px; }
.sec h2, .two h2 { font-size: clamp(36px, 5.4vw, 64px); margin-bottom: 16px; }
.sec__lede { margin: 0 0 26px; color: var(--muted); font-weight: 700; max-width: 52ch; }
.band { padding-top: 64px; padding-bottom: 64px; margin: 48px 0 8px; }
.band--ink { --band: var(--band-ink); color: #fff; }
.band--sun { --band: var(--band-sun); color: var(--band-sun-fg); }
.band--sun .sec__lede { color: var(--band-sun-fg); }

.what, .perks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 640px) { .what, .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .what, .perks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.w, .perk { position: relative; display: grid; align-content: start; gap: 6px; padding: 20px; border-radius: 24px; border: 3px solid var(--ink); color: var(--ink); box-shadow: 0 6px 0 var(--ink); transition: rotate 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.w:nth-child(1), .perk:nth-child(1) { rotate: -1.6deg; } .w:nth-child(2), .perk:nth-child(2) { rotate: 1.2deg; }
.w:nth-child(3), .perk:nth-child(3) { rotate: -0.8deg; } .w:nth-child(4), .perk:nth-child(4) { rotate: 1.6deg; }
.w:hover, .perk:hover { rotate: 0deg; }
.w-sun, .p-sun { background: var(--sun); } .w-blush, .p-blush { background: var(--blush); } .w-mint, .p-mint { background: var(--mint); } .w-paper { background: #fff; } .p-gum { background: var(--gum); }
.w__i { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.w b, .perk b { font-weight: 900; font-size: 18px; line-height: 1.25; }
.w span:not(.w__i), .perk span { font-size: 15px; font-weight: 600; color: rgba(26, 16, 51, 0.86); }
.band--ink .perk { box-shadow: 0 6px 0 #fff; }

/* ---------- roles: ticket cards (ui.css .tk) ---------- */
.roles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 20px; }
@media (min-width: 700px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tk.role { --stub: 100px; --tk-body: var(--surface); --tk-fg: var(--fg); --tk-muted: var(--muted); }
.role .tk__apply { font-size: 16px; min-height: 58px; }
.note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 30px 0 0; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  /* Neon tickets: the outline and the shadow take the role's own colour. */
  .tk.role { --tk-edge: var(--role); }
  .role .tk__head { border-bottom-color: var(--role); }
  .role .tk__stub { border-top-color: var(--role); }
  .role .tk__emoji { border-color: var(--ink); }
  .tk.role .tk__apply { --btn-shadow: #fff; }
}

/* ---------- first week: a playful timeline ---------- */
.days { position: relative; list-style: none; margin: 8px 0 0; padding: 0 0 0 64px; display: grid; gap: 18px; }
.days::before { content: ''; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 0; border-left: 4px dashed currentColor; opacity: 0.55; }
.day { position: relative; padding: 16px 18px; border-radius: 20px; background: var(--surface); color: var(--fg); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); font-weight: 700; }
.day p { margin: 0; }
.day__dot { position: absolute; left: -64px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--ink); background: var(--gum); color: var(--ink); font-weight: 900; font-size: 13px; letter-spacing: 0.06em; box-shadow: 0 4px 0 var(--ink); }
.day:nth-child(2) .day__dot { background: #fff; } .day:nth-child(3) .day__dot { background: var(--mint); } .day:nth-child(4) .day__dot { background: var(--volt); color: #fff; } .day:nth-child(5) .day__dot { background: var(--tang); }
.day:nth-child(odd) { rotate: -0.8deg; } .day:nth-child(even) { rotate: 0.8deg; }
.day:last-child { background: var(--ink); color: #fff; box-shadow: 0 5px 0 var(--gum); }
@media (min-width: 900px) {
  .days { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 84px 0 0; gap: 16px; }
  .days::before { left: 6%; right: 6%; top: 28px; bottom: auto; width: auto; height: 0; border-left: 0; border-top: 4px dashed currentColor; }
  .day { min-height: 150px; }
  .day__dot { left: 50%; top: -84px; translate: -50% 0; }
  .day::after { content: ''; position: absolute; left: 50%; top: -23px; width: 3px; height: 20px; translate: -50% 0; background: currentColor; opacity: 0.6; }
  .band--sun .day::after { background: var(--band-sun-fg); }
}
@media (prefers-color-scheme: dark) { .day { border-color: #f5f3f8; box-shadow: 0 5px 0 #f5f3f8; } .day:last-child { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--gum); } }

/* ---------- who / quick answers ---------- */
.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 860px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 40px; font-weight: 800; font-size: 18px; }
.ticks li::before { content: '✓'; position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); background: var(--mint); color: var(--ink); font-size: 14px; font-weight: 900; }
.chips__h { margin: 32px 0 14px; font-size: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.faq { margin: 0; display: grid; gap: 12px; }
.qa { padding: 14px 18px; border-radius: 18px; border: 3px solid var(--edge); background: var(--surface); }
.qa dt { font-weight: 900; }
.qa dd { margin: 2px 0 0; color: var(--muted); font-weight: 600; overflow-wrap: anywhere; }

/* ---------- apply ---------- */
.apply { position: relative; margin: 64px 0 24px; padding: 30px 20px; border-radius: 32px; background: var(--ink); color: #fff; border: 3px solid var(--ink); box-shadow: 0 10px 0 var(--gum); }
@media (min-width: 700px) { .apply { padding: 48px; } }
@media (prefers-color-scheme: dark) { .apply { background: var(--card); border-color: #f5f3f8; } }
.apply h2 { font-size: clamp(38px, 6vw, 68px); max-width: 14ch; }
.steps { list-style: none; margin: 24px 0 30px; padding: 0; display: grid; gap: 12px; }
.steps li { display: flex; gap: 12px; align-items: center; font-weight: 800; }
.steps i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; background: var(--gum); color: var(--ink); font-style: normal; font-weight: 900; }
.steps li:nth-child(2) i { background: var(--sun); } .steps li:nth-child(3) i { background: var(--mint); }
.apply__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; }
@media (min-width: 900px) { .apply__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.apply__k { margin: 0; font-size: 12px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sun); }
.apply__mail { margin: 6px 0 0; }
.apply__mail .mail { font-family: var(--display); font-size: clamp(28px, 5vw, 50px); line-height: 1.1; color: var(--sun); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.apply__subj { margin: 12px 0 0; color: rgba(255, 255, 255, 0.82); font-weight: 600; }

/* ---------- sign-off ---------- */
.signoff { position: relative; display: grid; justify-items: center; gap: 16px; padding: 56px 0 72px; text-align: center; }
.signoff__logo { width: 96px; height: 96px; --r0: -6deg; --r1: 6deg; --fy: -8px; --fx: 0px; --t: 7s; }
.signoff__line { margin: 0; font-family: var(--display); font-size: clamp(40px, 8vw, 96px); line-height: 1.05; max-width: 12ch; }

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 28px var(--gutter) max(28px, env(safe-area-inset-bottom)); background: var(--stage); color: rgba(255, 255, 255, 0.8); }
.foot .wordmark { color: var(--sun); font-size: 32px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 10px; }

@media (prefers-reduced-motion: reduce) { .live { animation: none; } }

/* ---------- the application form (#form; internships.js posts it to Funn's API) ---------- */
.aform { position: relative; max-width: 860px; background: var(--surface); color: var(--fg); border: 3px solid var(--edge); border-radius: 28px; padding: clamp(20px, 3vw, 34px); box-shadow: 10px 10px 0 var(--gum); }
.afields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.afields .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .afields { grid-template-columns: 1fr; } .aform { box-shadow: 0 8px 0 var(--gum); } }
.afield label { display: block; font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; color: var(--muted); }
.aopt { text-transform: none; letter-spacing: 0; font-weight: 700; }
.afield input, .afield select, .afield textarea { width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--fg) 30%, transparent); background: var(--bg); color: var(--fg); font: inherit; font-weight: 700; font-size: 16px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.afield textarea { min-height: 110px; resize: vertical; }
.afield select { -webkit-appearance: none; appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 22px center, right 16px center; background-size: 6px 6px; background-repeat: no-repeat; }
.afield input:focus, .afield select:focus, .afield textarea:focus { border-color: var(--fg); box-shadow: 0 0 0 4px rgba(255, 214, 10, 0.55); }
.afield [aria-invalid='true'], .aconsent input[aria-invalid='true'] { border-color: #d0115c; outline: 2px solid #d0115c; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aconsent { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-weight: 600; font-size: 15px; }
.aconsent input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--gum); outline: 2px solid var(--muted); outline-offset: 1px; border-radius: 4px; }
.aform__err { color: #d0115c; font-weight: 800; margin: 12px 0 0; min-height: 1.5em; }
@media (prefers-color-scheme: dark) { .aform__err, .afield [aria-invalid='true'] { color: #ff6fa8; border-color: #ff6fa8; } }
.aform__foot { margin-top: 10px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.aform__foot small { color: var(--muted); font-weight: 700; }
.aform__foot small a { color: inherit; }
@media (max-width: 520px) { .aform__foot .btn { width: 100%; } }
.adone { display: none; text-align: center; padding: 18px 0; }
.adone:focus { outline: none; }
.adone img { margin: 0 auto; }
.adone h3 { margin: 14px 0 6px; font-size: clamp(32px, 6vw, 46px); }
.adone p { margin: 0 auto; max-width: 38ch; font-weight: 600; }
.aform.is-done form { display: none; }
.aform.is-done .adone { display: block; }
.anote { margin-top: 18px; font-size: 14px; color: var(--muted); }
.anote summary { cursor: pointer; font-weight: 800; min-height: 32px; }