/* V216 — exact mockup cut/layout refinement */
.community-french-tavern-page .site-header{position:relative;z-index:20}
.ft-page{position:relative;min-height:calc(100vh - 80px);background:#07182b;isolation:isolate}
.ft-page::before{content:"";position:absolute;inset:0;z-index:-3;background:
  linear-gradient(92deg,rgba(6,20,35,.08) 0%,rgba(6,20,35,.34) 28%,rgba(6,20,35,.72) 54%,rgba(6,20,35,.90) 70%,rgba(6,20,35,.96) 100%),
  url('/francais/assets/images/community/the-french-tavern-mockup-bg.webp') center top/cover no-repeat;}
.ft-page::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(circle at 17% 17%,rgba(247,201,116,.10),transparent 18%),
  radial-gradient(circle at 19% 44%,rgba(247,201,116,.06),transparent 14%),
  radial-gradient(circle at 82% 22%,rgba(247,201,116,.08),transparent 16%),
  linear-gradient(180deg,rgba(6,20,35,.03),rgba(6,20,35,.18) 44%,#07182b 96%)}
.ft-shell{max-width:1490px;margin:0 auto;padding:42px 26px 44px}
.ft-shell::before{content:"";position:absolute;left:18px;top:34px;bottom:34px;width:1px;background:linear-gradient(180deg,transparent,rgba(244,200,120,.26),transparent);opacity:.9}
.ft-shell::after{content:"";position:absolute;left:36px;top:90px;width:88px;height:88px;border-top:1px solid rgba(244,200,120,.18);border-left:1px solid rgba(244,200,120,.18);border-radius:26px 0 0 0;opacity:.7}
.ft-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.88fr);gap:56px;align-items:start;padding:20px 0 16px;min-height:520px}
.ft-hero-copy{padding-top:18px;max-width:820px}
.ft-kicker{margin-bottom:22px;padding:9px 16px;background:rgba(8,27,47,.65);backdrop-filter:blur(6px)}
.ft-title{font-size:clamp(3.4rem,5.8vw,6.35rem);line-height:.9;max-width:860px;letter-spacing:-.055em;margin:0 0 22px}
.ft-title span{margin-top:6px}
.ft-lead{max-width:760px;font-size:clamp(1.06rem,1.6vw,1.32rem);line-height:1.53;margin:0 0 32px;color:#ebe5db}
.ft-features{display:grid;gap:14px;max-width:760px}
.ft-feature{grid-template-columns:56px 1fr;align-items:start;min-height:58px;padding:6px 0}
.ft-feature-icon{width:56px;height:56px;border-radius:16px;background:linear-gradient(180deg,rgba(17,45,74,.86),rgba(7,25,43,.94));box-shadow:0 10px 30px rgba(0,0,0,.18),inset 0 0 18px rgba(255,255,255,.03)}
.ft-feature h2{font-size:1.18rem;margin-top:3px}
.ft-feature p{font-size:.94rem;max-width:590px}
.ft-discord-card{margin-top:18px;padding:12px;border-radius:30px;background:rgba(7,24,42,.78);backdrop-filter:blur(12px);box-shadow:0 30px 70px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,255,255,.03)}
.ft-card-cover{min-height:220px;border-radius:22px 22px 12px 12px;background:linear-gradient(90deg,rgba(0,50,160,.34),rgba(255,255,255,.08),rgba(226,26,46,.34)),url('/francais/assets/images/community/the-french-tavern-mockup-bg.webp') center 18%/cover no-repeat}
.ft-card-body{padding:58px 30px 24px}
.ft-server-name{font-size:2.12rem}
.ft-server-copy{font-size:1.03rem;max-width:480px}
.ft-discord-btn{min-height:66px;border-radius:18px;font-size:1.08rem}
.ft-voice-demo,.ft-channel-section,.ft-note{position:relative;z-index:1}
.ft-voice-demo{margin-top:24px;border-radius:28px;border:1px solid rgba(244,200,120,.14);background:linear-gradient(180deg,rgba(9,28,48,.78),rgba(7,22,39,.88));backdrop-filter:blur(8px);box-shadow:0 26px 60px rgba(0,0,0,.24)}
.ft-voice-demo::before{content:"";position:absolute;inset:0;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 22%,transparent);pointer-events:none}
.ft-voice-demo-head{padding:26px 28px 22px}
.ft-voice-room{padding:20px 28px 22px}
.ft-channel-section{margin-top:30px;padding-top:20px}
.ft-channel-heading{margin:0 0 20px;font-size:1rem;letter-spacing:.18em}
.ft-channel-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}
.ft-channel-card{border-radius:18px;background:linear-gradient(180deg,rgba(11,32,55,.88),rgba(7,23,40,.94));backdrop-filter:blur(4px);box-shadow:0 16px 34px rgba(0,0,0,.17)}
.ft-channel-head{padding:14px 15px}
.ft-channel-list{padding:9px 15px 14px}
.ft-note{margin:28px auto 0;max-width:980px;background:rgba(7,24,42,.62);backdrop-filter:blur(6px)}
@media (max-width: 1180px){
  .ft-hero{grid-template-columns:1fr;gap:26px;min-height:auto}
  .ft-discord-card{max-width:760px}
  .ft-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-channel-card:last-child{grid-column:1/-1}
}
@media (max-width: 780px){
  .ft-shell{padding:24px 16px 32px}
  .ft-shell::before,.ft-shell::after{display:none}
  .ft-page::before{background:
    linear-gradient(180deg,rgba(6,20,35,.30),rgba(6,20,35,.70) 44%,rgba(6,20,35,.93) 100%),
    url('/francais/assets/images/community/the-french-tavern-mockup-bg.webp') 24% top/cover no-repeat}
  .ft-title{font-size:clamp(2.9rem,13vw,4.7rem)}
  .ft-voice-demo-head,.ft-voice-room{padding-left:16px;padding-right:16px}
  .ft-channel-grid{grid-template-columns:1fr}
}