/* ============================================================
   Creator Workflow Lab — full-width, content centered at 1440
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* keep target sections clear of the top edge when jumped to */
#howto,#schedule,#rewards,#faq{scroll-margin-top:24px}
html,body{background:#0f1113;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:'Inter',sans-serif;color:#fff}
a{text-decoration:none;color:inherit}
img{display:block}

.page{width:100%;overflow-x:hidden;position:relative;background:#0f1113}

/* every section spans the full viewport; .wrap centers the 1440 content stage */
.sec{width:100%;position:relative}
.wrap{width:1440px;max-width:1440px;margin:0 auto;position:relative}

/* shared metallic section title */
.sec-title,.faq-title{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:48px;line-height:1;
  letter-spacing:-1.2px;text-transform:uppercase;text-align:center;
  background:linear-gradient(180deg,#dbe7f2 0%,#7f868c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}

/* ===================== HEADER ===================== */
.header{height:69px;z-index:50}
/* header spans the full screen width: logo 16px from left, CTA 16px from right, nav centered */
.header .wrap{width:100%;max-width:none;height:69px;display:flex;align-items:center;padding:0 16px}
.hd-logo img{width:36px;height:36px}
.hd-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:28px}
.hd-nav a{font-size:14px;font-weight:500;letter-spacing:.1px;color:#a8a8a8;transition:color .15s}
.hd-nav a:hover{color:#fff}
.hd-cta{position:absolute;right:16px;background:#d1fe17;color:#131517;font-size:16px;font-weight:600;
  letter-spacing:-.16px;padding:14px 24px;border-radius:12px;
  box-shadow:inset 0 -3px 0 rgba(130,155,25,.55),0 4px 14px rgba(209,254,23,.18);transition:filter .15s}
.hd-cta:hover{filter:brightness(1.05)}

/* ===================== HERO ===================== */
.hero{background:#0f1113;--pw:clamp(1007px,70vw,1600px)}
.hero .wrap{height:calc(508px + var(--pw) * 0.59185)}
/* glow centered on a fixed point so it can grow with the viewport without drifting;
   stays 1520px (Figma) at 1440, scales up on wider screens */
.hero-glow{position:absolute;left:50%;top:696px;transform:translate(-50%,-50%);
  width:clamp(1520px,92vw,2300px);height:auto;z-index:0;pointer-events:none}
.hero-title{position:absolute;top:75px;left:0;right:0;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:64px;line-height:72px;letter-spacing:-1.28px;text-transform:uppercase;text-align:center;color:#d1fe17;z-index:3}
.hero-sub{position:absolute;top:231px;left:50%;transform:translateX(-50%);width:592px;text-align:center;
  font-size:16px;font-weight:400;line-height:24px;letter-spacing:-.16px;color:rgba(255,255,255,.6);z-index:3}
.hero-pills{position:absolute;top:303px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:6px 14px 6px 10px;border-radius:56px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:14px;font-weight:500;
  color:rgba(255,255,255,.8);white-space:nowrap}
.pill-ic{width:16px;height:16px;flex:0 0 16px}
.hero-btn{position:absolute;top:373px;left:50%;transform:translateX(-50%);background:#d1fe17;color:#131517;
  font-size:16px;font-weight:600;letter-spacing:-.16px;padding:14px 24px 16px;border-radius:12px;z-index:3;
  box-shadow:inset 0 -3px 0 rgba(130,155,25,.5),0 8px 30px rgba(209,254,23,.18)}
/* fluid player: width scales with viewport (~70vw, =1007px at 1440); internals on cqw */
.hero-video{position:absolute;left:50%;top:468px;transform:translateX(-50%);
  width:var(--pw);aspect-ratio:1007/596;padding:10px 8px 8px;z-index:2;
  display:flex;flex-direction:column;container-type:inline-size;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:.5px solid rgba(255,255,255,.2);backdrop-filter:blur(4px)}
.vid-bar{flex:0 0 auto;height:1.8cqw;display:flex;align-items:center;padding:0 1.6cqw 0 1.2cqw}
.vid-time{font-family:'IBM Plex Mono',monospace;font-size:1.2cqw;letter-spacing:.14cqw;color:rgba(255,255,255,.5);text-transform:uppercase}
.vid-name{flex:1;text-align:center;font-size:1.2cqw;font-weight:500;color:rgba(255,255,255,.2)}
.vid-vol{display:flex;align-items:center}
.vid-vol svg{width:1.4cqw;height:1.4cqw}
.vid-still{position:relative;flex:1;width:100%;margin-top:1cqw;border-radius:1.6cqw;overflow:hidden;border:1px solid rgba(255,255,255,.2)}
.vid-media{width:100%;height:100%;object-fit:cover;display:block}
/* hero countdown / "begins on" overlay */
.vid-overlay{position:absolute;left:4.5cqw;right:4.5cqw;bottom:2.4cqw;height:10cqw;border-radius:2cqw;
  background:rgba(20,20,22,.45);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;padding:0 2.4cqw}
.vo-label{font-size:1.6cqw;font-weight:500;color:rgba(255,255,255,.55);margin-bottom:.6cqw}
.vo-next{font-size:2.2cqw;font-weight:600;letter-spacing:-.03cqw;color:#fff}
.vo-count{display:flex;align-items:center;gap:.6cqw}
.vo-box{min-width:6.2cqw;height:6.4cqw;border-radius:1.6cqw;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:3.4cqw;letter-spacing:-.1cqw;color:rgba(255,255,255,.92)}
.vo-sep{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.8cqw;color:rgba(255,255,255,.3)}
/* timer states — only .vo-s1 is shown; .vo-s2 / .vo-s3 are kept in the markup but hidden */
.vid-overlay[hidden]{display:none}
.vo-s2{background:radial-gradient(150% 150% at 72% 50%,rgba(46,184,68,.22),rgba(0,0,0,.24))}
.vo-s3{background:radial-gradient(130% 170% at 22% 88%,rgba(255,0,91,.26),rgba(0,0,0,.28))}
.vo-label.vo-green{color:#2eb844}
.vo-next.vo-live{display:flex;align-items:center;gap:.8cqw;color:#ff005b}
.vo-dot{flex:0 0 auto;width:.9cqw;height:.9cqw;min-width:8px;min-height:8px;border-radius:50%;background:#ff005b;box-shadow:0 0 8px rgba(255,0,91,.6)}
.vo-enter{flex:0 0 auto;background:#d1fe17;color:#131517;font-family:'Inter',sans-serif;font-weight:600;
  letter-spacing:-.16px;border-radius:1.2cqw;white-space:nowrap;transition:filter .15s;
  font-size:clamp(13px,1.8cqw,20px);padding:clamp(9px,1.3cqw,14px) clamp(16px,2.2cqw,26px)}
.vo-enter:hover{filter:brightness(1.05)}

/* ===================== HOW TO (coded cards) ===================== */
.howto .wrap{height:874px}
.howto .sec-title{position:absolute;top:80px;left:0;right:0}
.howto-row{position:absolute;top:192px;left:60px;display:flex;gap:30px}
.hcard{position:relative;width:420px;height:602px;border-radius:24px;overflow:hidden;
  background:#0f1113;border:1px solid rgba(255,255,255,.08)}
.hcard-head{position:absolute;top:24px;left:30px;right:24px;font-family:'Inter',sans-serif;
  font-weight:500;font-size:24px;line-height:28px;letter-spacing:-.3px;color:#fff;z-index:2}
.hcard-desc{position:absolute;top:60px;left:30px;right:24px;font-family:'Inter',sans-serif;
  font-weight:500;font-size:16px;line-height:24px;color:rgba(255,255,255,.6);z-index:2}
.hcard-illus{position:absolute;top:164px;left:20px}
.hcard-illus.m0{width:441px;height:448px}
.hcard-illus.m1{width:430px;height:580px}
.hcard-illus.m2{width:1216px;height:auto}

/* ===================== SCHEDULE (coded cards) ===================== */
.schedule{padding:80px 0 96px}
.sched-tabs{display:flex;gap:12px;justify-content:center;margin:32px 0 56px}
.tab{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:104px;font-size:16px;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);cursor:pointer;
  font-family:'Inter',sans-serif;transition:background .15s,color .15s}
.tab:hover{color:rgba(255,255,255,.9)}
.tab.active{background:#fff;color:#131517;border-color:rgba(0,0,0,.2)}
.sched-panel{display:none}
.sched-panel.active{display:block}
.sched-row{display:flex;gap:20px;justify-content:center}
.scard{width:428px;min-height:546px;border-radius:20px;padding:17px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.06)}
.scard-badges{display:flex;gap:8px;align-items:center;height:32px;margin-bottom:16px}
.sbadge{display:inline-flex;align-items:center;gap:6px;height:32px;border-radius:24px;font-size:14px;font-weight:500;font-family:'Inter',sans-serif;white-space:nowrap}
.sbadge.cat{background:#d1fe17;color:#000;padding:6px 14px 6px 10px}
.sbadge.date{background:rgba(255,255,255,.1);color:#fff;padding:6px 14px 6px 12px;border:1px solid rgba(255,255,255,.08)}
.sbadge svg{flex:0 0 16px}
.scard-illus{width:394px;height:300px;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.15);background:#131416}
.scard-illus img{width:100%;height:100%;object-fit:cover}
.scard-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;line-height:30px;color:#fff;margin:24px 0 6px}
.scard-desc{font-size:16px;font-weight:400;line-height:24px;color:#898a8b}

/* ===================== REWARD ===================== */
.reward{background:#0f1113}
.reward .wrap{height:auto;display:flex;flex-direction:column;align-items:center;padding:80px 0 90px}
.rw-title{width:692px;max-width:90%;height:auto}
.rw-desc{text-align:center;max-width:640px;margin:20px 0 0;padding:0 24px;font-size:18px;font-weight:400;line-height:26px;color:rgba(255,255,255,.5)}
.rw-panel{position:relative;width:1312px;max-width:calc(100% - 128px);margin-top:40px}
.rw-panel-img{width:100%;height:auto;display:block}
.rw-btn{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);display:inline-block;
  background:#d1fe17;color:#131517;font-size:16px;font-weight:600;letter-spacing:-.16px;
  padding:14px 28px 16px;border-radius:12px;white-space:nowrap;
  box-shadow:inset 0 -3px 0 rgba(130,155,25,.5),0 8px 30px rgba(0,0,0,.35);transition:filter .15s}
.rw-btn:hover{filter:brightness(1.05)}

/* ===================== FAQ ===================== */
.faq{background:#0f1113;overflow:hidden}
.faq-stars{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1440px;
  opacity:.5;pointer-events:none;z-index:0}
.faq .wrap{height:692px;position:relative;z-index:1}
.faq-title{position:absolute;top:100px;left:0;right:0}
.faq-sub{position:absolute;top:164px;left:0;right:0;text-align:center;font-size:18px;font-weight:400;color:rgba(255,255,255,.5)}
.faq-list{position:absolute;top:248px;left:360px;width:720px}
.faq-item{border-bottom:1px solid rgba(255,255,255,.1)}
.faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:72px;font-family:'Inter',sans-serif;font-size:18px;font-weight:600;color:#fff;text-align:left}
.faq-ic{flex:0 0 18px;transition:transform .25s}
.faq-item.open .faq-ic{transform:rotate(180deg)}
.faq-a{font-size:14px;font-weight:500;line-height:21px;color:#898a8b;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s ease,opacity .25s ease,padding .3s ease}
.faq-item.open .faq-a{max-height:240px;opacity:1;padding-bottom:24px}
.faq-item.open .faq-q{height:56px;padding-top:8px}

/* ===================== JOIN / ELEVATE ===================== */
.join{background:#0f1113;padding:147px 0;display:flex;justify-content:center}
.join-card{position:relative;width:1280px;max-width:calc(100% - 160px);height:630px;border-radius:30px;overflow:hidden;background:#0c0c0e}
.join-aurora{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.join-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px);
  background-size:14px 14px;mix-blend-mode:overlay;opacity:.5}
.join-content{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px}
.join-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:48px;line-height:56px;letter-spacing:-.96px;
  text-transform:uppercase;text-align:center;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.join-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;color:#131517;border-radius:61px;padding:13px 24px;
  font-size:15px;font-weight:600;letter-spacing:-.14px;transition:transform .15s,box-shadow .15s;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.join-btn:hover{transform:translateY(-1px);box-shadow:0 12px 36px rgba(0,0,0,.35)}
.join-btn svg{width:24px;height:24px}

/* ===================== FOOTER (full width) ===================== */
.footer{background:#d1fe17;color:#131517}
.ft-main{padding:40px 40px 40px;display:flex;flex-direction:column}
.ft-top{display:flex;align-items:flex-start;gap:48px}
.ft-head{flex:1 1 auto;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:40px;line-height:48px;letter-spacing:-.8px;color:#131517}
.ft-cols{flex:0 0 56%;display:flex;justify-content:space-between;gap:32px}
.ft-col{display:flex;flex-direction:column}
.ft-ch{font-size:16px;font-weight:500;color:rgba(46,48,49,.48);margin-bottom:14px}
.ft-col a{font-size:16px;font-weight:500;color:#131517;margin-bottom:13px;width:fit-content}
.ft-col a:hover{opacity:.6}
.ft-bottomrow{display:flex;justify-content:space-between;align-items:flex-end;margin-top:96px}
.ft-contact{display:flex;flex-direction:column;gap:8px}
.ft-contact a,.ft-contact span{font-size:16px;font-weight:500;color:#131517}
.ft-social{display:flex;gap:24px}
.ft-social a{font-size:16px;font-weight:500;color:#131517}
.ft-social a:hover{opacity:.6}
.ft-bottom{background:#0f1113;color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:space-between;height:68px;padding:0 40px}
.ft-bottom span{font-size:14px}
.ft-legal{display:flex;gap:24px}
.ft-legal a{font-size:14px;color:rgba(255,255,255,.5)}
.ft-legal a:hover{color:#fff}

/* =====================================================================
   RESPONSIVE — fluid reflow below 1440px (desktop stays pixel-fixed ≥1440)
   ===================================================================== */
@media (max-width:1439px){
  .wrap{width:100%;max-width:1340px;padding:0 clamp(20px,3vw,40px)}
  .sec-title,.faq-title{font-size:clamp(30px,5vw,48px);letter-spacing:-1px}

  /* HEADER */
  .header .wrap{padding:0 clamp(16px,3vw,40px)}
  .hd-cta{right:clamp(16px,3vw,40px)}

  /* HERO -> flow column */
  .hero .wrap{height:auto;display:flex;flex-direction:column;align-items:center;
    padding:clamp(48px,7vw,80px) clamp(20px,4vw,40px) clamp(56px,7vw,90px)}
  .hero-title,.hero-sub,.hero-pills,.hero-btn,.hero-video{position:static;transform:none;left:auto;right:auto;top:auto}
  .hero-title{font-size:clamp(40px,8vw,64px);line-height:1.06}
  .hero-sub{width:100%;max-width:592px;margin-top:24px}
  .hero-pills{margin-top:28px;flex-wrap:wrap;justify-content:center;gap:10px}
  .hero-btn{margin-top:28px}
  .hero-video{width:100%;max-width:1007px;margin-top:clamp(40px,5vw,56px)}
  .hero-glow{position:absolute;top:clamp(80px,12vw,200px);width:min(1100px,150vw);z-index:0}
  /* video chrome + countdown: flexible height, viewport-scaled (fixes broken timer on mobile) */
  .vid-bar{height:auto;padding:7px 14px 0}
  .vid-time,.vid-name{font-size:clamp(9px,1.1vw,12px);letter-spacing:.4px}
  .vid-vol svg{width:clamp(12px,1.4vw,16px);height:auto}
  .vid-still{margin-top:8px;border-radius:clamp(8px,1.2vw,16px)}
  .vid-overlay{height:auto;left:3.2%;right:3.2%;bottom:3.2%;padding:12px 16px;border-radius:14px;gap:14px;align-items:center}
  .vo-label{font-size:clamp(11px,1.3vw,16px);margin-bottom:2px}
  .vo-next{font-size:clamp(13px,1.7vw,22px);line-height:1.2}
  .vo-count{gap:clamp(4px,.7vw,8px)}
  .vo-box{min-width:clamp(34px,4.4vw,62px);height:clamp(38px,4.8vw,64px);font-size:clamp(18px,3vw,34px);border-radius:clamp(8px,1.2vw,16px);letter-spacing:-.5px}
  .vo-sep{font-size:clamp(14px,2.2vw,28px)}

  /* HOW TO -> wrapping cards */
  .howto .wrap{height:auto;display:flex;flex-direction:column;align-items:center;padding:clamp(56px,7vw,80px) clamp(20px,4vw,40px)}
  .howto .sec-title{position:static;margin-bottom:40px}
  .howto-row{position:static;flex-wrap:wrap;justify-content:center;gap:24px;width:100%}
  .hcard{flex:1 1 300px;max-width:420px;height:auto;min-height:0;overflow:hidden}
  .hcard-head{position:static;padding:24px 24px 0}
  .hcard-desc{position:static;padding:8px 24px 0}
  .hcard-illus,.hcard-illus.m0,.hcard-illus.m1,.hcard-illus.m2{position:static;width:100%;height:240px;
    object-fit:cover;object-position:top;margin:18px 0 0;left:auto}

  /* SCHEDULE */
  .sched-row{flex-wrap:wrap;gap:20px;align-items:stretch}
  .scard{flex:1 1 300px;max-width:428px;width:auto;min-height:0;display:flex;flex-direction:column}
  /* robust illustration: let the img define its own height (intrinsic 394:300) — no aspect-ratio/% collapse */
  .scard-illus{width:100%;height:auto;aspect-ratio:auto}
  .scard-illus img{width:100%;height:auto;object-fit:contain}

  /* REWARD */
  .reward .wrap{padding:clamp(56px,7vw,80px) clamp(20px,4vw,40px)}
  .rw-title{width:min(560px,86%)}
  .rw-desc{font-size:16px;line-height:24px}
  .rw-panel{max-width:100%}

  /* FAQ -> centered flow */
  .faq{overflow:hidden}
  .faq .wrap{height:auto;display:flex;flex-direction:column;align-items:center;padding:clamp(64px,8vw,100px) clamp(20px,4vw,40px)}
  .faq-title,.faq-sub,.faq-list{position:static}
  .faq-sub{margin-top:12px}
  .faq-list{width:100%;max-width:720px;margin-top:40px}
  .faq-stars{width:100%;height:100%;object-fit:cover}

  /* JOIN */
  .join{padding:clamp(48px,7vw,90px) clamp(16px,4vw,40px)}
  .join-card{width:100%;max-width:760px;height:auto;min-height:min(630px,62vw);aspect-ratio:auto}
  .join-aurora{height:100%}
  .join-content{position:absolute;padding:24px}
  .join-title{font-size:clamp(30px,6vw,48px);line-height:1.12}

  /* FOOTER -> stacked */
  .ft-main{padding:clamp(40px,5vw,56px) clamp(20px,4vw,40px)}
  .ft-top{flex-direction:column;gap:40px}
  .ft-head{font-size:clamp(30px,5vw,40px);line-height:1.15}
  .ft-cols{flex:none;width:100%;flex-wrap:wrap;gap:28px 40px;justify-content:flex-start}
  .ft-col{flex:1 1 160px;min-width:140px}
  .ft-bottomrow{flex-direction:column;align-items:flex-start;gap:24px;margin-top:56px}
  .ft-social{flex-wrap:wrap}
  .ft-bottom{padding:0 clamp(20px,4vw,40px)}
}

/* ---- phones ---- */
@media (max-width:600px){
  .hd-nav{display:none}                       /* hide center nav on phones */
  .hd-cta{font-size:14px;padding:11px 16px}

  .hero-title{font-size:clamp(28px,9vw,46px)}
  .hero-sub{font-size:15px}
  .hero-pills{gap:8px}
  .pill{font-size:13px;height:30px;padding:5px 12px 5px 9px}
  .sched-tabs .tab{padding:0 16px;font-size:14px}

  /* HOW TO -> single column, illustration cropped to a short window (keeps cards compact) */
  .howto-row{flex-direction:column;align-items:center}
  .hcard{flex:1 1 auto;width:100%;max-width:440px;min-height:0}
  .hcard-illus,.hcard-illus.m0,.hcard-illus.m1,.hcard-illus.m2{position:static;width:100%;height:230px;
    object-fit:cover;object-position:top;margin-top:18px;left:auto}

  /* SCHEDULE -> horizontal swipe carousel with smooth snap (instead of a long stack) */
  .sched-row{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;gap:14px;padding-bottom:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sched-row::-webkit-scrollbar{display:none}
  .scard{flex:0 0 84%;max-width:340px;width:auto;scroll-snap-align:start}

  /* video overlay: compact so it doesn't dominate the small mobile player */
  .vid-overlay{flex-direction:column;align-items:center;gap:4px;padding:6px 10px;text-align:center;bottom:2.5%;border-radius:10px}
  .vo-label{font-size:9px;margin-bottom:0;line-height:1.1}
  .vo-next{font-size:11px;line-height:1.15}
  .vo-count{justify-content:center;gap:5px}
  .vo-box{flex:0 0 auto;min-width:36px;height:24px;font-size:14px;border-radius:6px}
  .vo-sep{display:none}

  /* JOIN -> smaller heading, taller card so text fits */
  .join-card{min-height:340px}
  .join-content{padding:32px 20px}
  .join-title{font-size:clamp(26px,7vw,36px);line-height:1.16}
  .join-btn{font-size:14px}

  /* reward button: compact + lower so it sits on the panel floor on small screens */
  .rw-btn{font-size:13px;padding:10px 18px;bottom:14px}

  .faq-q{font-size:16px}
  .ft-cols{gap:24px 24px}
  .ft-col{flex:1 1 45%;min-width:120px}
  .ft-bottom{flex-direction:column;height:auto;gap:12px;align-items:flex-start;padding:18px clamp(20px,4vw,40px)}
}