/* Mr Bite – Food Creator page (proposal 2026-10-30). Colour variables come from site.css. */
.fc { background: var(--cream); overflow: hidden; }
.fc-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: "Chalkboard SE", "Chalkboard", "Marker Felt", "Comic Sans MS", cursive; font-weight: 700; font-size: 20px; color: var(--orange); transform: rotate(-2deg); }
.fc-kicker::after { content: ''; position: absolute; }
.fc-kicker--dark { color: var(--hot); }
.fc-hand { font-family: "Chalkboard SE", "Chalkboard", "Marker Felt", "Comic Sans MS", cursive; }

/* ---------- 1. Hero ---------- */
.fc-hero { position: relative; padding: 128px 0 70px; color: var(--cream);
  background: radial-gradient(45% 45% at 50% 62%, rgba(252,108,0,0.30), transparent 70%), radial-gradient(60% 50% at 0% 0%, rgba(46,107,74,0.5), transparent 70%), linear-gradient(170deg, #123423, var(--night) 55%); }
.fc-hero-in { text-align: center; }
.fc-hero h1 { margin-top: 16px; font-size: clamp(52px, 8.4vw, 124px); line-height: 0.9; letter-spacing: -0.055em; font-weight: 800; text-transform: uppercase; }
.fc-hero h1 em { font-style: normal; color: var(--orange); }
.fc-sub { margin-top: 22px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
.fc-lead { margin: 14px auto 0; max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--on-dark); }
.fc-cta { margin-top: 30px; }

/* The stage: notes left and right, the phone in the middle, arrows drawn by creators.js */
.fc-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 70px; }
.fc-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fc-arrows path { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fc-arrows.draw path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: fc-draw 0.9s var(--ease, ease) forwards; animation-delay: var(--d, 0s); }
@keyframes fc-draw { to { stroke-dashoffset: 0; } }
.fc-notes { list-style: none; position: relative; }
.fc-notes--l, .fc-notes--r { height: 100%; }
.fc-note { position: absolute; max-width: 250px; }
.fc-notes--l .fc-note { right: 18px; text-align: right; }
.fc-notes--r .fc-note { left: 18px; }
.fc-note b { display: block; font-family: "Chalkboard SE", "Chalkboard", "Marker Felt", "Comic Sans MS", cursive; font-weight: 700; font-size: 24px; line-height: 1.1; color: var(--cream); transform: rotate(-1.5deg); }
.fc-note > span:not(.fc-num) { display: block; margin-top: 5px; font-size: 15px; line-height: 1.45; color: var(--on-dark); }
.fc-num { display: none; }
.fc-notes--list { display: none; }
.fc-phone-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.fc-phone-note { margin-top: 18px; max-width: 320px; text-align: center; font-size: 12.5px; color: rgba(250,244,233,0.55); }

/* ---------- The phone: today's profile screen (someone else's profile) ---------- */
.fc-phone { width: 360px; padding: 12px; border-radius: 56px; }
.fc-phone::before { display: none; }
.fc-phone .screen { border-radius: 45px; }
.ap { position: relative; background: #FAF4E9; color: #26241F; font-family: 'Manrope', -apple-system, sans-serif; overflow: hidden; padding: 0 15px 16px; }
.ap-blob { position: absolute; background: #123423; border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; }
.ap-blob--tl { width: 140px; height: 140px; left: -58px; top: -70px; transform: rotate(-20deg); }
.ap-blob--br { width: 124px; height: 124px; right: -50px; bottom: -50px; transform: rotate(15deg); }
.ap-status { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 0 22px; font-size: 13px; color: #FAF4E9; }
.ap-status b { font-weight: 800; }
.ap-sig { display: flex; gap: 2px; align-items: flex-end; }
.ap-sig i { width: 3px; background: #26241F; border-radius: 1px; } .ap-sig i:nth-child(1) { height: 4px; } .ap-sig i:nth-child(2) { height: 6px; } .ap-sig i:nth-child(3) { height: 8px; } .ap-sig i:nth-child(4) { height: 10px; }
.ap-head { position: relative; display: flex; justify-content: space-between; margin-top: 10px; }
.ap-disc { width: 28px; height: 28px; border-radius: 50%; background: rgba(120,120,128,0.2); color: #26241F; display: flex; align-items: center; justify-content: center; }
.ap-disc svg { width: 17px; height: 17px; }
.ap-hero { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 18px; }
.ap-hair { position: absolute; top: -26px; width: 40px; height: auto; }
.ap-ring { position: relative; width: 101px; height: 101px; border-radius: 50%; background: linear-gradient(135deg, #F3861D, #1E4B34); display: flex; align-items: center; justify-content: center; box-shadow: 0 7px 15px rgba(243,134,29,0.28); }
.ap-disc2 { width: 88px; height: 88px; border-radius: 50%; background: #FAF4E9; display: flex; align-items: center; justify-content: center; }
.ap-disc2 img { width: 81px; height: 81px; border-radius: 50%; object-fit: cover; }
.ap-name { margin-top: 8px; font-family: "Chalkboard SE", "Chalkboard", "Marker Felt", "Comic Sans MS", cursive; font-weight: 700; font-size: 15px; }
.ap-bio { margin-top: 3px; font-size: 10.8px; font-weight: 600; line-height: 1.35; text-align: center; }
.ap-activity { position: relative; display: flex; align-items: center; margin: 8px auto 0; width: fit-content; padding: 4px 9px; border-radius: 13px; background: rgba(255,255,255,0.6); border: 1px solid rgba(30,75,52,0.14); }
.ap-activity span { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 3px; width: 92px; font-size: 9px; font-weight: 600; color: #1E4B34; }
.ap-activity span svg { width: 10px; height: 10px; }
.ap-activity b { width: 100%; text-align: center; font-size: 12px; font-weight: 800; color: #26241F; }
.ap-activity i { width: 1px; align-self: stretch; margin: 0 9px; background: rgba(30,75,52,0.15); }
.ap-taste { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.ap-taste-h { position: relative; display: inline-block; font-family: "Chalkboard SE", "Chalkboard", "Marker Felt", "Comic Sans MS", cursive; font-weight: 700; font-size: 16px; letter-spacing: 0.4px; color: #1E4B34; padding-bottom: 6px; }
.ap-taste-h img { position: absolute; left: -4%; bottom: 0; width: 108%; height: 6px; object-fit: fill; }
.ap-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 4px; }
.ap-chips span { margin: 3px; padding: 4px 9px; border-radius: 999px; background: #F6EDDB; font-size: 10.2px; font-weight: 800; }
.ap-stats { position: relative; display: flex; margin-top: 10px; }
.ap-stats span { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 9px; font-weight: 800; letter-spacing: 0.25px; color: #8B8272; }
.ap-stats b { font-size: 13px; font-weight: 800; color: #26241F; letter-spacing: 0; margin-bottom: 1px; }
.ap-follow { position: relative; display: flex; justify-content: center; margin: 8px 0 12px; }
.ap-follow span { width: 118px; padding: 7px 0; border-radius: 11px; background: #1E4B34; color: #fff; text-align: center; font-size: 11.5px; font-weight: 700; }
.ap-sec { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 4px 0 7px; }
.ap-sh { display: flex; align-items: center; gap: 6px; font-family: "Chalkboard SE", "Chalkboard", "Marker Felt", "Comic Sans MS", cursive; font-weight: 700; font-size: 16px; color: #1E4B34; }
.ap-sh > svg { width: 16px; height: 16px; color: #F3861D; }
.ap-wtt { display: inline-flex; width: 16px; height: 16px; color: #F3861D; }
.ap-wtt svg { width: 16px; height: 16px; }
.ap-all { font-size: 10px; font-weight: 700; color: #1E4B34; }
.ap-grid { display: flex; gap: 5px; margin-bottom: 9px; }
.ap-tile { width: 23.5%; display: flex; flex-direction: column; align-items: center; }
.ap-reel { position: relative; width: 100%; aspect-ratio: 521 / 508; }
.ap-reel img { position: absolute; left: 12.28%; top: 1.97%; width: 75.44%; height: 93.31%; object-fit: cover; }
.ap-reel::after { content: ''; position: absolute; inset: 0; background: url('/assets/img/film-frame-square.webp') center / 100% 100% no-repeat; }
.ap-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(0,0,0,0.42); color: #fff; display: flex; align-items: center; justify-content: center; }
.ap-play svg { width: 11px; height: 11px; margin-left: 1px; }
.ap-tname { margin-top: 4px; width: 100%; font-size: 9px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-row { display: flex; gap: 5px; margin-bottom: 9px; overflow: hidden; }
.ap-cell { flex: none; width: 67px; display: flex; flex-direction: column; align-items: center; }
.ap-emoji { width: 54px; height: 54px; border-radius: 11px; background: #F6EDDB; border: 1.5px solid rgba(30,75,52,0.16); display: flex; align-items: center; justify-content: center; font-size: 25px; }

.ap [data-n] { position: relative; }

/* ---------- Sections ---------- */
.fc-sec { padding: clamp(80px, 9vw, 130px) 0; }
.fc-h2 { margin-top: 12px; font-size: clamp(40px, 5.6vw, 80px); line-height: 0.95; letter-spacing: -0.05em; font-weight: 800; text-transform: uppercase; color: var(--cream); }
.fc-h2 em { font-style: normal; color: var(--orange); }
.fc-h2--dark { color: var(--night); }
.fc-h2--dark em { color: var(--hot); }
.fc-p { margin-top: 18px; max-width: 620px; font-size: 18px; line-height: 1.6; color: var(--on-dark); }
.fc-p--dark { color: #5a564c; }

/* 2. Social */
.fc-social { background: linear-gradient(170deg, var(--night), #0a1d14); color: var(--cream); }
.fc-social .fc-h2 { font-size: clamp(36px, 4.6vw, 64px); }
.fc-socs { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.fc-soc { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 14px; border-radius: 26px; background: rgba(250,244,233,0.05); box-shadow: inset 0 0 0 1px rgba(250,244,233,0.1); }
.fc-soc-ico { width: 74px; height: 74px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #fff; }
.fc-soc-ico svg { width: 42px; height: 42px; }
.fc-soc--ig .fc-soc-ico { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.fc-soc--tt .fc-soc-ico { background: #010101; box-shadow: -3px -2px 0 #25F4EE inset, 3px 2px 0 #FE2C55 inset; }
.fc-soc--yt .fc-soc-ico { background: #FF0000; }
.fc-soc--web .fc-soc-ico { background: var(--green-light); }
.fc-soc b { font-size: 16px; font-weight: 800; }
.fc-concept { margin-top: 28px; max-width: 620px; padding: 18px 20px; border-radius: 20px; background: rgba(250,244,233,0.06); box-shadow: inset 0 0 0 1px rgba(243,134,29,0.4); }
.fc-concept b { display: block; margin-top: 8px; font-size: 17px; color: var(--cream); }
.fc-concept > span:last-child { display: block; margin-top: 3px; font-size: 14.5px; color: var(--on-dark); }
.fc-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(252,108,0,0.2); color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: 0.9px; text-transform: uppercase; }
.fc-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }

/* 3. Signature Bites */
.fc-bites { background: var(--cream); }
.fc-bites .wrap { text-align: center; }
.fc-bites .fc-p { margin-left: auto; margin-right: auto; }
.fc-bites-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 50px; }
.fc-bite { margin: 0; display: flex; flex-direction: column; align-items: center; }
.fc-bite:nth-child(odd) { transform: translateY(26px) rotate(-1.5deg); }
.fc-bite:nth-child(even) { transform: rotate(1.5deg); }
.fc-bite .phone { width: 100%; max-width: 230px; padding: 8px; border-radius: 40px; box-shadow: 0 40px 60px -34px rgba(12,34,23,0.6), 0 0 0 1.5px #3a3a3a inset; }
.fc-bite .phone::before { display: none; }
.fc-bite .screen { border-radius: 33px; }
.fc-bite figcaption { margin-top: 16px; }
.fc-bite figcaption b { display: block; font-size: 17px; color: var(--night); }
.fc-bite figcaption span { font-size: 13px; font-weight: 800; letter-spacing: 1.2px; color: var(--hot); }
.fc-honest { margin-top: 60px; font-family: "Chalkboard SE", "Chalkboard", "Marker Felt", "Comic Sans MS", cursive; font-weight: 700; font-size: 22px; color: var(--green); }

/* 4. My Club */
.fc-club { background: radial-gradient(50% 60% at 80% 50%, rgba(252,108,0,0.22), transparent 70%), linear-gradient(160deg, #1d4a35, var(--night)); color: var(--cream); }
.fc-club-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.fc-club-list { list-style: none; margin-top: 24px; display: grid; gap: 10px; }
.fc-club-list li { position: relative; padding-left: 26px; font-size: 17px; font-weight: 700; }
.fc-club-list li::before { content: ''; position: absolute; left: 0; top: 0.35em; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(243,134,29,0.2); }
.fc-club-art { position: relative; height: 560px; }
.fc-club-art .phone { position: absolute; left: 50%; top: 10px; width: 250px; padding: 9px; border-radius: 44px; transform: translateX(-50%) rotate(2deg); z-index: 2; }
.fc-club-art .phone::before { display: none; }
.fc-club-art .screen { border-radius: 36px; }
.fc-food { position: absolute; width: 190px; aspect-ratio: 521 / 508; box-shadow: 0 26px 40px -18px rgba(0,0,0,0.8); }
.fc-food img { position: absolute; left: 12.28%; top: 1.97%; width: 75.44%; height: 93.31%; object-fit: cover; }
.fc-food::after { content: ''; position: absolute; inset: 0; background: url('/assets/img/film-frame-square.webp') center / 100% 100% no-repeat; }
.fc-food--a { left: 0; top: 60px; transform: rotate(-8deg); }
.fc-food--b { right: 0; bottom: 40px; transform: rotate(7deg); z-index: 3; }
.fc-food--b img { filter: brightness(1.28) contrast(1.04) saturate(1.06); }

/* 5. Closing */
.fc-end { padding: clamp(80px, 9vw, 130px) 0; text-align: center; color: var(--cream); background: radial-gradient(55% 70% at 50% 0%, rgba(252,108,0,0.25), transparent 70%), var(--night); }
.fc-end .fc-p { margin-left: auto; margin-right: auto; }
.fc-end .btn { margin-top: 28px; }
.fc-brand-note { margin-top: 14px; font-size: 12.5px; color: rgba(250,244,233,0.5); }
.fc-mail { margin-top: 20px; font-size: 15px; color: var(--on-dark); }
.fc-mail a { color: var(--cream); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsive: below 1100 px (the numbered list is the no-JavaScript fallback) ---------- */
@media (max-width: 1099px) {
  .fc-stage { grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: center; }
  .fc-notes--l, .fc-notes--r, .fc-arrows { display: none; }
  .fc-notes--list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; margin-top: 34px; max-width: 720px; width: 100%; }
  .fc-notes--list .fc-note { position: static; max-width: none; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; text-align: left; }
  .fc-notes--list .fc-num { display: flex; grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--hot); color: #fff; font-weight: 800; font-size: 14px; align-items: center; justify-content: center; }
  .fc-notes--list .fc-note b { font-size: 21px; }
  .fc-socs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fc-bites-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .fc-club-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .fc-hero { padding-top: 110px; }
  .fc-lead, .fc-p { font-size: 16.5px; }
  .fc-phone { width: 318px; padding: 10px; border-radius: 50px; }
  .fc-phone .screen { border-radius: 40px; }
  .fc-notes--list { grid-template-columns: minmax(0, 1fr); }
  .fc-socs { gap: 12px; }
  .fc-soc { padding: 20px 10px; }
  .fc-soc-ico { width: 60px; height: 60px; border-radius: 18px; } .fc-soc-ico svg { width: 34px; height: 34px; }
  .fc-bites-row { gap: 14px; row-gap: 30px; }
  .fc-bite .phone { padding: 6px; border-radius: 30px; } .fc-bite .screen { border-radius: 25px; }
  .fc-club-art { height: 470px; }
  .fc-club-art .phone { width: 210px; }
  .fc-food { width: 140px; }
}
@media (max-width: 360px) {
  .fc-phone { width: 292px; }
  .ap { padding: 0 11px 14px; }
  .ap-cell { width: 60px; } .ap-emoji { width: 48px; height: 48px; font-size: 22px; }
  .fc-hero h1 { font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-arrows.draw path { animation: none; stroke-dashoffset: 0; }
}
/* Below 1100 px: a smaller phone (scale --s) with the notes and arrows beside it.
   .arrows is set by creators.js; without it the notes stay a numbered list. */
@media (max-width: 1099px) {
  .fc-stage.arrows { --s: 0.72; grid-template-columns: minmax(0, 1fr) calc(360px * var(--s)) minmax(0, 1fr); gap: 18px; justify-items: stretch; }
  .fc-stage.arrows .fc-notes--l, .fc-stage.arrows .fc-notes--r, .fc-stage.arrows .fc-arrows { display: block; }
  .fc-stage.arrows .fc-notes--list { display: none; }
  .fc-stage.arrows .fc-phone-wrap { align-items: flex-start; }
  .fc-stage.arrows .fc-phone { width: 360px; padding: 12px; border-radius: 56px; transform: scale(var(--s)); transform-origin: top left; }
  .fc-stage.arrows .fc-phone .screen { border-radius: 45px; }
  .fc-stage.arrows .ap { padding: 0 15px 16px; }
  .fc-stage.arrows .ap-cell { width: 67px; } .fc-stage.arrows .ap-emoji { width: 54px; height: 54px; font-size: 25px; }
  .fc-stage.arrows .fc-phone-note { max-width: none; font-size: 11px; }
  .fc-stage.arrows .fc-notes--l .fc-note { left: 0; right: 6px; max-width: none; }
  .fc-stage.arrows .fc-notes--r .fc-note { left: 6px; right: 0; max-width: none; }
  .fc-stage.arrows .fc-note b { font-size: 19px; }
  .fc-stage.arrows .fc-note > span:not(.fc-num) { margin-top: 3px; font-size: 13px; line-height: 1.35; }
}
@media (max-width: 600px) {
  .fc-stage.arrows { --s: 0.5; gap: 8px; margin-left: -8px; margin-right: -8px; margin-top: 44px; }
  .fc-stage.arrows .fc-phone-note { margin-top: 12px; font-size: 10px; line-height: 1.35; text-align: center; }
  .fc-stage.arrows .fc-notes--l .fc-note { right: 2px; }
  .fc-stage.arrows .fc-notes--r .fc-note { left: 2px; }
  .fc-stage.arrows .fc-note b { font-size: 13.5px; line-height: 1.12; transform: none; }
  .fc-stage.arrows .fc-note > span:not(.fc-num) { margin-top: 2px; font-size: 10.5px; line-height: 1.3; }
  .fc-stage.arrows .fc-note { overflow-wrap: break-word; }
  .fc-stage.arrows .fc-arrows path { stroke-width: 1.7; }
}
@media (max-width: 374px) {
  .fc-stage.arrows { --s: 0.44; gap: 6px; }
  .fc-stage.arrows .fc-note b { font-size: 12.5px; }
  .fc-stage.arrows .fc-note > span:not(.fc-num) { font-size: 9.8px; }
}

/* ---------- 5. The future of Food Creators (concept) ---------- */
.fc-future { position: relative; color: var(--cream); background: radial-gradient(45% 55% at 75% 45%, rgba(252,108,0,0.28), transparent 70%), radial-gradient(40% 50% at 10% 90%, rgba(46,107,74,0.45), transparent 70%), #07150e; }
.fc-future::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(250,244,233,0.07) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.fc-future-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 60px; align-items: center; }
.fc-tag--big { font-size: 12.5px; padding: 6px 13px; box-shadow: inset 0 0 0 1px rgba(243,134,29,0.55); }
.fc-future .fc-h2 { margin-top: 18px; }
.fc-next { margin-top: 22px; }
.fc-next-k { font-size: 15px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--orange); }
.fc-next-h { margin-top: 10px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--cream); }
.fc-next .fc-p { margin-top: 8px; }
.fc-next-k--soft { margin-top: 16px; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--cream); }
.fc-future-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; max-width: 620px; }
.fc-future-list li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 18px; border: 1.5px dashed rgba(243,134,29,0.5); background: rgba(250,244,233,0.04); }
.fl-ico { flex: none; width: 36px; height: 36px; border-radius: 11px; background: rgba(243,134,29,0.16); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.fl-ico svg { width: 19px; height: 19px; }
.fc-future-list b { display: block; font-size: 16px; font-weight: 800; color: var(--cream); }
.fc-future-list span:not(.fl-ico) { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--on-dark); }
.fc-future-mail { text-align: left; margin-top: 24px; }
.fc-future-art { display: flex; flex-direction: column; align-items: center; }
.fc-future-art .fc-phone-note { color: rgba(250,244,233,0.6); }

/* The concept phone: today's profile design + outlined future parts */
.ft-phone { position: relative; transform: rotate(2deg); box-shadow: 0 60px 110px -40px rgba(252,108,0,0.45), 0 50px 100px -30px rgba(0,0,0,0.8); }
.ft-ribbon { position: absolute; z-index: 6; top: 26px; right: -14px; padding: 6px 14px; border-radius: 8px; background: var(--hot); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; transform: rotate(8deg); box-shadow: 0 10px 20px -8px rgba(0,0,0,0.6); }
.ft { padding-top: 0; }
.fut { position: relative; border: 1.5px dashed #F3861D; border-radius: 12px; }
.fut-tag { position: absolute; z-index: 4; top: -9px; left: 10px; padding: 1px 7px; border-radius: 999px; background: #F3861D; color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: 0.4px; white-space: nowrap; }
.ft-cover { position: absolute; left: 0; right: 0; top: 0; height: 132px; }
.fut--cover { position: absolute; inset: 6px 6px 0; border-radius: 30px 30px 14px 14px; overflow: hidden; }
.fut--cover img { width: 100%; height: 100%; object-fit: cover; }
.fut--cover .fut-tag { top: auto; bottom: 8px; left: 50%; transform: translateX(-50%); }
.ft-status, .ft-head { position: relative; z-index: 2; }
.ft-status { color: #fff; } .ft-status .ap-sig i { background: #fff; }
.ft-disc { background: rgba(250,244,233,0.85); }
.fut--share { border-radius: 50%; padding: 2px; }
.fut--share .fut-tag { left: auto; right: -6px; top: 30px; }
.ft-hero { position: relative; z-index: 2; margin-top: 46px; }
.ft-hero .ap-ring { box-shadow: 0 0 0 3px #FAF4E9, 0 7px 15px rgba(243,134,29,0.28); }
.fut--chans { margin: 10px 0 2px; padding: 12px 6px 7px; }
.ft-chans { display: flex; justify-content: space-around; }
.ft-ch { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 8.5px; font-weight: 800; color: #26241F; }
.ft-ch-i { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; }
.ft-ch-i svg { width: 17px; height: 17px; }
.ft-ch--ig .ft-ch-i { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.ft-ch--tt .ft-ch-i { background: #010101; }
.ft-ch--yt .ft-ch-i { background: #FF0000; }
.ft-ch--web .ft-ch-i { background: #2e6b4a; }
.ft-ch--mail .ft-ch-i { background: var(--hot); }

/* Food Creator V2 (concept): a taller phone, My Food World, My Food Journey, Let's collab */
.fc-phone.ft-phone { width: 390px; }
.ft-phone .ft-ribbon { top: -13px; right: 50%; transform: translateX(50%); padding: 5px 12px; border-radius: 999px; font-size: 9.5px; letter-spacing: 1.2px; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(252,108,0,0.8); }
.ft-chans { justify-content: space-between; padding: 0 4px; }
.ft-ch-i { width: 31px; height: 31px; border-radius: 10px; box-shadow: 0 4px 8px -5px rgba(0,0,0,0.5); }
.fut--world { margin-top: 12px; padding: 14px 10px 10px; background: linear-gradient(180deg, #FFF8EE, #F6EDDB); }
.ft-wh { display: flex; justify-content: space-between; align-items: center; }
.ft-wh b { font-family: "Chalkboard SE", "Chalkboard", "Marker Felt", "Comic Sans MS", cursive; font-weight: 700; font-size: 15.5px; color: #1E4B34; letter-spacing: 0.2px; }
.ft-globe { font-family: -apple-system, 'Apple Color Emoji', sans-serif; font-size: 13px; }
.ft-themes { display: flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(30,75,52,0.12); }
.ft-themes svg { width: 11px; height: 11px; color: #8B8272; margin-right: 1px; }
.ft-themes i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.ft-themes i:nth-child(2) { box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--c); }
.ft-quote { margin-top: 5px; font-size: 10.3px; line-height: 1.42; font-weight: 600; font-style: italic; color: #3d3a33; }
.ft-tastes { display: flex; gap: 5px; margin-top: 6px; }
.ft-tastes span { width: 23px; height: 23px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; font-size: 12px; box-shadow: inset 0 0 0 1px rgba(30,75,52,0.12); }
.ft-journey { margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(30,75,52,0.2); }
.ft-jtop { display: flex; justify-content: space-between; align-items: center; }
.ft-jtop b { font-size: 9px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #F3861D; }
.ft-jpics { display: flex; }
.ft-jpics img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #FAF4E9; }
.ft-jpics img + img { margin-left: -6px; }
.ft-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
.ft-stats span { display: flex; flex-direction: column; align-items: center; padding: 5px 2px 4px; border-radius: 10px; background: #fff; font-size: 8px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: #8B8272; box-shadow: inset 0 0 0 1px rgba(30,75,52,0.08); }
.ft-stats svg { width: 11px; height: 11px; color: #F3861D; }
.ft-stats b { font-size: 15px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: #26241F; text-transform: none; }
.fut--collab { margin-top: 12px; padding: 4px; border-color: #F3861D; }
.ft-collab { padding: 12px 12px 12px; border-radius: 9px; background: radial-gradient(70% 90% at 100% 0%, rgba(252,108,0,0.28), transparent 70%), linear-gradient(160deg, #1E4B34, #0f2c1e); color: #FAF4E9; text-align: center; }
.ft-collab b { display: block; font-size: 14px; font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; text-transform: uppercase; }
.ft-collab b em { font-style: normal; color: #F3861D; }
.ft-collab > span:not(.ft-cbtn) { display: block; margin-top: 4px; font-size: 9.5px; font-weight: 600; color: rgba(250,244,233,0.8); }
.ft-cbtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 18px; border-radius: 999px; background: linear-gradient(135deg, #FF8A1F, #FC6C00); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; box-shadow: 0 10px 20px -10px rgba(252,108,0,0.9); }
.ft-cbtn svg { width: 13px; height: 13px; }
@media (max-width: 600px) {
  .fc-phone.ft-phone { transform: scale(0.84); transform-origin: top center; margin-bottom: -134px; }
}
@media (max-width: 374px) {
  .fc-phone.ft-phone { transform: scale(0.8); margin-bottom: -167px; }
}
.ft .ap-follow { margin: 10px 0 14px; }
.fut--picks { padding: 13px 8px 6px; }
.ft-sh { display: flex; align-items: center; gap: 5px; font-family: "Chalkboard SE", "Chalkboard", "Marker Felt", "Comic Sans MS", cursive; font-weight: 700; font-size: 15px; color: #1E4B34; margin-bottom: 6px; }
.ft-sh svg { width: 14px; height: 14px; color: #F3861D; }
.ft-grid { display: flex; gap: 6px; }
.ft-tile { position: relative; width: 33%; display: flex; flex-direction: column; align-items: center; }
.ft-score { position: absolute; z-index: 2; top: 4px; left: 14%; padding: 1px 5px; border-radius: 6px; background: #FAF4E9; color: #26241F; font-size: 9px; font-weight: 800; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }

@media (max-width: 1099px) {
  .fc-future-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fc-future-art { order: 2; }
}
@media (max-width: 600px) {
  .fc-future-list { grid-template-columns: minmax(0, 1fr); }
  .ft-phone { transform: none; }
  .ft-ribbon { right: -6px; }
}